init: sudah ganti logo, hilangin setting, dan investigational use dialog

modes/basic-dev-mode/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.ts`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

modes/basic-dev-mode/.webpack/webpack.prod.js

@@ -0,0 +1,47 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+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`,
+};
+
+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: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-mode-basic-dev',
+      libraryTarget: 'umd',
+      filename: pkg.main,
+    },
+    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
+  });
+};

modes/basic-dev-mode/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+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.

modes/basic-dev-mode/babel.config.js

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

modes/basic-dev-mode/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ohif/mode-basic-dev-mode",
+  "version": "3.10.0-beta.111",
+  "description": "Basic OHIF Viewer Using Cornerstone",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/ohif-mode-basic-dev-mode.umd.js",
+  "module": "src/index.ts",
+  "engines": {
+    "node": ">=10",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.111",
+    "@ohif/extension-default": "3.10.0-beta.111",
+    "@ohif/extension-dicom-pdf": "3.10.0-beta.111",
+    "@ohif/extension-dicom-video": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
+  },
+  "devDependencies": {
+    "webpack": "5.94.0",
+    "webpack-merge": "^5.7.3"
+  }
+}

modes/basic-dev-mode/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/basic-dev-mode/src/index.ts

@@ -0,0 +1,183 @@
+import toolbarButtons from './toolbarButtons';
+import { hotkeys } from '@ohif/core';
+import { id } from './id';
+import i18n from 'i18next';
+
+const configs = {
+  Length: {},
+  //
+};
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  measurements: '@ohif/extension-cornerstone.panelModule.panelMeasurement',
+  thumbnailList: '@ohif/extension-default.panelModule.seriesList',
+};
+
+const cs3d = {
+  viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
+};
+
+const dicomsr = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-sr.sopClassHandlerModule.dicom-sr',
+  viewport: '@ohif/extension-cornerstone-dicom-sr.viewportModule.dicom-sr',
+};
+
+const dicomvideo = {
+  sopClassHandler: '@ohif/extension-dicom-video.sopClassHandlerModule.dicom-video',
+  viewport: '@ohif/extension-dicom-video.viewportModule.dicom-video',
+};
+
+const dicompdf = {
+  sopClassHandler: '@ohif/extension-dicom-pdf.sopClassHandlerModule.dicom-pdf',
+  viewport: '@ohif/extension-dicom-pdf.viewportModule.dicom-pdf',
+};
+
+const extensionDependencies = {
+  '@ohif/extension-default': '^3.0.0',
+  '@ohif/extension-cornerstone': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-sr': '^3.0.0',
+  '@ohif/extension-dicom-pdf': '^3.0.1',
+  '@ohif/extension-dicom-video': '^3.0.1',
+};
+
+function modeFactory({ modeConfiguration }) {
+  return {
+    id,
+    routeName: 'dev',
+    displayName: i18n.t('Modes:Basic Dev Viewer'),
+    /**
+     * Lifecycle hooks
+     */
+    onModeEnter: ({ servicesManager, extensionManager }: withAppTypes) => {
+      const { toolbarService, toolGroupService } = servicesManager.services;
+      const utilityModule = extensionManager.getModuleEntry(
+        '@ohif/extension-cornerstone.utilityModule.tools'
+      );
+
+      const { toolNames, Enums } = utilityModule.exports;
+
+      const tools = {
+        active: [
+          {
+            toolName: toolNames.WindowLevel,
+            bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+          },
+          {
+            toolName: toolNames.Pan,
+            bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+          },
+          {
+            toolName: toolNames.Zoom,
+            bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+          },
+          {
+            toolName: toolNames.StackScroll,
+            bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+          },
+        ],
+        passive: [
+          { toolName: toolNames.Length },
+          { toolName: toolNames.Bidirectional },
+          { toolName: toolNames.Probe },
+          { toolName: toolNames.EllipticalROI },
+          { toolName: toolNames.CircleROI },
+          { toolName: toolNames.RectangleROI },
+          { toolName: toolNames.StackScroll },
+          { toolName: toolNames.CalibrationLine },
+        ],
+        // enabled
+        enabled: [{ toolName: toolNames.ImageOverlayViewer }],
+        // disabled
+      };
+
+      toolGroupService.createToolGroupAndAddTools('default', tools);
+
+      toolbarService.addButtons(toolbarButtons);
+      toolbarService.createButtonSection('primary', [
+        'MeasurementTools',
+        'Zoom',
+        'WindowLevel',
+        'Pan',
+        'Layout',
+        'MoreTools',
+      ]);
+    },
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const {
+        toolGroupService,
+        measurementService,
+        toolbarService,
+        uiDialogService,
+        uiModalService,
+      } = servicesManager.services;
+      uiDialogService.dismissAll();
+      uiModalService.hide();
+      toolGroupService.destroy();
+    },
+    validationTags: {
+      study: [],
+      series: [],
+    },
+    isValidMode: ({ modalities }) => {
+      const modalities_list = modalities.split('\\');
+
+      // Slide Microscopy modality not supported by basic mode yet
+      return {
+        valid: !modalities_list.includes('SM'),
+        description: 'The mode does not support the following modalities: SM',
+      };
+    },
+    routes: [
+      {
+        path: 'viewer-cs3d',
+        /*init: ({ servicesManager, extensionManager }) => {
+          //defaultViewerRouteInit
+        },*/
+        layoutTemplate: ({ location, servicesManager }) => {
+          return {
+            id: ohif.layout,
+            props: {
+              // TODO: Should be optional, or required to pass empty array for slots?
+              leftPanels: [ohif.thumbnailList],
+              leftPanelResizable: true,
+              rightPanels: [ohif.measurements],
+              rightPanelResizable: true,
+              viewports: [
+                {
+                  namespace: cs3d.viewport,
+                  displaySetsToDisplay: [ohif.sopClassHandler],
+                },
+                {
+                  namespace: dicomvideo.viewport,
+                  displaySetsToDisplay: [dicomvideo.sopClassHandler],
+                },
+                {
+                  namespace: dicompdf.viewport,
+                  displaySetsToDisplay: [dicompdf.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    extensions: extensionDependencies,
+    hangingProtocol: 'default',
+    sopClassHandlers: [
+      dicomvideo.sopClassHandler,
+      ohif.sopClassHandler,
+      dicompdf.sopClassHandler,
+      dicomsr.sopClassHandler,
+    ],
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;

modes/basic-dev-mode/src/toolbarButtons.ts

@@ -0,0 +1,261 @@
+import { WindowLevelMenuItem } from '@ohif/ui';
+import { defaults, ToolbarService } from '@ohif/core';
+import type { Button } from '@ohif/core/types';
+
+const { windowLevelPresets } = defaults;
+
+function _createWwwcPreset(preset, title, subtitle) {
+  return {
+    id: preset.toString(),
+    title,
+    subtitle,
+    commands: [
+      {
+        commandName: 'setWindowLevel',
+        commandOptions: {
+          ...windowLevelPresets[preset],
+        },
+        context: 'CORNERSTONE',
+      },
+    ],
+  };
+}
+
+function _createSetToolActiveCommands(toolName, toolGroupIds = ['default', 'mpr']) {
+  return toolGroupIds.map(toolGroupId => ({
+    commandName: 'setToolActive',
+    commandOptions: {
+      toolGroupId,
+      toolName,
+    },
+    context: 'CORNERSTONE',
+  }));
+}
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MeasurementTools',
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: ToolbarService.createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: _createSetToolActiveCommands('Length'),
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        ToolbarService.createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: _createSetToolActiveCommands('Bidirectional'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: _createSetToolActiveCommands('EllipticalROI'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'CircleROI',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: _createSetToolActiveCommands('CircleROI'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+  {
+    id: 'Zoom',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commands: _createSetToolActiveCommands('Zoom'),
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'WindowLevel',
+      primary: ToolbarService.createButton({
+        id: 'WindowLevel',
+        icon: 'tool-window-level',
+        label: 'Window Level',
+        tooltip: 'Window Level',
+        commands: _createSetToolActiveCommands('WindowLevel'),
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'W/L Presets',
+      },
+      renderer: WindowLevelMenuItem,
+      items: [
+        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
+        _createWwwcPreset(2, 'Lung', '1500 / -600'),
+        _createWwwcPreset(3, 'Liver', '150 / 90'),
+        _createWwwcPreset(4, 'Bone', '2500 / 480'),
+        _createWwwcPreset(5, 'Brain', '80 / 40'),
+      ],
+    },
+  },
+  {
+    id: 'Pan',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: _createSetToolActiveCommands('Pan'),
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Capture',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-capture',
+      label: 'Capture',
+      commands: [
+        {
+          commandName: 'showDownloadViewportModal',
+          context: 'CORNERSTONE',
+        },
+      ],
+      evaluate: [
+        'evaluate.action',
+        {
+          name: 'evaluate.viewport.supported',
+          unsupportedViewportTypes: ['video', 'wholeSlide'],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 4,
+      evaluate: 'evaluate.action',
+      commands: [
+        {
+          commandName: 'setViewportGridLayout',
+        },
+      ],
+    },
+  },
+  {
+    id: 'MoreTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MoreTools',
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: ToolbarService.createButton({
+        id: 'Reset',
+        icon: 'tool-reset',
+        label: 'Reset View',
+        tooltip: 'Reset View',
+        commands: [
+          {
+            commandName: 'resetViewport',
+            context: 'CORNERSTONE',
+          },
+        ],
+        evaluate: 'evaluate.action',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Tools',
+      },
+      items: [
+        ToolbarService.createButton({
+          id: 'Reset',
+          icon: 'tool-reset',
+          label: 'Reset View',
+          tooltip: 'Reset View',
+          commands: [
+            {
+              commandName: 'resetViewport',
+              context: 'CORNERSTONE',
+            },
+          ],
+          evaluate: 'evaluate.action',
+        }),
+        ToolbarService.createButton({
+          id: 'RotateRight',
+          icon: 'tool-rotate-right',
+          label: 'Rotate Right',
+          tooltip: 'Rotate Right +90',
+          commands: [
+            {
+              commandName: 'rotateViewportCW',
+              context: 'CORNERSTONE',
+            },
+          ],
+          evaluate: 'evaluate.action',
+        }),
+        ToolbarService.createButton({
+          id: 'FlipHorizontal',
+          icon: 'tool-flip-horizontal',
+          label: 'Flip Horizontally',
+          tooltip: 'Flip Horizontally',
+          commands: [
+            {
+              commandName: 'flipViewportHorizontal',
+              context: 'CORNERSTONE',
+            },
+          ],
+          evaluate: 'evaluate.action',
+        }),
+        ToolbarService.createButton({
+          id: 'StackScroll',
+          icon: 'tool-stack-scroll',
+          label: 'Stack Scroll',
+          tooltip: 'Stack Scroll',
+          commands: _createSetToolActiveCommands('StackScroll'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'Invert',
+          icon: 'tool-invert',
+          label: 'Invert Colors',
+          tooltip: 'Invert Colors',
+          commands: [
+            {
+              commandName: 'invertViewport',
+              context: 'CORNERSTONE',
+            },
+          ],
+          evaluate: 'evaluate.action',
+        }),
+        ToolbarService.createButton({
+          id: 'CalibrationLine',
+          icon: 'tool-calibration',
+          label: 'Calibration Line',
+          tooltip: 'Calibration Line',
+          commands: _createSetToolActiveCommands('CalibrationLine'),
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+];
+
+export default toolbarButtons;

modes/basic-test-mode/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.ts`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

modes/basic-test-mode/.webpack/webpack.prod.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkg = require('./../package.json');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+
+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`,
+};
+
+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: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-mode-basic-test',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      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/[name].css',
+      //   chunkFilename: './dist/[id].css',
+      // }),
+    ],
+  });
+};

modes/basic-test-mode/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Open Health Imaging Foundation
+
+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.

modes/basic-test-mode/README.md

@@ -0,0 +1,5 @@
+# Test mode
+
+This mode is used to test the basic functionality of the OHIF viewer
+in a controlled environment. It is not intended to be used for
+development or production.

modes/basic-test-mode/babel.config.js

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

modes/basic-test-mode/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ohif/mode-test",
+  "version": "3.10.0-beta.111",
+  "description": "Basic mode for testing",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/ohif-mode-test.umd.js",
+  "module": "src/index.ts",
+  "engines": {
+    "node": ">=14",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "ohif-mode"
+  ],
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.111",
+    "@ohif/extension-default": "3.10.0-beta.111",
+    "@ohif/extension-dicom-pdf": "3.10.0-beta.111",
+    "@ohif/extension-dicom-video": "3.10.0-beta.111",
+    "@ohif/extension-measurement-tracking": "3.10.0-beta.111",
+    "@ohif/extension-test": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
+  },
+  "devDependencies": {
+    "webpack": "5.94.0",
+    "webpack-merge": "^5.7.3"
+  }
+}

modes/basic-test-mode/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/basic-test-mode/src/index.ts

@@ -0,0 +1,238 @@
+import { hotkeys } from '@ohif/core';
+import toolbarButtons from './toolbarButtons';
+import { id } from './id';
+import initToolGroups from './initToolGroups';
+import moreTools from './moreTools';
+import i18n from 'i18next';
+
+// Allow this mode by excluding non-imaging modalities such as SR, SEG
+// Also, SM is not a simple imaging modalities, so exclude it.
+const NON_IMAGE_MODALITIES = ['ECG', 'SR', 'SEG', 'RTSTRUCT'];
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  wsiSopClassHandler:
+    '@ohif/extension-cornerstone.sopClassHandlerModule.DicomMicroscopySopClassHandler',
+  thumbnailList: '@ohif/extension-default.panelModule.seriesList',
+};
+
+const tracked = {
+  measurements: '@ohif/extension-measurement-tracking.panelModule.trackedMeasurements',
+  thumbnailList: '@ohif/extension-measurement-tracking.panelModule.seriesList',
+  viewport: '@ohif/extension-measurement-tracking.viewportModule.cornerstone-tracked',
+};
+
+const dicomsr = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-sr.sopClassHandlerModule.dicom-sr',
+  viewport: '@ohif/extension-cornerstone-dicom-sr.viewportModule.dicom-sr',
+};
+
+const dicomvideo = {
+  sopClassHandler: '@ohif/extension-dicom-video.sopClassHandlerModule.dicom-video',
+  viewport: '@ohif/extension-dicom-video.viewportModule.dicom-video',
+};
+
+const dicompdf = {
+  sopClassHandler: '@ohif/extension-dicom-pdf.sopClassHandlerModule.dicom-pdf',
+  viewport: '@ohif/extension-dicom-pdf.viewportModule.dicom-pdf',
+};
+
+const dicomSeg = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-seg.sopClassHandlerModule.dicom-seg',
+  viewport: '@ohif/extension-cornerstone-dicom-seg.viewportModule.dicom-seg',
+};
+
+const cornerstone = {
+  panel: '@ohif/extension-cornerstone.panelModule.panelSegmentation',
+  measurements: '@ohif/extension-cornerstone.panelModule.panelMeasurement',
+};
+
+const dicomPmap = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-pmap.sopClassHandlerModule.dicom-pmap',
+  viewport: '@ohif/extension-cornerstone-dicom-pmap.viewportModule.dicom-pmap',
+};
+
+const extensionDependencies = {
+  // Can derive the versions at least process.env.from npm_package_version
+  '@ohif/extension-default': '^3.0.0',
+  '@ohif/extension-cornerstone': '^3.0.0',
+  '@ohif/extension-measurement-tracking': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-sr': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-seg': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-pmap': '^3.0.0',
+  '@ohif/extension-dicom-pdf': '^3.0.1',
+  '@ohif/extension-dicom-video': '^3.0.1',
+  '@ohif/extension-test': '^0.0.1',
+};
+
+function modeFactory() {
+  return {
+    // TODO: We're using this as a route segment
+    // We should not be.
+    id,
+    routeName: 'basic-test',
+    displayName: i18n.t('Modes:Basic Test Mode'),
+    /**
+     * Lifecycle hooks
+     */
+    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
+      const { measurementService, toolbarService, toolGroupService, customizationService } =
+        servicesManager.services;
+
+      measurementService.clearMeasurements();
+
+      // Init Default and SR ToolGroups
+      initToolGroups(extensionManager, toolGroupService, commandsManager);
+
+      // init customizations
+      customizationService.setCustomizations([
+        '@ohif/extension-test.customizationModule.custom-context-menu',
+      ]);
+
+      toolbarService.addButtons([...toolbarButtons, ...moreTools]);
+      toolbarService.createButtonSection('primary', [
+        'MeasurementTools',
+        'Zoom',
+        'WindowLevel',
+        'Pan',
+        'Capture',
+        'Layout',
+        'MPR',
+        'Crosshairs',
+        'MoreTools',
+      ]);
+
+      customizationService.setCustomizations(
+        {
+          'ohif.hotkeyBindings': {
+            $push: [
+              {
+                commandName: 'undo',
+                label: 'Undo',
+                keys: ['ctrl+z'],
+                isEditable: true,
+              },
+            ],
+          },
+        },
+        'mode'
+      );
+    },
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const {
+        toolGroupService,
+        syncGroupService,
+        segmentationService,
+        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
+      } = servicesManager.services;
+
+      uiDialogService.dismissAll();
+      uiModalService.hide();
+      toolGroupService.destroy();
+      syncGroupService.destroy();
+      segmentationService.destroy();
+      cornerstoneViewportService.destroy();
+    },
+    validationTags: {
+      study: [],
+      series: [],
+    },
+
+    isValidMode: function ({ modalities }) {
+      const modalities_list = modalities.split('\\');
+
+      // Exclude non-image modalities
+      return {
+        valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
+          .length,
+        description:
+          'The mode does not support studies that ONLY include the following modalities: SM, ECG, SR, SEG',
+      };
+    },
+    routes: [
+      {
+        path: 'basic-test',
+        /*init: ({ servicesManager, extensionManager }) => {
+          //defaultViewerRouteInit
+        },*/
+        layoutTemplate: () => {
+          return {
+            id: ohif.layout,
+            props: {
+              // Use the first two for an untracked view
+              // leftPanels: [ohif.thumbnailList],
+              // rightPanels: [dicomSeg.panel, ohif.measurements],
+              leftPanels: [tracked.thumbnailList],
+              leftPanelResizable: true,
+              // Can use cornerstone.measurements for all measurements
+              rightPanels: [cornerstone.panel, tracked.measurements, cornerstone.measurements],
+              rightPanelResizable: true,
+              // rightPanelClosed: true, // optional prop to start with collapse panels
+              viewports: [
+                {
+                  namespace: tracked.viewport,
+                  displaySetsToDisplay: [
+                    ohif.sopClassHandler,
+                    dicomvideo.sopClassHandler,
+                    ohif.wsiSopClassHandler,
+                  ],
+                },
+                {
+                  namespace: dicomsr.viewport,
+                  displaySetsToDisplay: [dicomsr.sopClassHandler],
+                },
+                {
+                  namespace: dicomvideo.viewport,
+                  displaySetsToDisplay: [dicomvideo.sopClassHandler],
+                },
+                {
+                  namespace: dicompdf.viewport,
+                  displaySetsToDisplay: [dicompdf.sopClassHandler],
+                },
+                {
+                  namespace: dicomSeg.viewport,
+                  displaySetsToDisplay: [dicomSeg.sopClassHandler],
+                },
+                {
+                  namespace: dicomPmap.viewport,
+                  displaySetsToDisplay: [dicomPmap.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    extensions: extensionDependencies,
+    // Default protocol gets self-registered by default in the init
+    hangingProtocol: 'default',
+    // Order is important in sop class handlers when two handlers both use
+    // the same sop class under different situations.  In that case, the more
+    // general handler needs to come last.  For this case, the dicomvideo must
+    // come first to remove video transfer syntax before ohif uses images
+    sopClassHandlers: [
+      dicomvideo.sopClassHandler,
+      dicomSeg.sopClassHandler,
+      ohif.wsiSopClassHandler,
+      ohif.sopClassHandler,
+      dicompdf.sopClassHandler,
+      dicomsr.sopClassHandler,
+    ],
+    hotkeys: {
+      // Don't store the hotkeys for basic-test-mode under the same key
+      // because they get customized by tests
+      name: 'basic-test-hotkeys',
+    },
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;

modes/basic-test-mode/src/initToolGroups.ts

@@ -0,0 +1,276 @@
+const colours = {
+  'viewport-0': 'rgb(200, 0, 0)',
+  'viewport-1': 'rgb(200, 200, 0)',
+  'viewport-2': 'rgb(0, 200, 0)',
+};
+
+const colorsByOrientation = {
+  axial: 'rgb(200, 0, 0)',
+  sagittal: 'rgb(200, 200, 0)',
+  coronal: 'rgb(0, 200, 0)',
+};
+
+function initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, toolGroupId) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: toolNames.Length },
+      {
+        toolName: toolNames.ArrowAnnotate,
+        configuration: {
+          getTextCallback: (callback, eventDetails) =>
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              eventDetails,
+            }),
+
+          changeTextCallback: (data, eventDetails, callback) =>
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              data,
+              eventDetails,
+            }),
+        },
+      },
+      { toolName: toolNames.Bidirectional },
+      { toolName: toolNames.DragProbe },
+      { toolName: toolNames.Probe },
+      { toolName: toolNames.EllipticalROI },
+      { toolName: toolNames.CircleROI },
+      { toolName: toolNames.RectangleROI },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Angle },
+      { toolName: toolNames.CobbAngle },
+      { toolName: toolNames.Magnify },
+      { toolName: toolNames.WindowLevelRegion },
+      { toolName: toolNames.UltrasoundDirectional },
+      { toolName: toolNames.PlanarFreehandROI },
+      { toolName: toolNames.SplineROI },
+      { toolName: toolNames.LivewireContour },
+    ],
+    // enabled
+    enabled: [{ toolName: toolNames.ImageOverlayViewer }],
+    // disabled
+    disabled: [{ toolName: toolNames.ReferenceLines }, { toolName: toolNames.AdvancedMagnify }],
+  };
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+}
+
+function initSRToolGroup(extensionManager, toolGroupService, commandsManager) {
+  const SRUtilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone-dicom-sr.utilityModule.tools'
+  );
+
+  const CS3DUtilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames: SRToolNames } = SRUtilityModule.exports;
+  const { toolNames, Enums } = CS3DUtilityModule.exports;
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [
+          {
+            mouseButton: Enums.MouseBindings.Primary,
+          },
+        ],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [
+          {
+            mouseButton: Enums.MouseBindings.Auxiliary,
+          },
+        ],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [
+          {
+            mouseButton: Enums.MouseBindings.Secondary,
+          },
+        ],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: SRToolNames.SRLength },
+      { toolName: SRToolNames.SRArrowAnnotate },
+      { toolName: SRToolNames.SRBidirectional },
+      { toolName: SRToolNames.SREllipticalROI },
+      { toolName: SRToolNames.SRCircleROI },
+      { toolName: toolNames.WindowLevelRegion },
+    ],
+    enabled: [
+      {
+        toolName: SRToolNames.DICOMSRDisplay,
+        bindings: [],
+      },
+    ],
+    // disabled
+  };
+
+  const toolGroupId = 'SRToolGroup';
+  toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+}
+
+function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const serviceManager = extensionManager._servicesManager;
+  const { cornerstoneViewportService } = serviceManager.services;
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: toolNames.Length },
+      {
+        toolName: toolNames.ArrowAnnotate,
+        configuration: {
+          getTextCallback: (callback, eventDetails) =>
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              eventDetails,
+            }),
+
+          changeTextCallback: (data, eventDetails, callback) =>
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              data,
+              eventDetails,
+            }),
+        },
+      },
+      { toolName: toolNames.Bidirectional },
+      { toolName: toolNames.DragProbe },
+      { toolName: toolNames.Probe },
+      { toolName: toolNames.EllipticalROI },
+      { toolName: toolNames.CircleROI },
+      { toolName: toolNames.RectangleROI },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Angle },
+      { toolName: toolNames.WindowLevelRegion },
+      { toolName: toolNames.PlanarFreehandROI },
+      { toolName: toolNames.SplineROI },
+      { toolName: toolNames.LivewireContour },
+    ],
+    disabled: [
+      {
+        toolName: toolNames.Crosshairs,
+        configuration: {
+          viewportIndicators: false,
+          autoPan: {
+            enabled: false,
+            panSize: 10,
+          },
+          getReferenceLineColor: viewportId => {
+            const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+            const viewportOptions = viewportInfo?.viewportOptions;
+            if (viewportOptions) {
+              return (
+                colours[viewportOptions.id] ||
+                colorsByOrientation[viewportOptions.orientation] ||
+                '#0c0'
+              );
+            } else {
+              console.warn('missing viewport?', viewportId);
+              return '#0c0';
+            }
+          },
+        },
+      },
+      { toolName: toolNames.ReferenceLines },
+    ],
+
+    // enabled
+    // disabled
+  };
+
+  toolGroupService.createToolGroupAndAddTools('mpr', tools);
+}
+
+function initVolume3DToolGroup(extensionManager, toolGroupService) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.TrackballRotateTool,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools('volume3d', tools);
+}
+
+function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+  initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
+  initSRToolGroup(extensionManager, toolGroupService, commandsManager);
+  initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
+  initVolume3DToolGroup(extensionManager, toolGroupService);
+}
+
+export default initToolGroups;

