feat(cli): Ohif cli for modes and extensions modification (#2696)

* feat: Add initial cli tool structure

* feat: add copying template files

* feat: Add mode template and command

* feat: Add readme template generation

* feat: Add documentation to extension template

* feat: Enhance documentation of the template mode

* fix: cli module type

* feat: Add config-based mode and extension registration (#2660)

* feat: Add ohif cli add/remove extension/mode (#2661)

* Basic working CLI for add-extension and remove-extension

* Basic cli for add/remove extension/mode, lots more to do.

* Cleanup and harden]

* feat: Add list of tasks to add-mode

Co-authored-by: Alireza <ar.sedghi@gmail.com>

* feat: Add git initialization for the mode or extension template (#2662)

* fix: package json file to include templates

* feat: Add git initialization for the mode or extension template

* feat: Add more checks of git and target dir

* feat: refactore library utilities

* feat: Add the list command to print extensions and modes (#2664)

* feat: Add the list command to print extensions and modes

* Add todo

* Feat/ohif cli validation + auto install (#2671)

* WIP

* Working mode keyword verification

* Validation

* auto install extensions based on modes

* WIP remove unused extensions on removeMove

* Working add-mode, remove-mode automatic extension management.

* If extension is in used by a mode, don't allow the CLI to uninstall it

* Cleanup addExtension

* cleanup removeExtension and addMode

* Cleanup removeMode

* Update existing extensions with the needed keywords/peer deps

* Fix broken config

* Feat/cli search (#2677)

* feat: refactor pretty print for console

* feat: add search for modes and extensions

* fix: ugly colors

* Feat/ohif cli error handling publishing (#2679)

* WIP

* fix: webpack imports

* wip

* fix: react router dom private routes

* from last commit

* wip

* fix: webpack prod builds

* WIP

* Working regsitration with new IDs

* Stable

Co-authored-by: Alireza <ar.sedghi@gmail.com>

* verify extensions when constructing modes. (#2681)

* verify extensions when constructing modes.

* Add version to unit tests so it conforms to schema

* Update ohif utils exposed via @ohif/core

* Fix import

* fix tests

* feat: ohif-cli link local modes/extensions for development (#2682)

* feat: enable cli to work with project root

* feat: add initial link package

* feat: add link and unlink extension

* feat: add link and unlink mode

* erro handling for link-package

* feat: add comment on ohif-cli linking for development (#2686)

* Docs/ohif cli (#2687)

* feat: Add documentation for templates

* feat: Add more documentation

* Fix/core publish (#2685)

* versions

* wip

* remove webpack clean output

* fix publish

* use next as dist tag for v3 for now

* fix webpack pro recipe for output

* fix: lerna publish next

* fix(cli): fix issues when trying to link an extension or a mode (#2725)

The generated package.json doesn't contain keywords property which is
required by the linkPackage function. The module apth wasn't correclty
handled too, and when there is no pluginOptions, it fails while reading
the file or while generating a default configuration.

* make dicom pdf and video work after cli merge

* add axios dependency

* comment out the chdir for now

* create id and version based on user inputs

* customizable path for extension and modes

* fix template to make the template mode load

* fix the questions to loop if path is not desirable

* fix templates

* correct package json order

* unify the package creation for extension and mode

* bump versions for each package

* bump extension versions to 3.0

* add gitignore to templates

* fix version requirements when ^

* update docs

* update docs and fix tests

* try to fix the tests

* bump node version

* remove the version from extensions

* remove the version from modes

* remove version from extensionManager

* fix eslint

* revert husky version

* fix eslint

* fix node version for new eslint

* fix documentatoin removing version

* fix cicle ci image version

* fix circle ci node image

* fix circle ci node image

* add back the video and pdf

Co-authored-by: Matthis Duclos <matthis.duclos@gmail.com>
Co-authored-by: James A. Petts <jamesapetts@gmail.com>

platform/viewer/.webpack/webpack.pwa.js

@@ -10,6 +10,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 // ~~ Directories
 const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
@@ -22,6 +23,9 @@ const PROXY_TARGET = process.env.PROXY_TARGET;
 const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
 const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
 const Dotenv = require('dotenv-webpack');
+const writePluginImportFile = require('./writePluginImportsFile.js');
+
+writePluginImportFile(SRC_DIR);
 
 const setHeaders = (res, path) => {
   if (path.indexOf('.gz') !== -1) {
@@ -112,6 +116,15 @@ module.exports = (env, argv) => {
         // Increase the limit to 4mb:
         maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
       }),
+      new CopyPlugin({
+        patterns: [
+          {
+            from:
+              '../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import',
+            to: DIST_DIR,
+          },
+        ],
+      }),
     ],
     // https://webpack.js.org/configuration/dev-server/
     devServer: {

platform/viewer/.webpack/writePluginImportsFile.js

@@ -0,0 +1,82 @@
+const pluginConfig = require('../pluginConfig.json');
+const fs = require('fs');
+
+const autogenerationDisclaimer = `
+// THIS FILE IS AUTOGENERATED AS PART OF THE EXTENSION AND MODE PLUGIN PROCESS.
+// IT SHOULD NOT BE MODIFIED MANUALLY \n`;
+
+function constructLines(input, categoryName) {
+  let pluginCount = 0;
+
+  const lines = {
+    importLines: [],
+    addToWindowLines: [],
+  };
+
+  input.forEach(entry => {
+    const packageName = entry.packageName;
+
+    const defaultImportName = `${categoryName}${pluginCount}`;
+
+    lines.importLines.push(
+      `import ${defaultImportName} from '${packageName}';\n`
+    );
+    lines.addToWindowLines.push(
+      `window.${categoryName}.push(${defaultImportName});\n`
+    );
+
+    pluginCount++;
+  });
+
+  return lines;
+}
+
+function getFormattedImportBlock(importLines) {
+  let content = '';
+  // Imports
+  importLines.forEach(importLine => {
+    content += importLine;
+  });
+
+  return content;
+}
+
+function getFormattedWindowBlock(addToWindowLines) {
+  let content = `window.extensions = [];\nwindow.modes = [];\n\n`;
+
+  addToWindowLines.forEach(addToWindowLine => {
+    content += addToWindowLine;
+  });
+
+  return content;
+}
+
+function writePluginImportsFile(SRC_DIR) {
+  let pluginImportsJsContent = autogenerationDisclaimer;
+
+  const extensionLines = constructLines(pluginConfig.extensions, 'extensions');
+  const modeLines = constructLines(pluginConfig.modes, 'modes');
+
+  pluginImportsJsContent += getFormattedImportBlock([
+    ...extensionLines.importLines,
+    ...modeLines.importLines,
+  ]);
+  pluginImportsJsContent += getFormattedWindowBlock([
+    ...extensionLines.addToWindowLines,
+    ...modeLines.addToWindowLines,
+  ]);
+
+  fs.writeFileSync(
+    `${SRC_DIR}/pluginImports.js`,
+    pluginImportsJsContent,
+    { flag: 'w+' },
+    err => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+    }
+  );
+}
+
+module.exports = writePluginImportsFile;

platform/viewer/netlify.toml

@@ -20,7 +20,7 @@
 [build.environment]
   # If 'production', `yarn install` does not install devDependencies
   NODE_ENV = "development"
-  NODE_VERSION = "12.13.0"
+  NODE_VERSION = "14.19.1"
   YARN_VERSION = "1.22.0"
   RUBY_VERSION = "2.6.2"
   YARN_FLAGS = "--no-ignore-optional --pure-lockfile"

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "productVersion": "3.0.8",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
@@ -12,7 +12,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=10",
+    "node": ">=14",
     "npm": ">=6",
     "yarn": ">=1.16.0"
   },
@@ -49,11 +49,13 @@
   },
   "dependencies": {
     "@babel/runtime": "7.16.3",
-    "@ohif/core": "^2.5.1",
-    "@ohif/extension-cornerstone": "^2.4.0",
-    "@ohif/extension-measurement-tracking": "^0.0.1",
-    "@ohif/i18n": "^0.52.8",
-    "@ohif/mode-longitudinal": "^0.0.1",
+    "@ohif/core": "^3.0.0",
+    "@ohif/extension-cornerstone": "^3.0.0",
+    "@ohif/extension-default": "^3.0.0",
+    "@ohif/extension-dicom-sr": "^3.0.0",
+    "@ohif/extension-measurement-tracking": "^3.0.0",
+    "@ohif/i18n": "^1.0.0",
+    "@ohif/mode-longitudinal": "^3.0.0",
     "@ohif/ui": "^2.0.0",
     "@types/react": "^16.0.0",
     "classnames": "^2.2.6",
@@ -65,7 +67,7 @@
     "dicom-parser": "^1.8.9",
     "dotenv-webpack": "^1.7.0",
     "hammerjs": "^2.0.8",
-    "history": "5.0.0",
+    "history": "^5.2.0",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
     "lodash.isequal": "4.5.0",
@@ -78,8 +80,8 @@
     "react-dropzone": "^10.1.7",
     "react-i18next": "^10.11.0",
     "react-resize-detector": "^4.2.0",
-    "react-router": "next",
-    "react-router-dom": "next"
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
     "@percy/cypress": "^2.3.0",

platform/viewer/pluginConfig.json

@@ -0,0 +1,34 @@
+{
+  "extensions": [
+    {
+      "packageName": "@ohif/extension-cornerstone",
+      "version": "3.0.0"
+    },
+    {
+      "packageName": "@ohif/extension-measurement-tracking",
+      "version": "3.0.0"
+    },
+    {
+      "packageName": "@ohif/extension-dicom-sr",
+      "version": "3.0.0"
+    },
+    {
+      "packageName": "@ohif/extension-default",
+      "version": "3.0.0"
+    },
+    {
+      "packageName": "@ohif/extension-dicom-pdf",
+      "version": "3.0.1"
+    },
+    {
+      "packageName": "@ohif/extension-dicom-video",
+      "version": "3.0.1"
+    }
+  ],
+  "modes": [
+    {
+      "packageName": "@ohif/mode-longitudinal",
+      "version": "3.0.0"
+    }
+  ]
+}

platform/viewer/public/config/aws.js

@@ -8,7 +8,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'dcmjs DICOMWeb Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',
@@ -28,7 +28,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom json',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomjson',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
       sourceName: 'dicomjson',
       configuration: {
         name: 'json',
@@ -36,7 +36,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom local',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomlocal',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
       sourceName: 'dicomlocal',
       configuration: {},
     },

platform/viewer/public/config/default.js

@@ -8,7 +8,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'dcmjs DICOMWeb Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',
@@ -26,7 +26,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom json',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomjson',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
       sourceName: 'dicomjson',
       configuration: {
         name: 'json',
@@ -34,7 +34,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom local',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomlocal',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
       sourceName: 'dicomlocal',
       configuration: {},
     },

platform/viewer/public/config/dicomweb-server.js

@@ -8,7 +8,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'dcmjs DICOMWeb Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',

platform/viewer/public/config/docker_nginx-orthanc.js

@@ -6,7 +6,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'Orthanc Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'Orthanc',

platform/viewer/public/config/docker_openresty-orthanc.js

@@ -6,7 +6,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'Orthanc Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'Orthanc',

platform/viewer/public/config/e2e.js

@@ -8,7 +8,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'StaticWado test data',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',
@@ -23,12 +23,12 @@ window.config = {
         supportsFuzzyMatching: false,
         supportsWildcard: true,
         staticWado: true,
-        singlepart: "video,thumbnail,pdf",
+        singlepart: 'video,thumbnail,pdf',
       },
     },
     // {
     //   friendlyName: 'StaticWado default data',
-    //   namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+    //   namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
     //   sourceName: 'dicomweb',
     //   configuration: {
     //     name: 'DCM4CHEE',
@@ -47,7 +47,7 @@ window.config = {
     // },
     {
       friendlyName: 'dicom json',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomjson',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
       sourceName: 'dicomjson',
       configuration: {
         name: 'json',
@@ -55,7 +55,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom local',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomlocal',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
       sourceName: 'dicomlocal',
       configuration: {},
     },

platform/viewer/public/config/google.js

@@ -28,7 +28,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'dcmjs DICOMWeb Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'GCP',
@@ -48,7 +48,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom json',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomjson',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
       sourceName: 'dicomjson',
       configuration: {
         name: 'json',
@@ -56,7 +56,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom local',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomlocal',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
       sourceName: 'dicomlocal',
       configuration: {},
     },

platform/viewer/public/config/local_dcm4chee.js

@@ -6,7 +6,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'DCM4CHEE Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',

platform/viewer/public/config/local_static.js

@@ -8,7 +8,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'Static WADO Local Data',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',
@@ -23,12 +23,12 @@ window.config = {
         supportsFuzzyMatching: false,
         supportsWildcard: true,
         staticWado: true,
-        singlepart: "bulkdata,video,pdf",
+        singlepart: 'bulkdata,video,pdf',
       },
     },
     {
       friendlyName: 'dicom json',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomjson',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
       sourceName: 'dicomjson',
       configuration: {
         name: 'json',
@@ -36,7 +36,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom local',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomlocal',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
       sourceName: 'dicomlocal',
       configuration: {},
     },

platform/viewer/public/config/netlify.js

@@ -8,7 +8,7 @@ window.config = {
   dataSources: [
     {
       friendlyName: 'dcmjs DICOMWeb Server',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomweb',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'dicomweb',
       configuration: {
         name: 'DCM4CHEE',
@@ -26,7 +26,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom json',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomjson',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
       sourceName: 'dicomjson',
       configuration: {
         name: 'json',
@@ -34,7 +34,7 @@ window.config = {
     },
     {
       friendlyName: 'dicom local',
-      namespace: 'org.ohif.default.dataSourcesModule.dicomlocal',
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
       sourceName: 'dicomlocal',
       configuration: {},
     },

platform/viewer/src/App.jsx

@@ -24,13 +24,10 @@ import createRoutes from './routes';
 import appInit from './appInit.js';
 import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes.jsx';
 
-// TODO: Temporarily for testing
-import '@ohif/mode-longitudinal';
-
 let commandsManager, extensionManager, servicesManager, hotkeysManager;
 
-function App({ config, defaultExtensions }) {
-  const init = appInit(config, defaultExtensions);
+function App({ config, defaultExtensions, defaultModes }) {
+  const init = appInit(config, defaultExtensions, defaultModes);
 
   // Set above for named export
   commandsManager = init.commandsManager;
@@ -63,27 +60,29 @@ function App({ config, defaultExtensions }) {
 
   const providers = [
     [AppConfigProvider, { value: appConfigState }],
-    [UserAuthenticationProvider, { service: UserAuthenticationService}],
+    [UserAuthenticationProvider, { service: UserAuthenticationService }],
     [I18nextProvider, { i18n }],
     [ThemeWrapper],
-    [ViewportGridProvider, {service: ViewportGridService}],
-    [ViewportDialogProvider, {service: UIViewportDialogService}],
-    [CineProvider, {service: CineService}],
-    [SnackbarProvider, {service: UINotificationService}],
-    [DialogProvider, {service: UIDialogService}],
-    [ModalProvider, {service: UIModalService, modal: Modal}],
-  ]
+    [ViewportGridProvider, { service: ViewportGridService }],
+    [ViewportDialogProvider, { service: UIViewportDialogService }],
+    [CineProvider, { service: CineService }],
+    [SnackbarProvider, { service: UINotificationService }],
+    [DialogProvider, { service: UIDialogService }],
+    [ModalProvider, { service: UIModalService, modal: Modal }],
+  ];
   const CombinedProviders = ({ children }) =>
     Compose({ components: providers, children });
 
   let authRoutes = null;
 
   if (oidc) {
-    authRoutes = (<OpenIdConnectRoutes
-                oidc={oidc}
-                routerBasename={routerBasename}
-                UserAuthenticationService={UserAuthenticationService}
-              />)
+    authRoutes = (
+      <OpenIdConnectRoutes
+        oidc={oidc}
+        routerBasename={routerBasename}
+        UserAuthenticationService={UserAuthenticationService}
+      />
+    );
   }
 
   return (

platform/viewer/src/appInit.js

@@ -14,7 +14,7 @@ import {
   HangingProtocolService,
   CineService,
   UserAuthenticationService,
-  errorHandler
+  errorHandler,
   // utils,
 } from '@ohif/core';
 
@@ -22,7 +22,7 @@ import {
  * @param {object|func} appConfigOrFunc - application configuration, or a function that returns application configuration
  * @param {object[]} defaultExtensions - array of extension objects
  */
-function appInit(appConfigOrFunc, defaultExtensions) {
+function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
   const appConfig = {
     ...(typeof appConfigOrFunc === 'function'
       ? appConfigOrFunc({ servicesManager })
@@ -86,10 +86,18 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     throw new Error('No modes are defined! Check your app-config.js');
   }
 
-  // TODO: Remove this
-  if (!appConfig.modes.length) {
-    appConfig.modes.push(window.longitudinalMode);
-    // appConfig.modes.push(window.segmentationMode);
+  for (let i = 0; i < defaultModes.length; i++) {
+    const { modeFactory, id } = defaultModes[i];
+
+    // If the appConfig contains configuration for this mode, use it.
+    const modeConfig =
+      appConfig.modeConfig && appConfig.modeConfig[i]
+        ? appConfig.modeConfig[id]
+        : {};
+
+    const mode = modeFactory(modeConfig);
+
+    appConfig.modes.push(mode);
   }
 
   return {

platform/viewer/src/index.js

@@ -7,36 +7,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 /**
- * EXTENSIONS
+ * EXTENSIONS AND MODES
  * =================
+ * pluginImports.js is dynamically generated from extension and mode
+ * configuration at build time.
  *
- * 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.
+ * pluginImports.js imports all of the modes and extensions and adds them
+ * to the window for processing.
  */
-import OHIFDefaultExtension from '@ohif/extension-default';
-import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
-import OHIFMeasurementTrackingExtension from '@ohif/extension-measurement-tracking';
-import OHIFDICOMSRExtension from '@ohif/extension-dicom-sr';
-import OHIFDICOMVIDEOExtension from '@ohif/extension-dicom-video';
-import OHIFDICOMPDFExtension from '@ohif/extension-dicom-pdf';
+import './pluginImports.js';
 
-/** Combine our appConfiguration and "baked-in" extensions */
+/**
+ * Combine our appConfiguration with installed extensions and modes.
+ * In the future appConfiguration may contain modes added at runtime.
+ *  */
 const appProps = {
   config: window ? window.config : {},
-  defaultExtensions: [
-    OHIFDefaultExtension,
-    OHIFCornerstoneExtension,
-    OHIFMeasurementTrackingExtension,
-    OHIFDICOMSRExtension,
-    OHIFDICOMVIDEOExtension,
-    OHIFDICOMPDFExtension,
-  ],
+  defaultExtensions: window.extensions,
+  defaultModes: window.modes,
 };
 
 /** Create App */

platform/viewer/src/routes/Mode/Mode.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useLocation } from 'react-router';
+
 import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore } from '@ohif/core';
@@ -82,7 +83,6 @@ export default function ModeRoute({
   const {
     DisplaySetService,
     HangingProtocolService,
-    UserAuthenticationService,
   } = servicesManager.services;
 
   const { extensions, sopClassHandlers, hotkeys, hangingProtocols } = mode;
@@ -100,16 +100,11 @@ export default function ModeRoute({
   // Only handling one route per mode for now
   const route = mode.routes[0];
 
-  const layoutTemplateRouteData = route.layoutTemplate({ location });
-  const layoutTemplateModuleEntry = extensionManager.getModuleEntry(
-    layoutTemplateRouteData.id
-  );
-  const LayoutComponent = layoutTemplateModuleEntry.component;
-
   // For each extension, look up their context modules
   // TODO: move to extension manager.
   let contextModules = [];
-  extensions.forEach(extensionId => {
+
+  Object.keys(extensions).forEach(extensionId => {
     const allRegisteredModuleIds = Object.keys(extensionManager.modulesMap);
     const moduleIds = allRegisteredModuleIds.filter(id =>
       id.includes(`${extensionId}.contextModule.`)
@@ -215,9 +210,9 @@ export default function ModeRoute({
 
     // Adding hanging protocols of extensions after onModeEnter since
     // it will reset the protocols
-    hangingProtocols.forEach(extentionProtocols => {
+    hangingProtocols.forEach(extensionProtocols => {
       const hangingProtocolModule = extensionManager.getModuleEntry(
-        extentionProtocols
+        extensionProtocols
       );
       if (hangingProtocolModule?.protocols) {
         HangingProtocolService.addProtocols(hangingProtocolModule.protocols);

platform/viewer/src/routes/PrivateRoute.jsx

@@ -1,15 +1,14 @@
-import React from "react";
-import { Route } from "react-router-dom";
-import { useUserAuthentication } from "@ohif/ui";
+import React from 'react';
+import { useUserAuthentication } from '@ohif/ui';
 
-export const PrivateRoute = ({ ...rest }) => {
-    const [{ user, enabled }, userAuthenticationService] = useUserAuthentication();
+export const PrivateRoute = ({ children, handleUnauthenticated }) => {
+  const [{ user, enabled }] = useUserAuthentication();
 
-    if (enabled && !user) {
-      return userAuthenticationService.handleUnauthenticated();
-    }
+  if (enabled && !user) {
+    return handleUnauthenticated();
+  }
 
-    return <Route {...rest}/>;
-}
+  return children;
+};
 
 export default PrivateRoute;

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -194,10 +194,7 @@ function WorkList({
     const fetchSeries = async studyInstanceUid => {
       try {
         const series = await dataSource.query.series.search(studyInstanceUid);
-        seriesInStudiesMap.set(
-          studyInstanceUid,
-          sortBySeriesDate(series)
-        );
+        seriesInStudiesMap.set(studyInstanceUid, sortBySeriesDate(series));
         setStudiesWithSeriesData([...studiesWithSeriesData, studyInstanceUid]);
       } catch (ex) {
         // TODO: UI Notification Service
@@ -336,22 +333,23 @@ function WorkList({
           {appConfig.modes.map((mode, i) => {
             const isFirst = i === 0;
 
-            const isValidMode = mode.isValidMode({ modalities })
+            const isValidMode = mode.isValidMode({ modalities });
+
             // TODO: Modes need a default/target route? We mostly support a single one for now.
             // We should also be using the route path, but currently are not
-            // mode.id
+            // mode.routeName
             // mode.routes[x].path
             // Don't specify default data source, and it should just be picked up... (this may not currently be the case)
             // How do we know which params to pass? Today, it's just StudyInstanceUIDs
             return (
               <Link
                 key={i}
-                to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
-                // to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
+                to={`${mode.routeName}?StudyInstanceUIDs=${studyInstanceUid}`}
+                // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
               >
                 <Button
                   rounded="full"
-                  variant={isValidMode ? "contained" : "disabled"}
+                  variant={isValidMode ? 'contained' : 'disabled'}
                   disabled={!isValidMode}
                   endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
                   className={classnames('font-bold', { 'ml-2': !isFirst })}
@@ -380,7 +378,12 @@ function WorkList({
     {
       title: t('Header:About'),
       icon: 'info',
-      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer', contentProps: { versionNumber, buildNumber } }),
+      onClick: () =>
+        show({
+          content: AboutModal,
+          title: 'About OHIF Viewer',
+          contentProps: { versionNumber, buildNumber },
+        }),
     },
     {
       title: t('Header:Preferences'),
@@ -398,13 +401,13 @@ function WorkList({
             currentLanguage: currentLanguage(),
             availableLanguages,
             defaultLanguage,
-            onSubmit: (state) => {
+            onSubmit: state => {
               i18n.changeLanguage(state.language.value);
               hotkeysManager.setHotkeys(state.hotkeyDefinitions);
               hide();
             },
             onReset: () => hotkeysManager.restoreDefaultBindings(),
-            hotkeysModule: hotkeys
+            hotkeysModule: hotkeys,
           },
         }),
     },
@@ -416,7 +419,12 @@ function WorkList({
         'h-screen': !hasStudies,
       })}
     >
-      <Header isSticky menuOptions={menuOptions} isReturnEnabled={false} WhiteLabeling={appConfig.whiteLabeling} />
+      <Header
+        isSticky
+        menuOptions={menuOptions}
+        isReturnEnabled={false}
+        WhiteLabeling={appConfig.whiteLabeling}
+      />
       <StudyListFilter
         numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
         filtersMeta={filtersMeta}

platform/viewer/src/routes/buildModeRoutes.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ModeRoute from '@routes/Mode';
+import checkExtensionDependencies from './checkExtensionDependencies';
 
 /*
   Routes uniquely define an entry point to:
@@ -44,10 +45,11 @@ export default function buildModeRoutes({
   });
 
   modes.forEach(mode => {
+    checkExtensionDependencies(mode, extensionManager);
+
     // todo: for each route. add route to path.
     dataSourceNames.forEach(dataSourceName => {
-      // TODO: name vs id
-      const path = `/${mode.id}/${dataSourceName}`;
+      const path = `/${mode.routeName}/${dataSourceName}`;
 
       // TODO move up.
       const children = () => (
@@ -69,7 +71,7 @@ export default function buildModeRoutes({
     const defaultDataSourceName = extensionManager.defaultDataSourceName;
 
     // Add default DataSource route.
-    const path = `/${mode.id}`;
+    const path = `/${mode.routeName}`;
 
     // TODO move up.
     const children = () => (

platform/viewer/src/routes/checkExtensionDependencies.js

@@ -0,0 +1,39 @@
+export default function checkExtensionDependencies(mode, extensionManager) {
+  const extensionDependencies = mode.extensions;
+
+  const dependencyString = `Unmet extension dependency in mode: ${mode.id}`;
+
+  Object.keys(extensionDependencies).forEach(extensionId => {
+    const extensionInstalled = extensionManager.registeredExtensionIds.includes(
+      extensionId
+    );
+
+    if (!extensionInstalled) {
+      throw new Error(
+        `${dependencyString}: extension ${extensionId} not found`
+      );
+    }
+  });
+}
+
+function areVersionsCompatible(semanticVersion, installedVersion) {
+  if (semanticVersion.includes('^')) {
+    // Major must match
+    const versionLessCaret = semanticVersion.split('^')[1];
+
+    // Index 0 is the major version.
+    return versionLessCaret[0] === installedVersion[0];
+  } else if (semanticVersion.includes('~')) {
+    // Major and minor must match
+    const versionLessTilde = semanticVersion.split('~')[1];
+
+    // Index 0 is the major version.
+    // Index 2 is the minor version.
+    return (
+      versionLessTilde[0] === installedVersion[0] &&
+      versionLessTilde[2] === installedVersion[2]
+    );
+  } else {
+    return semanticVersion === installedVersion;
+  }
+}

platform/viewer/src/routes/index.js

@@ -64,18 +64,26 @@ const createRoutes = ({
 
   const { UserAuthenticationService } = servicesManager.services;
 
+  // Note: PrivateRoutes in react-router-dom 6.x should be defined within
+  // a Route element
   return (
     <Routes basename={routerBasename}>
       {allRoutes.map((route, i) => {
         return route.private === true ? (
-          <PrivateRoute
+          <Route
             key={i}
+            exact
             path={route.path}
-            handleUnauthenticated={
-              UserAuthenticationService.handleUnauthenticated
+            element={
+              <PrivateRoute
+                handleUnauthenticated={
+                  UserAuthenticationService.handleUnauthenticated
+                }
+              >
+                <RouteWithErrorBoundary route={route} />
+              </PrivateRoute>
             }
-            element={<RouteWithErrorBoundary route={route} />}
-          />
+          ></Route>
         ) : (
           <Route
             key={i}