fix: Allow the mode setup/creation to be async, and provide a few more values to extension/app config/mode setup. (#4016)

.gitignore

@@ -10,6 +10,8 @@ junit.xml
 coverage/
 .docz/
 .yarn/
+.nx/
+addOns/yarn.lock
 
 # YALC (for Erik)
 .yalc

.webpack/webpack.base.js

@@ -7,7 +7,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 
 // ~~ PLUGINS
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const TerserJSPlugin = require('terser-webpack-plugin');
 
 // ~~ PackageJSON
@@ -19,6 +19,8 @@ const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
 const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
 
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
@@ -98,6 +100,14 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
     module: {
       noParse: [/(codec)/, /(dicomicc)/],
       rules: [
+        ...(isProdBuild ? [] : [{
+          test: /\.[jt]sx?$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            plugins: ['react-refresh/babel'],
+          },
+        }]),
         {
           test: /\.svg?$/,
           oneOf: [
@@ -174,8 +184,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
         '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
         '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
         '@state': path.resolve(__dirname, '../platform/app/src/state'),
-        'dicom-microscopy-viewer':
-          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
         '@cornerstonejs/dicom-image-loader':
           '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
       },
@@ -205,6 +213,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
+      ...(isProdBuild ? [] : [new ReactRefreshWebpackPlugin()]),
       // Uncomment to generate bundle analyzer
       // new BundleAnalyzerPlugin(),
     ],

addOns/README.md

@@ -0,0 +1,3 @@
+# External Dependencies
+
+This module contains optional dependencies and external dependencies for including in OHIF, such as the DICOM Microscopy Viewer component.  

addOns/externals/devDependencies/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@externals/devDependencies",
+  "description": "External dev dependencies - put dev build dependencies here",
+  "version": "0.1.0",
+  "license": "MIT",
+  "private": true,
+  "engines": {
+    "node": ">=12",
+    "yarn": ">=1.19.1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@kitware/vtk.js": "30.4.1",
+    "moment": "^2.9.4",
+    "clsx": "^2.1.1",
+    "core-js": "^3.2.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/jest": "^27.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "autoprefixer": "^10.4.4",
+    "babel-eslint": "9.x",
+    "babel-loader": "^8.2.4",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^6.8.1",
+    "dotenv": "^8.1.0",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-flowtype": "^7.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-tsdoc": "^0.2.11",
+    "eslint-webpack-plugin": "^2.5.3",
+    "execa": "^8.0.1",
+    "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.1.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-junit": "^6.4.0",
+    "lerna": "^8.1.3",
+    "lint-staged": "^9.0.2",
+    "mini-css-extract-plugin": "^2.1.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.3.5",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^7.4.3",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "react-refresh": "^0.14.2",
+    "semver": "^7.5.1",
+    "serve": "^14.2.0",
+    "shader-loader": "^1.3.1",
+    "shx": "^0.3.3",
+    "source-map-loader": "^4.0.1",
+    "start-server-and-test": "^1.10.0",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.59.0",
+    "stylus-loader": "^7.1.3",
+    "terser-webpack-plugin": "^5.1.4",
+    "typescript": "4.6.4",
+    "unused-webpack-plugin": "2.4.0",
+    "webpack": "^5.90.3",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "4.7.3",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-merge": "^5.7.3",
+    "workbox-webpack-plugin": "^6.1.5",
+    "worker-loader": "^3.0.8"
+  },
+  "scripts": {
+    "build": "Included as direct dependency"
+  }
+}

addOns/externals/dicom-microscopy-viewer/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@externals/dicom-microscopy-viewer",
+  "description": "External reference to dicom-microscopy-viewer",
+  "version": "0.46.1",
+  "license": "MIT",
+  "dependencies": {
+    "dicom-microscopy-viewer": "^0.46.1"
+  }
+}

addOns/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "ohif-monorepo-root",
+  "private": true,
+  "packageManager": "yarn@1.22.22",
+  "workspaces": {
+    "packages": [
+      "../platform/i18n",
+      "../platform/core",
+      "../platform/ui",
+      "../platform/ui-next",
+      "../platform/app",
+      "../extensions/*",
+      "../modes/*",
+      "../addOns/externals/*"
+    ],
+    "nohoist": [
+      "**/html-minifier-terser"
+    ]
+  },
+  "scripts": {
+    "preinstall": "cd .. && node preinstall.js"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-arrow-functions": "^7.16.7",
+    "@babel/plugin-transform-regenerator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.13.0"
+  },
+  "resolutions": {
+    "**/@babel/runtime": "^7.20.13",
+    "commander": "8.3.0",
+    "dcmjs": ">=0.33.0",
+    "dicomweb-client": ">=0.10.4",
+    "nth-check": "^2.1.1",
+    "trim-newlines": "^5.0.0",
+    "glob-parent": "^6.0.2",
+    "trim": "^1.0.0",
+    "package-json": "^8.1.0",
+    "typescript": "4.6.4",
+    "sharp": "^0.32.6"
+  }
+}