modes/basic-test-mode/src/moreTools.ts

@@ -0,0 +1,212 @@
+import type { RunCommand } from '@ohif/core/types';
+import { EVENTS } from '@cornerstonejs/core';
+import { ToolbarService, ViewportGridService } from '@ohif/core';
+import { setToolActiveToolbar } from './toolbarButtons';
+const { createButton } = ToolbarService;
+
+const ReferenceLinesListeners: RunCommand = [
+  {
+    commandName: 'setSourceViewportForReferenceLinesTool',
+    context: 'CORNERSTONE',
+  },
+];
+
+const moreTools = [
+  {
+    id: 'MoreTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MoreTools',
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Reset',
+        icon: 'tool-reset',
+        tooltip: 'Reset View',
+        label: 'Reset',
+        commands: 'resetViewport',
+        evaluate: 'evaluate.action',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        label: '',
+        tooltip: 'More Tools',
+      },
+      items: [
+        createButton({
+          id: 'Reset',
+          icon: 'tool-reset',
+          label: 'Reset View',
+          tooltip: 'Reset View',
+          commands: 'resetViewport',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'rotate-right',
+          icon: 'tool-rotate-right',
+          label: 'Rotate Right',
+          tooltip: 'Rotate +90',
+          commands: 'rotateViewportCW',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'flipHorizontal',
+          icon: 'tool-flip-horizontal',
+          label: 'Flip Horizontal',
+          tooltip: 'Flip Horizontally',
+          commands: 'flipViewportHorizontal',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'ImageSliceSync',
+          icon: 'link',
+          label: 'Image Slice Sync',
+          tooltip: 'Enable position synchronization on stack viewports',
+          commands: {
+            commandName: 'toggleSynchronizer',
+            commandOptions: {
+              type: 'imageSlice',
+            },
+          },
+          listeners: {
+            [EVENTS.VIEWPORT_NEW_IMAGE_SET]: {
+              commandName: 'toggleImageSliceSync',
+              commandOptions: { toggledState: true },
+            },
+          },
+          evaluate: 'evaluate.cornerstone.synchronizer',
+        }),
+        createButton({
+          id: 'ReferenceLines',
+          icon: 'tool-referenceLines',
+          label: 'Reference Lines',
+          tooltip: 'Show Reference Lines',
+          commands: 'toggleEnabledDisabledToolbar',
+          listeners: {
+            [ViewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
+            [ViewportGridService.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners,
+          },
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'ImageOverlayViewer',
+          icon: 'toggle-dicom-overlay',
+          label: 'Image Overlay',
+          tooltip: 'Toggle Image Overlay',
+          commands: 'toggleEnabledDisabledToolbar',
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'StackScroll',
+          icon: 'tool-stack-scroll',
+          label: 'Stack Scroll',
+          tooltip: 'Stack Scroll',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'invert',
+          icon: 'tool-invert',
+          label: 'Invert',
+          tooltip: 'Invert Colors',
+          commands: 'invertViewport',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'Probe',
+          icon: 'tool-probe',
+          label: 'Probe',
+          tooltip: 'Probe',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Cine',
+          icon: 'tool-cine',
+          label: 'Cine',
+          tooltip: 'Cine',
+          commands: 'toggleCine',
+          evaluate: 'evaluate.cine',
+        }),
+        createButton({
+          id: 'Angle',
+          icon: 'tool-angle',
+          label: 'Angle',
+          tooltip: 'Angle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CobbAngle',
+          icon: 'icon-tool-cobb-angle',
+          label: 'Cobb Angle',
+          tooltip: 'Cobb Angle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Magnify',
+          icon: 'tool-magnify',
+          label: 'Zoom-in',
+          tooltip: 'Zoom-in',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'RectangleROI',
+          icon: 'tool-rectangle',
+          label: 'Rectangle',
+          tooltip: 'Rectangle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CalibrationLine',
+          icon: 'tool-calibration',
+          label: 'Calibration',
+          tooltip: 'Calibration Line',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'TagBrowser',
+          icon: 'dicom-tag-browser',
+          label: 'Dicom Tag Browser',
+          tooltip: 'Dicom Tag Browser',
+          commands: 'openDICOMTagViewer',
+        }),
+        createButton({
+          id: 'AdvancedMagnify',
+          icon: 'icon-tool-loupe',
+          label: 'Magnify Probe',
+          tooltip: 'Magnify Probe',
+          commands: 'toggleActiveDisabledToolbar',
+          evaluate: 'evaluate.cornerstoneTool.toggle.ifStrictlyDisabled',
+        }),
+        createButton({
+          id: 'UltrasoundDirectionalTool',
+          icon: 'icon-tool-ultrasound-bidirectional',
+          label: 'Ultrasound Directional',
+          tooltip: 'Ultrasound Directional',
+          commands: setToolActiveToolbar,
+          evaluate: [
+            'evaluate.cornerstoneTool',
+            {
+              name: 'evaluate.modality.supported',
+              supportedModalities: ['US'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'WindowLevelRegion',
+          icon: 'icon-tool-window-region',
+          label: 'Window Level Region',
+          tooltip: 'Window Level Region',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+];
+
+export default moreTools;

modes/basic-test-mode/src/toolbarButtons.ts

@@ -0,0 +1,253 @@
+// TODO: torn, can either bake this here; or have to create a whole new button type
+// Only ways that you can pass in a custom React component for render :l
+import {
+  // ListMenu,
+  WindowLevelMenuItem,
+} from '@ohif/ui';
+import { defaults, ToolbarService } from '@ohif/core';
+import type { Button } from '@ohif/core/types';
+
+const { windowLevelPresets } = defaults;
+const { createButton } = ToolbarService;
+
+/**
+ *
+ * @param {*} preset - preset number (from above import)
+ * @param {*} title
+ * @param {*} subtitle
+ */
+function _createWwwcPreset(preset, title, subtitle) {
+  return {
+    id: preset.toString(),
+    title,
+    subtitle,
+    commands: [
+      {
+        commandName: 'setWindowLevel',
+        commandOptions: {
+          ...windowLevelPresets[preset],
+        },
+        context: 'CORNERSTONE',
+      },
+    ],
+  };
+}
+
+export const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: ['default', 'mpr', 'SRToolGroup'],
+  },
+};
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MeasurementTools',
+      // group evaluate to determine which item should move to the top
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        createButton({
+          id: 'Length',
+          icon: 'tool-length',
+          label: 'Length',
+          tooltip: 'Length Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'ArrowAnnotate',
+          icon: 'tool-annotate',
+          label: 'Annotation',
+          tooltip: 'Arrow Annotate',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CircleROI',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'PlanarFreehandROI',
+          icon: 'icon-tool-freehand-roi',
+          label: 'Freehand ROI',
+          tooltip: 'Freehand ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'SplineROI',
+          icon: 'icon-tool-spline-roi',
+          label: 'Spline ROI',
+          tooltip: 'Spline ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'LivewireContour',
+          icon: 'icon-tool-livewire',
+          label: 'Livewire tool',
+          tooltip: 'Livewire tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+  {
+    id: 'Zoom',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  // Window Level
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'WindowLevel',
+      primary: createButton({
+        id: 'WindowLevel',
+        icon: 'tool-window-level',
+        label: 'Window Level',
+        tooltip: 'Window Level',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        label: 'W/L Manual',
+        tooltip: 'W/L Presets',
+      },
+      renderer: WindowLevelMenuItem,
+      items: [
+        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
+        _createWwwcPreset(2, 'Lung', '1500 / -600'),
+        _createWwwcPreset(3, 'Liver', '150 / 90'),
+        _createWwwcPreset(4, 'Bone', '2500 / 480'),
+        _createWwwcPreset(5, 'Brain', '80 / 40'),
+      ],
+    },
+  },
+  // Pan...
+  {
+    id: 'Pan',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'MPR',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-mpr',
+      label: 'MPR',
+      commands: [
+        {
+          commandName: 'toggleHangingProtocol',
+          commandOptions: {
+            protocolId: 'mpr',
+          },
+        },
+      ],
+      evaluate: 'evaluate.mpr',
+    },
+  },
+  {
+    id: 'TrackBallRotate',
+    type: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-3d-rotate',
+      label: '3D Rotate',
+      commands: setToolActiveToolbar,
+    },
+  },
+  {
+    id: 'Capture',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-capture',
+      label: 'Capture',
+      commands: 'showDownloadViewportModal',
+      evaluate: [
+        'evaluate.action',
+        {
+          name: 'evaluate.viewport.supported',
+          unsupportedViewportTypes: ['video', 'wholeSlide'],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 4,
+      evaluate: 'evaluate.action',
+      commands: 'setViewportGridLayout',
+    },
+  },
+  {
+    id: 'Crosshairs',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-crosshair',
+      label: 'Crosshairs',
+      commands: {
+        commandName: 'setToolActiveToolbar',
+        commandOptions: {
+          toolGroupIds: ['mpr'],
+        },
+      },
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+];
+
+export default toolbarButtons;

modes/longitudinal/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.ts`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

modes/longitudinal/.webpack/webpack.prod.js

@@ -0,0 +1,53 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkg = require('./../package.json');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+
+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`,
+};
+
+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: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-mode-longitudinal',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      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/[name].css',
+      //   chunkFilename: './dist/[id].css',
+      // }),
+    ],
+  });
+};

modes/longitudinal/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+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.

modes/longitudinal/README.md

@@ -0,0 +1,60 @@
+# Measurement Tracking Mode
+
+
+
+## Introduction
+Measurement tracking mode allows you to:
+
+- Draw annotations and have them shown in the measurement panel
+- Create a report from the tracked measurement and export them as DICOM SR
+- Use already exported DICOM SR to re-hydrate the measurements in the viewer
+
+![preview](https://user-images.githubusercontent.com/7490180/171255703-e6d46da8-8d12-4685-b358-0c8d4d5cb5fe.png)
+
+## Workflow
+
+
+### Status Icon
+Each viewport has a left icon indicating whether the series within the viewport contains:
+
+- tracked measurement OR
+- untracked measurement OR
+- Structured Report OR
+- Locked (uneditable) Structured Report
+
+In the following, we will discuss each category.
+
+![tracked](https://user-images.githubusercontent.com/7490180/171255750-c6903338-c295-4553-b8aa-8cb6a8d63943.png)
+
+### Tracked vs Untracked Measurements
+
+OHIF-v3 implements a workflow for measurement tracking that can be seen below.
+In summary, when you create an annotation, a prompt will be shown whether to start tracking or not. If you start the tracking, the annotation style will change to a solid line, and annotation details get displayed on the measurement panel. On the other hand, if you decline the tracking prompt, the measurement will be considered "temporary," and annotation style remains as a dashed line and not shown on the right panel, and cannot be exported.
+
+Below, you can see different icons that appear for a tracked vs. untracked series in OHIF-v3.
+
+
+![workflow](https://user-images.githubusercontent.com/7490180/171255780-dd249cbf-dd61-4e02-8d46-b91e01d53529.png)
+
+
+### Reading and Writing DICOM SR
+OHIF-v3 provides full support for reading, writing and mapping the DICOM Structured Report (SR) to interactable Cornerstone Tools. When you load an already exported DICOM SR into the viewer, you will be prompted whether to track the measurements for the series or not.
+
+
+![preview](https://user-images.githubusercontent.com/7490180/171255797-6c374780-8e94-4a7f-a125-69b67c18c18c.png)
+
+If you click Yes, DICOM SR measurements gets re-hydrated into the viewer and the series become a tracked series. However, If you say no and later decide to say track the measurements, you can always click on the SR button that will prompt you with the same message again.
+
+
+![restore](https://user-images.githubusercontent.com/7490180/171255813-8d460bd7-e64d-4bce-9467-ad5cf2615c56.png)
+
+The full workflow for saving measurements to SR and loading SR into the viewer is shown below.
+
+![sr-import](https://user-images.githubusercontent.com/7490180/171255826-c308ead6-9dad-4e91-9411-df62658cc839.png)
+
+
+### Loading DICOM SR into an Already Tracked Series
+
+If you have an already tracked series and try to load a DICOM SR measurements, you will be shown the following lock icon. This means that, you can review the DICOM SR measurement, manipulate image and draw "temporary" measurements; however, you cannot edit the DICOM SR measurement.
+
+![locked](https://user-images.githubusercontent.com/7490180/171255842-91b84f91-4e1c-4a20-b4a2-cf9653560c43.png)

modes/longitudinal/babel.config.js

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

modes/longitudinal/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ohif/mode-longitudinal",
+  "version": "3.10.0-beta.111",
+  "description": "Longitudinal Workflow",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/ohif-mode-longitudinal.js",
+  "module": "src/index.ts",
+  "engines": {
+    "node": ">=14",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "ohif-mode"
+  ],
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-rt": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-seg": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.111",
+    "@ohif/extension-default": "3.10.0-beta.111",
+    "@ohif/extension-dicom-pdf": "3.10.0-beta.111",
+    "@ohif/extension-dicom-video": "3.10.0-beta.111",
+    "@ohif/extension-measurement-tracking": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
+  },
+  "devDependencies": {
+    "webpack": "5.94.0",
+    "webpack-merge": "^5.7.3"
+  }
+}

modes/longitudinal/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/longitudinal/src/index.ts

@@ -0,0 +1,253 @@
+import { hotkeys } from '@ohif/core';
+import i18n from 'i18next';
+import { id } from './id';
+import initToolGroups from './initToolGroups';
+import toolbarButtons from './toolbarButtons';
+import moreTools from './moreTools';
+
+// Allow this mode by excluding non-imaging modalities such as SR, SEG
+// Also, SM is not a simple imaging modalities, so exclude it.
+const NON_IMAGE_MODALITIES = ['ECG', 'SEG', 'RTSTRUCT', 'RTPLAN', 'PR'];
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  thumbnailList: '@ohif/extension-default.panelModule.seriesList',
+  wsiSopClassHandler:
+    '@ohif/extension-cornerstone.sopClassHandlerModule.DicomMicroscopySopClassHandler',
+};
+
+const cornerstone = {
+  measurements: '@ohif/extension-cornerstone.panelModule.panelMeasurement',
+  segmentation: '@ohif/extension-cornerstone.panelModule.panelSegmentation',
+};
+
+const tracked = {
+  measurements: '@ohif/extension-measurement-tracking.panelModule.trackedMeasurements',
+  thumbnailList: '@ohif/extension-measurement-tracking.panelModule.seriesList',
+  viewport: '@ohif/extension-measurement-tracking.viewportModule.cornerstone-tracked',
+};
+
+const dicomsr = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-sr.sopClassHandlerModule.dicom-sr',
+  sopClassHandler3D: '@ohif/extension-cornerstone-dicom-sr.sopClassHandlerModule.dicom-sr-3d',
+  viewport: '@ohif/extension-cornerstone-dicom-sr.viewportModule.dicom-sr',
+};
+
+const dicomvideo = {
+  sopClassHandler: '@ohif/extension-dicom-video.sopClassHandlerModule.dicom-video',
+  viewport: '@ohif/extension-dicom-video.viewportModule.dicom-video',
+};
+
+const dicompdf = {
+  sopClassHandler: '@ohif/extension-dicom-pdf.sopClassHandlerModule.dicom-pdf',
+  viewport: '@ohif/extension-dicom-pdf.viewportModule.dicom-pdf',
+};
+
+const dicomSeg = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-seg.sopClassHandlerModule.dicom-seg',
+  viewport: '@ohif/extension-cornerstone-dicom-seg.viewportModule.dicom-seg',
+};
+
+const dicomPmap = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-pmap.sopClassHandlerModule.dicom-pmap',
+  viewport: '@ohif/extension-cornerstone-dicom-pmap.viewportModule.dicom-pmap',
+};
+
+const dicomRT = {
+  viewport: '@ohif/extension-cornerstone-dicom-rt.viewportModule.dicom-rt',
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-rt.sopClassHandlerModule.dicom-rt',
+};
+
+const extensionDependencies = {
+  // Can derive the versions at least process.env.from npm_package_version
+  '@ohif/extension-default': '^3.0.0',
+  '@ohif/extension-cornerstone': '^3.0.0',
+  '@ohif/extension-measurement-tracking': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-sr': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-seg': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-pmap': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-rt': '^3.0.0',
+  '@ohif/extension-dicom-pdf': '^3.0.1',
+  '@ohif/extension-dicom-video': '^3.0.1',
+};
+
+function modeFactory({ modeConfiguration }) {
+  let _activatePanelTriggersSubscriptions = [];
+  return {
+    // TODO: We're using this as a route segment
+    // We should not be.
+    id,
+    routeName: 'viewer',
+    displayName: i18n.t('Modes:Basic Viewer'),
+    /**
+     * Lifecycle hooks
+     */
+    onModeEnter: function ({ servicesManager, extensionManager, commandsManager }: withAppTypes) {
+      const { measurementService, toolbarService, toolGroupService, customizationService } =
+        servicesManager.services;
+
+      measurementService.clearMeasurements();
+
+      // Init Default and SR ToolGroups
+      initToolGroups(extensionManager, toolGroupService, commandsManager);
+
+      toolbarService.addButtons([...toolbarButtons, ...moreTools]);
+      toolbarService.createButtonSection('primary', [
+        'MeasurementTools',
+        'Zoom',
+        'Pan',
+        'TrackballRotate',
+        'WindowLevel',
+        'Capture',
+        'Layout',
+        'Crosshairs',
+        'MoreTools',
+      ]);
+
+      // // ActivatePanel event trigger for when a segmentation or measurement is added.
+      // // Do not force activation so as to respect the state the user may have left the UI in.
+      // _activatePanelTriggersSubscriptions = [
+      //   ...panelService.addActivatePanelTriggers(
+      //     cornerstone.segmentation,
+      //     [
+      //       {
+      //         sourcePubSubService: segmentationService,
+      //         sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED],
+      //       },
+      //     ],
+      //     true
+      //   ),
+      //   ...panelService.addActivatePanelTriggers(
+      //     tracked.measurements,
+      //     [
+      //       {
+      //         sourcePubSubService: measurementService,
+      //         sourceEvents: [
+      //           measurementService.EVENTS.MEASUREMENT_ADDED,
+      //           measurementService.EVENTS.RAW_MEASUREMENT_ADDED,
+      //         ],
+      //       },
+      //     ],
+      //     true
+      //   ),
+      //   true,
+      // ];
+    },
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const {
+        toolGroupService,
+        syncGroupService,
+        segmentationService,
+        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
+      } = servicesManager.services;
+
+      _activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe());
+      _activatePanelTriggersSubscriptions = [];
+
+      uiDialogService.dismissAll();
+      uiModalService.hide();
+      toolGroupService.destroy();
+      syncGroupService.destroy();
+      segmentationService.destroy();
+      cornerstoneViewportService.destroy();
+    },
+    validationTags: {
+      study: [],
+      series: [],
+    },
+
+    isValidMode: function ({ modalities }) {
+      const modalities_list = modalities.split('\\');
+
+      // Exclude non-image modalities
+      return {
+        valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
+          .length,
+        description:
+          'The mode does not support studies that ONLY include the following modalities: SM, ECG, SEG, RTSTRUCT',
+      };
+    },
+    routes: [
+      {
+        path: 'longitudinal',
+        /*init: ({ servicesManager, extensionManager }) => {
+          //defaultViewerRouteInit
+        },*/
+        layoutTemplate: () => {
+          return {
+            id: ohif.layout,
+            props: {
+              leftPanels: [tracked.thumbnailList],
+              leftPanelResizable: true,
+              rightPanels: [cornerstone.segmentation, tracked.measurements],
+              rightPanelClosed: true,
+              rightPanelResizable: true,
+              viewports: [
+                {
+                  namespace: tracked.viewport,
+                  displaySetsToDisplay: [
+                    ohif.sopClassHandler,
+                    dicomvideo.sopClassHandler,
+                    dicomsr.sopClassHandler3D,
+                    ohif.wsiSopClassHandler,
+                  ],
+                },
+                {
+                  namespace: dicomsr.viewport,
+                  displaySetsToDisplay: [dicomsr.sopClassHandler],
+                },
+                {
+                  namespace: dicompdf.viewport,
+                  displaySetsToDisplay: [dicompdf.sopClassHandler],
+                },
+                {
+                  namespace: dicomSeg.viewport,
+                  displaySetsToDisplay: [dicomSeg.sopClassHandler],
+                },
+                {
+                  namespace: dicomPmap.viewport,
+                  displaySetsToDisplay: [dicomPmap.sopClassHandler],
+                },
+                {
+                  namespace: dicomRT.viewport,
+                  displaySetsToDisplay: [dicomRT.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    extensions: extensionDependencies,
+    // Default protocol gets self-registered by default in the init
+    hangingProtocol: 'default',
+    // Order is important in sop class handlers when two handlers both use
+    // the same sop class under different situations.  In that case, the more
+    // general handler needs to come last.  For this case, the dicomvideo must
+    // come first to remove video transfer syntax before ohif uses images
+    sopClassHandlers: [
+      dicomvideo.sopClassHandler,
+      dicomSeg.sopClassHandler,
+      dicomPmap.sopClassHandler,
+      ohif.sopClassHandler,
+      ohif.wsiSopClassHandler,
+      dicompdf.sopClassHandler,
+      dicomsr.sopClassHandler3D,
+      dicomsr.sopClassHandler,
+      dicomRT.sopClassHandler,
+    ],
+    ...modeConfiguration,
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;
+export { initToolGroups, moreTools, toolbarButtons };

modes/longitudinal/src/initToolGroups.js

@@ -0,0 +1,322 @@
+import { toolNames as SRToolNames } from '@ohif/extension-cornerstone-dicom-sr';
+
+const colours = {
+  'viewport-0': 'rgb(200, 0, 0)',
+  'viewport-1': 'rgb(200, 200, 0)',
+  'viewport-2': 'rgb(0, 200, 0)',
+};
+
+const colorsByOrientation = {
+  axial: 'rgb(200, 0, 0)',
+  sagittal: 'rgb(200, 200, 0)',
+  coronal: 'rgb(0, 200, 0)',
+};
+
+function initDefaultToolGroup(
+  extensionManager,
+  toolGroupService,
+  commandsManager,
+  toolGroupId
+) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: toolNames.Length },
+      {
+        toolName: toolNames.ArrowAnnotate,
+        configuration: {
+          getTextCallback: (callback, eventDetails) => {
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              eventDetails,
+            });
+          },
+          changeTextCallback: (data, eventDetails, callback) => {
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              data,
+              eventDetails,
+            });
+          },
+        },
+      },
+      { toolName: toolNames.Bidirectional },
+      { toolName: toolNames.DragProbe },
+      { toolName: toolNames.Probe },
+      { toolName: toolNames.EllipticalROI },
+      { toolName: toolNames.CircleROI },
+      { toolName: toolNames.RectangleROI },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Angle },
+      { toolName: toolNames.CobbAngle },
+      { toolName: toolNames.Magnify },
+      { toolName: toolNames.CalibrationLine },
+      {
+        toolName: toolNames.PlanarFreehandContourSegmentation,
+        configuration: {
+          displayOnePointAsCrosshairs: true,
+        },
+      },
+      { toolName: toolNames.UltrasoundDirectional },
+      { toolName: toolNames.PlanarFreehandROI },
+      { toolName: toolNames.SplineROI },
+      { toolName: toolNames.LivewireContour },
+      { toolName: toolNames.WindowLevelRegion },
+    ],
+    enabled: [
+      { toolName: toolNames.ImageOverlayViewer },
+      { toolName: toolNames.ReferenceLines },
+      {
+        toolName: SRToolNames.SRSCOORD3DPoint,
+      },
+    ],
+    disabled: [
+      {
+        toolName: toolNames.AdvancedMagnify,
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+}
+
+function initSRToolGroup(extensionManager, toolGroupService) {
+  const SRUtilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone-dicom-sr.utilityModule.tools'
+  );
+
+  if (!SRUtilityModule) {
+    return;
+  }
+
+  const CS3DUtilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames: SRToolNames } = SRUtilityModule.exports;
+  const { toolNames, Enums } = CS3DUtilityModule.exports;
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [
+          {
+            mouseButton: Enums.MouseBindings.Primary,
+          },
+        ],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [
+          {
+            mouseButton: Enums.MouseBindings.Auxiliary,
+          },
+        ],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [
+          {
+            mouseButton: Enums.MouseBindings.Secondary,
+          },
+        ],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: SRToolNames.SRLength },
+      { toolName: SRToolNames.SRArrowAnnotate },
+      { toolName: SRToolNames.SRBidirectional },
+      { toolName: SRToolNames.SREllipticalROI },
+      { toolName: SRToolNames.SRCircleROI },
+      { toolName: SRToolNames.SRPlanarFreehandROI },
+      { toolName: SRToolNames.SRRectangleROI },
+      { toolName: toolNames.WindowLevelRegion },
+    ],
+    enabled: [
+      {
+        toolName: SRToolNames.DICOMSRDisplay,
+      },
+    ],
+    // disabled
+  };
+
+  const toolGroupId = 'SRToolGroup';
+  toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+}
+
+function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const serviceManager = extensionManager._servicesManager;
+  const { cornerstoneViewportService } = serviceManager.services;
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: toolNames.Length },
+      {
+        toolName: toolNames.ArrowAnnotate,
+        configuration: {
+          getTextCallback: (callback, eventDetails) => {
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              eventDetails,
+            });
+          },
+          changeTextCallback: (data, eventDetails, callback) => {
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              data,
+              eventDetails,
+            });
+          },
+        },
+      },
+      { toolName: toolNames.Bidirectional },
+      { toolName: toolNames.DragProbe },
+      { toolName: toolNames.Probe },
+      { toolName: toolNames.EllipticalROI },
+      { toolName: toolNames.CircleROI },
+      { toolName: toolNames.RectangleROI },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Angle },
+      { toolName: toolNames.CobbAngle },
+      { toolName: toolNames.PlanarFreehandROI },
+      { toolName: toolNames.SplineROI },
+      { toolName: toolNames.LivewireContour },
+      { toolName: toolNames.WindowLevelRegion },
+      {
+        toolName: toolNames.PlanarFreehandContourSegmentation,
+        configuration: {
+          displayOnePointAsCrosshairs: true,
+        },
+      },
+    ],
+    disabled: [
+      {
+        toolName: toolNames.Crosshairs,
+        configuration: {
+          viewportIndicators: true,
+          viewportIndicatorsConfig: {
+            circleRadius: 5,
+            xOffset: 0.95,
+            yOffset: 0.05,
+          },
+          disableOnPassive: true,
+          autoPan: {
+            enabled: false,
+            panSize: 10,
+          },
+          getReferenceLineColor: viewportId => {
+            const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+            const viewportOptions = viewportInfo?.viewportOptions;
+            if (viewportOptions) {
+              return (
+                colours[viewportOptions.id] ||
+                colorsByOrientation[viewportOptions.orientation] ||
+                '#0c0'
+              );
+            } else {
+              console.warn('missing viewport?', viewportId);
+              return '#0c0';
+            }
+          },
+        },
+      },
+      {
+        toolName: toolNames.AdvancedMagnify,
+      },
+      { toolName: toolNames.ReferenceLines },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools('mpr', tools);
+}
+function initVolume3DToolGroup(extensionManager, toolGroupService) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.TrackballRotateTool,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools('volume3d', tools);
+}
+
+function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+  initDefaultToolGroup(
+    extensionManager,
+    toolGroupService,
+    commandsManager,
+    'default'
+  );
+  initSRToolGroup(extensionManager, toolGroupService);
+  initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
+  initVolume3DToolGroup(extensionManager, toolGroupService);
+}
+
+export default initToolGroups;

