add selected node stats

Antriel · Dec 13, 2024 · 4649c2e · 4649c2e
1 parent 1b45347
commit 4649c2e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git a/src/config.mjs b/src/config.mjs
@@ -26,7 +26,7 @@ config.smartLabelsPrefix ??= true;
 config.smartLabelsShowMacro ??= true;
 config.smartLabelsCustom ??= [];
 
-const gui = new GUI({ title: 'Config' });
+const gui = new GUI({ title: 'Config/Data' });
 gui.close();
 gui.domElement.style.left = '0px';
 
@@ -36,6 +36,21 @@ gui.onFinishChange(() => {
     // TODO also save state of the GUI?
 });
 
+const data = gui.addFolder('Selected Node Dep Counts').close();
+export const dataVal = {
+    directDependencies: Number.NaN,
+    directDependants: Number.NaN,
+    totalDependencies: Number.NaN,
+    totalDependants: Number.NaN,
+};
+data.add(dataVal, 'directDependencies').name('direct dependencies').disable();
+data.add(dataVal, 'directDependants').name('direct dependants').disable();
+data.add(dataVal, 'totalDependencies').name('total dependencies').disable();
+data.add(dataVal, 'totalDependants').name('total dependants').disable();
+export function syncData() {
+    for (const c of data.controllersRecursive()) c.updateDisplay();
+}
+
 const visual = gui.addFolder('Visualization').close();
 const dir = visual.add(config, 'visualDependencies', { dependencies: true, dependants: false }).name('point towards');
 export function refresh() { dir.updateDisplay(); }

diff --git a/src/renderer.mjs b/src/renderer.mjs
@@ -3,7 +3,7 @@ import { edgePathFromNodePath } from "graphology-shortest-path";
 import Sigma from "sigma";
 import { parse } from "./parser.mjs";
 import createGraph from "./createGraph.mjs";
-import { config, onConfigChanged, refresh } from './config.mjs';
+import { config, dataVal, onConfigChanged, refresh, syncData } from './config.mjs';
 const searchInput = document.getElementById("search-input");
 const searchSuggestions = document.getElementById("suggestions");
 
@@ -115,7 +115,7 @@ sigma.setSetting("edgeReducer", (edge, data) => {
 sigma.on('enterNode', ({ node }) => setHoveredNode(node));
 sigma.on('leaveNode', () => setHoveredNode(undefined));
 sigma.on('clickNode', ({ node }) => {
-    state.selectedNode = node;
+    setSelectedNode(node);
     state.selectedNeighbors = new Set(graph.outNeighbors(node));
     state.distances = singleSourceLength(graph, node);
     state.maxDist = Object.values(state.distances).reduce((dist, length) => Math.max(dist, length), 0);
@@ -128,13 +128,38 @@ sigma.on('clickNode', ({ node }) => {
     sigma.refresh({ skipIndexation: true });
 });
 sigma.on('clickStage', () => {
-    state.selectedNode = undefined;
+    setSelectedNode(undefined);
     state.selectedNeighbors = undefined;
     state.distances = undefined;
     state.cycleEdges = undefined;
     sigma.refresh({ skipIndexation: true });
 });
 
+function setSelectedNode(node) {
+    state.selectedNode = node;
+    if (node) {
+        let inCount = 0;
+        let outCount = 0;
+        let inCountTotal = 0;
+        let outCountTotal = 0;
+        for (const other of graph.nodes()) if (other != node) {
+            const outPath = bidirectional(graph, node, other);
+            const inPath = bidirectional(graph, other, node);
+            if (outPath) ++outCountTotal;
+            if (inPath) ++inCountTotal;
+            if (outPath?.length == 2) ++outCount;
+            if (inPath?.length == 2) ++inCount;
+        }
+        dataVal.directDependencies = config.visualDependencies ? outCount : inCount;
+        dataVal.directDependants = config.visualDependencies ? inCount : outCount;
+        dataVal.totalDependencies = config.visualDependencies ? outCountTotal : inCountTotal;
+        dataVal.totalDependants = config.visualDependencies ? inCountTotal : outCountTotal;
+    } else {
+        dataVal.directDependencies = dataVal.directDependants = dataVal.totalDependencies = dataVal.totalDependants = Number.NaN;
+    }
+    syncData();
+}
+
 function setSearchQuery(query) {
     state.searchQuery = query;
     if (searchInput.value !== query) searchInput.value = query;
@@ -144,19 +169,19 @@ function setSearchQuery(query) {
         const suggestions = nodes.filter(({ label }) => label.toLowerCase().includes(lcQuery));
 
         if (suggestions.length === 1 && suggestions[0].label === query) {
-            state.selectedNode = suggestions[0].id;
+            setSelectedNode(suggestions[0].id);
             state.suggestions = undefined;
 
             const nodePosition = sigma.getNodeDisplayData(state.selectedNode);
             sigma.getCamera().animate(nodePosition, {
                 duration: 500,
             });
         } else {
-            state.selectedNode = undefined;
+            setSelectedNode(undefined);
             state.suggestions = new Set(suggestions.map(({ id }) => id));
         }
     } else {
-        state.selectedNode = undefined;
+        setSelectedNode(undefined);
         state.suggestions = undefined;
     }