feat(thumbnail highlight): Thumbnails of hydrated series are now highlighted (#3594)

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -23,6 +23,7 @@ import CornerstoneOverlays from './Overlays/CornerstoneOverlays';
 import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
 import CornerstoneServices from '../types/CornerstoneServices';
 import CinePlayer from '../components/CinePlayer';
+import { Types } from '@ohif/core';
 
 const STACK = 'stack';
 
@@ -264,7 +265,14 @@ const OHIFCornerstoneViewport = React.memo(props => {
   useEffect(() => {
     const { unsubscribe } = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
-      async invalidatedDisplaySetInstanceUID => {
+      async ({
+        displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
+        invalidateData,
+      }: Types.DisplaySetSeriesMetadataInvalidatedEvent) => {
+        if (!invalidateData) {
+          return;
+        }
+
         const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
           viewportIndex
         );

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -1123,6 +1123,8 @@ class SegmentationService extends PubSubService {
       );
     }
 
+    this._setDisplaySetIsHydrated(segmentationId, true);
+
     segmentation.hydrated = true;
 
     if (!suppressEvents) {
@@ -1132,6 +1134,18 @@ class SegmentationService extends PubSubService {
     }
   };
 
+  private _setDisplaySetIsHydrated(
+    displaySetUID: string,
+    isHydrated: boolean
+  ): void {
+    const {
+      DisplaySetService: displaySetService,
+    } = this.servicesManager.services;
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
+    displaySet.isHydrated = isHydrated;
+    displaySetService.setDisplaySetMetadataInvalidated(displaySetUID, false);
+  }
+
   private _highlightLabelmap(
     segmentIndex: number,
     alpha: number,
@@ -1303,6 +1317,8 @@ class SegmentationService extends PubSubService {
       }
     }
 
+    this._setDisplaySetIsHydrated(segmentationId, false);
+
     this._broadcastEvent(this.EVENTS.SEGMENTATION_REMOVED, {
       segmentationId,
     });

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -210,9 +210,22 @@ function PanelStudyBrowser({
       }
     );
 
+    const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
+      () => {
+        const mappedDisplaySets = _mapDisplaySets(
+          displaySetService.getActiveDisplaySets(),
+          thumbnailImageSrcMap
+        );
+
+        setDisplaySets(mappedDisplaySets);
+      }
+    );
+
     return () => {
       SubscriptionDisplaySetsAdded.unsubscribe();
       SubscriptionDisplaySetsChanged.unsubscribe();
+      SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -335,6 +348,7 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
           displaySetInstanceUID: ds.displaySetInstanceUID,
           // .. Any other data to pass
         },
+        isHydratedForDerivedDisplaySet: ds.isHydrated,
       });
     });
 

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -256,9 +256,29 @@ function PanelStudyBrowserTracking({
       }
     );
 
+    const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
+      () => {
+        const mappedDisplaySets = _mapDisplaySets(
+          displaySetService.getActiveDisplaySets(),
+          thumbnailImageSrcMap,
+          trackedSeries,
+          viewports,
+          viewportGridService,
+          dataSource,
+          displaySetService,
+          uiDialogService,
+          uiNotificationService
+        );
+
+        setDisplaySets(mappedDisplaySets);
+      }
+    );
+
     return () => {
       SubscriptionDisplaySetsAdded.unsubscribe();
       SubscriptionDisplaySetsChanged.unsubscribe();
+      SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -467,6 +487,7 @@ function _mapDisplaySets(
           // .. Any other data to pass
         },
         isTracked: trackedSeriesInstanceUIDs.includes(ds.SeriesInstanceUID),
+        isHydratedForDerivedDisplaySet: ds.isHydrated,
         viewportIdentificator,
       };