fix: 🐛 Proper error handling for derived display sets (#1708)

* fix: 🐛 Proper error handling for derived display sets

* Revert idc.js change

platform/core/src/utils/loadAndCacheDerivedDisplaySets.js

@@ -50,10 +50,12 @@ import studyMetadataManager from './studyMetadataManager';
 const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
   const { StudyInstanceUID, SeriesInstanceUID } = referencedDisplaySet;
 
+  const promises = [];
+
   const studyMetadata = studyMetadataManager.get(StudyInstanceUID);
 
   if (!studyMetadata) {
-    return;
+    return promises;
   }
 
   const derivedDisplaySets = studyMetadata.getDerivedDatasets({
@@ -61,7 +63,7 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
   });
 
   if (!derivedDisplaySets.length) {
-    return;
+    return promises;
   }
 
   // Filter by type
@@ -100,8 +102,10 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
       }
     });
 
-    recentDisplaySet.load(referencedDisplaySet, studies);
+    promises.push(recentDisplaySet.load(referencedDisplaySet, studies));
   });
+
+  return promises;
 };
 
 export default loadAndCacheDerivedDisplaySets;

platform/ui/src/components/snackbar/Snackbar.css

@@ -127,7 +127,7 @@
 
 .sb-message {
   font-size: 14px;
-  word-break: break-all;
+  word-break: normal;
 }
 
 .sb-item {

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

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { utils } from '@ohif/core';
+import { useSnackbarContext } from '@ohif/ui';
 //
 import ViewportPane from './ViewportPane.js';
 import DefaultViewport from './DefaultViewport.js';
@@ -11,7 +12,7 @@ import EmptyViewport from './EmptyViewport.js';
 
 const { loadAndCacheDerivedDisplaySets } = utils;
 
-const ViewportGrid = function (props) {
+const ViewportGrid = function(props) {
   const {
     activeViewportIndex,
     availablePlugins,
@@ -33,9 +34,22 @@ const ViewportGrid = function (props) {
     return null;
   }
 
+  const snackbar = useSnackbarContext();
+
   useEffect(() => {
     viewportData.forEach(displaySet => {
-      loadAndCacheDerivedDisplaySets(displaySet, studies);
+      const promises = loadAndCacheDerivedDisplaySets(displaySet, studies);
+
+      promises.forEach(promise => {
+        promise.catch(error => {
+          snackbar.show({
+            title: 'Error loading derived display set:',
+            message: error.message,
+            type: 'error',
+            autoClose: false,
+          });
+        });
+      });
     });
   }, [studies, viewportData]);