CODEWITHSUNDEEP
javascriptreactjsgraphmouseclick-eventneovis
Ahmed
Ahmed

Reputation: 3270

React: Adding click listener to Neovis.js

I am using this React Neovis component to connect to Neo4j, to create a graph which works. However I need to add a click listener to each element on the graph so that I can show 2nd level information related to a particular node (or an item) in the graph. Is there a way to add a Click event/listener to NeoVis in Javascript?

For the code, please use the example in this documentation.

enter image description here

Upvotes: 1

Views: 870

Answers (1)

Peet5.1
Peet5.1

Reputation: 11

You may have already find the answer but, I respond for all of future ones who will find this page.

If you want to have as a preview on the div of neoVis.js :

    function Molecule(newmol) {
        var config = {
            containerId: "viz",
            neo4j: {
                serverUrl: "bolt://localhost:7687",
                serverUser: "neo4j",
                serverPassword: "12345678",
            },

            visConfig: {
            ## whatever config
            },
          labels: {
            "YOUR_NODE_NAME": {
                [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                    static: {
                        value: 3.5,
                        color: '#F0A1BF' 
                    },
                    function: {
                        title: NeoVis.objectToTitleString
                    }#this "function" will add a little square with the infos in the db
                }
            }
          }
       }
    }

If you want to add an event on click of a node.

viz.registerOnEvent("clickNode", function (params) {
    #do what you want in java-script
    #for exemple this will highlight the cell that I clicked on my table called "table2"
    params.event = "[original event]";
    var json = JSON.stringify(params, null, 4);
    var json2 = JSON.parse(json);

    var table = document.getElementById('table2');
    var rows = table.getElementsByTagName('tr');

    for (var i = 0; i < rows.length; i++) {
      var cell = rows[i].querySelector('.highlight-cell');
      if (cell && cell.innerText === json2.node.raw.properties.name) {
        rows[i].style.backgroundColor = 'yellow';
        rows[i].scrollIntoView({ behavior: 'smooth', block: 'center' });
      } else {
        rows[i].style.backgroundColor = ''; // Réinitialise la couleur des autres lignes
      }
    }
        });

Upvotes: 0

Related Questions