Continue the ModeRoute work. Routes are reachable, but extensionManager needs to be improve to provide module entries correctly

extensions/default/src/getLayoutTemplatesModule.js

@@ -6,7 +6,7 @@ export default function() {
   return [
     // Layout Template Definition
     {
-      name: 'myLayout',
+      id: 'org.ohif.defaults.viewerLayout',
       component: viewerLayout,
     },
   ];

extensions/default/src/getSidePanelModule.js

@@ -8,10 +8,16 @@ function getSidePanelModule() {
   return [
     {
       name: 'org.ohif.defaults.seriesList',
+      iconName: 'group-layers',
+      iconLabel: 'Studies',
+      label: 'Studies',
       component: helloWorldComponent,
     },
     {
       name: 'org.ohif.defaults.measure',
+      iconName: 'list-bullets',
+      iconLabel: 'Measure',
+      label: 'Measurements',
       component: helloWorldComponent,
     },
   ];

modes/example/src/index.js

@@ -21,7 +21,7 @@ export default function mode({ modeConfiguration }) {
         },
         layoutTemplate: ({ routeProps }) => {
           return {
-            id: 'org.ohif.defaults.viewerlayout',
+            id: 'org.ohif.defaults.viewerLayout',
             props: {
               // named slots
               leftPanels: ['org.ohif.defaults.seriesList'],
@@ -35,3 +35,5 @@ export default function mode({ modeConfiguration }) {
     sopClassHandlers: ['org.ohif.defaults.stack'],
   };
 }
+
+window.exampleMode = mode({});

platform/core/src/extensions/ExtensionManager.js

@@ -97,7 +97,7 @@ export default class ExtensionManager {
         });
 
         extensionModule.forEach(element => {
-          this.modulesMap[`${extensionId}.${moduleType}.${name}`];
+          this.modulesMap[`${extensionId}.${moduleType}.${element.name}`];
         });
       }
     });
@@ -111,6 +111,7 @@ export default class ExtensionManager {
   }
 
   getDataSource(dataSourceId) {
+    // Note: this currently uses the data source name, which feels weird...
     return this.dataSourceMap[dataSourceId];
   }
 
@@ -163,11 +164,11 @@ export default class ExtensionManager {
         break;
       }
       case 'dataSourcesModule': {
-        break;
-
         extensionModule.forEach(element => {
-          this.dataSourceMap[extensionModule.name] = element;
+          this.dataSourceMap[element.name] = element;
         });
+
+        break;
       }
       default:
       // code block

platform/viewer/public/config/default.js

@@ -1,7 +1,7 @@
 window.config = {
   routerBasename: '/',
   // whiteLabelling: {},
-  extensions: [],
+  extensions: ['org.ohif.default'],
   modes: [],
   showStudyList: true,
   // filterQueryParam: false,

platform/viewer/src/App.js

@@ -9,6 +9,9 @@ import { ThemeWrapper } from '@ohif/ui';
 import createRoutes from './routes';
 import appInit from './appInit.js';
 
+// Temporarily for testing
+import '@ohif/mode-example';
+
 /**
  * ENV Variable to determine routing behavior
  */

platform/viewer/src/appInit.js

@@ -64,6 +64,11 @@ function appInit(appConfigOrFunc, defaultExtensions) {
 
   const { modes } = appConfig;
 
+  // Temporarily for testing
+  if (!modes.length) {
+    modes.push(window.exampleMode);
+  }
+
   const appRoutes = buildModeRoutes(modes, extensionManager) || [];
 
   return {

platform/viewer/src/routes/ModeRoute.js

@@ -18,15 +18,23 @@ export default function ModeRoute({
   // Deal with toolbar.
 
   // Only handling one route per mode for now
-  const LayoutComponent = extensionManager.getModuleEntry(
-    routes[0].layoutTemplate
+  const layoutTemplateData = routes[0].layoutTemplate({ location });
+  /*const LayoutComponent = extensionManager.getModuleEntry(
+    layoutTemplateData.id
+  );*/
+
+  // You can test via http://localhost:3000/example-mode/dicomweb
+  const LayoutComponent = () => (
+    <div>
+      {`Reached the route for Mode: ${mode.id} and Data Source: ${dataSourceId}`}
+    </div>
   );
 
   // Add SOPClassHandlers to a new SOPClassManager.
-  const manager = new SOPClassHandlerManager(
+  /*const manager = new SOPClassHandlerManager(
     extensionManager,
     sopClassHandlers
-  );
+  );*/
 
   const queryParams = location.search;
 
@@ -38,16 +46,27 @@ export default function ModeRoute({
   const onUpdatedCallback = () => {
     // TODO: This should append, not create from scratch so we don't nuke existing display sets
     // when e.g. a new series arrives
-    manager.createDisplaySets.then(setDisplaySetInstanceUids);
+    //manager.createDisplaySets.then(setDisplaySetInstanceUids);
   };
 
-  const contextModules = extensions.getContextModules();
-  const contextModuleProviders = contextModules.map(a => a.context.Provider);
-  const CombinedContextProvider = Compose(contextModuleProviders);
+  // TODO: For each extension, look up their context modules
+  //const contextModules = extensions.getContextModules();
+  //const contextModuleProviders = contextModules.map(a => a.context.Provider);
+  //const CombinedContextProvider = Compose(contextModuleProviders);
 
   return (
-    <CombinedContextProvider>
-      <LayoutComponent displaySetInstanceUids={displaySetInstanceUids} />
-    </CombinedContextProvider>
+    <LayoutComponent
+      displaySetInstanceUids={displaySetInstanceUids}
+      {...layoutTemplateData.props}
+    />
   );
+
+  /*return (
+    <CombinedContextProvider>
+      <LayoutComponent
+        displaySetInstanceUids={displaySetInstanceUids}
+        {...layoutTemplateData.props}
+      />
+    </CombinedContextProvider>
+  );*/
 }

platform/viewer/src/routes/buildModeRoutes.js

@@ -1,6 +1,6 @@
-import { React } from 'react';
+import React from 'react';
 import ModeRoute from './ModeRoute';
-import ViewModelProvider from './ViewModelContext';
+import { ViewModelProvider } from './ViewModelContext';
 
 /*
   Routes uniquely define an entry point to:
@@ -26,16 +26,22 @@ export default function buildModeRoutes(modes, extensionManager) {
   const routes = [];
 
   // TODO: Build api for this.
-  const dataSources = extensionManager.getDataSource();
+  // Currently builds an endpoint for all data sources, which probably
+  // doesn't make sense
+  const dataSources = Object.keys(extensionManager.dataSourceMap).map(a =>
+    extensionManager.getDataSource(a)
+  );
 
   modes.forEach(mode => {
     dataSources.forEach(dataSource => {
-      const dataSourceId = dataSource.id;
+      // TODO: name vs id
+      const dataSourceId = dataSource.name;
       const path = `/${mode.id}/${dataSourceId}`;
 
-      const component = (
+      const component = ({ location }) => (
         <ViewModelProvider>
           <ModeRoute
+            location={location}
             mode={mode}
             dataSourceId={dataSourceId}
             extensionManager={extensionManager}