yashasvi
/
neovis


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        html,
        body,
        input,
        textarea {
            font: 10pt arial;
        }

        /* #viz {
            width: 75%;
            height: 700px;
            border: 1px solid lightgray;
            font: 22pt arial;
            margin: 10px;
        } */

        label {
            display: inline-block;
            width: 10em;
        }

        * {
            box-sizing: border-box;
        }


        .column {
            float: left;
            width: 33.33%;
            padding: 10px;

        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        /* Change the link color on hover */
        li a:hover {
            background-color: #555;
            color: white;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="column">
            <ul>
                <li><a href="#patents">Patents</a></li>
                <li><a href="#experts">Experts</a></li>
                <li><a href="#parties">Parties</a></li>
                <li><a href="#inventor">Inventor</a></li>
                <li><a href="#attorneys">Attorneys</a></li>
                <li><a href="#firm">Firm</a></li>
            </ul>
        </div>
        <div class="column">
            <h2>Graph</h2>
        </div>
        <div class="column">


            <div>
                <div>
                    <h3>Connection Details:</h3>

                    <label for="url">URL</label><input id="url" name="url" type="text"
                        value="bolt://localhost:7687" /><br />
                    <label for="user">Username</label><input id="user" name="user" type="text" value="neo4j" /><br />
                    <label for="pass">Password</label><input id="pass" name="pass" type="password" value="test" />
                </div>

                <div>
                    <h3>Styling Nodes:</h3>

                    <label for="label">Node-Label</label><input id="label" name="label" type="text"
                        value="Character" /><br />
                    <label for="caption">Label</label><input id="caption" name="caption" type="text"
                        value="name" /><br />
                    <label for="size">Size</label><input id="size" name="size" type="text" value="pagerank" /><br />
                    <label for="color">Color</label><input id="community" name="community" type="text"
                        value="community" />
                </div>


                <div>
                    <h3>Styling Relationship:</h3>

                    <label for="type">Relationship-Type</label><input id="type" name="type" type="text"
                        value="INTERACTS" /><br />
                    <label for="thickness">Thickness</label><input id="thickness" name="thickness" type="text"
                        value="weight" /><br />
                    <label for="rel_caption">Caption</label><input id="rel_caption" name="rel_caption" type="text"
                        value="" />
                </div>


                <div>
                    <h3>Cypher query: </h3>

                    <textarea rows="4" cols=50 id="cypher">MATCH (n)-[r:INTERACTS]->(m) RETURN n,r,m</textarea><br>

                    <input type="submit" value="Submit" id="reload">
                    <input type="submit" value="Stabilize" id="stabilize">
                </div>
            </div>
        </div>
    </div>
    <div>
        <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">

    </div>
    <script>
        $(document).ready(function () {
            draw();
        })
        $("#reload").click(function () {
            draw();
            /*
                    var cypher = $("#cypher").val();
            
                    if (cypher.length > 3) {
                        viz.renderWithCypher(cypher);
                    } else {
                        console.log("reload");
                        viz.reload();
                    }
            */
        });

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

    </script>

    <script type="text/javascript">
        var viz;

        function draw() {
            var config = {
                container_id: "viz",
                server_url: $("#url").val(),
                server_user: $("#user").val(),
                server_password: $("#pass").val(),
                labels: {},
                relationships: {},
                initial_cypher: $("#cypher").val()
            };
            config.labels[$("#label").val()] = {
                "caption": $("#caption").val(),
                "size": $("#size").val(),
                "community": $("#community").val(),
                //"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
            };
            config.relationships[$("#rel_type").val()] = {
                "thickness": $("#thickness").val(),
                "caption": $("#rel_caption").val(),
            }
            viz = new NeoVis.default(config);
            viz.render();
            console.log(viz);

        }
    </script>
    <script src="https://cdn.neo4jlabs.com/neovis.js/master/neovis.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>


</body>

</html>