Merge pull request #2871 from GreenAsJade/seek_graph_toggle

Provide a toggle to turn on display of seek graph
online-go · Nov 25, 2024 · 70d8c5b · 70d8c5b
2 parents 1d6bc05 + 909add7
commit 70d8c5b
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 3 deletions.
diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts
@@ -109,6 +109,7 @@ export const defaults = {
     "show-move-numbers": true,
     "show-offline-friends": true,
     "show-ratings-in-rating-grid": false,
+    "show-seek-graph": false,
 
     "show-tournament-indicator": true, // implicitly on desktop
     "show-tournament-indicator-on-mobile": false,

diff --git a/src/views/Play/CustomGames.styl b/src/views/Play/CustomGames.styl
@@ -22,12 +22,62 @@
     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; 
+            }
+        }
+    }
+
+
+    // This shenanigans is needed to ensure that the canvas of the seek graph
+    // remains rendered, so we don't loose the reference we have to it.
+    .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;
         box-shadow: none;
     }
-    
+
     .ChallengeModal {
         width: 100%;
         max-height: unset;

diff --git a/src/views/Play/CustomGames.tsx b/src/views/Play/CustomGames.tsx
@@ -20,6 +20,7 @@ import * as preferences from "@/lib/preferences";
 import * as player_cache from "@/lib/player_cache";
 import * as rengo_utils from "@/lib/rengo_utils";
 
+import { usePreference } from "@/lib/preferences";
 import { del } from "@/lib/requests";
 import { alert } from "@/lib/swal_config";
 import { OgsResizeDetector } from "@/components/OgsResizeDetector";
@@ -74,6 +75,12 @@ export function CustomGames(): JSX.Element {
     const canvas: HTMLCanvasElement = React.useMemo(() => allocateCanvasOrError(), []);
     const seekgraph = React.useRef<SeekGraph>();
 
+    const [seekGraphVisible, setSeekGraphVisible] = usePreference("show-seek-graph");
+
+    const toggleSeekGraph = () => {
+        setSeekGraphVisible(!seekGraphVisible);
+    };
+
     // 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 +470,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>