Begin playing with how/where modes should be wrapped and have data provided

platform/viewer/src/routes/Compose.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function Compose(props) {
+  const { components = [], children } = props;
+
+  return (
+    <>
+      {components.reduceRight((acc, Comp) => {
+        return <Comp>{acc}</Comp>;
+      }, children)}
+    </>
+  );
+}
+
+Compose.propTypes = {
+  components: PropTypes.array,
+  children: PropTypes.node.isRequired,
+};

platform/viewer/src/routes/ModeRoute.js

@@ -1,68 +1,53 @@
-export default function ModeRoute(mode, dataSourceId) {
-  const [displaySets, setDisplaySets] = useState([]);
-  const { routes, sopClassHandlers, extensions } = getMode(modeId);
+import React, { useContext } from 'react';
+import SOPClassHandlerManager from './SOPClassHandlerManager';
+import ViewModelContext from './ViewModelContext';
+import Compose from './Compose';
 
+export default function ModeRoute({
+  location,
+  mode,
+  dataSourceId,
+  extensionManager,
+}) {
+  const { routes, sopClassHandlers, extensions } = mode;
+  const dataSource = extensionManager.getDataSource(dataSourceId);
+
+  const { displaySetInstanceUids, setDisplaySetInstanceUids } = useContext(
+    ViewModelContext
+  );
   // Deal with toolbar.
 
   // Only handling one route per mode for now
-  const LayoutComponent = routes[0].layoutTemplate;
+  const LayoutComponent = extensionManager.getModuleEntry(
+    routes[0].layoutTemplate
+  );
 
   // Add SOPClassHandlers to a new SOPClassManager.
-  const manager = new SOPClassHandlerManager(sopClassHandlers);
+  const manager = new SOPClassHandlerManager(
+    extensionManager,
+    sopClassHandlers
+  );
 
-  const dataSource = getDataSource(dataSourceId);
   const queryParams = location.search;
 
   // Call the data source to start building the view model?
-  dataSource(queryParams);
+  //dataSource(queryParams);
 
-  metadataStore.onModified();
+  //metadataStore.onModified();
 
   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(setDisplaySets);
+    manager.createDisplaySets.then(setDisplaySetInstanceUids);
   };
 
-  // TODO: Should extensions provide an array of these or one nested context?
   const contextModules = extensions.getContextModules();
-  const ExtensionContexts = contextModules => {};
-
-  /*
-  TODO: How are contexts provided by extensions passed into the mode?
+  const contextModuleProviders = contextModules.map(a => a.context.Provider);
+  const CombinedContextProvider = Compose(contextModuleProviders);
 
   return (
-    <ExtensionContexts>
-      <LayoutComponent displaySets={displaySets} setDisplaySets={setDisplaySets}/>
-    </ExtensionContexts>
-  );*/
-
-  return <LayoutComponent displaySetInstanceUids={displaySetInstanceUids} />;
+    <CombinedContextProvider>
+      <LayoutComponent displaySetInstanceUids={displaySetInstanceUids} />
+    </CombinedContextProvider>
+  );
 }
-
-/*const ViewModelContext = React.createContext(
-  displaySets: [],
-  setDisplaySets: () => {}
-);
-
-
-class ViewModelProvider extends Component {
-  state = {
-    displaySets: []
-  };
-
-  const setDisplaySets = displaySets => {
-    this.setState({displaySets});
-  };
-
-  render() {
-    return (
-      <ViewModelContext.Provider value={
-        displaySets: this.state.displaySets,
-        setDisplaySets
-      }>
-        {this.props.children}
-      </ViewModelContext.Provider>
-    );
-  }
-}*/

platform/viewer/src/routes/buildModeRoutes.js

@@ -1,5 +1,6 @@
 import { React } from 'react';
 import ModeRoute from './ModeRoute';
+import ViewModelProvider from './ViewModelContext';
 
 /*
   Routes uniquely define an entry point to:
@@ -25,14 +26,22 @@ export default function buildModeRoutes(modes, extensionManager) {
   const routes = [];
 
   // TODO: Build api for this.
-  const dataSources = extensionManager.getDataSources();
+  const dataSources = extensionManager.getDataSource();
 
   modes.forEach(mode => {
     dataSources.forEach(dataSource => {
       const dataSourceId = dataSource.id;
       const path = `/${mode.id}/${dataSourceId}`;
 
-      const component = <ModeRoute mode={mode} dataSourceId={dataSourceId} />;
+      const component = (
+        <ViewModelProvider>
+          <ModeRoute
+            mode={mode}
+            dataSourceId={dataSourceId}
+            extensionManager={extensionManager}
+          />
+        </ViewModelProvider>
+      );
 
       routes.push({
         path,

platform/viewer/src/routes/index.js

@@ -5,16 +5,18 @@ import { Switch, Route } from 'react-router-dom';
 import StudyListContainer from './StudyListContainer';
 import NotFound from './NotFound';
 
-const appRoutes = [
+const bakedInRoutes = [
   { path: '/', exact: true, component: StudyListContainer },
-  { path: '/viewer/:studyInstanceUids', component: NotFound },
   { component: NotFound },
 ];
 
-const routes = () => {
+const createRoutes = routes => {
+  console.log('Creating Routes: ', routes, bakedInRoutes);
+  const allRoutes = [...(routes || []), ...bakedInRoutes];
+
   return (
     <Switch>
-      {appRoutes.map((route, i) => {
+      {allRoutes.map((route, i) => {
         return (
           <Route
             key={i}
@@ -30,4 +32,4 @@ const routes = () => {
   );
 };
 
-export default routes;
+export default createRoutes;