Feat/multi route modes

modes/basic-dev-mode/src/index.ts

@@ -127,6 +127,9 @@ function modeFactory({ modeConfiguration }) {
       };
     },
     routes: [
+      // This example has multiple routes & multiple layouts
+      // Navigating to /dev/no-panels with this mode registered will render a layout without panels
+      // navigating to just /dev/ will render the 0th route's layout
       {
         path: 'viewer-cs3d',
         /*init: ({ servicesManager, extensionManager }) => {
@@ -157,6 +160,27 @@ function modeFactory({ modeConfiguration }) {
           };
         },
       },
+      {
+        path: 'no-panels',
+        layoutTemplate: ({ location, servicesManager }) => {
+          return {
+            id: ohif.layout,
+            props: {
+              // TODO: Should be optional, or required to pass empty array for slots?
+              leftPanels: [ohif.thumbnailList],
+              rightPanels: [ohif.measurements],
+              rightPanelClosed: true,
+              leftPanelClosed: true,
+              viewports: [
+                {
+                  namespace: cs3d.viewport,
+                  displaySetsToDisplay: [ohif.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
     ],
     extensions: extensionDependencies,
     hangingProtocol: 'default',

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

@@ -16,6 +16,7 @@ const { getSplitParam } = utils;
 
 export default function ModeRoute({
   mode,
+  modeRoutePath,
   dataSourceName,
   extensionManager,
   servicesManager,
@@ -84,7 +85,13 @@ export default function ModeRoute({
   const dataSource = extensionManager.getActiveDataSource()[0];
 
   // Only handling one route per mode for now
-  const route = mode.routes[0];
+  let route = mode.routes[0];
+  if (modeRoutePath) {
+    route = mode.routes.find(route => route.path === modeRoutePath);
+    if (!route) {
+      throw new Error(`Route not found for path: ${modeRoutePath}`);
+    }
+  }
 
   useEffect(() => {
     const loadExtensions = async () => {
@@ -398,6 +405,7 @@ function createCombinedContextProvider(extensionManager, servicesManager, comman
 
 ModeRoute.propTypes = {
   mode: PropTypes.object.isRequired,
+  modeRoutePath: PropTypes.string,
   dataSourceName: PropTypes.string,
   extensionManager: PropTypes.object,
   servicesManager: PropTypes.object,

platform/app/src/routes/buildModeRoutes.tsx

@@ -4,7 +4,8 @@ import ModeRoute from '@routes/Mode';
 /*
   Routes uniquely define an entry point to:
   - A mode
-  - Linked to a data source
+  - A mode route
+  - A data source
   - With a specified data set.
 
   The full route template is:
@@ -20,6 +21,14 @@ import ModeRoute from '@routes/Mode';
   A default source can be specified at the app level configuration, and then that source is used if :sourceType is omitted:
 
   /:modeId/:modeRoute/?queryParameters=example
+
+  Additionally, not specifying a modeRoute will default to the first route defined in the mode:
+
+  /:modeId/?queryParameters=example
+
+  You can still specify a sourceType in this case - the first mode route will be used with the specified sourceType:
+
+  /:modeId/:sourceType/?queryParameters=example
  */
 export default function buildModeRoutes({
   modes,
@@ -38,12 +47,16 @@ export default function buildModeRoutes({
       dataSourceNames.push(sourceName);
     }
   });
-
+  const allPaths = new Set<string>();
   modes.forEach(mode => {
-    // todo: for each route. add route to path.
     dataSourceNames.forEach(dataSourceName => {
-      const path = `/${mode.routeName}/${dataSourceName}`;
-
+      const datasourcePath = `/${mode.routeName}/${dataSourceName}`;
+      if (allPaths.has(datasourcePath)) {
+        console.warn(
+          `Duplicate path '${datasourcePath}' in buildModeRoutes, mode ${mode.routeName}, dataSource ${dataSourceName}`
+        );
+      }
+      allPaths.add(datasourcePath);
       // TODO move up.
       const children = () => (
         <ModeRoute
@@ -57,15 +70,43 @@ export default function buildModeRoutes({
       );
 
       routes.push({
-        path,
+        path: datasourcePath,
         children,
         private: true,
       });
+
+      mode.routes.forEach(route => {
+        const path = `/${mode.routeName}/${route.path}/${dataSourceName}`;
+        if (allPaths.has(path)) {
+          console.warn(
+            `Duplicate path '${path}' in buildModeRoutes, mode ${mode.routeName}, route ${route.path}, dataSource ${dataSourceName}`
+          );
+        }
+        allPaths.add(path);
+        // TODO move up.
+        const children = () => (
+          <ModeRoute
+            mode={mode}
+            modeRoutePath={route.path}
+            dataSourceName={dataSourceName}
+            extensionManager={extensionManager}
+            servicesManager={servicesManager}
+            commandsManager={commandsManager}
+            hotkeysManager={hotkeysManager}
+          />
+        );
+
+        routes.push({
+          path,
+          children,
+          private: true,
+        });
+      });
     });
 
     // Add active DataSource route.
     // This is the DataSource route for the active data source defined in ExtensionManager.getActiveDataSource
-    const path = `/${mode.routeName}`;
+    const modePath = `/${mode.routeName}`;
 
     // TODO move up.
     const children = () => (
@@ -78,11 +119,43 @@ export default function buildModeRoutes({
       />
     );
 
+    if (allPaths.has(modePath)) {
+      console.warn(`Duplicate path '${modePath}' in buildModeRoutes, mode ${mode.routeName}`);
+    }
+    allPaths.add(modePath);
+
     routes.push({
-      path,
+      path: modePath,
       children,
       private: true,
     });
+
+    mode.routes.forEach(route => {
+      const path = `/${mode.routeName}/${route.path}`;
+      if (allPaths.has(path)) {
+        console.warn(
+          `Duplicate path '${path}' in buildModeRoutes, mode ${mode.routeName}, route ${route.path}`
+        );
+      }
+      allPaths.add(path);
+
+      const children = () => (
+        <ModeRoute
+          mode={mode}
+          modeRoutePath={route.path}
+          extensionManager={extensionManager}
+          servicesManager={servicesManager}
+          commandsManager={commandsManager}
+          hotkeysManager={hotkeysManager}
+        />
+      );
+
+      routes.push({
+        path,
+        children,
+        private: true,
+      });
+    });
   });
 
   return routes;