Try to do study panel the way react wants

extensions/default/src/getPanelModule.js

@@ -15,12 +15,15 @@ import MeasurementTable from './MeasurementTable.js';
 
 function getImageSrc(imageId, { cornerstone }) {
   return new Promise((resolve, reject) => {
-    cornerstone.loadAndCacheImage(imageId).then(image => {
+    cornerstone
+      .loadAndCacheImage(imageId)
+      .then(image => {
         const canvas = document.createElement('canvas');
         cornerstone.renderToCanvas(canvas, image);
 
         resolve(canvas.toDataURL());
-    });
+      })
+      .catch(reject);
   });
 }
 
@@ -33,8 +36,16 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
   const updateThumbnailMap = (k, v) => {
     setThumbnailImageSrcMap(thumbnailImageSrcMap.set(k, v));
   };
+  const viewportData = []; //useViewportGrid();
+  const seriesTracking = {}; //useSeriesTracking();
 
   useEffect(() => {
+    if (!viewModel.displaySetInstanceUids.length) {
+      return;
+    }
+
+    let isSubscribed = true;
+
     const command = commandsManager.getCommand(
       'getCornerstoneLibraries',
       'VIEWER'
@@ -46,41 +57,22 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
 
     const { cornerstone, cornerstoneTools } = command.commandFn();
 
-    if (!viewModel.displaySetInstanceUids.length) {
-      return;
-    }
-
     viewModel.displaySetInstanceUids.forEach(uid => {
       const imageIds = dataSource.getImageIdsForDisplaySet(uid);
-      const imageId = imageIds[0];
+      const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
       getImageSrc(imageId, { cornerstone }).then(imageSrc => {
+        if (isSubscribed) {
           updateThumbnailMap(uid, imageSrc);
+        }
       });
     });
-  }, [viewModel.displaySetInstanceUids]);
-
-  // TODO
-  const viewportData = []; //useViewportGrid();
-  const seriesTracking = {}; //useSeriesTracking();
 
     const displaySets = viewModel.displaySetInstanceUids.map(
       displaySetManager.getDisplaySetByUID
     );
 
-  // TODO:
+    const aDisplaySet = displaySets[0];
-  // - Put this in something so it only runs once
-  // - Have update the query update the dicom data store at the study level and then have this component use the data in the view model
-  useEffect(() => {
-    if (!viewModel.displaySetInstanceUids.length) {
-      return;
-    }
-
-    const dSets = viewModel.displaySetInstanceUids.map(
-      displaySetManager.getDisplaySetByUID
-    );
-
-    const aDisplaySet = dSets[0];
     const firstStudy = dicomMetadataStore.getStudy(
       aDisplaySet.StudyInstanceUID
     );
@@ -103,10 +95,6 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
         };
       });
 
-      setStudyData(studies);
-    });
-  }, [viewModel.displaySetInstanceUids]);
-
       const studiesFromInstanceData = {};
       displaySets.forEach(ds => {
         const displaySet = {
@@ -116,7 +104,6 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
           modality: ds.Modality,
           date: ds.SeriesDate,
           numInstances: ds.numImageFrames,
-      imageSrc: thumbnailImageSrcMap.get(ds.displaySetInstanceUid),
         };
 
         const displaySetViewportData = viewportData.find(
@@ -130,16 +117,15 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
         const trackingInfo = seriesTracking[ds.SeriesInstanceUID];
         if (trackingInfo) {
           displaySet.isTracked = trackingInfo.isTracked;
-
-      displaySet.componentType = trackingInfo.isTracked
-        ? 'thumbnailTracked'
-        : 'thumbnail';
         } else {
           displaySet.isTracked = false;
-      displaySet.componentType = 'thumbnail';
         }
 
-    if (!Object.keys(studiesFromInstanceData).includes(ds.StudyInstanceUID)) {
+        displaySet.componentType = 'thumbnailTracked';
+
+        if (
+          !Object.keys(studiesFromInstanceData).includes(ds.StudyInstanceUID)
+        ) {
           const study = dicomMetadataStore.getStudy(ds.StudyInstanceUID);
           const anInstance = study.series[0].instances[0];
 
@@ -152,7 +138,9 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
           };
         }
 
-    studiesFromInstanceData[ds.StudyInstanceUID].displaySets.push(displaySet);
+        studiesFromInstanceData[ds.StudyInstanceUID].displaySets.push(
+          displaySet
+        );
         studiesFromInstanceData[ds.StudyInstanceUID].numInstances +=
           displaySet.numInstances;
 
@@ -168,7 +156,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
       });
 
       // QIDO for all by MRN
-  const allStudies = studyData.map(studyLevelData => {
+      const allStudies = studies.map(studyLevelData => {
         const studyFromInstanceData =
           studiesFromInstanceData[studyLevelData.StudyInstanceUID];
 
@@ -187,21 +175,37 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
           studyInstanceUid: studyLevelData.StudyInstanceUID,
           date: studyLevelData.StudyDate || studyFromInstanceData.date,
           description:
-        studyLevelData.StudyDescription || studyFromInstanceData.description,
+            studyLevelData.StudyDescription ||
+            studyFromInstanceData.description,
           modalities:
-        studyFromInstanceData.modalities || studyLevelData.ModalitiesInStudy,
+            studyFromInstanceData.modalities ||
+            studyLevelData.ModalitiesInStudy,
           numInstances:
             studyLevelData.NumInstances || studyFromInstanceData.numInstances,
           displaySets: studyFromInstanceData.displaySets,
         };
       });
 
-  const primary = allStudies.find(study => {
+      if (isSubscribed) {
+        setStudyData(allStudies);
+      }
+    });
+
+    return () => (isSubscribed = false);
+  }, [viewModel.displaySetInstanceUids]);
+
+  studyData.forEach(study => {
+    study.displaySets.forEach(ds => {
+      ds.imageSrc = thumbnailImageSrcMap.get(ds.displaySetInstanceUid);
+    });
+  });
+
+  const primary = studyData.find(study => {
     return true; // TODO: check study.StudyInstanceUID matches queryparam?
   });
 
   // TODO: Filter allStudies to dates within one year of current date
-  const recentStudies = allStudies.filter(study => {
+  const recentStudies = studyData.filter(study => {
     return true; // TODO: check study.date
   });
 
@@ -219,12 +223,13 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
     {
       name: 'all',
       label: 'All',
-      studies: allStudies,
+      studies: studyData,
     },
   ];
 
   function onClickStudy(StudyInstanceUID) {
-    if (studiesFromInstanceData[StudyInstanceUID]) {
+    const study = studyData.find(a => a.studyInstanceUid === StudyInstanceUID);
+    if (study && study.displaySets && study.displaySets.length) {
       return;
     }
 
@@ -239,9 +244,12 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
     );
   }
 
-  const memoOnClickStudy = useCallback(StudyInstanceUID => {
+  const memoOnClickStudy = useCallback(
+    StudyInstanceUID => {
       onClickStudy(StudyInstanceUID);
-  });
+    },
+    [studyData]
+  );
 
   return <StudyBrowser tabs={tabs} onClickStudy={memoOnClickStudy} />;
 }

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -34,7 +34,7 @@ const Thumbnail = ({
         )}
       >
         {imageSrc ? (
-          <img src={imageSrc} alt={imageAltText} className="min-h-32" />
+          <img src={imageSrc} alt={imageAltText} className="min-h-32 object-none" />
         ) : (
           <div>{imageAltText}</div>
         )}