feat: add popularity option

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})
 
 

src/App.css

@@ -250,6 +250,11 @@ button,
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .control {
+    font-size: 80%;
+    margin: 0px;
+  }
+
 }
 
 

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" /> :
+      {popularity && <div style={{ position: 'absolute', bottom: 0, right: "10px", zIndex: 10 }}>
-        <GraphCanvas
+        <span className="grey" style={{ fontSize: "70%" }}><sup>*</sup>popularity meassured by rank-weighted in-degree</span>
-          draggable
+      </div>}
-          cameraMode={threed ? "rotate" : "pan"}
+
-          layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
+      {
-          layoutOverrides={{
+        loading ? <span className="loader" /> :
-            nodeStrength: -200,
+          <GraphCanvas
-            linkDistance: 100
+            draggable
-          }}
+            cameraMode={threed ? "rotate" : "pan"}
-          defaultNodeSize={1}
+            layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
-          labelType="nodes"
+            layoutOverrides={{
-          sizingType="attribute"
+              nodeStrength: -200,
-          sizingAttribute="inDegree"
+              linkDistance: 100
-          ref={graphRef}
+            }}
-          theme={customTheme}
+            labelType="nodes"
-          nodes={data.nodes}
+            sizingType="attribute"
-          edges={data.edges.filter((edge) => edge.data.relation === likes || likes === 1)}
+            sizingAttribute={popularity ? "inDegree" : undefined}
-          selections={selections}
+            ref={graphRef}
-          actives={actives}
+            theme={customTheme}
-          onCanvasClick={onCanvasClick}
+            nodes={data.nodes}
-          onNodeClick={onNodeClick}
+            edges={data.edges.filter((edge) => edge.data.relation === likes || likes === 1)}
-        />}
+            selections={selections}
-    </div>
+            actives={actives}
+            onCanvasClick={onCanvasClick}
+            onNodeClick={onNodeClick}
+          />
+      }
+    </div >
   );
 }