babel.config.js

@@ -51,7 +51,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-rt/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-rt/package.json

@@ -41,8 +41,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^10.11.0",
-    "react-router": "^6.3.0",
+    "react-router": "^6.23.1",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.23.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",

extensions/cornerstone-dicom-seg/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-seg/package.json

@@ -41,14 +41,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
-    "react-router": "^6.8.1",
+    "react-router": "^6.23.1",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.23.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.77.6",
+    "@cornerstonejs/adapters": "^1.78.1",
-    "@cornerstonejs/core": "^1.77.6",
+    "@cornerstonejs/core": "^1.78.1",
-    "@kitware/vtk.js": "30.4.1",
+    "@kitware/vtk.js": "*",
     "react-color": "^2.19.3"
   }
 }

extensions/cornerstone-dicom-sr/package.json

@@ -38,7 +38,7 @@
     "@ohif/extension-cornerstone": "3.9.0-beta.46",
     "@ohif/extension-measurement-tracking": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.77.6",
+    "@cornerstonejs/adapters": "^1.78.1",
-    "@cornerstonejs/core": "^1.77.6",
+    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/tools": "^1.78.1",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone-dynamic-volume/package.json

@@ -34,7 +34,7 @@
     "@ohif/extension-default": "3.9.0-beta.46",
     "@ohif/i18n": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.5",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^1.77.6",
+    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.77.6",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.78.1",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/tools": "^1.78.1",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone/package.json

@@ -38,11 +38,11 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.77.6",
+    "@cornerstonejs/dicom-image-loader": "^1.78.1",
     "@icr/polyseg-wasm": "^0.4.0",
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.77.6",
+    "@cornerstonejs/adapters": "^1.78.1",
-    "@cornerstonejs/core": "^1.77.6",
+    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.77.6",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.78.1",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/tools": "^1.78.1",
     "@icr/polyseg-wasm": "^0.4.0",
-    "@kitware/vtk.js": "30.4.1",
+    "@kitware/vtk.js": "*",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",

extensions/cornerstone/src/getToolbarModule.tsx