modes/longitudinal/src/moreTools.ts

@@ -0,0 +1,270 @@
+import type { RunCommand } from '@ohif/core/types';
+import { EVENTS } from '@cornerstonejs/core';
+import { ToolbarService, ViewportGridService } from '@ohif/core';
+import { setToolActiveToolbar } from './toolbarButtons';
+const { createButton } = ToolbarService;
+
+const ReferenceLinesListeners: RunCommand = [
+  {
+    commandName: 'setSourceViewportForReferenceLinesTool',
+    context: 'CORNERSTONE',
+  },
+];
+
+const moreTools = [
+  {
+    id: 'MoreTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MoreTools',
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Reset',
+        icon: 'tool-reset',
+        tooltip: 'Reset View',
+        label: 'Reset',
+        commands: 'resetViewport',
+        evaluate: 'evaluate.action',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        label: '',
+        tooltip: 'More Tools',
+      },
+      items: [
+        createButton({
+          id: 'Reset',
+          icon: 'tool-reset',
+          label: 'Reset View',
+          tooltip: 'Reset View',
+          commands: 'resetViewport',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'rotate-right',
+          icon: 'tool-rotate-right',
+          label: 'Rotate Right',
+          tooltip: 'Rotate +90',
+          commands: 'rotateViewportCW',
+          evaluate: [
+            'evaluate.action',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'flipHorizontal',
+          icon: 'tool-flip-horizontal',
+          label: 'Flip Horizontal',
+          tooltip: 'Flip Horizontally',
+          commands: 'flipViewportHorizontal',
+          evaluate: [
+            'evaluate.viewportProperties.toggle',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video', 'volume3d'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'ImageSliceSync',
+          icon: 'link',
+          label: 'Image Slice Sync',
+          tooltip: 'Enable position synchronization on stack viewports',
+          commands: {
+            commandName: 'toggleSynchronizer',
+            commandOptions: {
+              type: 'imageSlice',
+            },
+          },
+          listeners: {
+            [EVENTS.VIEWPORT_NEW_IMAGE_SET]: {
+              commandName: 'toggleImageSliceSync',
+              commandOptions: { toggledState: true },
+            },
+          },
+          evaluate: [
+            'evaluate.cornerstone.synchronizer',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video', 'volume3d'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'ReferenceLines',
+          icon: 'tool-referenceLines',
+          label: 'Reference Lines',
+          tooltip: 'Show Reference Lines',
+          commands: 'toggleEnabledDisabledToolbar',
+          listeners: {
+            [ViewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
+            [ViewportGridService.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners,
+          },
+          evaluate: [
+            'evaluate.cornerstoneTool.toggle',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'ImageOverlayViewer',
+          icon: 'toggle-dicom-overlay',
+          label: 'Image Overlay',
+          tooltip: 'Toggle Image Overlay',
+          commands: 'toggleEnabledDisabledToolbar',
+          evaluate: [
+            'evaluate.cornerstoneTool.toggle',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'StackScroll',
+          icon: 'tool-stack-scroll',
+          label: 'Stack Scroll',
+          tooltip: 'Stack Scroll',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'invert',
+          icon: 'tool-invert',
+          label: 'Invert',
+          tooltip: 'Invert Colors',
+          commands: 'invertViewport',
+          evaluate: [
+            'evaluate.viewportProperties.toggle',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'Probe',
+          icon: 'tool-probe',
+          label: 'Probe',
+          tooltip: 'Probe',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Cine',
+          icon: 'tool-cine',
+          label: 'Cine',
+          tooltip: 'Cine',
+          commands: 'toggleCine',
+          evaluate: [
+            'evaluate.cine',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['volume3d'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'Angle',
+          icon: 'tool-angle',
+          label: 'Angle',
+          tooltip: 'Angle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CobbAngle',
+          icon: 'icon-tool-cobb-angle',
+          label: 'Cobb Angle',
+          tooltip: 'Cobb Angle',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Magnify',
+          icon: 'tool-magnify',
+          label: 'Zoom-in',
+          tooltip: 'Zoom-in',
+          commands: setToolActiveToolbar,
+          evaluate: [
+            'evaluate.cornerstoneTool',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'CalibrationLine',
+          icon: 'tool-calibration',
+          label: 'Calibration',
+          tooltip: 'Calibration Line',
+          commands: setToolActiveToolbar,
+          evaluate: [
+            'evaluate.cornerstoneTool',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'TagBrowser',
+          icon: 'dicom-tag-browser',
+          label: 'Dicom Tag Browser',
+          tooltip: 'Dicom Tag Browser',
+          commands: 'openDICOMTagViewer',
+        }),
+        createButton({
+          id: 'AdvancedMagnify',
+          icon: 'icon-tool-loupe',
+          label: 'Magnify Probe',
+          tooltip: 'Magnify Probe',
+          commands: 'toggleActiveDisabledToolbar',
+          evaluate: [
+            'evaluate.cornerstoneTool.toggle.ifStrictlyDisabled',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'UltrasoundDirectionalTool',
+          icon: 'icon-tool-ultrasound-bidirectional',
+          label: 'Ultrasound Directional',
+          tooltip: 'Ultrasound Directional',
+          commands: setToolActiveToolbar,
+          evaluate: [
+            'evaluate.cornerstoneTool',
+            {
+              name: 'evaluate.modality.supported',
+              supportedModalities: ['US'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'WindowLevelRegion',
+          icon: 'icon-tool-window-region',
+          label: 'Window Level Region',
+          tooltip: 'Window Level Region',
+          commands: setToolActiveToolbar,
+          evaluate: [
+            'evaluate.cornerstoneTool',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['video'],
+            },
+          ],
+        }),
+      ],
+    },
+  },
+];
+
+export default moreTools;

modes/longitudinal/src/toolbarButtons.ts

@@ -0,0 +1,236 @@
+// TODO: torn, can either bake this here; or have to create a whole new button type
+// Only ways that you can pass in a custom React component for render :l
+import { ToolbarService } from '@ohif/core';
+import type { Button } from '@ohif/core/types';
+
+const { createButton } = ToolbarService;
+
+export const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: ['default', 'mpr', 'SRToolGroup', 'volume3d'],
+  },
+};
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MeasurementTools',
+      // group evaluate to determine which item should move to the top
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        createButton({
+          id: 'Length',
+          icon: 'tool-length',
+          label: 'Length',
+          tooltip: 'Length Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'ArrowAnnotate',
+          icon: 'tool-annotate',
+          label: 'Annotation',
+          tooltip: 'Arrow Annotate',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'RectangleROI',
+          icon: 'tool-rectangle',
+          label: 'Rectangle',
+          tooltip: 'Rectangle ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'CircleROI',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'PlanarFreehandROI',
+          icon: 'icon-tool-freehand-roi',
+          label: 'Freehand ROI',
+          tooltip: 'Freehand ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'SplineROI',
+          icon: 'icon-tool-spline-roi',
+          label: 'Spline ROI',
+          tooltip: 'Spline ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'LivewireContour',
+          icon: 'icon-tool-livewire',
+          label: 'Livewire tool',
+          tooltip: 'Livewire tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+  {
+    id: 'Zoom',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  // Window Level
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-window-level',
+      label: 'Window Level',
+      commands: setToolActiveToolbar,
+      evaluate: [
+        'evaluate.cornerstoneTool',
+        {
+          name: 'evaluate.viewport.supported',
+          unsupportedViewportTypes: ['wholeSlide'],
+        },
+      ],
+    },
+  },
+  // Pan...
+  {
+    id: 'Pan',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'TrackballRotate',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-3d-rotate',
+      label: '3D Rotate',
+      commands: setToolActiveToolbar,
+      evaluate: {
+        name: 'evaluate.cornerstoneTool',
+        disabledText: 'Select a 3D viewport to enable this tool',
+      },
+    },
+  },
+  {
+    id: 'Capture',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-capture',
+      label: 'Capture',
+      commands: 'showDownloadViewportModal',
+      evaluate: [
+        'evaluate.action',
+        {
+          name: 'evaluate.viewport.supported',
+          unsupportedViewportTypes: ['video', 'wholeSlide'],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 4,
+      evaluate: 'evaluate.action',
+    },
+  },
+  {
+    id: 'Crosshairs',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-crosshair',
+      label: 'Crosshairs',
+      commands: {
+        commandName: 'setToolActiveToolbar',
+        commandOptions: {
+          toolGroupIds: ['mpr'],
+        },
+      },
+      evaluate: {
+        name: 'evaluate.cornerstoneTool',
+        disabledText: 'Select an MPR viewport to enable this tool',
+      },
+    },
+  },
+  // {
+  //   id: 'Undo',
+  //   uiType: 'ohif.toolButton',
+  //   props: {
+  //     type: 'tool',
+  //     icon: 'prev-arrow',
+  //     label: 'Undo',
+  //     commands: {
+  //       commandName: 'undo',
+  //     },
+  //     evaluate: 'evaluate.action',
+  //   },
+  // },
+  // {
+  //   id: 'Redo',
+  //   uiType: 'ohif.toolButton',
+  //   props: {
+  //     type: 'tool',
+  //     icon: 'next-arrow',
+  //     label: 'Redo',
+  //     commands: {
+  //       commandName: 'redo',
+  //     },
+  //     evaluate: 'evaluate.action',
+  //   },
+  // },
+];
+
+export default toolbarButtons;

modes/microscopy/.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

modes/microscopy/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "proseWrap": "always",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

modes/microscopy/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.js`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

modes/microscopy/.webpack/webpack.prod.js

@@ -0,0 +1,53 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkg = require('./../package.json');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+
+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.tsx`,
+};
+
+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: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-mode-microscopy',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      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/[name].css',
+      //   chunkFilename: './dist/[id].css',
+      // }),
+    ],
+  });
+};

modes/microscopy/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 microscopy (26860200+md-prog@users.noreply.github.com)
+
+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.

modes/microscopy/README.md

@@ -0,0 +1,13 @@
+# OHIF mode for microscopy
+Mode for *DICOM VL Whole Slide Microscopy Image*.
+This mode uses [OHIF extension for microscopy](../../extensions/dicom-microscopy/).
+
+
+## Acknowledgements
+
+- [DICOM Microscopy Viewer](https://github.com/ImagingDataCommons/dicom-microscopy-viewer) is a Vanilla JS library for web-based visualization of DICOM VL Whole Slide Microscopy Image datasets and derived information.
+- [SLIM Viewer](https://github.com/imagingdatacommons/slim) is a single-page application for interactive visualization and annotation of digital whole slide microscopy images and derived image analysis results in standard DICOM format. The application is based on the dicom-microscopy-viewer JavaScript library and runs fully client side without any custom server components.
+
+
+## License
+MIT

modes/microscopy/babel.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+  plugins: ['@babel/plugin-proposal-class-properties'],
+  env: {
+    test: {
+      presets: [
+        [
+          // TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
+          '@babel/preset-env',
+          {
+            modules: 'commonjs',
+            debug: false,
+          },
+          '@babel/preset-typescript',
+        ],
+        '@babel/preset-react',
+      ],
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-transform-regenerator',
+        '@babel/plugin-transform-runtime',
+      ],
+    },
+    production: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+    development: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+  },
+};

modes/microscopy/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@ohif/mode-microscopy",
+  "version": "3.10.0-beta.111",
+  "description": "OHIF mode for DICOM microscopy",
+  "author": "OHIF",
+  "license": "MIT",
+  "main": "dist/ohif-mode-microscopy.umd.js",
+  "files": [
+    "dist/**",
+    "public/**",
+    "README.md"
+  ],
+  "repository": "OHIF/Viewers",
+  "keywords": [
+    "ohif-mode"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "src/index.tsx",
+  "engines": {
+    "node": ">=14",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-dicom-microscopy": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
+  }
+}

modes/microscopy/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/microscopy/src/index.tsx

@@ -0,0 +1,136 @@
+import { hotkeys } from '@ohif/core';
+import i18n from 'i18next';
+
+import { id } from './id';
+import toolbarButtons from './toolbarButtons';
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  hangingProtocols: '@ohif/extension-default.hangingProtocolModule.default',
+  leftPanel: '@ohif/extension-default.panelModule.seriesList',
+  rightPanel: '@ohif/extension-dicom-microscopy.panelModule.measure',
+};
+
+export const cornerstone = {
+  viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
+};
+
+const dicomvideo = {
+  sopClassHandler: '@ohif/extension-dicom-video.sopClassHandlerModule.dicom-video',
+  viewport: '@ohif/extension-dicom-video.viewportModule.dicom-video',
+};
+
+const dicompdf = {
+  sopClassHandler: '@ohif/extension-dicom-pdf.sopClassHandlerModule.dicom-pdf',
+  viewport: '@ohif/extension-dicom-pdf.viewportModule.dicom-pdf',
+};
+
+const extensionDependencies = {
+  // Can derive the versions at least process.env.from npm_package_version
+  '@ohif/extension-default': '^3.0.0',
+  '@ohif/extension-cornerstone': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-sr': '^3.0.0',
+  '@ohif/extension-dicom-pdf': '^3.0.1',
+  '@ohif/extension-dicom-video': '^3.0.1',
+  '@ohif/extension-dicom-microscopy': '^3.0.0',
+};
+
+function modeFactory({ modeConfiguration }) {
+  return {
+    // TODO: We're using this as a route segment
+    // We should not be.
+    id,
+    routeName: 'microscopy',
+    displayName: i18n.t('Modes:Microscopy'),
+
+    /**
+     * Lifecycle hooks
+     */
+    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
+      const { toolbarService } = servicesManager.services;
+
+      toolbarService.addButtons(toolbarButtons);
+      toolbarService.createButtonSection('primary', ['MeasurementTools', 'dragPan', 'TagBrowser']);
+    },
+
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const { toolbarService, uiDialogService, uiModalService } = servicesManager.services;
+
+      uiDialogService.dismissAll();
+      uiModalService.hide();
+      toolbarService.reset();
+    },
+
+    validationTags: {
+      study: [],
+      series: [],
+    },
+
+    isValidMode: ({ modalities }) => {
+      const modalities_list = modalities.split('\\');
+
+      return {
+        valid: modalities_list.includes('SM'),
+        description: 'Microscopy mode only supports the SM modality',
+      };
+    },
+
+    routes: [
+      {
+        path: 'microscopy',
+        /*init: ({ servicesManager, extensionManager }) => {
+          //defaultViewerRouteInit
+        },*/
+        layoutTemplate: ({ location, servicesManager }) => {
+          return {
+            id: ohif.layout,
+            props: {
+              leftPanels: [ohif.leftPanel],
+              leftPanelResizable: true,
+              leftPanelClosed: true, // we have problem with rendering thumbnails for microscopy images
+              rightPanelClosed: true, // we do not have the save microscopy measurements yet
+              rightPanels: [ohif.rightPanel],
+              rightPanelResizable: true,
+              viewports: [
+                {
+                  namespace: '@ohif/extension-dicom-microscopy.viewportModule.microscopy-dicom',
+                  displaySetsToDisplay: [
+                    // Share the sop class handler with cornerstone version of it
+                    '@ohif/extension-cornerstone.sopClassHandlerModule.DicomMicroscopySopClassHandler',
+                    '@ohif/extension-dicom-microscopy.sopClassHandlerModule.DicomMicroscopySRSopClassHandler',
+                  ],
+                },
+                {
+                  namespace: dicomvideo.viewport,
+                  displaySetsToDisplay: [dicomvideo.sopClassHandler],
+                },
+                {
+                  namespace: dicompdf.viewport,
+                  displaySetsToDisplay: [dicompdf.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    extensions: extensionDependencies,
+    hangingProtocol: 'default',
+    sopClassHandlers: [
+      '@ohif/extension-cornerstone.sopClassHandlerModule.DicomMicroscopySopClassHandler',
+      '@ohif/extension-dicom-microscopy.sopClassHandlerModule.DicomMicroscopySRSopClassHandler',
+      dicomvideo.sopClassHandler,
+      dicompdf.sopClassHandler,
+    ],
+    ...modeConfiguration,
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;

modes/microscopy/src/toolbarButtons.js

@@ -0,0 +1,164 @@
+import { ToolbarService } from '@ohif/core';
+
+const toolbarButtons = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MeasurementTools',
+      // group evaluate to determine which item should move to the top
+      evaluate: 'evaluate.group.promoteToPrimary',
+      primary: ToolbarService.createButton({
+        id: 'line',
+        icon: 'tool-length',
+        label: 'Line',
+        tooltip: 'Line',
+        commands: [
+          {
+            commandName: 'setToolActive',
+            commandOptions: { toolName: 'line' },
+            context: 'MICROSCOPY',
+          },
+        ],
+        evaluate: 'evaluate.microscopyTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        ToolbarService.createButton({
+          id: 'line',
+          icon: 'tool-length',
+          label: 'Line',
+          tooltip: 'Line',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'line' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'point',
+          icon: 'tool-point',
+          label: 'Point',
+          tooltip: 'Point Tool',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'point' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        // Point Tool was previously defined
+        ToolbarService.createButton({
+          id: 'polygon',
+          icon: 'tool-polygon',
+          label: 'Polygon',
+          tooltip: 'Polygon Tool',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'polygon' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'circle',
+          icon: 'tool-circle',
+          label: 'Circle',
+          tooltip: 'Circle Tool',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'circle' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'box',
+          icon: 'tool-rectangle',
+          label: 'Box',
+          tooltip: 'Box Tool',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'box' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'freehandpolygon',
+          icon: 'tool-freehand-polygon',
+          label: 'Freehand Polygon',
+          tooltip: 'Freehand Polygon Tool',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'freehandpolygon' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+        ToolbarService.createButton({
+          id: 'freehandline',
+          icon: 'tool-freehand-line',
+          label: 'Freehand Line',
+          tooltip: 'Freehand Line Tool',
+          commands: [
+            {
+              commandName: 'setToolActive',
+              commandOptions: { toolName: 'freehandline' },
+              context: 'MICROSCOPY',
+            },
+          ],
+          evaluate: 'evaluate.microscopyTool',
+        }),
+      ],
+    },
+  },
+  {
+    id: 'dragPan',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: [
+        {
+          commandName: 'setToolActive',
+          commandOptions: { toolName: 'dragPan' },
+          context: 'MICROSCOPY',
+        },
+      ],
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'TagBrowser',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'dicom-tag-browser',
+      label: 'Dicom Tag Browser',
+      commands: [
+        {
+          commandName: 'openDICOMTagViewer',
+        },
+      ],
+      evaluate: 'evaluate.action',
+    },
+  },
+];
+
+export default toolbarButtons;

modes/preclinical-4d/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.tsx`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

modes/preclinical-4d/.webpack/webpack.prod.js

@@ -0,0 +1,53 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkg = require('./../package.json');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+
+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.tsx`,
+};
+
+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: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-mode-preclinical-4d',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      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/[name].css',
+      //   chunkFilename: './dist/[id].css',
+      // }),
+    ],
+  });
+};

modes/preclinical-4d/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 4d ()
+
+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.

modes/preclinical-4d/README.md

@@ -0,0 +1,7 @@
+# 4d 
+## Description 
+ 
+## Author 
+OHIF 
+## License 
+MIT

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

@@ -0,0 +1,43 @@
+module.exports = {
+  plugins: ['@babel/plugin-proposal-class-properties'],
+  env: {
+    test: {
+      presets: [
+        [
+          // TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
+          '@babel/preset-env',
+          {
+            modules: 'commonjs',
+            debug: false,
+          },
+          '@babel/preset-typescript',
+        ],
+        '@babel/preset-react',
+      ],
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-transform-regenerator',
+        '@babel/plugin-transform-runtime',
+      ],
+    },
+    production: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+    development: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+  },
+};

modes/preclinical-4d/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@ohif/mode-preclinical-4d",
+  "version": "3.10.0-beta.111",
+  "description": "4D Workflow",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/index.umd.js",
+  "module": "src/index.tsx",
+  "engines": {
+    "node": ">=14",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist/**",
+    "public/**",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "ohif-mode"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-seg": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dynamic-volume": "3.10.0-beta.111",
+    "@ohif/extension-default": "3.10.0-beta.111",
+    "@ohif/extension-tmtv": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13"
+  },
+  "devDependencies": {
+    "webpack": "5.94.0",
+    "webpack-merge": "^5.7.3"
+  }
+}

modes/preclinical-4d/src/getWorkflowSettings.ts

@@ -0,0 +1,103 @@
+const dynamicVolume = {
+  sopClassHandler:
+    '@ohif/extension-cornerstone-dynamic-volume.sopClassHandlerModule.dynamic-volume',
+  leftPanel: '@ohif/extension-cornerstone-dynamic-volume.panelModule.dynamic-volume',
+  segmentation: '@ohif/extension-cornerstone-dynamic-volume.panelModule.dynamic-segmentation',
+};
+
+const cornerstone = {
+  segmentation: '@ohif/extension-cornerstone.panelModule.panelSegmentationNoHeader',
+  activeViewportWindowLevel: '@ohif/extension-cornerstone.panelModule.activeViewportWindowLevel',
+};
+
+const defaultButtons = {
+  buttonSection: 'primary',
+  buttons: ['MeasurementTools', 'Zoom', 'WindowLevel', 'Crosshairs', 'Pan'],
+};
+
+const defaultLeftPanel = [[dynamicVolume.leftPanel, cornerstone.activeViewportWindowLevel]];
+
+const defaultLayout = {
+  panels: {
+    left: defaultLeftPanel,
+    right: [],
+  },
+};
+
+function getWorkflowSettings({ servicesManager }) {
+  return {
+    steps: [
+      {
+        id: 'dataPreparation',
+        name: 'Data Preparation',
+        layout: {
+          panels: {
+            left: defaultLeftPanel,
+          },
+        },
+        toolbarButtons: defaultButtons,
+        hangingProtocol: {
+          protocolId: 'default4D',
+          stageId: 'dataPreparation',
+        },
+        info: 'In the Data Preparation step, you can visualize the dynamic PT volume data in three orthogonal views: axial, sagittal, and coronal. Use the left panel controls to adjust the visualization settings, such as playback speed, or navigate between different frames. This step allows you to assess the quality of the PT data and prepare for further analysis or registration with other modalities.',
+      },
+      {
+        id: 'registration',
+        name: 'Registration',
+        layout: defaultLayout,
+        toolbarButtons: defaultButtons,
+        hangingProtocol: {
+          protocolId: 'default4D',
+          stageId: 'registration',
+        },
+        info: 'The Registration step provides a comprehensive view of the CT, PT, and fused CT-PT volume data in multiple orientations. The fusion viewports display the CT and PT volumes overlaid, allowing you to visually assess the alignment and registration between the two modalities. The individual CT and PT viewports are also available for side-by-side comparison. This step is crucial for ensuring proper registration before proceeding with further analysis or quantification.',
+      },
+      {
+        id: 'roiQuantification',
+        name: 'ROI Quantification',
+        layout: {
+          panels: {
+            left: defaultLeftPanel,
+            right: [[dynamicVolume.segmentation]],
+          },
+          options: {
+            leftPanelClosed: false,
+            rightPanelClosed: false,
+          },
+        },
+        toolbarButtons: [
+          defaultButtons,
+          {
+            buttonSection: 'dynamic-toolbox',
+            buttons: ['BrushTools', 'RectangleROIStartEndThreshold'],
+          },
+        ],
+        hangingProtocol: {
+          protocolId: 'default4D',
+          stageId: 'roiQuantification',
+        },
+        info: 'The ROI quantification step allows you to define regions of interest (ROIs) with labelmap segmentations, on the fused CT-PT volume data using the labelmap tools. The left panel provides controls for adjusting the dynamic volume visualization, while the right panel offers tools for segmentation, editing, and exporting the ROI data. This step enables you to quantify the uptake or other measures within the defined ROIs for further analysis.',
+      },
+      {
+        id: 'kineticAnalysis',
+        name: 'Kinetic Analysis',
+        layout: defaultLayout,
+        toolbarButtons: defaultButtons,
+        hangingProtocol: {
+          protocolId: 'default4D',
+          stageId: 'kineticAnalysis',
+        },
+        onEnter: [
+          {
+            commandName: 'updateSegmentationsChartDisplaySet',
+            options: { servicesManager },
+          },
+        ],
+        info: 'The Kinetic Analysis step provides a comprehensive view for visualizing and analyzing the dynamic data derived from the ROI segmentations. The fusion viewports display the combined CT-PT volume data, while a dedicated viewport shows a series chart representing the data over time. This step allows you to explore the temporal dynamics of the uptake or other kinetic measures within the defined regions of interest, enabling further quantitative analysis and modeling.',
+      },
+    ],
+  };
+}
+
+export { getWorkflowSettings as default };

modes/preclinical-4d/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/preclinical-4d/src/index.tsx

@@ -0,0 +1,179 @@
+import { id } from './id';
+import { hotkeys } from '@ohif/core';
+import initWorkflowSteps from './initWorkflowSteps';
+import initToolGroups from './initToolGroups';
+import toolbarButtons from './toolbarButtons';
+import segmentationButtons from './segmentationButtons';
+
+const extensionDependencies = {
+  '@ohif/extension-default': '3.7.0-beta.76',
+  '@ohif/extension-cornerstone': '3.7.0-beta.76',
+  '@ohif/extension-cornerstone-dynamic-volume': '3.7.0-beta.76',
+  '@ohif/extension-cornerstone-dicom-seg': '3.7.0-beta.76',
+  '@ohif/extension-tmtv': '3.7.0-beta.76',
+};
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  defaultSopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  chartSopClassHandler: '@ohif/extension-default.sopClassHandlerModule.chart',
+  hangingProtocol: '@ohif/extension-default.hangingProtocolModule.default',
+  leftPanel: '@ohif/extension-default.panelModule.seriesList',
+  chartViewport: '@ohif/extension-default.viewportModule.chartViewport',
+};
+
+const dynamicVolume = {
+  leftPanel: '@ohif/extension-cornerstone-dynamic-volume.panelModule.dynamic-volume',
+};
+
+const cornerstone = {
+  viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
+  activeViewportWindowLevel: '@ohif/extension-cornerstone.panelModule.activeViewportWindowLevel',
+};
+
+function modeFactory({ modeConfiguration }) {
+  return {
+    id,
+    routeName: 'dynamic-volume',
+    displayName: 'Preclinical 4D',
+    onModeEnter: function ({ servicesManager, extensionManager, commandsManager }: withAppTypes) {
+      const {
+        measurementService,
+        toolbarService,
+        cineService,
+        cornerstoneViewportService,
+        toolGroupService,
+        customizationService,
+        viewportGridService,
+      } = servicesManager.services;
+
+      const utilityModule = extensionManager.getModuleEntry(
+        '@ohif/extension-cornerstone.utilityModule.tools'
+      );
+
+      const { toolNames, Enums } = utilityModule.exports;
+
+      measurementService.clearMeasurements();
+      initToolGroups({ toolNames, Enums, toolGroupService, commandsManager, servicesManager });
+
+      toolbarService.addButtons([...toolbarButtons, ...segmentationButtons]);
+      toolbarService.createButtonSection('secondary', ['ProgressDropdown']);
+
+      // the primary button section is created in the workflow steps
+      // specific to the step
+      customizationService.setCustomizations({
+        'panelSegmentation.tableMode': {
+          $set: 'expanded',
+        },
+        'panelSegmentation.onSegmentationAdd': {
+          $set: () => {
+            commandsManager.run('createNewLabelMapForDynamicVolume');
+          },
+        },
+        'panelSegmentation.showAddSegment': {
+          $set: false,
+        },
+      });
+
+      // Auto play the clip initially when the volumes are loaded
+      const { unsubscribe } = cornerstoneViewportService.subscribe(
+        cornerstoneViewportService.EVENTS.VIEWPORT_VOLUMES_CHANGED,
+        () => {
+          const viewportId = viewportGridService.getActiveViewportId();
+          const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+          cineService.playClip(csViewport.element, { viewportId });
+          // cineService.setIsCineEnabled(true);
+
+          unsubscribe();
+        }
+      );
+    },
+    onSetupRouteComplete: ({ servicesManager }: withAppTypes) => {
+      // This needs to run after hanging protocol matching process because
+      // it may change the protocol/stage based on workflow stage settings
+      initWorkflowSteps({ servicesManager });
+    },
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const {
+        toolGroupService,
+        syncGroupService,
+        segmentationService,
+        cornerstoneViewportService,
+      } = servicesManager.services;
+
+      toolGroupService.destroy();
+      syncGroupService.destroy();
+      segmentationService.destroy();
+      cornerstoneViewportService.destroy();
+    },
+    get validationTags() {
+      return {
+        study: [],
+        series: [],
+      };
+    },
+    isValidMode: ({ modalities, study }) => {
+      // Todo: we need to find a better way to validate the mode
+      return {
+        valid: study.mrn === 'M1',
+        description: 'This mode is only available for 4D PET/CT studies.',
+      };
+    },
+
+    /**
+     * Mode Routes are used to define the mode's behavior. A list of Mode Route
+     * that includes the mode's path and the layout to be used. The layout will
+     * include the components that are used in the layout. For instance, if the
+     * default layoutTemplate is used (id: '@ohif/extension-default.layoutTemplateModule.viewerLayout')
+     * it will include the leftPanels, rightPanels, and viewports. However, if
+     * you define another layoutTemplate that includes a Footer for instance,
+     * you should provide the Footer component here too. Note: We use Strings
+     * to reference the component's ID as they are registered in the internal
+     * ExtensionManager. The template for the string is:
+     * `${extensionId}.{moduleType}.${componentId}`.
+     */
+    routes: [
+      {
+        path: 'preclinical-4d',
+        layoutTemplate: ({ location, servicesManager }) => {
+          return {
+            id: ohif.layout,
+            props: {
+              leftPanels: [[dynamicVolume.leftPanel, cornerstone.activeViewportWindowLevel]],
+              leftPanelResizable: true,
+              rightPanels: [],
+              rightPanelResizable: true,
+              rightPanelClosed: true,
+              viewports: [
+                {
+                  namespace: cornerstone.viewport,
+                  displaySetsToDisplay: [ohif.defaultSopClassHandler],
+                },
+                {
+                  namespace: ohif.chartViewport,
+                  displaySetsToDisplay: [ohif.chartSopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    extensions: extensionDependencies,
+    // Default protocol gets self-registered by default in the init
+    hangingProtocol: 'default4D',
+    // Order is important in sop class handlers when two handlers both use
+    // the same sop class under different situations.  In that case, the more
+    // general handler needs to come last.  For this case, the dicomvideo must
+    // come first to remove video transfer syntax before ohif uses images
+    sopClassHandlers: [ohif.chartSopClassHandler, ohif.defaultSopClassHandler],
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;

modes/preclinical-4d/src/initToolGroups.tsx

@@ -0,0 +1,164 @@
+const toolGroupIds = {
+  default: 'dynamic4D-default',
+  PT: 'dynamic4D-pt',
+  Fusion: 'dynamic4D-fusion',
+  CT: 'dynamic4D-ct',
+};
+
+const colours = {
+  'viewport-0': 'rgb(200, 0, 0)',
+  'viewport-1': 'rgb(200, 200, 0)',
+  'viewport-2': 'rgb(0, 200, 0)',
+};
+
+const colorsByOrientation = {
+  axial: 'rgb(200, 0, 0)',
+  sagittal: 'rgb(200, 200, 0)',
+  coronal: 'rgb(0, 200, 0)',
+};
+
+function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, servicesManager) {
+  const { cornerstoneViewportService } = servicesManager.services;
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: toolNames.Length },
+      { toolName: toolNames.ArrowAnnotate },
+      { toolName: toolNames.Bidirectional },
+      { toolName: toolNames.Probe },
+      { toolName: toolNames.EllipticalROI },
+      { toolName: toolNames.RectangleROI },
+      { toolName: toolNames.RectangleROIThreshold },
+      { toolName: toolNames.RectangleScissors },
+      { toolName: toolNames.PaintFill },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Magnify },
+      {
+        toolName: 'CircularBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'FILL_INSIDE_CIRCLE',
+          brushSize: 7,
+        },
+      },
+      {
+        toolName: 'CircularEraser',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'ERASE_INSIDE_CIRCLE',
+          brushSize: 7,
+        },
+      },
+      {
+        toolName: 'SphereBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'FILL_INSIDE_SPHERE',
+          brushSize: 7,
+        },
+      },
+      {
+        toolName: 'SphereEraser',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'ERASE_INSIDE_SPHERE',
+          brushSize: 7,
+        },
+      },
+      {
+        toolName: 'ThresholdCircularBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_CIRCLE',
+          brushSize: 7,
+        },
+      },
+      {
+        toolName: 'ThresholdSphereBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_SPHERE',
+          brushSize: 7,
+        },
+      },
+      { toolName: toolNames.CircleScissors },
+      { toolName: toolNames.RectangleScissors },
+      { toolName: toolNames.SphereScissors },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Magnify },
+    ],
+    enabled: [],
+    disabled: [
+      {
+        toolName: toolNames.Crosshairs,
+        configuration: {
+          viewportIndicators: true,
+          viewportIndicatorsConfig: {
+            circleRadius: 5,
+            xOffset: 0.95,
+            yOffset: 0.05,
+          },
+          disableOnPassive: true,
+          autoPan: {
+            enabled: false,
+            panSize: 10,
+          },
+          getReferenceLineColor: viewportId => {
+            const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+            const viewportOptions = viewportInfo?.viewportOptions;
+            if (viewportOptions) {
+              return (
+                colours[viewportOptions.id] ||
+                colorsByOrientation[viewportOptions.orientation] ||
+                '#0c0'
+              );
+            } else {
+              console.warn('missing viewport?', viewportId);
+              return '#0c0';
+            }
+          },
+        },
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.PT, {
+    ...tools,
+    passive: [...tools.passive, { toolName: 'RectangleROIStartEndThreshold' }],
+  });
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.CT, {
+    ...tools,
+    passive: [...tools.passive, { toolName: 'RectangleROIStartEndThreshold' }],
+  });
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.Fusion, {
+    ...tools,
+    passive: [...tools.passive, { toolName: 'RectangleROIStartEndThreshold' }],
+  });
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.default, tools);
+}
+
+function initToolGroups({ toolNames, Enums, toolGroupService, commandsManager, servicesManager }) {
+  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, servicesManager);
+}
+
+export { initToolGroups as default, toolGroupIds };

