feat: option to show likes, dislikes or both

analysis.py

@@ -49,7 +49,7 @@ def sociogram_json():
     return JSONResponse({"nodes": nodes, "links": links})
 
 
-def sociogram_data(dislike: bool | None = False):
+def sociogram_data(show: int | None = 2):
     G = nx.DiGraph()
     with Session(engine) as session:
         for p in session.exec(select(P)).fetchall():
@@ -62,13 +62,14 @@ def sociogram_data(dislike: bool | None = False):
         )
         statement2 = (
             select(C)
-            .where(C.user.in_(["Kruse", "Franz", "ck"]))
+            # .where(C.user.in_(["Kruse", "Franz", "ck"]))
             .join(subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest))
         )
         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)
-            if dislike:
+            if show >= 1:
+                for i, p in enumerate(c.love):
+                    G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
+            if show <= 1:
                 for i, p in enumerate(c.hate):
                     G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
     return G
@@ -82,7 +83,7 @@ class Params(BaseModel):
     distance: float | None = 0.2
     weighting: bool | None = True
     popularity: bool | None = True
-    dislike: bool | None = False
+    show: int | None = 2
 
 
 ARROWSTYLE = {"love": "-|>", "hate": "-|>"}
@@ -96,7 +97,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(params.dislike)
+    G = sociogram_data(show=params.show)
     pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
     nodes = nx.draw_networkx_nodes(
         G,

src/Analysis.tsx

@@ -33,7 +33,7 @@ interface Params {
   distance: number;
   weighting: boolean;
   popularity: boolean;
-  dislike: boolean;
+  show: number;
 }
 
 interface DeferredProps {
@@ -53,10 +53,10 @@ export default function Analysis() {
     distance: 2,
     weighting: true,
     popularity: true,
-    dislike: false,
+    show: 2,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   // Function to generate and fetch the graph image
   async function loadImage() {
@@ -84,6 +84,14 @@ export default function Analysis() {
     }, 1000);
   }, [params]);
 
+  function showLabel() {
+    switch (params.show) {
+      case 0: return "dislike";
+      case 1: return "both";
+      case 2: return "like";
+    }
+  }
+
   return (
     <div className="stack column dropdown">
       <button onClick={() => setShowControlPanel(!showControlPanel)}>
@@ -92,14 +100,27 @@ export default function Analysis() {
       <div id="control-panel" className={showControlPanel ? "opened" : ""}>
 
         <div className="control">
-          <div className="checkBox">
+          <datalist id="markers">
+            <option value="0"></option>
+            <option value="1"></option>
+            <option value="2"></option>
+          </datalist>
+          <div id="three-slider">
+            <label>😬</label>
             <input
-              type="checkbox"
-              checked={params.dislike}
-              onChange={(evt) => setParams({ ...params, dislike: evt.target.checked })}
+              type="range"
+              list="markers"
+              min="0"
+              max="2"
+              step="1"
+              width="16px"
+              onChange={(evt) => setParams({ ...params, show: Number(evt.target.value) })}
             />
-            <label>show dislike</label>
+            <label>😍</label>
           </div>
+          {showLabel()}
+        </div>
+        <div className="control">
           <div className="checkBox">
             <input
               type="checkbox"

src/App.css

@@ -151,6 +151,11 @@ button {
   padding: 8px 16px;
 }
 
+#three-slider input {
+  margin: 4px;
+  width: 50%;
+}
+
 @media only screen and (max-width: 1000px) {
   #control-panel {
     grid-template-columns: repeat(2, 1fr);