Render from database without reload

tingk415 commented 1 year ago

Hi, I watched your awsome video from youtube. I am just trying to reimplement the react version such that the query from database can be executed without clicking the reload button. I tried something below but it doesnt work. It gives the error TypeError: Cannot read properties of undefined (reading 'filter'). Can you please help? Thanks

componentDidMount() { var that=this const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true}); const session = driver.session({database:"gameofthrones"});

session
  .run('MATCH (n)-[r:INTERACTS1]->(m) RETURN { id: id(n), label:head(labels(n)), community:n.louvain, caption:n.name, size:n.pagerank } as source, { id: id(m), label:head(labels(m)), community:n.louvain, caption:m.name, size:m.pagerank } as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end} as rel LIMIT $limit', {limit: neo4j.int(5000)})
  .then(function (result) {
    const nodes = {}
    const links = result.records.map(r => { 
       var source = r.get('source');source.id = source.id.toNumber();
       nodes[source.id] = source;
       var target = r.get('target');target.id = target.id.toNumber();
       nodes[target.id] = target;
       var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
       return Object.assign({source:source.id,target:target.id}, rel);
    });
  that.setState({ data: {nodes, links}, loading: false });
})

}

render() { return(

) } }

tingk415 commented 1 year ago

There is something wrong with the code formatting so i m uploading an image

nemesgyadam commented 4 months ago

This works for me:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Force Graph</title>
  <style> body { margin: 0; } </style>
  <script src="https://unpkg.com/3d-force-graph"></script>
  <script src="http://unpkg.com/neo4j-driver"></script>
</head>
<body>
  <div id="3d-graph"></div>

  <script>
      const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
    const session = driver.session({ database: "gameofthrones" });

    let nodes = {};
    let links = new Set();

    const updateGraph = () => {
      const start = new Date();
      session
 .run('MATCH (n)-[:INTERACTS1]->(m) RETURN id(n) as source, id(m) as target LIMIT $limit', {limit: neo4j.int(5000)})        .then(function (result) {
          const newNodes = {};
          const newLinks = new Set();

          result.records.forEach(r => {
            const source = r.get('source').toNumber();
            const target = r.get('target').toNumber();

            newNodes[source] = { id: source };
            newNodes[target] = { id: target };
            newLinks.add(`${source}-${target}`);
          });

          // Update nodes
          Object.keys(newNodes).forEach(id => {
            if (!nodes[id]) {
              nodes[id] = newNodes[id];
            }
          });

          // Remove old nodes
          Object.keys(nodes).forEach(id => {
            if (!newNodes[id]) {
              delete nodes[id];
            }
          });

          // Update links
          newLinks.forEach(link => {
            if (!links.has(link)) {
              links.add(link);
            }
          });

          // Remove old links
          links.forEach(link => {
            if (!newLinks.has(link)) {
              links.delete(link);
            }
          });

          const gData = {
            nodes: Object.values(nodes),
            links: Array.from(links).map(link => {
              const [source, target] = link.split('-').map(Number);
              return { source, target };
            })
          };

          if (window.Graph) {
            window.Graph.graphData(gData);
          } else {
            window.Graph = ForceGraph3D()(document.getElementById('3d-graph')).graphData(gData);
          }

          console.log(Object.keys(nodes).length + " nodes and " + links.size + " links updated in " + (new Date() - start) + " ms.");
        })
        .catch(function (error) {
          console.log("Error: " + error);
        });
    };

    // Initial load
    updateGraph();

    // Set interval to update the graph every 10 seconds (10000 milliseconds)
    setInterval(updateGraph, 10000);
  </script>
</body>
</html>

jexp / neo4j-3d-force-graph

Render from database without reload #29