modes/preclinical-4d/src/initWorkflowSteps.ts

@@ -0,0 +1,9 @@
+import getWorkflowSettings from './getWorkflowSettings';
+
+export default function initWorkflowSteps({ servicesManager }: withAppTypes): void {
+  const { workflowStepsService } = servicesManager.services;
+  const workflowSettings = getWorkflowSettings({ servicesManager });
+
+  workflowStepsService.addWorkflowSteps(workflowSettings.steps);
+  workflowStepsService.setActiveWorkflowStep(workflowSettings.steps[0].id);
+}

modes/preclinical-4d/src/segmentationButtons.ts

@@ -0,0 +1,164 @@
+import type { Button } from '@ohif/core/types';
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'BrushTools',
+    uiType: 'ohif.toolBoxButtonGroup',
+    props: {
+      groupId: 'BrushTools',
+      evaluate: 'evaluate.cornerstone.hasSegmentation',
+      items: [
+        {
+          id: 'Brush',
+          icon: 'icon-tool-brush',
+          label: 'Brush',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['CircularBrush', 'SphereBrush'],
+          },
+          options: [
+            {
+              name: 'Size (mm)',
+              id: 'brush-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 7,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: { toolNames: ['CircularBrush', 'SphereBrush'] },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'brush-mode',
+              value: 'CircularBrush',
+              values: [
+                { value: 'CircularBrush', label: 'Circle' },
+                { value: 'SphereBrush', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+          ],
+        },
+        {
+          id: 'Eraser',
+          icon: 'icon-tool-eraser',
+          label: 'Eraser',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['CircularEraser', 'SphereEraser'],
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'eraser-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 7,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: { toolNames: ['CircularEraser', 'SphereEraser'] },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: 'CircularEraser',
+              values: [
+                { value: 'CircularEraser', label: 'Circle' },
+                { value: 'SphereEraser', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+          ],
+        },
+        {
+          id: 'Threshold',
+          icon: 'icon-tool-threshold',
+          label: 'Eraser',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'threshold-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 7,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: {
+                  toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+                },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: 'ThresholdCircularBrush',
+              values: [
+                { value: 'ThresholdCircularBrush', label: 'Circle' },
+                { value: 'ThresholdSphereBrush', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+            {
+              name: 'ThresholdRange',
+              type: 'double-range',
+              id: 'threshold-range',
+              min: 0,
+              max: 100,
+              step: 0.5,
+              value: [2, 50],
+              commands: {
+                commandName: 'setThresholdRange',
+                commandOptions: {
+                  toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Shapes',
+    uiType: 'ohif.toolBoxButton',
+    props: {
+      label: 'Shapes',
+      evaluate: {
+        name: 'evaluate.cornerstone.segmentation',
+        toolNames: ['CircleScissor', 'SphereScissor', 'RectangleScissor'],
+      },
+      icon: 'icon-tool-shape',
+      options: [
+        {
+          name: 'Shape',
+          type: 'radio',
+          value: 'CircleScissor',
+          id: 'shape-mode',
+          values: [
+            { value: 'CircleScissor', label: 'Circle' },
+            { value: 'SphereScissor', label: 'Sphere' },
+            { value: 'RectangleScissor', label: 'Rectangle' },
+          ],
+          commands: 'setToolActiveToolbar',
+        },
+      ],
+    },
+  },
+];
+
+export default toolbarButtons;

modes/preclinical-4d/src/toolbarButtons.tsx

@@ -0,0 +1,166 @@
+import { defaults, ToolbarService } from '@ohif/core';
+import { toolGroupIds } from './initToolGroups';
+
+const { createButton } = ToolbarService;
+
+const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: [toolGroupIds.PT, toolGroupIds.CT, toolGroupIds.Fusion, toolGroupIds.default],
+  },
+};
+
+const toolbarButtons = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MeasurementTools',
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        {
+          id: 'Length',
+          icon: 'tool-length',
+          label: 'Length',
+          tooltip: 'Length Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        },
+        {
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        },
+        {
+          id: 'ArrowAnnotate',
+          icon: 'tool-annotate',
+          label: 'Annotation',
+          tooltip: 'Arrow Annotate',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        },
+        {
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse ROI',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        },
+      ],
+    },
+  },
+  {
+    id: 'Zoom',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-window-level',
+      label: 'Window Level',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Pan',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'TrackballRotate',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-3d-rotate',
+      label: '3D Rotate',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Capture',
+    uiType: 'ohif.radioGroup',
+    props: {
+      icon: 'tool-capture',
+      label: 'Capture',
+      commands: 'showDownloadViewportModal',
+      evaluate: [
+        'evaluate.action',
+        {
+          name: 'evaluate.viewport.supported',
+          unsupportedViewportTypes: ['video', 'wholeSlide'],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 4,
+      evaluate: 'evaluate.action',
+    },
+  },
+  {
+    id: 'Crosshairs',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-crosshair',
+      label: 'Crosshairs',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'ProgressDropdown',
+    uiType: 'ohif.progressDropdown',
+  },
+  {
+    id: 'RectangleROIStartEndThreshold',
+    uiType: 'ohif.radioGroup',
+    props: {
+      icon: 'tool-create-threshold',
+      label: 'Rectangle ROI Threshold',
+      commands: setToolActiveToolbar,
+      evaluate: {
+        name: 'evaluate.cornerstone.segmentation',
+        toolNames: ['RectangleROIStartEndThreshold'],
+      },
+      options: 'tmtv.RectangleROIThresholdOptions',
+    },
+  },
+];
+
+export default toolbarButtons;

modes/segmentation/.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

modes/segmentation/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "proseWrap": "always",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "singleAttributePerLine": true,
+  "endOfLine": "auto"
+}

modes/segmentation/.webpack/webpack.prod.js

@@ -0,0 +1,94 @@
+const path = require('path');
+const pkg = require('../package.json');
+
+const outputFile = 'index.umd.js';
+const rootDir = path.resolve(__dirname, '../');
+const outputFolder = path.join(__dirname, `../dist/umd/${pkg.name}/`);
+
+// Todo: add ESM build for the mode in addition to umd build
+const config = {
+  mode: 'production',
+  entry: rootDir + '/' + pkg.module,
+  devtool: 'source-map',
+  output: {
+    path: outputFolder,
+    filename: outputFile,
+    library: pkg.name,
+    libraryTarget: 'umd',
+    chunkFilename: '[name].chunk.js',
+    umdNamedDefine: true,
+    globalObject: "typeof self !== 'undefined' ? self : this",
+  },
+  externals: [
+    {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react',
+      },
+      '@ohif/core': {
+        commonjs2: '@ohif/core',
+        commonjs: '@ohif/core',
+        amd: '@ohif/core',
+        root: '@ohif/core',
+      },
+      '@ohif/ui': {
+        commonjs2: '@ohif/ui',
+        commonjs: '@ohif/ui',
+        amd: '@ohif/ui',
+        root: '@ohif/ui',
+      },
+    },
+  ],
+  module: {
+    rules: [
+      {
+        test: /(\.jsx|\.js|\.tsx|\.ts)$/,
+        loader: 'babel-loader',
+        exclude: /(node_modules|bower_components)/,
+        resolve: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+      {
+        test: /\.svg?$/,
+        oneOf: [
+          {
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false
+                          },
+                        },
+                      },
+                    ]
+                  },
+                  prettier: false,
+                  svgo: true,
+                  titleProp: true,
+                },
+              },
+            ],
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    modules: [path.resolve('./node_modules'), path.resolve('./src')],
+    extensions: ['.json', '.js', '.jsx', '.tsx', '.ts'],
+  },
+};
+
+module.exports = config;

modes/segmentation/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 @ohif-segmentation-mode (contact@ohif.org)
+
+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.

modes/segmentation/README.md

@@ -0,0 +1,7 @@
+# @ohif-segmentation-mode 
+## Description 
+OHIF segmentation mode which enables labelmap segmentation read/edit/export 
+## Author 
+@ohif 
+## License 
+MIT

modes/segmentation/babel.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+  plugins: ['@babel/plugin-proposal-class-properties'],
+  env: {
+    test: {
+      presets: [
+        [
+          // TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
+          '@babel/preset-env',
+          {
+            modules: 'commonjs',
+            debug: false,
+          },
+          '@babel/preset-typescript',
+        ],
+        '@babel/preset-react',
+      ],
+      plugins: [
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-transform-regenerator',
+        '@babel/plugin-transform-runtime',
+      ],
+    },
+    production: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+    development: {
+      presets: [
+        // WebPack handles ES6 --> Target Syntax
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+    },
+  },
+};

modes/segmentation/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@ohif/mode-segmentation",
+  "version": "3.10.0-beta.111",
+  "description": "OHIF segmentation mode which enables labelmap segmentation read/edit/export",
+  "author": "@ohif",
+  "license": "MIT",
+  "main": "dist/umd/@ohif/mode-segmentation/index.umd.js",
+  "files": [
+    "dist/**",
+    "public/**",
+    "README.md"
+  ],
+  "repository": "OHIF/Viewers",
+  "keywords": [
+    "ohif-mode"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "src/index.tsx",
+  "engines": {
+    "node": ">=14",
+    "npm": ">=7",
+    "yarn": ">=1.16.0"
+  },
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-rt": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-seg": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.111",
+    "@ohif/extension-default": "3.10.0-beta.111",
+    "@ohif/extension-dicom-pdf": "3.10.0-beta.111",
+    "@ohif/extension-dicom-video": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "7.24.7",
+    "@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-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.24.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",
+    "@svgr/webpack": "^8.1.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.0-beta.4",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^14.1.0",
+    "eslint": "^8.39.0",
+    "eslint-loader": "^2.0.0",
+    "webpack": "5.94.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-merge": "^5.7.3"
+  }
+}

