Enhance stack handling by adding studyId support and improving descriptor parsing logic

dicom-viewer/src/App.tsx

@@ -64,10 +64,11 @@ declare global {
 }
 
 type StackEntry = {
-  imageIds: string[],
+  imageIds: string[];
-  studyInstanceUID?: string,
+  studyInstanceUID?: string;
-  name?: string,
+  name?: string;
-  caseId?: string,
+  caseId?: string;
+  studyId?: string;
 };
 
 
@@ -2829,7 +2830,9 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
               {/* Dropdown */}
               {openDropdownIdx === i && (
                 <div
-                  ref={el => { if (el) el.focus(); }}
+                  ref={el => {
+                    if (el) el.focus();
+                  }}
                   tabIndex={0}
                   style={{
                     position: "absolute",
@@ -2840,16 +2843,17 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                     borderRadius: "4px",
                     boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
                     zIndex: 100,
-                    minWidth: 180,
+                    minWidth: 220,
-                    maxHeight: 220,
+                    maxHeight: 260,
                     overflowY: "auto",
                     overscrollBehavior: "contain",
                     scrollbarWidth: "thin",
+                    padding: 6,
                   }}
                   role="listbox"
                   onMouseDown={e => e.stopPropagation()}
+                  onWheel={e => { /* trap handled elsewhere */ }}
                   onBlur={e => {
-                    // close when focus leaves
                     setTimeout(() => {
                       if (!(e.currentTarget as HTMLElement).contains(document.activeElement)) {
                         setOpenDropdownIdx(null);
@@ -2857,10 +2861,25 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                     }, 0);
                   }}
                 >
-                  {availableStacks.map((stackObj, idx) => {
+                  {/* Group stacks by studyId (use 'Unspecified' for missing) */}
-                    const imageIds = (stackObj && Array.isArray((stackObj as any).imageIds)) ? (stackObj as any).imageIds : [];
+                  {(() => {
-                    const label = (stackObj && ((stackObj as any).name || (stackObj as any).caseId))
+                    const groups: Record<string, { idx: number; stack: any }[]> = {};
-                      ? ((stackObj as any).name || `Case: ${(stackObj as any).caseId}`)
+                    availableStacks.forEach((stackObj, idx) => {
+                      const studyKey = (stackObj as any).studyId || (stackObj as any).studyInstanceUID || "Unspecified";
+                      if (!groups[studyKey]) groups[studyKey] = [];
+                      groups[studyKey].push({ idx, stack: stackObj });
+                    });
+
+                    return Object.keys(groups).map(studyKey => (
+                      <div key={studyKey} style={{ marginBottom: 6 }}>
+                        <div style={{ fontSize: 12, color: "#aaa", padding: "4px 8px", fontWeight: 700 }}>
+                          {studyKey === "Unspecified" ? "Unspecified study" : `Study: ${studyKey}`}
+                        </div>
+                        <div>
+                          {groups[studyKey].map(({ idx, stack }) => {
+                            const imageIds = Array.isArray((stack as any).imageIds) ? (stack as any).imageIds : [];
+                            const label = (stack && ((stack as any).name || (stack as any).caseId))
+                              ? ((stack as any).name || `Case: ${(stack as any).caseId}`)
                               : `Stack ${idx + 1}`;
                             const count = imageIds.length;
                             const invalid = !Array.isArray(imageIds) || count === 0;
@@ -2870,7 +2889,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                                 key={idx}
                                 role="option"
                                 aria-selected={false}
-                        title={invalid ? `Invalid stack descriptor` : `${label} — ${count} image${count === 1 ? '' : 's'}${(stackObj as any)?.caseId ? ` — case ${(stackObj as any).caseId}` : ''}`}
+                                title={invalid ? `Invalid stack descriptor` : `${label} — ${count} image${count === 1 ? '' : 's'}${(stack as any)?.caseId ? ` — case ${(stack as any).caseId}` : ''}`}
                                 style={{
                                   display: "flex",
                                   flexDirection: "column",
@@ -2886,20 +2905,25 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   if (invalid) {
-                            console.warn(`Attempted to select invalid stack at index ${idx}`, stackObj);
+                                    console.warn(`Attempted to select invalid stack at index ${idx}`, stack);
                                     return;
                                   }
-                          // Use existing handler to load the stack into this viewport
                                   handleLoadStack(i, idx).catch(err => console.error("Failed to load stack:", err));
                                   setOpenDropdownIdx(null);
                                 }}
                               >
                                 <div style={{ fontWeight: "600", fontSize: 13 }}>{label}</div>
-                        <div style={{ fontSize: 12, opacity: 0.7 }}>{count} image{count === 1 ? '' : 's'}</div>
+                                <div style={{ fontSize: 12, opacity: 0.7 }}>
+                                  {count} image{count === 1 ? '' : 's'}{(stack as any)?.caseId ? ` • case ${(stack as any).caseId}` : ''}
+                                </div>
                               </button>
                             );
                           })}
                         </div>
+                      </div>
+                    ));
+                  })()}
+                </div>
               )}
             </div>
           </div>

dicom-viewer/src/main.tsx

@@ -42,7 +42,7 @@ export function mountDicomViewers() {
 
     const parseToDescriptors = (parsed: any): Array<any> => {
   // Return array of descriptors: either simple string[] => { imageIds: string[] }
-      // or objects: { imageIds: string[], name?, caseId? }
+  // or objects: { imageIds: string[], name?, caseId?, studyId? }
   if (!parsed) return [];
 
   // If top-level is an array of strings -> single unnamed stack
@@ -53,9 +53,10 @@ export function mountDicomViewers() {
   if (Array.isArray(parsed)) {
     const out: any[] = [];
     parsed.forEach((item, itemIdx) => {
-          // Case object with nested stacks: { caseId, stacks: [ { name, imageIds } ] }
+      // Case object with nested stacks: { caseId, studyId, stacks: [ { name, imageIds } ] }
       if (item && typeof item === "object" && Array.isArray(item.stacks)) {
         const caseId = item.caseId || item.caseUID || item.case || undefined;
+        const studyId = item.studyId || item.studyUID || item.studyInstanceUID || undefined;
         item.stacks.forEach((s: any, sIdx: number) => {
           let imageIds: string[] = [];
           if (Array.isArray(s)) imageIds = s;
@@ -72,12 +73,13 @@ export function mountDicomViewers() {
             imageIds: toWadouri(imageIds),
             name: s.name || s.label || undefined,
             caseId,
+            studyId: s.studyId || studyId,
           });
         });
         return;
       }
 
-          // Stack object: { imageIds, i, name, caseId }
+      // Stack object: { imageIds, i, name, caseId, studyId }
       if (item && typeof item === 'object' && (Array.isArray(item.imageIds) || Array.isArray(item.i))) {
         const imageIds = Array.isArray(item.imageIds) ? item.imageIds : item.i;
 
@@ -90,6 +92,7 @@ export function mountDicomViewers() {
           imageIds: toWadouri(imageIds),
           name: item.name || item.label || undefined,
           caseId: item.caseId || item.caseUID || undefined,
+          studyId: item.studyId || item.studyUID || item.studyInstanceUID || undefined,
         });
         return;
       }