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,59 +249,99 @@ export const GraphComponent = () => {
   }
 
   return (
-    <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
-      <div className="controls">
-        <div className="control" onClick={handleMutuality}>
-          <div className="switch">
-            <input type="checkbox" checked={mutuality} onChange={() => {}} />
-            <span className="slider round"></span>
+    <div>
+      <div className="card network-controls">
+        <header
+          className="card-header"
+          style={{ cursor: "pointer" }}
+          onClick={() => setShowControls(!showControls)}
+        >
+          <p className="card-header-title">
+            <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>
-          <span>mutuality</span>
+                <div className="control">
+                  <button
+                    className={
+                      "button is-primary" + (showDislikes ? " is-outlined" : "")
+                    }
+                    onClick={() => setShowDislikes(!showDislikes)}
+                  >
+                    <span className="icon">👎</span>
+                  </button>
                 </div>
-
-        <div className="control" onClick={handleThreed}>
-          <span>2D</span>
-          <div className="switch">
-            <input type="checkbox" checked={threed} onChange={() => {}} />
-            <span className="slider round"></span>
-          </div>
-          <span>3D</span>
               </div>
 
               <div className="control">
-          <div className="stack column">
-            <datalist id="markers">
-              <option value="0"></option>
-              <option value="1"></option>
-              <option value="2"></option>
-            </datalist>
-            <div id="three-slider">
-              <label>😬</label>
+                <label className="checkbox">
                   <input
-                type="range"
-                list="markers"
-                min="0"
-                max="2"
-                step="1"
-                width="16px"
-                onChange={(evt) => setLikes(Number(evt.target.value))}
+                    type="checkbox"
+                    checked={mutuality}
+                    onClick={handleMutuality}
                   />
-              <label>😍</label>
-            </div>
-            {showLabel()}
-          </div>
+                  <span className="ml-1">mutuality</span>
+                </label>
               </div>
 
-        <div className="control" onClick={handlePopularity}>
-          <div className="switch">
-            <input type="checkbox" checked={popularity} onChange={() => {}} />
-            <span className="slider round"></span>
+              <div className="control">
+                <label className="radio">
+                  <input
+                    type="radio"
+                    checked={!threed}
+                    name="3D"
+                    onClick={handleThreed}
+                  />
+                  <span className="m-1">2D</span>
+                </label>
+                <label className="radio">
+                  <input
+                    type="radio"
+                    checked={threed}
+                    name="3D"
+                    onClick={handleThreed}
+                  />
+                  <span className="m-1">3D</span>
+                </label>
               </div>
-          <span>
+
+              <div className="control">
+                <label className="checkbox">
+                  <input
+                    type="checkbox"
+                    checked={popularity}
+                    onClick={handlePopularity}
+                  />
+                  <span className="ml-1">
                     popularity<sup>*</sup>
                   </span>
+                </label>
               </div>
             </div>
+          </div>
+        )}
+      </div>
 
       {popularity && (
         <div