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',
-    activeFill: '#36C',
+    fill: "#69F",
+    activeFill: "#36C",
     opacity: 1,
     selectedOpacity: 1,
     inactiveOpacity: 0.333,
     label: {
-      color: '#404040',
-      stroke: 'white',
-      activeColor: 'black'
+      color: "#404040",
+      stroke: "white",
+      activeColor: "black",
     },
     subLabel: {
-      color: '#ddd',
-      stroke: 'transparent',
-      activeColor: '#1DE9AC'
-    }
+      color: "#404040",
+      stroke: "white",
+      activeColor: "black",
+    },
   },
   lasso: {
-    border: '1px solid #55aaff',
-    background: 'rgba(75, 160, 255, 0.1)'
+    border: "1px solid #55aaff",
+    background: "rgba(75, 160, 255, 0.1)",
   },
   ring: {
-    fill: '#69F',
-    activeFill: '#36C'
+    fill: "#69F",
+    activeFill: "#36C",
   },
   edge: {
-    fill: '#bed4ff',
-    activeFill: '#36C',
+    fill: "#bed4ff",
+    activeFill: "#36C",
     opacity: 1,
     selectedOpacity: 1,
     inactiveOpacity: 0.333,
     label: {
-      stroke: '#fff',
-      color: '#2A6475',
-      activeColor: '#1DE9AC',
-      fontSize: 6
-    }
+      stroke: "#fff",
+      color: "#2A6475",
+      activeColor: "#1DE9AC",
+      fontSize: 6,
+    },
   },
   arrow: {
-    fill: '#bed4ff',
-    activeFill: '#36C'
+    fill: "#bed4ff",
+    activeFill: "#36C",
   },
   cluster: {
-    stroke: '#D8E6EA',
+    stroke: "#D8E6EA",
     opacity: 1,
     selectedOpacity: 1,
     inactiveOpacity: 0.1,
     label: {
-      stroke: '#fff',
-      color: '#2A6475'
-    }
-  }
+      stroke: "#fff",
+      color: "#2A6475",
+    },
+  },
 };