replace vega drawing by vis.js

resources/html/home.html

@@ -375,10 +375,11 @@
 {% style "/assets/font-awesome/css/all.css" %}
 {% style "/css/screen.css" %}
 
-{% script "/js/vendor/vega-4.4.0.js" %}
+{% style "/css/vendor/vis.min.css" %}
+{% script "js/vendor/vis.min.js" %}
+{% script "/assets/font-awesome/js/all.js" %}
 
 {% script "/js/home.js" %}
-{% script "/assets/font-awesome/js/all.js" %}
 
 <script type="text/javascript">
     var csrfToken = "{{csrf-token}}";

resources/public/css/screen.css

@@ -26,3 +26,8 @@ body {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+#view {
+    height: 600px;
+    max-height: 100%;
+}

resources/public/js/graphing.js

@@ -1,13 +1,40 @@
-var view;
-
-vega.loader()
-    .load('/js/spec.json')
-    .then(function(data) { render(JSON.parse(data)); });
-
-function render(spec) {
-    view = new vega.View(vega.parse(spec))
-        .renderer('canvas')  // set renderer (canvas or svg)
-        .initialize('#view') // initialize view within parent DOM container
-        .hover()             // enable hover encode set processing
-        .run();
+var xhttp = new XMLHttpRequest();
+xhttp.onreadystatechange = function() {
+    if (this.readyState == 4 && this.status == 200) {
+        var responseData = this.responseText;
+        console.log(responseData);
+        loadGraph(JSON.parse(responseData));
+    }
+};
+xhttp.open("GET", "relations_zeroed", true);
+xhttp.send();
+
+
+function loadGraph(request_data) {
+
+    var nodes = new vis.DataSet(
+        request_data["nodes"].map(node => {
+            return {
+                id: node.index,
+                label: node.name.slice(0,30) + (node.name.length > 30 ? "..." : ""),
+                color: 'hsl('+Math.floor(Math.random()*361)+',50%,75%)'
+            };
+        })
+    );
+    var edges = new vis.DataSet(
+        request_data["links"].map(link => {
+            return {
+                from: link.source,
+                to: link.target
+            };
+        })
+    );
+
+    var container = document.getElementById("view");
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {};
+    var network = new vis.Network(container, data, options);
 }