feat: add option to show dislike

analysis.py

@@ -49,13 +49,10 @@ def sociogram_json():
     return JSONResponse({"nodes": nodes, "links": links})
 
 
-def sociogram_data():
-    nodes = []
-    links = []
+def sociogram_data(dislike: bool | None = False):
     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"))
@@ -70,8 +67,10 @@ def sociogram_data():
         )
         for c in session.exec(statement2):
             for i, p in enumerate(c.love):
-                G.add_edge(c.user, p, rank=i, popularity=1 - 0.08 * i)
-                links.append({"source": c.user, "target": p})
+                G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
+            if dislike:
+                for i, p in enumerate(c.hate):
+                    G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
     return G
 
 
@@ -83,6 +82,12 @@ 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):
@@ -91,12 +96,14 @@ 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()
+    G = sociogram_data(params.dislike)
     pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
     nodes = nx.draw_networkx_nodes(
         G,
         pos,
-        node_color=[v for k, v in G.in_degree(weight="popularity")]
+        node_color=[
+            v for k, v in G.in_degree(weight="popularity" if params.weighting else None)
+        ]
         if params.popularity
         else "#99ccff",
         edgecolors="#404040",
@@ -107,18 +114,20 @@ async def render_sociogram(params: Params):
         alpha=0.86,
     )
     if params.popularity:
-        plt.colorbar(nodes)
+        cbar = 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="#404040",
+        edge_color=[EDGECOLOR[G.edges()[*edge]["group"]] for edge in G.edges()],
         arrowsize=params.arrow_size,
         node_size=params.node_size,
         width=params.edge_width,
-        arrowstyle="-|>",
-        # connectionstyle="arc3,rad=0.2",
+        style=[EDGESTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        arrowstyle=[ARROWSTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        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,6 +1,22 @@
 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;
@@ -17,18 +33,27 @@ 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: 20,
+    arrowSize: 16,
     fontSize: 10,
     distance: 2,
     weighting: true,
     popularity: true,
+    dislike: false,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -49,9 +74,15 @@ export default function Analysis() {
         setLoading(false);
       });
   }
+
   useEffect(() => {
-    loadImage();
-  }, []);
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+    timeoutID = setTimeout(() => {
+      loadImage();
+    }, 1000);
+  }, [params]);
 
   return (
     <div className="stack column dropdown">
@@ -62,21 +93,29 @@ export default function Analysis() {
 
         <div className="control">
           <div className="checkBox">
-            <label>weighting</label>
+            <input
+              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()}
-            /></div>
+            />
+            <label>weighting</label>
+          </div>
 
           <div className="checkBox">
-            <label>popularity</label>
             <input
               type="checkbox"
               checked={params.popularity}
-              onChange={(evt) => { setParams({ ...params, popularity: evt.target.checked }); loadImage() }}
+              onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
             />
+            <label>popularity</label>
           </div>
         </div>
 
@@ -89,7 +128,6 @@ 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>
 
@@ -101,7 +139,6 @@ 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>
@@ -114,7 +151,6 @@ 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>
@@ -128,7 +164,6 @@ 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>
@@ -141,7 +176,6 @@ 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;
+  padding: 8px 16px;
 }
 
 @media only screen and (max-width: 1000px) {