From 978aafc204a2f28257480f5058cdec8a756d9a18 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Sun, 23 Feb 2025 17:10:18 +0100
Subject: [PATCH] feat: add popularity option

---
 analysis.py     |  4 ++-
 src/App.css     |  5 ++++
 src/Network.tsx | 68 ++++++++++++++++++++++++++++++++-----------------
 3 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/analysis.py b/analysis.py
index 43a5b45..a9e2264 100644
--- a/analysis.py
+++ b/analysis.py
@@ -92,7 +92,9 @@ def graph_json():
     G = nx.DiGraph()
     G.add_weighted_edges_from([(e["source"], e["target"], e["size"]) for e in edges])
     in_degrees = G.in_degree(weight="weight")
-    nodes = [dict(node, **{"inDegree": in_degrees[node["id"]]}) for node in nodes]
+    nodes = [
+        dict(node, **{"data": {"inDegree": in_degrees[node["id"]]}}) for node in nodes
+    ]
     return JSONResponse({"nodes": nodes, "edges": edges})
 
 
diff --git a/src/App.css b/src/App.css
index 98518f6..2490f01 100644
--- a/src/App.css
+++ b/src/App.css
@@ -250,6 +250,11 @@ button,
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .control {
+    font-size: 80%;
+    margin: 0px;
+  }
+
 }
 
 
diff --git a/src/Network.tsx b/src/Network.tsx
index a73da07..8cc1a9c 100644
--- a/src/Network.tsx
+++ b/src/Network.tsx
@@ -22,6 +22,7 @@ export const GraphComponent = () => {
   const [loading, setLoading] = useState(true);
   const [threed, setThreed] = useState(false);
   const [likes, setLikes] = useState(2);
+  const [popularity, setPopularity] = useState(false);
   const logo = document.getElementById("logo")
   if (logo) {
     logo.className = "logo networkroute";
@@ -38,7 +39,6 @@ export const GraphComponent = () => {
 
   const graphRef = useRef<GraphCanvasRef | null>(null);
 
-
   function handleThreed() {
     setThreed(!threed)
     graphRef.current?.fitNodesInView();
@@ -46,6 +46,13 @@ export const GraphComponent = () => {
     graphRef.current?.resetControls();
   }
 
+  function handlePopularity() {
+    setPopularity(!popularity)
+    //graphRef.current?.fitNodesInView();
+    //graphRef.current?.centerGraph();
+    //graphRef.current?.resetControls();
+  }
+
   function showLabel() {
     switch (likes) {
       case 0: return "dislike";
@@ -101,31 +108,44 @@ export const GraphComponent = () => {
           </div>
         </div>
 
+        <div className="control" onClick={handlePopularity}>
+          <div className="switch">
+            <input type="checkbox" checked={popularity} />
+            <span className="slider round"></span>
+          </div>
+          <span>popularity<sup>*</sup></span>
+        </div>
+
       </div>
 
-      {loading ? <span className="loader" /> :
-        <GraphCanvas
-          draggable
-          cameraMode={threed ? "rotate" : "pan"}
-          layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
-          layoutOverrides={{
-            nodeStrength: -200,
-            linkDistance: 100
-          }}
-          defaultNodeSize={1}
-          labelType="nodes"
-          sizingType="attribute"
-          sizingAttribute="inDegree"
-          ref={graphRef}
-          theme={customTheme}
-          nodes={data.nodes}
-          edges={data.edges.filter((edge) => edge.data.relation === likes || likes === 1)}
-          selections={selections}
-          actives={actives}
-          onCanvasClick={onCanvasClick}
-          onNodeClick={onNodeClick}
-        />}
-    </div>
+      {popularity && <div style={{ position: 'absolute', bottom: 0, right: "10px", zIndex: 10 }}>
+        <span className="grey" style={{ fontSize: "70%" }}><sup>*</sup>popularity meassured by rank-weighted in-degree</span>
+      </div>}
+
+      {
+        loading ? <span className="loader" /> :
+          <GraphCanvas
+            draggable
+            cameraMode={threed ? "rotate" : "pan"}
+            layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
+            layoutOverrides={{
+              nodeStrength: -200,
+              linkDistance: 100
+            }}
+            labelType="nodes"
+            sizingType="attribute"
+            sizingAttribute={popularity ? "inDegree" : undefined}
+            ref={graphRef}
+            theme={customTheme}
+            nodes={data.nodes}
+            edges={data.edges.filter((edge) => edge.data.relation === likes || likes === 1)}
+            selections={selections}
+            actives={actives}
+            onCanvasClick={onCanvasClick}
+            onNodeClick={onNodeClick}
+          />
+      }
+    </div >
   );
 }