Sociogram help dialog

frontend/src/Network.tsx

@@ -12,7 +12,7 @@ import {
 import { customTheme } from "./NetworkTheme";
 import { useSession } from "./Session";
 import { useNavigate } from "react-router";
-import { ChevronDown, ChevronUp, Settings2 } from "lucide-react";
+import { ChevronDown, ChevronUp, Info, Settings2 } from "lucide-react";
 
 interface NetworkData {
   nodes: GraphNode[];
@@ -50,6 +50,7 @@ export const GraphComponent = () => {
   const [showDislikes, setShowDislikes] = useState(false);
   const [popularity, setPopularity] = useState(false);
   const [mutuality, setMutuality] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
   const { user, teams } = useSession();
   const navigate = useNavigate();
   useEffect(() => {
@@ -212,38 +213,6 @@ export const GraphComponent = () => {
           onNodePointerOut={onNodePointerOut}
           onNodePointerOver={onNodePointerOver}
         />
-        <button
-          className="infobutton"
-          onClick={() => {
-            const dialog = document.querySelector("dialog[id='InfoDialog']");
-            (dialog as HTMLDialogElement).showModal();
-          }}
-        >
-          info
-        </button>
-
-        <dialog
-          id="InfoDialog"
-          style={{ textAlign: "left" }}
-          onClick={(event) => {
-            event.currentTarget.close();
-          }}
-        >
-          scroll to zoom
-          <br />
-          <br />
-          <b>hover</b>: show inbound links
-          <br />
-          <b>click</b>: show outward links
-          <br />
-          <br />
-          multi-selection possible
-          <br />
-          with <i>Ctrl</i> or <i>Shift</i>
-          <br />
-          <br />
-          drag to pan/rotate
-        </dialog>
       </>
     );
   }
@@ -333,25 +302,68 @@ export const GraphComponent = () => {
                     checked={popularity}
                     onClick={handlePopularity}
                   />
-                  <span className="ml-1">
-                    popularity<sup>*</sup>
-                  </span>
+                  <span className="ml-1">popularity</span>
                 </label>
               </div>
             </div>
           </div>
         )}
+        {showControls && (
+          <footer className="card-footer">
+            <button
+              onClick={() => {
+                setShowHelp(true);
+              }}
+              className="card-footer-item"
+            >
+              <p className="icon-text is-small">
+                <span className="icon">
+                  <Info />
+                </span>
+                <span>help</span>
+              </p>
+            </button>
+          </footer>
+        )}
       </div>
 
-      {popularity && (
+      <div className={"modal" + (showHelp ? " is-active" : "")}>
         <div
-          style={{ position: "absolute", bottom: 0, right: "10px", zIndex: 10 }}
-        >
-          <span className="grey" style={{ fontSize: "70%" }}>
-            <sup>*</sup>popularity meassured by rank-weighted in-degree
-          </span>
+          onClick={() => setShowHelp(false)}
+          className="modal-background"
+        ></div>
+        <div className="modal-content">
+          <article className="message is-info">
+            <div className="message-header">
+              <p>Help</p>
+              <button
+                onClick={() => setShowHelp(false)}
+                className="delete"
+                aria-label="delete"
+              ></button>
+            </div>
+            <div className="message-body">
+              <p>scroll to zoom</p>
+              <p>
+                <strong>hover</strong>: show inbound links
+              </p>
+              <p>
+                <strong>click</strong>: show outward links
+              </p>
+              <hr className="has-background-info" />
+              <p>
+                multi-selection is possible with
+                <br />
+                <i>Ctrl</i> or <i>Shift</i>
+              </p>
+              <p>drag to pan/rotate</p>
+              <hr className="has-background-info" />
+              <p>popularity is meassured by rank-weighted in-degree</p>
+            </div>
+          </article>
         </div>
-      )}
+      </div>
+
       {content}
     </div>
   );

frontend/src/main.css

@@ -16,7 +16,7 @@
 }
 
 .network-controls {
-  z-index: 9;
+  z-index: 2;
   position: absolute;
   margin: 1rem;
 }