modes/segmentation/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/segmentation/src/index.tsx

@@ -0,0 +1,170 @@
+import { id } from './id';
+import toolbarButtons from './toolbarButtons';
+import segmentationButtons from './segmentationButtons';
+import initToolGroups from './initToolGroups';
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  hangingProtocol: '@ohif/extension-default.hangingProtocolModule.default',
+  leftPanel: '@ohif/extension-default.panelModule.seriesList',
+};
+
+const cornerstone = {
+  viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
+  panelTool: '@ohif/extension-cornerstone.panelModule.panelSegmentationWithTools',
+};
+
+const segmentation = {
+  sopClassHandler: '@ohif/extension-cornerstone-dicom-seg.sopClassHandlerModule.dicom-seg',
+  viewport: '@ohif/extension-cornerstone-dicom-seg.viewportModule.dicom-seg',
+};
+
+/**
+ * Just two dependencies to be able to render a viewport with panels in order
+ * to make sure that the mode is working.
+ */
+const extensionDependencies = {
+  '@ohif/extension-default': '^3.0.0',
+  '@ohif/extension-cornerstone': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-seg': '^3.0.0',
+};
+
+function modeFactory({ modeConfiguration }) {
+  return {
+    /**
+     * Mode ID, which should be unique among modes used by the viewer. This ID
+     * is used to identify the mode in the viewer's state.
+     */
+    id,
+    routeName: 'segmentation',
+    /**
+     * Mode name, which is displayed in the viewer's UI in the workList, for the
+     * user to select the mode.
+     */
+    displayName: 'Segmentation',
+    /**
+     * Runs when the Mode Route is mounted to the DOM. Usually used to initialize
+     * Services and other resources.
+     */
+    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
+      const { measurementService, toolbarService, toolGroupService, customizationService } =
+        servicesManager.services;
+
+      measurementService.clearMeasurements();
+
+      // Init Default and SR ToolGroups
+      initToolGroups(extensionManager, toolGroupService, commandsManager);
+
+      toolbarService.addButtons(toolbarButtons);
+      toolbarService.addButtons(segmentationButtons);
+
+      toolbarService.createButtonSection('primary', [
+        'WindowLevel',
+        'Pan',
+        'Zoom',
+        'TrackballRotate',
+        'Capture',
+        'Layout',
+        'Crosshairs',
+        'MoreTools',
+      ]);
+      toolbarService.createButtonSection('segmentationToolbox', ['BrushTools', 'Shapes']);
+    },
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const {
+        toolGroupService,
+        syncGroupService,
+        segmentationService,
+        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
+      } = servicesManager.services;
+
+      uiDialogService.dismissAll();
+      uiModalService.hide();
+      toolGroupService.destroy();
+      syncGroupService.destroy();
+      segmentationService.destroy();
+      cornerstoneViewportService.destroy();
+    },
+    /** */
+    validationTags: {
+      study: [],
+      series: [],
+    },
+    /**
+     * A boolean return value that indicates whether the mode is valid for the
+     * modalities of the selected studies. Currently we don't have stack viewport
+     * segmentations and we should exclude them
+     */
+    isValidMode: ({ modalities }) => {
+      // Don't show the mode if the selected studies have only one modality
+      // that is not supported by the mode
+      const modalitiesArray = modalities.split('\\');
+      return {
+        valid:
+          modalitiesArray.length === 1
+            ? !['SM', 'ECG', 'OT', 'DOC'].includes(modalitiesArray[0])
+            : true,
+        description:
+          'The mode does not support studies that ONLY include the following modalities: SM, OT, DOC',
+      };
+    },
+    /**
+     * Mode Routes are used to define the mode's behavior. A list of Mode Route
+     * that includes the mode's path and the layout to be used. The layout will
+     * include the components that are used in the layout. For instance, if the
+     * default layoutTemplate is used (id: '@ohif/extension-default.layoutTemplateModule.viewerLayout')
+     * it will include the leftPanels, rightPanels, and viewports. However, if
+     * you define another layoutTemplate that includes a Footer for instance,
+     * you should provide the Footer component here too. Note: We use Strings
+     * to reference the component's ID as they are registered in the internal
+     * ExtensionManager. The template for the string is:
+     * `${extensionId}.{moduleType}.${componentId}`.
+     */
+    routes: [
+      {
+        path: 'template',
+        layoutTemplate: ({ location, servicesManager }) => {
+          return {
+            id: ohif.layout,
+            props: {
+              leftPanels: [ohif.leftPanel],
+              leftPanelResizable: true,
+              rightPanels: [cornerstone.panelTool],
+              rightPanelResizable: true,
+              // leftPanelClosed: true,
+              viewports: [
+                {
+                  namespace: cornerstone.viewport,
+                  displaySetsToDisplay: [ohif.sopClassHandler],
+                },
+                {
+                  namespace: segmentation.viewport,
+                  displaySetsToDisplay: [segmentation.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    /** List of extensions that are used by the mode */
+    extensions: extensionDependencies,
+    /** HangingProtocol used by the mode */
+    // Commented out to just use the most applicable registered hanging protocol
+    // The example is used for a grid layout to specify that as a preferred layout
+    // hangingProtocol: ['@ohif/mnGrid'],
+    /** SopClassHandlers used by the mode */
+    sopClassHandlers: [ohif.sopClassHandler, segmentation.sopClassHandler],
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;

modes/segmentation/src/initToolGroups.ts

@@ -0,0 +1,181 @@
+const colours = {
+  'viewport-0': 'rgb(200, 0, 0)',
+  'viewport-1': 'rgb(200, 200, 0)',
+  'viewport-2': 'rgb(0, 200, 0)',
+};
+
+const colorsByOrientation = {
+  axial: 'rgb(200, 0, 0)',
+  sagittal: 'rgb(200, 200, 0)',
+  coronal: 'rgb(0, 200, 0)',
+};
+
+function createTools(utilityModule) {
+  const { toolNames, Enums } = utilityModule.exports;
+  return {
+    active: [
+      { toolName: toolNames.WindowLevel, bindings: [{ mouseButton: Enums.MouseBindings.Primary }] },
+      { toolName: toolNames.Pan, bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }] },
+      { toolName: toolNames.Zoom, bindings: [{ mouseButton: Enums.MouseBindings.Secondary }] },
+      { toolName: toolNames.StackScroll, bindings: [{ mouseButton: Enums.MouseBindings.Wheel }] },
+    ],
+    passive: [
+      {
+        toolName: 'CircularBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'FILL_INSIDE_CIRCLE',
+        },
+      },
+      {
+        toolName: 'CircularEraser',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'ERASE_INSIDE_CIRCLE',
+        },
+      },
+      {
+        toolName: 'SphereBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'FILL_INSIDE_SPHERE',
+        },
+      },
+      {
+        toolName: 'SphereEraser',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'ERASE_INSIDE_SPHERE',
+        },
+      },
+      {
+        toolName: 'ThresholdCircularBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_CIRCLE',
+        },
+      },
+      {
+        toolName: 'ThresholdSphereBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_SPHERE',
+        },
+      },
+      {
+        toolName: 'ThresholdCircularBrushDynamic',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_CIRCLE',
+          // preview: {
+          //   enabled: true,
+          // },
+          strategySpecificConfiguration: {
+            // to use the use the center segment index to determine
+            // if inside -> same segment, if outside -> eraser
+            // useCenterSegmentIndex: true,
+            THRESHOLD: {
+              isDynamic: true,
+              dynamicRadius: 3,
+            },
+          },
+        },
+      },
+      { toolName: toolNames.CircleScissors },
+      { toolName: toolNames.RectangleScissors },
+      { toolName: toolNames.SphereScissors },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Magnify },
+      { toolName: toolNames.WindowLevelRegion },
+
+      { toolName: toolNames.UltrasoundDirectional },
+    ],
+    disabled: [{ toolName: toolNames.ReferenceLines }, { toolName: toolNames.AdvancedMagnify }],
+  };
+}
+
+function initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, toolGroupId) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+  const tools = createTools(utilityModule);
+  toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+}
+
+function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+  const servicesManager = extensionManager._servicesManager;
+  const { cornerstoneViewportService } = servicesManager.services;
+  const tools = createTools(utilityModule);
+  tools.disabled.push(
+    {
+      toolName: utilityModule.exports.toolNames.Crosshairs,
+      configuration: {
+        viewportIndicators: true,
+        viewportIndicatorsConfig: {
+          circleRadius: 5,
+          xOffset: 0.95,
+          yOffset: 0.05,
+        },
+        disableOnPassive: true,
+        autoPan: {
+          enabled: false,
+          panSize: 10,
+        },
+        getReferenceLineColor: viewportId => {
+          const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+          const viewportOptions = viewportInfo?.viewportOptions;
+          if (viewportOptions) {
+            return (
+              colours[viewportOptions.id] ||
+              colorsByOrientation[viewportOptions.orientation] ||
+              '#0c0'
+            );
+          } else {
+            console.warn('missing viewport?', viewportId);
+            return '#0c0';
+          }
+        },
+      },
+    },
+    { toolName: utilityModule.exports.toolNames.ReferenceLines }
+  );
+  toolGroupService.createToolGroupAndAddTools('mpr', tools);
+}
+
+function initVolume3DToolGroup(extensionManager, toolGroupService) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.TrackballRotateTool,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools('volume3d', tools);
+}
+
+function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+  initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
+  initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
+  initVolume3DToolGroup(extensionManager, toolGroupService);
+}
+
+export default initToolGroups;

