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,
 };