Neovis In Grafana Panel

myrulezzz commented 1 year ago

Hi is it possible to visualize neovis in grafana panel? I have created a new panel and tried html graphics plugin. i have paste my html code in the html tab. When i save i see that the panel gets the size of my html code but is not showing any nodes.

thebestnom commented 1 year ago

There is no reason that it shouldn't work 😅 can you maybe test the same thing outside of grafana? So you could more easily test and fix and afterward embed it in 😅

myrulezzz commented 1 year ago

Hi in html file is working as expected.when i paste the code in grafana text plugin or html graphic plugin i see that there is a scroll up and and scroll down in the panel but the nodes are not coming. I have tried the same with custom component from Retool.Chart.js chart in html format is working perfect.Same thing with neovis is not working.In retool as well it seems to be a scrol down in the panel but is empty

myrulezzz commented 1 year ago

here is my code for your reference @thebestnom

<!doctype html>
<html>
<head>
    <title>Neo4J Graph Explorer</title>
    <style type="text/css">
        html, body {
            font: 16pt arial;
        }

        #viz {
            width: 1900px;
            height: 1700px;
            border: 1px solid lightgray;
            font: 10pt arial;
        }
    </style>
    <script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
    <script type="text/javascript">
        const relations = "<-[r:BELONGS_TO*1..3]->";
        const CFG = {
            server: {
                url: "bolt://1.1.1.1.1:7687",
                user: "myuser",
                password: "mypassword",
            },
            query: {
                initial:   "MATCH (d:Department)<-[r:BELONGS_TO]-(e:Employee) RETURN d,r,e" 
                        },
            render: {
                node: {
                    active: { color: '#800080', size: 15 },
                    inactive: { color: '#55a', size: 10 },
                    fontSize: 14
                },
                link: {
                    color: '#888'
                }
            }
        }
        let viz;
        let currentId;
        function draw() {
            const config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: CFG.server.url,
                    serverUser: CFG.server.user,
                    serverPassword: CFG.server.password,
                },
                visConfig: {
                    nodes: {
                        shape: 'dot',
                        size: CFG.render.node.inactive.size,
                        font: { size: CFG.render.node.fontSize },
                        color: CFG.render.node.inactive.color
                    },
                    edges: {
                        arrows: {
                            to: {enabled: true},
                        },
                        color: CFG.render.link.color,
                    },
                    physics: {
                        solver: 'forceAtlas2Based'
                    }
                },
                labels: {
                    Department: {
                        label: "name",
                        title: "name",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: { color: nodeColor, size: nodeSize, physics: nodePhysics }
                        },
                    },
                    Employee: {
                        label: "name",
                        title:  "title",

                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: { color: nodeColor, size: nodeSize, physics: nodePhysics,   }
                        },
                    }
                },
            };
            render(config);
        }
        function nodeColor(node) {
            if (node.identity === currentId) return CFG.render.node.active.color;
            if (node.labels[0] === "Department") return "#df00df";
            if (node.labels[0] === "Employee") return "#0095df";
          }
          function nodeSize(node) {
            if (node.identity === currentId) return CFG.render.node.active.size;
            if (node.labels[0] === "Department") return CFG.render.node.inactive.size + 15;
            return CFG.render.node.inactive.size;
        }
        function nodePhysics(node) {
            if(node.identity === currentId) return false;
            return true;
        }
        function cypherQuery() {
            if(currentId) return CFG.query.byId(currentId);
            return CFG.query.initial;
        }
        function render(config) {
            viz = new NeoVis.default(config);
            viz.renderWithCypher(cypherQuery());
            viz.registerOnEvent("completed", (e) => {
                viz.network.on("click", (e) => {
                    if(e.nodes[0]) {
                        currentId = e.nodes[0];
                        render(config);
                    }
                });
            });
        }
    </script>
</head>
<body onload="draw()">
    <div id="viz"></div>
</body>
</html>

thebestnom commented 1 year ago

It doesn't work?

neo4j-contrib / neovis.js

Neovis In Grafana Panel #316