modes/segmentation/src/segmentationButtons.ts

@@ -0,0 +1,204 @@
+import type { Button } from '@ohif/core/types';
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'BrushTools',
+    uiType: 'ohif.toolBoxButtonGroup',
+    props: {
+      groupId: 'BrushTools',
+      evaluate: 'evaluate.cornerstone.hasSegmentation',
+      items: [
+        {
+          id: 'Brush',
+          icon: 'icon-tool-brush',
+          label: 'Brush',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['CircularBrush', 'SphereBrush'],
+            disabledText: 'Create new segmentation to enable this tool.',
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'brush-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 25,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: { toolNames: ['CircularBrush', 'SphereBrush'] },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'brush-mode',
+              value: 'CircularBrush',
+              values: [
+                { value: 'CircularBrush', label: 'Circle' },
+                { value: 'SphereBrush', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+          ],
+        },
+        {
+          id: 'Eraser',
+          icon: 'icon-tool-eraser',
+          label: 'Eraser',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['CircularEraser', 'SphereEraser'],
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'eraser-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 25,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: { toolNames: ['CircularEraser', 'SphereEraser'] },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: 'CircularEraser',
+              values: [
+                { value: 'CircularEraser', label: 'Circle' },
+                { value: 'SphereEraser', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+          ],
+        },
+        {
+          id: 'Threshold',
+          icon: 'icon-tool-threshold',
+          label: 'Threshold Tool',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'threshold-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 25,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: {
+                  toolNames: [
+                    'ThresholdCircularBrush',
+                    'ThresholdSphereBrush',
+                    'ThresholdCircularBrushDynamic',
+                  ],
+                },
+              },
+            },
+
+            {
+              name: 'Threshold',
+              type: 'radio',
+              id: 'dynamic-mode',
+              value: 'ThresholdRange',
+              values: [
+                { value: 'ThresholdDynamic', label: 'Dynamic' },
+                { value: 'ThresholdRange', label: 'Range' },
+              ],
+              commands: ({ value, commandsManager, options }) => {
+                if (value === 'ThresholdDynamic') {
+                  commandsManager.run('setToolActive', {
+                    toolName: 'ThresholdCircularBrushDynamic',
+                  });
+
+                  return;
+                }
+
+                // check the condition of the threshold-range option
+                const thresholdRangeOption = options.find(
+                  option => option.id === 'threshold-shape'
+                );
+
+                commandsManager.run('setToolActiveToolbar', {
+                  toolName: thresholdRangeOption.value,
+                });
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'threshold-shape',
+              value: 'ThresholdCircularBrush',
+              values: [
+                { value: 'ThresholdCircularBrush', label: 'Circle' },
+                { value: 'ThresholdSphereBrush', label: 'Sphere' },
+              ],
+              condition: ({ options }) =>
+                options.find(option => option.id === 'dynamic-mode').value === 'ThresholdRange',
+              commands: 'setToolActiveToolbar',
+            },
+            {
+              name: 'ThresholdRange',
+              type: 'double-range',
+              id: 'threshold-range',
+              min: -1000,
+              max: 1000,
+              step: 1,
+              value: [100, 600],
+              condition: ({ options }) =>
+                options.find(option => option.id === 'dynamic-mode').value === 'ThresholdRange',
+              commands: {
+                commandName: 'setThresholdRange',
+                commandOptions: {
+                  toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Shapes',
+    uiType: 'ohif.toolBoxButton',
+    props: {
+      id: 'Shapes',
+      icon: 'icon-tool-shape',
+      label: 'Shapes',
+      evaluate: {
+        name: 'evaluate.cornerstone.segmentation',
+        toolNames: ['CircleScissor', 'SphereScissor', 'RectangleScissor'],
+        disabledText: 'Create new segmentation to enable shapes tool.',
+      },
+      options: [
+        {
+          name: 'Shape',
+          type: 'radio',
+          value: 'CircleScissor',
+          id: 'shape-mode',
+          values: [
+            { value: 'CircleScissor', label: 'Circle' },
+            { value: 'SphereScissor', label: 'Sphere' },
+            { value: 'RectangleScissor', label: 'Rectangle' },
+          ],
+          commands: 'setToolActiveToolbar',
+        },
+      ],
+    },
+  },
+];
+
+export default toolbarButtons;

modes/segmentation/src/toolbarButtons.ts

@@ -0,0 +1,259 @@
+import type { Button } from '@ohif/core/types';
+import { ToolbarService, ViewportGridService } from '@ohif/core';
+
+const { createButton } = ToolbarService;
+
+const ReferenceLinesListeners: RunCommand = [
+  {
+    commandName: 'setSourceViewportForReferenceLinesTool',
+    context: 'CORNERSTONE',
+  },
+];
+
+export const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: ['default', 'mpr', 'SRToolGroup', 'volume3d'],
+  },
+};
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'Zoom',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-window-level',
+      label: 'Window Level',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Pan',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'TrackballRotate',
+    uiType: 'ohif.toolButton',
+    props: {
+      type: 'tool',
+      icon: 'tool-3d-rotate',
+      label: '3D Rotate',
+      commands: setToolActiveToolbar,
+      evaluate: {
+        name: 'evaluate.cornerstoneTool',
+        disabledText: 'Select a 3D viewport to enable this tool',
+      },
+    },
+  },
+  {
+    id: 'Capture',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-capture',
+      label: 'Capture',
+      commands: 'showDownloadViewportModal',
+      evaluate: [
+        'evaluate.action',
+        {
+          name: 'evaluate.viewport.supported',
+          unsupportedViewportTypes: ['video', 'wholeSlide'],
+        },
+      ],
+    },
+  },
+  {
+    id: 'Layout',
+    uiType: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 4,
+      evaluate: 'evaluate.action',
+      commands: 'setViewportGridLayout',
+    },
+  },
+  {
+    id: 'Crosshairs',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-crosshair',
+      label: 'Crosshairs',
+      commands: {
+        commandName: 'setToolActiveToolbar',
+        commandOptions: {
+          toolGroupIds: ['mpr'],
+        },
+      },
+      evaluate: {
+        name: 'evaluate.cornerstoneTool',
+        disabledText: 'Select an MPR viewport to enable this tool',
+      },
+    },
+  },
+  {
+    id: 'MoreTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MoreTools',
+      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      primary: createButton({
+        id: 'Reset',
+        icon: 'tool-reset',
+        tooltip: 'Reset View',
+        label: 'Reset',
+        commands: 'resetViewport',
+        evaluate: 'evaluate.action',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        label: '',
+        tooltip: 'More Tools',
+      },
+      items: [
+        createButton({
+          id: 'Reset',
+          icon: 'tool-reset',
+          label: 'Reset View',
+          tooltip: 'Reset View',
+          commands: 'resetViewport',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'rotate-right',
+          icon: 'tool-rotate-right',
+          label: 'Rotate Right',
+          tooltip: 'Rotate +90',
+          commands: 'rotateViewportCW',
+          evaluate: 'evaluate.action',
+        }),
+        createButton({
+          id: 'flipHorizontal',
+          icon: 'tool-flip-horizontal',
+          label: 'Flip Horizontal',
+          tooltip: 'Flip Horizontally',
+          commands: 'flipViewportHorizontal',
+          evaluate: [
+            'evaluate.viewportProperties.toggle',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['volume3d'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'ReferenceLines',
+          icon: 'tool-referenceLines',
+          label: 'Reference Lines',
+          tooltip: 'Show Reference Lines',
+          commands: 'toggleEnabledDisabledToolbar',
+          listeners: {
+            [ViewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
+            [ViewportGridService.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners,
+          },
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'ImageOverlayViewer',
+          icon: 'toggle-dicom-overlay',
+          label: 'Image Overlay',
+          tooltip: 'Toggle Image Overlay',
+          commands: 'toggleEnabledDisabledToolbar',
+          evaluate: 'evaluate.cornerstoneTool.toggle',
+        }),
+        createButton({
+          id: 'StackScroll',
+          icon: 'tool-stack-scroll',
+          label: 'Stack Scroll',
+          tooltip: 'Stack Scroll',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'invert',
+          icon: 'tool-invert',
+          label: 'Invert',
+          tooltip: 'Invert Colors',
+          commands: 'invertViewport',
+          evaluate: 'evaluate.viewportProperties.toggle',
+        }),
+        createButton({
+          id: 'Cine',
+          icon: 'tool-cine',
+          label: 'Cine',
+          tooltip: 'Cine',
+          commands: 'toggleCine',
+          evaluate: [
+            'evaluate.cine',
+            {
+              name: 'evaluate.viewport.supported',
+              unsupportedViewportTypes: ['volume3d'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'Magnify',
+          icon: 'tool-magnify',
+          label: 'Zoom-in',
+          tooltip: 'Zoom-in',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        createButton({
+          id: 'TagBrowser',
+          icon: 'dicom-tag-browser',
+          label: 'Dicom Tag Browser',
+          tooltip: 'Dicom Tag Browser',
+          commands: 'openDICOMTagViewer',
+        }),
+        createButton({
+          id: 'AdvancedMagnify',
+          icon: 'icon-tool-loupe',
+          label: 'Magnify Probe',
+          tooltip: 'Magnify Probe',
+          commands: 'toggleActiveDisabledToolbar',
+          evaluate: 'evaluate.cornerstoneTool.toggle.ifStrictlyDisabled',
+        }),
+        createButton({
+          id: 'UltrasoundDirectionalTool',
+          icon: 'icon-tool-ultrasound-bidirectional',
+          label: 'Ultrasound Directional',
+          tooltip: 'Ultrasound Directional',
+          commands: setToolActiveToolbar,
+          evaluate: [
+            'evaluate.cornerstoneTool',
+            {
+              name: 'evaluate.modality.supported',
+              supportedModalities: ['US'],
+            },
+          ],
+        }),
+        createButton({
+          id: 'WindowLevelRegion',
+          icon: 'icon-tool-window-region',
+          label: 'Window Level Region',
+          tooltip: 'Window Level Region',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+];
+
+export default toolbarButtons;

modes/tmtv/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.ts`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

modes/tmtv/.webpack/webpack.prod.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkg = require('./../package.json');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+
+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`,
+};
+
+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: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-mode-tmtv',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      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/[name].css',
+      //   chunkFilename: './dist/[id].css',
+      // }),
+    ],
+  });
+};

modes/tmtv/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+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.

modes/tmtv/README.md

@@ -0,0 +1,78 @@
+# Total Metabolic Tumor Volume
+
+## Introduction
+
+Total Metabolic Tumor Volume (TMTV) workflow mode enables quantitatively measurement of a tumor volume in a patient's body.
+This mode is accessible in any study that has a PT and CT image series as you can see below
+
+
+![modeValid](https://user-images.githubusercontent.com/7490180/171256138-7a948654-6836-460c-817a-fa9a1929926b.png)
+
+Note: If the study does not have a PT and CT image series, the TMTV workflow mode will not be available
+and will become grayed out.
+
+## Layout
+The designed layout for the viewports follows a predefined hanging protocol which will place
+10 viewports containing CT, PT, Fusion and Maximum Intensity Projection (MIP) PT scenes.
+
+The hanging protocol will match the CT and PT displaySets based on series description. In terms
+of PT displaySets, the hanging protocol will match the PT displaySet that has attenuated
+corrected PET image data.
+
+As seen in the image below, the first row contains CT volume in 3 different views of Axial,
+Sagittal and Coronal. The second row contains PT volume in the same views as the first row.
+The last row contains the fusion volume and the viewport to the right is a MIP of the PT
+Volume in the Sagittal view.
+
+
+
+![modeLayout](https://user-images.githubusercontent.com/7490180/171256159-1e94edac-985f-4de3-8759-27a077541f8f.png)
+
+## Synchronization
+
+The viewports in the 3 rows are synchronized both for the Camera and WindowLevel.
+It means that when you interact with the CT viewport (pan, zoom, scroll),
+the PT and Fusion viewports will be synchronized to the same view. In addition
+to camera synchronization, the window level of the CT viewport will be synchronized
+with the fusion viewport.
+
+
+### MIP
+The tools that are activated on each viewport is unique to its data. For instance,
+the mouse scroll tool for PT, CT and Fusion viewports are scrolling through the image data
+(in different directions); however, the mouse scroll tool for the MIP viewport will
+rotate the camera to match the usecase for the MIP.
+
+
+## Panels
+There are two panels that are available in the TMTV workflow mode and we will
+discuss them in detail below.
+
+### SUV Panel
+This panel shows the PT metadata derived from the matched PT displaySet. The user
+can edit/change the metadata if needed, and by reloading the data the new
+metadata will be applied to the PT volume.
+
+
+## ROI Threshold Panel
+The ROI Threshold panel is a panel that allows the user to use the `RectangleROIStartEnd`
+tool from Cornerstone to define and edit a region of interest. Then, the user can
+apply a threshold to the pixels in the ROI and save the result as a segmentation volume.
+
+By applying each threshold to the ROI, the Total Metabolic Tumor Volume (TMTV), and
+the SUV Peak values will get calculated for the labelmap segments and shown in the
+panel.
+
+
+## Export Report
+
+Finally, the results can be saved in the CSV format. The RectangleROI annotations
+can also be extracted as a dicom RT Structure Set and saved as a DICOM file.
+
+
+## Video Tutorial
+
+Below you can see a video tutorial on how to use the TMTV workflow mode.
+
+
+https://user-images.githubusercontent.com/7490180/171065443-35369fba-e955-48ac-94da-d262e0fccb6b.mp4

modes/tmtv/babel.config.js

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

modes/tmtv/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@ohif/mode-tmtv",
+  "version": "3.10.0-beta.111",
+  "description": "Total Metabolic Tumor Volume Workflow",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/ohif-mode-tmtv.umd.js",
+  "module": "src/index.ts",
+  "engines": {
+    "node": ">=14",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "ohif-mode"
+  ],
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
+    "dev:cornerstone": "yarn run dev",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@ohif/core": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone": "3.10.0-beta.111",
+    "@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.111",
+    "@ohif/extension-default": "3.10.0-beta.111",
+    "@ohif/extension-dicom-pdf": "3.10.0-beta.111",
+    "@ohif/extension-dicom-video": "3.10.0-beta.111",
+    "@ohif/extension-measurement-tracking": "3.10.0-beta.111"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
+  },
+  "devDependencies": {
+    "webpack": "5.94.0",
+    "webpack-merge": "^5.7.3"
+  }
+}

modes/tmtv/src/id.js

@@ -0,0 +1,5 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+
+export { id };

modes/tmtv/src/index.ts

@@ -0,0 +1,229 @@
+import { hotkeys, classes } from '@ohif/core';
+import toolbarButtons from './toolbarButtons.js';
+import { id } from './id.js';
+import initToolGroups from './initToolGroups.js';
+import setCrosshairsConfiguration from './utils/setCrosshairsConfiguration.js';
+import setFusionActiveVolume from './utils/setFusionActiveVolume.js';
+import i18n from 'i18next';
+
+const { MetadataProvider } = classes;
+
+const ohif = {
+  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
+  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
+  thumbnailList: '@ohif/extension-default.panelModule.seriesList',
+};
+
+const cs3d = {
+  viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
+  segPanel: '@ohif/extension-cornerstone.panelModule.panelSegmentationNoHeader',
+  measurements: '@ohif/extension-cornerstone.panelModule.measurements',
+};
+
+const tmtv = {
+  hangingProtocol: '@ohif/extension-tmtv.hangingProtocolModule.ptCT',
+  petSUV: '@ohif/extension-tmtv.panelModule.petSUV',
+  tmtv: '@ohif/extension-tmtv.panelModule.tmtv',
+};
+
+const extensionDependencies = {
+  // Can derive the versions at least process.env.from npm_package_version
+  '@ohif/extension-default': '^3.0.0',
+  '@ohif/extension-cornerstone': '^3.0.0',
+  '@ohif/extension-cornerstone-dicom-seg': '^3.0.0',
+  '@ohif/extension-tmtv': '^3.0.0',
+};
+
+const unsubscriptions = [];
+function modeFactory({ modeConfiguration }) {
+  return {
+    // TODO: We're using this as a route segment
+    // We should not be.
+    id,
+    routeName: 'tmtv',
+    displayName: i18n.t('Modes:Total Metabolic Tumor Volume'),
+    /**
+     * Lifecycle hooks
+     */
+    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
+      const {
+        toolbarService,
+        toolGroupService,
+        customizationService,
+        hangingProtocolService,
+        displaySetService,
+      } = servicesManager.services;
+
+      const utilityModule = extensionManager.getModuleEntry(
+        '@ohif/extension-cornerstone.utilityModule.tools'
+      );
+
+      const { toolNames, Enums } = utilityModule.exports;
+
+      // Init Default and SR ToolGroups
+      initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
+
+      const { unsubscribe } = toolGroupService.subscribe(
+        toolGroupService.EVENTS.VIEWPORT_ADDED,
+        () => {
+          // For fusion toolGroup we need to add the volumeIds for the crosshairs
+          // since in the fusion viewport we don't want both PT and CT to render MIP
+          // when slabThickness is modified
+          const { displaySetMatchDetails } = hangingProtocolService.getMatchDetails();
+
+          setCrosshairsConfiguration(
+            displaySetMatchDetails,
+            toolNames,
+            toolGroupService,
+            displaySetService
+          );
+
+          setFusionActiveVolume(
+            displaySetMatchDetails,
+            toolNames,
+            toolGroupService,
+            displaySetService
+          );
+        }
+      );
+
+      unsubscriptions.push(unsubscribe);
+      toolbarService.addButtons(toolbarButtons);
+      toolbarService.createButtonSection('primary', [
+        'MeasurementTools',
+        'Zoom',
+        'WindowLevel',
+        'Crosshairs',
+        'Pan',
+      ]);
+      toolbarService.createButtonSection('ROIThresholdToolbox', [
+        'RectangleROIStartEndThreshold',
+        'BrushTools',
+      ]);
+
+      customizationService.setCustomizations({
+        'panelSegmentation.tableMode': {
+          $set: 'expanded',
+        },
+        'panelSegmentation.onSegmentationAdd': {
+          $set: () => {
+            commandsManager.run('createNewLabelmapFromPT');
+          },
+        },
+      });
+
+      // For the hanging protocol we need to decide on the window level
+      // based on whether the SUV is corrected or not, hence we can't hard
+      // code the window level in the hanging protocol but we add a custom
+      // attribute to the hanging protocol that will be used to get the
+      // window level based on the metadata
+      hangingProtocolService.addCustomAttribute(
+        'getPTVOIRange',
+        'get PT VOI based on corrected or not',
+        props => {
+          const ptDisplaySet = props.find(imageSet => imageSet.Modality === 'PT');
+
+          if (!ptDisplaySet) {
+            return;
+          }
+
+          const { imageId } = ptDisplaySet.images[0];
+          const imageIdScalingFactor = MetadataProvider.get('scalingModule', imageId);
+
+          const isSUVAvailable = imageIdScalingFactor && imageIdScalingFactor.suvbw;
+
+          if (isSUVAvailable) {
+            return {
+              windowWidth: 5,
+              windowCenter: 2.5,
+            };
+          }
+
+          return;
+        }
+      );
+    },
+    onModeExit: ({ servicesManager }: withAppTypes) => {
+      const {
+        toolGroupService,
+        syncGroupService,
+        segmentationService,
+        cornerstoneViewportService,
+        uiDialogService,
+        uiModalService,
+      } = servicesManager.services;
+
+      unsubscriptions.forEach(unsubscribe => unsubscribe());
+      uiDialogService.dismissAll();
+      uiModalService.hide();
+      toolGroupService.destroy();
+      syncGroupService.destroy();
+      segmentationService.destroy();
+      cornerstoneViewportService.destroy();
+    },
+    validationTags: {
+      study: [],
+      series: [],
+    },
+    isValidMode: ({ modalities, study }) => {
+      const modalities_list = modalities.split('\\');
+      const invalidModalities = ['SM'];
+
+      const isValid =
+        modalities_list.includes('CT') &&
+        study.mrn !== 'M1' &&
+        modalities_list.includes('PT') &&
+        !invalidModalities.some(modality => modalities_list.includes(modality)) &&
+        // This is study is a 4D study with PT and CT and not a 3D study for the tmtv
+        // mode, until we have a better way to identify 4D studies we will use the
+        // StudyInstanceUID to identify the study
+        // Todo: when we add the 4D mode which comes with a mechanism to identify
+        // 4D studies we can use that
+        study.studyInstanceUid !== '1.3.6.1.4.1.12842.1.1.14.3.20220915.105557.468.2963630849';
+
+      // there should be both CT and PT modalities and the modality should not be SM
+      return {
+        valid: isValid,
+        description: 'The mode requires both PT and CT series in the study',
+      };
+    },
+    routes: [
+      {
+        path: 'tmtv',
+        /*init: ({ servicesManager, extensionManager }) => {
+          //defaultViewerRouteInit
+        },*/
+        layoutTemplate: () => {
+          return {
+            id: ohif.layout,
+            props: {
+              leftPanels: [ohif.thumbnailList],
+              leftPanelResizable: true,
+              leftPanelClosed: true,
+              rightPanels: [tmtv.tmtv, tmtv.petSUV],
+              rightPanelResizable: true,
+              viewports: [
+                {
+                  namespace: cs3d.viewport,
+                  displaySetsToDisplay: [ohif.sopClassHandler],
+                },
+              ],
+            },
+          };
+        },
+      },
+    ],
+    extensions: extensionDependencies,
+    hangingProtocol: tmtv.hangingProtocol,
+    sopClassHandlers: [ohif.sopClassHandler],
+    ...modeConfiguration,
+  };
+}
+
+const mode = {
+  id,
+  modeFactory,
+  extensionDependencies,
+};
+
+export default mode;

modes/tmtv/src/initToolGroups.js

@@ -0,0 +1,181 @@
+export const toolGroupIds = {
+  CT: 'ctToolGroup',
+  PT: 'ptToolGroup',
+  Fusion: 'fusionToolGroup',
+  MIP: 'mipToolGroup',
+  default: 'default',
+};
+
+function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    passive: [
+      { toolName: toolNames.Length },
+      {
+        toolName: toolNames.ArrowAnnotate,
+        configuration: {
+          getTextCallback: (callback, eventDetails) => {
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              eventDetails,
+            });
+          },
+          changeTextCallback: (data, eventDetails, callback) => {
+            commandsManager.runCommand('arrowTextCallback', {
+              callback,
+              data,
+              eventDetails,
+            });
+          },
+        },
+      },
+      { toolName: toolNames.Bidirectional },
+      { toolName: toolNames.DragProbe },
+      { toolName: toolNames.Probe },
+      { toolName: toolNames.EllipticalROI },
+      { toolName: toolNames.RectangleROI },
+      { toolName: toolNames.StackScroll },
+      { toolName: toolNames.Angle },
+      { toolName: toolNames.CobbAngle },
+      { toolName: toolNames.Magnify },
+      {
+        toolName: 'CircularBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'FILL_INSIDE_CIRCLE',
+        },
+      },
+      {
+        toolName: 'CircularEraser',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'ERASE_INSIDE_CIRCLE',
+        },
+      },
+      {
+        toolName: 'SphereBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'FILL_INSIDE_SPHERE',
+        },
+      },
+      {
+        toolName: 'SphereEraser',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'ERASE_INSIDE_SPHERE',
+        },
+      },
+      {
+        toolName: 'ThresholdCircularBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_CIRCLE',
+        },
+      },
+      {
+        toolName: 'ThresholdSphereBrush',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_SPHERE',
+        },
+      },
+      {
+        toolName: 'ThresholdCircularBrushDynamic',
+        parentTool: 'Brush',
+        configuration: {
+          activeStrategy: 'THRESHOLD_INSIDE_CIRCLE',
+          // preview: {
+          //   enabled: true,
+          // },
+          strategySpecificConfiguration: {
+            // to use the use the center segment index to determine
+            // if inside -> same segment, if outside -> eraser
+            // useCenterSegmentIndex: true,
+            THRESHOLD: {
+              isDynamic: true,
+              dynamicRadius: 3,
+            },
+          },
+        },
+      },
+    ],
+    enabled: [],
+    disabled: [
+      {
+        toolName: toolNames.Crosshairs,
+        configuration: {
+          disableOnPassive: true,
+          autoPan: {
+            enabled: false,
+            panSize: 10,
+          },
+        },
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.CT, tools);
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.PT, {
+    active: tools.active,
+    passive: [...tools.passive, { toolName: 'RectangleROIStartEndThreshold' }],
+    enabled: tools.enabled,
+    disabled: tools.disabled,
+  });
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.Fusion, tools);
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.default, tools);
+
+  const mipTools = {
+    active: [
+      {
+        toolName: toolNames.VolumeRotate,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+        configuration: {
+          rotateIncrementDegrees: 5,
+        },
+      },
+      {
+        toolName: toolNames.MipJumpToClick,
+        configuration: {
+          toolGroupId: toolGroupIds.PT,
+        },
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+    ],
+    enabled: [
+      {
+        toolName: toolNames.OrientationMarker,
+        configuration: {
+          orientationWidget: {
+            viewportCorner: 'BOTTOM_LEFT',
+          },
+        },
+      },
+    ],
+  };
+
+  toolGroupService.createToolGroupAndAddTools(toolGroupIds.MIP, mipTools);
+}
+
+function initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
+  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
+}
+
+export default initToolGroups;

