fix: 🐛 Fix race condition when loading derived display sets (#1718)

When we have multiple SEGs/RTSTRUCTs we intend to load the most recent
by default.

BREAKING CHANGE: 🧨 However we start to load once the first set of metadata arrives. We need
to wait until all series metadata is fetched.

✅ Closes: #1715

Co-authored-by: James Petts <jamesapetts@gmail.com>

platform/viewer/src/components/ViewportGrid/ViewportGrid.js

@@ -12,7 +12,7 @@ import EmptyViewport from './EmptyViewport.js';
 
 const { loadAndCacheDerivedDisplaySets } = utils;
 
-const ViewportGrid = function(props) {
+const ViewportGrid = function (props) {
   const {
     activeViewportIndex,
     availablePlugins,
@@ -24,6 +24,7 @@ const ViewportGrid = function(props) {
     studies,
     viewportData,
     children,
+    isStudyLoaded
   } = props;
 
   const rowSize = 100 / numRows;
@@ -37,21 +38,23 @@ const ViewportGrid = function(props) {
   const snackbar = useSnackbarContext();
 
   useEffect(() => {
-    viewportData.forEach(displaySet => {
+    if (isStudyLoaded) {
-      const promises = loadAndCacheDerivedDisplaySets(displaySet, studies);
+      viewportData.forEach(displaySet => {
+        const promises = loadAndCacheDerivedDisplaySets(displaySet, studies);
 
-      promises.forEach(promise => {
+        promises.forEach(promise => {
-        promise.catch(error => {
+          promise.catch(error => {
-          snackbar.show({
+            snackbar.show({
-            title: 'Error loading derived display set:',
+              title: 'Error loading derived display set:',
-            message: error.message,
+              message: error.message,
-            type: 'error',
+              type: 'error',
-            autoClose: false,
+              autoClose: false,
+            });
           });
         });
       });
-    });
+    }
-  }, [studies, viewportData]);
+  }, [studies, viewportData, isStudyLoaded]);
 
   const getViewportPanes = () =>
     layout.viewports.map((layout, viewportIndex) => {

platform/viewer/src/connectedComponents/Viewer.js

@@ -316,7 +316,7 @@ class Viewer extends Component {
 
           {/* MAIN */}
           <div className={classNames('main-content')}>
-            <ConnectedViewerMain studies={this.props.studies} />
+            <ConnectedViewerMain studies={this.props.studies} isStudyLoaded={this.props.isStudyLoaded} />
           </div>
 
           {/* RIGHT */}

platform/viewer/src/connectedComponents/ViewerMain.js

@@ -150,6 +150,7 @@ class ViewerMain extends Component {
       <div className="ViewerMain">
         {this.state.displaySets.length && (
           <ConnectedViewportGrid
+            isStudyLoaded={this.props.isStudyLoaded}
             studies={this.props.studies}
             viewportData={viewportData}
             setViewportData={this.setViewportData}

platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js

@@ -105,7 +105,7 @@ const _showUserMessage = (queryParamApplied, message, dialog = {}) => {
     return;
   }
 
-  const { show: showUserMessage = () => {} } = dialog;
+  const { show: showUserMessage = () => { } } = dialog;
   showUserMessage({
     message,
   });
@@ -269,7 +269,8 @@ function ViewerRetrieveStudyData({
     const promises = Array(concurrentRequestsAllowed)
       .fill(null)
       .map(loadNextSeries);
-    await Promise.all(promises);
+
+    return await Promise.all(promises);
   };
 
   const loadStudies = async () => {