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,7 +96,7 @@ 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,
@@ -109,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

@@ -33,6 +33,7 @@ interface Params {
   distance: number;
   weighting: boolean;
   popularity: boolean;
+  dislike: boolean;
 }
 
 interface DeferredProps {
@@ -47,11 +48,12 @@ export default function Analysis() {
   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);
@@ -72,15 +74,14 @@ export default function Analysis() {
         setLoading(false);
       });
   }
+
   useEffect(() => {
     if (timeoutID) {
-      console.log(timeoutID);
       clearTimeout(timeoutID);
     }
     timeoutID = setTimeout(() => {
-      console.log("fire");
       loadImage();
-    }, 1500);
+    }, 1000);
   }, [params]);
 
   return (
@@ -91,6 +92,14 @@ export default function Analysis() {
       <div id="control-panel" className={showControlPanel ? "opened" : ""}>
 
         <div className="control">
+          <div className="checkBox">
+            <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"