Implement code changes to enhance functionality and improve performance

dicom-viewer/src/App.tsx

@@ -2790,50 +2790,46 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           >
             {/* Custom Stack Dropdown */}
             <div style={{ position: "relative" }}>
+              {/* Stack selector trigger button */}
               <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpenDropdownIdx(prev => (prev === i ? null : i));
+                }}
                 style={{
-                  background: "#222",
+                  padding: "6px 12px",
+                  background: "#333",
                   color: "#fff",
                   border: "1px solid #444",
                   borderRadius: "4px",
-                  padding: "2px 8px",
-                  fontSize: "13px",
-                  marginRight: "6px",
-                  minWidth: 120,
-                  textAlign: "left",
                   cursor: "pointer",
+                  pointerEvents: "auto",
+                  fontSize: 13,
                 }}
-                onClick={() => setOpenDropdownIdx(openDropdownIdx === i ? null : i)}
+                title="Choose stack"
-                //onBlur={() => setTimeout(() => setOpenDropdownIdx(null), 150)}
-                aria-haspopup="listbox"
-                aria-expanded={openDropdownIdx === i}
               >
-                {/* Show current stack with indicator */}
                 {(() => {
-                  const stackObj = availableStacks[selectedStackIdx[i] || 0];
+                  // Determine label for currently selected stack in this viewport
-                  const thisUID = stackObj?.studyInstanceUID;
+                  const selIdx = (Array.isArray(selectedStackIdx) ? selectedStackIdx[i] : undefined);
-                  const sameStudy = referenceUID && thisUID && referenceUID === thisUID;
+                  const stackObj = typeof selIdx === "number" && availableStacks[selIdx] ? availableStacks[selIdx] : undefined;
-                  const dotColor = sameStudy ? "#4caf50" : "#888";
+                  const imageIds = stackObj && Array.isArray((stackObj as any).imageIds) ? (stackObj as any).imageIds : [];
-                  return (
+                  const label = stackObj
-                    <span>
+                    ? ((stackObj as any).name || ((stackObj as any).caseId ? `Case: ${(stackObj as any).caseId}` : undefined))
-                      <span style={{
+                    : undefined;
-                        color: dotColor,
+                  if (label) return label;
-                        fontWeight: "bold",
+                  if (imageIds.length > 0) return `Stack ${(typeof selIdx === 'number') ? (selIdx + 1) : '1'}`;
-                        marginRight: 6,
+                  // fallback: if viewport already has images, show count
-                        fontSize: "16px",
+                  const currentImages = viewportImageIds[i] || [];
-                        verticalAlign: "middle",
+                  if (currentImages.length > 0) return `Stack (${currentImages.length} images)`;
-                      }}>●</span>
+                  return "No stack";
-                      Stack {selectedStackIdx[i] + 1} ({stackObj?.imageIds.length || 0} images)
-                    </span>
-                  );
                 })()}
-                <span style={{ float: "right", fontSize: "12px" }}>▼</span>
+                <span style={{ marginLeft: 8, opacity: 0.8 }}>{openDropdownIdx === i ? "▲" : "▼"}</span>
               </button>
+
+              {/* Dropdown */}
               {openDropdownIdx === i && (
                 <div
-                  ref={el => {
+                  ref={el => { if (el) el.focus(); }}
-                    if (el) el.focus();
-                  }}
                   tabIndex={0}
                   style={{
                     position: "absolute",
@@ -2852,31 +2848,13 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                   }}
                   role="listbox"
                   onMouseDown={e => e.stopPropagation()}
-                  onWheel={e => {
-                    // Trap scroll inside the dropdown
-                    const target = e.currentTarget as HTMLDivElement;
-                    const { scrollTop, scrollHeight, clientHeight } = target;
-                    const atTop = scrollTop === 0;
-                    const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
-                    if (
-                      (e.deltaY < 0 && atTop) ||
-                      (e.deltaY > 0 && atBottom)
-                    ) {
-                      // Let the event bubble to parent (viewport)
-                      return;
-                    }
-                    // Otherwise, prevent scrolling the viewport
-                    e.stopPropagation();
-                    e.preventDefault();
-                    // Manually scroll the menu
-                    target.scrollTop += e.deltaY;
-                  }}
                   onBlur={e => {
-                    const related = e.relatedTarget as Node;
+                    // close when focus leaves
-                    const parent = e.currentTarget.parentElement;
+                    setTimeout(() => {
-                    if (!parent?.contains(related)) {
+                      if (!(e.currentTarget as HTMLElement).contains(document.activeElement)) {
-                      setTimeout(() => setOpenDropdownIdx(null), 100);
+                        setOpenDropdownIdx(null);
                       }
+                    }, 0);
                   }}
                 >
                   {availableStacks.map((stackObj, idx) => {
@@ -2911,13 +2889,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                             console.warn(`Attempted to select invalid stack at index ${idx}`, stackObj);
                             return;
                           }
-                        // Select the stack for this viewport
+                          // Use existing handler to load the stack into this viewport
-                        // Use the shared handler so selection behavior is consistent
+                          handleLoadStack(i, idx).catch(err => console.error("Failed to load stack:", err));
-                        handleLoadStack(i, idx).catch((err) => {
-                          console.error("Failed to load stack:", err);
-                        });
-
-                        // Close the dropdown
                           setOpenDropdownIdx(null);
                         }}
                       >