modes/tmtv/src/toolbarButtons.js

@@ -0,0 +1,285 @@
+import { ToolbarService } from '@ohif/core';
+import { toolGroupIds } from './initToolGroups';
+
+const setToolActiveToolbar = {
+  commandName: 'setToolActiveToolbar',
+  commandOptions: {
+    toolGroupIds: [toolGroupIds.CT, toolGroupIds.PT, toolGroupIds.Fusion],
+  },
+};
+
+const toolbarButtons = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'MeasurementTools',
+      primary: ToolbarService.createButton({
+        id: 'Length',
+        icon: 'tool-length',
+        label: 'Length',
+        tooltip: 'Length Tool',
+        commands: setToolActiveToolbar,
+        evaluate: 'evaluate.cornerstoneTool',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        ToolbarService.createButton({
+          id: 'Bidirectional',
+          icon: 'tool-bidirectional',
+          label: 'Bidirectional',
+          tooltip: 'Bidirectional Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'ArrowAnnotate',
+          icon: 'tool-annotate',
+          label: 'Arrow Annotate',
+          tooltip: 'Arrow Annotate Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+        ToolbarService.createButton({
+          id: 'EllipticalROI',
+          icon: 'tool-ellipse',
+          label: 'Ellipse',
+          tooltip: 'Ellipse Tool',
+          commands: setToolActiveToolbar,
+          evaluate: 'evaluate.cornerstoneTool',
+        }),
+      ],
+    },
+  },
+  {
+    id: 'Zoom',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-zoom',
+      label: 'Zoom',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  // Window Level + Presets
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-window-level',
+      label: 'Window Level',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  // Crosshairs Button
+  {
+    id: 'Crosshairs',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-crosshair',
+      label: 'Crosshairs',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  // Pan Button
+  {
+    id: 'Pan',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  // Rectangle ROI Start End Threshold Button
+  {
+    id: 'RectangleROIStartEndThreshold',
+    uiType: 'ohif.toolBoxButton',
+    props: {
+      icon: 'tool-create-threshold',
+      label: 'Rectangle ROI Threshold',
+      commands: setToolActiveToolbar,
+      evaluate: [
+        'evaluate.cornerstone.segmentation',
+        // need to put the disabled text last, since each evaluator will
+        // merge the result text into the final result
+        {
+          name: 'evaluate.cornerstoneTool',
+          disabledText: 'Select the PT Axial to enable this tool',
+        },
+      ],
+      options: 'tmtv.RectangleROIThresholdOptions',
+    },
+  },
+  {
+    id: 'BrushTools',
+    uiType: 'ohif.toolBoxButtonGroup',
+    props: {
+      groupId: 'BrushTools',
+      evaluate: 'evaluate.cornerstone.hasSegmentation',
+      items: [
+        {
+          id: 'Brush',
+          icon: 'icon-tool-brush',
+          label: 'Brush',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['CircularBrush', 'SphereBrush'],
+            disabledText: 'Create new segmentation to enable this tool.',
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'brush-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 25,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: { toolNames: ['CircularBrush', 'SphereBrush'] },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'brush-mode',
+              value: 'CircularBrush',
+              values: [
+                { value: 'CircularBrush', label: 'Circle' },
+                { value: 'SphereBrush', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+          ],
+        },
+        {
+          id: 'Eraser',
+          icon: 'icon-tool-eraser',
+          label: 'Eraser',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['CircularEraser', 'SphereEraser'],
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'eraser-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 25,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: { toolNames: ['CircularEraser', 'SphereEraser'] },
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: 'CircularEraser',
+              values: [
+                { value: 'CircularEraser', label: 'Circle' },
+                { value: 'SphereEraser', label: 'Sphere' },
+              ],
+              commands: 'setToolActiveToolbar',
+            },
+          ],
+        },
+        {
+          id: 'Threshold',
+          icon: 'icon-tool-threshold',
+          label: 'Threshold Tool',
+          evaluate: {
+            name: 'evaluate.cornerstone.segmentation',
+            toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+          },
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'threshold-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              step: 0.5,
+              value: 25,
+              commands: {
+                commandName: 'setBrushSize',
+                commandOptions: {
+                  toolNames: [
+                    'ThresholdCircularBrush',
+                    'ThresholdSphereBrush',
+                    'ThresholdCircularBrushDynamic',
+                  ],
+                },
+              },
+            },
+
+            {
+              name: 'Threshold',
+              type: 'radio',
+              id: 'dynamic-mode',
+              value: 'ThresholdRange',
+              values: [
+                { value: 'ThresholdDynamic', label: 'Dynamic' },
+                { value: 'ThresholdRange', label: 'Range' },
+              ],
+              commands: ({ value, commandsManager }) => {
+                if (value === 'ThresholdDynamic') {
+                  commandsManager.run('setToolActive', {
+                    toolName: 'ThresholdCircularBrushDynamic',
+                  });
+                } else {
+                  commandsManager.run('setToolActive', {
+                    toolName: 'ThresholdCircularBrush',
+                  });
+                }
+              },
+            },
+            {
+              name: 'Shape',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: 'ThresholdCircularBrush',
+              values: [
+                { value: 'ThresholdCircularBrush', label: 'Circle' },
+                { value: 'ThresholdSphereBrush', label: 'Sphere' },
+              ],
+              condition: ({ options }) =>
+                options.find(option => option.id === 'dynamic-mode').value === 'ThresholdRange',
+              commands: 'setToolActiveToolbar',
+            },
+            {
+              name: 'ThresholdRange',
+              type: 'double-range',
+              id: 'threshold-range',
+              min: 0,
+              max: 50,
+              step: 0.5,
+              value: [2.5, 50],
+              condition: ({ options }) =>
+                options.find(option => option.id === 'dynamic-mode').value === 'ThresholdRange',
+              commands: {
+                commandName: 'setThresholdRange',
+                commandOptions: {
+                  toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+export default toolbarButtons;

modes/tmtv/src/utils/setCrosshairsConfiguration.js

@@ -0,0 +1,33 @@
+import { toolGroupIds } from '../initToolGroups';
+
+export default function setCrosshairsConfiguration(
+  matches,
+  toolNames,
+  toolGroupService,
+  displaySetService
+) {
+  const matchDetails = matches.get('ctDisplaySet');
+
+  if (!matchDetails) {
+    return;
+  }
+
+  const { SeriesInstanceUID } = matchDetails;
+  const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+
+  const toolConfig = toolGroupService.getToolConfiguration(
+    toolGroupIds.Fusion,
+    toolNames.Crosshairs
+  );
+
+  const crosshairsConfig = {
+    ...toolConfig,
+    filterActorUIDsToSetSlabThickness: [displaySets[0].displaySetInstanceUID],
+  };
+
+  toolGroupService.setToolConfiguration(
+    toolGroupIds.Fusion,
+    toolNames.Crosshairs,
+    crosshairsConfig
+  );
+}

modes/tmtv/src/utils/setFusionActiveVolume.js

@@ -0,0 +1,61 @@
+import { toolGroupIds } from '../initToolGroups';
+
+export default function setFusionActiveVolume(
+  matches,
+  toolNames,
+  toolGroupService,
+  displaySetService
+) {
+  const matchDetails = matches.get('ptDisplaySet');
+  const matchDetails2 = matches.get('ctDisplaySet');
+
+  if (!matchDetails) {
+    return;
+  }
+
+  const { SeriesInstanceUID } = matchDetails;
+
+  const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+
+  if (!displaySets || displaySets.length === 0) {
+    return;
+  }
+
+  const wlToolConfig = toolGroupService.getToolConfiguration(
+    toolGroupIds.Fusion,
+    toolNames.WindowLevel
+  );
+
+  const ellipticalToolConfig = toolGroupService.getToolConfiguration(
+    toolGroupIds.Fusion,
+    toolNames.EllipticalROI
+  );
+
+  // Todo: this should not take into account the loader id
+  const volumeId = `cornerstoneStreamingImageVolume:${displaySets[0].displaySetInstanceUID}`;
+  const { SeriesInstanceUID: SeriesInstanceUID2 } = matchDetails2;
+  const ctDisplaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID2);
+  const ctVolumeId = `cornerstoneStreamingImageVolume:${ctDisplaySets[0].displaySetInstanceUID}`;
+
+  const windowLevelConfig = {
+    ...wlToolConfig,
+    volumeId: ctVolumeId,
+  };
+
+  const ellipticalROIConfig = {
+    ...ellipticalToolConfig,
+    volumeId,
+  };
+
+  toolGroupService.setToolConfiguration(
+    toolGroupIds.Fusion,
+    toolNames.WindowLevel,
+    windowLevelConfig
+  );
+
+  toolGroupService.setToolConfiguration(
+    toolGroupIds.Fusion,
+    toolNames.EllipticalROI,
+    ellipticalROIConfig
+  );
+}