Support for node size choices in UI and reworked preferences load/sav…

…e to support dynamically changing options
lkarlslund · May 1, 2023 · 7eea5f0 · 7eea5f0
1 parent dbcca31
commit 7eea5f0
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 43 deletions.
diff --git a/modules/analyze/html/custom.js b/modules/analyze/html/custom.js
@@ -473,14 +473,6 @@ $(function () {
         },
     });
 
-    // Load preferences
-    loadprefs();
-
-    // Dynamically save preferences
-    $('[preference]').change(function () {
-        onchangepreference($(this));
-    });
-
     $('#graphlayout').change(function () {
         layout = $(this).val();
         if (cy) {
@@ -489,8 +481,16 @@ $(function () {
         }
     });
 
-    $('#graphlabels').change(function () {
-        cy.style().update();
+    $('#nodesizes').change(function () {
+        if (cy) {
+            applyNodeStyles(cy);
+        }
+    });
+
+    $('#nodelabels').change(function () {
+        if (cy) {
+            cy.style().update();
+        }
     });
 
     $.ajax({
@@ -635,3 +635,4 @@ $(function () {
     refreshStatus();
     // End of on document loaded function
 });
+
diff --git a/modules/analyze/html/extrafuncs.js b/modules/analyze/html/extrafuncs.js
@@ -0,0 +1,3 @@
+function normalize(value, min, max, newmin, newmax) {
+    return (value - min) * (newmax - newmin) / (max - min) + newmin;
+}
diff --git a/modules/analyze/html/graph.js b/modules/analyze/html/graph.js
@@ -387,27 +387,6 @@ cytostyle = [{
         "background-color": "red"
     }
 },
-{
-    selector: 'node[[indegree>4]]',
-    style: {
-        width: 40,
-        height: 40
-    }
-},
-{
-    selector: 'node[[indegree>8]]',
-    style: {
-        width: 60,
-        height: 60
-    }
-},
-{
-    selector: 'node[[indegree>20]]',
-    style: {
-        width: 80,
-        height: 80
-    }
-},
 {
     selector: "edge",
     style: {
@@ -890,6 +869,7 @@ function initgraph(data) {
     cy.add(data);
 
     applyEdgeStyles(cy);
+    applyNodeStyles(cy);
 
     getGraphlayout($("#graphlayout").val()).run()
 }
@@ -919,6 +899,43 @@ function applyEdgeStyles(cy) {
     });
 };
 
+function applyNodeStyles(cy) {
+    nodestyle = getpref("graph.nodesize", "incoming")
+
+    if (nodestyle == "equal") {
+        cy.nodes().each(function (ele) {
+            ele.style("width", 40)
+            ele.style("height", 40)
+        });
+    } else {
+        var scale
+        switch (nodestyle) {
+            case "incoming":
+                scale = cy.nodes().maxIndegree(false);
+                break;
+            case "outgoing":
+                scale = cy.nodes().maxOutdegree(false)
+                break;
+        }
+
+        // Apply node styles
+        cy.nodes().each(function (ele) {
+            var size
+            switch (nodestyle) {
+                case "incoming":
+                    size = ele.indegree();
+                    break;
+                case "outgoing":
+                    size = ele.outdegree();
+                    break;
+            }
+
+            ele.style("width", normalize(size, 0, scale, 40, 100))
+            ele.style("height", normalize(size, 0, scale, 40, 100))
+        });
+    }
+}
+
 function findroute(source) {
     var target = cy.$("node.target")
     if (target.length == 0) {

diff --git a/modules/analyze/html/index.html b/modules/analyze/html/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -48,6 +48,7 @@
   <script src="anonymizer.js"></script>
   <script src="preferences.js"></script>
 
+  <script src="extrafuncs.js"></script>
   <script src="graph.js"></script>
   <script src="custom.js"></script>
 
@@ -219,6 +220,15 @@
             </select>
             </div>
 
+            <div class="mb-5">
+              <label for="nodesizes">Node size</label>
+              <select class="form-control" id="nodesizes" preference="graph.nodesize" defaultpref="incoming">
+                <option value="equal">All same size</option>
+                <option value="incoming">Incoming edges</option>
+                <option value="outgoing">Outgoing edges</option>
+              </select>
+            </div>
+
             <div class="mb-5">
               <div class="custom-switch">
                 <input id="showedgelabels" type="checkbox" autocomplete="off" preference="graph.edgelabels" defaultpref=false>

diff --git a/modules/analyze/html/preferences.js b/modules/analyze/html/preferences.js
@@ -1,29 +1,31 @@
-var prefs = {};
-var prefsloaded = 0;
+var prefs;
 
 function loadprefs() {
-    prefsloaded = 1; // Loading
     $.ajax({
         url: "preferences",
         dataType: "json",
         success: function (data) {
             prefs = data;
             // Apply all preferences
             $("[preference]").each(function () {
-                val = getpref($(this).attr("preference"), $(this).data("defaultpref"))
-                if (val != null) {
-                    if ($(this).attr("type") == "checkbox") {
-                        $(this).prop("checked", val)
-                    } else {
-                        $(this).val(val)
-                    }
-                }
+                updatecontrol($(this))
             })
             $(document).trigger("preferences.loaded")
         },
     });
 }
 
+function updatecontrol(ele) {
+    val = getpref(ele.attr("preference"), ele.data("defaultpref"))
+    if (val != null) {
+        if (ele.attr("type") == "checkbox") {
+            ele.prop("checked", val)
+        } else {
+            ele.val(val)
+        }
+    }
+}
+
 function onchangepreference(ele) {
     if (ele.attr("type") == "checkbox") {
         setpref(ele.attr("preference"), ele.prop("checked"))
@@ -54,3 +56,31 @@ function setpref(key, value) {
     prefs[key] = value;
     saveprefs();
 }
+
+$(function () {
+    // Load preferences
+    loadprefs();
+
+    // Create an observer instance.
+    var prefobserver = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            ele = $(mutation.target)
+            console.log(ele)
+            if (ele.attr("preference") != null) {
+                updatecontrol(ele)
+            }
+        })
+    });
+
+    // Pass in monitoring for everything
+    $('[preference]').each(function () {
+        prefobserver.observe(this, {
+            childList: true,
+        })
+    });
+
+    // Dynamically save preferences
+    $('[preference]').change(function () {
+        onchangepreference($(this));
+    });
+});