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

extensions/default/src/getContextModule.js

@@ -1,10 +1,38 @@
+import React, { useState } from 'react';
+import ViewModelContext from '@ohif/viewer/src/routes/ViewModelContext';
+
+const HelloWorldContext = React.createContext({
+  message: 'HelloWorldContextTesting',
+  setMessage: () => {},
+});
+
+HelloWorldContext.displayName = 'HelloWorldContext';
+
+function HelloWorldContextProvider({ children }) {
+  const [message, setMessage] = useState('HelloWorldContextTesting');
+
+  return (
+    <HelloWorldContext.Provider
+      value={{
+        message,
+        setMessage,
+      }}
+    >
+      {children}
+    </HelloWorldContext.Provider>
+  );
+}
+
 function getContextModule() {
   return [
     {
-      name: 'myContext',
-      context: '', // TODO => //ContextComponent,
+      name: 'HelloWorldContext',
+      context: HelloWorldContext,
+      provider: HelloWorldContextProvider,
     },
   ];
 }
 
+export { HelloWorldContext };
+
 export default getContextModule;

extensions/default/src/getLayoutTemplateModule.js

@@ -1,26 +1,23 @@
 import React, { useState } from 'react';
 
 import { SidePanel, NavBar, Svg, Icon, IconButton, Toolbar } from '@ohif/ui';
+import {
+  HelloWorldContext,
+  AnotherHelloWorldContext,
+} from './getContextModule';
 
 export default function() {
   return [
     // Layout Template Definition
+    // TODO: this is weird naming
     {
-      id: 'org.ohif.defaults.viewerLayout',
+      name: 'viewerLayout',
+      id: 'viewerLayout',
       component: viewerLayout,
     },
   ];
 }
 
-/*    {
-      id: 'org.ohif.defaults.viewerLayout',
-      props: {
-        leftPanelIds: ['org.ohif.defaults.seriesList'],
-        rightPanelIds: ['org.ohif.defaults.measure'],
-      },
-    },
-    */
-
 const Header = () => {
   const [activeTool, setActiveTool] = useState('Zoom');
   const dropdownContent = [
@@ -176,12 +173,15 @@ const ViewportToolbar = () => {
 function viewerLayout({ leftPanels, rightPanels, extensionManager }) {
   const getPanelData = id => {
     const entry = extensionManager.getModuleEntry(id);
+    // TODO, not sure why sidepanel content has to be JSX, and not a children prop?
+    const content = entry.component({});
+
     return {
       iconName: entry.iconName,
       iconLabel: entry.iconLabel,
       label: entry.label,
       name: entry.name,
-      content: entry.component,
+      content,
     };
   };
 

extensions/default/src/getPanelModule.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  HelloWorldContext,
+  AnotherHelloWorldContext,
+} from './getContextModule';
+
+function helloWorldComponent({}) {
+  return (
+    <HelloWorldContext.Consumer>
+      {value => (
+        <div>
+          <h2 style={{ color: 'white' }}>
+            {'Hello world. Context value:'}
+            {JSON.stringify(value)}
+          </h2>
+        </div>
+      )}
+    </HelloWorldContext.Consumer>
+  );
+}
+
+function getPanelModule() {
+  return [
+    {
+      name: 'seriesList',
+      iconName: 'group-layers',
+      iconLabel: 'Studies',
+      label: 'Studies',
+      component: helloWorldComponent,
+    },
+    {
+      name: 'measure',
+      iconName: 'list-bullets',
+      iconLabel: 'Measure',
+      label: 'Measurements',
+      component: helloWorldComponent,
+    },
+  ];
+}
+
+export default getPanelModule;

extensions/default/src/getSidePanelModule.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-function helloWorldComponent() {
-  return <div>{'Hello world'}</div>;
-}
-
-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,
-    },
-  ];
-}
-
-export default getSidePanelModule;

extensions/default/src/index.js

@@ -1,7 +1,7 @@
 import getContextModule from './getContextModule.js';
 import getDataSourcesModule from './getDataSourcesModule.js';
-import getLayoutTemplatesModule from './getLayoutTemplatesModule.js';
-import getSidePanelModule from './getSidePanelModule.js';
+import getLayoutTemplateModule from './getLayoutTemplateModule.js';
+import getPanelModule from './getPanelModule.js';
 
 export default {
   /**
@@ -10,6 +10,6 @@ export default {
   id: 'org.ohif.default',
   getContextModule,
   getDataSourcesModule,
-  getLayoutTemplatesModule,
-  getSidePanelModule,
+  getLayoutTemplateModule,
+  getPanelModule,
 };

modes/example/src/index.js

@@ -21,18 +21,18 @@ export default function mode({ modeConfiguration }) {
         },
         layoutTemplate: ({ routeProps }) => {
           return {
-            id: 'org.ohif.defaults.viewerLayout',
+            id: 'org.ohif.default.layoutTemplateModule.viewerLayout',
             props: {
               // named slots
-              leftPanels: ['org.ohif.defaults.seriesList'],
-              rightPanels: ['org.ohif.defaults.measure'],
+              leftPanels: ['org.ohif.default.panelModule.seriesList'],
+              rightPanels: ['org.ohif.default.panelModule.measure'],
             },
           };
         },
       },
     ],
-    extensions: ['org.ohif.defaults', 'org.ohif.cornerstone'],
-    sopClassHandlers: ['org.ohif.defaults.stack'],
+    extensions: ['org.ohif.default', 'org.ohif.cornerstone'],
+    sopClassHandlers: ['org.ohif.default.sopClassHandlerModule.stack'],
   };
 }
 

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: [],