analysis.py

@@ -49,10 +49,13 @@ def sociogram_json():
     return JSONResponse({"nodes": nodes, "links": links})
 
 
-def sociogram_data(dislike: bool | None = False):
+def sociogram_data():
+    nodes = []
+    links = []
     G = nx.DiGraph()
     with Session(engine) as session:
         for p in session.exec(select(P)).fetchall():
+            nodes.append({"id": p.name})
             G.add_node(p.name)
         subquery = (
             select(C.user, func.max(C.time).label("latest"))
@@ -67,10 +70,8 @@ def sociogram_data(dislike: bool | None = False):
         )
         for c in session.exec(statement2):
             for i, p in enumerate(c.love):
-                G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
+                G.add_edge(c.user, p, rank=i, popularity=1 - 0.08 * i)
-            if dislike:
+                links.append({"source": c.user, "target": p})
-                for i, p in enumerate(c.hate):
-                    G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
     return G
 
 
@@ -82,12 +83,6 @@ class Params(BaseModel):
     distance: float | None = 0.2
     weighting: bool | None = True
     popularity: bool | None = True
-    dislike: bool | None = False
-
-
-ARROWSTYLE = {"love": "-|>", "hate": "-|>"}
-EDGESTYLE = {"love": "-", "hate": ":"}
-EDGECOLOR = {"love": "#404040", "hate": "#cc0000"}
 
 
 async def render_sociogram(params: Params):
@@ -96,14 +91,12 @@ async def render_sociogram(params: Params):
     ax.set_facecolor("none")  # Set the axis face color to none (transparent)
     ax.axis("off")  # Turn off axis ticks and frames
 
-    G = sociogram_data(params.dislike)
+    G = sociogram_data()
     pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
     nodes = nx.draw_networkx_nodes(
         G,
         pos,
-        node_color=[
+        node_color=[v for k, v in G.in_degree(weight="popularity")]
-            v for k, v in G.in_degree(weight="popularity" if params.weighting else None)
-        ]
         if params.popularity
         else "#99ccff",
         edgecolors="#404040",
@@ -114,20 +107,18 @@ async def render_sociogram(params: Params):
         alpha=0.86,
     )
     if params.popularity:
-        cbar = plt.colorbar(nodes)
+        plt.colorbar(nodes)
-        cbar.ax.set_xlabel("popularity")
     nx.draw_networkx_labels(G, pos, font_size=params.font_size)
     nx.draw_networkx_edges(
         G,
         pos,
         arrows=True,
-        edge_color=[EDGECOLOR[G.edges()[*edge]["group"]] for edge in G.edges()],
+        edge_color="#404040",
         arrowsize=params.arrow_size,
         node_size=params.node_size,
         width=params.edge_width,
-        style=[EDGESTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        arrowstyle="-|>",
-        arrowstyle=[ARROWSTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        # connectionstyle="arc3,rad=0.2",
-        connectionstyle="arc3,rad=0.12",
         alpha=[1 - 0.08 * G.edges()[*edge]["rank"] for edge in G.edges()]
         if params.weighting
         else 1,

src/Analysis.tsx

@@ -1,22 +1,6 @@
 import { useEffect, useState } from "react";
 import { baseUrl } from "./api";
 
-//const debounce = <T extends (...args: any[]) => void>(
-//  func: T,
-//  delay: number
-//): ((...args: Parameters<T>) => void) => {
-//  let timeoutId: number | null = null;
-//  return (...args: Parameters<T>) => {
-//    if (timeoutId !== null) {
-//      clearTimeout(timeoutId);
-//    }
-//    console.log(timeoutId);
-//    timeoutId = setTimeout(() => {
-//      func(...args);
-//    }, delay);
-//  };
-//};
-//
 interface Prop {
   name: string;
   min: string;
@@ -33,27 +17,18 @@ interface Params {
   distance: number;
   weighting: boolean;
   popularity: boolean;
-  dislike: boolean;
 }
 
-interface DeferredProps {
-  timeout: number;
-  func: () => void;
-}
-
-
-let timeoutID: number | null = null;
 export default function Analysis() {
   const [image, setImage] = useState("");
   const [params, setParams] = useState<Params>({
     nodeSize: 2000,
     edgeWidth: 1,
-    arrowSize: 16,
+    arrowSize: 20,
     fontSize: 10,
     distance: 2,
     weighting: true,
     popularity: true,
-    dislike: false,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -74,15 +49,9 @@ export default function Analysis() {
         setLoading(false);
       });
   }
-
   useEffect(() => {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-    timeoutID = setTimeout(() => {
     loadImage();
-    }, 1000);
+  }, []);
-  }, [params]);
 
   return (
     <div className="stack column dropdown">
@@ -93,29 +62,21 @@ export default function Analysis() {
 
         <div className="control">
           <div className="checkBox">
-            <input
+            <label>weighting</label>
-              type="checkbox"
-              checked={params.dislike}
-              onChange={(evt) => setParams({ ...params, dislike: evt.target.checked })}
-            />
-            <label>show dislike</label>
-          </div>
-          <div className="checkBox">
             <input
               type="checkbox"
               checked={params.weighting}
               onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
-            />
+              onMouseUp={() => loadImage()}
-            <label>weighting</label>
+            /></div>
-          </div>
 
           <div className="checkBox">
+            <label>popularity</label>
             <input
               type="checkbox"
               checked={params.popularity}
-              onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
+              onChange={(evt) => { setParams({ ...params, popularity: evt.target.checked }); loadImage() }}
             />
-            <label>popularity</label>
           </div>
         </div>
 
@@ -128,6 +89,7 @@ export default function Analysis() {
             step="0.05"
             value={params.distance}
             onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
           />
           <span>{params.distance}</span></div>
 
@@ -139,6 +101,7 @@ export default function Analysis() {
             max="3000"
             value={params.nodeSize}
             onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
           />
           <span>{params.nodeSize}</span>
         </div>
@@ -151,6 +114,7 @@ export default function Analysis() {
             max="24"
             value={params.fontSize}
             onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
           />
           <span>{params.fontSize}</span>
         </div>
@@ -164,6 +128,7 @@ export default function Analysis() {
             step="0.1"
             value={params.edgeWidth}
             onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
           />
           <span>{params.edgeWidth}</span>
         </div>
@@ -176,6 +141,7 @@ export default function Analysis() {
             max="50"
             value={params.arrowSize}
             onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
           />
           <span>{params.arrowSize}</span>
         </div>

src/App.css

@@ -148,7 +148,7 @@ button {
   align-items: center;
   justify-content: center;
   border: 2px solid #404040;
-  padding: 8px 16px;
+  padding: 8px;
 }
 
 @media only screen and (max-width: 1000px) {