Wire up contextModule, panelModule, layoutTemplateModule. Viewer sort of displays

platform/core/src/extensions/ExtensionManager.js

@@ -25,7 +25,7 @@ export default class ExtensionManager {
    *
    * @param {Object[]} extensions - Array of extensions
    */
-  registerExtensions(extensions) {
+  registerExtensions = extensions => {
     extensions.forEach(extension => {
       const hasConfiguration = Array.isArray(extension);
 
@@ -36,7 +36,7 @@ export default class ExtensionManager {
         this.registerExtension(extension);
       }
     });
-  }
+  };
 
   /**
    *
@@ -44,7 +44,7 @@ export default class ExtensionManager {
    * @param {Object} extension
    * @param {Object} configuration
    */
-  registerExtension(extension, configuration = {}) {
+  registerExtension = (extension, configuration = {}) => {
     if (!extension) {
       log.warn(
         'Attempting to register a null/undefined extension. Exiting early.'
@@ -97,23 +97,25 @@ export default class ExtensionManager {
         });
 
         extensionModule.forEach(element => {
-          this.modulesMap[`${extensionId}.${moduleType}.${element.name}`];
+          this.modulesMap[
+            `${extensionId}.${moduleType}.${element.name}`
+          ] = element;
         });
       }
     });
 
     // Track extension registration
     this.registeredExtensionIds.push(extensionId);
-  }
+  };
 
-  getModuleEntry(stringEntry) {
+  getModuleEntry = stringEntry => {
     return this.modulesMap[stringEntry];
-  }
+  };
 
-  getDataSource(dataSourceId) {
+  getDataSource = dataSourceId => {
     // Note: this currently uses the data source name, which feels weird...
     return this.dataSourceMap[dataSourceId];
-  }
+  };
 
   /**
    * @private
@@ -121,7 +123,7 @@ export default class ExtensionManager {
    * @param {Object} extension
    * @param {string} extensionId - Used for logging warnings
    */
-  _getExtensionModule(moduleType, extension, extensionId, configuration) {
+  _getExtensionModule = (moduleType, extension, extensionId, configuration) => {
     const getModuleFnName = 'get' + _capitalizeFirstCharacter(moduleType);
     const getModuleFn = extension[getModuleFnName];
 
@@ -150,9 +152,9 @@ export default class ExtensionManager {
         `Exception thrown while trying to call ${getModuleFnName} for the ${extensionId} extension`
       );
     }
-  }
+  };
 
-  _initSpecialModuleTypes(moduleType, extensionModule) {
+  _initSpecialModuleTypes = (moduleType, extensionModule) => {
     switch (moduleType) {
       case 'commandsModule': {
         const { definitions, defaultContext } = extensionModule;
@@ -173,14 +175,14 @@ export default class ExtensionManager {
       default:
       // code block
     }
-  }
+  };
 
   /**
    *
    * @private
    * @param {Object[]} commandDefinitions
    */
-  _initCommandsModule(commandDefinitions, defaultContext = 'VIEWER') {
+  _initCommandsModule = (commandDefinitions, defaultContext = 'VIEWER') => {
     if (!this._commandsManager.getContext(defaultContext)) {
       this._commandsManager.createContext(defaultContext);
     }
@@ -201,7 +203,7 @@ export default class ExtensionManager {
         commandDefinition
       );
     });
-  }
+  };
 }
 
 /**

platform/core/src/extensions/ExtensionManager.test.js

@@ -226,7 +226,7 @@ describe('ExtensionManager.js', () => {
           return {
             definitions: {
               exampleDefinition: {
-                commandFn: () => { },
+                commandFn: () => {},
                 storeContexts: [],
                 options: {},
               },

platform/core/src/extensions/MODULE_TYPES.js

@@ -5,4 +5,6 @@ export default {
   SOP_CLASS_HANDLER: 'sopClassHandlerModule',
   TOOLBAR: 'toolbarModule',
   VIEWPORT: 'viewportModule',
+  CONTEXT: 'contextModule',
+  LAYOUT_TEMPLATE: 'layoutTemplateModule',
 };

platform/viewer/src/routes/ModeRoute.js

@@ -18,18 +18,16 @@ export default function ModeRoute({
   // Deal with toolbar.
 
   // Only handling one route per mode for now
-  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>
+  const layoutTemplateData = routes[0].layoutTemplate({ location });
+
+  const layoutTemplateModuleEntry = extensionManager.getModuleEntry(
+    layoutTemplateData.id
   );
 
+  const LayoutComponent = layoutTemplateModuleEntry.component;
+  //const LayoutComponent = props => <div>{'Testing'}</div>;
+
   // Add SOPClassHandlers to a new SOPClassManager.
   /*const manager = new SOPClassHandlerManager(
     extensionManager,
@@ -49,24 +47,33 @@ export default function ModeRoute({
     //manager.createDisplaySets.then(setDisplaySetInstanceUids);
   };
 
-  // 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);
+  // For each extension, look up their context modules
+  let contextModules = [];
+  extensions.forEach(extensionId => {
+    const allRegisteredModuleIds = Object.keys(extensionManager.modulesMap);
+    const moduleIds = allRegisteredModuleIds.filter(id =>
+      id.includes(`${extensionId}.contextModule.`)
+    );
+
+    if (!moduleIds || !moduleIds.length) {
+      return;
+    }
+
+    const modules = moduleIds.map(extensionManager.getModuleEntry);
+    contextModules = contextModules.concat(modules);
+  });
+
+  const contextModuleProviders = contextModules.map(a => a.provider);
+  const CombinedContextProvider = ({ children }) =>
+    Compose({ components: contextModuleProviders, children });
 
   return (
-    <LayoutComponent
-      displaySetInstanceUids={displaySetInstanceUids}
-      {...layoutTemplateData.props}
-    />
-  );
-
-  /*return (
     <CombinedContextProvider>
       <LayoutComponent
+        extensionManager={extensionManager}
         displaySetInstanceUids={displaySetInstanceUids}
         {...layoutTemplateData.props}
       />
     </CombinedContextProvider>
-  );*/
+  );
 }

platform/viewer/src/routes/ViewModelContext.js

@@ -5,6 +5,8 @@ const ViewModelContext = React.createContext({
   setDisplaySetInstanceUids: () => {},
 });
 
+ViewModelContext.displayName = 'ViewModelContext';
+
 class ViewModelProvider extends Component {
   state = {
     displaySetInstanceUids: [],