ooker777/test.html

## test.html
<!doctype html>
<html>
<head>
    <title>Neovis.js Simple Example</title>
    <style type="text/css">

        #viz {
            width: 100%;
            height: 100vh;
            border: 1px solid lightgray;
            font: 22pt arial;
        }

    </style>

    <!-- FIXME: load from dist -->
    <script type="text/javascript" src="node_modules/neovis.js/dist/neovis.js"></script>


    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            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: { // this can also be a Neo4J driver instance now instead of object
                    serverUrl: 'bolt://localhost:7687',
                    serverUser: 'neo4j',
                    serverPassword: 'a',
                    driverConfig: { // full driver config object by neo4j https://neo4j.com/docs/api/javascript-driver/current/function/index.html#configuration
                        encrypted: "ENCRYPTION_ON",
                        trust: "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES"
                    }
                },
                labels: {
                    Label: { // everything that is directly on this object gets mapped from the neo4j node
                        label: "name", // puts the property `name` from the neo4j node and puts it onto the label property of vis.js's node
                        value: "pagerank",
                        group: "community",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {// here you put node properties that aren't mapped directly from the neo4j node
                            cypher: { // everything here will map to the vis.js node object from a cypher query (like sizeCypher worked but for every property)
                                value: "MATCH (n) WHERE id(n) = $id MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
                            },
                            function: { // everything here will map function thats gets the neo4j node properties to a vis.js node property
                                title: NeoVis.objectToTitleHtml, // alternativly
                                title: (props) => NeoVis.objectToTitleHtml(props, ["name", "pagerank"])
                            },
                            static: { // everything here will be copied directly to the vis.js's node object
                                font: {
                                    size: 26,
                                    color: "#000000"
                                },
                                shape: "image",
                                image: 'https://visjs.org/images/visjs_logo.png'
                            }
                        }
                    }
                },
                relationships: {
                    RELATIONSHIP: { // same as node but mapped from neo4j relationship to vis.js edge
                        // full properties list can be found at https://visjs.github.io/vis-network/docs/network/edges.html
                        value: "wight",
                        // the default is now without caption
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {// here you put edge properties that aren't mapped directly from the neo4j relationship
                            cypher: {}, // same as label advance cypher
                            function: { // same as label advance function
                                title: NeoVis.objectToTitleHtml // putting caption on the title
                            },
                            static: {} // same as label advance static
                        }
                    }
                }
            }
			viz = new NeoVis.default(config);
			viz.render();
			console.log(viz);

		}
    </script>
</head>
<body onload="draw()">
<h2>Một hệ thống niềm tin</h2>
Cypher query: <textarea cols=50 id="cypher"></textarea><br>
<input type="submit" value="Submit" id="reload">
<input type="submit" value="Stabilize" id="stabilize">

<div id="viz"></div>

</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>
	<!doctype html>
	<html>
	<head>
	<title>Neovis.js Simple Example</title>
	<style type="text/css">

	#viz {
	width: 100%;
	height: 100vh;
	border: 1px solid lightgray;
	font: 22pt arial;
	}

	</style>

	<!-- FIXME: load from dist -->
	<script type="text/javascript" src="node_modules/neovis.js/dist/neovis.js"></script>


	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	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: { // this can also be a Neo4J driver instance now instead of object
	serverUrl: 'bolt://localhost:7687',
	serverUser: 'neo4j',
	serverPassword: 'a',
	driverConfig: { // full driver config object by neo4j https://neo4j.com/docs/api/javascript-driver/current/function/index.html#configuration
	encrypted: "ENCRYPTION_ON",
	trust: "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES"
	}
	},
	labels: {
	Label: { // everything that is directly on this object gets mapped from the neo4j node
	label: "name", // puts the property `name` from the neo4j node and puts it onto the label property of vis.js's node
	value: "pagerank",
	group: "community",
	[NeoVis.NEOVIS_ADVANCED_CONFIG]: {// here you put node properties that aren't mapped directly from the neo4j node
	cypher: { // everything here will map to the vis.js node object from a cypher query (like sizeCypher worked but for every property)
	value: "MATCH (n) WHERE id(n) = $id MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
	},
	function: { // everything here will map function thats gets the neo4j node properties to a vis.js node property
	title: NeoVis.objectToTitleHtml, // alternativly
	title: (props) => NeoVis.objectToTitleHtml(props, ["name", "pagerank"])
	},
	static: { // everything here will be copied directly to the vis.js's node object
	font: {
	size: 26,
	color: "#000000"
	},
	shape: "image",
	image: 'https://visjs.org/images/visjs_logo.png'
	}
	}
	}
	},
	relationships: {
	RELATIONSHIP: { // same as node but mapped from neo4j relationship to vis.js edge
	// full properties list can be found at https://visjs.github.io/vis-network/docs/network/edges.html
	value: "wight",
	// the default is now without caption
	[NeoVis.NEOVIS_ADVANCED_CONFIG]: {// here you put edge properties that aren't mapped directly from the neo4j relationship
	cypher: {}, // same as label advance cypher
	function: { // same as label advance function
	title: NeoVis.objectToTitleHtml // putting caption on the title
	},
	static: {} // same as label advance static
	}
	}
	}
	}
	viz = new NeoVis.default(config);
	viz.render();
	console.log(viz);

	}
	</script>
	</head>
	<body onload="draw()">
	<h2>Một hệ thống niềm tin</h2>
	Cypher query: <textarea cols=50 id="cypher"></textarea><br>
	<input type="submit" value="Submit" id="reload">
	<input type="submit" value="Stabilize" id="stabilize">

	<div id="viz"></div>

	</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>