feat: add popularity option

analysis.py

@@ -67,25 +67,34 @@ def graph_json():
             subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
         )
         for c in session.exec(statement2):
-            for p in c.love:
+            for i, p in enumerate(c.love):
                 edges.append(
                     {
                         "id": f"{c.user}->{p}",
                         "source": c.user,
                         "target": p,
-                        "relation": "likes",
+                        "size": max(1.0 - 0.1 * i, 0.3),
+                        "data": {"relation": 2},
                     }
                 )
-            continue
             for p in c.hate:
                 edges.append(
                     {
-                        id: f"{c.user}-x>{p}",
+                        "id": f"{c.user}-x>{p}",
                         "source": c.user,
                         "target": p,
-                        "relation": "dislikes",
+                        "size": 0.3,
+                        "data": {"relation": 0},
+                        "fill": "#ff7c7c",
                     }
                 )
+
+    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, **{"data": {"inDegree": in_degrees[node["id"]]}}) for node in nodes
+    ]
     return JSONResponse({"nodes": nodes, "edges": edges})
 
 

src/App.css

@@ -23,6 +23,87 @@ footer {
   font-size: x-small;
 }
 
+/*=========Network Controls=========*/
+
+.controls {
+  z-index: 9;
+  position: absolute;
+  width: 240px;
+  right: 24px;
+  top: 1vh;
+  padding: 16px;
+
+  .control {
+    display: flex;
+    flex-direction: row;
+    margin: 4px 2px;
+    background-color: aliceblue;
+
+    * {
+      margin: 4px;
+    }
+  }
+
+  #three-slider {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  width: 68px;
+  height: 42px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 34px;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  border-radius: 50%;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #2196F3;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
 
 .grey {
   color: #444;
@@ -168,13 +249,24 @@ button,
   #control-panel {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .control {
+    font-size: 80%;
+    margin: 0px;
+  }
+
 }
 
+
 @media only screen and (max-width: 768px) {
   #control-panel {
     grid-template-columns: 1fr;
   }
 
+  .networkroute {
+    display: none;
+  }
+
   .submit_text {
     display: none;
   }
@@ -241,6 +333,8 @@ button,
   font-size: 150%;
 }
 
+/*======LOGO=======*/
+
 .logo {
   position: relative;
   text-align: center;
@@ -268,6 +362,15 @@ button,
   }
 }
 
+.networkroute {
+  z-index: 10;
+  position: absolute;
+  top: 24px;
+  left: 48px;
+}
+
+/*======SPINNER=======*/
+
 .loader {
   display: block;
   position: relative;

src/Header.tsx

@@ -1,7 +1,5 @@
-import { baseUrl } from "./api";
-
 export default function Header() {
-  return <div className="logo">
+  return <div className="logo" id="logo">
     <a href={"/"}>
       <img alt="logo" height="66%" src="logo.svg" />
       <h3 className="centered">cutt</h3>

src/Network.tsx

@@ -1,15 +1,32 @@
 import { useEffect, useRef, useState } from "react";
 import { apiAuth } from "./api";
-import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, useSelection } from "reagraph";
+import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, SelectionProps, SelectionResult, useSelection } from "reagraph";
+import { customTheme } from "./NetworkTheme";
 
 interface NetworkData {
   nodes: GraphNode[],
   edges: GraphEdge[],
 }
+interface CustomSelectionProps extends SelectionProps {
+  ignore: string[];
+}
+
+const useCustomSelection = (props: CustomSelectionProps): SelectionResult => {
+  var result = useSelection(props);
+  result.actives = result.actives.filter((s) => !props.ignore.includes(s))
+  return result
+}
 
 export const GraphComponent = () => {
   const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
   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";
+  }
 
   async function loadData() {
     setLoading(true);
@@ -22,25 +39,113 @@ export const GraphComponent = () => {
 
   const graphRef = useRef<GraphCanvasRef | null>(null);
 
-  const { selections, actives, onNodeClick, onCanvasClick } = useSelection({
+  function handleThreed() {
+    setThreed(!threed)
+    graphRef.current?.fitNodesInView();
+    graphRef.current?.centerGraph();
+    graphRef.current?.resetControls();
+  }
+
+  function handlePopularity() {
+    setPopularity(!popularity)
+    //graphRef.current?.fitNodesInView();
+    //graphRef.current?.centerGraph();
+    //graphRef.current?.resetControls();
+  }
+
+  function showLabel() {
+    switch (likes) {
+      case 0: return "dislike";
+      case 1: return "both";
+      case 2: return "like";
+    }
+  }
+
+  const { selections, actives, onNodeClick, onCanvasClick } = useCustomSelection({
     ref: graphRef,
     nodes: data.nodes,
-    edges: data.edges,
+    edges: data.edges.filter((edge) => edge.data.relation === likes),
-    pathSelectionType: 'out'
+    ignore: data.edges.map((edge) => { return (likes === 1 && edge.data.relation !== 2) ? edge.id : "" }),
+    pathSelectionType: 'out',
+    type: 'multiModifier'
   });
 
-  return (
-    <GraphCanvas
-      draggable
-      ref={graphRef}
-      nodes={data.nodes}
-      edges={data.edges}
-      selections={selections}
-      actives={actives}
-      onCanvasClick={onCanvasClick}
-      onNodeClick={onNodeClick}
-    />
-  );
 
+  return (
+    <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+      <div className="controls" >
+
+        <div className="control" onClick={handleThreed}>
+          <span>2D</span>
+          <div className="switch">
+            <input type="checkbox" checked={threed} />
+            <span className="slider round"></span>
+          </div>
+          <span>3D</span>
+        </div>
+
+        <div className="control">
+          <div className="stack column">
+            <datalist id="markers">
+              <option value="0"></option>
+              <option value="1"></option>
+              <option value="2"></option>
+            </datalist>
+            <div id="three-slider">
+              <label>😬</label>
+              <input
+                type="range"
+                list="markers"
+                min="0"
+                max="2"
+                step="1"
+                width="16px"
+                onChange={(evt) => setLikes(Number(evt.target.value))}
+              />
+              <label>😍</label>
+            </div>
+            {showLabel()}
+          </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>
+
+      {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 >
+  );
 }
 

src/NetworkTheme.tsx

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