fix(cornerstoneCache):Race condition on cache notification (#2900)

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -232,22 +232,22 @@ const OHIFCornerstoneViewport = React.memo(props => {
     }
 
     const loadViewportData = async () => {
-      const viewportData = await CornerstoneCacheService.getViewportData(
+      await CornerstoneCacheService.getViewportData(
         viewportIndex,
         displaySets,
         viewportOptions.viewportType,
         dataSource,
+        (viewportDataLoaded) => {
+          CornerstoneViewportService.setViewportDisplaySets(
+            viewportIndex,
+            viewportDataLoaded,
+            viewportOptions,
+            displaySetOptions
+          );
+          setViewportData(viewportDataLoaded);
+        },
         initialImageIndex
       );
-
-      CornerstoneViewportService.setViewportDisplaySets(
-        viewportIndex,
-        viewportData,
-        viewportOptions,
-        displaySetOptions
-      );
-
-      setViewportData(viewportData);
     };
 
     loadViewportData();

extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx

@@ -137,7 +137,7 @@ function ViewportOrientationMarkers({
       }
 
       const imageIndex = imageSliceData.imageIndex;
-      const imageId = viewportData?.imageIds[imageIndex];
+      const imageId = viewportData.imageIds?.[imageIndex];
 
       // Workaround for below TODO stub
       if (!imageId) {

extensions/cornerstone/src/services/ViewportService/CornerstoneCacheService.ts

@@ -32,6 +32,8 @@ const EVENTS = {
   VIEWPORT_DATA_CHANGED: 'event::cornerstone::viewportdatachanged',
 };
 
+export type IViewportData = StackData | VolumeData;
+
 class CornerstoneCacheService {
   stackImageIds: Map<string, string[]> = new Map();
   volumeImageIds: Map<string, string[]> = new Map();
@@ -57,10 +59,11 @@ class CornerstoneCacheService {
     displaySets: unknown[],
     viewportType: string,
     dataSource: unknown,
+    callback: (val: IViewportData) => unknown,
     initialImageIndex?: number
   ): Promise<StackData | VolumeData> {
     const cs3DViewportType = getCornerstoneViewportType(viewportType);
-    let viewportData: StackData | VolumeData;
+    let viewportData: IViewportData;
 
     if (cs3DViewportType === Enums.ViewportType.STACK) {
       viewportData = await this._getStackViewportData(
@@ -76,6 +79,8 @@ class CornerstoneCacheService {
 
     viewportData.viewportType = cs3DViewportType;
 
+    await callback(viewportData);
+
     this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
       viewportData,
       viewportIndex,
@@ -83,7 +88,6 @@ class CornerstoneCacheService {
 
     return viewportData;
   }
-
   public async invalidateViewportData(
     viewportData: VolumeData,
     invalidatedDisplaySetInstanceUID: string,