CODEWITHSUNDEEP
javascriptneo4jsigma.js
LiliGeek
LiliGeek

Reputation: 57

How to expand node with Sigmajs and Neo4j database (doubleclick Mouse event)?

I'm using the Sigma.js library to create a webapp on top of a Neo4j graph database.

So, I have my graph with nodes and edges and I would like to expand nodes by double click event with javascript.

Can you help me to do this?

Thank you so much 

sigma.neo4j.cypher(
    {url :'http://localhost:7474', user: 'neo4j', password: 'neo4j'},
    'MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 100' ,
    {container:'graph-container'},


    function (s) {
        s.graph.nodes().forEach(function (node){


            if (node.neo4j_labels[0] === "Movies"){
            node.label = node.neo4j_data['movie'];
            node.color = '#68BDF6';
            node.size = 26;
            node.type = "star";
          }

            else if (node.neo4j_labels[0] === "Personn"){
            node.label = node.neo4j_data['personn'];
            node.type = "diamond";
            node.color = '#303A2B';
            node.size = 12;
          }


            console.log(s.graph.nodes());
            s.settings('touchEnabled', true);
            s.settings('mouseEnabled', true);
            s.settings('defaultEdgeLabelSize', 18);
            s.settings('defaultNodeLabelSize', 18);
            s.settings('animationsTime', 1000);





        s.graph.edges().forEach(function(e) {
                    //e.type = 'curvedArrow';
                    //e.color='#F00';
                e.originalColor = e.color;
                e.type = "curvedArrow";
                e.size=2;


                    // e.label = neo4j_type;
                //console.log(s.graph.edges())
            });

            s.refresh();


   });

Upvotes: 0

Views: 631

Answers (1)

logisima
logisima

Reputation: 7478

You have to bind the sigma event doubleClickNode like this :

s.bind("doubleClickNode", function(e) {
    var node = e.data.node;
    var query = 'MATCH (n)-[r]-(m) WHERE id(n)=' + node.id+ ' RETURN n,r,m';
    sigma.neo4j.cypher(
      neo4jConfig,
      query,
      function(graph) {
        // adding node if not existing
        graph.nodes.forEach(function (node){
            if(s.graph.nodes(node.id) === undefined) {
            s.graph.addNode(node);
          }
        });
        // adding edge if not existing
        graph.edges.forEach(function (edge){
            if(s.graph.edges(edge.id) === undefined) {
            s.graph.addEdge(edge);
          }
        });

       // apply style
        applyStyle(s);
      }
    );

  });

My complete example is available here : https://jsfiddle.net/sim51/qkc0g58o/34/

Before to use it, you need to accept Neo4j SSL certificate, by opening this link https://localhost:7473/browser and adding a security exception

Upvotes: 1

Related Questions