allow bar navigation for volume

dicom-viewer/src/App.tsx

@@ -1941,10 +1941,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         if (!imageIds || imageIds.length === 0) return;
 
         if (e.key === "ArrowUp" || e.key === "ArrowRight") {
-          csUtilities.scroll(viewport, { delta: -1});
+          csUtilities.scroll(viewport, { delta: -1 });
           e.preventDefault();
         } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
-          csUtilities.scroll(viewport, { delta: 1});
+          csUtilities.scroll(viewport, { delta: 1 });
           e.preventDefault();
         }
       }
@@ -1959,10 +1959,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           const numSlices = viewport.getNumberOfSlices();
           if (numSlices > 1) {
             if (e.key === "ArrowUp" || e.key === "ArrowRight") {
-              csUtilities.scroll(viewport, { delta: -1});
+              csUtilities.scroll(viewport, { delta: -1 });
               e.preventDefault();
             } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
-              csUtilities.scroll(viewport, { delta: 1});
+              csUtilities.scroll(viewport, { delta: 1 });
               e.preventDefault();
             }
           }
@@ -2577,6 +2577,103 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
             </div>
           </div>
         )}
+        {viewportModes[i] === "volume" && (() => {
+          const renderingEngine = renderingEngineRef.current;
+          const viewport = renderingEngine?.getViewport(`CT_${i}`);
+          let numSlices = 0;
+          let currentSlice = 0;
+          if (viewport && typeof viewport.getNumberOfSlices === "function" && typeof viewport.getSliceIndex === "function") {
+            numSlices = viewport.getNumberOfSlices();
+            currentSlice = viewport.getSliceIndex();
+          }
+          if (numSlices > 1) {
+            return (
+              <div
+                style={{
+                  position: "absolute",
+                  top: "10%",
+                  right: 8,
+                  width: "12px",
+                  height: "80%",
+                  maxHeight: "100%",
+                  minHeight: 0,
+                  zIndex: 30,
+                  display: "flex",
+                  alignItems: "flex-start",
+                  justifyContent: "center",
+                  pointerEvents: "auto", // Enable pointer events for click
+                  flexDirection: "column",
+                  padding: 0,
+                }}
+              >
+                <div
+                  style={{
+                    width: "8px",
+                    height: "100%",
+                    maxHeight: "100%",
+                    minHeight: 0,
+                    borderRadius: "6px",
+                    background: "#222",
+                    position: "relative",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "flex-start",
+                    boxShadow: "0 0 8px #2196f3cc",
+                    overflow: "hidden",
+                    cursor: "pointer",
+                  }}
+                  onClick={e => {
+                    // Calculate the clicked slice index
+                    const bar = e.currentTarget as HTMLDivElement;
+                    const rect = bar.getBoundingClientRect();
+                    const y = e.clientY - rect.top;
+                    const sliceIdx = Math.floor((y / rect.height) * numSlices);
+                    const renderingEngine = renderingEngineRef.current;
+                    const viewport = renderingEngine?.getViewport(`CT_${i}`);
+                    if (
+                      viewport
+                    ) {
+                      csUtilities.jumpToSlice(viewport.element, { imageIndex: sliceIdx });
+                      viewport.render();
+                      updateOverlay(i, viewport);
+                    }
+                  }}
+                >
+                  {Array.from({ length: numSlices }).map((_, idx) => {
+                    const isCurrent = idx === currentSlice;
+                    return (
+                      <div
+                        key={idx}
+                        style={{
+                          width: "100%",
+                          height: `${100 / numSlices}%`,
+                          minHeight: isCurrent ? 1 : 0,
+                          background: isCurrent
+                            ? "linear-gradient(to right, #ffeb3b 60%, #ff9800 100%)"
+                            : "#444",
+                          opacity: isCurrent ? 0.95 : 0.4,
+                          transition: "background 0.3s, opacity 0.3s",
+                          borderBottom:
+                            idx < numSlices - 1
+                              ? "1px solid #222"
+                              : "none",
+                          pointerEvents: "none", // Prevent child from blocking parent click
+                          cursor: "pointer",
+                        }}
+                        title={
+                          isCurrent
+                            ? `Current slice #${idx + 1}`
+                            : `Go to slice #${idx + 1}`
+                        }
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+          return null;
+        })()}
         {isVisible && (availableStacks.length > 1 || !viewportImageIds[i] || viewportImageIds[i].length === 0) && (
           <div
             style={{