@@ -250,7 +250,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
         const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID);
 
         const areReconstructable = displaySets.every(displaySet => {
-          return displaySet.isReconstructable;
+          return displaySet?.isReconstructable;
         });
 
         if (!areReconstructable) {

extensions/default/package.json

@@ -34,7 +34,7 @@
   "peerDependencies": {
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/i18n": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicomweb-client": "^0.10.4",
     "prop-types": "^15.6.2",
     "react": "^18.3.1",

extensions/dicom-microscopy/.webpack/webpack.prod.js

@@ -43,7 +43,6 @@ module.exports = (env, argv) => {
     externals: [
       /\b(vtk.js)/,
       /\b(dcmjs)/,
-      /\b(dicom-microscopy-viewer)/,
       /\b(gl-matrix)/,
       /^@ohif/,
       /^@cornerstonejs/,

extensions/dicom-microscopy/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/dicom-microscopy/package.json

@@ -38,8 +38,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^10.11.0",
-    "react-router": "^6.8.1",
+    "react-router": "^6.23.1",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.23.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
@@ -47,7 +47,6 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "colormap": "^2.3",
-    "dicom-microscopy-viewer": "^0.44.0",
+    "mathjs": "^12.4.2"
-    "dicomicc": "^0.1"
   }
 }

extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx

@@ -49,6 +49,14 @@ class DicomMicroscopyViewport extends Component {
     resizeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
   };
 
+  /**
+   * Need to return this as a function to prevent webpack from munging it.
+   */
+  public static getImportPath() {
+    return '/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js';
+  }
+
+
   /**
    * Get the nearest ROI from the mouse click point
    *
@@ -86,9 +94,10 @@ class DicomMicroscopyViewport extends Component {
   // you should only do this once.
   async installOpenLayersRenderer(container, displaySet) {
     const loadViewer = async metadata => {
-      const { viewer: DicomMicroscopyViewer, metadata: metadataUtils } = await import(
+      await import(
-        /* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer'
+        /* webpackIgnore: true */ DicomMicroscopyViewport.getImportPath());
-      );
+      const { viewer: DicomMicroscopyViewer, metadata: metadataUtils } = (window as any).dicomMicroscopyViewer;
+
       const microscopyViewer = DicomMicroscopyViewer.VolumeImageViewer;
 
       const client = getDicomWebClient({

extensions/dicom-microscopy/src/utils/loadSR.ts

@@ -2,6 +2,7 @@ import dcmjs from 'dcmjs';
 
 import DCM_CODE_VALUES from './dcmCodeValues';
 import toArray from './toArray';
+import DicomMicroscopyViewport from '../DicomMicroscopyViewport';
 
 const MeasurementReport = dcmjs.adapters.DICOMMicroscopyViewer.MeasurementReport;
 
@@ -47,10 +48,9 @@ export default async function loadSR(
 async function _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID) {
   const toolState = MeasurementReport.generateToolState(naturalizedDataset);
   const tools = Object.getOwnPropertyNames(toolState);
-
+  // Does a dynamic import to prevent webpack from rebuilding the library
-  const DICOMMicroscopyViewer = await import(
+  await import(/* webpackIgnore: true */ DicomMicroscopyViewport.getImportPath());
-    /* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer'
+  const DICOMMicroscopyViewer = (window as any).dicomMicroscopyViewer;
-  );
 
   const measurementGroupContentItems = _getMeasurementGroups(naturalizedDataset);
 

extensions/dicom-pdf/package.json

@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",

extensions/dicom-pdf/src/getSopClassHandlerModule.js

@@ -12,7 +12,7 @@ const sopClassUids = Object.values(SOP_CLASS_UIDS);
 const _getDisplaySetsFromSeries = (instances, servicesManager, extensionManager) => {
   const dataSource = extensionManager.getActiveDataSource()[0];
   return instances.map(instance => {
-    const { Modality, SOPInstanceUID, EncapsulatedDocument } = instance;
+    const { Modality, SOPInstanceUID } = instance;
     const { SeriesDescription = 'PDF', MIMETypeOfEncapsulatedDocument } = instance;
     const { SeriesNumber, SeriesDate, SeriesInstanceUID, StudyInstanceUID, SOPClassUID } = instance;
     const pdfUrl = dataSource.retrieve.directURL({

extensions/dicom-video/package.json

@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",

extensions/measurement-tracking/package.json

@@ -32,13 +32,13 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^1.77.6",
+    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/tools": "^1.77.6",
+    "@cornerstonejs/tools": "^1.78.1",
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/extension-cornerstone-dicom-sr": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
     "classnames": "^2.3.2",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.6.2",
     "react": "^18.3.1",

extensions/test-extension/src/getCustomizationModule.ts

@@ -6,5 +6,9 @@ export default function getCustomizationModule() {
       name: 'custom-context-menu',
       value: [codingValues, contextMenuCodeItem, findingsContextMenu],
     },
+    {
+      name: 'contextMenuCodeItem',
+      value: [contextMenuCodeItem],
+    },
   ];
 }

extensions/tmtv/package.json

@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@ohif/core": "3.9.0-beta.46",
     "@ohif/ui": "3.9.0-beta.46",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",

lerna.json

@@ -1,5 +1,5 @@
 {
   "version": "3.9.0-beta.46",
-  "packages": ["extensions/*", "platform/*", "modes/*"],
+  "packages": ["extensions/*", "platform/*", "modes/*", "addOns/externals/*"],
   "npmClient": "yarn"
 }

modes/microscopy/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

modes/microscopy/src/index.tsx

@@ -113,7 +113,6 @@ function modeFactory({ modeConfiguration }) {
       },
     ],
     extensions: extensionDependencies,
-    hangingProtocols: [ohif.hangingProtocols],
     hangingProtocol: ['default'],
 
     // Order is important in sop class handlers when two handlers both use

modes/preclinical-4d/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

modes/segmentation/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

modes/segmentation/package.json

@@ -68,7 +68,7 @@
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
+    "eslint": "^8.39.0",
     "eslint-loader": "^2.0.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^4.7.2",

nx.json

@@ -26,31 +26,60 @@
   },
   "targetDefaults": {
     "test:unit": {
-      "dependsOn": ["^test:unit"]
+      "dependsOn": [
+        "^test:unit"
+      ]
     },
     "test:unit:ci": {
-      "dependsOn": ["^test:unit:ci"]
+      "dependsOn": [
+        "^test:unit:ci"
+      ]
     },
     "test": {
-      "dependsOn": ["^test"]
+      "dependsOn": [
+        "^test"
+      ]
     },
     "test:e2e": {
-      "dependsOn": ["^test:e2e"]
+      "dependsOn": [
+        "^test:e2e"
+      ]
     },
     "test:e2e:headed": {
-      "dependsOn": ["^test:e2e:headed"]
+      "dependsOn": [
+        "^test:e2e:headed"
+      ]
     },
     "test:e2e:local": {
-      "dependsOn": ["^test:e2e:local"]
+      "dependsOn": [
+        "^test:e2e:local"
+      ]
     },
     "test:e2e:dist": {
-      "dependsOn": ["^test:e2e:dist"]
+      "dependsOn": [
+        "^test:e2e:dist"
+      ]
     },
     "test:e2e:serve": {
-      "dependsOn": ["^test:e2e:serve"]
+      "dependsOn": [
+        "^test:e2e:serve"
+      ]
     },
     "build": {
-      "outputs": ["{projectRoot}/platform/app/dist"]
+      "outputs": [
+        "{projectRoot}/platform/app/dist"
+      ]
     }
+  },
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
+    "sharedGlobals": [],
+    "production": [
+      "default"
+    ]
   }
 }

package.json

@@ -1,20 +1,22 @@
 {
   "name": "ohif-monorepo-root",
   "private": true,
+  "packageManager": "yarn@1.22.22",
   "workspaces": {
     "packages": [
       "platform/*",
       "extensions/*",
-      "modes/*"
+      "modes/*",
+      "addOns/externals/*"
     ],
     "nohoist": [
       "**/html-minifier-terser"
     ]
   },
   "engines": {
-    "node": ">=16",
+    "node": ">=18",
     "npm": ">=6",
-    "yarn": ">=1.16.0"
+    "yarn": ">=1.20.0"
   },
   "scripts": {
     "cm": "npx git-cz",
@@ -37,10 +39,11 @@
     "dev:dcm4chee": "lerna run dev:dcm4chee --stream",
     "dev:static": "lerna run dev:static --stream",
     "orthanc:up": "docker-compose -f platform/app/.recipes/Nginx-Orthanc/docker-compose.yml up",
+    "install:dev": "cp -f yarn.lock addOns/yarn.lock && cd addOns && yarn install --modules-folder ../node_modules",
     "preinstall": "node preinstall.js",
     "start": "yarn run dev",
     "test": "yarn run test:unit",
-    "test:data": "git submodule update --init -r",
+    "test:data": "git submodule update --init -f testdata",
     "test-watch": "jest --collectCoverage --watchAll",
     "test:unit": "jest --collectCoverage",
     "test:unit:ci": "lerna run test:unit:ci --parallel --stream",
@@ -59,14 +62,11 @@
     "lerna:customVersion": "node version.mjs",
     "link-list": "npm ls --depth=0 --link=true"
   },
-  "dependencies": {
+  "optionalDependencies": {
-    "@babel/runtime": "^7.20.13",
+    "@percy/cypress": "^3.1.1",
-    "@kitware/vtk.js": "30.4.1",
+    "@playwright/test": "^1.44.0",
-    "core-js": "^3.2.1"
+    "cypress": "13.7.2",
-  },
+    "cypress-file-upload": "^3.5.3"
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -81,72 +81,7 @@
     "@babel/plugin-transform-typescript": "^7.13.0",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/preset-typescript": "^7.13.0"
-    "@svgr/webpack": "^8.1.0",
-    "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "autoprefixer": "^10.4.4",
-    "babel-eslint": "9.x",
-    "babel-loader": "^8.2.4",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "cross-env": "^5.2.0",
-    "css-loader": "^6.8.1",
-    "dotenv": "^8.1.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^7.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-tsdoc": "^0.2.11",
-    "eslint-webpack-plugin": "^2.5.3",
-    "execa": "^8.0.1",
-    "extract-css-chunks-webpack-plugin": "^4.5.4",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.1.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-junit": "^6.4.0",
-    "lerna": "^7.2.0",
-    "lint-staged": "^9.0.2",
-    "mini-css-extract-plugin": "^2.1.0",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.5",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-env": "^7.4.3",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "react-hot-loader": "^4.13.0",
-    "semver": "^7.5.1",
-    "serve": "^14.2.0",
-    "shader-loader": "^1.3.1",
-    "shx": "^0.3.3",
-    "source-map-loader": "^4.0.1",
-    "start-server-and-test": "^1.10.0",
-    "style-loader": "^1.0.0",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^7.1.3",
-    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "4.6.4",
-    "unused-webpack-plugin": "2.4.0",
-    "webpack": "^5.90.3",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "4.7.3",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3",
-    "workbox-webpack-plugin": "^6.1.5",
-    "worker-loader": "^3.0.8"
   },
   "husky": {
     "hooks": {
@@ -162,11 +97,14 @@
   "resolutions": {
     "**/@babel/runtime": "^7.20.13",
     "commander": "8.3.0",
+    "dcmjs": ">=0.33.0",
+    "dicomweb-client": ">=0.10.4",
     "nth-check": "^2.1.1",
     "trim-newlines": "^5.0.0",
     "glob-parent": "^6.0.2",
     "trim": "^1.0.0",
     "package-json": "^8.1.0",
+    "typescript": "4.6.4",
     "sharp": "^0.32.6"
   }
 }

platform/app/.webpack/webpack.pwa.js

@@ -108,6 +108,9 @@ module.exports = (env, argv) => {
             globOptions: {
               ignore: ['**/*.min.js.map'],
             },
+            // The dicom-microscopy-viewer is optional, so if it doeesn't get
+            // installed, it shouldn't cause issues.
+            noErrorOnMissing: true,
           },
           // Copy dicom-image-loader build files
           {

platform/app/cypress/support/commands.js

@@ -106,10 +106,10 @@ Cypress.Commands.add('isPageLoaded', (url = '/basic-test') => {
 
 Cypress.Commands.add('openStudyList', () => {
   cy.initRouteAliases();
-  cy.visit('/');
+  cy.visit('/', { timeout: 15000 });
 
   // For some reason cypress 12.x does not like to stub the network request
-  // so we just wait herer for 1 second
+  // so we just wait here for 1 second
   // cy.wait('@getStudies');
   cy.waitQueryList();
 });

platform/app/package.json

@@ -75,12 +75,13 @@
     "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.3.3",
     "classnames": "^2.3.2",
-    "core-js": "^3.16.1",
+    "core-js": "*",
     "cornerstone-math": "^0.1.9",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "detect-gpu": "^4.0.16",
     "dicom-parser": "^1.8.9",
     "dotenv-webpack": "^1.7.0",
+    "file-loader": "^6.2.0",
     "hammerjs": "^2.0.8",
     "history": "^5.3.0",
     "i18next": "^17.0.3",
@@ -94,24 +95,15 @@
     "react-dropzone": "^10.1.7",
     "react-i18next": "^12.2.2",
     "react-resize-detector": "^10.0.1",
-    "react-router": "^6.8.1",
+    "react-router": "^6.23.1",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.8.1",
+    "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@percy/cypress": "^3.1.1",
-    "@playwright/test": "^1.44.0",
     "@types/node": "^20.12.12",
-    "cypress": "13.7.2",
-    "cypress-file-upload": "^3.5.3",
-    "glob": "^8.0.3",
     "identity-obj-proxy": "3.0.x",
     "lodash": "^4.17.21",
-    "tailwindcss": "3.2.4",
+    "tailwindcss": "3.2.4"
-    "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^5.50.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2",
-    "webpack-merge": "^5.7.3"
   }
 }

platform/app/src/appInit.js

@@ -41,7 +41,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
 
   const appConfig = {
     ...(typeof appConfigOrFunc === 'function'
-      ? await appConfigOrFunc({ servicesManager })
+      ? await appConfigOrFunc({ servicesManager, loadModules })
       : appConfigOrFunc),
   };
 
@@ -113,7 +113,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
           ? appConfig.modesConfiguration[id]
           : {};
 
-      mode = mode.modeFactory({ modeConfiguration });
+      mode = await mode.modeFactory({ modeConfiguration, loadModules });
     }
 
     if (modesById.has(id)) {

platform/cli/src/commands/linkPackage.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { execa } from 'execa';
 import { keywords } from './enums/index.js';
-import { validateYarn, addExtensionToConfig, addModeToConfig } from './utils/index.js';
+import { validateYarn, addExtensionToConfig, addModeToConfig } from './utils/index';
 
 async function linkPackage(packageDir, options, addToConfig, keyword) {
   const { viewerDirectory } = options;

platform/cli/src/commands/listPlugins.js

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import { prettyPrint } from './utils/index.js';
+import { prettyPrint } from './utils/index';
 import { colors } from './enums/index.js';
 
 const listPlugins = async configPath => {

platform/cli/src/commands/searchPlugins.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import { prettyPrint } from './utils/index.js';
+import { prettyPrint } from './utils/index';
 import { keywords, colors, endPoints } from './enums/index.js';
 
 async function searchRegistry(keyword) {

platform/cli/src/commands/unlinkPackage.js

@@ -1,7 +1,7 @@
 import { execa } from 'execa';
 import fs from 'fs';
 import path from 'path';
-import { validateYarn, removeExtensionFromConfig, removeModeFromConfig } from './utils/index.js';
+import { validateYarn, removeExtensionFromConfig, removeModeFromConfig } from './utils/index';
 
 const linkPackage = async (packageName, options, removeFromConfig) => {
   const { viewerDirectory } = options;

platform/cli/templates/extension/babel.config.js

@@ -43,7 +43,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

platform/cli/templates/extension/dependencies.json

@@ -53,10 +53,10 @@
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
+    "eslint": "^8.39.0",
     "eslint-loader": "^2.0.0",
     "webpack": "^5.50.0",
     "webpack-merge": "^5.7.3",
-    "webpack-cli": "^4.7.2"
+    "webpack-cli": "^5.0.2"
   }
 }

platform/cli/templates/mode/babel.config.js

@@ -37,7 +37,7 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

platform/cli/templates/mode/dependencies.json

@@ -42,10 +42,10 @@
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
+    "eslint": "^8.39.0",
     "eslint-loader": "^2.0.0",
     "webpack": "^5.50.0",
     "webpack-merge": "^5.7.3",
-    "webpack-cli": "^4.7.2"
+    "webpack-cli": "^5.0.2"
   }
 }

platform/core/package.json

@@ -35,28 +35,28 @@
   "peerDependencies": {
     "@cornerstonejs/codec-charls": "^1.2.3",
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
-    "@cornerstonejs/codec-openjpeg": "^1.2.2",
+    "@cornerstonejs/codec-openjpeg": "^1.2.3",
-    "@cornerstonejs/codec-openjph": "^2.4.2",
+    "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^1.77.6",
+    "@cornerstonejs/dicom-image-loader": "^1.78.1",
     "@ohif/ui": "3.9.0-beta.46",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "dcmjs": "^0.29.12",
+    "dcmjs": "*",
     "dicomweb-client": "^0.10.4",
     "gl-matrix": "^3.4.3",
     "isomorphic-base64": "^1.0.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "lodash.mergewith": "^4.6.2",
-    "moment": "^2.24.0",
+    "moment": "*",
     "object-hash": "2.1.1",
     "query-string": "^6.14.0",
     "validate.js": "^0.12.0"
   },
   "devDependencies": {
-    "webpack-merge": "5.7.3"
+    "webpack-merge": "*"
   }
 }

platform/core/src/types/index.ts

@@ -7,8 +7,8 @@ import type {
   BaseDataSourceConfigurationAPI,
   BaseDataSourceConfigurationAPIItem,
 } from './DataSourceConfigurationAPI';
-import type { PresentationIds } from '../services/ViewportGridService';
 
+export type * from '../services/ViewportGridService';
 export type * from '../services/CustomizationService/types';
 // Separate out some generic types
 export type * from './Consumer';
@@ -31,5 +31,4 @@ export {
   DataSourceDefinition,
   BaseDataSourceConfigurationAPI,
   BaseDataSourceConfigurationAPIItem,
-  PresentationIds,
 };

platform/core/src/utils/index.test.js

@@ -1,4 +1,4 @@
-import * as utils from './index.js';
+import * as utils from './index';
 
 describe('Top level exports', () => {
   test('should export the modules ', () => {

platform/docs/package.json

@@ -28,7 +28,7 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids"
   },
-  "dependencies": {
+  "optionalDependencies": {
     "@docusaurus/core": "2.4.3",
     "@docusaurus/plugin-client-redirects": "2.4.3",
     "@docusaurus/plugin-google-gtag": "2.4.3",

platform/ui-next/package.json

@@ -18,7 +18,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
+    "clsx": "*",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "framer-motion": "6.2.4",

platform/ui/package.json

@@ -44,7 +44,7 @@
     "d3-shape": "3",
     "d3-zoom": "3",
     "lodash.debounce": "4.0.8",
-    "moment": "2.29.4",
+    "moment": "*",
     "mousetrap": "^1.6.5",
     "react": "^18.3.1",
     "react-dates": "^21.8.0",