feat: show popularity score

src/Network.tsx

@@ -67,6 +67,7 @@ export const GraphComponent = () => {
   }
 
   function handlePopularity() {
+    popularityLabel(!popularity);
     setPopularity(!popularity);
   }
 
@@ -122,6 +123,20 @@ export const GraphComponent = () => {
     }
     setData({ nodes: data.nodes, edges: newEdges });
   }
+
+  function popularityLabel(popularity: boolean) {
+    const newNodes = data.nodes;
+    console.log(data.nodes);
+    if (popularity) {
+      newNodes.forEach(
+        (node) => (node.subLabel = `pop.: ${node.data.inDegree.toFixed(1)}`)
+      );
+    } else {
+      newNodes.forEach((node) => (node.subLabel = undefined));
+    }
+    setData({ nodes: newNodes, edges: data.edges });
+  }
+
   useEffect(() => {
     if (mutuality) colorMatches(false);
     colorMatches(mutuality);

src/NetworkTheme.tsx

@@ -2,58 +2,58 @@ import { Theme } from "reagraph";
 
 export const customTheme: Theme = {
   canvas: {
-    background: 'aliceblue',
+    background: "aliceblue",
   },
   node: {
-    fill: '#69F',
+    fill: "#69F",
-    activeFill: '#36C',
+    activeFill: "#36C",
     opacity: 1,
     selectedOpacity: 1,
     inactiveOpacity: 0.333,
     label: {
-      color: '#404040',
+      color: "#404040",
-      stroke: 'white',
+      stroke: "white",
-      activeColor: 'black'
+      activeColor: "black",
     },
     subLabel: {
-      color: '#ddd',
+      color: "#404040",
-      stroke: 'transparent',
+      stroke: "white",
-      activeColor: '#1DE9AC'
+      activeColor: "black",
-    }
+    },
   },
   lasso: {
-    border: '1px solid #55aaff',
+    border: "1px solid #55aaff",
-    background: 'rgba(75, 160, 255, 0.1)'
+    background: "rgba(75, 160, 255, 0.1)",
   },
   ring: {
-    fill: '#69F',
+    fill: "#69F",
-    activeFill: '#36C'
+    activeFill: "#36C",
   },
   edge: {
-    fill: '#bed4ff',
+    fill: "#bed4ff",
-    activeFill: '#36C',
+    activeFill: "#36C",
     opacity: 1,
     selectedOpacity: 1,
     inactiveOpacity: 0.333,
     label: {
-      stroke: '#fff',
+      stroke: "#fff",
-      color: '#2A6475',
+      color: "#2A6475",
-      activeColor: '#1DE9AC',
+      activeColor: "#1DE9AC",
-      fontSize: 6
+      fontSize: 6,
-    }
+    },
   },
   arrow: {
-    fill: '#bed4ff',
+    fill: "#bed4ff",
-    activeFill: '#36C'
+    activeFill: "#36C",
   },
   cluster: {
-    stroke: '#D8E6EA',
+    stroke: "#D8E6EA",
     opacity: 1,
     selectedOpacity: 1,
     inactiveOpacity: 0.1,
     label: {
-      stroke: '#fff',
+      stroke: "#fff",
-      color: '#2A6475'
+      color: "#2A6475",
-    }
+    },
-  }
+  },
 };