From 3a92f5afba9f414837e7e62024c2da69aeca4a3c Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 30 Jun 2025 09:29:57 +0100
Subject: [PATCH] try and make preset menu always clickable

---
 dicom-viewer/src/App.tsx | 174 +++++++++++++++++++++------------------
 1 file changed, 92 insertions(+), 82 deletions(-)

diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index 734edce..2ac5a02 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -407,7 +407,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     total: number,
     windowCenter: string,
     windowWidth: string,
-    slicePosition?: number,
+    slicePosition: string,
   }>>(() =>
     Array(viewportGrid.rows * viewportGrid.cols).fill({
       index: 0,
@@ -2018,7 +2018,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           // cursor: "pointer",
           zIndex: activeViewport === i ? 10 : 1,
         }}
-        onClick={() => setActiveViewport(i)}
+        onClick={() => {
+          setActiveViewport(i);
+          setViewportMenuOpen(false); // <-- Add this line to close the grid selector
+        }}
         onDoubleClick={() => handleDoubleClick(i)}
       >
         <button
@@ -2393,91 +2396,98 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         </div>
 
         {/* Preset menu (bottom right of viewport) */}
-        <div
-          style={{
-            position: "absolute",
-            right: 8,
-            bottom: 8,
-            zIndex: 10,
-          }}
-        >
-          <div
-            className="preset-menu"
+<div
+  style={{
+    position: "absolute",
+    right: 8,
+    bottom: 8,
+    zIndex: 10,
+    pointerEvents: "auto", // <-- ensure pointer events are enabled
+  }}
+>
+  <div
+    className="preset-menu"
+    style={{
+      background: "rgba(0,0,0,0.7)",
+      color: "#fff",
+      borderRadius: "4px",
+      fontSize: "14px",
+      minWidth: "120px",
+      overflow: "hidden",
+      cursor: "pointer",
+      position: "relative",
+      boxShadow: presetsOpenArr[i] ? "0 2px 8px rgba(0,0,0,0.3)" : undefined,
+      pointerEvents: "auto", // <-- ensure pointer events are enabled
+    }}
+    onClick={e => e.stopPropagation()} // <-- prevent bubbling to viewport
+  >
+    <div
+      style={{
+        padding: "6px 12px",
+        fontWeight: "bold",
+        userSelect: "none",
+      }}
+      onClick={e => {
+        e.stopPropagation(); // <-- prevent bubbling to viewport
+        setPresetsOpenArr(prev => {
+          const next = [...prev];
+          next[i] = !next[i];
+          return next;
+        });
+      }}
+    >
+      Presets
+      <span style={{ float: "right", fontWeight: "normal" }}>
+        {presetsOpenArr[i] ? "▲" : "▼"}
+      </span>
+    </div>
+    {presetsOpenArr[i] && (
+      <div
+        className="preset-menu-content"
+        style={{
+          background: "rgba(0,0,0,0.95)",
+          borderRadius: "0 0 4px 4px",
+          padding: "6px 0 6px 0",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 11,
+          pointerEvents: "auto", // <-- ensure pointer events are enabled
+        }}
+        onClick={e => e.stopPropagation()} // <-- prevent bubbling to viewport
+      >
+        {WINDOW_LEVEL_PRESETS.map((preset) => (
+          <button
+            key={preset.name}
             style={{
-              background: "rgba(0,0,0,0.7)",
+              display: "block",
+              width: "100%",
+              margin: "2px 0",
+              background: "#333",
               color: "#fff",
-              borderRadius: "4px",
-              fontSize: "14px",
-              minWidth: "120px",
-              overflow: "hidden",
+              border: "none",
+              borderRadius: "3px",
               cursor: "pointer",
-              position: "relative",
-              boxShadow: presetsOpenArr[i] ? "0 2px 8px rgba(0,0,0,0.3)" : undefined,
+              padding: "4px 0",
+              fontSize: "13px",
+              opacity: 0.9,
+            }}
+            onClick={e => {
+              e.stopPropagation(); // <-- prevent bubbling to viewport
+              handleApplyPreset(i, preset.center, preset.width);
+              setPresetsOpenArr(prev => {
+                const next = [...prev];
+                next[i] = false;
+                return next;
+              });
             }}
           >
-            <div
-              style={{
-                padding: "6px 12px",
-                fontWeight: "bold",
-                userSelect: "none",
-              }}
-              onClick={() =>
-                setPresetsOpenArr(prev => {
-                  const next = [...prev];
-                  next[i] = !next[i];
-                  return next;
-                })
-              }
-            >
-              Presets
-              <span style={{ float: "right", fontWeight: "normal" }}>
-                {presetsOpenArr[i] ? "▲" : "▼"}
-              </span>
-            </div>
-            {presetsOpenArr[i] && (
-              <div
-                className="preset-menu-content"
-                style={{
-                  background: "rgba(0,0,0,0.95)",
-                  borderRadius: "0 0 4px 4px",
-                  padding: "6px 0 6px 0",
-                  display: "flex",
-                  flexDirection: "column",
-                  zIndex: 11,
-                }}
-              >
-                {WINDOW_LEVEL_PRESETS.map((preset) => (
-                  <button
-                    key={preset.name}
-                    style={{
-                      display: "block",
-                      width: "100%",
-                      margin: "2px 0",
-                      background: "#333",
-                      color: "#fff",
-                      border: "none",
-                      borderRadius: "3px",
-                      cursor: "pointer",
-                      padding: "4px 0",
-                      fontSize: "13px",
-                      opacity: 0.9,
-                    }}
-                    onClick={() => {
-                      handleApplyPreset(i, preset.center, preset.width);
-                      setPresetsOpenArr(prev => {
-                        const next = [...prev];
-                        next[i] = false;
-                        return next;
-                      });
-                    }}
-                  >
-                    {preset.name}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
+            {preset.name}
+          </button>
+        ))}
+      </div>
+    )}
+  </div>
+</div>
         {/* Position bar inside each viewport */}
         {viewportModes[i] === "stack" && viewportImageIds[i] && (
           <div