cancel
Showing results for 
Search instead for 
Did you mean: 

visualization of my graph with neovis.js tool

verachkaverachk
Graph Buddy

Hello dear community,

I hope you could help me understand better the following issue, it's very important for me to understand.

I'm trying to visualize my existing graph in neo4j with neovis.js tool. The purpose of the graph is just to calculate the functions you can see in red the following image.(the idea is that a real node for me, is the one I wanna see in the visualization, the "CellInstance" and he is connected in neo4j to attributes of: CellType(if it is a simple input/addition/substratioc,etc), the function, and a variable in green, these node I want to see as properties but not as more nodes in the visualiztion). I try understand what is correct way to use my entities and in which way will it be right to implement it. 

my graph looks like this for example in neo4j:

verachkaverachk_0-1657826785582.png

verachkaverachk_0-1657827852556.png

 

 

my purpose is to see in my visualization only the orange node(CellInstance) and the graph node(subgraph instance in green here) it connected to, also i want in someway to show what parameters entering to my following CellInstance (maybe on the relations) and that cellInstance will have the function it represent.

here is an example of what I've tried to do in the visualization side:

verachkaverachk_1-1657827562906.png

and what i've wrote meanwhile in the code

<!doctype html>
<html>
<head>
    <title>Neovis.js Simple Example</title>
    <style type="text/css">
        html, body {
            font: 16pt arial;
        }

        #viz {
            width: 900px;
            height: 700px;
            border: 1px solid lightgray;
            font: 22pt arial;
        }

    </style>

    <!-- FIXME: load from dist -->
    <script src="https://unpkg.com/neovis.js@2.0.2"></script>


    <script
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <script type="text/javascript">
        // define config car
        // instantiate nodevis object
        // draw

        var viz;

        function draw() {
            var config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: "bolt://localhost:7687",
                    serverUser: "neo4j",
                    serverPassword: "retinax"
                },
                labels: {
                    SubGraphInstance: {
                        label: "name",
                        value: "pagerank",
                        group: "community"
                    },
                    CellInstance: {
                        label: "name",
                        value: "pagerank",
                        group: "community"
                    }

                },
               
                relationships: {
                    FROM_GRAPH: {
                    caption: true,
                    thickness: "count",
                   
                },
                FROM_CELL: {
                    caption: true,
                    thickness: "count",
                },
                CELL_TYPE_FUNCTION: {
                    caption: true,
                    thickness: "count",
                },
                FUNCTION_INPUT_VARIABLE: {
                    caption: true,
                    thickness: "count",
                },
                FUNCTIONS_VARS: {
                    caption: true,
                    thickness: "count",
                },
                FUNCTION_INPUT_VARIABLE: {
                    caption: true,
                    thickness: "count",
                },
                TO_CELL: {
                    caption: true,
                    thickness: "count",
                },

                },
                initialCypher: "MATCH (n)-[r]->(m) RETURN n,r,m"
               
            };

            viz = new NeoVis.default(config);
            viz.render();
            console.log(viz);

        }
    </script>
</head>
<body onload="draw()">
<div id="viz"></div>


Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
<input type="submit" value="Submit" id="reload">
<input type="submit" value="Stabilize" id="stabilize">


</body>

<script>
    $("#reload").click(function () {

        var cypher = $("#cypher").val();

        if (cypher.length > 3) {
            viz.renderWithCypher(cypher);
        } else {
            console.log("reload");
            viz.reload();

        }

    });

    $("#stabilize").click(function () {
        viz.stabilize();
    })

</script>
</html>
 
 
thank you ,
Vera.
0 REPLIES 0