From b848ad8f0e274a11c59bb2cac1abb28a3ea2ed37 Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Thu, 7 May 2020 11:19:58 -0300 Subject: [PATCH] app configuration and App entrypoint update --- platform/core/src/DataSources/IDataSource.js | 0 platform/viewer/src/App.js | 65 +++++++++++++++++-- .../src/contexts/AppContextProvider.jsx | 43 ++++++++++++ platform/viewer/src/index-lesion-tracker.js | 46 ------------- platform/viewer/src/index.js | 17 ++++- 5 files changed, 117 insertions(+), 54 deletions(-) create mode 100644 platform/core/src/DataSources/IDataSource.js create mode 100644 platform/viewer/src/contexts/AppContextProvider.jsx delete mode 100644 platform/viewer/src/index-lesion-tracker.js diff --git a/platform/core/src/DataSources/IDataSource.js b/platform/core/src/DataSources/IDataSource.js new file mode 100644 index 000000000..e69de29bb diff --git a/platform/viewer/src/App.js b/platform/viewer/src/App.js index 1c8efa4dd..c5b0885aa 100644 --- a/platform/viewer/src/App.js +++ b/platform/viewer/src/App.js @@ -2,17 +2,57 @@ import React from 'react'; import PropTypes from 'prop-types'; import { BrowserRouter, HashRouter } from 'react-router-dom'; import { ThemeWrapper } from '@ohif/ui'; - +import { + CommandsManager, + ExtensionManager, + ServicesManager, + HotkeysManager, + UINotificationService, + UIModalService, + UIDialogService, + MeasurementService, + utils, + redux as reduxOHIF, +} from '@ohif/core'; import routes from './routes'; -function App({ config }) { - const { routerBasename } = config; - const Router = JSON.parse(process.env.USE_HASH_ROUTER) - ? HashRouter - : BrowserRouter; +/** + * ENV Variable to determine routing behavior + */ +const Router = JSON.parse(process.env.USE_HASH_ROUTER) + ? HashRouter + : BrowserRouter; + +const commandsManagerConfig = { + /** Used by commands to inject `viewports` from "redux" */ + getAppState: () => store.getState(), + /** Used by commands to determine active context */ + getActiveContexts: () => getActiveContexts(store.getState()), +}; +const commandsManager = new CommandsManager(commandsManagerConfig); +const servicesManager = new ServicesManager(); +// const hotkeysManager = new HotkeysManager(commandsManager, servicesManager); +const extensionManager = new ExtensionManager({ + commandsManager, + servicesManager, + appConfig, + api: { + contexts: CONTEXTS, + hooks: { + useAppContext, + }, + }, +}); + +extensionManager.registerExtensions(/* Array of Extensions */); + +function App({ config, defaultExtensions }) { + const appConfig = { + ...(typeof config === 'function' ? config({ servicesManager }) : config), + }; return ( - + {routes()} ); @@ -36,6 +76,17 @@ App.propTypes = { App.defaultProps = { config: { + /** + * Relative route from domain root that OHIF instance is installed at. + * For example: + * + * Hosted at: https://ohif.org/where-i-host-the/viewer/ + * Value: `/where-i-host-the/viewer/` + * */ + routerBaseName: '/', + /** + * + */ showStudyList: true, oidc: [], extensions: [], diff --git a/platform/viewer/src/contexts/AppContextProvider.jsx b/platform/viewer/src/contexts/AppContextProvider.jsx new file mode 100644 index 000000000..5c99257c1 --- /dev/null +++ b/platform/viewer/src/contexts/AppContextProvider.jsx @@ -0,0 +1,43 @@ +import React, { useState, createContext, useContext } from 'react'; +import PropTypes from 'prop-types'; + +const AppContext = createContext(null); + +export const useAppContext = () => useContext(AppContext); + +const AppContextProvider = ({ children }) => { + const [config, setConfig] = useState(null); + + const get = ({ configKey }) => { + return config[configKey]; + }; + + const add = ({ configKey, value }) => { + setConfig(s => ({ + ...s, + [configKey]: value, + })); + }; + + const remove = ({ configKey }) => { + setConfig(s => ({ + ...s, + [configKey]: null, + })); + }; + + return ( + + {children} + + ); +}; + +AppContextProvider.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]).isRequired, +}; + +export default AppContextProvider; diff --git a/platform/viewer/src/index-lesion-tracker.js b/platform/viewer/src/index-lesion-tracker.js deleted file mode 100644 index b2adbc38d..000000000 --- a/platform/viewer/src/index-lesion-tracker.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Entry point for development and production PWA builds. - * Packaged (NPM) builds go through `index-umd.js` - */ - -import 'regenerator-runtime/runtime'; - -import App from './App.js'; -import React from 'react'; -import ReactDOM from 'react-dom'; - -/** - * EXTENSIONS - * ================= - * - * Importing and modifying the extensions our app uses HERE allows us to leverage - * tree shaking and a few other niceties. However, by including them here they become - * "baked in" to the published application. - * - * Depending on your use case/needs, you may want to consider not adding any extensions - * by default HERE, and instead provide them via the extensions configuration key or - * by using the exported `App` component, and passing in your extensions as props using - * the defaultExtensions property. - */ -import OHIFLesionTrackerExtension from '@ohif/extension-lesion-tracker'; -import OHIFDicomPDFExtension from '@ohif/extension-dicom-pdf'; - -/* - * Default Settings - */ -let config = {}; - -if (window) { - config = window.config || {}; -} - -const appProps = { - config, - defaultExtensions: [OHIFLesionTrackerExtension, OHIFDicomPDFExtension], -}; - -/** Create App */ -const app = React.createElement(App, appProps, null); - -/** Render */ -ReactDOM.render(app, document.getElementById('root')); diff --git a/platform/viewer/src/index.js b/platform/viewer/src/index.js index 300f0e17d..bc8ce7ac8 100644 --- a/platform/viewer/src/index.js +++ b/platform/viewer/src/index.js @@ -8,10 +8,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; // test +/** + * EXTENSIONS + * ================= + * + * Importing and modifying the extensions our app uses HERE allows us to leverage + * tree shaking and a few other niceties. However, by including them here they become + * "baked in" to the published application. + * + * Depending on your use case/needs, you may want to consider not adding any extensions + * by default HERE, and instead provide them via the extensions configuration key or + * by using the exported `App` component, and passing in your extensions as props using + * the defaultExtensions property. + */ +import OHIFDefaultExtension from '@ohif/extension-default'; + /** Combine our appConfiguration and "baked-in" extensions */ const appProps = { config: window ? window.config : {}, - defaultExtensions: [], + defaultExtensions: [OHIFDefaultExtension], }; /** Create App */