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,9 +108,22 @@ 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>
 
-      {loading ? <span className="loader" /> :
+      </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"}
@@ -112,10 +132,9 @@ export const GraphComponent = () => {
               nodeStrength: -200,
               linkDistance: 100
             }}
-          defaultNodeSize={1}
             labelType="nodes"
             sizingType="attribute"
-          sizingAttribute="inDegree"
+            sizingAttribute={popularity ? "inDegree" : undefined}
             ref={graphRef}
             theme={customTheme}
             nodes={data.nodes}
@@ -124,7 +143,8 @@ export const GraphComponent = () => {
             actives={actives}
             onCanvasClick={onCanvasClick}
             onNodeClick={onNodeClick}
-        />}
+          />
+      }
     </div >
   );
 }