NVL(Neo4j Visualisation Library) React wrappers rendering issue

Neo4j Graph Platform Visualization
1

I am discovering more about the capabilities of the Neo4j Visualisation Library, I've made a React application and am gathering graph data from the Neo4j database.
Purpose to visualize the graph's node and relationship using NVL InteractiveNvlWrapper in UI

This InteractiveNvlWrapper does not work and provide the graphs on page. If I use Graphwrapper, it works fine. I am not sure whether is there any recommendations/configurations are missing.

import React, { useEffect, useState } from 'react';
import neo4j, { driver } from 'neo4j-driver';
import { BasicNvlWrapper } from '@neo4j-nvl/react';

function App() {
const [data, setData] = useState({ nodes: , rels: });

useEffect(() => {
const neo4jDriver = driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', ''));
const session = neo4jDriver.session();

session.run('MATCH (n)-[r]->(m) RETURN n, r, m limit 1').then(result => {
  const nodesN = result.records.map(record => transformNode(record.get('n')));
  const nodesM = result.records.map(record => transformNode(record.get('m')));
  const nodes = [...nodesN, ...nodesM];
  console.log("nodes===>", nodes);
  const relationships = result.records.map(record => transformRelationship(record.get('r')));
  console.log("relationships===>", relationships);
  setData({ nodes, rels: relationships });
});

}, );

const transformNode = (node) => ({
id: node.identity.toString(),
label: node.labels[0],
properties: node.properties,
});

const transformRelationship = (relationship) => ({
id: relationship.identity.toString(),
from: relationship.start.toString(),
to: relationship.end.toString(),
type: relationship.type,
properties: relationship.properties,
});

return (

  <InteractiveNvlWrapper 
    nodes={data.nodes} 
    rels={data.rels} 
    nvlOptions={{ initialZoom: 2 }} 
    nvlCallbacks={{ onLayoutDone: () => console.log ('layout done') }}
  />
</div>

);
}

export default App;

Many thanks !

2

Hi spati112, thanks for reaching out!

Your implementation looks great, I can't see any issues with it by just looking at the code.

Do you see any errors in the console when running this code? Also, could you try inspecting the DOM element you are placing the InteractiveNvlWrapper in double-check that its height isn't 0?

Thank you!
Clemens