Provide a toggle to turn on display of seek graph

online-go · Nov 24, 2024 · 7d3b9ef · 7d3b9ef
1 parent 1d6bc05
commit 7d3b9ef
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 2 deletions.
diff --git a/src/views/Play/CustomGames.styl b/src/views/Play/CustomGames.styl
@@ -22,6 +22,54 @@
     align-items: stretch;
     justify-content: center;
     box-sizing: border-box;
+
+    .header-container {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5em 0;
+        border-bottom: 1px solid #ccc;
+
+        .header-title {
+            margin: 0;
+            font-size: 1.5em;
+            flex-grow: 1; 
+        }
+
+        .toggle-container {
+            cursor: pointer;                        
+            display: flex;
+            align-items: center;
+            gap: 0.2em; 
+
+            .toggle-indicator{
+                background: none;
+                border: none;
+                font-size: 0.8em;
+                padding: 0;
+                line-height: 1;
+            }
+
+            .toggle-label {
+                font-size: 0.9em;
+                color: #666; 
+            }
+        }
+    }
+
+
+    .seek-graph-container.hidden {
+            clip-path: inset(0 100% 100% 0); /* Clip the entire element */
+            position: absolute; /* Remove it from the layout */
+    }
+
+    .seek-graph-container.visible {
+        .seek-graph-container.visible {
+            clip-path: none; /* Restore visibility */
+            position: static; /* Return to normal layout */
+        }
+    }
 
     .Modal {
         border: none;

diff --git a/src/views/Play/CustomGames.tsx b/src/views/Play/CustomGames.tsx
@@ -74,6 +74,12 @@ export function CustomGames(): JSX.Element {
     const canvas: HTMLCanvasElement = React.useMemo(() => allocateCanvasOrError(), []);
     const seekgraph = React.useRef<SeekGraph>();
 
+    const [seekGraphVisible, setSeekGraphVisible] = React.useState(true);
+
+    const toggleSeekGraph = () => {
+        setSeekGraphVisible((prev) => !prev);
+    };
+
     // Used to not change the challenge list while they are trying to point the mouse at it
     const [freeze_challenge_list, setFreezeChallengeList] = React.useState<boolean>(false);
 
@@ -463,9 +469,32 @@ export function CustomGames(): JSX.Element {
                     )}
                 </Card>
                 <div className="row">
-                    <h2>{pgettext("Games available to accept", "Available Games")}</h2>
+                    <div className="row header-container">
+                        <h2 className="header-title">
+                            {pgettext("Games available to accept", "Available Games")}
+                        </h2>
+                        <div className="toggle-container" onClick={toggleSeekGraph}>
+                            <div className="toggle-indicator">{seekGraphVisible ? "▼" : "▶"}</div>
+                            <span className="toggle-label">
+                                {seekGraphVisible
+                                    ? pgettext(
+                                          "label for button to hide the graph of available challenges vs rank",
+                                          "Hide plot",
+                                      )
+                                    : pgettext(
+                                          "label for button to show the graph of available challenges vs rank",
+                                          "Show plot",
+                                      )}
+                            </span>
+                        </div>
+                    </div>
 
-                    <div ref={ref_container} className="seek-graph-container">
+                    <div
+                        ref={ref_container}
+                        className={`seek-graph-container ${
+                            seekGraphVisible ? "visible" : "hidden"
+                        }`}
+                    >
                         <OgsResizeDetector onResize={onResize} targetRef={ref_container} />
                         <PersistentElement elt={canvas} />
                     </div>