clean up sociogram controls

frontend/src/Network.tsx

@@ -12,6 +12,7 @@ import {
 import { customTheme } from "./NetworkTheme";
 import { useSession } from "./Session";
 import { useNavigate } from "react-router";
+import { ChevronDown, ChevronUp, Settings2 } from "lucide-react";
 
 interface NetworkData {
   nodes: GraphNode[];
@@ -43,7 +44,10 @@ export const GraphComponent = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
   const [threed, setThreed] = useState(false);
+  const [showControls, setShowControls] = useState(true);
   const [likes, setLikes] = useState(2);
+  const [showLikes, setShowLikes] = useState(true);
+  const [showDislikes, setShowDislikes] = useState(false);
   const [popularity, setPopularity] = useState(false);
   const [mutuality, setMutuality] = useState(false);
   const { user, teams } = useSession();
@@ -96,17 +100,6 @@ export const GraphComponent = () => {
     setMutuality(!mutuality);
   }
 
-  function showLabel() {
-    switch (likes) {
-      case 0:
-        return "dislike";
-      case 1:
-        return "both";
-      case 2:
-        return "like";
-    }
-  }
-
   function findMatches(edges: GraphEdge[]) {
     const adjacencyList = edges.map(
       (edge) => edge.source + edge.target + edge.data.relation
@@ -157,6 +150,10 @@ export const GraphComponent = () => {
     setData({ nodes: newNodes, edges: data.edges });
   }
 
+  useEffect(() => {
+    setLikes(+!showLikes + +showDislikes);
+  }, [showLikes, showDislikes]);
+
   useEffect(() => {
     if (mutuality) colorMatches(false);
     colorMatches(mutuality);
@@ -183,7 +180,9 @@ export const GraphComponent = () => {
 
   let content: ReactNode;
   if (loading) {
-    content = <span className="loader" />;
+    <div className="container">
+      <progress className="progress is-primary" max="100"></progress>
+    </div>;
   } else if (error) {
     content = <span>{error}</span>;
   } else {
@@ -250,58 +249,98 @@ export const GraphComponent = () => {
   }
 
   return (
-    <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
+    <div>
-      <div className="controls">
+      <div className="card network-controls">
-        <div className="control" onClick={handleMutuality}>
+        <header
-          <div className="switch">
+          className="card-header"
-            <input type="checkbox" checked={mutuality} onChange={() => {}} />
+          style={{ cursor: "pointer" }}
-            <span className="slider round"></span>
+          onClick={() => setShowControls(!showControls)}
-          </div>
+        >
-          <span>mutuality</span>
+          <p className="card-header-title">
-        </div>
+            <span className="icon-text">
+              <span className="icon">
+                <Settings2 />
+              </span>
+              <span>controls</span>
+            </span>
+          </p>
+          <button className="card-header-icon">
+            {showControls ? <ChevronUp /> : <ChevronDown />}
+          </button>
+        </header>
+        {showControls && (
+          <div className="card-content">
+            <div className="field">
+              <div className="field is-grouped">
+                <div className="control">
+                  <button
+                    className={
+                      "button is-primary" + (showLikes ? " is-outlined" : "")
+                    }
+                    onClick={() => setShowLikes(!showLikes)}
+                  >
+                    <span className="icon">👍</span>
+                  </button>
+                </div>
+                <div className="control">
+                  <button
+                    className={
+                      "button is-primary" + (showDislikes ? " is-outlined" : "")
+                    }
+                    onClick={() => setShowDislikes(!showDislikes)}
+                  >
+                    <span className="icon">👎</span>
+                  </button>
+                </div>
+              </div>
 
-        <div className="control" onClick={handleThreed}>
+              <div className="control">
-          <span>2D</span>
+                <label className="checkbox">
-          <div className="switch">
+                  <input
-            <input type="checkbox" checked={threed} onChange={() => {}} />
+                    type="checkbox"
-            <span className="slider round"></span>
+                    checked={mutuality}
-          </div>
+                    onClick={handleMutuality}
-          <span>3D</span>
+                  />
-        </div>
+                  <span className="ml-1">mutuality</span>
+                </label>
+              </div>
 
-        <div className="control">
+              <div className="control">
-          <div className="stack column">
+                <label className="radio">
-            <datalist id="markers">
+                  <input
-              <option value="0"></option>
+                    type="radio"
-              <option value="1"></option>
+                    checked={!threed}
-              <option value="2"></option>
+                    name="3D"
-            </datalist>
+                    onClick={handleThreed}
-            <div id="three-slider">
+                  />
-              <label>😬</label>
+                  <span className="m-1">2D</span>
-              <input
+                </label>
-                type="range"
+                <label className="radio">
-                list="markers"
+                  <input
-                min="0"
+                    type="radio"
-                max="2"
+                    checked={threed}
-                step="1"
+                    name="3D"
-                width="16px"
+                    onClick={handleThreed}
-                onChange={(evt) => setLikes(Number(evt.target.value))}
+                  />
-              />
+                  <span className="m-1">3D</span>
-              <label>😍</label>
+                </label>
+              </div>
+
+              <div className="control">
+                <label className="checkbox">
+                  <input
+                    type="checkbox"
+                    checked={popularity}
+                    onClick={handlePopularity}
+                  />
+                  <span className="ml-1">
+                    popularity<sup>*</sup>
+                  </span>
+                </label>
+              </div>
             </div>
-            {showLabel()}
           </div>
-        </div>
+        )}
-
-        <div className="control" onClick={handlePopularity}>
-          <div className="switch">
-            <input type="checkbox" checked={popularity} onChange={() => {}} />
-            <span className="slider round"></span>
-          </div>
-          <span>
-            popularity<sup>*</sup>
-          </span>
-        </div>
       </div>
 
       {popularity && (