feat(4D): Add 4D dynamic volume rendering and new pre-clinical 4d pt/…

…ct mode (#3664)

Co-authored-by: Alireza <[email protected]>
Co-authored-by: Neil <[email protected]>

.gitignore

@@ -24,6 +24,7 @@ yarn-error.log
 .DS_Store
 .env
 *.code-workspace
+.directory
 
 # Common Example Data Directories
 sampledata/

commit.txt

@@ -1 +1 @@
-dc37802ec1f739a6ed602363bdf231d6fe58827e
+dc37802ec1f739a6ed602363bdf231d6fe58827e

extensions/cornerstone-dicom-seg/package.json

@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.68.1",
-    "@cornerstonejs/core": "^1.68.1",
-    "@kitware/vtk.js": "29.7.0",
+    "@cornerstonejs/adapters": "^1.70.0",
+    "@cornerstonejs/core": "^1.70.0",
+    "@kitware/vtk.js": "30.3.1",
     "react-color": "^2.19.3"
   }
 }

extensions/cornerstone-dicom-seg/src/getPanelModule.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { useAppConfig } from '@state';
 import { Toolbox } from '@ohif/ui';
 import PanelSegmentation from './panels/PanelSegmentation';
-import { SegmentationPanelMode } from './types/segmentation';
 
 const getPanelModule = ({
   commandsManager,
@@ -17,30 +16,22 @@ const getPanelModule = ({
   const wrappedPanelSegmentation = configuration => {
     const [appConfig] = useAppConfig();
 
-    const disableEditingForMode = customizationService.get('segmentation.disableEditing');
-    const segmentationPanelMode =
-      customizationService.get('segmentation.segmentationPanelMode')?.value ||
-      SegmentationPanelMode.Dropdown;
-
     return (
       <PanelSegmentation
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
         configuration={{
           ...configuration,
-          disableEditing: appConfig.disableEditing || disableEditingForMode?.value,
-          segmentationPanelMode: segmentationPanelMode,
+          disableEditing: appConfig.disableEditing,
+          ...customizationService.get('segmentation.panel'),
         }}
       />
     );
   };
 
   const wrappedPanelSegmentationWithTools = configuration => {
     const [appConfig] = useAppConfig();
-    const segmentationPanelMode =
-      customizationService.get('segmentation.segmentationPanelMode')?.value ||
-      SegmentationPanelMode.Dropdown;
 
     return (
       <>
@@ -60,7 +51,8 @@ const getPanelModule = ({
           extensionManager={extensionManager}
           configuration={{
             ...configuration,
-            segmentationPanelMode: segmentationPanelMode,
+            disableEditing: appConfig.disableEditing,
+            ...customizationService.get('segmentation.panel'),
           }}
         />
       </>

extensions/cornerstone-dicom-seg/src/getToolbarModule.ts

@@ -52,16 +52,22 @@ export function getToolbarModule({ commandsManager, servicesManager }) {
   ];
 }
 
+// Todo: this is duplicate, we should move it to a shared location
 function getToolNameForButton(button) {
   const { props } = button;
 
   const commands = props?.commands || button.commands;
+  const commandsArray = Array.isArray(commands) ? commands : [commands];
+  const firstCommand = commandsArray[0];
+  if (typeof firstCommand === 'string') {
+    // likely not a cornerstone tool
+    return null;
+  }
 
-  if (commands && commands.length) {
-    const command = commands[0];
-    const { commandOptions } = command;
-    const { toolName } = commandOptions || { toolName: props?.id ?? button.id };
-    return toolName;
+  if ('commandOptions' in firstCommand) {
+    return firstCommand.commandOptions.toolName ?? props?.id ?? button.id;
   }
-  return null;
+
+  // use id as a fallback for toolName
+  return props?.id ?? button.id;
 }

extensions/cornerstone-dicom-seg/src/index.tsx

@@ -6,7 +6,6 @@ import getHangingProtocolModule from './getHangingProtocolModule';
 import getPanelModule from './getPanelModule';
 import getCommandsModule from './commandsModule';
 import { getToolbarModule } from './getToolbarModule';
-import preRegistration from './init';
 
 const Component = React.lazy(() => {
   return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport');
@@ -29,7 +28,6 @@ const extension = {
    * You ID can be anything you want, but it should be unique.
    */
   id,
-  preRegistration,
   /**
    * PanelModule should provide a list of panels that will be available in OHIF
    * for Modes to consume and render. Each panel is defined by a {name,

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -242,15 +242,22 @@ export default function PanelSegmentation({
     });
   };
 
-  const SegmentationGroupTableComponent = components[configuration?.segmentationPanelMode];
+  const SegmentationGroupTableComponent =
+    components[configuration?.segmentationPanelMode] || SegmentationGroupTable;
+  const allowAddSegment = configuration?.addSegment;
+  const onSegmentationAddWrapper =
+    configuration?.onSegmentationAdd && typeof configuration?.onSegmentationAdd === 'function'
+      ? configuration?.onSegmentationAdd
+      : onSegmentationAdd;
 
   return (
     <SegmentationGroupTableComponent
       title={t('Segmentations')}
       segmentations={segmentations}
       disableEditing={configuration.disableEditing}
       activeSegmentationId={selectedSegmentationId || ''}
-      onSegmentationAdd={onSegmentationAdd}
+      onSegmentationAdd={onSegmentationAddWrapper}
+      showAddSegment={allowAddSegment}
       onSegmentationClick={onSegmentationClick}
       onSegmentationDelete={onSegmentationDelete}
       onSegmentationDownload={onSegmentationDownload}

extensions/cornerstone-dicom-sr/package.json

@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.68.1",
-    "@cornerstonejs/core": "^1.68.1",
-    "@cornerstonejs/tools": "^1.68.1",
+    "@cornerstonejs/adapters": "^1.70.0",
+    "@cornerstonejs/core": "^1.70.0",
+    "@cornerstonejs/tools": "^1.70.0",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -378,10 +378,13 @@ async function _getViewportReferencedDisplaySetData(
   measurementSelected,
   displaySetService
 ) {
-  const { measurements } = displaySet;
-  const measurement = measurements[measurementSelected];
-
-  const { displaySetInstanceUID } = measurement;
+  if (!displaySet.keyImageDisplaySet) {
+    // Create a new display set, and preserve a reference to it here,
+    // so that it can be re-displayed and shown inside the SR viewport.
+    // This is only for ease of redisplay - the display set is stored in the
+    // usual manner in the display set service.
+    displaySet.keyImageDisplaySet = createReferencedImageDisplaySet(displaySetService, displaySet);
+  }
 
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 

extensions/cornerstone-dynamic-volume/.webpack/webpack.dev.js

@@ -0,0 +1,8 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+};

extensions/cornerstone-dynamic-volume/.webpack/webpack.prod.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkg = require('./../package.json');
+
+const ROOT_DIR = path.join(__dirname, '../');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+const ENTRY = {
+  app: `${SRC_DIR}/index.ts`,
+};
+
+const outputName = `ohif-${pkg.name.split('/').pop()}`;
+
+module.exports = (env, argv) => {
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+
+  return merge(commonConfig, {
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
+    optimization: {
+      minimize: true,
+      sideEffects: true,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-extension-cornerstone',
+      libraryTarget: 'umd',
+      filename: pkg.main,
+    },
+    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+      new MiniCssExtractPlugin({
+        filename: `./dist/${outputName}.css`,
+        chunkFilename: `./dist/${outputName}.css`,
+      }),
+    ],
+  });
+};

extensions/cornerstone-dynamic-volume/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 cornerstone-dynamic-volume ()
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

extensions/cornerstone-dynamic-volume/README.md

@@ -0,0 +1,8 @@
+# cornerstone-dynamic-volume
+## Description
+
+## Author
+OHIF
+
+## License
+MIT

extensions/cornerstone-dynamic-volume/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('../../babel.config.js');

extensions/cornerstone-dynamic-volume/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@ohif/extension-cornerstone-dynamic-volume",
+  "version": "3.8.0-beta.72",
+  "description": "OHIF extension for 4D volumes data",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/ohif-extension-cornerstone-dynamic-volume.umd.js",
+  "module": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./types": "./src/types/index.ts"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.7.0-beta.76",
+    "@ohif/ui": "3.7.0-beta.76",
+    "@ohif/extension-default": "3.7.0-beta.76",
+    "@ohif/extension-cornerstone": "3.7.0-beta.76",
+    "@ohif/i18n": "3.7.0-beta.76",
+    "dcmjs": "^0.29.5",
+    "dicom-parser": "^1.8.21",
+    "hammerjs": "^2.0.8",
+    "prop-types": "^15.6.2",
+    "react": "^17.0.2"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@cornerstonejs/tools": "^1.70.0",
+    "@cornerstonejs/core": "^1.70.0",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.70.0",
+    "classnames": "^2.3.2"
+  }
+}

extensions/cornerstone-dynamic-volume/src/actions/index.ts

@@ -0,0 +1,3 @@
+import updateSegmentationsChartDisplaySet from './updateSegmentationsChartDisplaySet';
+
+export { updateSegmentationsChartDisplaySet };