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

@@ -25,4 +25,9 @@ body {
 @keyframes spin {
     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;
+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();
 
-vega.loader()
-    .load('/js/spec.json')
-    .then(function(data) { render(JSON.parse(data)); });
 
-function render(spec) {
+function loadGraph(request_data) {
-    view = new vega.View(vega.parse(spec))
+
-        .renderer('canvas')  // set renderer (canvas or svg)
+    var nodes = new vis.DataSet(
-        .initialize('#view') // initialize view within parent DOM container
+        request_data["nodes"].map(node => {
-        .hover()             // enable hover encode set processing
+            return {
-        .run();
+                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);
+}

resources/public/js/home.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
 
-    // Get all "navbar-burger" elements
+// Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
 
 // Check if there are any navbar burgers
     if ($navbarBurgers.length > 0) {
@@ -26,4 +26,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
 function removeThis(ele) {
     ele.parentNode.remove();
-}
+}