fix(seg): Enhance segmentation tools and UI, refactor code, and update dependencies (#4915)

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -12,33 +12,48 @@ import { CallbackCustomization } from 'platform/core/src/types';
 
 const { sortStudyInstances, formatDate, createStudyBrowserTabs } = utils;
 
+const thumbnailNoImageModalities = [
+  'SR',
+  'SEG',
+  'SM',
+  'RTSTRUCT',
+  'RTPLAN',
+  'RTDOSE',
+  'DOC',
+  'OT',
+  'PMAP',
+];
+
 /**
- *
- * @param {*} param0
+ * Study Browser component that displays and manages studies and their display sets
  */
 function PanelStudyBrowser({
   getImageSrc,
   getStudiesForPatientByMRN,
   requestDisplaySetCreationForStudy,
   dataSource,
+  customMapDisplaySets,
+  onClickUntrack,
 }) {
   const { servicesManager, commandsManager } = useSystem();
   const { displaySetService, customizationService } = servicesManager.services;
   const navigate = useNavigate();
+  const studyMode = customizationService.getCustomization('studyBrowser.studyMode') || 'all';
+
+  const internalImageViewer = useImageViewer();
+  const StudyInstanceUIDs = internalImageViewer.StudyInstanceUIDs;
 
-  // Normally you nest the components so the tree isn't so deep, and the data
-  // doesn't have to have such an intense shape. This works well enough for now.
-  // Tabs --> Studies --> DisplaySets --> Thumbnails
-  const { StudyInstanceUIDs } = useImageViewer();
   const [{ activeViewportId, viewports, isHangingProtocolLayout }] = useViewportGrid();
-  const [activeTabName, setActiveTabName] = useState('all');
+  const [activeTabName, setActiveTabName] = useState(studyMode);
   const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([
     ...StudyInstanceUIDs,
   ]);
   const [hasLoadedViewports, setHasLoadedViewports] = useState(false);
   const [studyDisplayList, setStudyDisplayList] = useState([]);
   const [displaySets, setDisplaySets] = useState([]);
+  const [displaySetsLoadingState, setDisplaySetsLoadingState] = useState({});
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
+  const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
 
   const [viewPresets, setViewPresets] = useState(
     customizationService.getCustomization('studyBrowser.viewPresets')
@@ -65,6 +80,8 @@ function PanelStudyBrowser({
     setViewPresets(newViewPresets);
   };
 
+  const mapDisplaySetsWithState = customMapDisplaySets || _mapDisplaySets;
+
   const onDoubleClickThumbnailHandler = useCallback(
     async displaySetInstanceUID => {
       const customHandler = customizationService.getCustomization(
@@ -121,7 +138,7 @@ function PanelStudyBrowser({
       const actuallyMappedStudies = mappedStudies.map(qidoStudy => {
         return {
           studyInstanceUid: qidoStudy.StudyInstanceUID,
-          date: formatDate(qidoStudy.StudyDate),
+          date: formatDate(qidoStudy.StudyDate) || '',
           description: qidoStudy.StudyDescription,
           modalities: qidoStudy.ModalitiesInStudy,
           numInstances: Number(qidoStudy.NumInstances),
@@ -142,7 +159,7 @@ function PanelStudyBrowser({
     StudyInstanceUIDs.forEach(sid => fetchStudiesForPatient(sid));
   }, [StudyInstanceUIDs, dataSource, getStudiesForPatientByMRN, navigate]);
 
-  // // ~~ Initial Thumbnails
+  // ~~ Initial Thumbnails
   useEffect(() => {
     if (!hasLoadedViewports) {
       if (activeViewportId) {
@@ -150,19 +167,35 @@ function PanelStudyBrowser({
         // so wait a bit of time to allow the viewports preferential loading
         // which improves user experience of responsiveness significantly on slower
         // systems.
-        window.setTimeout(() => setHasLoadedViewports(true), 250);
+        const delayMs = 250 + displaySetService.getActiveDisplaySets().length * 10;
+        window.setTimeout(() => setHasLoadedViewports(true), delayMs);
       }
 
       return;
     }
 
-    const currentDisplaySets = displaySetService.activeDisplaySets;
+    let currentDisplaySets = displaySetService.activeDisplaySets;
+    // filter non based on the list of modalities that are supported by cornerstone
+    currentDisplaySets = currentDisplaySets.filter(
+      ds => !thumbnailNoImageModalities.includes(ds.Modality)
+    );
+
+    if (!currentDisplaySets.length) {
+      return;
+    }
+
     currentDisplaySets.forEach(async dSet => {
       const newImageSrcEntry = {};
       const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
       const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
-      const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
+      const imageId = getImageIdForThumbnail(displaySet, imageIds);
+
+      // TODO: Is it okay that imageIds are not returned here for SR displaySets?
+      if (!imageId || displaySet?.unsupported) {
+        return;
+      }
+      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
       let { thumbnailSrc } = displaySet;
       if (!thumbnailSrc && displaySet.getThumbnailSrc) {
         thumbnailSrc = await displaySet.getThumbnailSrc();
@@ -172,39 +205,40 @@ function PanelStudyBrowser({
         displaySet.thumbnailSrc = thumbnailSrc;
       }
       newImageSrcEntry[dSet.displaySetInstanceUID] = thumbnailSrc;
-      // TODO: Is it okay that imageIds are not returned here for SR displaySets?
-      if (!imageId || displaySet?.unsupported) {
-        return;
-      }
-      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-      try {
-        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
-      } catch (e) {
-        // This can happen for thumbnails and generate huge log sets if logged.
-        return;
-      }
+
       setThumbnailImageSrcMap(prevState => {
         return { ...prevState, ...newImageSrcEntry };
       });
     });
-  }, [
-    StudyInstanceUIDs,
-    dataSource,
-    displaySetService,
-    getImageSrc,
-    hasLoadedViewports,
-    activeViewportId,
-  ]);
+  }, [displaySetService, dataSource, getImageSrc, activeViewportId, hasLoadedViewports]);
 
   // ~~ displaySets
   useEffect(() => {
-    // TODO: Are we sure `activeDisplaySets` will always be accurate?
     const currentDisplaySets = displaySetService.activeDisplaySets;
-    const mappedDisplaySets = _mapDisplaySets(currentDisplaySets, thumbnailImageSrcMap);
-    sortStudyInstances(mappedDisplaySets);
+
+    if (!currentDisplaySets.length) {
+      return;
+    }
+
+    const mappedDisplaySets = mapDisplaySetsWithState(
+      currentDisplaySets,
+      displaySetsLoadingState,
+      thumbnailImageSrcMap,
+      viewports
+    );
+
+    if (!customMapDisplaySets) {
+      sortStudyInstances(mappedDisplaySets);
+    }
 
     setDisplaySets(mappedDisplaySets);
-  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
+  }, [
+    displaySetService.activeDisplaySets,
+    displaySetsLoadingState,
+    viewports,
+    thumbnailImageSrcMap,
+    customMapDisplaySets,
+  ]);
 
   // ~~ subscriptions --> displaySets
   useEffect(() => {
@@ -212,30 +246,41 @@ function PanelStudyBrowser({
     const SubscriptionDisplaySetsAdded = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_ADDED,
       data => {
-        // for some reason this breaks thumbnail loading
-        // if (!hasLoadedViewports) {
-        //   return;
-        // }
-        const { displaySetsAdded } = data;
+        if (!hasLoadedViewports) {
+          return;
+        }
+        const { displaySetsAdded, options } = data;
         displaySetsAdded.forEach(async dSet => {
+          const displaySetInstanceUID = dSet.displaySetInstanceUID;
+
           const newImageSrcEntry = {};
-          const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
+          const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
           if (displaySet?.unsupported) {
             return;
           }
 
+          if (options?.madeInClient) {
+            setJumpToDisplaySet(displaySetInstanceUID);
+          }
+
           const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
-          const imageId = imageIds[Math.floor(imageIds.length / 2)];
+          const imageId = getImageIdForThumbnail(displaySet, imageIds);
 
           // TODO: Is it okay that imageIds are not returned here for SR displaysets?
           if (!imageId) {
             return;
           }
+
           // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-          newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
-            imageId,
-            dSet.initialViewport
-          );
+          let { thumbnailSrc } = displaySet;
+          if (!thumbnailSrc && displaySet.getThumbnailSrc) {
+            thumbnailSrc = await displaySet.getThumbnailSrc();
+          }
+          if (!thumbnailSrc) {
+            thumbnailSrc = await getImageSrc(imageId);
+            displaySet.thumbnailSrc = thumbnailSrc;
+          }
+          newImageSrcEntry[displaySetInstanceUID] = thumbnailSrc;
 
           setThumbnailImageSrcMap(prevState => {
             return { ...prevState, ...newImageSrcEntry };
@@ -247,7 +292,7 @@ function PanelStudyBrowser({
     return () => {
       SubscriptionDisplaySetsAdded.unsubscribe();
     };
-  }, [getImageSrc, dataSource, displaySetService]);
+  }, [displaySetService, dataSource, getImageSrc, hasLoadedViewports]);
 
   useEffect(() => {
     // TODO: Will this always hold _all_ the displaySets we care about?
@@ -255,7 +300,17 @@ function PanelStudyBrowser({
     const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_CHANGED,
       changedDisplaySets => {
-        const mappedDisplaySets = _mapDisplaySets(changedDisplaySets, thumbnailImageSrcMap);
+        const mappedDisplaySets = mapDisplaySetsWithState(
+          changedDisplaySets,
+          displaySetsLoadingState,
+          thumbnailImageSrcMap,
+          viewports
+        );
+
+        if (!customMapDisplaySets) {
+          sortStudyInstances(mappedDisplaySets);
+        }
+
         setDisplaySets(mappedDisplaySets);
       }
     );
@@ -263,11 +318,17 @@ function PanelStudyBrowser({
     const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
       () => {
-        const mappedDisplaySets = _mapDisplaySets(
+        const mappedDisplaySets = mapDisplaySetsWithState(
           displaySetService.getActiveDisplaySets(),
-          thumbnailImageSrcMap
+          displaySetsLoadingState,
+          thumbnailImageSrcMap,
+          viewports
         );
 
+        if (!customMapDisplaySets) {
+          sortStudyInstances(mappedDisplaySets);
+        }
+
         setDisplaySets(mappedDisplaySets);
       }
     );
@@ -276,7 +337,13 @@ function PanelStudyBrowser({
       SubscriptionDisplaySetsChanged.unsubscribe();
       SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
-  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
+  }, [
+    displaySetsLoadingState,
+    thumbnailImageSrcMap,
+    viewports,
+    displaySetService,
+    customMapDisplaySets,
+  ]);
 
   const tabs = createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
 
@@ -284,8 +351,7 @@ function PanelStudyBrowser({
   function _handleStudyClick(StudyInstanceUID) {
     const shouldCollapseStudy = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
     const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
-      ? // eslint-disable-next-line prettier/prettier
-        [...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)]
+      ? [...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)]
       : [...expandedStudyInstanceUIDs, StudyInstanceUID];
 
     setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -296,6 +362,43 @@ function PanelStudyBrowser({
     }
   }
 
+  useEffect(() => {
+    if (jumpToDisplaySet) {
+      // Get element by displaySetInstanceUID
+      const displaySetInstanceUID = jumpToDisplaySet;
+      const element = document.getElementById(`thumbnail-${displaySetInstanceUID}`);
+
+      if (element && typeof element.scrollIntoView === 'function') {
+        // TODO: Any way to support IE here?
+        element.scrollIntoView({ behavior: 'smooth' });
+
+        setJumpToDisplaySet(null);
+      }
+    }
+  }, [jumpToDisplaySet, expandedStudyInstanceUIDs, activeTabName]);
+
+  useEffect(() => {
+    if (!jumpToDisplaySet) {
+      return;
+    }
+
+    const displaySetInstanceUID = jumpToDisplaySet;
+    // Set the activeTabName and expand the study
+    const thumbnailLocation = _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs);
+    if (!thumbnailLocation) {
+      console.warn('jumpToThumbnail: displaySet thumbnail not found.');
+
+      return;
+    }
+    const { tabName, StudyInstanceUID } = thumbnailLocation;
+    setActiveTabName(tabName);
+    const studyExpanded = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
+    if (!studyExpanded) {
+      const updatedExpandedStudyInstanceUIDs = [...expandedStudyInstanceUIDs, StudyInstanceUID];
+      setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
+    }
+  }, [expandedStudyInstanceUIDs, jumpToDisplaySet, tabs]);
+
   const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
 
   return (
@@ -323,10 +426,11 @@ function PanelStudyBrowser({
         onClickTab={clickedTabName => {
           setActiveTabName(clickedTabName);
         }}
+        onClickUntrack={onClickUntrack}
         onClickThumbnail={() => {}}
         onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
         activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
-        showSettings={actionIcons.find(icon => icon.id === 'settings').value}
+        showSettings={actionIcons.find(icon => icon.id === 'settings')?.value}
         viewPresets={viewPresets}
         ThumbnailMenuItems={MoreDropdownMenu({
           commandsManager,
@@ -367,35 +471,36 @@ function _mapDataSourceStudies(studies) {
   });
 }
 
-function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
+function _mapDisplaySets(displaySets, displaySetLoadingState, thumbnailImageSrcMap, viewports) {
   const thumbnailDisplaySets = [];
   const thumbnailNoImageDisplaySets = [];
-
   displaySets
     .filter(ds => !ds.excludeFromThumbnailBrowser)
     .forEach(ds => {
-      const { thumbnailSrc, displaySetInstanceUID } = ds; // thumbnailImageSrcMap[ds.displaySetInstanceUID];
+      const { thumbnailSrc, displaySetInstanceUID } = ds;
       const componentType = _getComponentType(ds);
 
       const array =
         componentType === 'thumbnail' ? thumbnailDisplaySets : thumbnailNoImageDisplaySets;
 
+      const loadingProgress = displaySetLoadingState?.[displaySetInstanceUID];
+
       array.push({
-        displaySetInstanceUID: ds.displaySetInstanceUID,
+        displaySetInstanceUID,
         description: ds.SeriesDescription || '',
         seriesNumber: ds.SeriesNumber,
         modality: ds.Modality,
-        seriesDate: ds.SeriesDate,
-        seriesTime: ds.SeriesTime,
-        numInstances: parseInt(ds.numImageFrames),
+        seriesDate: formatDate(ds.SeriesDate),
+        numInstances: ds.numImageFrames,
+        loadingProgress,
         countIcon: ds.countIcon,
-        StudyInstanceUID: ds.StudyInstanceUID,
         messages: ds.messages,
+        StudyInstanceUID: ds.StudyInstanceUID,
         componentType,
         imageSrc: thumbnailSrc || thumbnailImageSrcMap[displaySetInstanceUID],
         dragData: {
           type: 'displayset',
-          displaySetInstanceUID: ds.displaySetInstanceUID,
+          displaySetInstanceUID,
           // .. Any other data to pass
         },
         isHydratedForDerivedDisplaySet: ds.isHydrated,
@@ -405,13 +510,44 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
   return [...thumbnailDisplaySets, ...thumbnailNoImageDisplaySets];
 }
 
-const thumbnailNoImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
-
 function _getComponentType(ds) {
   if (thumbnailNoImageModalities.includes(ds.Modality) || ds?.unsupported) {
-    // TODO probably others.
     return 'thumbnailNoImage';
   }
 
   return 'thumbnail';
 }
+
+function getImageIdForThumbnail(displaySet, imageIds) {
+  let imageId;
+  if (displaySet.isDynamicVolume) {
+    const timePoints = displaySet.dynamicVolumeInfo.timePoints;
+    const middleIndex = Math.floor(timePoints.length / 2);
+    const middleTimePointImageIds = timePoints[middleIndex];
+    imageId = middleTimePointImageIds[Math.floor(middleTimePointImageIds.length / 2)];
+  } else {
+    imageId = imageIds[Math.floor(imageIds.length / 2)];
+  }
+  return imageId;
+}
+
+function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
+  for (let t = 0; t < tabs.length; t++) {
+    const { studies } = tabs[t];
+
+    for (let s = 0; s < studies.length; s++) {
+      const { displaySets } = studies[s];
+
+      for (let d = 0; d < displaySets.length; d++) {
+        const displaySet = displaySets[d];
+
+        if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
+          return {
+            tabName: tabs[t].name,
+            StudyInstanceUID: studies[s].studyInstanceUid,
+          };
+        }
+      }
+    }
+  }
+}

extensions/default/src/Panels/getStudiesForPatientByMRN.js

@@ -1,12 +1,19 @@
 async function getStudiesForPatientByMRN(dataSource, qidoForStudyUID) {
-  if (qidoForStudyUID && qidoForStudyUID.length && qidoForStudyUID[0].mrn) {
-    return dataSource.query.studies.search({
-      patientId: qidoForStudyUID[0].mrn,
-      disableWildcard: true,
-    });
+  if (!qidoForStudyUID?.length) {
+    return [];
   }
-  console.log('No mrn found for', qidoForStudyUID);
-  return qidoForStudyUID;
+
+  const mrn = qidoForStudyUID[0].mrn;
+
+  // if not defined or empty, return the original qidoForStudyUID
+  if (!mrn) {
+    return qidoForStudyUID;
+  }
+
+  return dataSource.query.studies.search({
+    patientId: mrn,
+    disableWildcard: true,
+  });
 }
 
 export default getStudiesForPatientByMRN;

extensions/default/src/ViewerLayout/index.tsx

@@ -55,16 +55,8 @@ function ViewerLayout({
     setRightPanelClosed
   );
 
-  const leftPanelRef = useRef<HTMLDivElement>(null);
-  const rightPanelRef = useRef<HTMLDivElement>(null);
-
   const handleMouseEnter = () => {
-    if (
-      leftPanelRef.current?.contains(document.activeElement) ||
-      rightPanelRef.current?.contains(document.activeElement)
-    ) {
-      (document.activeElement as HTMLElement)?.blur();
-    }
+    (document.activeElement as HTMLElement)?.blur();
   };
 
   const LoadingIndicatorProgress = customizationService.getCustomization(
@@ -79,6 +71,7 @@ function ViewerLayout({
   useEffect(() => {
     document.body.classList.add('bg-black');
     document.body.classList.add('overflow-hidden');
+
     return () => {
       document.body.classList.remove('bg-black');
       document.body.classList.remove('overflow-hidden');
@@ -165,14 +158,12 @@ function ViewerLayout({
             {hasLeftPanels ? (
               <>
                 <ResizablePanel {...resizableLeftPanelProps}>
-                  <div ref={leftPanelRef}>
-                    <SidePanelWithServices
-                      side="left"
-                      isExpanded={!leftPanelClosedState}
-                      servicesManager={servicesManager}
-                      {...leftPanelProps}
-                    />
-                  </div>
+                  <SidePanelWithServices
+                    side="left"
+                    isExpanded={!leftPanelClosedState}
+                    servicesManager={servicesManager}
+                    {...leftPanelProps}
+                  />
                 </ResizablePanel>
                 <ResizableHandle
                   onDragging={onHandleDragging}
@@ -204,14 +195,12 @@ function ViewerLayout({
                   className={resizableHandleClassName}
                 />
                 <ResizablePanel {...resizableRightPanelProps}>
-                  <div ref={rightPanelRef}>
-                    <SidePanelWithServices
-                      side="right"
-                      isExpanded={!rightPanelClosedState}
-                      servicesManager={servicesManager}
-                      {...rightPanelProps}
-                    />
-                  </div>
+                  <SidePanelWithServices
+                    side="right"
+                    isExpanded={!rightPanelClosedState}
+                    servicesManager={servicesManager}
+                    {...rightPanelProps}
+                  />
                 </ResizablePanel>
               </>
             ) : null}