feat(errorHandling): Create fallback page for Server, Study and Series (#3592)

platform/app/src/routes/DataSourceWrapper.tsx

@@ -5,6 +5,7 @@ import { ExtensionManager, MODULE_TYPES } from '@ohif/core';
 //
 import { extensionManager } from '../App.tsx';
 import { useParams, useLocation } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import useSearchParams from '../hooks/useSearchParams.ts';
 
 /**
@@ -27,6 +28,7 @@ const areLocationsTheSame = (location0, location1) => {
  * @param {function} props.children - Layout Template React Component
  */
 function DataSourceWrapper(props) {
+  const navigate = useNavigate();
   const { children: LayoutTemplate, ...rest } = props;
   const params = useParams();
   const location = useLocation();
@@ -189,7 +191,7 @@ function DataSourceWrapper(props) {
         (!isLoading && (newOffset !== previousOffset || isLocationUpdated));
 
       if (isDataInvalid) {
-        getData();
+        getData().catch(() => navigate('/notfoundserver', '_self'));
       }
     } catch (ex) {
       console.warn(ex);

platform/app/src/routes/Mode/Mode.tsx

@@ -11,6 +11,7 @@ import Compose from './Compose';
 import getStudies from './studiesList';
 import { history } from '../../utils/history';
 import loadModules from '../../pluginImports';
+import isSeriesFilterUsed from '../../utils/isSeriesFilterUsed';
 
 const { getSplitParam } = utils;
 
@@ -30,9 +31,11 @@ function defaultRouteInit(
   const {
     displaySetService,
     hangingProtocolService,
+    uiNotificationService,
   } = servicesManager.services;
 
   const unsubscriptions = [];
+  const issuedWarningSeries = [];
   const {
     unsubscribe: instanceAddedUnsubscribe,
   } = DicomMetadataStore.subscribe(
@@ -43,6 +46,22 @@ function defaultRouteInit(
         SeriesInstanceUID
       );
 
+      // checks if the series filter was used, if it exists
+      const seriesInstanceUIDs = filters?.seriesInstanceUID;
+      if (
+        seriesInstanceUIDs?.length &&
+        !isSeriesFilterUsed(seriesMetadata.instances, filters) &&
+        !issuedWarningSeries.includes(seriesInstanceUIDs[0])
+      ) {
+        // stores the series instance filter so it shows only once the warning
+        issuedWarningSeries.push(seriesInstanceUIDs[0]);
+        uiNotificationService.show({
+          title: 'Series filter',
+          message: `Each of the series in filter: ${seriesInstanceUIDs} are not part of the current study. The entire study is being displayed`,
+          type: 'error',
+          duration: 7000,
+        });
+      }
       displaySetService.makeDisplaySets(seriesMetadata.instances, madeInClient);
     }
   );

platform/app/src/routes/index.tsx

@@ -10,9 +10,56 @@ import Debug from './Debug';
 import NotFound from './NotFound';
 import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const NotFoundServer = ({
+  message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
+}) => {
+  return (
+    <div className="absolute w-full h-full flex justify-center items-center text-white">
+      <div>
+        <h4>{message}</h4>
+      </div>
+    </div>
+  );
+};
+
+NotFoundServer.propTypes = {
+  message: PropTypes.string,
+};
+
+const NotFoundStudy = () => {
+  return (
+    <div className="absolute w-full h-full flex justify-center items-center text-white">
+      <div>
+        <h4>
+          One or more of the requested studies are not available at this time.
+          Return to the{' '}
+          <Link className="text-primary-light" to={'/'}>
+            study list
+          </Link>{' '}
+          to select a different study to view.
+        </h4>
+      </div>
+    </div>
+  );
+};
+
+NotFoundStudy.propTypes = {
+  message: PropTypes.string,
+};
 
 // TODO: Include "routes" debug route if dev build
 const bakedInRoutes = [
+  {
+    path: '/notfoundserver',
+    children: NotFoundServer,
+  },
+  {
+    path: '/notfoundstudy',
+    children: NotFoundStudy,
+  },
   {
     path: '/debug',
     children: Debug,

platform/app/src/utils/isSeriesFilterUsed.ts

@@ -0,0 +1,16 @@
+/**
+ * This function is used to check if the filter is used. Its intend is to
+ * warn the user in case of link with a SeriesInstanceUID was called
+ * @param instances
+ * @returns
+ */
+export default function isSeriesFilterUsed(instances, filters) {
+  const seriesInstanceUIDs = filters?.seriesInstanceUID;
+  if (!seriesInstanceUIDs) {
+    return true;
+  }
+  if (!instances.length) {
+    return false;
+  }
+  return seriesInstanceUIDs.includes(instances[0].SeriesInstanceUID);
+}