chore(version): Update package versions [skip ci]

This change makes the OHIF side consistent with the CS3D user calibration settings, and will correctly display px and rounding values consistent with the CS3D display.

.circleci/config.yml

@@ -269,8 +269,7 @@ jobs:
             git config --global user.name "ohif-bot"
       - run:
           name: Authenticate with NPM registry
-          command:
-            echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
+          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
       - run:
           name: Increase the event emitter limit
           command: |
@@ -289,8 +288,7 @@ jobs:
             node ./publish-version.mjs
       - run:
           name: Again set the NPM registry (was deleted in the version script)
-          command:
-            echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
+          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
       - run:
           name: publish package dist
           command: |
@@ -337,8 +335,7 @@ jobs:
       - setup_remote_docker:
           docker_layer_caching: false
       - run:
-          name:
-            Build and push Docker image from the master branch (beta releases)
+          name: Build and push Docker image from the master branch (beta releases)
           command: |
             echo $(ls -l)
 
@@ -417,8 +414,8 @@ workflows:
           store_artifacts: false
           working_directory: platform/app
           build:
-            yarn test:data && npx cross-env QUICK_BUILD=true
-            APP_CONFIG=config/dicomweb-server.js yarn run build
+            yarn test:data && npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js
+            yarn run build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'

.codespellrc

@@ -0,0 +1,6 @@
+[codespell]
+skip = .git,*.pdf,*.svg,yarn.lock,*.min.js,locales
+# ignore words ending with … and some camelcased variables and names
+ignore-regex = \b\S+…\S*|\b(doubleClick|afterAll|PostgresSQL)\b|\bWee, L\.|.*te.*Telugu.*
+# some odd variables
+ignore-words-list = datea,ser,childrens

.dockerignore

@@ -1,6 +1,12 @@
 # Reduces size of context and hides
 # files from Docker (can't COPY or ADD these)
 
+# Note that typically the Docker context for various OHIF containers is the
+# directory of this file (i.e. the root of the source). As such, this is
+# the .dockerignore file for ALL Docker containers that are built. For example,
+# the Docker containers built from the recipes in ./platform/app/.recipes will
+# have this file as their .dockerignore.
+
 # Output
 dist/
 build/
@@ -28,3 +34,4 @@ dockerfile
 .vscode/
 coverage/
 docs/
+testdata/

.eslintrc.json

@@ -1,10 +1,5 @@
 {
-  "plugins": [
-    "@typescript-eslint",
-    "import",
-    "eslint-plugin-tsdoc",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "import", "eslint-plugin-tsdoc", "prettier"],
   "extends": [
     "react-app",
     "eslint:recommended",

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -39,8 +39,7 @@ body:
     attributes:
       label: The current behavior
       description:
-        'A clear and concise description of what happens instead of the expected
-        behavior.'
+        'A clear and concise description of what happens instead of the expected behavior.'
     validations:
       required: true
 
@@ -48,8 +47,7 @@ body:
     id: expected_behavior
     attributes:
       label: The expected behavior
-      description:
-        'A clear and concise description of what you expected to happen.'
+      description: 'A clear and concise description of what you expected to happen.'
     validations:
       required: true
 
@@ -81,6 +79,6 @@ body:
   - type: markdown
     attributes:
       value: >
-        > :warning: Reports we cannot reproduce are at risk of being marked
-        stale and > closed. The more information you can provide, the more
-        likely we are to look > into and address your issue.
+        > :warning: Reports we cannot reproduce are at risk of being marked stale and > closed. The
+        more information you can provide, the more likely we are to look > into and address your
+        issue.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -20,17 +20,15 @@ body:
     attributes:
       label: 'What feature or change would you like to see made?'
       description:
-        'Please include as much detail as possible including possibly mock up
-        screen shots, workflow or logic flow diagrams etc.'
+        'Please include as much detail as possible including possibly mock up screen shots, workflow
+        or logic flow diagrams etc.'
       placeholder: '...'
     validations:
       required: true
   - type: textarea
     attributes:
       label: 'Why should we prioritize this feature?'
-      description:
-        'Discuss if and how the requested feature interacts with existing
-        features.'
+      description: 'Discuss if and how the requested feature interacts with existing features.'
       placeholder: '...'
     validations:
       required: true

.github/stale.yml

@@ -19,8 +19,7 @@ exemptLabels:
 staleLabel: 'Stale :baguette_bread:'
 # Comment to post when marking an issue as stale. Set to `false` to disable
 markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
+  This issue has been automatically marked as stale because it has not had recent activity. It will
+  be closed if no further activity occurs. Thank you for your contributions.
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: false

.github/workflows/codespell.yml

@@ -0,0 +1,22 @@
+---
+name: Codespell
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+permissions:
+  contents: read
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2

.gitignore

@@ -42,3 +42,4 @@ platform/app/src/pluginImports.js
 /Viewers.iml
 platform/app/.recipes/Nginx-Dcm4Che/dcm4che/dcm4che-arc/*
 platform/app/.recipes/OpenResty-Orthanc/logs/*
+.vercel

.netlify/www/index.html

@@ -1,23 +1,21 @@
 <html>
+  <head>
+    <title>OHIF Viewer: Deploy Preview</title>
+  </head>
 
-<head>
-  <title>OHIF Viewer: Deploy Preview</title>
-</head>
-
-<body>
-  <h1>Index of Previews</h1>
-
-  <ul>
-    <li>
-      <a href="/pwa">OHIF Viewer</a>
-    </li>
-    <li>
-      <a href="/docs">Documentation</a>
-    </li>
-    <li>
-      <a href="/ui">UI: Component Library</a>
-    </li>
-  </ul>
-</body>
+  <body>
+    <h1>Index of Previews</h1>
 
+    <ul>
+      <li>
+        <a href="/pwa">OHIF Viewer</a>
+      </li>
+      <li>
+        <a href="/docs">Documentation</a>
+      </li>
+      <li>
+        <a href="/ui">UI: Component Library</a>
+      </li>
+    </ul>
+  </body>
 </html>

.prettierrc

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

.webpack/helpers/excludeNodeModulesExcept.js

@@ -5,11 +5,11 @@ function excludeNodeModulesExcept(modules) {
   if (pathSep == '\\')
     // must be quoted for use in a regexp:
     pathSep = '\\\\';
-  var moduleRegExps = modules.map(function(modName) {
+  var moduleRegExps = modules.map(function (modName) {
     return new RegExp('node_modules' + pathSep + modName);
   });
 
-  return function(modulePath) {
+  return function (modulePath) {
     if (/node_modules/.test(modulePath)) {
       for (var i = 0; i < moduleRegExps.length; i++)
         if (moduleRegExps[i].test(modulePath)) return false;

.webpack/rules/cssToJavaScript.js

@@ -1,9 +1,7 @@
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const tailwindcss = require('tailwindcss');
-const tailwindConfigPath = path.resolve(
-  '../../platform/app/tailwind.config.js'
-);
+const tailwindConfigPath = path.resolve('../../platform/app/tailwind.config.js');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const devMode = process.env.NODE_ENV !== 'production';
 

.webpack/webpack.base.js

@@ -7,8 +7,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 
 // ~~ PLUGINS
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const TerserJSPlugin = require('terser-webpack-plugin');
 
 // ~~ PackageJSON
@@ -26,11 +25,9 @@ const QUICK_BUILD = process.env.QUICK_BUILD;
 const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';
 
 // read from ../version.txt
-const VERSION_NUMBER =
-  fs.readFileSync(path.join(__dirname, '../version.txt'), 'utf8') || '';
+const VERSION_NUMBER = fs.readFileSync(path.join(__dirname, '../version.txt'), 'utf8') || '';
 
-const COMMIT_HASH =
-  fs.readFileSync(path.join(__dirname, '../commit.txt'), 'utf8') || '';
+const COMMIT_HASH = fs.readFileSync(path.join(__dirname, '../commit.txt'), 'utf8') || '';
 
 //
 dotenv.config();
@@ -105,10 +102,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
       alias: {
         // Viewer project
         '@': path.resolve(__dirname, '../platform/app/src'),
-        '@components': path.resolve(
-          __dirname,
-          '../platform/app/src/components'
-        ),
+        '@components': path.resolve(__dirname, '../platform/app/src/components'),
         '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
         '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
         '@state': path.resolve(__dirname, '../platform/app/src/state'),
@@ -135,7 +129,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
         fs: false,
         path: false,
         zlib: false,
-        "buffer": require.resolve("buffer")
+        buffer: require.resolve('buffer'),
       },
     },
     plugins: [
@@ -150,15 +144,9 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
         'process.env.COMMIT_HASH': JSON.stringify(COMMIT_HASH),
         /* i18n */
         'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''),
-        'process.env.LOCIZE_PROJECTID': JSON.stringify(
-          process.env.LOCIZE_PROJECTID || ''
-        ),
-        'process.env.LOCIZE_API_KEY': JSON.stringify(
-          process.env.LOCIZE_API_KEY || ''
-        ),
-        'process.env.REACT_APP_I18N_DEBUG': JSON.stringify(
-          process.env.REACT_APP_I18N_DEBUG || ''
-        ),
+        'process.env.LOCIZE_PROJECTID': JSON.stringify(process.env.LOCIZE_PROJECTID || ''),
+        'process.env.LOCIZE_API_KEY': JSON.stringify(process.env.LOCIZE_API_KEY || ''),
+        'process.env.REACT_APP_I18N_DEBUG': JSON.stringify(process.env.REACT_APP_I18N_DEBUG || ''),
       }),
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],

CHANGELOG.md

@@ -3,6 +3,134 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+
+### Bug Fixes
+
+* **DicomJson:** retrieve.series.metadata method should be async ([#3659](https://github.com/OHIF/Viewers/issues/3659)) ([2737903](https://github.com/OHIF/Viewers/commit/2737903386cf97399473e0fa64fe53ad14da155a))
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+
+### Bug Fixes
+
+* **measurements:** Update the calibration tool to match changes in CS3D ([#3505](https://github.com/OHIF/Viewers/issues/3505)) ([38af311](https://github.com/OHIF/Viewers/commit/38af3112ec1f94f36c0ef64ff1cf9d21c0981c81))
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+
+### Bug Fixes
+
+* **health imaging:** studies not loading from healthimaging if imagepositionpatient is missing ([#3646](https://github.com/OHIF/Viewers/issues/3646)) ([74e62a1](https://github.com/OHIF/Viewers/commit/74e62a176374f720080d4e777972f70e7f2d8b2b))
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+
+### Bug Fixes
+
+* **suv:** import calculate-suv library version that prevents SUV calculation for a zero PatientWeight ([#3638](https://github.com/OHIF/Viewers/issues/3638)) ([0d10f46](https://github.com/OHIF/Viewers/commit/0d10f46b885fe54ec3dae1848134da658eb6280a))
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+
+### Bug Fixes
+
+* **hotkeys:** preserve hotkeys if changed, and reduce re-rendering ([#3635](https://github.com/OHIF/Viewers/issues/3635)) ([94f7cfb](https://github.com/OHIF/Viewers/commit/94f7cfb08e3490488394efc42ef089ebe55e86be))
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+
+### Features
+
+* **ImageOverlayViewerTool:** add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images ([#3163](https://github.com/OHIF/Viewers/issues/3163)) ([69115da](https://github.com/OHIF/Viewers/commit/69115da06d2d437b57e66608b435bb0bc919a90f))
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+
+### Bug Fixes
+
+* **nginx archive recipe:** Fixes to various configuration files. ([#3624](https://github.com/OHIF/Viewers/issues/3624)) ([3ce7225](https://github.com/OHIF/Viewers/commit/3ce72254b390f32c9aa207a0589e688805e2659d))
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
 # [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
 
 

babel.config.js

@@ -3,11 +3,7 @@ const { extendDefaultPlugins } = require('svgo');
 
 module.exports = {
   babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
-  presets: [
-    '@babel/preset-env',
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-  ],
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
     [
       'inline-react-svg',

commit.txt

@@ -1 +1 @@
-adedc8c382e18a2e86a569e3d023cc55a157363f
+2737903386cf97399473e0fa64fe53ad14da155a

extensions/_example/src/index.js

@@ -54,11 +54,7 @@ const getCommandsModule = () => ({
 const ExampleContext = React.createContext();
 
 function ExampleContextProvider({ children }) {
-  return (
-    <ExampleContext.Provider value={{ example: 'value' }}>
-      {children}
-    </ExampleContext.Provider>
-  );
+  return <ExampleContext.Provider value={{ example: 'value' }}>{children}</ExampleContext.Provider>;
 }
 
 const getContextModule = () => [
@@ -121,7 +117,7 @@ const getSopClassHandlerModule = (/* ... */) => {
 
 const getToolbarModule = () => {};
 
-// displaySet, viewportIndex, dataSource
+// displaySet, dataSource
 const getViewportModule = () => {
   const wrappedViewport = props => {
     return (

extensions/cornerstone-dicom-rt/.webpack/webpack.prod.js

@@ -3,8 +3,7 @@ const { merge } = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const pkg = require('./../package.json');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const ROOT_DIR = path.join(__dirname, './..');
 const SRC_DIR = path.join(__dirname, '../src');
@@ -38,13 +37,7 @@ module.exports = (env, argv) => {
       libraryTarget: 'umd',
       filename: pkg.main,
     },
-    externals: [
-      /\b(vtk.js)/,
-      /\b(dcmjs)/,
-      /\b(gl-matrix)/,
-      /^@ohif/,
-      /^@cornerstonejs/,
-    ],
+    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
     plugins: [
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,

extensions/cornerstone-dicom-rt/CHANGELOG.md

@@ -3,6 +3,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
 # [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt

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

@@ -10,7 +10,7 @@ module.exports = {
             modules: 'commonjs',
             debug: false,
           },
-          "@babel/preset-typescript",
+          '@babel/preset-typescript',
         ],
         '@babel/preset-react',
       ],
@@ -26,7 +26,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
@@ -35,7 +35,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       plugins: ['react-hot-loader/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],

extensions/cornerstone-dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.7.0-beta.62",
+  "version": "3.7.0-beta.75",
   "description": "DICOM RT read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -31,10 +31,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.62",
-    "@ohif/extension-cornerstone": "3.7.0-beta.62",
-    "@ohif/extension-default": "3.7.0-beta.62",
-    "@ohif/i18n": "3.7.0-beta.62",
+    "@ohif/core": "3.7.0-beta.75",
+    "@ohif/extension-cornerstone": "3.7.0-beta.75",
+    "@ohif/extension-default": "3.7.0-beta.75",
+    "@ohif/i18n": "3.7.0-beta.75",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

extensions/cornerstone-dicom-rt/src/getSopClassHandlerModule.js

@@ -7,11 +7,7 @@ const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];
 
 let loadPromises = {};
 
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager,
-  extensionManager
-) {
+function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
   const instance = instances[0];
 
   const {
@@ -56,10 +52,7 @@ function _getDisplaySetsFromSeries(
   };
 
   let referencedSeriesSequence = instance.ReferencedSeriesSequence;
-  if (
-    instance.ReferencedFrameOfReferenceSequence &&
-    !instance.ReferencedSeriesSequence
-  ) {
+  if (instance.ReferencedFrameOfReferenceSequence && !instance.ReferencedSeriesSequence) {
     instance.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
       instance.ReferencedFrameOfReferenceSequence
     );
@@ -72,8 +65,7 @@ function _getDisplaySetsFromSeries(
 
   const referencedSeries = referencedSeriesSequence[0];
 
-  displaySet.referencedImages =
-    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
   displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
 
   displaySet.getReferenceDisplaySet = () => {
@@ -88,14 +80,12 @@ function _getDisplaySetsFromSeries(
 
     const referencedDisplaySet = referencedDisplaySets[0];
 
-    displaySet.referencedDisplaySetInstanceUID =
-      referencedDisplaySet.displaySetInstanceUID;
+    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
 
     return referencedDisplaySet;
   };
 
-  displaySet.load = ({ headers }) =>
-    _load(displaySet, servicesManager, extensionManager, headers);
+  displaySet.load = ({ headers }) => _load(displaySet, servicesManager, extensionManager, headers);
 
   return [displaySet];
 }
@@ -194,11 +184,7 @@ function getSopClassHandlerModule({ servicesManager, extensionManager }) {
       name: 'dicom-rt',
       sopClassUids,
       getDisplaySetsFromSeries: instances => {
-        return _getDisplaySetsFromSeries(
-          instances,
-          servicesManager,
-          extensionManager
-        );
+        return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
       },
     },
   ];

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

@@ -5,9 +5,7 @@ import getSopClassHandlerModule from './getSopClassHandlerModule';
 import hydrateRTDisplaySet from './utils/_hydrateRT';
 
 const Component = React.lazy(() => {
-  return import(
-    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport'
-  );
+  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport');
 });
 
 const OHIFCornerstoneRTViewport = props => {

extensions/cornerstone-dicom-rt/src/loadRTStruct.js

@@ -25,23 +25,13 @@ async function checkAndLoadContourData(instance, datasource) {
 
       if (Array.isArray(contourData)) {
         promisesMap.has(referencedROINumber)
-          ? promisesMap
-              .get(referencedROINumber)
-              .push(Promise.resolve(contourData))
-          : promisesMap.set(referencedROINumber, [
-              Promise.resolve(contourData),
-            ]);
+          ? promisesMap.get(referencedROINumber).push(Promise.resolve(contourData))
+          : promisesMap.set(referencedROINumber, [Promise.resolve(contourData)]);
       } else if (contourData && contourData.BulkDataURI) {
         const bulkDataURI = contourData.BulkDataURI;
 
-        if (
-          !datasource ||
-          !datasource.retrieve ||
-          !datasource.retrieve.bulkDataURI
-        ) {
-          return Promise.reject(
-            'Invalid datasource object or retrieve function'
-          );
+        if (!datasource || !datasource.retrieve || !datasource.retrieve.bulkDataURI) {
+          return Promise.reject('Invalid datasource object or retrieve function');
         }
 
         const bulkDataPromise = datasource.retrieve.bulkDataURI({
@@ -74,10 +64,7 @@ async function checkAndLoadContourData(instance, datasource) {
         ROIContour.ContourSequence.forEach((Contour, index) => {
           const promise = resolvedPromises[index];
           if (promise.status === 'fulfilled') {
-            if (
-              Array.isArray(promise.value) &&
-              promise.value.every(Number.isFinite)
-            ) {
+            if (Array.isArray(promise.value) && promise.value.every(Number.isFinite)) {
               // If promise.value is already an array of numbers, use it directly
               Contour.ContourData = promise.value;
             } else {
@@ -85,13 +72,8 @@ async function checkAndLoadContourData(instance, datasource) {
               const uint8Array = new Uint8Array(promise.value);
               const textDecoder = new TextDecoder();
               const dataUint8Array = textDecoder.decode(uint8Array);
-              if (
-                typeof dataUint8Array === 'string' &&
-                dataUint8Array.includes('\\')
-              ) {
-                Contour.ContourData = dataUint8Array
-                  .split('\\')
-                  .map(parseFloat);
+              if (typeof dataUint8Array === 'string' && dataUint8Array.includes('\\')) {
+                Contour.ContourData = dataUint8Array.split('\\').map(parseFloat);
               } else {
                 Contour.ContourData = [];
               }
@@ -120,9 +102,8 @@ export default async function loadRTStruct(
   const { bulkDataURI } = dataSource.getConfig?.() || {};
 
   const { dicomLoaderService } = utilityModule.exports;
-  const imageIdSopInstanceUidPairs = _getImageIdSopInstanceUidPairsForDisplaySet(
-    referencedDisplaySet
-  );
+  const imageIdSopInstanceUidPairs =
+    _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet);
 
   // Set here is loading is asynchronous.
   // If this function throws its set back to false.
@@ -137,20 +118,14 @@ export default async function loadRTStruct(
     );
 
     const dicomData = DicomMessage.readFile(segArrayBuffer);
-    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(
-      dicomData.dict
-    );
+    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
     rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
     instance = rtStructDataset;
   } else {
     await checkAndLoadContourData(instance, dataSource);
   }
 
-  const {
-    StructureSetROISequence,
-    ROIContourSequence,
-    RTROIObservationsSequence,
-  } = instance;
+  const { StructureSetROISequence, ROIContourSequence, RTROIObservationsSequence } = instance;
 
   // Define our structure set entry and add it to the rtstruct module state.
   const structureSet = {
@@ -174,12 +149,8 @@ export default async function loadRTStruct(
 
     const contourPoints = [];
     for (let c = 0; c < ContourSequenceArray.length; c++) {
-      const {
-        ContourImageSequence,
-        ContourData,
-        NumberOfContourPoints,
-        ContourGeometricType,
-      } = ContourSequenceArray[c];
+      const { ContourImageSequence, ContourData, NumberOfContourPoints, ContourGeometricType } =
+        ContourSequenceArray[c];
 
       let isSupported = false;
 
@@ -229,9 +200,7 @@ const _getImageId = (imageIdSopInstanceUidPairs, sopInstanceUID) => {
       imageIdSopInstanceUidPairsEntry.sopInstanceUID === sopInstanceUID
   );
 
-  return imageIdSopInstanceUidPairsEntry
-    ? imageIdSopInstanceUidPairsEntry.imageId
-    : null;
+  return imageIdSopInstanceUidPairsEntry ? imageIdSopInstanceUidPairsEntry.imageId : null;
 };
 
 function _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet) {
@@ -252,8 +221,7 @@ function _setROIContourMetadata(
   isSupported
 ) {
   const StructureSetROI = StructureSetROISequence.find(
-    structureSetROI =>
-      structureSetROI.ROINumber === ROIContour.ReferencedROINumber
+    structureSetROI => structureSetROI.ROINumber === ROIContour.ReferencedROINumber
   );
 
   const ROIContourData = {
@@ -293,23 +261,15 @@ function _setROIContourDataColor(ROIContour, ROIContourData) {
   }
 }
 
-function _setROIContourRTROIObservations(
-  ROIContourData,
-  RTROIObservationsSequence,
-  ROINumber
-) {
+function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequence, ROINumber) {
   const RTROIObservations = RTROIObservationsSequence.find(
     RTROIObservations => RTROIObservations.ReferencedROINumber === ROINumber
   );
 
   if (RTROIObservations) {
     // Deep copy so we don't keep the reference to the dcmjs dataset entry.
-    const {
-      ObservationNumber,
-      ROIObservationDescription,
-      RTROIInterpretedType,
-      ROIInterpreter,
-    } = RTROIObservations;
+    const { ObservationNumber, ROIObservationDescription, RTROIInterpretedType, ROIInterpreter } =
+      RTROIObservations;
 
     ROIContourData.RTROIObservations = {
       ObservationNumber,

extensions/cornerstone-dicom-rt/src/utils/_hydrateRT.ts

@@ -1,13 +1,6 @@
-async function _hydrateRTDisplaySet({
-  rtDisplaySet,
-  viewportIndex,
-  servicesManager,
-}) {
-  const {
-    segmentationService,
-    hangingProtocolService,
-    viewportGridService,
-  } = servicesManager.services;
+async function _hydrateRTDisplaySet({ rtDisplaySet, viewportId, servicesManager }) {
+  const { segmentationService, hangingProtocolService, viewportGridService } =
+    servicesManager.services;
 
   const displaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
 
@@ -27,7 +20,7 @@ async function _hydrateRTDisplaySet({
   const { viewports } = viewportGridService.getState();
 
   const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-    viewportIndex,
+    viewportId,
     displaySetInstanceUID
   );
 
@@ -39,8 +32,8 @@ async function _hydrateRTDisplaySet({
   // is being displayed, if so we need to update the viewport to use volume viewport
   // (if already is not using it) since Cornerstone3D currently only supports
   // volume viewport for segmentation
-  viewports.forEach((viewport, index) => {
-    if (index === viewportIndex) {
+  viewports.forEach(viewport => {
+    if (viewport.viewportId === viewportId) {
       return;
     }
 
@@ -51,9 +44,16 @@ async function _hydrateRTDisplaySet({
 
     if (shouldDisplaySeg) {
       updatedViewports.push({
-        viewportIndex: index,
+        viewportId: viewport.viewportId,
         displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
         viewportOptions: {
+          // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+          // Used for segmentation hydration right now, since the logic to decide whether
+          // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+          // so we need to re-render (force update via change of the needsRerendering) so that React
+          // does the diffing and decides we should render this again (although the id and element has not changed)
+          // so that the CornerstoneViewportService can decide whether to render the segmentation or not.
+          needsRerendering: true,
           initialImageOptions: {
             preset: 'middle',
           },

extensions/cornerstone-dicom-rt/src/utils/initRTToolGroup.ts

@@ -1,10 +1,5 @@
-function createRTToolGroupAndAddTools(
-  ToolGroupService,
-  customizationService,
-  toolGroupId
-) {
-  const { tools } =
-    customizationService.get('cornerstone.overlayViewportTools') ?? {};
+function createRTToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
+  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
 
   return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
 }

extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts

@@ -10,17 +10,14 @@ const RESPONSE = {
 function promptHydrateRT({
   servicesManager,
   rtDisplaySet,
-  viewportIndex,
+  viewportId,
   toolGroupId = 'default',
   preHydrateCallbacks,
 }) {
   const { uiViewportDialogService } = servicesManager.services;
 
-  return new Promise(async function(resolve, reject) {
-    const promptResult = await _askHydrate(
-      uiViewportDialogService,
-      viewportIndex
-    );
+  return new Promise(async function (resolve, reject) {
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportId);
 
     if (promptResult === RESPONSE.HYDRATE_SEG) {
       preHydrateCallbacks?.forEach(callback => {
@@ -29,7 +26,7 @@ function promptHydrateRT({
 
       const isHydrated = await hydrateRTDisplaySet({
         rtDisplaySet,
-        viewportIndex,
+        viewportId,
         toolGroupId,
         servicesManager,
       });
@@ -39,8 +36,8 @@ function promptHydrateRT({
   });
 }
 
-function _askHydrate(uiViewportDialogService, viewportIndex) {
-  return new Promise(function(resolve, reject) {
+function _askHydrate(uiViewportDialogService, viewportId) {
+  return new Promise(function (resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
       {
@@ -60,7 +57,7 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     };
 
     uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'info',
       message,
       actions,

extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx

@@ -1,11 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import OHIF, { utils } from '@ohif/core';
-import {
-  ViewportActionBar,
-  useViewportGrid,
-  LoadingIndicatorTotalPercent,
-} from '@ohif/ui';
+import { ViewportActionBar, useViewportGrid, LoadingIndicatorTotalPercent } from '@ohif/ui';
 
 import _hydrateRTdisplaySet from '../utils/_hydrateRT';
 import promptHydrateRT from '../utils/promptHydrateRT';
@@ -21,7 +17,6 @@ function OHIFCornerstoneRTViewport(props) {
     children,
     displaySets,
     viewportOptions,
-    viewportIndex,
     viewportLabel,
     servicesManager,
     extensionManager,
@@ -36,7 +31,9 @@ function OHIFCornerstoneRTViewport(props) {
     customizationService,
   } = servicesManager.services;
 
-  const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
+  const viewportId = viewportOptions.viewportId;
+
+  const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportId}`;
 
   // RT viewport will always have a single display set
   if (displaySets.length > 1) {
@@ -67,12 +64,10 @@ function OHIFCornerstoneRTViewport(props) {
   // refs
   const referencedDisplaySetRef = useRef(null);
 
-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;
 
   const referencedDisplaySet = rtDisplaySet.getReferenceDisplaySet();
-  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
-    referencedDisplaySet
-  );
+  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(referencedDisplaySet);
 
   referencedDisplaySetRef.current = {
     displaySet: referencedDisplaySet,
@@ -93,9 +88,9 @@ function OHIFCornerstoneRTViewport(props) {
   };
 
   const storePresentationState = useCallback(() => {
-    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
       commandsManager.runCommand('storePresentation', {
-        viewportIndex,
+        viewportId,
       });
     });
   }, [viewportGrid]);
@@ -105,9 +100,7 @@ function OHIFCornerstoneRTViewport(props) {
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
     );
 
-    const {
-      displaySet: referencedDisplaySet,
-    } = referencedDisplaySetRef.current;
+    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
 
     // Todo: jump to the center of the first segment
     return (
@@ -124,7 +117,7 @@ function OHIFCornerstoneRTViewport(props) {
         onElementDisabled={onElementDisabled}
       ></Component>
     );
-  }, [viewportIndex, rtDisplaySet, toolGroupId]);
+  }, [viewportId, rtDisplaySet, toolGroupId]);
 
   const onSegmentChange = useCallback(
     direction => {
@@ -145,11 +138,7 @@ function OHIFCornerstoneRTViewport(props) {
         newSelectedSegmentIndex = numberOfSegments - 1;
       }
 
-      segmentationService.jumpToSegmentCenter(
-        segmentationId,
-        newSelectedSegmentIndex,
-        toolGroupId
-      );
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, toolGroupId);
       setSelectedSegment(newSelectedSegmentIndex);
     },
     [selectedSegment]
@@ -162,7 +151,7 @@ function OHIFCornerstoneRTViewport(props) {
 
     promptHydrateRT({
       servicesManager,
-      viewportIndex,
+      viewportId,
       rtDisplaySet,
       preHydrateCallbacks: [storePresentationState],
     }).then(isHydrated => {
@@ -170,24 +159,20 @@ function OHIFCornerstoneRTViewport(props) {
         setIsHydrated(true);
       }
     });
-  }, [servicesManager, viewportIndex, rtDisplaySet, rtIsLoading]);
+  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading]);
 
   useEffect(() => {
     const { unsubscribe } = segmentationService.subscribe(
       segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
       evt => {
-        if (
-          evt.rtDisplaySet.displaySetInstanceUID ===
-          rtDisplaySet.displaySetInstanceUID
-        ) {
+        if (evt.rtDisplaySet.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
           setRtIsLoading(false);
         }
 
         if (evt.overlappingSegments) {
           uiNotificationService.show({
             title: 'Overlapping Segments',
-            message:
-              'Overlapping segments detected which is not currently supported',
+            message: 'Overlapping segments detected which is not currently supported',
             type: 'warning',
           });
         }
@@ -222,12 +207,10 @@ function OHIFCornerstoneRTViewport(props) {
     const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
-        if (
-          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
-        ) {
+        const activeViewport = viewports.get(activeViewportId);
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
           viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [],
           });
         }
@@ -246,19 +229,13 @@ function OHIFCornerstoneRTViewport(props) {
       return;
     }
 
-    toolGroup = createRTToolGroupAndAddTools(
-      toolGroupService,
-      customizationService,
-      toolGroupId
-    );
+    toolGroup = createRTToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);
 
     setToolGroupCreated(true);
 
     return () => {
       // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(
-        toolGroupId
-      );
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
 
       toolGroupService.destroyToolGroup(toolGroupId);
     };
@@ -269,9 +246,7 @@ function OHIFCornerstoneRTViewport(props) {
 
     return () => {
       // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(
-        toolGroupId
-      );
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
       referencedDisplaySetRef.current = null;
     };
   }, [rtDisplaySet]);
@@ -292,7 +267,7 @@ function OHIFCornerstoneRTViewport(props) {
       return (
         child &&
         React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
           key: index,
         })
       );
@@ -322,7 +297,7 @@ function OHIFCornerstoneRTViewport(props) {
     storePresentationState();
     const isHydrated = await _hydrateRTDisplaySet({
       rtDisplaySet,
-      viewportIndex,
+      viewportId,
       servicesManager,
     });
 
@@ -350,26 +325,22 @@ function OHIFCornerstoneRTViewport(props) {
           currentSeries: SeriesNumber,
           seriesDescription: `RT Viewport ${SeriesDescription}`,
           patientInformation: {
-            patientName: PatientName
-              ? OHIF.utils.formatPN(PatientName.Alphabetic)
-              : '',
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
             thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
             spacing:
-              SpacingBetweenSlices !== undefined
-                ? `${SpacingBetweenSlices.toFixed(2)}mm`
-                : '',
+              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
             scanner: ManufacturerModelName || '',
           },
         }}
       />
 
-      <div className="relative flex flex-row w-full h-full overflow-hidden">
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
         {rtIsLoading && (
           <LoadingIndicatorTotalPercent
-            className="w-full h-full"
+            className="h-full w-full"
             totalNumbers={processingProgress.totalSegments}
             percentComplete={processingProgress.percentComplete}
             loadingText="Loading RTSTRUCT..."
@@ -384,7 +355,7 @@ function OHIFCornerstoneRTViewport(props) {
 
 OHIFCornerstoneRTViewport.propTypes = {
   displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
   customProps: PropTypes.object,

extensions/cornerstone-dicom-rt/src/viewports/_getStatusComponent.tsx

@@ -13,27 +13,28 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
     case true:
       StatusIcon = () => <Icon name="status-alert" />;
 
-      ToolTipMessage = () => (
-        <div>This Segmentation is loaded in the segmentation panel</div>
-      );
+      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
       break;
     case false:
       StatusIcon = () => (
-        <Icon className="text-aqua-pale" name="status-untracked" />
+        <Icon
+          className="text-aqua-pale"
+          name="status-untracked"
+        />
       );
 
       ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
   }
 
   const StatusArea = () => (
-    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
-      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
         <StatusIcon />
         <span className="ml-1">RTSTRUCT</span>
       </div>
       {!isHydrated && (
         <div
-          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
           // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
           onMouseUp={onStatusClick}
         >
@@ -46,7 +47,10 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   return (
     <>
       {ToolTipMessage && (
-        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
           <StatusArea />
         </Tooltip>
       )}

extensions/cornerstone-dicom-seg/.webpack/webpack.prod.js

@@ -40,13 +40,7 @@ module.exports = (env, argv) => {
       libraryTarget: 'umd',
       filename: pkg.main,
     },
-    externals: [
-      /\b(vtk.js)/,
-      /\b(dcmjs)/,
-      /\b(gl-matrix)/,
-      /^@ohif/,
-      /^@cornerstonejs/,
-    ],
+    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
     plugins: [
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,

extensions/cornerstone-dicom-seg/CHANGELOG.md

@@ -3,6 +3,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
 # [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg

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

@@ -10,7 +10,7 @@ module.exports = {
             modules: 'commonjs',
             debug: false,
           },
-          "@babel/preset-typescript",
+          '@babel/preset-typescript',
         ],
         '@babel/preset-react',
       ],
@@ -26,7 +26,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
@@ -35,7 +35,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       plugins: ['react-hot-loader/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],

extensions/cornerstone-dicom-seg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.7.0-beta.62",
+  "version": "3.7.0-beta.75",
   "description": "DICOM SEG read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -31,10 +31,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.62",
-    "@ohif/extension-cornerstone": "3.7.0-beta.62",
-    "@ohif/extension-default": "3.7.0-beta.62",
-    "@ohif/i18n": "3.7.0-beta.62",
+    "@ohif/core": "3.7.0-beta.75",
+    "@ohif/extension-cornerstone": "3.7.0-beta.75",
+    "@ohif/extension-default": "3.7.0-beta.75",
+    "@ohif/i18n": "3.7.0-beta.75",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

extensions/cornerstone-dicom-seg/src/getSopClassHandlerModule.js

@@ -1,10 +1,5 @@
 import { utils } from '@ohif/core';
-import {
-  metaData,
-  cache,
-  triggerEvent,
-  eventTarget,
-} from '@cornerstonejs/core';
+import { metaData, cache, triggerEvent, eventTarget } from '@cornerstonejs/core';
 import { adaptersSEG, Enums } from '@cornerstonejs/adapters';
 
 import { SOPClassHandlerId } from './id';
@@ -14,11 +9,7 @@ const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
 
 let loadPromises = {};
 
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager,
-  extensionManager
-) {
+function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
   const instance = instances[0];
 
   const {
@@ -71,8 +62,7 @@ function _getDisplaySetsFromSeries(
 
   const referencedSeries = referencedSeriesSequence[0];
 
-  displaySet.referencedImages =
-    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
   displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
 
   displaySet.getReferenceDisplaySet = () => {
@@ -87,8 +77,7 @@ function _getDisplaySetsFromSeries(
 
     const referencedDisplaySet = referencedDisplaySets[0];
 
-    displaySet.referencedDisplaySetInstanceUID =
-      referencedDisplaySet.displaySetInstanceUID;
+    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
 
     // Todo: this needs to be able to work with other reference volumes (other than streaming) such as nifti, etc.
     displaySet.referencedVolumeURI = referencedDisplaySet.displaySetInstanceUID;
@@ -121,10 +110,7 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
   // We don't want to fire multiple loads, so we'll wait for the first to finish
   // and also return the same promise to any other callers.
   loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
-    if (
-      !segDisplaySet.segments ||
-      Object.keys(segDisplaySet.segments).length === 0
-    ) {
+    if (!segDisplaySet.segments || Object.keys(segDisplaySet.segments).length === 0) {
       await _loadSegments({
         extensionManager,
         servicesManager,
@@ -149,12 +135,7 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
   return loadPromises[SOPInstanceUID];
 }
 
-async function _loadSegments({
-  extensionManager,
-  servicesManager,
-  segDisplaySet,
-  headers,
-}) {
+async function _loadSegments({ extensionManager, servicesManager, segDisplaySet, headers }) {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.common'
   );
@@ -162,15 +143,9 @@ async function _loadSegments({
   const { segmentationService } = servicesManager.services;
 
   const { dicomLoaderService } = utilityModule.exports;
-  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(
-    segDisplaySet,
-    null,
-    headers
-  );
+  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(segDisplaySet, null, headers);
 
-  const cachedReferencedVolume = cache.getVolume(
-    segDisplaySet.referencedVolumeId
-  );
+  const cachedReferencedVolume = cache.getVolume(segDisplaySet.referencedVolumeId);
 
   if (!cachedReferencedVolume) {
     throw new Error(
@@ -186,12 +161,9 @@ async function _loadSegments({
 
   eventTarget.addEventListener(Enums.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
     const { percentComplete } = evt.detail;
-    segmentationService._broadcastEvent(
-      segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE,
-      {
-        percentComplete,
-      }
-    );
+    segmentationService._broadcastEvent(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, {
+      percentComplete,
+    });
   });
 
   const results = await adaptersSEG.Cornerstone3D.Segmentation.generateToolState(
@@ -212,18 +184,12 @@ async function _loadSegments({
 
 function _segmentationExists(segDisplaySet, segmentationService) {
   // This should be abstracted with the CornerstoneCacheService
-  return segmentationService.getSegmentation(
-    segDisplaySet.displaySetInstanceUID
-  );
+  return segmentationService.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }
 
 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
   const getDisplaySetsFromSeries = instances => {
-    return _getDisplaySetsFromSeries(
-      instances,
-      servicesManager,
-      extensionManager
-    );
+    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
   };
 
   return [

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

@@ -9,9 +9,7 @@ import getHangingProtocolModule from './getHangingProtocolModule';
 import hydrateSEGDisplaySet from './utils/_hydrateSEG';
 
 const Component = React.lazy(() => {
-  return import(
-    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport'
-  );
+  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport');
 });
 
 const OHIFCornerstoneSEGViewport = props => {
@@ -38,11 +36,7 @@ const extension = {
    * iconName, iconLabel, label, component} object. Example of a panel module
    * is the StudyBrowserPanel that is provided by the default extension in OHIF.
    */
-  getPanelModule: ({
-    servicesManager,
-    commandsManager,
-    extensionManager,
-  }): Types.Panel[] => {
+  getPanelModule: ({ servicesManager, commandsManager, extensionManager }): Types.Panel[] => {
     const wrappedPanelSegmentation = () => {
       return (
         <PanelSegmentation
@@ -76,9 +70,7 @@ const extension = {
       );
     };
 
-    return [
-      { name: 'dicom-seg', component: ExtendedOHIFCornerstoneSEGViewport },
-    ];
+    return [{ name: 'dicom-seg', component: ExtendedOHIFCornerstoneSEGViewport }];
   },
   /**
    * SopClassHandlerModule should provide a list of sop class handlers that will be

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

@@ -5,10 +5,7 @@ import callInputDialog from './callInputDialog';
 import { useAppConfig } from '@state';
 import { useTranslation } from 'react-i18next';
 
-export default function PanelSegmentation({
-  servicesManager,
-  commandsManager,
-}) {
+export default function PanelSegmentation({ servicesManager, commandsManager }) {
   const { segmentationService, uiDialogService } = servicesManager.services;
   const [appConfig] = useAppConfig();
   const disableEditing = appConfig?.disableEditing;
@@ -19,9 +16,7 @@ export default function PanelSegmentation({
     segmentationService.getConfiguration()
   );
 
-  const [segmentations, setSegmentations] = useState(() =>
-    segmentationService.getSegmentations()
-  );
+  const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
 
   const [isMinimized, setIsMinimized] = useState({});
 
@@ -78,32 +73,20 @@ export default function PanelSegmentation({
   };
 
   const getToolGroupIds = segmentationId => {
-    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(
-      segmentationId
-    );
+    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
 
     return toolGroupIds;
   };
 
   const onSegmentClick = (segmentationId, segmentIndex) => {
-    segmentationService.setActiveSegmentForSegmentation(
-      segmentationId,
-      segmentIndex
-    );
+    segmentationService.setActiveSegmentForSegmentation(segmentationId, segmentIndex);
 
     const toolGroupIds = getToolGroupIds(segmentationId);
 
     toolGroupIds.forEach(toolGroupId => {
       // const toolGroupId =
-      segmentationService.setActiveSegmentationForToolGroup(
-        segmentationId,
-        toolGroupId
-      );
-      segmentationService.jumpToSegmentCenter(
-        segmentationId,
-        segmentIndex,
-        toolGroupId
-      );
+      segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
+      segmentationService.jumpToSegmentCenter(segmentationId, segmentIndex, toolGroupId);
     });
   };
 
@@ -118,11 +101,7 @@ export default function PanelSegmentation({
         return;
       }
 
-      segmentationService.setSegmentLabelForSegmentation(
-        segmentationId,
-        segmentIndex,
-        label
-      );
+      segmentationService.setSegmentLabelForSegmentation(segmentationId, segmentIndex, label);
     });
   };
 
@@ -191,7 +170,7 @@ export default function PanelSegmentation({
   );
 
   return (
-    <div className="flex flex-col flex-auto min-h-0 justify-between mt-1">
+    <div className="mt-1 flex min-h-0 flex-auto flex-col justify-between">
       {/* show segmentation table */}
       {segmentations?.length ? (
         <SegmentationGroupTable
@@ -213,25 +192,13 @@ export default function PanelSegmentation({
           onToggleMinimizeSegmentation={onToggleMinimizeSegmentation}
           segmentationConfig={{ initialConfig: segmentationConfiguration }}
           setRenderOutline={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'renderOutline',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
           }
           setOutlineOpacityActive={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'outlineOpacity',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
           }
           setRenderFill={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'renderFill',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
           }
           setRenderInactiveSegmentations={value =>
             _setSegmentationConfiguration(
@@ -241,25 +208,13 @@ export default function PanelSegmentation({
             )
           }
           setOutlineWidthActive={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'outlineWidthActive',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
           }
           setFillAlpha={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'fillAlpha',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
           }
           setFillAlphaInactive={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'fillAlphaInactive',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
           }
         />
       ) : null}
@@ -271,7 +226,6 @@ PanelSegmentation.propTypes = {
   commandsManager: PropTypes.shape({
     runCommand: PropTypes.func.isRequired,
   }),
-  appConfig: PropTypes.object.isRequired,
   servicesManager: PropTypes.shape({
     services: PropTypes.shape({
       segmentationService: PropTypes.shape({

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

@@ -39,7 +39,7 @@ function callInputDialog(uiDialogService, label, callback) {
               label="Enter the segment label"
               labelClassName="text-white text-[14px] leading-[1.2]"
               autoFocus
-              className="bg-black border-primary-main"
+              className="border-primary-main bg-black"
               type="text"
               value={value.label}
               onChange={event => {

extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts

@@ -1,13 +1,10 @@
 async function _hydrateSEGDisplaySet({
   segDisplaySet,
-  viewportIndex,
+  viewportId: targetViewportId,
   servicesManager,
 }) {
-  const {
-    segmentationService,
-    hangingProtocolService,
-    viewportGridService,
-  } = servicesManager.services;
+  const { segmentationService, hangingProtocolService, viewportGridService } =
+    servicesManager.services;
 
   const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
 
@@ -27,7 +24,7 @@ async function _hydrateSEGDisplaySet({
   const { viewports } = viewportGridService.getState();
 
   const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-    viewportIndex,
+    targetViewportId,
     displaySetInstanceUID
   );
 
@@ -37,8 +34,8 @@ async function _hydrateSEGDisplaySet({
   // is being displayed, if so we need to update the viewport to use volume viewport
   // (if already is not using it) since Cornerstone3D currently only supports
   // volume viewport for segmentation
-  viewports.forEach((viewport, index) => {
-    if (index === viewportIndex) {
+  viewports.forEach((viewport, viewportId) => {
+    if (targetViewportId === viewportId) {
       return;
     }
 
@@ -49,9 +46,16 @@ async function _hydrateSEGDisplaySet({
 
     if (shouldDisplaySeg) {
       updatedViewports.push({
-        viewportIndex: index,
+        viewportId,
         displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
         viewportOptions: {
+          // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+          // Used for segmentation hydration right now, since the logic to decide whether
+          // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+          // so we need to re-render (force update via change of the needsRerendering) so that React
+          // does the diffing and decides we should render this again (although the id and element has not changed)
+          // so that the CornerstoneViewportService can decide whether to render the segmentation or not.
+          needsRerendering: true,
           initialImageOptions: {
             preset: 'middle',
           },

extensions/cornerstone-dicom-seg/src/utils/dicomlabToRGB.ts

@@ -6,9 +6,7 @@ import dcmjs from 'dcmjs';
  * @returns The RGB color as an array of three integers between 0 and 255.
  */
 function dicomlabToRGB(cielab: number[]): number[] {
-  const rgb = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x =>
-    Math.round(x * 255)
-  );
+  const rgb = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x => Math.round(x * 255));
 
   return rgb;
 }

extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts

@@ -1,10 +1,5 @@
-function createSEGToolGroupAndAddTools(
-  ToolGroupService,
-  customizationService,
-  toolGroupId
-) {
-  const { tools } =
-    customizationService.get('cornerstone.overlayViewportTools') ?? {};
+function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
+  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
 
   return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
 }

extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts

@@ -7,19 +7,11 @@ const RESPONSE = {
   HYDRATE_SEG: 5,
 };
 
-function promptHydrateSEG({
-  servicesManager,
-  segDisplaySet,
-  viewportIndex,
-  preHydrateCallbacks,
-}) {
+function promptHydrateSEG({ servicesManager, segDisplaySet, viewportId, preHydrateCallbacks }) {
   const { uiViewportDialogService } = servicesManager.services;
 
-  return new Promise(async function(resolve, reject) {
-    const promptResult = await _askHydrate(
-      uiViewportDialogService,
-      viewportIndex
-    );
+  return new Promise(async function (resolve, reject) {
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportId);
 
     if (promptResult === RESPONSE.HYDRATE_SEG) {
       preHydrateCallbacks?.forEach(callback => {
@@ -28,7 +20,7 @@ function promptHydrateSEG({
 
       const isHydrated = await hydrateSEGDisplaySet({
         segDisplaySet,
-        viewportIndex,
+        viewportId,
         servicesManager,
       });
 
@@ -37,8 +29,8 @@ function promptHydrateSEG({
   });
 }
 
-function _askHydrate(uiViewportDialogService, viewportIndex) {
-  return new Promise(function(resolve, reject) {
+function _askHydrate(uiViewportDialogService, viewportId) {
+  return new Promise(function (resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
       {
@@ -58,7 +50,7 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     };
 
     uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'info',
       message,
       actions,

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

@@ -2,11 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import OHIF, { utils } from '@ohif/core';
-import {
-  LoadingIndicatorTotalPercent,
-  useViewportGrid,
-  ViewportActionBar,
-} from '@ohif/ui';
+import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionBar } from '@ohif/ui';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
 import hydrateSEGDisplaySet from '../utils/_hydrateSEG';
@@ -20,7 +16,6 @@ function OHIFCornerstoneSEGViewport(props) {
     children,
     displaySets,
     viewportOptions,
-    viewportIndex,
     viewportLabel,
     servicesManager,
     extensionManager,
@@ -28,6 +23,7 @@ function OHIFCornerstoneSEGViewport(props) {
   } = props;
 
   const { t } = useTranslation('SEGViewport');
+  const viewportId = viewportOptions.viewportId;
 
   const {
     displaySetService,
@@ -37,7 +33,7 @@ function OHIFCornerstoneSEGViewport(props) {
     customizationService,
   } = servicesManager.services;
 
-  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
+  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;
 
   // SEG viewport will always have a single display set
   if (displaySets.length > 1) {
@@ -67,7 +63,7 @@ function OHIFCornerstoneSEGViewport(props) {
   // refs
   const referencedDisplaySetRef = useRef(null);
 
-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;
 
   const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
   const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
@@ -94,9 +90,9 @@ function OHIFCornerstoneSEGViewport(props) {
   };
 
   const storePresentationState = useCallback(() => {
-    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
       commandsManager.runCommand('storePresentation', {
-        viewportIndex,
+        viewportId,
       });
     });
   }, [viewportGrid]);
@@ -106,9 +102,7 @@ function OHIFCornerstoneSEGViewport(props) {
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
     );
 
-    const {
-      displaySet: referencedDisplaySet,
-    } = referencedDisplaySetRef.current;
+    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
 
     // Todo: jump to the center of the first segment
     return (
@@ -126,7 +120,7 @@ function OHIFCornerstoneSEGViewport(props) {
         // initialImageIndex={initialImageIndex}
       ></Component>
     );
-  }, [viewportIndex, segDisplaySet, toolGroupId]);
+  }, [viewportId, segDisplaySet, toolGroupId]);
 
   const onSegmentChange = useCallback(
     direction => {
@@ -148,11 +142,7 @@ function OHIFCornerstoneSEGViewport(props) {
         newSelectedSegmentIndex = numberOfSegments - 1;
       }
 
-      segmentationService.jumpToSegmentCenter(
-        segmentationId,
-        newSelectedSegmentIndex,
-        toolGroupId
-      );
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, toolGroupId);
       setSelectedSegment(newSelectedSegmentIndex);
     },
     [selectedSegment]
@@ -165,7 +155,7 @@ function OHIFCornerstoneSEGViewport(props) {
 
     promptHydrateSEG({
       servicesManager,
-      viewportIndex,
+      viewportId,
       segDisplaySet,
       preHydrateCallbacks: [storePresentationState],
     }).then(isHydrated => {
@@ -173,24 +163,20 @@ function OHIFCornerstoneSEGViewport(props) {
         setIsHydrated(true);
       }
     });
-  }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);
+  }, [servicesManager, viewportId, segDisplaySet, segIsLoading]);
 
   useEffect(() => {
     const { unsubscribe } = segmentationService.subscribe(
       segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
       evt => {
-        if (
-          evt.segDisplaySet.displaySetInstanceUID ===
-          segDisplaySet.displaySetInstanceUID
-        ) {
+        if (evt.segDisplaySet.displaySetInstanceUID === segDisplaySet.displaySetInstanceUID) {
           setSegIsLoading(false);
         }
 
         if (evt.overlappingSegments) {
           uiNotificationService.show({
             title: 'Overlapping Segments',
-            message:
-              'Overlapping segments detected which is not currently supported',
+            message: 'Overlapping segments detected which is not currently supported',
             type: 'warning',
           });
         }
@@ -225,12 +211,10 @@ function OHIFCornerstoneSEGViewport(props) {
     const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
-        if (
-          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
-        ) {
+        const activeViewport = viewports.get(activeViewportId);
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
           viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [],
           });
         }
@@ -251,17 +235,11 @@ function OHIFCornerstoneSEGViewport(props) {
 
     // This creates a custom tool group which has the lifetime of this view
     // only, and does NOT interfere with currently displayed segmentations.
-    toolGroup = createSEGToolGroupAndAddTools(
-      toolGroupService,
-      customizationService,
-      toolGroupId
-    );
+    toolGroup = createSEGToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);
 
     return () => {
       // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(
-        toolGroupId
-      );
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
 
       // Only destroy the viewport specific implementation
       toolGroupService.destroyToolGroup(toolGroupId);
@@ -273,9 +251,7 @@ function OHIFCornerstoneSEGViewport(props) {
 
     return () => {
       // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(
-        toolGroupId
-      );
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
       referencedDisplaySetRef.current = null;
     };
   }, [segDisplaySet]);
@@ -296,7 +272,7 @@ function OHIFCornerstoneSEGViewport(props) {
       return (
         child &&
         React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
           key: index,
         })
       );
@@ -325,7 +301,7 @@ function OHIFCornerstoneSEGViewport(props) {
     storePresentationState();
     const isHydrated = await hydrateSEGDisplaySet({
       segDisplaySet,
-      viewportIndex,
+      viewportId,
       servicesManager,
     });
 
@@ -351,29 +327,23 @@ function OHIFCornerstoneSEGViewport(props) {
           studyDate: formatDate(StudyDate),
           seriesDescription: `SEG Viewport ${SeriesDescription}`,
           patientInformation: {
-            patientName: PatientName
-              ? OHIF.utils.formatPN(PatientName.Alphabetic)
-              : '',
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: SliceThickness
-              ? utils.roundNumber(SliceThickness, 2)
-              : '',
+            thickness: SliceThickness ? utils.roundNumber(SliceThickness, 2) : '',
             thicknessUnits: SliceThickness !== undefined ? 'mm' : '',
             spacing:
-              SpacingBetweenSlices !== undefined
-                ? utils.roundNumber(SpacingBetweenSlices, 2)
-                : '',
+              SpacingBetweenSlices !== undefined ? utils.roundNumber(SpacingBetweenSlices, 2) : '',
             scanner: ManufacturerModelName || '',
           },
         }}
       />
 
-      <div className="relative flex flex-row w-full h-full overflow-hidden">
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
         {segIsLoading && (
           <LoadingIndicatorTotalPercent
-            className="w-full h-full"
+            className="h-full w-full"
             totalNumbers={processingProgress.totalSegments}
             percentComplete={processingProgress.percentComplete}
             loadingText="Loading SEG..."
@@ -388,7 +358,7 @@ function OHIFCornerstoneSEGViewport(props) {
 
 OHIFCornerstoneSEGViewport.propTypes = {
   displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
   customProps: PropTypes.object,

extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx

@@ -13,27 +13,28 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
     case true:
       StatusIcon = () => <Icon name="status-alert" />;
 
-      ToolTipMessage = () => (
-        <div>This Segmentation is loaded in the segmentation panel</div>
-      );
+      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
       break;
     case false:
       StatusIcon = () => (
-        <Icon className="text-aqua-pale" name="status-untracked" />
+        <Icon
+          className="text-aqua-pale"
+          name="status-untracked"
+        />
       );
 
       ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
   }
 
   const StatusArea = () => (
-    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
-      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
         <StatusIcon />
         <span className="ml-1">SEG</span>
       </div>
       {!isHydrated && (
         <div
-          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
           // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
           onMouseUp={onStatusClick}
         >
@@ -46,7 +47,10 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   return (
     <>
       {ToolTipMessage && (
-        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
           <StatusArea />
         </Tooltip>
       )}

extensions/cornerstone-dicom-sr/.webpack/webpack.prod.js

@@ -41,13 +41,7 @@ module.exports = (env, argv) => {
       libraryTarget: 'umd',
       filename: pkg.main,
     },
-    externals: [
-      /\b(vtk.js)/,
-      /\b(dcmjs)/,
-      /\b(gl-matrix)/,
-      /^@ohif/,
-      /^@cornerstonejs/,
-    ],
+    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
     plugins: [
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,

extensions/cornerstone-dicom-sr/CHANGELOG.md

@@ -3,6 +3,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+
+### Features
+
+* **ImageOverlayViewerTool:** add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images ([#3163](https://github.com/OHIF/Viewers/issues/3163)) ([69115da](https://github.com/OHIF/Viewers/commit/69115da06d2d437b57e66608b435bb0bc919a90f))
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
 # [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
 
 

extensions/cornerstone-dicom-sr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.7.0-beta.62",
+  "version": "3.7.0-beta.75",
   "description": "OHIF extension for an SR Cornerstone Viewport",
   "author": "OHIF",
   "license": "MIT",
@@ -32,10 +32,10 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.62",
-    "@ohif/extension-cornerstone": "3.7.0-beta.62",
-    "@ohif/extension-measurement-tracking": "3.7.0-beta.62",
-    "@ohif/ui": "3.7.0-beta.62",
+    "@ohif/core": "3.7.0-beta.75",
+    "@ohif/extension-cornerstone": "3.7.0-beta.75",
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.75",
+    "@ohif/ui": "3.7.0-beta.75",
     "dcmjs": "^0.29.5",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.11.4",
-    "@cornerstonejs/core": "^1.11.4",
-    "@cornerstonejs/tools": "^1.11.4",
+    "@cornerstonejs/adapters": "^1.13.2",
+    "@cornerstonejs/core": "^1.13.2",
+    "@cornerstonejs/tools": "^1.13.2",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone-dicom-sr/src/commandsModule.js

@@ -17,11 +17,7 @@ const { log } = OHIF;
  * @param options Naturalized DICOM JSON headers to merge into the displaySet.
  *
  */
-const _generateReport = (
-  measurementData,
-  additionalFindingTypes,
-  options = {}
-) => {
+const _generateReport = (measurementData, additionalFindingTypes, options = {}) => {
   const filteredToolState = getFilteredCornerstoneToolState(
     measurementData,
     additionalFindingTypes
@@ -54,16 +50,8 @@ const commandsModule = ({}) => {
      * as opposed to Finding Sites.
      * that you wish to serialize.
      */
-    downloadReport: ({
-      measurementData,
-      additionalFindingTypes,
-      options = {},
-    }) => {
-      const srDataset = actions.generateReport(
-        measurementData,
-        additionalFindingTypes,
-        options
-      );
+    downloadReport: ({ measurementData, additionalFindingTypes, options = {} }) => {
+      const srDataset = actions.generateReport(measurementData, additionalFindingTypes, options);
       const reportBlob = dcmjs.data.datasetToBlob(srDataset);
 
       //Create a URL for the binary.
@@ -91,28 +79,19 @@ const commandsModule = ({}) => {
       log.info('[DICOMSR] storeMeasurements');
 
       if (!dataSource || !dataSource.store || !dataSource.store.dicom) {
-        log.error(
-          '[DICOMSR] datasource has no dataSource.store.dicom endpoint!'
-        );
+        log.error('[DICOMSR] datasource has no dataSource.store.dicom endpoint!');
         return Promise.reject({});
       }
 
       try {
-        const naturalizedReport = _generateReport(
-          measurementData,
-          additionalFindingTypes,
-          options
-        );
+        const naturalizedReport = _generateReport(measurementData, additionalFindingTypes, options);
 
         const { StudyInstanceUID, ContentSequence } = naturalizedReport;
         // The content sequence has 5 or more elements, of which
         // the `[4]` element contains the annotation data, so this is
         // checking that there is some annotation data present.
         if (!ContentSequence?.[4].ContentSequence?.length) {
-          console.log(
-            'naturalizedReport missing imaging content',
-            naturalizedReport
-          );
+          console.log('naturalizedReport missing imaging content', naturalizedReport);
           throw new Error('Invalid report, no content');
         }
 
@@ -130,12 +109,8 @@ const commandsModule = ({}) => {
         return naturalizedReport;
       } catch (error) {
         console.warn(error);
-        log.error(
-          `[DICOMSR] Error while saving the measurements: ${error.message}`
-        );
-        throw new Error(
-          error.message || 'Error while saving the measurements.'
-        );
+        log.error(`[DICOMSR] Error while saving the measurements: ${error.message}`);
+        throw new Error(error.message || 'Error while saving the measurements.');
       }
     },
   };

extensions/cornerstone-dicom-sr/src/getSopClassHandlerModule.ts

@@ -29,9 +29,7 @@ const validateSameStudyUID = (uid: string, instances): void => {
   instances.forEach(it => {
     if (it.StudyInstanceUID !== uid) {
       console.warn('Not all instances have the same UID', uid, it);
-      throw new Error(
-        `Instances ${it.SOPInstanceUID} does not belong to ${uid}`
-      );
+      throw new Error(`Instances ${it.SOPInstanceUID} does not belong to ${uid}`);
     }
   });
 };
@@ -51,10 +49,7 @@ const CodeNameCodeSequenceValues = {
 
 const CodingSchemeDesignators = {
   SRT: 'SRT',
-  CornerstoneCodeSchemes: [
-    Cornerstone3DCodeScheme.CodingSchemeDesignator,
-    'CST4',
-  ],
+  CornerstoneCodeSchemes: [Cornerstone3DCodeScheme.CodingSchemeDesignator, 'CST4'],
 };
 
 const RELATIONSHIP_TYPE = {
@@ -71,10 +66,7 @@ const CORNERSTONE_FREETEXT_CODE_VALUE = 'CORNERSTONEFREETEXT';
  * @param instances is a list of instances from THIS series that are not
  *     in this DICOM SR Display Set already.
  */
-function addInstances(
-  instances: InstanceMetadata[],
-  displaySetService: DisplaySetService
-) {
+function addInstances(instances: InstanceMetadata[], displaySetService: DisplaySetService) {
   this.instances.push(...instances);
   utils.sortStudyInstances(this.instances);
   // The last instance is the newest one, so is the one most interesting.
@@ -93,11 +85,7 @@ function addInstances(
  * @param servicesManager is the services that can be used for creating
  * @returns The list of display sets created for the given instances object
  */
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager,
-  extensionManager
-) {
+function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
   // If the series has no instances, stop here
   if (!instances || !instances.length) {
     throw new Error('No instances were provided');
@@ -123,8 +111,7 @@ function _getDisplaySetsFromSeries(
 
   if (
     !ConceptNameCodeSequence ||
-    ConceptNameCodeSequence.CodeValue !==
-      CodeNameCodeSequenceValues.ImagingMeasurementReport
+    ConceptNameCodeSequence.CodeValue !== CodeNameCodeSequenceValues.ImagingMeasurementReport
   ) {
     servicesManager.services.uiNotificationService.show({
       title: 'DICOM SR',
@@ -184,36 +171,21 @@ function _load(displaySet, servicesManager, extensionManager) {
 
   // Check currently added displaySets and add measurements if the sources exist.
   displaySetService.activeDisplaySets.forEach(activeDisplaySet => {
-    _checkIfCanAddMeasurementsToDisplaySet(
-      displaySet,
-      activeDisplaySet,
-      dataSource
-    );
+    _checkIfCanAddMeasurementsToDisplaySet(displaySet, activeDisplaySet, dataSource);
   });
 
   // Subscribe to new displaySets as the source may come in after.
-  displaySetService.subscribe(
-    displaySetService.EVENTS.DISPLAY_SETS_ADDED,
-    data => {
-      const { displaySetsAdded } = data;
-      // If there are still some measurements that have not yet been loaded into cornerstone,
-      // See if we can load them onto any of the new displaySets.
-      displaySetsAdded.forEach(newDisplaySet => {
-        _checkIfCanAddMeasurementsToDisplaySet(
-          displaySet,
-          newDisplaySet,
-          dataSource
-        );
-      });
-    }
-  );
+  displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, data => {
+    const { displaySetsAdded } = data;
+    // If there are still some measurements that have not yet been loaded into cornerstone,
+    // See if we can load them onto any of the new displaySets.
+    displaySetsAdded.forEach(newDisplaySet => {
+      _checkIfCanAddMeasurementsToDisplaySet(displaySet, newDisplaySet, dataSource);
+    });
+  });
 }
 
-function _checkIfCanAddMeasurementsToDisplaySet(
-  srDisplaySet,
-  newDisplaySet,
-  dataSource
-) {
+function _checkIfCanAddMeasurementsToDisplaySet(srDisplaySet, newDisplaySet, dataSource) {
   let unloadedMeasurements = srDisplaySet.measurements.filter(
     measurement => measurement.loaded === false
   );
@@ -248,8 +220,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
     const { coords } = measurement;
 
     coords.forEach(coord => {
-      const SOPInstanceUID =
-        coord.ReferencedSOPSequence.ReferencedSOPInstanceUID;
+      const SOPInstanceUID = coord.ReferencedSOPSequence.ReferencedSOPInstanceUID;
 
       if (!SOPInstanceUIDs.includes(SOPInstanceUID)) {
         SOPInstanceUIDs.push(SOPInstanceUID);
@@ -257,9 +228,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
     });
   });
 
-  const imageIdsForDisplaySet = dataSource.getImageIdsForDisplaySet(
-    newDisplaySet
-  );
+  const imageIdsForDisplaySet = dataSource.getImageIdsForDisplaySet(newDisplaySet);
 
   for (const imageId of imageIdsForDisplaySet) {
     if (!unloadedMeasurements.length) {
@@ -267,25 +236,13 @@ function _checkIfCanAddMeasurementsToDisplaySet(
       return;
     }
 
-    const { SOPInstanceUID, frameNumber } = metadataProvider.getUIDsFromImageID(
-      imageId
-    );
+    const { SOPInstanceUID, frameNumber } = metadataProvider.getUIDsFromImageID(imageId);
 
     if (SOPInstanceUIDs.includes(SOPInstanceUID)) {
       for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
         const measurement = unloadedMeasurements[j];
-        if (
-          _measurementReferencesSOPInstanceUID(
-            measurement,
-            SOPInstanceUID,
-            frameNumber
-          )
-        ) {
-          addMeasurement(
-            measurement,
-            imageId,
-            newDisplaySet.displaySetInstanceUID
-          );
+        if (_measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber)) {
+          addMeasurement(measurement, imageId, newDisplaySet.displaySetInstanceUID);
 
           unloadedMeasurements.splice(j, 1);
         }
@@ -294,11 +251,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
   }
 }
 
-function _measurementReferencesSOPInstanceUID(
-  measurement,
-  SOPInstanceUID,
-  frameNumber
-) {
+function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber) {
   const { coords } = measurement;
 
   // NOTE: The ReferencedFrameNumber can be multiple values according to the DICOM
@@ -324,11 +277,7 @@ function _measurementReferencesSOPInstanceUID(
 
 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
   const getDisplaySetsFromSeries = instances => {
-    return _getDisplaySetsFromSeries(
-      instances,
-      servicesManager,
-      extensionManager
-    );
+    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
   };
 
   return [
@@ -343,30 +292,22 @@ function getSopClassHandlerModule({ servicesManager, extensionManager }) {
 function _getMeasurements(ImagingMeasurementReportContentSequence) {
   const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
     item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.ImagingMeasurements
+      item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImagingMeasurements
   );
 
-  const MeasurementGroups = _getSequenceAsArray(
-    ImagingMeasurements.ContentSequence
-  ).filter(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.MeasurementGroup
+  const MeasurementGroups = _getSequenceAsArray(ImagingMeasurements.ContentSequence).filter(
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.MeasurementGroup
   );
 
-  const mergedContentSequencesByTrackingUniqueIdentifiers = _getMergedContentSequencesByTrackingUniqueIdentifiers(
-    MeasurementGroups
-  );
+  const mergedContentSequencesByTrackingUniqueIdentifiers =
+    _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups);
 
   const measurements = [];
 
   Object.keys(mergedContentSequencesByTrackingUniqueIdentifiers).forEach(
     trackingUniqueIdentifier => {
       const mergedContentSequence =
-        mergedContentSequencesByTrackingUniqueIdentifiers[
-          trackingUniqueIdentifier
-        ];
+        mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier];
 
       const measurement = _processMeasurement(mergedContentSequence);
 
@@ -379,15 +320,11 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
   return measurements;
 }
 
-function _getMergedContentSequencesByTrackingUniqueIdentifiers(
-  MeasurementGroups
-) {
+function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups) {
   const mergedContentSequencesByTrackingUniqueIdentifiers = {};
 
   MeasurementGroups.forEach(MeasurementGroup => {
-    const ContentSequence = _getSequenceAsArray(
-      MeasurementGroup.ContentSequence
-    );
+    const ContentSequence = _getSequenceAsArray(MeasurementGroup.ContentSequence);
 
     const TrackingUniqueIdentifierItem = ContentSequence.find(
       item =>
@@ -396,22 +333,16 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(
     );
 
     if (!TrackingUniqueIdentifierItem) {
-      console.warn(
-        'No Tracking Unique Identifier, skipping ambiguous measurement.'
-      );
+      console.warn('No Tracking Unique Identifier, skipping ambiguous measurement.');
     }
 
     const trackingUniqueIdentifier = TrackingUniqueIdentifierItem.UID;
 
-    if (
-      mergedContentSequencesByTrackingUniqueIdentifiers[
-        trackingUniqueIdentifier
-      ] === undefined
-    ) {
+    if (mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier] === undefined) {
       // Add the full ContentSequence
-      mergedContentSequencesByTrackingUniqueIdentifiers[
-        trackingUniqueIdentifier
-      ] = [...ContentSequence];
+      mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier] = [
+        ...ContentSequence,
+      ];
     } else {
       // Add the ContentSequence minus the tracking identifier, as we have this
       // Information in the merged ContentSequence anyway.
@@ -420,9 +351,7 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(
           item.ConceptNameCodeSequence.CodeValue !==
           CodeNameCodeSequenceValues.TrackingUniqueIdentifier
         ) {
-          mergedContentSequencesByTrackingUniqueIdentifiers[
-            trackingUniqueIdentifier
-          ].push(item);
+          mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier].push(item);
         }
       });
     }
@@ -447,18 +376,12 @@ function _processTID1410Measurement(mergedContentSequence) {
   // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
   // And non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D
 
-  const graphicItem = mergedContentSequence.find(
-    group => group.ValueType === 'SCOORD'
-  );
+  const graphicItem = mergedContentSequence.find(group => group.ValueType === 'SCOORD');
 
-  const UIDREFContentItem = mergedContentSequence.find(
-    group => group.ValueType === 'UIDREF'
-  );
+  const UIDREFContentItem = mergedContentSequence.find(group => group.ValueType === 'UIDREF');
 
   const TrackingIdentifierContentItem = mergedContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.TrackingIdentifier
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.TrackingIdentifier
   );
 
   if (!graphicItem) {
@@ -468,9 +391,7 @@ function _processTID1410Measurement(mergedContentSequence) {
     return;
   }
 
-  const NUMContentItems = mergedContentSequence.filter(
-    group => group.ValueType === 'NUM'
-  );
+  const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');
 
   const measurement = {
     loaded: false,
@@ -485,10 +406,7 @@ function _processTID1410Measurement(mergedContentSequence) {
 
     if (MeasuredValueSequence) {
       measurement.labels.push(
-        _getLabelFromMeasuredValueSequence(
-          ConceptNameCodeSequence,
-          MeasuredValueSequence
-        )
+        _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence)
       );
     }
   });
@@ -497,32 +415,22 @@ function _processTID1410Measurement(mergedContentSequence) {
 }
 
 function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
-  const NUMContentItems = mergedContentSequence.filter(
-    group => group.ValueType === 'NUM'
-  );
+  const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');
 
-  const UIDREFContentItem = mergedContentSequence.find(
-    group => group.ValueType === 'UIDREF'
-  );
+  const UIDREFContentItem = mergedContentSequence.find(group => group.ValueType === 'UIDREF');
 
   const TrackingIdentifierContentItem = mergedContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.TrackingIdentifier
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.TrackingIdentifier
   );
 
   const finding = mergedContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.Finding
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.Finding
   );
 
   const findingSites = mergedContentSequence.filter(
     item =>
-      item.ConceptNameCodeSequence.CodingSchemeDesignator ===
-        CodingSchemeDesignators.SRT &&
-      item.ConceptNameCodeSequence.CodeValue ===
-        CodeNameCodeSequenceValues.FindingSite
+      item.ConceptNameCodeSequence.CodingSchemeDesignator === CodingSchemeDesignators.SRT &&
+      item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.FindingSite
   );
 
   const measurement = {
@@ -538,8 +446,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
     CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
       finding.ConceptCodeSequence.CodingSchemeDesignator
     ) &&
-    finding.ConceptCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.CornerstoneFreeText
+    finding.ConceptCodeSequence.CodeValue === CodeNameCodeSequenceValues.CornerstoneFreeText
   ) {
     measurement.labels.push({
       label: CORNERSTONE_FREETEXT_CODE_VALUE,
@@ -554,8 +461,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
         CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
           FindingSite.ConceptCodeSequence.CodingSchemeDesignator
         ) &&
-        FindingSite.ConceptCodeSequence.CodeValue ===
-          CodeNameCodeSequenceValues.CornerstoneFreeText
+        FindingSite.ConceptCodeSequence.CodeValue === CodeNameCodeSequenceValues.CornerstoneFreeText
     );
 
     if (cornerstoneFreeTextFindingSite) {
@@ -567,18 +473,12 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
   }
 
   NUMContentItems.forEach(item => {
-    const {
-      ConceptNameCodeSequence,
-      ContentSequence,
-      MeasuredValueSequence,
-    } = item;
+    const { ConceptNameCodeSequence, ContentSequence, MeasuredValueSequence } = item;
 
     const { ValueType } = ContentSequence;
 
     if (!ValueType === 'SCOORD') {
-      console.warn(
-        `Graphic ${ValueType} not currently supported, skipping annotation.`
-      );
+      console.warn(`Graphic ${ValueType} not currently supported, skipping annotation.`);
 
       return;
     }
@@ -591,10 +491,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
 
     if (MeasuredValueSequence) {
       measurement.labels.push(
-        _getLabelFromMeasuredValueSequence(
-          ConceptNameCodeSequence,
-          MeasuredValueSequence
-        )
+        _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence)
       );
     }
   });
@@ -634,17 +531,12 @@ function _getCoordsFromSCOORDOrSCOORD3D(item) {
   return coords;
 }
 
-function _getLabelFromMeasuredValueSequence(
-  ConceptNameCodeSequence,
-  MeasuredValueSequence
-) {
+function _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence) {
   const { CodeMeaning } = ConceptNameCodeSequence;
   const { NumericValue, MeasurementUnitsCodeSequence } = MeasuredValueSequence;
   const { CodeValue } = MeasurementUnitsCodeSequence;
 
-  const formatedNumericValue = NumericValue
-    ? Number(NumericValue).toFixed(2)
-    : '';
+  const formatedNumericValue = NumericValue ? Number(NumericValue).toFixed(2) : '';
 
   return {
     label: CodeMeaning,
@@ -654,17 +546,11 @@ function _getLabelFromMeasuredValueSequence(
 
 function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
   const ImageLibrary = ImagingMeasurementReportContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.ImageLibrary
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImageLibrary
   );
 
-  const ImageLibraryGroup = _getSequenceAsArray(
-    ImageLibrary.ContentSequence
-  ).find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.ImageLibraryGroup
+  const ImageLibraryGroup = _getSequenceAsArray(ImageLibrary.ContentSequence).find(
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImageLibraryGroup
   );
 
   const referencedImages = [];

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import getHangingProtocolModule, {
-  srProtocol,
-} from './getHangingProtocolModule';
+import getHangingProtocolModule, { srProtocol } from './getHangingProtocolModule';
 import onModeEnter from './onModeEnter';
 import getCommandsModule from './commandsModule';
 import preRegistration from './init';
@@ -12,9 +10,7 @@ import hydrateStructuredReport from './utils/hydrateStructuredReport';
 import createReferencedImageDisplaySet from './utils/createReferencedImageDisplaySet';
 
 const Component = React.lazy(() => {
-  return import(
-    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneSRViewport'
-  );
+  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneSRViewport');
 });
 
 const OHIFCornerstoneSRViewport = props => {
@@ -58,7 +54,7 @@ const dicomSRExtension = {
   },
   getCommandsModule,
   getSopClassHandlerModule,
-  // Include dynmically computed values such as toolNames not known till instantiation
+  // Include dynamically computed values such as toolNames not known till instantiation
   getUtilityModule({ servicesManager }) {
     return [
       {

extensions/cornerstone-dicom-sr/src/init.ts

@@ -18,9 +18,7 @@ import toolNames from './tools/toolNames';
 /**
  * @param {object} configuration
  */
-export default function init({
-  configuration = {},
-}: Types.Extensions.ExtensionParams): void {
+export default function init({ configuration = {} }: Types.Extensions.ExtensionParams): void {
   addTool(DICOMSRDisplayTool);
   addToolInstance(toolNames.SRLength, LengthTool, {});
   addToolInstance(toolNames.SRBidirectional, BidirectionalTool);

extensions/cornerstone-dicom-sr/src/tools/DICOMSRDisplayTool.ts

@@ -40,49 +40,32 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
   isPointNearTool = () => null;
   getHandleNearImagePoint = () => null;
 
-  renderAnnotation = (
-    enabledElement: Types.IEnabledElement,
-    svgDrawingHelper: any
-  ): void => {
+  renderAnnotation = (enabledElement: Types.IEnabledElement, svgDrawingHelper: any): void => {
     const { viewport } = enabledElement;
     const { element } = viewport;
 
-    let annotations = annotation.state.getAnnotations(
-      this.getToolName(),
-      element
-    );
+    let annotations = annotation.state.getAnnotations(this.getToolName(), element);
 
     // Todo: We don't need this anymore, filtering happens in triggerAnnotationRender
     if (!annotations?.length) {
       return;
     }
 
-    annotations = this.filterInteractableAnnotationsForElement(
-      element,
-      annotations
-    );
+    annotations = this.filterInteractableAnnotationsForElement(element, annotations);
 
     if (!annotations?.length) {
       return;
     }
 
-    const trackingUniqueIdentifiersForElement = getTrackingUniqueIdentifiersForElement(
-      element
-    );
+    const trackingUniqueIdentifiersForElement = getTrackingUniqueIdentifiersForElement(element);
 
-    const {
-      activeIndex,
-      trackingUniqueIdentifiers,
-    } = trackingUniqueIdentifiersForElement;
+    const { activeIndex, trackingUniqueIdentifiers } = trackingUniqueIdentifiersForElement;
 
-    const activeTrackingUniqueIdentifier =
-      trackingUniqueIdentifiers[activeIndex];
+    const activeTrackingUniqueIdentifier = trackingUniqueIdentifiers[activeIndex];
 
     // Filter toolData to only render the data for the active SR.
     const filteredAnnotations = annotations.filter(annotation =>
-      trackingUniqueIdentifiers.includes(
-        annotation.data?.cachedStats?.TrackingUniqueIdentifier
-      )
+      trackingUniqueIdentifiers.includes(annotation.data?.cachedStats?.TrackingUniqueIdentifier)
     );
 
     if (!viewport._actors?.size) {
@@ -138,8 +121,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
             break;
           case SCOORD_TYPES.ELLIPSE:
             renderMethod = this.renderEllipse;
-            canvasCoordinatesAdapter =
-              utilities.math.ellipse.getCanvasEllipseCorners;
+            canvasCoordinatesAdapter = utilities.math.ellipse.getCanvasEllipseCorners;
             break;
           default:
             throw new Error(`Unsupported GraphicType: ${GraphicType}`);
@@ -221,15 +203,9 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
     renderableData.map((data, index) => {
       canvasCoordinates = data.map(p => viewport.worldToCanvas(p));
       const handleGroupUID = '0';
-      drawing.drawHandles(
-        svgDrawingHelper,
-        annotationUID,
-        handleGroupUID,
-        canvasCoordinates,
-        {
-          color: options.color,
-        }
-      );
+      drawing.drawHandles(svgDrawingHelper, annotationUID, handleGroupUID, canvasCoordinates, {
+        color: options.color,
+      });
     });
   }
 
@@ -248,10 +224,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
       canvasCoordinates.push(viewport.worldToCanvas(point));
 
       // We get the other point for the arrow by using the image size
-      const imagePixelModule = metaData.get(
-        'imagePixelModule',
-        referencedImageId
-      );
+      const imagePixelModule = metaData.get('imagePixelModule', referencedImageId);
 
       let xOffset = 10;
       let yOffset = 10;
@@ -309,9 +282,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
 
       const rotation = viewport.getRotation();
 
-      canvasCoordinates = ellipsePointsWorld.map(p =>
-        viewport.worldToCanvas(p)
-      );
+      canvasCoordinates = ellipsePointsWorld.map(p => viewport.worldToCanvas(p));
       let canvasCorners;
       if (rotation == 90 || rotation == 270) {
         canvasCorners = utilities.math.ellipse.getCanvasEllipseCorners([
@@ -366,23 +337,14 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
       adaptedCanvasCoordinates = canvasCoordinatesAdapter(canvasCoordinates);
     }
     const textLines = this._getTextBoxLinesFromLabels(label);
-    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(
-      adaptedCanvasCoordinates
-    );
+    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(adaptedCanvasCoordinates);
 
-    annotation.data.handles.textBox.worldPosition = viewport.canvasToWorld(
-      canvasTextBoxCoords
-    );
+    annotation.data.handles.textBox.worldPosition = viewport.canvasToWorld(canvasTextBoxCoords);
 
-    const textBoxPosition = viewport.worldToCanvas(
-      annotation.data.handles.textBox.worldPosition
-    );
+    const textBoxPosition = viewport.worldToCanvas(annotation.data.handles.textBox.worldPosition);
 
     const textBoxUID = '1';
-    const textBoxOptions = this.getLinkedTextBoxStyle(
-      styleSpecifier,
-      annotation
-    );
+    const textBoxOptions = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
 
     const boundingBox = drawing.drawLinkedTextBox(
       svgDrawingHelper,

extensions/cornerstone-dicom-sr/src/tools/modules/dicomSRModule.js

@@ -27,15 +27,11 @@ function setTrackingUniqueIdentifiersForElement(
   };
 }
 
-function setActiveTrackingUniqueIdentifierForElement(
-  element,
-  TrackingUniqueIdentifier
-) {
+function setActiveTrackingUniqueIdentifierForElement(element, TrackingUniqueIdentifier) {
   const enabledElement = getEnabledElement(element);
   const { viewport } = enabledElement;
 
-  const trackingIdentifiersForElement =
-    state.trackingIdentifiersByViewportId[viewport.id];
+  const trackingIdentifiersForElement = state.trackingIdentifiersByViewportId[viewport.id];
 
   if (trackingIdentifiersForElement) {
     const activeIndex = trackingIdentifiersForElement.trackingUniqueIdentifiers.findIndex(

extensions/cornerstone-dicom-sr/src/utils/addMeasurement.ts

@@ -8,11 +8,7 @@ const EPSILON = 1e-4;
 
 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 
-export default function addMeasurement(
-  measurement,
-  imageId,
-  displaySetInstanceUID
-) {
+export default function addMeasurement(measurement, imageId, displaySetInstanceUID) {
   // TODO -> Render rotated ellipse .
   const toolName = toolNames.DICOMSRDisplay;
 
@@ -31,12 +27,7 @@ export default function addMeasurement(
     }
 
     measurementData.renderableData[GraphicType].push(
-      _getRenderableData(
-        GraphicType,
-        GraphicData,
-        imageId,
-        measurement.TrackingIdentifier
-      )
+      _getRenderableData(GraphicType, GraphicData, imageId, measurement.TrackingIdentifier)
     );
   });
 
@@ -86,12 +77,7 @@ export default function addMeasurement(
   delete measurement.coords;
 }
 
-function _getRenderableData(
-  GraphicType,
-  GraphicData,
-  imageId,
-  TrackingIdentifier
-) {
+function _getRenderableData(GraphicType, GraphicData, imageId, TrackingIdentifier) {
   const [cornerstoneTag, toolName] = TrackingIdentifier.split(':');
 
   let renderableData: csTypes.Point3[];
@@ -207,38 +193,22 @@ function _getRenderableData(
         throw new Error('imageId does not have imagePlaneModule metadata');
       }
 
-      const {
-        columnCosines,
-      }: { columnCosines: csTypes.Point3 } = imagePlaneModule;
+      const { columnCosines }: { columnCosines: csTypes.Point3 } = imagePlaneModule;
 
       // find which axis is parallel to the columnCosines
       const columnCosinesVec = vec3.fromValues(...columnCosines);
 
-      const projectedMajorAxisOnColVec = Math.abs(
-        vec3.dot(columnCosinesVec, majorAxisVec)
-      );
-      const projectedMinorAxisOnColVec = Math.abs(
-        vec3.dot(columnCosinesVec, minorAxisVec)
-      );
+      const projectedMajorAxisOnColVec = Math.abs(vec3.dot(columnCosinesVec, majorAxisVec));
+      const projectedMinorAxisOnColVec = Math.abs(vec3.dot(columnCosinesVec, minorAxisVec));
 
       const absoluteOfMajorDotProduct = Math.abs(projectedMajorAxisOnColVec);
       const absoluteOfMinorDotProduct = Math.abs(projectedMinorAxisOnColVec);
 
       renderableData = [];
       if (Math.abs(absoluteOfMajorDotProduct - 1) < EPSILON) {
-        renderableData = [
-          pointsWorld[0],
-          pointsWorld[1],
-          pointsWorld[2],
-          pointsWorld[3],
-        ];
+        renderableData = [pointsWorld[0], pointsWorld[1], pointsWorld[2], pointsWorld[3]];
       } else if (Math.abs(absoluteOfMinorDotProduct - 1) < EPSILON) {
-        renderableData = [
-          pointsWorld[2],
-          pointsWorld[3],
-          pointsWorld[0],
-          pointsWorld[1],
-        ];
+        renderableData = [pointsWorld[2], pointsWorld[3], pointsWorld[0], pointsWorld[1]];
       } else {
         console.warn('OBLIQUE ELLIPSE NOT YET SUPPORTED');
       }

extensions/cornerstone-dicom-sr/src/utils/addToolInstance.ts

@@ -1,10 +1,6 @@
 import { addTool } from '@cornerstonejs/tools';
 
-export default function addToolInstance(
-  name: string,
-  toolClass,
-  configuration?
-): void {
+export default function addToolInstance(name: string, toolClass, configuration?): void {
   class InstanceClass extends toolClass {
     static toolName = name;
   }

extensions/cornerstone-dicom-sr/src/utils/createReferencedImageDisplaySet.ts

@@ -3,13 +3,8 @@ import { DisplaySetService, classes } from '@ohif/core';
 const ImageSet = classes.ImageSet;
 
 const findInstance = (measurement, displaySetService: DisplaySetService) => {
-  const {
-    displaySetInstanceUID,
-    ReferencedSOPInstanceUID: sopUid,
-  } = measurement;
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const { displaySetInstanceUID, ReferencedSOPInstanceUID: sopUid } = measurement;
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
   if (!referencedDisplaySet.images) {
     return;
   }
@@ -20,10 +15,7 @@ const findInstance = (measurement, displaySetService: DisplaySetService) => {
  * contained within the provided display set.
  * @return an array of instances referenced.
  */
-const findReferencedInstances = (
-  displaySetService: DisplaySetService,
-  displaySet
-) => {
+const findReferencedInstances = (displaySetService: DisplaySetService, displaySet) => {
   const instances = [];
   const instanceById = {};
   for (const measurement of displaySet.measurements) {
@@ -58,7 +50,7 @@ const findReferencedInstances = (
 const createReferencedImageDisplaySet = (displaySetService, displaySet) => {
   const instances = findReferencedInstances(displaySetService, displaySet);
   // This will be a  member function of the created image set
-  const updateInstances = function() {
+  const updateInstances = function () {
     this.images.splice(
       0,
       this.images.length,

extensions/cornerstone-dicom-sr/src/utils/findInstanceMetadataBySopInstanceUid.js

@@ -14,8 +14,7 @@ const findInstanceMetadataBySopInstanceUID = (displaySets, SOPInstanceUID) => {
     }
 
     instanceFound = displaySet.images.find(
-      instanceMetadata =>
-        instanceMetadata.getSOPInstanceUID() === SOPInstanceUID
+      instanceMetadata => instanceMetadata.getSOPInstanceUID() === SOPInstanceUID
     );
 
     return !!instanceFound;

extensions/cornerstone-dicom-sr/src/utils/findMostRecentStructuredReport.js

@@ -18,10 +18,7 @@ const findMostRecentStructuredReport = studies => {
       }
 
       if (isStructuredReportSeries(series)) {
-        if (
-          !mostRecentStructuredReport ||
-          compareSeriesDate(series, mostRecentStructuredReport)
-        ) {
+        if (!mostRecentStructuredReport || compareSeriesDate(series, mostRecentStructuredReport)) {
           mostRecentStructuredReport = series;
         }
       }
@@ -38,10 +35,7 @@ const findMostRecentStructuredReport = studies => {
  * @returns {boolean}
  */
 const isStructuredReportSeries = series => {
-  const supportedSopClassUIDs = [
-    '1.2.840.10008.5.1.4.1.1.88.22',
-    '1.2.840.10008.5.1.4.1.1.11.1',
-  ];
+  const supportedSopClassUIDs = ['1.2.840.10008.5.1.4.1.1.88.22', '1.2.840.10008.5.1.4.1.1.11.1'];
 
   const firstInstance = series.getFirstInstance();
   const SOPClassUID = firstInstance.getData().metadata.SOPClassUID;
@@ -50,7 +44,7 @@ const isStructuredReportSeries = series => {
 };
 
 /**
- *  Checkes if series1 is newer than series2
+ *  Checks if series1 is newer than series2
  *
  * @param {Object} series1 - Series Metadata 1
  * @param {Object} series2 - Series Metadata 2

extensions/cornerstone-dicom-sr/src/utils/getFilteredCornerstoneToolState.ts

@@ -2,17 +2,12 @@ import OHIF from '@ohif/core';
 import { annotation } from '@cornerstonejs/tools';
 const { log } = OHIF;
 
-function getFilteredCornerstoneToolState(
-  measurementData,
-  additionalFindingTypes
-) {
+function getFilteredCornerstoneToolState(measurementData, additionalFindingTypes) {
   const filteredToolState = {};
 
   function addToFilteredToolState(annotation, toolType) {
     if (!annotation.metadata?.referencedImageId) {
-      log.warn(
-        `[DICOMSR] No referencedImageId found for ${toolType} ${annotation.id}`
-      );
+      log.warn(`[DICOMSR] No referencedImageId found for ${toolType} ${annotation.id}`);
       return;
     }
 
@@ -30,9 +25,7 @@ function getFilteredCornerstoneToolState(
       };
     }
 
-    const measurementDataI = measurementData.find(
-      md => md.uid === annotation.annotationUID
-    );
+    const measurementDataI = measurementData.find(md => md.uid === annotation.annotationUID);
     const toolData = imageIdSpecificToolState[toolType].data;
 
     let { finding } = measurementDataI;
@@ -77,9 +70,7 @@ function getFilteredCornerstoneToolState(
   for (let i = 0; i < framesOfReference.length; i++) {
     const frameOfReference = framesOfReference[i];
 
-    const frameOfReferenceAnnotations = annotationManager.getAnnotations(
-      frameOfReference
-    );
+    const frameOfReferenceAnnotations = annotationManager.getAnnotations(frameOfReference);
 
     const toolTypes = Object.keys(frameOfReferenceAnnotations);
 
@@ -91,9 +82,7 @@ function getFilteredCornerstoneToolState(
       if (annotations) {
         for (let k = 0; k < annotations.length; k++) {
           const annotation = annotations[k];
-          const uidIndex = uids.findIndex(
-            uid => uid === annotation.annotationUID
-          );
+          const uidIndex = uids.findIndex(uid => uid === annotation.annotationUID);
 
           if (uidIndex !== -1) {
             addToFilteredToolState(annotation, toolType);

extensions/cornerstone-dicom-sr/src/utils/getLabelFromDCMJSImportedToolData.js

@@ -9,9 +9,7 @@
 export default function getLabelFromDCMJSImportedToolData(toolData) {
   const { findingSites = [], finding } = toolData;
 
-  let freeTextLabel = findingSites.find(
-    fs => fs.CodeValue === 'CORNERSTONEFREETEXT'
-  );
+  let freeTextLabel = findingSites.find(fs => fs.CodeValue === 'CORNERSTONEFREETEXT');
 
   if (freeTextLabel) {
     return freeTextLabel.CodeMeaning;

extensions/cornerstone-dicom-sr/src/utils/hydrateStructuredReport.js

@@ -49,19 +49,10 @@ export default function hydrateStructuredReport(
   const annotationManager = CsAnnotation.state.getAnnotationManager();
   const disableEditing = appConfig?.disableEditing;
   const dataSource = extensionManager.getActiveDataSource()[0];
-  const {
-    measurementService,
-    displaySetService,
-    customizationService,
-  } = servicesManager.services;
+  const { measurementService, displaySetService, customizationService } = servicesManager.services;
 
-  const codingValues = customizationService.getCustomization(
-    'codingValues',
-    {}
-  );
-  const displaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const codingValues = customizationService.getCustomization('codingValues', {});
+  const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
   // TODO -> We should define a strict versioning somewhere.
   const mappings = measurementService.getSourceMappings(
@@ -125,16 +116,14 @@ export default function hydrateStructuredReport(
 
   // TODO: notification if no hydratable?
   Object.keys(hydratableMeasurementsInSR).forEach(annotationType => {
-    const toolDataForAnnotationType =
-      hydratableMeasurementsInSR[annotationType];
+    const toolDataForAnnotationType = hydratableMeasurementsInSR[annotationType];
 
     toolDataForAnnotationType.forEach(toolData => {
       // Add the measurement to toolState
       // dcmjs and Cornerstone3D has structural defect in supporting multi-frame
       // files, and looking up the imageId from sopInstanceUIDToImageId results
       // in the wrong value.
-      const frameNumber =
-        (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
+      const frameNumber = (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
       const imageId =
         imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
         sopInstanceUIDToImageId[toolData.sopInstanceUid];
@@ -150,10 +139,7 @@ export default function hydrateStructuredReport(
 
   for (let i = 0; i < imageIds.length; i++) {
     const imageId = imageIds[i];
-    const { SeriesInstanceUID, StudyInstanceUID } = metaData.get(
-      'instance',
-      imageId
-    );
+    const { SeriesInstanceUID, StudyInstanceUID } = metaData.get('instance', imageId);
 
     if (!SeriesInstanceUIDs.includes(SeriesInstanceUID)) {
       SeriesInstanceUIDs.push(SeriesInstanceUID);
@@ -162,23 +148,19 @@ export default function hydrateStructuredReport(
     if (!targetStudyInstanceUID) {
       targetStudyInstanceUID = StudyInstanceUID;
     } else if (targetStudyInstanceUID !== StudyInstanceUID) {
-      console.warn(
-        'NO SUPPORT FOR SRs THAT HAVE MEASUREMENTS FROM MULTIPLE STUDIES.'
-      );
+      console.warn('NO SUPPORT FOR SRs THAT HAVE MEASUREMENTS FROM MULTIPLE STUDIES.');
     }
   }
 
   Object.keys(hydratableMeasurementsInSR).forEach(annotationType => {
-    const toolDataForAnnotationType =
-      hydratableMeasurementsInSR[annotationType];
+    const toolDataForAnnotationType = hydratableMeasurementsInSR[annotationType];
 
     toolDataForAnnotationType.forEach(toolData => {
       // Add the measurement to toolState
       // dcmjs and Cornerstone3D has structural defect in supporting multi-frame
       // files, and looking up the imageId from sopInstanceUIDToImageId results
       // in the wrong value.
-      const frameNumber =
-        (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
+      const frameNumber = (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
       const imageId =
         imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
         sopInstanceUIDToImageId[toolData.sopInstanceUid];
@@ -208,19 +190,11 @@ export default function hydrateStructuredReport(
         CORNERSTONE_3D_TOOLS_SOURCE_VERSION
       );
       annotation.data.label = getLabelFromDCMJSImportedToolData(toolData);
-      annotation.data.finding = convertCode(
-        codingValues,
-        toolData.finding?.[0]
-      );
-      annotation.data.findingSites = convertSites(
-        codingValues,
-        toolData.findingSites
-      );
+      annotation.data.finding = convertCode(codingValues, toolData.finding?.[0]);
+      annotation.data.findingSites = convertSites(codingValues, toolData.findingSites);
       annotation.data.site = annotation.data.findingSites?.[0];
 
-      const matchingMapping = mappings.find(
-        m => m.annotationType === annotationType
-      );
+      const matchingMapping = mappings.find(m => m.annotationType === annotationType);
 
       const newAnnotationUID = measurementService.addRawMeasurement(
         source,
@@ -231,9 +205,7 @@ export default function hydrateStructuredReport(
       );
 
       if (disableEditing) {
-        const addedAnnotation = annotationManager.getAnnotation(
-          newAnnotationUID
-        );
+        const addedAnnotation = annotationManager.getAnnotation(newAnnotationUID);
         locking.setAnnotationLocked(addedAnnotation, true);
       }
 
@@ -262,15 +234,14 @@ function _mapLegacyDataSet(dataset) {
   );
 
   // Retrieve the Measurements themselves
-  const measurementGroups = toArray(
-    imagingMeasurementContent.ContentSequence
-  ).filter(codeMeaningEquals(GROUP));
+  const measurementGroups = toArray(imagingMeasurementContent.ContentSequence).filter(
+    codeMeaningEquals(GROUP)
+  );
 
   // For each of the supported measurement types, compute the measurement data
   const measurementData = {};
 
-  const cornerstoneToolClasses =
-    MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
+  const cornerstoneToolClasses = MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
 
   const registeredToolClasses = [];
 
@@ -280,13 +251,10 @@ function _mapLegacyDataSet(dataset) {
   });
 
   measurementGroups.forEach((measurementGroup, index) => {
-    const measurementGroupContentSequence = toArray(
-      measurementGroup.ContentSequence
-    );
+    const measurementGroupContentSequence = toArray(measurementGroup.ContentSequence);
 
     const TrackingIdentifierGroup = measurementGroupContentSequence.find(
-      contentItem =>
-        contentItem.ConceptNameCodeSequence.CodeMeaning === TRACKING_IDENTIFIER
+      contentItem => contentItem.ConceptNameCodeSequence.CodeMeaning === TRACKING_IDENTIFIER
     );
 
     const TrackingIdentifier = TrackingIdentifierGroup.TextValue;
@@ -304,7 +272,7 @@ function _mapLegacyDataSet(dataset) {
   return dataset;
 }
 
-const toArray = function(x) {
+const toArray = function (x) {
   return Array.isArray(x) ? x : [x];
 };
 

extensions/cornerstone-dicom-sr/src/utils/isRehydratable.js

@@ -1,8 +1,7 @@
 import { adaptersSR } from '@cornerstonejs/adapters';
 
 const cornerstoneAdapters =
-  adaptersSR.Cornerstone3D.MeasurementReport
-    .CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
+  adaptersSR.Cornerstone3D.MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
 
 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 const CORNERSTONE_3D_TAG = cornerstoneAdapters.CORNERSTONE_3D_TAG;
@@ -24,8 +23,7 @@ export default function isRehydratable(displaySet, mappings) {
 
   const adapterKeys = Object.keys(cornerstoneAdapters).filter(
     adapterKey =>
-      typeof cornerstoneAdapters[adapterKey]
-        .isValidCornerstoneTrackingIdentifier === 'function'
+      typeof cornerstoneAdapters[adapterKey].isValidCornerstoneTrackingIdentifier === 'function'
   );
 
   const adapters = [];
@@ -48,19 +46,13 @@ export default function isRehydratable(displaySet, mappings) {
 
       const mappedTrackingIdentifier = `${cornerstoneTag}:${toolName}`;
 
-      return adapter.isValidCornerstoneTrackingIdentifier(
-        mappedTrackingIdentifier
-      );
+      return adapter.isValidCornerstoneTrackingIdentifier(mappedTrackingIdentifier);
     });
 
     if (hydratable) {
       return true;
     }
-    console.log(
-      'Measurement is not rehydratable',
-      TrackingIdentifier,
-      measurements[i]
-    );
+    console.log('Measurement is not rehydratable', TrackingIdentifier, measurements[i]);
   }
 
   console.log('No measurements found which were rehydratable');

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

@@ -11,8 +11,7 @@ import { useAppConfig } from '@state';
 
 const { formatDate } = utils;
 
-const MEASUREMENT_TRACKING_EXTENSION_ID =
-  '@ohif/extension-measurement-tracking';
+const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking';
 
 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';
 
@@ -21,7 +20,6 @@ function OHIFCornerstoneSRViewport(props) {
     children,
     dataSource,
     displaySets,
-    viewportIndex,
     viewportLabel,
     viewportOptions,
     servicesManager,
@@ -30,11 +28,10 @@ function OHIFCornerstoneSRViewport(props) {
 
   const [appConfig] = useAppConfig();
 
-  const {
-    displaySetService,
-    cornerstoneViewportService,
-    measurementService,
-  } = servicesManager.services;
+  const { displaySetService, cornerstoneViewportService, measurementService } =
+    servicesManager.services;
+
+  const viewportId = viewportOptions.viewportId;
 
   // SR viewport will always have a single display set
   if (displaySets.length > 1) {
@@ -46,15 +43,10 @@ function OHIFCornerstoneSRViewport(props) {
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const [measurementSelected, setMeasurementSelected] = useState(0);
   const [measurementCount, setMeasurementCount] = useState(1);
-  const [activeImageDisplaySetData, setActiveImageDisplaySetData] = useState(
-    null
-  );
-  const [
-    referencedDisplaySetMetadata,
-    setReferencedDisplaySetMetadata,
-  ] = useState(null);
+  const [activeImageDisplaySetData, setActiveImageDisplaySetData] = useState(null);
+  const [referencedDisplaySetMetadata, setReferencedDisplaySetMetadata] = useState(null);
   const [element, setElement] = useState(null);
-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;
 
   // Optional hook into tracking extension, if present.
   let trackedMeasurements;
@@ -82,13 +74,11 @@ function OHIFCornerstoneSRViewport(props) {
         { servicesManager, extensionManager, appConfig },
         displaySetInstanceUID
       );
-      const displaySets = displaySetService.getDisplaySetsForSeries(
-        SeriesInstanceUIDs[0]
-      );
+      const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUIDs[0]);
       if (displaySets.length) {
         viewportGridService.setDisplaySetsForViewports([
           {
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
           },
         ]);
@@ -126,11 +116,7 @@ function OHIFCornerstoneSRViewport(props) {
 
   const updateViewport = useCallback(
     newMeasurementSelected => {
-      const {
-        StudyInstanceUID,
-        displaySetInstanceUID,
-        sopClassUids,
-      } = srDisplaySet;
+      const { StudyInstanceUID, displaySetInstanceUID, sopClassUids } = srDisplaySet;
 
       if (!StudyInstanceUID || !displaySetInstanceUID) {
         return;
@@ -139,9 +125,7 @@ function OHIFCornerstoneSRViewport(props) {
       if (sopClassUids && sopClassUids.length > 1) {
         // Todo: what happens if there are multiple SOP Classes? Why we are
         // not throwing an error?
-        console.warn(
-          'More than one SOPClassUID in the same series is not yet supported.'
-        );
+        console.warn('More than one SOPClassUID in the same series is not yet supported.');
       }
 
       _getViewportReferencedDisplaySetData(
@@ -163,19 +147,11 @@ function OHIFCornerstoneSRViewport(props) {
           // imageIdIndex will handle it by updating the viewport, but if they
           // are the same we just need to use measurementService to jump to the
           // new measurement
-          const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-            viewportIndex
-          );
-
-          const csViewport = cornerstoneViewportService.getCornerstoneViewport(
-            viewportInfo.getViewportId()
-          );
+          const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
           const imageIds = csViewport.getImageIds();
 
-          const imageIdIndex = imageIds.indexOf(
-            measurements[newMeasurementSelected].imageId
-          );
+          const imageIdIndex = imageIds.indexOf(measurements[newMeasurementSelected].imageId);
 
           if (imageIdIndex !== -1) {
             csViewport.setImageIdIndex(imageIdIndex);
@@ -183,7 +159,7 @@ function OHIFCornerstoneSRViewport(props) {
         }
       });
     },
-    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportIndex]
+    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportId]
   );
 
   const getCornerstoneViewport = useCallback(() => {
@@ -231,7 +207,7 @@ function OHIFCornerstoneSRViewport(props) {
         isJumpToMeasurementDisabled={true}
       ></Component>
     );
-  }, [activeImageDisplaySetData, viewportIndex, measurementSelected]);
+  }, [activeImageDisplaySetData, viewportId, measurementSelected]);
 
   const onMeasurementChange = useCallback(
     direction => {
@@ -254,12 +230,7 @@ function OHIFCornerstoneSRViewport(props) {
       setTrackingIdentifiers(newMeasurementSelected);
       updateViewport(newMeasurementSelected);
     },
-    [
-      measurementSelected,
-      measurementCount,
-      updateViewport,
-      setTrackingIdentifiers,
-    ]
+    [measurementSelected, measurementCount, updateViewport, setTrackingIdentifiers]
   );
 
   /**
@@ -269,12 +240,10 @@ function OHIFCornerstoneSRViewport(props) {
     const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
-        if (
-          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
-        ) {
+        const activeViewport = viewports[activeViewportId];
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
           viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [],
           });
         }
@@ -341,7 +310,7 @@ function OHIFCornerstoneSRViewport(props) {
       return (
         child &&
         React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
           key: index,
         })
       );
@@ -373,7 +342,7 @@ function OHIFCornerstoneSRViewport(props) {
         getStatusComponent={() =>
           _getStatusComponent({
             srDisplaySet,
-            viewportIndex,
+            viewportId,
             isTracked: false,
             isRehydratable: srDisplaySet.isRehydratable,
             isLocked,
@@ -387,23 +356,19 @@ function OHIFCornerstoneSRViewport(props) {
           currentSeries: SeriesNumber,
           seriesDescription: SeriesDescription || '',
           patientInformation: {
-            patientName: PatientName
-              ? OHIF.utils.formatPN(PatientName.Alphabetic)
-              : '',
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
             thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
             spacing:
-              SpacingBetweenSlices !== undefined
-                ? `${SpacingBetweenSlices.toFixed(2)}mm`
-                : '',
+              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
             scanner: ManufacturerModelName || '',
           },
         }}
       />
 
-      <div className="relative flex flex-row w-full h-full overflow-hidden">
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
         {getCornerstoneViewport()}
         {childrenWithProps}
       </div>
@@ -413,7 +378,7 @@ function OHIFCornerstoneSRViewport(props) {
 
 OHIFCornerstoneSRViewport.propTypes = {
   displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
   viewportLabel: PropTypes.string,
@@ -438,9 +403,7 @@ async function _getViewportReferencedDisplaySetData(
 
   const { displaySetInstanceUID } = measurement;
 
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
   const image0 = referencedDisplaySet.images[0];
   const referencedDisplaySetMetadata = {
@@ -462,7 +425,7 @@ async function _getViewportReferencedDisplaySetData(
 
 function _getStatusComponent({
   srDisplaySet,
-  viewportIndex,
+  viewportId,
   isRehydratable,
   isLocked,
   sendTrackedMeasurementsEvent,
@@ -470,7 +433,7 @@ function _getStatusComponent({
   const handleMouseUp = () => {
     sendTrackedMeasurementsEvent('HYDRATE_SR', {
       displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
-      viewportIndex,
+      viewportId,
     });
   };
 
@@ -480,8 +443,7 @@ function _getStatusComponent({
   // 1 - Incompatible
   // 2 - Locked
   // 3 - Rehydratable / Open
-  const state =
-    isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
+  const state = isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
   let ToolTipMessage = null;
   let StatusIcon = null;
 
@@ -512,23 +474,24 @@ function _getStatusComponent({
       break;
     case 3:
       StatusIcon = () => (
-        <Icon className="text-aqua-pale" name="status-untracked" />
+        <Icon
+          className="text-aqua-pale"
+          name="status-untracked"
+        />
       );
 
-      ToolTipMessage = () => (
-        <div>{`Click ${loadStr} to restore measurements.`}</div>
-      );
+      ToolTipMessage = () => <div>{`Click ${loadStr} to restore measurements.`}</div>;
   }
 
   const StatusArea = () => (
-    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
-      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
         <StatusIcon />
         <span className="ml-1">SR</span>
       </div>
       {state === 3 && (
         <div
-          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
           // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
           onMouseUp={handleMouseUp}
         >
@@ -541,7 +504,10 @@ function _getStatusComponent({
   return (
     <>
       {ToolTipMessage && (
-        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
           <StatusArea />
         </Tooltip>
       )}

extensions/cornerstone/.webpack/webpack.prod.js

@@ -40,13 +40,7 @@ module.exports = (env, argv) => {
       libraryTarget: 'umd',
       filename: pkg.main,
     },
-    externals: [
-      /\b(vtk.js)/,
-      /\b(dcmjs)/,
-      /\b(gl-matrix)/,
-      /^@ohif/,
-      /^@cornerstonejs/,
-    ],
+    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
     plugins: [
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+
+### Bug Fixes
+
+* **measurements:** Update the calibration tool to match changes in CS3D ([#3505](https://github.com/OHIF/Viewers/issues/3505)) ([38af311](https://github.com/OHIF/Viewers/commit/38af3112ec1f94f36c0ef64ff1cf9d21c0981c81))
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+
+### Features
+
+* **ImageOverlayViewerTool:** add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images ([#3163](https://github.com/OHIF/Viewers/issues/3163)) ([69115da](https://github.com/OHIF/Viewers/commit/69115da06d2d437b57e66608b435bb0bc919a90f))
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
 # [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "3.7.0-beta.62",
+  "version": "3.7.0-beta.75",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -36,9 +36,9 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.11.4",
-    "@ohif/core": "3.7.0-beta.62",
-    "@ohif/ui": "3.7.0-beta.62",
+    "@cornerstonejs/dicom-image-loader": "^1.13.2",
+    "@ohif/core": "3.7.0-beta.75",
+    "@ohif/ui": "3.7.0-beta.75",
     "dcmjs": "^0.29.6",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.11.4",
-    "@cornerstonejs/core": "^1.11.4",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.11.4",
-    "@cornerstonejs/tools": "^1.11.4",
+    "@cornerstonejs/adapters": "^1.13.2",
+    "@cornerstonejs/core": "^1.13.2",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.13.2",
+    "@cornerstonejs/tools": "^1.13.2",
     "@kitware/vtk.js": "27.3.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -11,10 +11,7 @@ import {
 } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
 import { Notification, useViewportDialog } from '@ohif/ui';
-import {
-  IStackViewport,
-  IVolumeViewport,
-} from '@cornerstonejs/core/dist/esm/types';
+import { IStackViewport, IVolumeViewport } from '@cornerstonejs/core/dist/esm/types';
 
 import { setEnabledElement } from '../state';
 
@@ -42,24 +39,19 @@ function areEqual(prevProps, nextProps) {
     return false;
   }
 
-  if (
-    prevProps.viewportOptions.orientation !==
-    nextProps.viewportOptions.orientation
-  ) {
+  if (prevProps.viewportOptions.orientation !== nextProps.viewportOptions.orientation) {
     return false;
   }
 
-  if (
-    prevProps.viewportOptions.toolGroupId !==
-    nextProps.viewportOptions.toolGroupId
-  ) {
+  if (prevProps.viewportOptions.toolGroupId !== nextProps.viewportOptions.toolGroupId) {
     return false;
   }
 
-  if (
-    prevProps.viewportOptions.viewportType !==
-    nextProps.viewportOptions.viewportType
-  ) {
+  if (prevProps.viewportOptions.viewportType !== nextProps.viewportOptions.viewportType) {
+    return false;
+  }
+
+  if (nextProps.viewportOptions.needsRerendering) {
     return false;
   }
 
@@ -75,8 +67,7 @@ function areEqual(prevProps, nextProps) {
 
     const foundDisplaySet = nextDisplaySets.find(
       nextDisplaySet =>
-        nextDisplaySet.displaySetInstanceUID ===
-        prevDisplaySet.displaySetInstanceUID
+        nextDisplaySet.displaySetInstanceUID === prevDisplaySet.displaySetInstanceUID
     );
 
     if (!foundDisplaySet) {
@@ -91,9 +82,7 @@ function areEqual(prevProps, nextProps) {
     // check if their imageIds are the same
     if (foundDisplaySet.images?.length) {
       for (let j = 0; j < foundDisplaySet.images.length; j++) {
-        if (
-          foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId
-        ) {
+        if (foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId) {
           return false;
         }
       }
@@ -107,7 +96,6 @@ function areEqual(prevProps, nextProps) {
 // Then we don't need to worry about the re-renders if the props change.
 const OHIFCornerstoneViewport = React.memo(props => {
   const {
-    viewportIndex,
     displaySets,
     dataSource,
     viewportOptions,
@@ -123,6 +111,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
     initialImageIndex,
   } = props;
 
+  const viewportId = viewportOptions.viewportId;
   const [scrollbarHeight, setScrollbarHeight] = useState('100px');
   const [enabledVPElement, setEnabledVPElement] = useState(null);
   const elementRef = useRef();
@@ -154,27 +143,17 @@ const OHIFCornerstoneViewport = React.memo(props => {
     }
   }, [elementRef]);
 
-  const cleanUpServices = useCallback(() => {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
+  const cleanUpServices = useCallback(
+    viewportInfo => {
+      const renderingEngineId = viewportInfo.getRenderingEngineId();
+      const syncGroups = viewportInfo.getSyncGroups();
 
-    if (!viewportInfo) {
-      return;
-    }
+      toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
 
-    const viewportId = viewportInfo.getViewportId();
-    const renderingEngineId = viewportInfo.getRenderingEngineId();
-    const syncGroups = viewportInfo.getSyncGroups();
-
-    toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
-
-    syncGroupService.removeViewportFromSyncGroup(
-      viewportId,
-      renderingEngineId,
-      syncGroups
-    );
-  }, [viewportIndex, viewportOptions.viewportId]);
+      syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroups);
+    },
+    [viewportId]
+  );
 
   const elementEnabledHandler = useCallback(
     evt => {
@@ -184,73 +163,48 @@ const OHIFCornerstoneViewport = React.memo(props => {
       }
 
       const { viewportId, element } = evt.detail;
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(
-        viewportId
-      );
-      const viewportIndex = viewportInfo.getViewportIndex();
-
-      setEnabledElement(viewportIndex, element);
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      setEnabledElement(viewportId, element);
       setEnabledVPElement(element);
 
       const renderingEngineId = viewportInfo.getRenderingEngineId();
       const toolGroupId = viewportInfo.getToolGroupId();
       const syncGroups = viewportInfo.getSyncGroups();
 
-      toolGroupService.addViewportToToolGroup(
-        viewportId,
-        renderingEngineId,
-        toolGroupId
-      );
+      toolGroupService.addViewportToToolGroup(viewportId, renderingEngineId, toolGroupId);
 
-      syncGroupService.addViewportToSyncGroup(
-        viewportId,
-        renderingEngineId,
-        syncGroups
-      );
+      syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, syncGroups);
 
       if (onElementEnabled) {
         onElementEnabled(evt);
       }
     },
-    [viewportIndex, onElementEnabled, toolGroupService]
+    [viewportId, onElementEnabled, toolGroupService]
   );
 
   // disable the element upon unmounting
   useEffect(() => {
-    cornerstoneViewportService.enableViewport(
-      viewportIndex,
-      viewportOptions,
-      elementRef.current
-    );
+    cornerstoneViewportService.enableViewport(viewportId, elementRef.current);
 
-    eventTarget.addEventListener(
-      Enums.Events.ELEMENT_ENABLED,
-      elementEnabledHandler
-    );
+    eventTarget.addEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
 
     setImageScrollBarHeight();
 
     return () => {
-      commandsManager.runCommand('storePresentation', {
-        viewportIndex,
-      });
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
 
-      cleanUpServices();
+      if (!viewportInfo) {
+        return;
+      }
 
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-        viewportIndex
-      );
-
-      cornerstoneViewportService.disableElement(viewportIndex);
+      cleanUpServices(viewportInfo);
+      cornerstoneViewportService.storePresentation({ viewportId });
 
       if (onElementDisabled) {
         onElementDisabled(viewportInfo);
       }
 
-      eventTarget.removeEventListener(
-        Enums.Events.ELEMENT_ENABLED,
-        elementEnabledHandler
-      );
+      eventTarget.removeEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
     };
   }, []);
 
@@ -273,9 +227,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
           return;
         }
 
-        const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-          viewportIndex
-        );
+        const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
 
         if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
           const viewportData = viewportInfo.getViewportData();
@@ -287,18 +239,14 @@ const OHIFCornerstoneViewport = React.memo(props => {
           );
 
           const keepCamera = true;
-          cornerstoneViewportService.updateViewport(
-            viewportIndex,
-            newViewportData,
-            keepCamera
-          );
+          cornerstoneViewportService.updateViewport(viewportId, newViewportData, keepCamera);
         }
       }
     );
     return () => {
       unsubscribe();
     };
-  }, [viewportIndex]);
+  }, [viewportId]);
 
   useEffect(() => {
     // handle the default viewportType to be stack
@@ -317,27 +265,32 @@ const OHIFCornerstoneViewport = React.memo(props => {
       // The presentation state will have been stored previously by closing
       // a viewport.  Otherwise, this viewport will be unchanged and the
       // presentation information will be directly carried over.
-      const {
-        lutPresentationStore,
-        positionPresentationStore,
-      } = stateSyncService.getState();
+      const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
       const { presentationIds } = viewportOptions;
       const presentations = {
-        positionPresentation:
-          positionPresentationStore[presentationIds?.positionPresentationId],
-        lutPresentation:
-          lutPresentationStore[presentationIds?.lutPresentationId],
+        positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
+        lutPresentation: lutPresentationStore[presentationIds?.lutPresentationId],
       };
       let measurement;
-      if (cacheJumpToMeasurementEvent?.viewportIndex === viewportIndex) {
+      if (cacheJumpToMeasurementEvent?.viewportId === viewportId) {
         measurement = cacheJumpToMeasurementEvent.measurement;
         // Delete the position presentation so that viewport navigates direct
         presentations.positionPresentation = null;
         cacheJumpToMeasurementEvent = null;
       }
 
+      // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+      // Used for segmentation hydration right now, since the logic to decide whether
+      // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+      // so we need to re-render (force update via change of the needsRerendering) so that React
+      // does the diffing and decides we should render this again (although the id and element has not changed)
+      // so that the CornerstoneViewportService can decide whether to render the segmentation or not. Not that we reached here we can turn it off.
+      if (viewportOptions.needsRerendering) {
+        viewportOptions.needsRerendering = false;
+      }
+
       cornerstoneViewportService.setViewportData(
-        viewportIndex,
+        viewportId,
         viewportData,
         viewportOptions,
         displaySetOptions,
@@ -370,7 +323,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
       measurementService,
       displaySetService,
       elementRef,
-      viewportIndex,
+      viewportId,
       displaySets,
       viewportGridService,
       cornerstoneViewportService
@@ -380,7 +333,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
       measurementService,
       displaySetService,
       elementRef,
-      viewportIndex,
+      viewportId,
       displaySets,
       viewportGridService,
       cornerstoneViewportService
@@ -389,7 +342,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
     return () => {
       unsubscribeFromJumpToMeasurementEvents();
     };
-  }, [displaySets, elementRef, viewportIndex]);
+  }, [displaySets, elementRef, viewportId]);
 
   return (
     <React.Fragment>
@@ -408,7 +361,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
           ref={elementRef}
         ></div>
         <CornerstoneOverlays
-          viewportIndex={viewportIndex}
+          viewportId={viewportId}
           toolBarService={toolbarService}
           element={elementRef.current}
           scrollbarHeight={scrollbarHeight}
@@ -416,12 +369,12 @@ const OHIFCornerstoneViewport = React.memo(props => {
         />
         <CinePlayer
           enabledVPElement={enabledVPElement}
-          viewportIndex={viewportIndex}
+          viewportId={viewportId}
           servicesManager={servicesManager}
         />
       </div>
       <div className="absolute w-full">
-        {viewportDialogState.viewportIndex === viewportIndex && (
+        {viewportDialogState.viewportId === viewportId && (
           <Notification
             id="viewport-notification"
             message={viewportDialogState.message}
@@ -440,37 +393,35 @@ function _subscribeToJumpToMeasurementEvents(
   measurementService,
   displaySetService,
   elementRef,
-  viewportIndex,
+  viewportId,
   displaySets,
   viewportGridService,
   cornerstoneViewportService
 ) {
-  const displaysUIDs = displaySets.map(
-    displaySet => displaySet.displaySetInstanceUID
-  );
   const { unsubscribe } = measurementService.subscribe(
     MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT,
     props => {
       cacheJumpToMeasurementEvent = props;
-      const { viewportIndex: jumpIndex, measurement, isConsumed } = props;
+      const { viewportId: jumpId, measurement, isConsumed } = props;
       if (!measurement || isConsumed) {
         return;
       }
       if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
         // Decide on which viewport should handle this
-        cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIndexToJump(
-          jumpIndex,
-          measurement.displaySetInstanceUID,
-          { referencedImageId: measurement.referencedImageId }
-        );
+        cacheJumpToMeasurementEvent.cornerstoneViewport =
+          cornerstoneViewportService.getViewportIdToJump(
+            jumpId,
+            measurement.displaySetInstanceUID,
+            { referencedImageId: measurement.referencedImageId }
+          );
       }
-      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportIndex) {
+      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportId) {
         return;
       }
       _jumpToMeasurement(
         measurement,
         elementRef,
-        viewportIndex,
+        viewportId,
         measurementService,
         displaySetService,
         viewportGridService,
@@ -487,7 +438,7 @@ function _checkForCachedJumpToMeasurementEvents(
   measurementService,
   displaySetService,
   elementRef,
-  viewportIndex,
+  viewportId,
   displaySets,
   viewportGridService,
   cornerstoneViewportService
@@ -499,9 +450,7 @@ function _checkForCachedJumpToMeasurementEvents(
     cacheJumpToMeasurementEvent = null;
     return;
   }
-  const displaysUIDs = displaySets.map(
-    displaySet => displaySet.displaySetInstanceUID
-  );
+  const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
   if (!displaysUIDs?.length) {
     return;
   }
@@ -513,7 +462,7 @@ function _checkForCachedJumpToMeasurementEvents(
       _jumpToMeasurement(
         measurement,
         elementRef,
-        viewportIndex,
+        viewportId,
         measurementService,
         displaySetService,
         viewportGridService,
@@ -526,7 +475,7 @@ function _checkForCachedJumpToMeasurementEvents(
 function _jumpToMeasurement(
   measurement,
   targetElementRef,
-  viewportIndex,
+  viewportId,
   measurementService,
   displaySetService,
   viewportGridService,
@@ -540,26 +489,19 @@ function _jumpToMeasurement(
     return;
   }
 
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
   // Todo: setCornerstoneMeasurementActive should be handled by the toolGroupManager
   //  to set it properly
   // setCornerstoneMeasurementActive(measurement);
 
-  viewportGridService.setActiveViewportIndex(viewportIndex);
+  viewportGridService.setActiveViewportId(viewportId);
 
   const enabledElement = getEnabledElement(targetElement);
 
-  const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-    viewportIndex
-  );
   if (enabledElement) {
     // See how the jumpToSlice() of Cornerstone3D deals with imageIdx param.
-    const viewport = enabledElement.viewport as
-      | IStackViewport
-      | IVolumeViewport;
+    const viewport = enabledElement.viewport as IStackViewport | IVolumeViewport;
 
     let imageIdIndex = 0;
     let viewportCameraDirectionMatch = true;
@@ -567,14 +509,9 @@ function _jumpToMeasurement(
     if (viewport instanceof StackViewport) {
       const imageIds = viewport.getImageIds();
       imageIdIndex = imageIds.findIndex(imageId => {
-        const {
-          SOPInstanceUID: aSOPInstanceUID,
-          frameNumber: aFrameNumber,
-        } = getSOPInstanceAttributes(imageId);
-        return (
-          aSOPInstanceUID === SOPInstanceUID &&
-          (!frameNumber || frameNumber === aFrameNumber)
-        );
+        const { SOPInstanceUID: aSOPInstanceUID, frameNumber: aFrameNumber } =
+          getSOPInstanceAttributes(imageId);
+        return aSOPInstanceUID === SOPInstanceUID && (!frameNumber || frameNumber === aFrameNumber);
       });
     } else {
       // for volume viewport we can't rely on the imageIdIndex since it can be
@@ -589,10 +526,7 @@ function _jumpToMeasurement(
       // should compare abs for both planes since the direction can be flipped
       if (
         measurementViewPlane &&
-        !csUtils.isEqual(
-          measurementViewPlane.map(Math.abs),
-          viewportViewPlane.map(Math.abs)
-        )
+        !csUtils.isEqual(measurementViewPlane.map(Math.abs), viewportViewPlane.map(Math.abs))
       ) {
         viewportCameraDirectionMatch = false;
       }
@@ -621,7 +555,6 @@ OHIFCornerstoneViewport.defaultProps = {
 };
 
 OHIFCornerstoneViewport.propTypes = {
-  viewportIndex: PropTypes.number.isRequired,
   displaySets: PropTypes.array.isRequired,
   dataSource: PropTypes.object.isRequired,
   viewportOptions: PropTypes.object,
@@ -632,10 +565,7 @@ OHIFCornerstoneViewport.propTypes = {
   // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
   // of the imageData in the OHIFCornerstoneViewport. This prop is used
   // to set the initial state of the viewport's first image to render
-  initialImageIdOrIndex: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  initialImageIdOrIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 export default OHIFCornerstoneViewport;

extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx

@@ -6,7 +6,7 @@ import ViewportOrientationMarkers from './ViewportOrientationMarkers';
 import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';
 
 function CornerstoneOverlays(props) {
-  const { viewportIndex, element, scrollbarHeight, servicesManager } = props;
+  const { viewportId, element, scrollbarHeight, servicesManager } = props;
   const { cornerstoneViewportService } = servicesManager.services;
   const [imageSliceData, setImageSliceData] = useState({
     imageIndex: 0,
@@ -18,7 +18,7 @@ function CornerstoneOverlays(props) {
     const { unsubscribe } = cornerstoneViewportService.subscribe(
       cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
       props => {
-        if (props.viewportIndex !== viewportIndex) {
+        if (props.viewportId !== viewportId) {
           return;
         }
 
@@ -29,16 +29,14 @@ function CornerstoneOverlays(props) {
     return () => {
       unsubscribe();
     };
-  }, [viewportIndex]);
+  }, [viewportId]);
 
   if (!element) {
     return null;
   }
 
   if (viewportData) {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
 
     if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
       return null;
@@ -48,7 +46,7 @@ function CornerstoneOverlays(props) {
   return (
     <div className="noselect">
       <ViewportImageScrollbar
-        viewportIndex={viewportIndex}
+        viewportId={viewportId}
         viewportData={viewportData}
         element={element}
         imageSliceData={imageSliceData}
@@ -60,7 +58,7 @@ function CornerstoneOverlays(props) {
       <CustomizableViewportOverlay
         imageSliceData={imageSliceData}
         viewportData={viewportData}
-        viewportIndex={viewportIndex}
+        viewportId={viewportId}
         servicesManager={servicesManager}
         element={element}
       />
@@ -75,7 +73,7 @@ function CornerstoneOverlays(props) {
         element={element}
         viewportData={viewportData}
         servicesManager={servicesManager}
-        viewportIndex={viewportIndex}
+        viewportId={viewportId}
       />
     </div>
   );

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

@@ -3,12 +3,7 @@ import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import { ViewportOverlay } from '@ohif/ui';
-import {
-  formatPN,
-  formatDICOMDate,
-  formatDICOMTime,
-  formatNumberPrecision,
-} from './utils';
+import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
 import { InstanceMetadata } from 'platform/core/src/types';
 import { ServicesManager } from '@ohif/core';
 import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';
@@ -21,7 +16,6 @@ interface OverlayItemProps {
   element: any;
   viewportData: any;
   imageSliceData: ImageSliceData;
-  viewportIndex: number | null;
   servicesManager: ServicesManager;
   instance: InstanceMetadata;
   customization: any;
@@ -56,13 +50,9 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
       style={{ color: (customization && customization.color) || undefined }}
     >
       <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 font-light shrink-0">
-        {windowWidth.toFixed(0)}
-      </span>
+      <span className="ml-1 mr-2 shrink-0 font-light">{windowWidth.toFixed(0)}</span>
       <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 font-light shrink-0">
-        {windowCenter.toFixed(0)}
-      </span>
+      <span className="ml-1 shrink-0 font-light">{windowCenter.toFixed(0)}</span>
     </div>
   );
 }
@@ -114,14 +104,11 @@ function CustomizableViewportOverlay({
   element,
   viewportData,
   imageSliceData,
-  viewportIndex,
+  viewportId,
   servicesManager,
 }) {
-  const {
-    toolbarService,
-    cornerstoneViewportService,
-    customizationService,
-  } = servicesManager.services;
+  const { toolbarService, cornerstoneViewportService, customizationService } =
+    servicesManager.services;
   const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
   const [scale, setScale] = useState(1);
   const [activeTools, setActiveTools] = useState([]);
@@ -150,15 +137,10 @@ function CustomizableViewportOverlay({
 
   const instanceNumber = useMemo(() => {
     if (viewportData != null) {
-      return _getInstanceNumber(
-        viewportData,
-        viewportIndex,
-        imageIndex,
-        cornerstoneViewportService
-      );
+      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
     }
     return null;
-  }, [viewportData, viewportIndex, imageIndex, cornerstoneViewportService]);
+  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
 
   /**
    * Initial toolbar state
@@ -179,10 +161,7 @@ function CustomizableViewportOverlay({
       }
 
       const { lower, upper } = range;
-      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
-        lower,
-        upper
-      );
+      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(lower, upper);
 
       setVOI({ windowCenter, windowWidth });
     };
@@ -192,7 +171,7 @@ function CustomizableViewportOverlay({
     return () => {
       element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
     };
-  }, [viewportIndex, viewportData, voi, element]);
+  }, [viewportId, viewportData, voi, element]);
 
   /**
    * Updating the scale when the viewport changes its zoom
@@ -205,9 +184,7 @@ function CustomizableViewportOverlay({
         previousCamera.parallelScale !== camera.parallelScale ||
         previousCamera.scale !== camera.scale
       ) {
-        const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-          viewportIndex
-        );
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
         if (!viewport) {
           return;
@@ -226,8 +203,7 @@ function CustomizableViewportOverlay({
 
         const { spacing } = imageData;
         // convert parallel scale to scale
-        const scale =
-          (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
+        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
         setScale(scale);
       }
     };
@@ -237,7 +213,7 @@ function CustomizableViewportOverlay({
     return () => {
       element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
     };
-  }, [viewportIndex, viewportData, cornerstoneViewportService, element]);
+  }, [viewportId, viewportData, cornerstoneViewportService, element]);
 
   /**
    * Updating the active tools when the toolbar changes
@@ -262,7 +238,7 @@ function CustomizableViewportOverlay({
         element,
         viewportData,
         imageSliceData,
-        viewportIndex,
+        viewportId,
         servicesManager,
         customization: item,
         formatters: {
@@ -296,7 +272,7 @@ function CustomizableViewportOverlay({
       element,
       viewportData,
       imageSliceData,
-      viewportIndex,
+      viewportId,
       servicesManager,
       customizationService,
       instance,
@@ -343,9 +319,7 @@ function CustomizableViewportOverlay({
     return (
       <>
         {items.map((item, i) => (
-          <div key={`bottomLeftOverlayItem_${i}`}>
-            {_renderOverlayItem(item)}
-          </div>
+          <div key={`bottomLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
         ))}
       </>
     );
@@ -356,9 +330,7 @@ function CustomizableViewportOverlay({
     return (
       <>
         {items.map((item, i) => (
-          <div key={`bottomRightOverlayItem_${i}`}>
-            {_renderOverlayItem(item)}
-          </div>
+          <div key={`bottomRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
         ))}
       </>
     );
@@ -388,12 +360,7 @@ function _getViewportInstance(viewportData, imageIndex) {
   return imageId ? metaData.get('instance', imageId) || {} : {};
 }
 
-function _getInstanceNumber(
-  viewportData,
-  viewportIndex,
-  imageIndex,
-  cornerstoneViewportService
-) {
+function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
   let instanceNumber;
 
   if (viewportData.viewportType === Enums.ViewportType.STACK) {
@@ -406,7 +373,7 @@ function _getInstanceNumber(
     instanceNumber = _getInstanceNumberFromVolume(
       viewportData,
       imageIndex,
-      viewportIndex,
+      viewportId,
       cornerstoneViewportService
     );
   }
@@ -436,12 +403,7 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
 // Since volume viewports can be in any view direction, they can render
 // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
 // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
-function _getInstanceNumberFromVolume(
-  viewportData,
-  imageIndex,
-  viewportIndex,
-  cornerstoneViewportService
-) {
+function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService) {
   const volumes = viewportData.volumes;
 
   // Todo: support fusion of acquisition plane which has instanceNumber
@@ -452,9 +414,7 @@ function _getInstanceNumberFromVolume(
   const volume = volumes[0];
   const { direction, imageIds } = volume;
 
-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-    viewportIndex
-  );
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
   if (!cornerstoneViewport) {
     return;
@@ -477,8 +437,7 @@ function _getInstanceNumberFromVolume(
       return {};
     }
 
-    const { instanceNumber } =
-      metaData.get('generalImageModule', imageId) || {};
+    const { instanceNumber } = metaData.get('generalImageModule', imageId) || {};
     return parseInt(instanceNumber);
   }
 }
@@ -486,7 +445,7 @@ function _getInstanceNumberFromVolume(
 CustomizableViewportOverlay.propTypes = {
   viewportData: PropTypes.object,
   imageIndex: PropTypes.number,
-  viewportIndex: PropTypes.number,
+  viewportId: PropTypes.string,
 };
 
 export default CustomizableViewportOverlay;

extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx

@@ -7,34 +7,24 @@ import { ServicesManger } from '@ohif/core';
 
 function CornerstoneImageScrollbar({
   viewportData,
-  viewportIndex,
+  viewportId,
   element,
   imageSliceData,
   setImageSliceData,
   scrollbarHeight,
   servicesManager,
 }) {
-  const {
-    cineService,
-    cornerstoneViewportService,
-  } = (servicesManager as ServicesManger).services;
+  const { cineService, cornerstoneViewportService } = (servicesManager as ServicesManger).services;
 
-  const onImageScrollbarChange = (imageIndex, viewportIndex) => {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
-
-    const viewportId = viewportInfo.getViewportId();
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(
-      viewportId
-    );
+  const onImageScrollbarChange = (imageIndex, viewportId) => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
     const { isCineEnabled } = cineService.getState();
 
     if (isCineEnabled) {
       // on image scrollbar change, stop the CINE if it is playing
       cineService.stopClip(element);
-      cineService.setCine({ id: viewportIndex, isPlaying: false });
+      cineService.setCine({ id: viewportId, isPlaying: false });
     }
 
     csToolsUtils.jumpToSlice(viewport.element, {
@@ -48,9 +38,7 @@ function CornerstoneImageScrollbar({
       return;
     }
 
-    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-      viewportIndex
-    );
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
     if (!viewport) {
       return;
@@ -79,7 +67,7 @@ function CornerstoneImageScrollbar({
       const { imageIndex, numberOfSlices } = sliceData;
       setImageSliceData({ imageIndex, numberOfSlices });
     }
-  }, [viewportIndex, viewportData]);
+  }, [viewportId, viewportData]);
 
   useEffect(() => {
     if (viewportData?.viewportType !== Enums.ViewportType.STACK) {
@@ -95,16 +83,10 @@ function CornerstoneImageScrollbar({
       });
     };
 
-    element.addEventListener(
-      Enums.Events.STACK_VIEWPORT_SCROLL,
-      updateStackIndex
-    );
+    element.addEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, updateStackIndex);
 
     return () => {
-      element.removeEventListener(
-        Enums.Events.STACK_VIEWPORT_SCROLL,
-        updateStackIndex
-      );
+      element.removeEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, updateStackIndex);
     };
   }, [viewportData, element]);
 
@@ -122,19 +104,14 @@ function CornerstoneImageScrollbar({
     element.addEventListener(Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);
 
     return () => {
-      element.removeEventListener(
-        Enums.Events.VOLUME_NEW_IMAGE,
-        updateVolumeIndex
-      );
+      element.removeEventListener(Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);
     };
   }, [viewportData, element]);
 
   return (
     <ImageScrollbar
-      onChange={evt => onImageScrollbarChange(evt, viewportIndex)}
-      max={
-        imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0
-      }
+      onChange={evt => onImageScrollbarChange(evt, viewportId)}
+      max={imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0}
       height={scrollbarHeight}
       value={imageSliceData.imageIndex}
     />
@@ -143,7 +120,7 @@ function CornerstoneImageScrollbar({
 
 CornerstoneImageScrollbar.propTypes = {
   viewportData: PropTypes.object,
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   element: PropTypes.instanceOf(Element),
   scrollbarHeight: PropTypes.string,
   imageSliceData: PropTypes.object.isRequired,

extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx

@@ -33,26 +33,14 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
   };
 
   useEffect(() => {
-    element.addEventListener(
-      Enums.Events.STACK_VIEWPORT_SCROLL,
-      setLoadingState
-    );
+    element.addEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingState);
     element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState);
-    element.addEventListener(
-      Enums.Events.STACK_NEW_IMAGE,
-      setFinishLoadingState
-    );
+    element.addEventListener(Enums.Events.STACK_NEW_IMAGE, setFinishLoadingState);
 
     return () => {
-      element.removeEventListener(
-        Enums.Events.STACK_VIEWPORT_SCROLL,
-        setLoadingState
-      );
+      element.removeEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingState);
 
-      element.removeEventListener(
-        Enums.Events.STACK_NEW_IMAGE,
-        setFinishLoadingState
-      );
+      element.removeEventListener(Enums.Events.STACK_NEW_IMAGE, setFinishLoadingState);
 
       element.removeEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState);
     };
@@ -61,8 +49,8 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
   if (error) {
     return (
       <>
-        <div className="bg-black opacity-50 absolute h-full w-full top-0 left-0">
-          <div className="flex transparent items-center justify-center w-full h-full">
+        <div className="absolute top-0 left-0 h-full w-full bg-black opacity-50">
+          <div className="transparent flex h-full w-full items-center justify-center">
             <p className="text-primary-light text-xl font-light">
               <h4>Error Loading Image</h4>
               <p>An error has occurred.</p>
@@ -78,8 +66,8 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
     return (
       // IMPORTANT: we need to use the pointer-events-none class to prevent the loading indicator from
       // interacting with the mouse, since scrolling should propagate to the viewport underneath
-      <div className="pointer-events-none bg-black opacity-50 absolute h-full w-full top-0 left-0">
-        <div className="flex transparent items-center justify-center w-full h-full">
+      <div className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50">
+        <div className="transparent flex h-full w-full items-center justify-center">
           <p className="text-primary-light text-xl font-light">Loading...</p>
         </div>
       </div>

extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx

@@ -13,16 +13,13 @@ import { vec3 } from 'gl-matrix';
 
 import './ViewportOrientationMarkers.css';
 
-const {
-  getOrientationStringLPS,
-  invertOrientationStringLPS,
-} = utilities.orientation;
+const { getOrientationStringLPS, invertOrientationStringLPS } = utilities.orientation;
 
 function ViewportOrientationMarkers({
   element,
   viewportData,
   imageSliceData,
-  viewportIndex,
+  viewportId,
   servicesManager,
   orientationMarkers = ['top', 'left'],
 }) {
@@ -33,9 +30,7 @@ function ViewportOrientationMarkers({
   const { cornerstoneViewportService } = servicesManager.services;
 
   useEffect(() => {
-    const cameraModifiedListener = (
-      evt: Types.EventTypes.CameraModifiedEvent
-    ) => {
+    const cameraModifiedListener = (evt: Types.EventTypes.CameraModifiedEvent) => {
       const { rotation, previousCamera, camera } = evt.detail;
 
       if (rotation !== undefined) {
@@ -57,16 +52,10 @@ function ViewportOrientationMarkers({
       }
     };
 
-    element.addEventListener(
-      Enums.Events.CAMERA_MODIFIED,
-      cameraModifiedListener
-    );
+    element.addEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
 
     return () => {
-      element.removeEventListener(
-        Enums.Events.CAMERA_MODIFIED,
-        cameraModifiedListener
-      );
+      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
     };
   }, []);
 
@@ -85,8 +74,7 @@ function ViewportOrientationMarkers({
         return false;
       }
 
-      ({ rowCosines, columnCosines } =
-        metaData.get('imagePlaneModule', imageId) || {});
+      ({ rowCosines, columnCosines } = metaData.get('imagePlaneModule', imageId) || {});
     } else {
       if (!element || !getEnabledElement(element)) {
         return '';
@@ -114,9 +102,7 @@ function ViewportOrientationMarkers({
       flipHorizontal
     );
 
-    const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
+    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
 
     if (!ohifViewport) {
       console.log('ViewportOrientationMarkers::No viewport');
@@ -126,9 +112,7 @@ function ViewportOrientationMarkers({
 
     // Todo: probably this can be done in a better way in which we identify bright
     // background
-    const isLight = backgroundColor
-      ? csUtils.isEqual(backgroundColor, [1, 1, 1])
-      : false;
+    const isLight = backgroundColor ? csUtils.isEqual(backgroundColor, [1, 1, 1]) : false;
 
     return orientationMarkers.map((m, index) => (
       <div
@@ -174,13 +158,7 @@ ViewportOrientationMarkers.defaultProps = {
  * @param {*} rotation in degrees
  * @returns
  */
-function _getOrientationMarkers(
-  rowCosines,
-  columnCosines,
-  rotation,
-  flipVertical,
-  flipHorizontal
-) {
+function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal) {
   const rowString = getOrientationStringLPS(rowCosines);
   const columnString = getOrientationStringLPS(columnCosines);
   const oppositeRowString = invertOrientationStringLPS(rowString);

extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx

@@ -11,13 +11,10 @@ function CornerstoneViewportOverlay({
   element,
   viewportData,
   imageSliceData,
-  viewportIndex,
+  viewportId,
   servicesManager,
 }) {
-  const {
-    cornerstoneViewportService,
-    toolbarService,
-  } = servicesManager.services;
+  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
   const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
   const [scale, setScale] = useState(1);
   const [activeTools, setActiveTools] = useState([]);
@@ -60,10 +57,7 @@ function CornerstoneViewportOverlay({
       }
 
       const { lower, upper } = range;
-      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
-        lower,
-        upper
-      );
+      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(lower, upper);
 
       setVOI({ windowCenter, windowWidth });
     };
@@ -73,7 +67,7 @@ function CornerstoneViewportOverlay({
     return () => {
       element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
     };
-  }, [viewportIndex, viewportData, voi, element]);
+  }, [viewportId, viewportData, voi, element]);
 
   /**
    * Updating the scale when the viewport changes its zoom
@@ -86,9 +80,7 @@ function CornerstoneViewportOverlay({
         previousCamera.parallelScale !== camera.parallelScale ||
         previousCamera.scale !== camera.scale
       ) {
-        const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-          viewportIndex
-        );
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
         if (!viewport) {
           return;
@@ -107,8 +99,7 @@ function CornerstoneViewportOverlay({
 
         const { spacing } = imageData;
         // convert parallel scale to scale
-        const scale =
-          (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
+        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
         setScale(scale);
       }
     };
@@ -118,7 +109,7 @@ function CornerstoneViewportOverlay({
     return () => {
       element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
     };
-  }, [viewportIndex, viewportData]);
+  }, [viewportId, viewportData]);
 
   const getTopLeftContent = useCallback(() => {
     const { windowWidth, windowCenter } = voi;
@@ -168,7 +159,7 @@ function CornerstoneViewportOverlay({
       instanceNumber = _getInstanceNumberFromVolume(
         viewportData,
         imageIndex,
-        viewportIndex,
+        viewportId,
         cornerstoneViewportService
       );
     }
@@ -183,15 +174,13 @@ function CornerstoneViewportOverlay({
         </span>
       </div>
     );
-  }, [imageSliceData, viewportData, viewportIndex]);
+  }, [imageSliceData, viewportData, viewportId]);
 
   if (!viewportData) {
     return null;
   }
 
-  const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(
-    viewportIndex
-  );
+  const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
 
   if (!ohifViewport) {
     return null;
@@ -201,9 +190,7 @@ function CornerstoneViewportOverlay({
 
   // Todo: probably this can be done in a better way in which we identify bright
   // background
-  const isLight = backgroundColor
-    ? utilities.isEqual(backgroundColor, [1, 1, 1])
-    : false;
+  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
 
   return (
     <ViewportOverlay
@@ -240,7 +227,7 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
 function _getInstanceNumberFromVolume(
   viewportData,
   imageIndex,
-  viewportIndex,
+  viewportId,
   cornerstoneViewportService
 ) {
   const volumes = viewportData.volumes;
@@ -253,9 +240,7 @@ function _getInstanceNumberFromVolume(
   const volume = volumes[0];
   const { direction, imageIds } = volume;
 
-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-    viewportIndex
-  );
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
   if (!cornerstoneViewport) {
     return;
@@ -278,8 +263,7 @@ function _getInstanceNumberFromVolume(
       return {};
     }
 
-    const { instanceNumber } =
-      metaData.get('generalImageModule', imageId) || {};
+    const { instanceNumber } = metaData.get('generalImageModule', imageId) || {};
     return parseInt(instanceNumber);
   }
 }
@@ -287,7 +271,7 @@ function _getInstanceNumberFromVolume(
 CornerstoneViewportOverlay.propTypes = {
   viewportData: PropTypes.object,
   imageIndex: PropTypes.number,
-  viewportIndex: PropTypes.number,
+  viewportId: PropTypes.string,
   servicesManager: PropTypes.instanceOf(ServicesManager),
 };
 

extensions/cornerstone/src/Viewport/Overlays/utils.ts

@@ -75,22 +75,16 @@ export function formatPN(name) {
  * Gets compression type
  *
  * @param {number} imageId
- * @returns {string} comrpession type.
+ * @returns {string} compression type.
  */
 export function getCompression(imageId) {
   const generalImageModule = metaData.get('generalImageModule', imageId) || {};
-  const {
-    lossyImageCompression,
-    lossyImageCompressionRatio,
-    lossyImageCompressionMethod,
-  } = generalImageModule;
+  const { lossyImageCompression, lossyImageCompressionRatio, lossyImageCompressionMethod } =
+    generalImageModule;
 
   if (lossyImageCompression === '01' && lossyImageCompressionRatio !== '') {
     const compressionMethod = lossyImageCompressionMethod || 'Lossy: ';
-    const compressionRatio = formatNumberPrecision(
-      lossyImageCompressionRatio,
-      2
-    );
+    const compressionRatio = formatNumberPrecision(lossyImageCompressionRatio, 2);
     return compressionMethod + compressionRatio + ' : 1';
   }
 

extensions/cornerstone/src/commandsModule.ts

@@ -18,6 +18,7 @@ import toggleStackImageSync from './utils/stackSync/toggleStackImageSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import { CornerstoneServices } from './types';
+import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
 
 function commandsModule({
   servicesManager,
@@ -57,9 +58,7 @@ function commandsModule({
         // filter by allowed selected tools from config property (if there is any)
         const isToolAllowed =
           !optionsToUse.allowedSelectedTools ||
-          optionsToUse.allowedSelectedTools.includes(
-            firstAnnotationSelected?.metadata?.toolName
-          );
+          optionsToUse.allowedSelectedTools.includes(firstAnnotationSelected?.metadata?.toolName);
         if (isToolAllowed) {
           optionsToUse.nearbyToolData = firstAnnotationSelected;
         } else {
@@ -89,10 +88,7 @@ function commandsModule({
     },
 
     getNearbyToolData({ nearbyToolData, element, canvasCoordinates }) {
-      return (
-        nearbyToolData ??
-        cstUtils.getAnnotationNearPoint(element, canvasCoordinates)
-      );
+      return nearbyToolData ?? cstUtils.getAnnotationNearPoint(element, canvasCoordinates);
     },
     getNearbyAnnotation({ element, canvasCoordinates }) {
       const nearbyToolData = actions.getNearbyToolData({
@@ -109,18 +105,14 @@ function commandsModule({
         }
 
         const { renderingEngineId, viewportId } = enabledElement;
-        const toolGroup = ToolGroupManager.getToolGroupForViewport(
-          viewportId,
-          renderingEngineId
-        );
+        const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);
 
         const toolInstance = toolGroup.getToolInstance(toolName);
 
         return toolInstance?.constructor?.isAnnotation ?? true;
       };
 
-      return nearbyToolData?.metadata?.toolName &&
-        isAnnotation(nearbyToolData.metadata.toolName)
+      return nearbyToolData?.metadata?.toolName && isAnnotation(nearbyToolData.metadata.toolName)
         ? nearbyToolData
         : null;
     },
@@ -153,11 +145,7 @@ function commandsModule({
             label,
           });
 
-          measurementService.update(
-            updatedMeasurement.uid,
-            updatedMeasurement,
-            true
-          );
+          measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
         },
         false
       );
@@ -220,27 +208,20 @@ function commandsModule({
           }
         }
       }
-      measurementService.update(
-        updatedMeasurement.uid,
-        updatedMeasurement,
-        true
-      );
+      measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
     },
 
     // Retrieve value commands
     getActiveViewportEnabledElement: _getActiveViewportEnabledElement,
 
     setViewportActive: ({ viewportId }) => {
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(
-        viewportId
-      );
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
       if (!viewportInfo) {
         console.warn('No viewport found for viewportId:', viewportId);
         return;
       }
 
-      const viewportIndex = viewportInfo.getViewportIndex();
-      viewportGridService.setActiveViewportIndex(viewportIndex);
+      viewportGridService.setActiveViewportId(viewportId);
     },
     arrowTextCallback: ({ callback, data }) => {
       callInputDialog(uiDialogService, data, callback);
@@ -250,9 +231,7 @@ function commandsModule({
       const { isCineEnabled } = cineService.getState();
       cineService.setIsCineEnabled(!isCineEnabled);
       toolbarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
-      viewports.forEach((_, index) =>
-        cineService.setCine({ id: index, isPlaying: false })
-      );
+      viewports.forEach((_, index) => cineService.setCine({ id: index, isPlaying: false }));
     },
     setWindowLevel({ window, level, toolGroupId }) {
       // convert to numbers
@@ -260,9 +239,7 @@ function commandsModule({
       const windowCenterNum = Number(level);
 
       const { viewportId } = _getActiveViewportEnabledElement();
-      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(
-        viewportId
-      );
+      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(viewportId);
 
       if (toolGroupId && toolGroupId !== viewportToolGroupId) {
         return;
@@ -272,10 +249,7 @@ function commandsModule({
       const renderingEngine = cornerstoneViewportService.getRenderingEngine();
       const viewport = renderingEngine.getViewport(viewportId);
 
-      const { lower, upper } = csUtils.windowLevel.toLowHighRange(
-        windowWidthNum,
-        windowCenterNum
-      );
+      const { lower, upper } = csUtils.windowLevel.toLowHighRange(windowWidthNum, windowCenterNum);
 
       viewport.setProperties({
         voiRange: {
@@ -293,7 +267,7 @@ function commandsModule({
       toolbarService.recordInteraction(props);
     },
 
-    setToolActive: ({ toolName, toolGroupId = null }) => {
+    setToolActive: ({ toolName, toolGroupId = null, toggledState }) => {
       if (toolName === 'Crosshairs') {
         const activeViewportToolGroup = toolGroupService.getToolGroup(null);
 
@@ -310,9 +284,11 @@ function commandsModule({
         }
       }
 
-      const { viewports } = viewportGridService.getState() || {
-        viewports: [],
-      };
+      const { viewports } = viewportGridService.getState();
+
+      if (!viewports.size) {
+        return;
+      }
 
       const toolGroup = toolGroupService.getToolGroup(toolGroupId);
       const toolGroupViewportIds = toolGroup?.getViewportIds?.();
@@ -322,14 +298,8 @@ function commandsModule({
         return;
       }
 
-      const filteredViewports = viewports.filter(viewport => {
-        if (!viewport.viewportOptions) {
-          return false;
-        }
-
-        return toolGroupViewportIds.includes(
-          viewport.viewportOptions.viewportId
-        );
+      const filteredViewports = Array.from(viewports.values()).filter(viewport => {
+        return toolGroupViewportIds.includes(viewport.viewportId);
       });
 
       if (!filteredViewports.length) {
@@ -358,6 +328,14 @@ function commandsModule({
           toolGroup.setToolPassive(activeToolName);
         }
       }
+
+      // If there is a toggle state, then simply set the enabled/disabled state without
+      // setting the tool active.
+      if (toggledState != null) {
+        toggledState ? toolGroup.setToolEnabled(toolName) : toolGroup.setToolDisabled(toolName);
+        return;
+      }
+
       // Set the new toolName to be active
       toolGroup.setToolActive(toolName, {
         bindings: [
@@ -368,13 +346,9 @@ function commandsModule({
       });
     },
     showDownloadViewportModal: () => {
-      const { activeViewportIndex } = viewportGridService.getState();
+      const { activeViewportId } = viewportGridService.getState();
 
-      if (
-        !cornerstoneViewportService.getCornerstoneViewportByIndex(
-          activeViewportIndex
-        )
-      ) {
+      if (!cornerstoneViewportService.getCornerstoneViewport(activeViewportId)) {
         // Cannot download a non-cornerstone viewport (image).
         uiNotificationService.show({
           title: 'Download Image',
@@ -391,7 +365,7 @@ function commandsModule({
           content: CornerstoneViewportDownloadForm,
           title: 'Download High Quality Image',
           contentProps: {
-            activeViewportIndex,
+            activeViewportId,
             onClose: uiModalService.hide,
             cornerstoneViewportService,
           },
@@ -513,9 +487,7 @@ function commandsModule({
         }
         viewport = enabledElement.viewport;
       } else {
-        viewport = cornerstoneViewportService.getCornerstoneViewport(
-          gridViewport.id
-        );
+        viewport = cornerstoneViewportService.getCornerstoneViewport(gridViewport.id);
       }
 
       // Get number of slices
@@ -525,14 +497,12 @@ function commandsModule({
       if (viewport instanceof StackViewport) {
         numberOfSlices = viewport.getImageIds().length;
       } else if (viewport instanceof VolumeViewport) {
-        numberOfSlices = csUtils.getImageSliceDataForVolumeViewport(viewport)
-          .numberOfSlices;
+        numberOfSlices = csUtils.getImageSliceDataForVolumeViewport(viewport).numberOfSlices;
       } else {
         throw new Error('Unsupported viewport type');
       }
 
-      const jumpIndex =
-        imageIndex < 0 ? numberOfSlices + imageIndex : imageIndex;
+      const jumpIndex = imageIndex < 0 ? numberOfSlices + imageIndex : imageIndex;
       if (jumpIndex >= numberOfSlices || jumpIndex < 0) {
         throw new Error(`Can't jump to ${imageIndex}`);
       }
@@ -553,15 +523,8 @@ function commandsModule({
 
       cstUtils.scroll(viewport, options);
     },
-    setViewportColormap: ({
-      viewportIndex,
-      displaySetInstanceUID,
-      colormap,
-      immediate = false,
-    }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-        viewportIndex
-      );
+    setViewportColormap: ({ viewportId, displaySetInstanceUID, colormap, immediate = false }) => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
       const actorEntries = viewport.getActors();
 
@@ -577,17 +540,15 @@ function commandsModule({
         viewport.render();
       }
     },
-    incrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex + 1) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
-    decrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
+    changeActiveViewport: ({ direction = 1 }) => {
+      const { activeViewportId, viewports } = viewportGridService.getState();
+      const viewportIds = Array.from(viewports.keys());
+      const currentIndex = viewportIds.indexOf(activeViewportId);
       const nextViewportIndex =
-        (activeViewportIndex - 1 + viewports.length) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
+        (currentIndex + direction + viewportIds.length) % viewportIds.length;
+      viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex] as string);
     },
+
     toggleStackImageSync: ({ toggledState }) => {
       toggleStackImageSync({
         getEnabledElement,
@@ -595,19 +556,13 @@ function commandsModule({
         toggledState,
       });
     },
-    toggleReferenceLines: ({ toggledState }) => {
-      const { activeViewportIndex } = viewportGridService.getState();
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-        activeViewportIndex
-      );
+    setSourceViewportForReferenceLinesTool: ({ toggledState }) => {
+      const { activeViewportId } = viewportGridService.getState();
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(activeViewportId);
 
       const viewportId = viewportInfo.getViewportId();
       const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
 
-      if (!toggledState) {
-        toolGroup.setToolDisabled(ReferenceLinesTool.toolName);
-      }
-
       toolGroup.setToolConfiguration(
         ReferenceLinesTool.toolName,
         {
@@ -615,36 +570,9 @@ function commandsModule({
         },
         true // overwrite
       );
-      toolGroup.setToolEnabled(ReferenceLinesTool.toolName);
     },
-    storePresentation: ({ viewportIndex }) => {
-      const presentation = cornerstoneViewportService.getPresentation(
-        viewportIndex
-      );
-      if (!presentation || !presentation.presentationIds) {
-        return;
-      }
-      const {
-        lutPresentationStore,
-        positionPresentationStore,
-      } = stateSyncService.getState();
-      const { presentationIds } = presentation;
-      const { lutPresentationId, positionPresentationId } =
-        presentationIds || {};
-      const storeState = {};
-      if (lutPresentationId) {
-        storeState.lutPresentationStore = {
-          ...lutPresentationStore,
-          [lutPresentationId]: presentation,
-        };
-      }
-      if (positionPresentationId) {
-        storeState.positionPresentationStore = {
-          ...positionPresentationStore,
-          [positionPresentationId]: presentation,
-        };
-      }
-      stateSyncService.store(storeState);
+    storePresentation: ({ viewportId }) => {
+      cornerstoneViewportService.storePresentation({ viewportId });
     },
   };
 
@@ -701,10 +629,11 @@ function commandsModule({
       options: { rotation: -90 },
     },
     incrementActiveViewport: {
-      commandFn: actions.incrementActiveViewport,
+      commandFn: actions.changeActiveViewport,
     },
     decrementActiveViewport: {
-      commandFn: actions.decrementActiveViewport,
+      commandFn: actions.changeActiveViewport,
+      options: { direction: -1 },
     },
     flipViewportHorizontal: {
       commandFn: actions.flipViewportHorizontal,
@@ -767,8 +696,8 @@ function commandsModule({
     toggleStackImageSync: {
       commandFn: actions.toggleStackImageSync,
     },
-    toggleReferenceLines: {
-      commandFn: actions.toggleReferenceLines,
+    setSourceViewportForReferenceLinesTool: {
+      commandFn: actions.setSourceViewportForReferenceLinesTool,
     },
     storePresentation: {
       commandFn: actions.storePresentation,

extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx

@@ -2,14 +2,10 @@ import React, { useEffect } from 'react';
 import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
 import { Enums, eventTarget } from '@cornerstonejs/core';
 
-function WrappedCinePlayer({
-  enabledVPElement,
-  viewportIndex,
-  servicesManager,
-}) {
+function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
   const { toolbarService, customizationService } = servicesManager.services;
   const [{ isCineEnabled, cines }, cineService] = useCine();
-  const [{ activeViewportIndex }] = useViewportGrid();
+  const [{ activeViewportId }] = useViewportGrid();
 
   const { component: CinePlayerComponent = CinePlayer } =
     customizationService.get('cinePlayer') ?? {};
@@ -30,11 +26,11 @@ function WrappedCinePlayer({
   };
 
   const cineHandler = () => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
       return;
     }
 
-    const cine = cines[viewportIndex];
+    const cine = cines[viewportId];
     const isPlaying = cine.isPlaying || false;
     const frameRate = cine.frameRate || 24;
 
@@ -50,52 +46,46 @@ function WrappedCinePlayer({
   };
 
   useEffect(() => {
-    eventTarget.addEventListener(
-      Enums.Events.STACK_VIEWPORT_NEW_STACK,
-      cineHandler
-    );
+    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
 
     return () => {
-      cineService.setCine({ id: viewportIndex, isPlaying: false });
-      eventTarget.removeEventListener(
-        Enums.Events.STACK_VIEWPORT_NEW_STACK,
-        cineHandler
-      );
+      cineService.setCine({ id: viewportId, isPlaying: false });
+      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
     };
   }, [enabledVPElement]);
 
   useEffect(() => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
       return;
     }
 
     cineHandler();
 
     return () => {
-      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
+      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
         cineService.stopClip(enabledVPElement);
       }
     };
-  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
+  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
 
-  const cine = cines[viewportIndex];
+  const cine = cines[viewportId];
   const isPlaying = (cine && cine.isPlaying) || false;
 
   return (
     isCineEnabled && (
       <CinePlayerComponent
-        className="absolute left-1/2 -translate-x-1/2 bottom-3"
+        className="absolute left-1/2 bottom-3 -translate-x-1/2"
         isPlaying={isPlaying}
         onClose={handleCineClose}
         onPlayPauseChange={isPlaying =>
           cineService.setCine({
-            id: activeViewportIndex,
+            id: activeViewportId,
             isPlaying,
           })
         }
         onFrameRateChange={frameRate =>
           cineService.setCine({
-            id: activeViewportIndex,
+            id: activeViewportId,
             frameRate,
           })
         }

extensions/cornerstone/src/components/DicomUpload/DicomUpload.css

@@ -1,6 +1,23 @@
 .dicom-upload-drop-area-border-dash {
-  background-image: repeating-linear-gradient(to right, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%);
-  background-position: left top, left bottom, left top, right top;
+  background-image: repeating-linear-gradient(
+      to right,
+      #7bb2ce 0%,
+      #7bb2ce 50%,
+      transparent 50%,
+      transparent 100%
+    ),
+    repeating-linear-gradient(to right, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
+    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
+    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%);
+  background-position:
+    left top,
+    left bottom,
+    left top,
+    right top;
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
+  background-size:
+    20px 3px,
+    20px 3px,
+    3px 20px,
+    3px 20px;
 }

extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx

@@ -14,19 +14,13 @@ type DicomUploadProps = {
   onStarted: () => void;
 };
 
-function DicomUpload({
-  dataSource,
-  onComplete,
-  onStarted,
-}: DicomUploadProps): ReactElement {
+function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement {
   const baseClassNames = 'min-h-[480px] flex flex-col bg-black select-none';
   const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]);
 
   const onDrop = useCallback(async acceptedFiles => {
     onStarted();
-    setDicomFileUploaderArr(
-      acceptedFiles.map(file => new DicomFileUploader(file, dataSource))
-    );
+    setDicomFileUploaderArr(acceptedFiles.map(file => new DicomFileUploader(file, dataSource)));
   }, []);
 
   const getDropZoneComponent = (): ReactElement => {
@@ -40,20 +34,29 @@ function DicomUpload({
         {({ getRootProps }) => (
           <div
             {...getRootProps()}
-            className="m-5 dicom-upload-drop-area-border-dash flex flex-col items-center justify-center h-full"
+            className="dicom-upload-drop-area-border-dash m-5 flex h-full flex-col items-center justify-center"
           >
             <div className="flex gap-3">
-              <Dropzone onDrop={onDrop} noDrag>
+              <Dropzone
+                onDrop={onDrop}
+                noDrag
+              >
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
-                    <Button disabled={false} onClick={() => {}}>
+                    <Button
+                      disabled={false}
+                      onClick={() => {}}
+                    >
                       {'Add files'}
                       <input {...getInputProps()} />
                     </Button>
                   </div>
                 )}
               </Dropzone>
-              <Dropzone onDrop={onDrop} noDrag>
+              <Dropzone
+                onDrop={onDrop}
+                noDrag
+              >
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
                     <Button
@@ -73,9 +76,7 @@ function DicomUpload({
               </Dropzone>
             </div>
             <div className="pt-5">or drag images or folders here</div>
-            <div className="pt-3 text-aqua-pale text-lg">
-              (DICOM files supported)
-            </div>
+            <div className="text-aqua-pale pt-3 text-lg">(DICOM files supported)</div>
           </div>
         )}
       </Dropzone>
@@ -92,9 +93,7 @@ function DicomUpload({
           />
         </div>
       ) : (
-        <div className={classNames('h-[480px]', baseClassNames)}>
-          {getDropZoneComponent()}
-        </div>
+        <div className={classNames('h-[480px]', baseClassNames)}>{getDropZoneComponent()}</div>
       )}
     </>
   );

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  ReactElement,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon, ProgressLoadingBar } from '@ohif/ui';
 import DicomFileUploader, {
@@ -39,18 +33,14 @@ const BASE_INTERVAL_TIME = 15000;
 // calculate the upload rate.
 const UPLOAD_RATE_THRESHOLD = 75;
 
-const NO_WRAP_ELLIPSIS_CLASS_NAMES =
-  'text-ellipsis whitespace-nowrap overflow-hidden';
+const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';
 
 function DicomUploadProgress({
   dicomFileUploaderArr,
   onComplete,
 }: DicomUploadProgressProps): ReactElement {
   const [totalUploadSize] = useState(
-    dicomFileUploaderArr.reduce(
-      (acc, fileUploader) => acc + fileUploader.getFileSize(),
-      0
-    )
+    dicomFileUploaderArr.reduce((acc, fileUploader) => acc + fileUploader.getFileSize(), 0)
   );
 
   const currentUploadSizeRef = useRef<number>(0);
@@ -83,15 +73,13 @@ function DicomUploadProgress({
     let intervalStartTime = Date.now();
 
     const setUploadRateRef = () => {
-      const uploadSizeFromStartOfInterval =
-        currentUploadSizeRef.current - intervalStartUploadSize;
+      const uploadSizeFromStartOfInterval = currentUploadSizeRef.current - intervalStartUploadSize;
 
       const now = Date.now();
       const timeSinceStartOfInterval = now - intervalStartTime;
 
       // Calculate and set the upload rate (ref)
-      uploadRateRef.current =
-        uploadSizeFromStartOfInterval / timeSinceStartOfInterval;
+      uploadRateRef.current = uploadSizeFromStartOfInterval / timeSinceStartOfInterval;
 
       // Reset the interval starting values.
       intervalStartUploadSize = currentUploadSizeRef.current;
@@ -134,28 +122,19 @@ function DicomUploadProgress({
       const updateProgress = (percentComplete: number) => {
         const previousFileUploadSize = currentFileUploadSize;
 
-        currentFileUploadSize = Math.round(
-          (percentComplete / 100) * fileUploader.getFileSize()
-        );
+        currentFileUploadSize = Math.round((percentComplete / 100) * fileUploader.getFileSize());
 
         currentUploadSizeRef.current = Math.min(
           totalUploadSize,
-          currentUploadSizeRef.current -
-            previousFileUploadSize +
-            currentFileUploadSize
+          currentUploadSizeRef.current - previousFileUploadSize + currentFileUploadSize
         );
 
-        setPercentComplete(
-          (currentUploadSizeRef.current / totalUploadSize) * 100
-        );
+        setPercentComplete((currentUploadSizeRef.current / totalUploadSize) * 100);
 
         if (uploadRateRef.current !== 0) {
-          const uploadSizeRemaining =
-            totalUploadSize - currentUploadSizeRef.current;
+          const uploadSizeRemaining = totalUploadSize - currentUploadSizeRef.current;
 
-          const timeRemaining = Math.round(
-            uploadSizeRemaining / uploadRateRef.current
-          );
+          const timeRemaining = Math.round(uploadSizeRemaining / uploadRateRef.current);
 
           if (currentTimeRemaining === null) {
             currentTimeRemaining = timeRemaining;
@@ -168,9 +147,7 @@ function DicomUploadProgress({
           // due to rounding, inaccuracies in the estimate and slight variations
           // in upload rates over time.
           if (timeRemaining < ONE_MINUTE) {
-            const currentSecondsRemaining = Math.ceil(
-              currentTimeRemaining / ONE_SECOND
-            );
+            const currentSecondsRemaining = Math.ceil(currentTimeRemaining / ONE_SECOND);
             const secondsRemaining = Math.ceil(timeRemaining / ONE_SECOND);
             const delta = secondsRemaining - currentSecondsRemaining;
             if (delta < 0 || delta > 2) {
@@ -181,9 +158,7 @@ function DicomUploadProgress({
           }
 
           if (timeRemaining < ONE_HOUR) {
-            const currentMinutesRemaining = Math.ceil(
-              currentTimeRemaining / ONE_MINUTE
-            );
+            const currentMinutesRemaining = Math.ceil(currentTimeRemaining / ONE_MINUTE);
             const minutesRemaining = Math.ceil(timeRemaining / ONE_MINUTE);
             const delta = minutesRemaining - currentMinutesRemaining;
             if (delta < 0 || delta > 2) {
@@ -199,9 +174,7 @@ function DicomUploadProgress({
         }
       };
 
-      const progressCallback = (
-        progressEvent: DicomFileUploaderProgressEvent
-      ) => {
+      const progressCallback = (progressEvent: DicomFileUploaderProgressEvent) => {
         updateProgress(progressEvent.percentComplete);
       };
 
@@ -249,16 +222,12 @@ function DicomUploadProgress({
 
     if (timeRemaining < ONE_MINUTE) {
       const secondsRemaining = Math.ceil(timeRemaining / ONE_SECOND);
-      return `${secondsRemaining} ${
-        secondsRemaining === 1 ? 'second' : 'seconds'
-      }`;
+      return `${secondsRemaining} ${secondsRemaining === 1 ? 'second' : 'seconds'}`;
     }
 
     if (timeRemaining < ONE_HOUR) {
       const minutesRemaining = Math.ceil(timeRemaining / ONE_MINUTE);
-      return `${minutesRemaining} ${
-        minutesRemaining === 1 ? 'minute' : 'minutes'
-      }`;
+      return `${minutesRemaining} ${minutesRemaining === 1 ? 'minute' : 'minutes'}`;
     }
 
     const hoursRemaining = Math.ceil(timeRemaining / ONE_HOUR);
@@ -278,9 +247,7 @@ function DicomUploadProgress({
   const showInfiniteProgressBar = useCallback((): boolean => {
     return (
       getPercentCompleteRounded() < 1 &&
-      (progressBarContainerRef?.current?.offsetWidth ?? 0) *
-        (percentComplete / 100) <
-        1
+      (progressBarContainerRef?.current?.offsetWidth ?? 0) * (percentComplete / 100) < 1
     );
   }, [getPercentCompleteRounded, percentComplete]);
 
@@ -300,15 +267,17 @@ function DicomUploadProgress({
 
   const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
     return (
-      <div className="text-lg px-1 pb-4 h-14 flex bg-primary-dark items-center">
+      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg">
         {numFilesCompleted === dicomFileUploaderArr.length ? (
           <>
-            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${
-              dicomFileUploaderArr.length
-            } ${
+            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${
               dicomFileUploaderArr.length > 1 ? 'files' : 'file'
             } completed.`}</span>
-            <Button disabled={false} className="ml-auto" onClick={onComplete}>
+            <Button
+              disabled={false}
+              className="ml-auto"
+              onClick={onComplete}
+            >
               {'Close'}
             </Button>
           </>
@@ -320,18 +289,14 @@ function DicomUploadProgress({
             >
               {`${numFilesCompleted} of ${dicomFileUploaderArr.length}`}&nbsp;
             </span>
+            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{' files completed.'}&nbsp;</span>
             <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>
-              {' files completed.'}&nbsp;
-            </span>
-            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>
-              {timeRemaining
-                ? `Less than ${getFormattedTimeRemaining()} remaining. `
-                : ''}
+              {timeRemaining ? `Less than ${getFormattedTimeRemaining()} remaining. ` : ''}
             </span>
             <span
               className={classNames(
                 NO_WRAP_ELLIPSIS_CLASS_NAMES,
-                'cursor-pointer text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto'
+                'text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'
               )}
               onClick={cancelAllUploads}
             >
@@ -345,14 +310,13 @@ function DicomUploadProgress({
 
   const getShowFailedOnlyIconComponent = (): ReactElement => {
     return (
-      <div className="ml-auto flex justify-center w-6">
+      <div className="ml-auto flex w-6 justify-center">
         {numFails > 0 && (
-          <div
-            onClick={() =>
-              setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)
-            }
-          >
-            <Icon className="cursor-pointer" name="icon-status-alert"></Icon>
+          <div onClick={() => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)}>
+            <Icon
+              className="cursor-pointer"
+              name="icon-status-alert"
+            ></Icon>
           </div>
         )}
       </div>
@@ -361,31 +325,28 @@ function DicomUploadProgress({
 
   const getPercentCompleteComponent = (): ReactElement => {
     return (
-      <div className="overflow-y-scroll ohif-scrollbar px-2 border-b border-secondary-light">
-        <div className="flex w-full p-2.5 items-center min-h-14">
+      <div className="ohif-scrollbar border-secondary-light overflow-y-scroll border-b px-2">
+        <div className="min-h-14 flex w-full items-center p-2.5">
           {numFilesCompleted === dicomFileUploaderArr.length ? (
             <>
-              <div className="text-xl text-primary-light">
+              <div className="text-primary-light text-xl">
                 {numFails > 0
-                  ? `Completed with ${numFails} ${
-                      numFails > 1 ? 'errors' : 'error'
-                    }!`
+                  ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!`
                   : 'Completed!'}
               </div>
               {getShowFailedOnlyIconComponent()}
             </>
           ) : (
             <>
-              <div ref={progressBarContainerRef} className="flex-grow">
+              <div
+                ref={progressBarContainerRef}
+                className="flex-grow"
+              >
                 <ProgressLoadingBar
-                  progress={
-                    showInfiniteProgressBar()
-                      ? undefined
-                      : Math.min(100, percentComplete)
-                  }
+                  progress={showInfiniteProgressBar() ? undefined : Math.min(100, percentComplete)}
                 ></ProgressLoadingBar>
               </div>
-              <div className="w-24 ml-1 flex items-center">
+              <div className="ml-1 flex w-24 items-center">
                 <div className="w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
                 {getShowFailedOnlyIconComponent()}
               </div>
@@ -397,16 +358,15 @@ function DicomUploadProgress({
   };
 
   return (
-    <div className="flex flex-col grow">
+    <div className="flex grow flex-col">
       {getNumCompletedAndTimeRemainingComponent()}
-      <div className="flex flex-col bg-black text-lg overflow-hidden grow">
+      <div className="flex grow flex-col overflow-hidden bg-black text-lg">
         {getPercentCompleteComponent()}
-        <div className="overflow-y-scroll ohif-scrollbar px-2 grow h-1">
+        <div className="ohif-scrollbar h-1 grow overflow-y-scroll px-2">
           {dicomFileUploaderArr
             .filter(
               dicomFileUploader =>
-                !showFailedOnly ||
-                dicomFileUploader.getStatus() === UploadStatus.Failed
+                !showFailedOnly || dicomFileUploader.getStatus() === UploadStatus.Failed
             )
             .map(dicomFileUploader => (
               <DicomUploadProgressItem
@@ -421,9 +381,7 @@ function DicomUploadProgress({
 }
 
 DicomUploadProgress.propTypes = {
-  dicomFileUploaderArr: PropTypes.arrayOf(
-    PropTypes.instanceOf(DicomFileUploader)
-  ).isRequired,
+  dicomFileUploaderArr: PropTypes.arrayOf(PropTypes.instanceOf(DicomFileUploader)).isRequired,
   onComplete: PropTypes.func.isRequired,
 };
 

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -1,10 +1,4 @@
-import React, {
-  ReactElement,
-  memo,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { ReactElement, memo, useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import DicomFileUploader, {
   DicomFileUploaderProgressEvent,
@@ -21,9 +15,7 @@ type DicomUploadProgressItemProps = {
 // eslint-disable-next-line react/display-name
 const DicomUploadProgressItem = memo(
   ({ dicomFileUploader }: DicomUploadProgressItemProps): ReactElement => {
-    const [percentComplete, setPercentComplete] = useState(
-      dicomFileUploader.getPercentComplete()
-    );
+    const [percentComplete, setPercentComplete] = useState(dicomFileUploader.getPercentComplete());
     const [failedReason, setFailedReason] = useState('');
     const [status, setStatus] = useState(dicomFileUploader.getStatus());
 
@@ -62,7 +54,10 @@ const DicomUploadProgressItem = memo(
       switch (dicomFileUploader.getStatus()) {
         case UploadStatus.Success:
           return (
-            <Icon name="status-tracked" className="text-primary-light"></Icon>
+            <Icon
+              name="status-tracked"
+              className="text-primary-light"
+            ></Icon>
           );
         case UploadStatus.InProgress:
           return <Icon name="icon-transferring"></Icon>;
@@ -76,27 +71,25 @@ const DicomUploadProgressItem = memo(
     };
 
     return (
-      <div className="flex w-full p-2.5 text-lg min-h-14 items-center border-b border-secondary-light overflow-hidden">
-        <div className="flex flex-col gap-1 self-top w-0 grow shrink">
+      <div className="min-h-14 border-secondary-light flex w-full items-center overflow-hidden border-b p-2.5 text-lg">
+        <div className="self-top flex w-0 shrink grow flex-col gap-1">
           <div className="flex gap-4">
-            <div className="flex w-6 justify-center items-center shrink-0">
-              {getStatusIcon()}
-            </div>
-            <div className="text-ellipsis whitespace-nowrap overflow-hidden">
+            <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
               {dicomFileUploader.getFileName()}
             </div>
           </div>
           {failedReason && <div className="pl-10">{failedReason}</div>}
         </div>
-        <div className="w-24 flex items-center">
+        <div className="flex w-24 items-center">
           {!isComplete() && (
             <>
               {dicomFileUploader.getStatus() === UploadStatus.InProgress && (
                 <div className="w-10 text-right">{percentComplete}%</div>
               )}
-              <div className="flex cursor-pointer ml-auto">
+              <div className="ml-auto flex cursor-pointer">
                 <Icon
-                  className="self-center text-primary-active"
+                  className="text-primary-active self-center"
                   name="close"
                   onClick={cancelUpload}
                 />

extensions/cornerstone/src/getHangingProtocolModule.ts

@@ -88,6 +88,7 @@ const mpr: Types.HangingProtocol.Protocol = {
       viewports: [
         {
           viewportOptions: {
+            viewportId: 'mpr-axial',
             toolGroupId: 'mpr',
             viewportType: 'volume',
             orientation: 'axial',
@@ -111,6 +112,7 @@ const mpr: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'mpr-sagittal',
             toolGroupId: 'mpr',
             viewportType: 'volume',
             orientation: 'sagittal',
@@ -134,6 +136,7 @@ const mpr: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'mpr-coronal',
             toolGroupId: 'mpr',
             viewportType: 'volume',
             orientation: 'coronal',

extensions/cornerstone/src/index.tsx

@@ -31,9 +31,7 @@ import { measurementMappingUtils } from './utils/measurementServiceMappings';
 import type { PublicViewportOptions } from './services/ViewportService/Viewport';
 
 const Component = React.lazy(() => {
-  return import(
-    /* webpackPrefetch: true */ './Viewport/OHIFCornerstoneViewport'
-  );
+  return import(/* webpackPrefetch: true */ './Viewport/OHIFCornerstoneViewport');
 });
 
 const OHIFCornerstoneViewport = props => {
@@ -69,9 +67,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
    *
    * @param configuration.csToolsConfig - Passed directly to `initCornerstoneTools`
    */
-  preRegistration: function (
-    props: Types.Extensions.ExtensionParams
-  ): Promise<void> {
+  preRegistration: function (props: Types.Extensions.ExtensionParams): Promise<void> {
     const { servicesManager } = props;
     servicesManager.registerService(CornerstoneViewportService.REGISTRATION);
     servicesManager.registerService(ToolGroupService.REGISTRATION);
@@ -139,5 +135,10 @@ const cornerstoneExtension: Types.Extensions.Extension = {
 };
 
 export type { PublicViewportOptions };
-export { measurementMappingUtils, CornerstoneExtensionTypes, toolNames , getActiveViewportEnabledElement};
+export {
+  measurementMappingUtils,
+  CornerstoneExtensionTypes,
+  toolNames,
+  getActiveViewportEnabledElement,
+};
 export default cornerstoneExtension;

extensions/cornerstone/src/init.tsx

@@ -49,8 +49,7 @@ export default async function init({
     ...cornerstone.getConfiguration(),
     rendering: {
       ...cornerstone.getConfiguration().rendering,
-      strictZSpacingForVolumeViewport:
-        appConfig.strictZSpacingForVolumeViewport,
+      strictZSpacingForVolumeViewport: appConfig.strictZSpacingForVolumeViewport,
     },
   });
 
@@ -62,10 +61,7 @@ export default async function init({
 
   initCornerstoneTools();
 
-  Settings.getRuntimeSettings().set(
-    'useCursors',
-    Boolean(appConfig.useCursors)
-  );
+  Settings.getRuntimeSettings().set('useCursors', Boolean(appConfig.useCursors));
 
   const {
     userAuthenticationService,
@@ -84,22 +80,15 @@ export default async function init({
   window.extensionManager = extensionManager;
   window.commandsManager = commandsManager;
 
-  if (
-    appConfig.showWarningMessageForCrossOrigin &&
-    !window.crossOriginIsolated
-  ) {
+  if (appConfig.showWarningMessageForCrossOrigin && !window.crossOriginIsolated) {
     uiNotificationService.show({
       title: 'Cross Origin Isolation',
-      message:
-        'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
+      message: 'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
       type: 'warning',
     });
   }
 
-  if (
-    appConfig.showCPUFallbackMessage &&
-    cornerstone.getShouldUseCPURendering()
-  ) {
+  if (appConfig.showCPUFallbackMessage && cornerstone.getShouldUseCPURendering()) {
     _showCPURenderingModal(uiModalService, hangingProtocolService);
   }
 
@@ -119,18 +108,14 @@ export default async function init({
     clearOnModeExit: true,
   });
 
-  const labelmapRepresentation =
-    cornerstoneTools.Enums.SegmentationRepresentations.Labelmap;
+  const labelmapRepresentation = cornerstoneTools.Enums.SegmentationRepresentations.Labelmap;
 
-  cornerstoneTools.segmentation.config.setGlobalRepresentationConfig(
-    labelmapRepresentation,
-    {
-      fillAlpha: 0.3,
-      fillAlphaInactive: 0.2,
-      outlineOpacity: 1,
-      outlineOpacityInactive: 0.65,
-    }
-  );
+  cornerstoneTools.segmentation.config.setGlobalRepresentationConfig(labelmapRepresentation, {
+    fillAlpha: 0.3,
+    fillAlphaInactive: 0.2,
+    outlineOpacity: 1,
+    outlineOpacityInactive: 0.65,
+  });
 
   const metadataProvider = OHIF.classes.MetadataProvider;
 
@@ -139,14 +124,8 @@ export default async function init({
     cornerstoneStreamingImageVolumeLoader
   );
 
-  hangingProtocolService.registerImageLoadStrategy(
-    'interleaveCenter',
-    interleaveCenterLoader
-  );
-  hangingProtocolService.registerImageLoadStrategy(
-    'interleaveTopToBottom',
-    interleaveTopToBottom
-  );
+  hangingProtocolService.registerImageLoadStrategy('interleaveCenter', interleaveCenterLoader);
+  hangingProtocolService.registerImageLoadStrategy('interleaveTopToBottom', interleaveTopToBottom);
   hangingProtocolService.registerImageLoadStrategy('nth', nthLoader);
 
   // add metadata providers
@@ -166,9 +145,7 @@ export default async function init({
   initWADOImageLoader(userAuthenticationService, appConfig, extensionManager);
 
   /* Measurement Service */
-  this.measurementServiceSource = connectToolsToMeasurementService(
-    servicesManager
-  );
+  this.measurementServiceSource = connectToolsToMeasurementService(servicesManager);
 
   initCineService(cineService);
 
@@ -178,31 +155,18 @@ export default async function init({
     volumeInputArrayMap => {
       for (const entry of volumeInputArrayMap.entries()) {
         const [viewportId, volumeInputArray] = entry;
-        const viewport = cornerstoneViewportService.getCornerstoneViewport(
-          viewportId
-        );
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
 
-        const ohifViewport = cornerstoneViewportService.getViewportInfo(
-          viewportId
-        );
+        const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
 
-        const {
-          lutPresentationStore,
-          positionPresentationStore,
-        } = stateSyncService.getState();
+        const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
         const { presentationIds } = ohifViewport.getViewportOptions();
         const presentations = {
-          positionPresentation:
-            positionPresentationStore[presentationIds?.positionPresentationId],
-          lutPresentation:
-            lutPresentationStore[presentationIds?.lutPresentationId],
+          positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
+          lutPresentation: lutPresentationStore[presentationIds?.lutPresentationId],
         };
 
-        cornerstoneViewportService.setVolumesForViewport(
-          viewport,
-          volumeInputArray,
-          presentations
-        );
+        cornerstoneViewportService.setVolumesForViewport(viewport, volumeInputArray, presentations);
       }
     }
   );
@@ -225,9 +189,7 @@ export default async function init({
 
   const resetCrosshairs = evt => {
     const { element } = evt.detail;
-    const { viewportId, renderingEngineId } = cornerstone.getEnabledElement(
-      element
-    );
+    const { viewportId, renderingEngineId } = cornerstone.getEnabledElement(element);
 
     const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroupForViewport(
       viewportId,
@@ -253,10 +215,7 @@ export default async function init({
     const { element } = evt.detail;
     element.addEventListener(EVENTS.CAMERA_RESET, resetCrosshairs);
 
-    eventTarget.addEventListener(
-      EVENTS.STACK_VIEWPORT_NEW_STACK,
-      newStackCallback
-    );
+    eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, newStackCallback);
   }
 
   function elementDisabledHandler(evt) {
@@ -271,20 +230,13 @@ export default async function init({
     // );
   }
 
-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_ENABLED,
-    elementEnabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));
 
-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_DISABLED,
-    elementDisabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
 
   viewportGridService.subscribe(
-    viewportGridService.EVENTS.ACTIVE_VIEWPORT_INDEX_CHANGED,
-    ({ viewportIndex, viewportId }) => {
-      viewportId = viewportId || `viewport-${viewportIndex}`;
+    viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
+    ({ viewportId }) => {
       const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
 
       if (!toolGroup || !toolGroup._toolInstances?.['ReferenceLines']) {
@@ -293,8 +245,7 @@ export default async function init({
 
       // check if reference lines are active
       const referenceLinesEnabled =
-        toolGroup._toolInstances['ReferenceLines'].mode ===
-        Enums.ToolModes.Enabled;
+        toolGroup._toolInstances['ReferenceLines'].mode === Enums.ToolModes.Enabled;
 
       if (!referenceLinesEnabled) {
         return;
@@ -319,10 +270,9 @@ function CPUModal() {
   return (
     <div>
       <p>
-        Your computer does not have enough GPU power to support the default GPU
-        rendering mode. OHIF has switched to CPU rendering mode. Please note
-        that CPU rendering does not support all features such as Volume
-        Rendering, Multiplanar Reconstruction, and Segmentation Overlays.
+        Your computer does not have enough GPU power to support the default GPU rendering mode. OHIF
+        has switched to CPU rendering mode. Please note that CPU rendering does not support all
+        features such as Volume Rendering, Multiplanar Reconstruction, and Segmentation Overlays.
       </p>
     </div>
   );

extensions/cornerstone/src/initContextMenu.ts

@@ -60,10 +60,8 @@ function initContextMenu({
    */
   const cornerstoneViewportHandleEvent = (name, evt) => {
     const customizations =
-      customizationService.get('cornerstoneViewportClickCommands') ||
-      DEFAULT_CONTEXT_MENU_CLICKS;
+      customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_CONTEXT_MENU_CLICKS;
     const toRun = customizations[name];
-    console.log('initContextMenu::cornerstoneViewportHandleEvent', name, toRun);
     const options = {
       nearbyToolData: findNearbyToolData(commandsManager, evt),
       event: evt,
@@ -82,34 +80,21 @@ function initContextMenu({
     if (!viewportInfo) {
       return;
     }
-    const viewportIndex = viewportInfo.getViewportIndex();
     // TODO check update upstream
-    setEnabledElement(viewportIndex, element);
+    setEnabledElement(viewportId, element);
 
-    element.addEventListener(
-      cs3DToolsEvents.MOUSE_CLICK,
-      cornerstoneViewportHandleClick
-    );
+    element.addEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
   }
 
   function elementDisabledHandler(evt) {
     const { element } = evt.detail;
 
-    element.removeEventListener(
-      cs3DToolsEvents.MOUSE_CLICK,
-      cornerstoneViewportHandleClick
-    );
+    element.removeEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
   }
 
-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_ENABLED,
-    elementEnabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));
 
-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_DISABLED,
-    elementDisabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
 }
 
 export default initContextMenu;

extensions/cornerstone/src/initCornerstoneTools.js

@@ -28,6 +28,7 @@ import {
 } from '@cornerstonejs/tools';
 
 import CalibrationLineTool from './tools/CalibrationLineTool';
+import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
 
 export default function initCornerstoneTools(configuration = {}) {
   CrosshairsTool.isAnnotation = false;
@@ -58,6 +59,7 @@ export default function initCornerstoneTools(configuration = {}) {
   addTool(ReferenceLinesTool);
   addTool(CalibrationLineTool);
   addTool(TrackballRotateTool);
+  addTool(ImageOverlayViewerTool);
 
   // Modify annotation tools to use dashed lines on SR
   const annotationStyle = {
@@ -99,6 +101,7 @@ const toolNames = {
   ReferenceLines: ReferenceLinesTool.toolName,
   CalibrationLine: CalibrationLineTool.toolName,
   TrackballRotateTool: TrackballRotateTool.toolName,
+  ImageOverlayViewer: ImageOverlayViewerTool.toolName,
 };
 
 export { toolNames };

extensions/cornerstone/src/initDoubleClick.ts

@@ -39,10 +39,7 @@ export type initDoubleClickArgs = {
   commandsManager: CommandsManager;
 };
 
-function initDoubleClick({
-  customizationService,
-  commandsManager,
-}: initDoubleClickArgs): void {
+function initDoubleClick({ customizationService, commandsManager }: initDoubleClickArgs): void {
   const cornerstoneViewportHandleDoubleClick = (evt: CustomEvent) => {
     // Do not allow double click on a tool.
     const nearbyToolData = findNearbyToolData(commandsManager, evt);
@@ -54,8 +51,7 @@ function initDoubleClick({
 
     // Allows for the customization of the double click on a viewport.
     const customizations =
-      customizationService.get('cornerstoneViewportClickCommands') ||
-      DEFAULT_DOUBLE_CLICK;
+      customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_DOUBLE_CLICK;
 
     const toRun = customizations[eventName];
 
@@ -84,15 +80,9 @@ function initDoubleClick({
     );
   }
 
-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_ENABLED,
-    elementEnabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));
 
-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_DISABLED,
-    elementDisabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
 }
 
 export default initDoubleClick;

extensions/cornerstone/src/initMeasurementService.js

@@ -127,11 +127,8 @@ const initMeasurementService = (
 };
 
 const connectToolsToMeasurementService = servicesManager => {
-  const {
-    measurementService,
-    displaySetService,
-    cornerstoneViewportService,
-  } = servicesManager.services;
+  const { measurementService, displaySetService, cornerstoneViewportService } =
+    servicesManager.services;
   const csTools3DVer1MeasurementSource = initMeasurementService(
     measurementService,
     displaySetService,
@@ -153,10 +150,7 @@ const connectToolsToMeasurementService = servicesManager => {
       } = annotationAddedEventDetail;
       const { toolName } = metadata;
 
-      if (
-        csToolsEvent.type === completedEvt &&
-        toolName === toolNames.CalibrationLine
-      ) {
+      if (csToolsEvent.type === completedEvt && toolName === toolNames.CalibrationLine) {
         // show modal to input the measurement (mm)
         onCompletedCalibrationLine(servicesManager, csToolsEvent)
           .then(
@@ -212,10 +206,8 @@ const connectToolsToMeasurementService = servicesManager => {
     try {
       const annotationSelectionEventDetail = csToolsEvent.detail;
 
-      const {
-        added: addedSelectedAnnotationUIDs,
-        removed: removedSelectedAnnotationUIDs,
-      } = annotationSelectionEventDetail;
+      const { added: addedSelectedAnnotationUIDs, removed: removedSelectedAnnotationUIDs } =
+        annotationSelectionEventDetail;
 
       if (removedSelectedAnnotationUIDs) {
         removedSelectedAnnotationUIDs.forEach(annotationUID =>
@@ -283,12 +275,8 @@ const connectMeasurementServiceToTools = (
   cornerstoneViewportService,
   measurementSource
 ) => {
-  const {
-    MEASUREMENT_REMOVED,
-    MEASUREMENTS_CLEARED,
-    MEASUREMENT_UPDATED,
-    RAW_MEASUREMENT_ADDED,
-  } = measurementService.EVENTS;
+  const { MEASUREMENT_REMOVED, MEASUREMENTS_CLEARED, MEASUREMENT_UPDATED, RAW_MEASUREMENT_ADDED } =
+    measurementService.EVENTS;
 
   const csTools3DVer1MeasurementSource = measurementService.getSource(
     CORNERSTONE_3D_TOOLS_SOURCE_NAME,
@@ -351,11 +339,7 @@ const connectMeasurementServiceToTools = (
         return;
       }
 
-      const {
-        referenceSeriesUID,
-        referenceStudyUID,
-        SOPInstanceUID,
-      } = measurement;
+      const { referenceSeriesUID, referenceStudyUID, SOPInstanceUID } = measurement;
 
       const instance = DicomMetadataStore.getInstance(
         referenceStudyUID,
@@ -368,9 +352,7 @@ const connectMeasurementServiceToTools = (
 
       if (measurement?.metadata?.referencedImageId) {
         imageId = measurement.metadata.referencedImageId;
-        frameNumber = getSOPInstanceAttributes(
-          measurement.metadata.referencedImageId
-        ).frameNumber;
+        frameNumber = getSOPInstanceAttributes(measurement.metadata.referencedImageId).frameNumber;
       } else {
         imageId = dataSource.getImageIdsForInstance({ instance });
       }

extensions/cornerstone/src/initWADOImageLoader.js

@@ -1,9 +1,7 @@
 import * as cornerstone from '@cornerstonejs/core';
 import { volumeLoader } from '@cornerstonejs/core';
 import { cornerstoneStreamingImageVolumeLoader } from '@cornerstonejs/streaming-image-volume-loader';
-import dicomImageLoader, {
-  webWorkerManager,
-} from '@cornerstonejs/dicom-image-loader';
+import dicomImageLoader, { webWorkerManager } from '@cornerstonejs/dicom-image-loader';
 import dicomParser from 'dicom-parser';
 import { errorHandler, utils } from '@ohif/core';
 
@@ -41,10 +39,7 @@ export default function initWADOImageLoader(
   dicomImageLoader.external.cornerstone = cornerstone;
   dicomImageLoader.external.dicomParser = dicomParser;
 
-  registerVolumeLoader(
-    'cornerstoneStreamingImageVolume',
-    cornerstoneStreamingImageVolumeLoader
-  );
+  registerVolumeLoader('cornerstoneStreamingImageVolume', cornerstoneStreamingImageVolumeLoader);
 
   dicomImageLoader.configure({
     decodeConfig: {
@@ -55,10 +50,9 @@ export default function initWADOImageLoader(
       // we should set this flag to false.
       convertFloatPixelDataToInt: false,
     },
-    beforeSend: function(xhr) {
+    beforeSend: function (xhr) {
       //TODO should be removed in the future and request emitted by DicomWebDataSource
-      const sourceConfig =
-        extensionManager.getActiveDataSource()?.[0].getConfig() ?? {};
+      const sourceConfig = extensionManager.getActiveDataSource()?.[0].getConfig() ?? {};
       const headers = userAuthenticationService.getAuthorizationHeader();
       const acceptHeader = utils.generateAcceptHeader(
         sourceConfig.acceptHeader,

extensions/cornerstone/src/services/CornerstoneCacheService/CornerstoneCacheService.ts

@@ -1,16 +1,8 @@
 import { ServicesManager, Types } from '@ohif/core';
-import {
-  cache as cs3DCache,
-  Enums,
-  volumeLoader,
-  utilities as utils,
-} from '@cornerstonejs/core';
+import { cache as cs3DCache, Enums, volumeLoader, utilities as utils } from '@cornerstonejs/core';
 
 import getCornerstoneViewportType from '../../utils/getCornerstoneViewportType';
-import {
-  StackViewportData,
-  VolumeViewportData,
-} from '../../types/CornerstoneCacheService';
+import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 
 const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
 
@@ -18,9 +10,7 @@ class CornerstoneCacheService {
   static REGISTRATION = {
     name: 'cornerstoneCacheService',
     altName: 'CornerstoneCacheService',
-    create: ({
-      servicesManager,
-    }: Types.Extensions.ExtensionParams): CornerstoneCacheService => {
+    create: ({ servicesManager }: Types.Extensions.ExtensionParams): CornerstoneCacheService => {
       return new CornerstoneCacheService(servicesManager);
     },
   };
@@ -77,11 +67,7 @@ class CornerstoneCacheService {
       cs3DViewportType === Enums.ViewportType.ORTHOGRAPHIC ||
       cs3DViewportType === Enums.ViewportType.VOLUME_3D
     ) {
-      viewportData = await this._getVolumeViewportData(
-        dataSource,
-        displaySets,
-        cs3DViewportType
-      );
+      viewportData = await this._getVolumeViewportData(dataSource, displaySets, cs3DViewportType);
     }
 
     viewportData.viewportType = cs3DViewportType;
@@ -134,20 +120,14 @@ class CornerstoneCacheService {
     // For Stack Viewport we don't have fusion currently
     const displaySet = displaySets[0];
 
-    let stackImageIds = this.stackImageIds.get(
-      displaySet.displaySetInstanceUID
-    );
+    let stackImageIds = this.stackImageIds.get(displaySet.displaySetInstanceUID);
 
     if (!stackImageIds) {
       stackImageIds = this._getCornerstoneStackImageIds(displaySet, dataSource);
       this.stackImageIds.set(displaySet.displaySetInstanceUID, stackImageIds);
     }
 
-    const {
-      displaySetInstanceUID,
-      StudyInstanceUID,
-      isCompositeStack,
-    } = displaySet;
+    const { displaySetInstanceUID, StudyInstanceUID, isCompositeStack } = displaySet;
 
     const StackViewportData: StackViewportData = {
       viewportType,
@@ -196,31 +176,22 @@ class CornerstoneCacheService {
         continue;
       }
 
-      const volumeLoaderSchema =
-        displaySet.volumeLoaderSchema ?? VOLUME_LOADER_SCHEME;
+      const volumeLoaderSchema = displaySet.volumeLoaderSchema ?? VOLUME_LOADER_SCHEME;
 
       const volumeId = `${volumeLoaderSchema}:${displaySet.displaySetInstanceUID}`;
 
-      let volumeImageIds = this.volumeImageIds.get(
-        displaySet.displaySetInstanceUID
-      );
+      let volumeImageIds = this.volumeImageIds.get(displaySet.displaySetInstanceUID);
 
       let volume = cs3DCache.getVolume(volumeId);
 
       if (!volumeImageIds || !volume) {
-        volumeImageIds = this._getCornerstoneVolumeImageIds(
-          displaySet,
-          dataSource
-        );
+        volumeImageIds = this._getCornerstoneVolumeImageIds(displaySet, dataSource);
 
         volume = await volumeLoader.createAndCacheVolume(volumeId, {
           imageIds: volumeImageIds,
         });
 
-        this.volumeImageIds.set(
-          displaySet.displaySetInstanceUID,
-          volumeImageIds
-        );
+        this.volumeImageIds.set(displaySet.displaySetInstanceUID, volumeImageIds);
       }
 
       volumeData.push({
@@ -268,10 +239,7 @@ class CornerstoneCacheService {
   }
 
   private _getCornerstoneVolumeImageIds(displaySet, dataSource): string[] {
-    const stackImageIds = this._getCornerstoneStackImageIds(
-      displaySet,
-      dataSource
-    );
+    const stackImageIds = this._getCornerstoneStackImageIds(displaySet, dataSource);
 
     return stackImageIds;
   }

extensions/cornerstone/src/services/SegmentationService/RTSTRUCT/mapROIContoursToRTStructData.ts

@@ -7,32 +7,27 @@
  * @returns An array of object that includes data, id, segmentIndex, color
  * and geometry Id
  */
-export function mapROIContoursToRTStructData(
-  structureSet: unknown,
-  rtDisplaySetUID: unknown
-) {
-  return structureSet.ROIContours.map(
-    ({ contourPoints, ROINumber, ROIName, colorArray }) => {
-      const data = contourPoints.map(({ points, ...rest }) => {
-        const newPoints = points.map(({ x, y, z }) => {
-          return [x, y, z];
-        });
-
-        return {
-          ...rest,
-          points: newPoints,
-        };
+export function mapROIContoursToRTStructData(structureSet: unknown, rtDisplaySetUID: unknown) {
+  return structureSet.ROIContours.map(({ contourPoints, ROINumber, ROIName, colorArray }) => {
+    const data = contourPoints.map(({ points, ...rest }) => {
+      const newPoints = points.map(({ x, y, z }) => {
+        return [x, y, z];
       });
 
-      const id = ROIName || ROINumber;
-
       return {
-        data,
-        id,
-        segmentIndex: ROINumber,
-        color: colorArray,
-        geometryId: `${rtDisplaySetUID}:${id}:segmentIndex-${ROINumber}`,
+        ...rest,
+        points: newPoints,
       };
-    }
-  );
+    });
+
+    const id = ROIName || ROINumber;
+
+    return {
+      data,
+      id,
+      segmentIndex: ROINumber,
+      color: colorArray,
+      geometryId: `${rtDisplaySetUID}:${id}:segmentIndex-${ROINumber}`,
+    };
+  });
 }

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -21,11 +21,7 @@ import {
 import isEqual from 'lodash.isequal';
 import { Types as ohifTypes } from '@ohif/core';
 import { easeInOutBell, reverseEaseInOutBell } from '../../utils/transitions';
-import {
-  Segment,
-  Segmentation,
-  SegmentationConfig,
-} from './SegmentationServiceTypes';
+import { Segment, Segmentation, SegmentationConfig } from './SegmentationServiceTypes';
 import { mapROIContoursToRTStructData } from './RTSTRUCT/mapROIContoursToRTStructData';
 
 const { COLOR_LUT } = cstConstants;
@@ -42,8 +38,7 @@ const EVENTS = {
   // fired when the segmentation is removed
   SEGMENTATION_REMOVED: 'event::segmentation_removed',
   // fired when the configuration for the segmentation is changed (e.g., brush size, render fill, outline thickness, etc.)
-  SEGMENTATION_CONFIGURATION_CHANGED:
-    'event::segmentation_configuration_changed',
+  SEGMENTATION_CONFIGURATION_CHANGED: 'event::segmentation_configuration_changed',
   // fired when the active segment is loaded in SEG or RTSTRUCT
   SEGMENT_LOADING_COMPLETE: 'event::segment_loading_complete',
   // for all segments
@@ -64,9 +59,7 @@ class SegmentationService extends PubSubService {
   static REGISTRATION = {
     name: 'segmentationService',
     altName: 'SegmentationService',
-    create: ({
-      servicesManager,
-    }: OhifTypes.Extensions.ExtensionParams): SegmentationService => {
+    create: ({ servicesManager }: OhifTypes.Extensions.ExtensionParams): SegmentationService => {
       return new SegmentationService({ servicesManager });
     },
   };
@@ -138,10 +131,10 @@ class SegmentationService extends PubSubService {
 
     toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
 
-    const {
-      segmentationRepresentationUID,
-      segmentation,
-    } = this._getSegmentationInfo(segmentationId, toolGroupId);
+    const { segmentationRepresentationUID, segmentation } = this._getSegmentationInfo(
+      segmentationId,
+      toolGroupId
+    );
 
     if (this._getSegmentInfo(segmentation, segmentIndex)) {
       throw new Error(`Segment ${segmentIndex} already exists`);
@@ -166,32 +159,14 @@ class SegmentationService extends PubSubService {
 
     const suppressEvents = true;
     if (properties !== undefined) {
-      const {
-        color: newColor,
-        opacity,
-        isLocked,
-        visibility,
-        active,
-      } = properties;
+      const { color: newColor, opacity, isLocked, visibility, active } = properties;
 
       if (newColor !== undefined) {
-        this._setSegmentColor(
-          segmentationId,
-          segmentIndex,
-          newColor,
-          toolGroupId,
-          suppressEvents
-        );
+        this._setSegmentColor(segmentationId, segmentIndex, newColor, toolGroupId, suppressEvents);
       }
 
       if (opacity !== undefined) {
-        this._setSegmentOpacity(
-          segmentationId,
-          segmentIndex,
-          opacity,
-          toolGroupId,
-          suppressEvents
-        );
+        this._setSegmentOpacity(segmentationId, segmentIndex, opacity, toolGroupId, suppressEvents);
       }
 
       if (visibility !== undefined) {
@@ -209,12 +184,7 @@ class SegmentationService extends PubSubService {
       }
 
       if (isLocked !== undefined) {
-        this._setSegmentLocked(
-          segmentationId,
-          segmentIndex,
-          isLocked,
-          suppressEvents
-        );
+        this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
       }
     }
 
@@ -285,9 +255,7 @@ class SegmentationService extends PubSubService {
     if (segmentation.activeSegmentIndex === segmentIndex) {
       const segmentIndices = Object.keys(segmentation.segments);
 
-      const newActiveSegmentIndex = segmentIndices.length
-        ? Number(segmentIndices[0])
-        : 1;
+      const newActiveSegmentIndex = segmentIndices.length ? Number(segmentIndices[0]) : 1;
 
       this._setActiveSegment(segmentationId, newActiveSegmentIndex, true);
     }
@@ -319,19 +287,10 @@ class SegmentationService extends PubSubService {
     isLocked: boolean
   ): void {
     const suppressEvents = false;
-    this._setSegmentLocked(
-      segmentationId,
-      segmentIndex,
-      isLocked,
-      suppressEvents
-    );
+    this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
   }
 
-  public setSegmentLabel(
-    segmentationId: string,
-    segmentIndex: number,
-    segmentLabel: string
-  ): void {
+  public setSegmentLabel(segmentationId: string, segmentIndex: number, segmentLabel: string): void {
     this._setSegmentLabel(segmentationId, segmentIndex, segmentLabel);
   }
 
@@ -387,24 +346,14 @@ class SegmentationService extends PubSubService {
     this._setSegmentOpacity(segmentationId, segmentIndex, opacity, toolGroupId);
   }
 
-  public setActiveSegmentationForToolGroup(
-    segmentationId: string,
-    toolGroupId?: string
-  ): void {
+  public setActiveSegmentationForToolGroup(segmentationId: string, toolGroupId?: string): void {
     toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
 
     const suppressEvents = false;
-    this._setActiveSegmentationForToolGroup(
-      segmentationId,
-      toolGroupId,
-      suppressEvents
-    );
+    this._setActiveSegmentationForToolGroup(segmentationId, toolGroupId, suppressEvents);
   }
 
-  public setActiveSegmentForSegmentation(
-    segmentationId: string,
-    segmentIndex: number
-  ): void {
+  public setActiveSegmentForSegmentation(segmentationId: string, segmentIndex: number): void {
     this._setActiveSegment(segmentationId, segmentIndex, false);
   }
 
@@ -420,9 +369,7 @@ class SegmentationService extends PubSubService {
 
    * @return Array of segmentations
    */
-  public getSegmentations(
-    filterNonHydratedSegmentations = true
-  ): Segmentation[] {
+  public getSegmentations(filterNonHydratedSegmentations = true): Segmentation[] {
     const segmentations = this._getSegmentations();
 
     return (
@@ -435,10 +382,7 @@ class SegmentationService extends PubSubService {
 
   private _getSegmentations(): Segmentation[] {
     const segmentations = this.arrayOfObjects(this.segmentations);
-    return (
-      segmentations &&
-      segmentations.map(m => this.segmentations[Object.keys(m)[0]])
-    );
+    return segmentations && segmentations.map(m => this.segmentations[Object.keys(m)[0]]);
   }
 
   /**
@@ -477,8 +421,7 @@ class SegmentationService extends PubSubService {
     }
 
     const representationType = segmentation.type;
-    const representationData =
-      segmentation.representationData[representationType];
+    const representationData = segmentation.representationData[representationType];
     cstSegmentation.addSegmentations([
       {
         segmentationId,
@@ -566,9 +509,7 @@ class SegmentationService extends PubSubService {
     const { labelmapBufferArray, referencedVolumeId } = segDisplaySet;
 
     if (!labelmapBufferArray || !referencedVolumeId) {
-      throw new Error(
-        'No labelmapBufferArray or referencedVolumeId found for the SEG displaySet'
-      );
+      throw new Error('No labelmapBufferArray or referencedVolumeId found for the SEG displaySet');
     }
 
     // if the labelmap doesn't exist, we need to create it first from the
@@ -576,23 +517,18 @@ class SegmentationService extends PubSubService {
     const referencedVolume = cache.getVolume(referencedVolumeId);
 
     if (!referencedVolume) {
-      throw new Error(
-        `No volume found for referencedVolumeId: ${referencedVolumeId}`
-      );
+      throw new Error(`No volume found for referencedVolumeId: ${referencedVolumeId}`);
     }
 
     // Force use of a Uint8Array SharedArrayBuffer for the segmentation to save space and so
     // it is easily compressible in worker thread.
-    const derivedVolume = await volumeLoader.createAndCacheDerivedVolume(
-      referencedVolumeId,
-      {
-        volumeId: segmentationId,
-        targetBuffer: {
-          type: 'Uint8Array',
-          sharedArrayBuffer: true,
-        },
-      }
-    );
+    const derivedVolume = await volumeLoader.createAndCacheDerivedVolume(referencedVolumeId, {
+      volumeId: segmentationId,
+      targetBuffer: {
+        type: 'Uint8Array',
+        sharedArrayBuffer: true,
+      },
+    });
     const derivedVolumeScalarData = derivedVolume.getScalarData();
 
     const segmentsInfo = segDisplaySet.segMetadata.data;
@@ -680,10 +616,7 @@ class SegmentationService extends PubSubService {
     const defaultScheme = this._getDefaultSegmentationScheme();
     const rtDisplaySetUID = rtDisplaySet.displaySetInstanceUID;
 
-    const allRTStructData = mapROIContoursToRTStructData(
-      structureSet,
-      rtDisplaySetUID
-    );
+    const allRTStructData = mapROIContoursToRTStructData(structureSet, rtDisplaySetUID);
 
     // sort by segmentIndex
     allRTStructData.sort((a, b) => a.segmentIndex - b.segmentIndex);
@@ -726,19 +659,16 @@ class SegmentationService extends PubSubService {
 
       // catch error instead of failing to allow loading to continue
       try {
-        const geometry = await geometryLoader.createAndCacheGeometry(
-          geometryId,
-          {
-            geometryData: {
-              data,
-              id,
-              color,
-              frameOfReferenceUID: structureSet.frameOfReferenceUID,
-              segmentIndex,
-            },
-            type: csEnums.GeometryType.CONTOUR,
-          }
-        );
+        const geometry = await geometryLoader.createAndCacheGeometry(geometryId, {
+          geometryData: {
+            data,
+            id,
+            color,
+            frameOfReferenceUID: structureSet.frameOfReferenceUID,
+            segmentIndex,
+          },
+          type: csEnums.GeometryType.CONTOUR,
+        });
 
         const contourSet = geometry.data;
         const centroid = contourSet.getCentroid();
@@ -758,9 +688,7 @@ class SegmentationService extends PubSubService {
         const numInitialized = Object.keys(segmentsCachedStats).length;
 
         // Calculate percentage completed
-        const percentComplete = Math.round(
-          (numInitialized / allRTStructData.length) * 100
-        );
+        const percentComplete = Math.round((numInitialized / allRTStructData.length) * 100);
 
         this._broadcastEvent(EVENTS.SEGMENT_LOADING_COMPLETE, {
           percentComplete,
@@ -824,8 +752,7 @@ class SegmentationService extends PubSubService {
     const { world } = center;
 
     // todo: generalize
-    toolGroupId =
-      toolGroupId || this._getToolGroupIdsWithSegmentation(segmentationId);
+    toolGroupId = toolGroupId || this._getToolGroupIdsWithSegmentation(segmentationId);
 
     const toolGroups = [];
 
@@ -842,10 +769,7 @@ class SegmentationService extends PubSubService {
 
       // @ts-ignore
       for (const { viewportId, renderingEngineId } of viewportsInfo) {
-        const { viewport } = getEnabledElementByIds(
-          viewportId,
-          renderingEngineId
-        );
+        const { viewport } = getEnabledElementByIds(viewportId, renderingEngineId);
         cstUtils.viewport.jumpToWorld(viewport, world);
       }
 
@@ -888,9 +812,7 @@ class SegmentationService extends PubSubService {
     const { segments } = segmentation;
 
     const highlightFn =
-      type === LABELMAP
-        ? this._highlightLabelmap.bind(this)
-        : this._highlightContour.bind(this);
+      type === LABELMAP ? this._highlightLabelmap.bind(this) : this._highlightContour.bind(this);
 
     const adjustedAlpha = type === LABELMAP ? alpha : 1 - alpha;
 
@@ -914,9 +836,7 @@ class SegmentationService extends PubSubService {
   ): Promise<string> => {
     const { displaySetService } = this.servicesManager.services;
 
-    const displaySet = displaySetService.getDisplaySetByUID(
-      displaySetInstanceUID
-    );
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
     // Todo: we currently only support labelmap for segmentation for a displaySet
     const representationType = LABELMAP;
@@ -977,9 +897,7 @@ class SegmentationService extends PubSubService {
     const segmentation = this.getSegmentation(segmentationId);
 
     if (!segmentation) {
-      throw new Error(
-        `Segmentation with segmentationId ${segmentationId} not found.`
-      );
+      throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
     }
 
     if (hydrateSegmentation) {
@@ -1019,34 +937,16 @@ class SegmentationService extends PubSubService {
         continue;
       }
 
-      const {
-        segmentIndex,
-        color,
-        isLocked,
-        isVisible: visibility,
-        opacity,
-      } = segment;
+      const { segmentIndex, color, isLocked, isVisible: visibility, opacity } = segment;
 
       const suppressEvents = true;
 
       if (color !== undefined) {
-        this._setSegmentColor(
-          segmentationId,
-          segmentIndex,
-          color,
-          toolGroupId,
-          suppressEvents
-        );
+        this._setSegmentColor(segmentationId, segmentIndex, color, toolGroupId, suppressEvents);
       }
 
       if (opacity !== undefined) {
-        this._setSegmentOpacity(
-          segmentationId,
-          segmentIndex,
-          opacity,
-          toolGroupId,
-          suppressEvents
-        );
+        this._setSegmentOpacity(segmentationId, segmentIndex, opacity, toolGroupId, suppressEvents);
       }
 
       if (visibility !== undefined) {
@@ -1060,12 +960,7 @@ class SegmentationService extends PubSubService {
       }
 
       if (isLocked !== undefined) {
-        this._setSegmentLocked(
-          segmentationId,
-          segmentIndex,
-          isLocked,
-          suppressEvents
-        );
+        this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
       }
     }
   };
@@ -1102,25 +997,16 @@ class SegmentationService extends PubSubService {
     });
   };
 
-  public getToolGroupIdsWithSegmentation = (
-    segmentationId: string
-  ): string[] => {
-    const toolGroupIds = cstSegmentation.state.getToolGroupIdsWithSegmentation(
-      segmentationId
-    );
+  public getToolGroupIdsWithSegmentation = (segmentationId: string): string[] => {
+    const toolGroupIds = cstSegmentation.state.getToolGroupIdsWithSegmentation(segmentationId);
     return toolGroupIds;
   };
 
-  public hydrateSegmentation = (
-    segmentationId: string,
-    suppressEvents = false
-  ): void => {
+  public hydrateSegmentation = (segmentationId: string, suppressEvents = false): void => {
     const segmentation = this.getSegmentation(segmentationId);
 
     if (!segmentation) {
-      throw new Error(
-        `Segmentation with segmentationId ${segmentationId} not found.`
-      );
+      throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
     }
 
     this._setDisplaySetIsHydrated(segmentationId, true);
@@ -1134,13 +1020,8 @@ class SegmentationService extends PubSubService {
     }
   };
 
-  private _setDisplaySetIsHydrated(
-    displaySetUID: string,
-    isHydrated: boolean
-  ): void {
-    const {
-      DisplaySetService: displaySetService,
-    } = this.servicesManager.services;
+  private _setDisplaySetIsHydrated(displaySetUID: string, isHydrated: boolean): void {
+    const { DisplaySetService: displaySetService } = this.servicesManager.services;
     const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
     displaySet.isHydrated = isHydrated;
     displaySetService.setDisplaySetMetadataInvalidated(displaySetUID, false);
@@ -1259,17 +1140,13 @@ class SegmentationService extends PubSubService {
   ): void {
     const uids = segmentationRepresentationUIDsIds || [];
     if (!uids.length) {
-      const representations = cstSegmentation.state.getSegmentationRepresentations(
-        toolGroupId
-      );
+      const representations = cstSegmentation.state.getSegmentationRepresentations(toolGroupId);
 
       if (!representations || !representations.length) {
         return;
       }
 
-      uids.push(
-        ...representations.map(rep => rep.segmentationRepresentationUID)
-      );
+      uids.push(...representations.map(rep => rep.segmentationRepresentationUID));
     }
 
     cstSegmentation.removeSegmentationsFromToolGroup(toolGroupId, uids);
@@ -1285,9 +1162,7 @@ class SegmentationService extends PubSubService {
     const wasActive = segmentation.isActive;
 
     if (!segmentationId || !segmentation) {
-      console.warn(
-        `No segmentationId provided, or unable to find segmentation by id.`
-      );
+      console.warn(`No segmentationId provided, or unable to find segmentation by id.`);
       return;
     }
 
@@ -1309,11 +1184,7 @@ class SegmentationService extends PubSubService {
       if (remainingSegmentations.length) {
         const { id } = remainingSegmentations[0];
 
-        this._setActiveSegmentationForToolGroup(
-          id,
-          this._getFirstToolGroupId(),
-          false
-        );
+        this._setActiveSegmentationForToolGroup(id, this._getFirstToolGroupId(), false);
       }
     }
 
@@ -1337,9 +1208,8 @@ class SegmentationService extends PubSubService {
     //   toolGroupId
     // );
 
-    const segmentationRepresentations = this.getSegmentationRepresentationsForToolGroup(
-      toolGroupId
-    );
+    const segmentationRepresentations =
+      this.getSegmentationRepresentationsForToolGroup(toolGroupId);
 
     const typeToUse = segmentationRepresentations?.[0]?.type || LABELMAP;
 
@@ -1397,11 +1267,7 @@ class SegmentationService extends PubSubService {
     setConfigValueIfDefined('outlineOpacity', outlineOpacity, v => v / 100);
     setConfigValueIfDefined('fillAlpha', fillAlpha, v => v / 100);
     setConfigValueIfDefined('renderFill', renderFill);
-    setConfigValueIfDefined(
-      'fillAlphaInactive',
-      fillAlphaInactive,
-      v => v / 100
-    );
+    setConfigValueIfDefined('fillAlphaInactive', fillAlphaInactive, v => v / 100);
     setConfigValueIfDefined('outlineOpacityInactive', fillAlphaInactive, v =>
       Math.max(0.75, v / 100)
     );
@@ -1435,10 +1301,7 @@ class SegmentationService extends PubSubService {
     //   });
     // }
 
-    this._broadcastEvent(
-      this.EVENTS.SEGMENTATION_CONFIGURATION_CHANGED,
-      this.getConfiguration()
-    );
+    this._broadcastEvent(this.EVENTS.SEGMENTATION_CONFIGURATION_CHANGED, this.getConfiguration());
   };
 
   public getLabelmapVolume = (segmentationId: string) => {
@@ -1472,9 +1335,7 @@ class SegmentationService extends PubSubService {
     const segmentInfo = segmentation.segments[segmentIndex];
 
     if (segmentInfo === undefined) {
-      throw new Error(
-        `Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`
-      );
+      throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
     }
 
     segmentInfo.label = label;
@@ -1487,14 +1348,8 @@ class SegmentationService extends PubSubService {
     }
   }
 
-  public shouldRenderSegmentation(
-    viewportDisplaySetInstanceUIDs,
-    segDisplaySetInstanceUID
-  ) {
-    if (
-      !viewportDisplaySetInstanceUIDs ||
-      !viewportDisplaySetInstanceUIDs.length
-    ) {
+  public shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segDisplaySetInstanceUID) {
+    if (!viewportDisplaySetInstanceUIDs || !viewportDisplaySetInstanceUIDs.length) {
       return false;
     }
 
@@ -1502,20 +1357,14 @@ class SegmentationService extends PubSubService {
 
     let shouldDisplaySeg = false;
 
-    const segDisplaySet = displaySetService.getDisplaySetByUID(
-      segDisplaySetInstanceUID
-    );
+    const segDisplaySet = displaySetService.getDisplaySetByUID(segDisplaySetInstanceUID);
 
-    const segFrameOfReferenceUID = this._getFrameOfReferenceUIDForSeg(
-      segDisplaySet
-    );
+    const segFrameOfReferenceUID = this._getFrameOfReferenceUIDForSeg(segDisplaySet);
 
     // check if the displaySet is sharing the same frameOfReferenceUID
     // with the new segmentation
     for (const displaySetInstanceUID of viewportDisplaySetInstanceUIDs) {
-      const displaySet = displaySetService.getDisplaySetByUID(
-        displaySetInstanceUID
-      );
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
       // Todo: this might not be ideal for use cases such as 4D, since we
       // don't want to show the segmentation for all the frames
@@ -1563,10 +1412,7 @@ class SegmentationService extends PubSubService {
       segmentation.isActive = segmentation.id === segmentationId;
     });
 
-    const representation = this._getSegmentationRepresentation(
-      segmentationId,
-      toolGroupId
-    );
+    const representation = this._getSegmentationRepresentation(segmentationId, toolGroupId);
 
     cstSegmentation.activeSegmentation.setActiveSegmentationRepresentation(
       toolGroupId,
@@ -1580,16 +1426,11 @@ class SegmentationService extends PubSubService {
     }
   }
 
-  private _toggleSegmentationVisibility = (
-    segmentationId: string,
-    suppressEvents = false
-  ) => {
+  private _toggleSegmentationVisibility = (segmentationId: string, suppressEvents = false) => {
     const segmentation = this.segmentations[segmentationId];
 
     if (!segmentation) {
-      throw new Error(
-        `Segmentation with segmentationId ${segmentationId} not found.`
-      );
+      throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
     }
 
     segmentation.isVisible = !segmentation.isVisible;
@@ -1603,21 +1444,14 @@ class SegmentationService extends PubSubService {
     }
   };
 
-  private _setActiveSegment(
-    segmentationId: string,
-    segmentIndex: number,
-    suppressEvents = false
-  ) {
+  private _setActiveSegment(segmentationId: string, segmentIndex: number, suppressEvents = false) {
     const segmentation = this.getSegmentation(segmentationId);
 
     if (segmentation === undefined) {
       throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
     }
 
-    cstSegmentation.segmentIndex.setActiveSegmentIndex(
-      segmentationId,
-      segmentIndex
-    );
+    cstSegmentation.segmentIndex.setActiveSegmentIndex(segmentationId, segmentIndex);
 
     segmentation.activeSegmentIndex = segmentIndex;
 
@@ -1641,8 +1475,7 @@ class SegmentationService extends PubSubService {
   }
 
   private _getVolumeIdForDisplaySet(displaySet) {
-    const volumeLoaderSchema =
-      displaySet.volumeLoaderSchema ?? VOLUME_LOADER_SCHEME;
+    const volumeLoaderSchema = displaySet.volumeLoaderSchema ?? VOLUME_LOADER_SCHEME;
 
     return `${volumeLoaderSchema}:${displaySet.displaySetInstanceUID}`;
   }
@@ -1663,9 +1496,7 @@ class SegmentationService extends PubSubService {
     const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
 
     if (segmentInfo === undefined) {
-      throw new Error(
-        `Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`
-      );
+      throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
     }
 
     toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
@@ -1676,9 +1507,7 @@ class SegmentationService extends PubSubService {
     );
 
     if (!segmentationRepresentation) {
-      throw new Error(
-        'Must add representation to toolgroup before setting segments'
-      );
+      throw new Error('Must add representation to toolgroup before setting segments');
     }
     const { segmentationRepresentationUID } = segmentationRepresentation;
 
@@ -1743,18 +1572,12 @@ class SegmentationService extends PubSubService {
     const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
 
     if (segmentInfo === undefined) {
-      throw new Error(
-        `Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`
-      );
+      throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
     }
 
     segmentInfo.isLocked = isLocked;
 
-    cstSegmentation.segmentLocking.setSegmentIndexLocked(
-      segmentationId,
-      segmentIndex,
-      isLocked
-    );
+    cstSegmentation.segmentLocking.setSegmentIndexLocked(segmentationId, segmentIndex, isLocked);
 
     if (suppressEvents === false) {
       this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
@@ -1772,10 +1595,10 @@ class SegmentationService extends PubSubService {
   ) {
     toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
 
-    const {
-      segmentationRepresentationUID,
-      segmentation,
-    } = this._getSegmentationInfo(segmentationId, toolGroupId);
+    const { segmentationRepresentationUID, segmentation } = this._getSegmentationInfo(
+      segmentationId,
+      toolGroupId
+    );
 
     if (segmentation === undefined) {
       throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
@@ -1784,9 +1607,7 @@ class SegmentationService extends PubSubService {
     const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
 
     if (segmentInfo === undefined) {
-      throw new Error(
-        `Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`
-      );
+      throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
     }
 
     segmentInfo.isVisible = isVisible;
@@ -1828,9 +1649,7 @@ class SegmentationService extends PubSubService {
     const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
 
     if (segmentInfo === undefined) {
-      throw new Error(
-        `Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`
-      );
+      throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
     }
 
     toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
@@ -1841,9 +1660,7 @@ class SegmentationService extends PubSubService {
     );
 
     if (!segmentationRepresentation) {
-      throw new Error(
-        'Must add representation to toolgroup before setting segments'
-      );
+      throw new Error('Must add representation to toolgroup before setting segments');
     }
     const { segmentationRepresentationUID } = segmentationRepresentation;
 
@@ -1884,9 +1701,7 @@ class SegmentationService extends PubSubService {
     const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
 
     if (segmentInfo === undefined) {
-      throw new Error(
-        `Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`
-      );
+      throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
     }
 
     segmentInfo.label = segmentLabel;
@@ -1899,9 +1714,8 @@ class SegmentationService extends PubSubService {
   }
 
   private _getSegmentationRepresentation(segmentationId, toolGroupId) {
-    const segmentationRepresentations = this.getSegmentationRepresentationsForToolGroup(
-      toolGroupId
-    );
+    const segmentationRepresentations =
+      this.getSegmentationRepresentationsForToolGroup(toolGroupId);
 
     if (segmentationRepresentations.length === 0) {
       return;
@@ -1974,21 +1788,13 @@ class SegmentationService extends PubSubService {
       return;
     }
 
-    const segmentationState = cstSegmentation.state.getSegmentation(
-      segmentationId
-    );
+    const segmentationState = cstSegmentation.state.getSegmentation(segmentationId);
 
     if (!segmentationState) {
       return;
     }
 
-    const {
-      activeSegmentIndex,
-      cachedStats,
-      segmentsLocked,
-      label,
-      type,
-    } = segmentationState;
+    const { activeSegmentIndex, cachedStats, segmentsLocked, label, type } = segmentationState;
 
     if (![LABELMAP, CONTOUR].includes(type)) {
       throw new Error(
@@ -2018,10 +1824,7 @@ class SegmentationService extends PubSubService {
     try {
       this.addOrUpdateSegmentation(segmentationSchema);
     } catch (error) {
-      console.warn(
-        `Failed to add/update segmentation ${segmentationId}`,
-        error
-      );
+      console.warn(`Failed to add/update segmentation ${segmentationId}`, error);
     }
   };
 
@@ -2037,9 +1840,7 @@ class SegmentationService extends PubSubService {
     );
 
     if (!segmentationRepresentation) {
-      throw new Error(
-        'Must add representation to toolgroup before setting segments'
-      );
+      throw new Error('Must add representation to toolgroup before setting segments');
     }
 
     const { segmentationRepresentationUID } = segmentationRepresentation;
@@ -2057,14 +1858,11 @@ class SegmentationService extends PubSubService {
       return;
     }
 
-    const toolGroupIds = segmentationState.getToolGroupIdsWithSegmentation(
-      segmentationId
-    );
+    const toolGroupIds = segmentationState.getToolGroupIdsWithSegmentation(segmentationId);
 
     toolGroupIds.forEach(toolGroupId => {
-      const segmentationRepresentations = segmentationState.getSegmentationRepresentations(
-        toolGroupId
-      );
+      const segmentationRepresentations =
+        segmentationState.getSegmentationRepresentations(toolGroupId);
 
       const UIDsToRemove = [];
       segmentationRepresentations.forEach(representation => {
@@ -2089,17 +1887,12 @@ class SegmentationService extends PubSubService {
     }
   }
 
-  private _updateCornerstoneSegmentations({
-    segmentationId,
-    notYetUpdatedAtSource,
-  }) {
+  private _updateCornerstoneSegmentations({ segmentationId, notYetUpdatedAtSource }) {
     if (notYetUpdatedAtSource === false) {
       return;
     }
     const segmentationState = cstSegmentation.state;
-    const sourceSegmentation = segmentationState.getSegmentation(
-      segmentationId
-    );
+    const sourceSegmentation = segmentationState.getSegmentation(segmentationId);
     const segmentation = this.segmentations[segmentationId];
     const { label, cachedStats } = segmentation;
 
@@ -2115,14 +1908,11 @@ class SegmentationService extends PubSubService {
 
   private _updateCornerstoneSegmentationVisibility = segmentationId => {
     const segmentationState = cstSegmentation.state;
-    const toolGroupIds = segmentationState.getToolGroupIdsWithSegmentation(
-      segmentationId
-    );
+    const toolGroupIds = segmentationState.getToolGroupIdsWithSegmentation(segmentationId);
 
     toolGroupIds.forEach(toolGroupId => {
-      const segmentationRepresentations = cstSegmentation.state.getSegmentationRepresentations(
-        toolGroupId
-      );
+      const segmentationRepresentations =
+        cstSegmentation.state.getSegmentationRepresentations(toolGroupId);
 
       if (segmentationRepresentations.length === 0) {
         return;
@@ -2146,10 +1936,7 @@ class SegmentationService extends PubSubService {
       );
 
       // update segments visibility
-      const { segmentation } = this._getSegmentationInfo(
-        segmentationId,
-        toolGroupId
-      );
+      const { segmentation } = this._getSegmentationInfo(segmentationId, toolGroupId);
 
       const segments = segmentation.segments.filter(Boolean);
 
@@ -2161,9 +1948,7 @@ class SegmentationService extends PubSubService {
 
   private _getToolGroupIdsWithSegmentation(segmentationId: string) {
     const segmentationState = cstSegmentation.state;
-    const toolGroupIds = segmentationState.getToolGroupIdsWithSegmentation(
-      segmentationId
-    );
+    const toolGroupIds = segmentationState.getToolGroupIdsWithSegmentation(segmentationId);
 
     return toolGroupIds;
   }

extensions/cornerstone/src/services/SyncGroupService/SyncGroupService.ts

@@ -1,8 +1,4 @@
-import {
-  synchronizers,
-  SynchronizerManager,
-  Synchronizer,
-} from '@cornerstonejs/tools';
+import { synchronizers, SynchronizerManager, Synchronizer } from '@cornerstonejs/tools';
 
 import { pubSubServiceInterface, Types, ServicesManager } from '@ohif/core';
 
@@ -14,10 +10,7 @@ const EVENTS = {
  * @params options - are an optional set of options associated with the first
  * sync group declared.
  */
-export type SyncCreator = (
-  id: string,
-  options?: Record<string, unknown>
-) => Synchronizer;
+export type SyncCreator = (id: string, options?: Record<string, unknown>) => Synchronizer;
 
 export type SyncGroup = {
   type: string;
@@ -40,9 +33,7 @@ export default class SyncGroupService {
   static REGISTRATION = {
     name: 'syncGroupService',
     altName: 'SyncGroupService',
-    create: ({
-      servicesManager,
-    }: Types.Extensions.ExtensionParams): SyncGroupService => {
+    create: ({ servicesManager }: Types.Extensions.ExtensionParams): SyncGroupService => {
       return new SyncGroupService(servicesManager);
     },
   };
@@ -65,11 +56,7 @@ export default class SyncGroupService {
     Object.assign(this, pubSubServiceInterface);
   }
 
-  private _createSynchronizer(
-    type: string,
-    id: string,
-    options
-  ): Synchronizer | undefined {
+  private _createSynchronizer(type: string, id: string, options): Synchronizer | undefined {
     const syncCreator = this.synchronizerCreators[type.toLowerCase()];
     if (syncCreator) {
       return syncCreator(id, options);
@@ -109,19 +96,11 @@ export default class SyncGroupService {
       return;
     }
 
-    const syncGroupsArray = Array.isArray(syncGroups)
-      ? syncGroups
-      : [syncGroups];
+    const syncGroupsArray = Array.isArray(syncGroups) ? syncGroups : [syncGroups];
 
     syncGroupsArray.forEach(syncGroup => {
       const syncGroupObj = asSyncGroup(syncGroup);
-      const {
-        type,
-        target = true,
-        source = true,
-        options = {},
-        id = type,
-      } = syncGroupObj;
+      const { type, target = true, source = true, options = {}, id = type } = syncGroupObj;
 
       const synchronizer = this._getOrCreateSynchronizer(type, id, options);
       synchronizer.setOptions(viewportId, options);

extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts

@@ -24,9 +24,7 @@ export default class ToolGroupService {
   public static REGISTRATION = {
     name: 'toolGroupService',
     altName: 'ToolGroupService',
-    create: ({
-      servicesManager,
-    }: OhifTypes.Extensions.ExtensionParams): ToolGroupService => {
+    create: ({ servicesManager }: OhifTypes.Extensions.ExtensionParams): ToolGroupService => {
       return new ToolGroupService(servicesManager);
     },
   };
@@ -40,10 +38,7 @@ export default class ToolGroupService {
   EVENTS: { [key: string]: string };
 
   constructor(serviceManager) {
-    const {
-      cornerstoneViewportService,
-      viewportGridService,
-    } = serviceManager.services;
+    const { cornerstoneViewportService, viewportGridService } = serviceManager.services;
     this.cornerstoneViewportService = cornerstoneViewportService;
     this.viewportGridService = viewportGridService;
     this.listeners = {};
@@ -66,19 +61,14 @@ export default class ToolGroupService {
 
     if (!toolGroupIdToUse) {
       // Use the active viewport's tool group if no tool group id is provided
-      const enabledElement = getActiveViewportEnabledElement(
-        this.viewportGridService
-      );
+      const enabledElement = getActiveViewportEnabledElement(this.viewportGridService);
 
       if (!enabledElement) {
         return;
       }
 
       const { renderingEngineId, viewportId } = enabledElement;
-      const toolGroup = ToolGroupManager.getToolGroupForViewport(
-        viewportId,
-        renderingEngineId
-      );
+      const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);
 
       if (!toolGroup) {
         console.warn(
@@ -103,10 +93,7 @@ export default class ToolGroupService {
 
   public getToolGroupForViewport(viewportId: string): Types.IToolGroup | void {
     const renderingEngine = this.cornerstoneViewportService.getRenderingEngine();
-    return ToolGroupManager.getToolGroupForViewport(
-      viewportId,
-      renderingEngine.id
-    );
+    return ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngine.id);
   }
 
   public getActiveToolForViewport(viewportId: string): string {
@@ -133,10 +120,7 @@ export default class ToolGroupService {
     renderingEngineId: string,
     deleteToolGroupIfEmpty?: boolean
   ): void {
-    const toolGroup = ToolGroupManager.getToolGroupForViewport(
-      viewportId,
-      renderingEngineId
-    );
+    const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);
 
     if (!toolGroup) {
       return;
@@ -193,11 +177,7 @@ export default class ToolGroupService {
     return toolGroup;
   }
 
-  public addToolsToToolGroup(
-    toolGroupId: string,
-    tools: Array<Tool>,
-    configs: any = {}
-  ): void {
+  public addToolsToToolGroup(toolGroupId: string, tools: Array<Tool>, configs: any = {}): void {
     const toolGroup = ToolGroupManager.getToolGroup(toolGroupId);
     // this.changeConfigurationIfNecessary(toolGroup, volumeId);
     this._addTools(toolGroup, tools, configs);

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -9,15 +9,10 @@ import {
   VolumeViewport,
   VolumeViewport3D,
   cache,
-  utilities,
-  CONSTANTS,
   Enums as csEnums,
 } from '@cornerstonejs/core';
 
-import {
-  utilities as csToolsUtils,
-  Enums as csToolsEnums,
-} from '@cornerstonejs/tools';
+import { utilities as csToolsUtils, Enums as csToolsEnums } from '@cornerstonejs/tools';
 import { IViewportService } from './IViewportService';
 import { RENDERING_ENGINE_ID } from './constants';
 import ViewportInfo, {
@@ -25,25 +20,20 @@ import ViewportInfo, {
   DisplaySetOptions,
   PublicViewportOptions,
 } from './Viewport';
-import {
-  StackViewportData,
-  VolumeViewportData,
-} from '../../types/CornerstoneCacheService';
+import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 import { Presentation, Presentations } from '../../types/Presentation';
 
 import JumpPresets from '../../utils/JumpPresets';
 
 const EVENTS = {
-  VIEWPORT_DATA_CHANGED:
-    'event::cornerstoneViewportService:viewportDataChanged',
+  VIEWPORT_DATA_CHANGED: 'event::cornerstoneViewportService:viewportDataChanged',
 };
 
 /**
  * Handles cornerstone viewport logic including enabling, disabling, and
  * updating the viewport.
  */
-class CornerstoneViewportService extends PubSubService
-  implements IViewportService {
+class CornerstoneViewportService extends PubSubService implements IViewportService {
   static REGISTRATION = {
     name: 'cornerstoneViewportService',
     altName: 'CornerstoneViewportService',
@@ -55,7 +45,6 @@ class CornerstoneViewportService extends PubSubService
   };
 
   renderingEngine: Types.IRenderingEngine | null;
-  viewportsInfo: Map<number, ViewportInfo> = new Map();
   viewportsById: Map<string, ViewportInfo> = new Map();
   viewportGridResizeObserver: ResizeObserver | null;
   viewportsDisplaySets: Map<string, string[]> = new Map();
@@ -75,45 +64,17 @@ class CornerstoneViewportService extends PubSubService
 
   /**
    * Adds the HTML element to the viewportService
-   * @param {*} viewportIndex
+   * @param {*} viewportId
    * @param {*} elementRef
    */
-  public enableViewport(
-    viewportIndex: number,
-    viewportOptions: PublicViewportOptions,
-    elementRef: HTMLDivElement
-  ): void {
-    // Use the provided viewportId
-    // Not providing a viewportId is frowned upon because it does weird things
-    // on moving them around, but it does mostly work.
-    if (!viewportOptions.viewportId) {
-      console.warn('Should provide viewport id externally', viewportOptions);
-      viewportOptions.viewportId =
-        this.getViewportId(viewportIndex) || `viewport-${viewportIndex}`;
-    }
-    const { viewportId } = viewportOptions;
-    const viewportInfo = new ViewportInfo(viewportIndex, viewportId);
-    if (!viewportInfo.viewportId) {
-      throw new Error('Should have viewport ID afterwards');
-    }
-
+  public enableViewport(viewportId: string, elementRef: HTMLDivElement): void {
+    const viewportInfo = new ViewportInfo(viewportId);
     viewportInfo.setElement(elementRef);
-    this.viewportsInfo.set(viewportIndex, viewportInfo);
     this.viewportsById.set(viewportId, viewportInfo);
   }
 
   public getViewportIds(): string[] {
-    const viewportIds = [];
-
-    this.viewportsInfo.forEach(viewportInfo => {
-      viewportIds.push(viewportInfo.getViewportId());
-    });
-
-    return viewportIds;
-  }
-
-  public getViewportId(viewportIndex: number): string {
-    return this.viewportsInfo[viewportIndex]?.viewportId;
+    return Array.from(this.viewportsById.keys());
   }
 
   /**
@@ -171,21 +132,14 @@ class CornerstoneViewportService extends PubSubService
    * created for every new viewport, this will be called whenever the set of
    * viewports is changed, but NOT when the viewport position changes only.
    *
-   * @param viewportIndex
+   * @param viewportId - The viewportId to disable
    */
-  public disableElement(viewportIndex: number): void {
-    const viewportInfo = this.viewportsInfo.get(viewportIndex);
-    if (!viewportInfo) {
-      return;
-    }
+  public disableElement(viewportId: string): void {
+    this.renderingEngine?.disableElement(viewportId);
 
-    const viewportId = viewportInfo.getViewportId();
-
-    this.renderingEngine && this.renderingEngine.disableElement(viewportId);
-
-    this.viewportsInfo.get(viewportIndex).destroy();
-    this.viewportsInfo.delete(viewportIndex);
+    // clean up
     this.viewportsById.delete(viewportId);
+    this.viewportsDisplaySets.delete(viewportId);
   }
 
   public setPresentations(viewport, presentations?: Presentations): void {
@@ -199,14 +153,14 @@ class CornerstoneViewportService extends PubSubService
     }
   }
 
-  public getPresentation(viewportIndex: number): Presentation {
-    const viewportInfo = this.viewportsInfo.get(viewportIndex);
+  public getPresentation(viewportId: string): Presentation {
+    const viewportInfo = this.viewportsById.get(viewportId);
     if (!viewportInfo) {
       return;
     }
     const { viewportType, presentationIds } = viewportInfo.getViewportOptions();
 
-    const csViewport = this.getCornerstoneViewportByIndex(viewportIndex);
+    const csViewport = this.getCornerstoneViewport(viewportId);
     if (!csViewport) {
       return;
     }
@@ -220,63 +174,80 @@ class CornerstoneViewportService extends PubSubService
     const camera = csViewport.getCamera();
     return {
       presentationIds,
-      viewportType:
-        !viewportType || viewportType === 'stack' ? 'stack' : 'volume',
+      viewportType: !viewportType || viewportType === 'stack' ? 'stack' : 'volume',
       properties,
       initialImageIndex,
       camera,
     };
   }
 
+  public storePresentation({ viewportId }) {
+    const stateSyncService = this.servicesManager.services.stateSyncService;
+    let presentation;
+    try {
+      presentation = this.getPresentation(viewportId);
+    } catch (error) {
+      console.warn(error);
+    }
+
+    if (!presentation || !presentation.presentationIds) {
+      return;
+    }
+    const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
+    const { presentationIds } = presentation;
+    const { lutPresentationId, positionPresentationId } = presentationIds || {};
+    const storeState = {};
+    if (lutPresentationId) {
+      storeState.lutPresentationStore = {
+        ...lutPresentationStore,
+        [lutPresentationId]: presentation,
+      };
+    }
+    if (positionPresentationId) {
+      storeState.positionPresentationStore = {
+        ...positionPresentationStore,
+        [positionPresentationId]: presentation,
+      };
+    }
+    stateSyncService.store(storeState);
+  }
+
   /**
-   * Uses the renderingEngine to enable the element for the given viewport index
-   * and sets the displaySet data to the viewport
-   * @param {*} viewportIndex
-   * @param {*} displaySet
-   * @param {*} dataSource
-   * @returns
+   * Sets the viewport data for a viewport.
+   * @param viewportId - The ID of the viewport to set the data for.
+   * @param viewportData - The viewport data to set.
+   * @param publicViewportOptions - The public viewport options.
+   * @param publicDisplaySetOptions - The public display set options.
+   * @param presentations - The presentations to set.
    */
   public setViewportData(
-    viewportIndex: number,
+    viewportId: string,
     viewportData: StackViewportData | VolumeViewportData,
     publicViewportOptions: PublicViewportOptions,
     publicDisplaySetOptions: DisplaySetOptions[],
     presentations?: Presentations
   ): void {
     const renderingEngine = this.getRenderingEngine();
-    const viewportId =
-      publicViewportOptions.viewportId || this.getViewportId(viewportIndex);
-    if (!viewportId) {
-      throw new Error('Must define viewportId externally');
-    }
 
+    // This is the old viewportInfo, which may have old options but we might be
+    // using its viewport (same viewportId as the new viewportInfo)
     const viewportInfo = this.viewportsById.get(viewportId);
 
+    // We should store the presentation for the current viewport since we can't only
+    // rely to store it WHEN the viewport is disabled since we might keep around the
+    // same viewport/element and just change the viewportData for it (drag and drop etc.)
+    // the disableElement storePresentation handle would not be called in this case
+    // and we would lose the presentation.
+    this.storePresentation({ viewportId: viewportInfo.getViewportId() });
+
     if (!viewportInfo) {
-      throw new Error('Viewport info not defined');
+      throw new Error('element is not enabled for the given viewportId');
     }
 
-    // If the viewport has moved index, then record the new index
-    if (viewportInfo.viewportIndex !== viewportIndex) {
-      this.viewportsInfo.delete(viewportInfo.viewportIndex);
-      this.viewportsInfo.set(viewportIndex, viewportInfo);
-      viewportInfo.viewportIndex = viewportIndex;
-    }
-
-    viewportInfo.setRenderingEngineId(renderingEngine.id);
-
-    const {
-      viewportOptions,
-      displaySetOptions,
-    } = this._getViewportAndDisplaySetOptions(
-      publicViewportOptions,
-      publicDisplaySetOptions,
-      viewportInfo
-    );
-
-    viewportInfo.setViewportOptions(viewportOptions);
-    viewportInfo.setDisplaySetOptions(displaySetOptions);
-    viewportInfo.setViewportData(viewportData);
+    // override the viewportOptions and displaySetOptions with the public ones
+    // since those are the newly set ones, we set them here so that it handles defaults
+    const displaySetOptions = viewportInfo.setPublicDisplaySetOptions(publicDisplaySetOptions);
+    const viewportOptions = viewportInfo.setPublicViewportOptions(publicViewportOptions);
 
     const element = viewportInfo.getElement();
     const type = viewportInfo.getViewportType();
@@ -293,12 +264,26 @@ class CornerstoneViewportService extends PubSubService
       },
     };
 
+    // Rendering Engine Id set should happen before enabling the element
+    // since there are callbacks that depend on the renderingEngine id
+    // Todo: however, this is a limitation which means that we can't change
+    // the rendering engine id for a given viewport which might be a super edge
+    // case
+    viewportInfo.setRenderingEngineId(renderingEngine.id);
+
     // Todo: this is not optimal at all, we are re-enabling the already enabled
     // element which is not what we want. But enabledElement as part of the
     // renderingEngine is designed to be used like this. This will trigger
     // ENABLED_ELEMENT again and again, which will run onEnableElement callbacks
     renderingEngine.enableElement(viewportInput);
 
+    viewportInfo.setViewportOptions(viewportOptions);
+    viewportInfo.setDisplaySetOptions(displaySetOptions);
+    viewportInfo.setViewportData(viewportData);
+    viewportInfo.setViewportId(viewportId);
+
+    this.viewportsById.set(viewportId, viewportInfo);
+
     const viewport = renderingEngine.getViewport(viewportId);
     this._setDisplaySets(viewport, viewportData, viewportInfo, presentations);
 
@@ -307,7 +292,6 @@ class CornerstoneViewportService extends PubSubService
     // invalid data.
     this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
       viewportData,
-      viewportIndex,
       viewportId,
     });
   }
@@ -317,11 +301,7 @@ class CornerstoneViewportService extends PubSubService
   ): Types.IStackViewport | Types.IVolumeViewport | null {
     const viewportInfo = this.getViewportInfo(viewportId);
 
-    if (
-      !viewportInfo ||
-      !this.renderingEngine ||
-      this.renderingEngine.hasBeenDestroyed
-    ) {
+    if (!viewportInfo || !this.renderingEngine || this.renderingEngine.hasBeenDestroyed) {
       return null;
     }
 
@@ -330,43 +310,8 @@ class CornerstoneViewportService extends PubSubService
     return viewport;
   }
 
-  public getCornerstoneViewportByIndex(
-    viewportIndex: number
-  ): Types.IStackViewport | Types.IVolumeViewport | null {
-    const viewportInfo = this.getViewportInfoByIndex(viewportIndex);
-
-    if (
-      !viewportInfo ||
-      !this.renderingEngine ||
-      this.renderingEngine.hasBeenDestroyed
-    ) {
-      return null;
-    }
-
-    const viewport = this.renderingEngine.getViewport(
-      viewportInfo.getViewportId()
-    );
-
-    return viewport;
-  }
-
-  /**
-   * Returns the viewportIndex for the provided viewportId
-   * @param {string} viewportId - the viewportId
-   * @returns {number} - the viewportIndex
-   */
-  public getViewportInfoByIndex(viewportIndex: number): ViewportInfo {
-    return this.viewportsInfo.get(viewportIndex);
-  }
-
   public getViewportInfo(viewportId: string): ViewportInfo {
-    // @ts-ignore
-    for (const [index, viewport] of this.viewportsInfo.entries()) {
-      if (viewport.getViewportId() === viewportId) {
-        return viewport;
-      }
-    }
-    return null;
+    return this.viewportsById.get(viewportId);
   }
 
   _setStackViewport(
@@ -377,24 +322,15 @@ class CornerstoneViewportService extends PubSubService
   ): void {
     const displaySetOptions = viewportInfo.getDisplaySetOptions();
 
-    const {
-      imageIds,
-      initialImageIndex,
-      displaySetInstanceUID,
-    } = viewportData.data;
+    const { imageIds, initialImageIndex, displaySetInstanceUID } = viewportData.data;
 
     this.viewportsDisplaySets.set(viewport.id, [displaySetInstanceUID]);
 
     let initialImageIndexToUse =
-      presentations?.positionPresentation?.initialImageIndex ??
-      initialImageIndex;
+      presentations?.positionPresentation?.initialImageIndex ?? initialImageIndex;
 
-    if (
-      initialImageIndexToUse === undefined ||
-      initialImageIndexToUse === null
-    ) {
-      initialImageIndexToUse =
-        this._getInitialImageIndexForViewport(viewportInfo, imageIds) || 0;
+    if (initialImageIndexToUse === undefined || initialImageIndexToUse === null) {
+      initialImageIndexToUse = this._getInitialImageIndexForViewport(viewportInfo, imageIds) || 0;
     }
 
     const properties = { ...presentations.lutPresentation?.properties };
@@ -414,7 +350,7 @@ class CornerstoneViewportService extends PubSubService
     }
 
     viewport.setStack(imageIds, initialImageIndexToUse).then(() => {
-      viewport.setProperties(properties);
+      viewport.setProperties({ ...properties });
       const camera = presentations.positionPresentation?.camera;
       if (camera) {
         viewport.setCamera(camera);
@@ -439,12 +375,8 @@ class CornerstoneViewportService extends PubSubService
     if (viewportType === csEnums.ViewportType.STACK) {
       numberOfSlices = imageIds.length;
     } else if (viewportType === csEnums.ViewportType.ORTHOGRAPHIC) {
-      const viewport = this.getCornerstoneViewport(
-        viewportInfo.getViewportId()
-      );
-      const imageSliceData = csUtils.getImageSliceDataForVolumeViewport(
-        viewport
-      );
+      const viewport = this.getCornerstoneViewport(viewportInfo.getViewportId());
+      const imageSliceData = csUtils.getImageSliceDataForVolumeViewport(viewport);
 
       if (!imageSliceData) {
         return;
@@ -458,11 +390,7 @@ class CornerstoneViewportService extends PubSubService
     return this._getInitialImageIndex(numberOfSlices, index, preset);
   }
 
-  _getInitialImageIndex(
-    numberOfSlices: number,
-    imageIndex?: number,
-    preset?: JumpPresets
-  ): number {
+  _getInitialImageIndex(numberOfSlices: number, imageIndex?: number, preset?: JumpPresets): number {
     const lastSliceIndex = numberOfSlices - 1;
 
     if (imageIndex !== undefined) {
@@ -484,9 +412,7 @@ class CornerstoneViewportService extends PubSubService
       // it will jump to a different slice than the middle one which
       // was the initial slice, and we have some tools such as Crosshairs
       // which rely on a relative camera modifications and those will break.
-      return lastSliceIndex % 2 === 0
-        ? lastSliceIndex / 2
-        : (lastSliceIndex + 1) / 2;
+      return lastSliceIndex % 2 === 0 ? lastSliceIndex / 2 : (lastSliceIndex + 1) / 2;
     }
 
     return 0;
@@ -541,10 +467,7 @@ class CornerstoneViewportService extends PubSubService
 
     this.viewportsDisplaySets.set(viewport.id, displaySetInstanceUIDs);
 
-    if (
-      hangingProtocolService.hasCustomImageLoadStrategy() &&
-      !hangingProtocolService.customImageLoadPerformed
-    ) {
+    if (hangingProtocolService.getShouldPerformCustomImageLoad()) {
       // delegate the volume loading to the hanging protocol service if it has a custom image load strategy
       return hangingProtocolService.runImageLoadStrategy({
         viewportId: viewport.id,
@@ -559,22 +482,11 @@ class CornerstoneViewportService extends PubSubService
     });
 
     // This returns the async continuation only
-    return this.setVolumesForViewport(
-      viewport,
-      volumeInputArray,
-      presentations
-    );
+    return this.setVolumesForViewport(viewport, volumeInputArray, presentations);
   }
 
-  public async setVolumesForViewport(
-    viewport,
-    volumeInputArray,
-    presentations
-  ) {
-    const {
-      displaySetService,
-      toolGroupService,
-    } = this.servicesManager.services;
+  public async setVolumesForViewport(viewport, volumeInputArray, presentations) {
+    const { displaySetService, toolGroupService } = this.servicesManager.services;
 
     const viewportInfo = this.getViewportInfo(viewport.id);
     const displaySetOptions = viewportInfo.getDisplaySetOptions();
@@ -632,10 +544,7 @@ class CornerstoneViewportService extends PubSubService
       // associated with the primary displaySet
 
       // get segmentations only returns the hydrated segmentations
-      this._addSegmentationRepresentationToToolGroupIfNecessary(
-        displaySetInstanceUIDs,
-        viewport
-      );
+      this._addSegmentationRepresentationToToolGroupIfNecessary(displaySetInstanceUIDs, viewport);
     }
 
     const toolGroup = toolGroupService.getToolGroupForViewport(viewport.id);
@@ -656,10 +565,7 @@ class CornerstoneViewportService extends PubSubService
     displaySetInstanceUIDs: string[],
     viewport: any
   ) {
-    const {
-      segmentationService,
-      toolGroupService,
-    } = this.servicesManager.services;
+    const { segmentationService, toolGroupService } = this.servicesManager.services;
 
     const toolGroup = toolGroupService.getToolGroupForViewport(viewport.id);
 
@@ -668,9 +574,7 @@ class CornerstoneViewportService extends PubSubService
 
     for (const segmentation of segmentations) {
       const toolGroupSegmentationRepresentations =
-        segmentationService.getSegmentationRepresentationsForToolGroup(
-          toolGroup.id
-        ) || [];
+        segmentationService.getSegmentationRepresentationsForToolGroup(toolGroup.id) || [];
 
       // if there is already a segmentation representation for this segmentation
       // for this toolGroup, don't bother at all
@@ -685,16 +589,12 @@ class CornerstoneViewportService extends PubSubService
       // otherwise, check if the hydrated segmentations are in the same FOR
       // as the primary displaySet, if so add the representation (since it was not there)
       const { id: segDisplaySetInstanceUID, type } = segmentation;
-      const segFrameOfReferenceUID = this._getFrameOfReferenceUID(
-        segDisplaySetInstanceUID
-      );
+      const segFrameOfReferenceUID = this._getFrameOfReferenceUID(segDisplaySetInstanceUID);
 
       let shouldDisplaySeg = false;
 
       for (const displaySetInstanceUID of displaySetInstanceUIDs) {
-        const primaryFrameOfReferenceUID = this._getFrameOfReferenceUID(
-          displaySetInstanceUID
-        );
+        const primaryFrameOfReferenceUID = this._getFrameOfReferenceUID(displaySetInstanceUID);
 
         if (segFrameOfReferenceUID === primaryFrameOfReferenceUID) {
           shouldDisplaySeg = true;
@@ -715,14 +615,8 @@ class CornerstoneViewportService extends PubSubService
     }
   }
 
-  private addOverlayRepresentationForDisplaySet(
-    displaySet: any,
-    viewport: any
-  ) {
-    const {
-      segmentationService,
-      toolGroupService,
-    } = this.servicesManager.services;
+  private addOverlayRepresentationForDisplaySet(displaySet: any, viewport: any) {
+    const { segmentationService, toolGroupService } = this.servicesManager.services;
 
     const { referencedVolumeId } = displaySet;
     const segmentationId = displaySet.displaySetInstanceUID;
@@ -744,21 +638,12 @@ class CornerstoneViewportService extends PubSubService
 
   // Todo: keepCamera is an interim solution until we have a better solution for
   // keeping the camera position when the viewport data is changed
-  public updateViewport(
-    viewportIndex: number,
-    viewportData,
-    keepCamera = false
-  ) {
-    const viewportInfo = this.getViewportInfoByIndex(viewportIndex);
-
-    const viewportId = viewportInfo.getViewportId();
+  public updateViewport(viewportId: string, viewportData, keepCamera = false) {
+    const viewportInfo = this.getViewportInfo(viewportId);
     const viewport = this.getCornerstoneViewport(viewportId);
     const viewportCamera = viewport.getCamera();
 
-    if (
-      viewport instanceof VolumeViewport ||
-      viewport instanceof VolumeViewport3D
-    ) {
+    if (viewport instanceof VolumeViewport || viewport instanceof VolumeViewport3D) {
       this._setVolumeViewport(viewport, viewportData, viewportInfo).then(() => {
         if (keepCamera) {
           viewport.setCamera(viewportCamera);
@@ -788,10 +673,7 @@ class CornerstoneViewportService extends PubSubService
         viewportInfo,
         presentations
       );
-    } else if (
-      viewport instanceof VolumeViewport ||
-      viewport instanceof VolumeViewport3D
-    ) {
+    } else if (viewport instanceof VolumeViewport || viewport instanceof VolumeViewport3D) {
       this._setVolumeViewport(
         viewport,
         viewportData as VolumeViewportData,
@@ -814,10 +696,7 @@ class CornerstoneViewportService extends PubSubService
 
   _getSlabThickness(displaySetOptions, volumeId) {
     const { blendMode } = displaySetOptions;
-    if (
-      blendMode === undefined ||
-      displaySetOptions.slabThickness === undefined
-    ) {
+    if (blendMode === undefined || displaySetOptions.slabThickness === undefined) {
       return;
     }
 
@@ -841,41 +720,9 @@ class CornerstoneViewportService extends PubSubService
     }
   }
 
-  _getViewportAndDisplaySetOptions(
-    publicViewportOptions: PublicViewportOptions,
-    publicDisplaySetOptions: DisplaySetOptions[],
-    viewportInfo: ViewportInfo
-  ): {
-    viewportOptions: ViewportOptions;
-    displaySetOptions: DisplaySetOptions[];
-  } {
-    const viewportIndex = viewportInfo.getViewportIndex();
-
-    // Creating a temporary viewportInfo to handle defaults
-    const newViewportInfo = new ViewportInfo(
-      viewportIndex,
-      viewportInfo.getViewportId()
-    );
-
-    // To handle setting the default values if missing for the viewportOptions and
-    // displaySetOptions
-    newViewportInfo.setPublicViewportOptions(publicViewportOptions);
-    newViewportInfo.setPublicDisplaySetOptions(publicDisplaySetOptions);
-
-    const newViewportOptions = newViewportInfo.getViewportOptions();
-    const newDisplaySetOptions = newViewportInfo.getDisplaySetOptions();
-
-    return {
-      viewportOptions: newViewportOptions,
-      displaySetOptions: newDisplaySetOptions,
-    };
-  }
-
   _getFrameOfReferenceUID(displaySetInstanceUID) {
     const { displaySetService } = this.servicesManager.services;
-    const displaySet = displaySetService.getDisplaySetByUID(
-      displaySetInstanceUID
-    );
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
     if (!displaySet) {
       return;
@@ -907,25 +754,25 @@ class CornerstoneViewportService extends PubSubService
    *
    * @param measurement
    *          The measurement that is desired to view.
-   * @param activeViewportIndex - the index that was active at the time the jump
+   * @param activeViewportId - the index that was active at the time the jump
    *          was initiated.
-   * @return the viewportIndex to display the given measurement
+   * @return the viewportId that the measurement should be displayed in.
    */
-  public getViewportIndexToJump(
-    activeViewportIndex: number,
+  public getViewportIdToJump(
+    activeViewportId: string,
     displaySetInstanceUID: string,
     cameraProps: unknown
-  ): number {
-    const viewportInfo = this.viewportsInfo.get(activeViewportIndex);
+  ): string {
+    const viewportInfo = this.getViewportInfo(activeViewportId);
     const { referencedImageId } = cameraProps;
     if (viewportInfo?.contains(displaySetInstanceUID, referencedImageId)) {
-      return activeViewportIndex;
+      return activeViewportId;
     }
 
     return (
       [...this.viewportsById.values()].find(viewportInfo =>
         viewportInfo.contains(displaySetInstanceUID, referencedImageId)
-      )?.viewportIndex ?? -1
+      )?.viewportId ?? null
     );
   }
 }

extensions/cornerstone/src/services/ViewportService/IViewportService.ts

@@ -1,10 +1,6 @@
 import { Types } from '@cornerstonejs/core';
 import { StackData, VolumeData } from '../../types/CornerstoneCacheService';
-import {
-  DisplaySetOptions,
-  PublicViewportOptions,
-  ViewportOptions,
-} from './Viewport';
+import { DisplaySetOptions, PublicViewportOptions, ViewportOptions } from './Viewport';
 
 /**
  * Handles cornerstone viewport logic including enabling, disabling, and
@@ -17,7 +13,6 @@ export interface IViewportService {
   viewportGridResizeObserver: unknown;
   viewportsInfo: unknown;
   sceneVolumeInputs: unknown;
-  viewportIndexUIDMap: unknown;
   viewportDivElements: unknown;
   ViewportPropertiesMap: unknown;
   volumeUIDs: unknown;
@@ -28,14 +23,9 @@ export interface IViewportService {
   _broadcastEvent: unknown;
   /**
    * Adds the HTML element to the viewportService
-   * @param {*} viewportIndex
    * @param {*} elementRef
    */
-  enableViewport(
-    viewportIndex: number,
-    viewportOptions: ViewportOptions,
-    elementRef: HTMLDivElement
-  ): void;
+  enableViewport(viewportId: string, elementRef: HTMLDivElement): void;
   /**
    * It retrieves the renderingEngine if it does exist, or creates one otherwise
    * @returns {RenderingEngine} rendering engine
@@ -54,19 +44,17 @@ export interface IViewportService {
   /**
    * Disables the viewport inside the renderingEngine, if no viewport is left
    * it destroys the renderingEngine.
-   * @param viewportIndex
+   * @param viewportId
    */
-  disableElement(viewportIndex: number): void;
+  disableElement(viewportId: string): void;
   /**
    * Uses the renderingEngine to enable the element for the given viewport index
    * and sets the displaySet data to the viewport
-   * @param {*} viewportIndex
    * @param {*} displaySet
    * @param {*} dataSource
    * @returns
    */
   setViewportData(
-    viewportIndex: number,
     viewportData: StackData | VolumeData,
     publicViewportOptions: PublicViewportOptions,
     publicDisplaySetOptions: DisplaySetOptions[]

extensions/cornerstone/src/services/ViewportService/Viewport.ts

@@ -1,9 +1,6 @@
 import { Types, Enums } from '@cornerstonejs/core';
 import { Types as UITypes } from '@ohif/ui';
-import {
-  StackViewportData,
-  VolumeViewportData,
-} from '../../types/CornerstoneCacheService';
+import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 import getCornerstoneBlendMode from '../../utils/getCornerstoneBlendMode';
 import getCornerstoneOrientation from '../../utils/getCornerstoneOrientation';
 import getCornerstoneViewportType from '../../utils/getCornerstoneViewportType';
@@ -90,11 +87,7 @@ const DEFAULT_TOOLGROUP_ID = 'default';
 
 // Return true if the data contains the given display set UID OR the imageId
 // if it is a composite object.
-const dataContains = (
-  data,
-  displaySetUID: string,
-  imageId?: string
-): boolean => {
+const dataContains = (data, displaySetUID: string, imageId?: string): boolean => {
   if (data.displaySetInstanceUID === displaySetUID) {
     return true;
   }
@@ -106,15 +99,13 @@ const dataContains = (
 
 class ViewportInfo {
   private viewportId = '';
-  private viewportIndex: number;
   private element: HTMLDivElement;
   private viewportOptions: ViewportOptions;
   private displaySetOptions: Array<DisplaySetOptions>;
   private viewportData: StackViewportData | VolumeViewportData;
   private renderingEngineId: string;
 
-  constructor(viewportIndex: number, viewportId: string) {
-    this.viewportIndex = viewportIndex;
+  constructor(viewportId: string) {
     this.viewportId = viewportId;
     this.setPublicViewportOptions({});
     this.setPublicDisplaySetOptions([{}]);
@@ -130,9 +121,7 @@ class ViewportInfo {
     }
 
     if (this.viewportData.data.length) {
-      return !!this.viewportData.data.find(data =>
-        dataContains(data, displaySetUID, imageId)
-      );
+      return !!this.viewportData.data.find(data => dataContains(data, displaySetUID, imageId));
     }
     return dataContains(this.viewportData.data, displaySetUID, imageId);
   }
@@ -155,17 +144,12 @@ class ViewportInfo {
   public setViewportId(viewportId: string): void {
     this.viewportId = viewportId;
   }
-  public setViewportIndex(viewportIndex: number): void {
-    this.viewportIndex = viewportIndex;
-  }
 
   public setElement(element: HTMLDivElement): void {
     this.element = element;
   }
 
-  public setViewportData(
-    viewportData: StackViewportData | VolumeViewportData
-  ): void {
+  public setViewportData(viewportData: StackViewportData | VolumeViewportData): void {
     this.viewportData = viewportData;
   }
 
@@ -173,10 +157,6 @@ class ViewportInfo {
     return this.viewportData;
   }
 
-  public getViewportIndex(): number {
-    return this.viewportIndex;
-  }
-
   public getElement(): HTMLDivElement {
     return this.element;
   }
@@ -187,13 +167,13 @@ class ViewportInfo {
 
   public setPublicDisplaySetOptions(
     publicDisplaySetOptions: PublicDisplaySetOptions[] | DisplaySetSelector[]
-  ): void {
+  ): Array<DisplaySetOptions> {
     // map the displaySetOptions and check if they are undefined then set them to default values
-    const displaySetOptions = this.mapDisplaySetOptions(
-      publicDisplaySetOptions
-    );
+    const displaySetOptions = this.mapDisplaySetOptions(publicDisplaySetOptions);
 
     this.setDisplaySetOptions(displaySetOptions);
+
+    return this.displaySetOptions;
   }
 
   public hasDisplaySet(displaySetInstanceUID: string): boolean {
@@ -202,8 +182,9 @@ class ViewportInfo {
     // via cornerstoneViewportService
     let viewportData = this.getViewportData();
 
-    if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC ||
-        viewportData.viewportType === Enums.ViewportType.VOLUME_3D
+    if (
+      viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC ||
+      viewportData.viewportType === Enums.ViewportType.VOLUME_3D
     ) {
       viewportData = viewportData as VolumeViewportData;
       return viewportData.data.some(
@@ -215,22 +196,15 @@ class ViewportInfo {
     return viewportData.data.displaySetInstanceUID === displaySetInstanceUID;
   }
 
-  public setPublicViewportOptions(
-    viewportOptionsEntry: PublicViewportOptions
-  ): void {
+  public setPublicViewportOptions(viewportOptionsEntry: PublicViewportOptions): ViewportOptions {
     let viewportType = viewportOptionsEntry.viewportType;
-    const {
-      toolGroupId = DEFAULT_TOOLGROUP_ID,
-      presentationIds,
-    } = viewportOptionsEntry;
+    const { toolGroupId = DEFAULT_TOOLGROUP_ID, presentationIds } = viewportOptionsEntry;
     let orientation;
 
     if (!viewportType) {
       viewportType = getCornerstoneViewportType(STACK);
     } else {
-      viewportType = getCornerstoneViewportType(
-        viewportOptionsEntry.viewportType
-      );
+      viewportType = getCornerstoneViewportType(viewportOptionsEntry.viewportType);
     }
 
     // map SAGITTAL, AXIAL, CORONAL orientation to be used by cornerstone
@@ -250,6 +224,8 @@ class ViewportInfo {
       toolGroupId,
       presentationIds,
     });
+
+    return this.viewportOptions;
   }
 
   public setViewportOptions(viewportOptions: ViewportOptions): void {
@@ -260,9 +236,7 @@ class ViewportInfo {
     return this.viewportOptions;
   }
 
-  public setDisplaySetOptions(
-    displaySetOptions: Array<DisplaySetOptions>
-  ): void {
+  public setDisplaySetOptions(displaySetOptions: Array<DisplaySetOptions>): void {
     this.displaySetOptions = displaySetOptions;
   }
 

extensions/cornerstone/src/state.ts

@@ -9,26 +9,22 @@ const state = {
  * @param {HTMLElement} dom Active viewport element.
  * @return void
  */
-const setEnabledElement = (
-  viewportIndex: number,
-  element: HTMLElement,
-  context?: string
-): void => {
+const setEnabledElement = (viewportId: string, element: HTMLElement, context?: string): void => {
   const targetContext = context || state.DEFAULT_CONTEXT;
 
-  state.enabledElements[viewportIndex] = {
+  state.enabledElements[viewportId] = {
     element,
     context: targetContext,
   };
 };
 
 /**
- * Grabs the enabled element `dom` reference of an ative viewport.
+ * Grabs the enabled element `dom` reference of an active viewport.
  *
  * @return {HTMLElement} Active viewport element.
  */
-const getEnabledElement = viewportIndex => {
-  return state.enabledElements[viewportIndex];
+const getEnabledElement = viewportId => {
+  return state.enabledElements[viewportId];
 };
 
 const reset = () => {

extensions/cornerstone/src/tools/CalibrationLineTool.ts

@@ -25,8 +25,7 @@ class CalibrationLineTool extends LengthTool {
       this._renderingViewport.worldToCanvas(p)
     );
     // for display, round to 2 decimal points
-    const lengthPx =
-      Math.round(calculateLength2(canvasPoint1, canvasPoint2) * 100) / 100;
+    const lengthPx = Math.round(calculateLength2(canvasPoint1, canvasPoint2) * 100) / 100;
 
     const textLines = [`${lengthPx}px`];
 
@@ -64,17 +63,11 @@ export function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
 
   const length =
     Math.round(
-      calculateLength3(
-        annotationData.handles.points[0],
-        annotationData.handles.points[1]
-      ) * 100
+      calculateLength3(annotationData.handles.points[0], annotationData.handles.points[1]) * 100
     ) / 100;
 
   // calculate the currently applied pixel spacing on the viewport
-  const calibratedPixelSpacing = metaData.get(
-    'calibratedPixelSpacing',
-    imageId
-  );
+  const calibratedPixelSpacing = metaData.get('calibratedPixelSpacing', imageId);
   const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
   const currentRowPixelSpacing =
     calibratedPixelSpacing?.[0] || imagePlaneModule?.rowPixelSpacing || 1;
@@ -83,16 +76,12 @@ export function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
 
   const adjustCalibration = newLength => {
     const spacingScale = newLength / length;
-    const rowSpacing = spacingScale * currentRowPixelSpacing;
-    const colSpacing = spacingScale * currentColumnPixelSpacing;
 
     // trigger resize of the viewport to adjust the world/pixel mapping
-    calibrateImageSpacing(
-      imageId,
-      viewport.getRenderingEngine(),
-      rowSpacing,
-      colSpacing
-    );
+    calibrateImageSpacing(imageId, viewport.getRenderingEngine(), {
+      type: 'User',
+      scale: 1 / spacingScale,
+    });
   };
 
   return new Promise((resolve, reject) => {

extensions/cornerstone/src/tools/ImageOverlayViewerTool.tsx

@@ -0,0 +1,247 @@
+import { metaData } from '@cornerstonejs/core';
+import { utilities } from '@cornerstonejs/core';
+import { AnnotationDisplayTool, drawing } from '@cornerstonejs/tools';
+import { guid } from '@ohif/core/src/utils';
+
+interface CachedStat {
+  color: number[]; // [r, g, b, a]
+  overlays: {
+    // ...overlayPlaneModule
+    _id: string;
+    type: 'G' | 'R'; // G for Graphics, R for ROI
+    color?: number[]; // Rendered color [r, g, b, a]
+    dataUrl?: string; // Rendered image in Data URL expression
+  }[];
+}
+
+/**
+ * Image Overlay Viewer tool is not a traditional tool that requires user interactin.
+ * But it is used to display Pixel Overlays. And it will provide toggling capability.
+ *
+ * The documentation for Overlay Plane Module of DICOM can be found in [C.9.2 of
+ * Part-3 of DICOM standard](https://dicom.nema.org/medical/dicom/2018b/output/chtml/part03/sect_C.9.2.html)
+ *
+ * Image Overlay rendered by this tool can be toggled on and off using
+ * toolGroup.setToolEnabled() and toolGroup.setToolDisabled()
+ */
+class ImageOverlayViewerTool extends AnnotationDisplayTool {
+  static toolName = 'ImageOverlayViewer';
+  private _cachedOverlayMetadata: Map<string, any[]> = new Map();
+  private _cachedStats: { [key: string]: CachedStat } = {};
+
+  constructor(
+    toolProps = {},
+    defaultToolProps = {
+      supportedInteractionTypes: [],
+      configuration: {
+        fillColor: [255, 127, 127, 255],
+      },
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  onSetToolDisabled = (): void => {
+    this._cachedStats = {};
+    this._cachedOverlayMetadata = new Map();
+  };
+
+  renderAnnotation = (enabledElement, svgDrawingHelper) => {
+    const { viewport } = enabledElement;
+
+    const imageId = this.getReferencedImageId(viewport);
+    if (!imageId) {
+      return;
+    }
+
+    const overlays =
+      this._cachedOverlayMetadata.get(imageId) ??
+      metaData.get('overlayPlaneModule', imageId)?.overlays;
+
+    // no overlays
+    if (!overlays?.length) {
+      return;
+    }
+
+    this._cachedOverlayMetadata.set(imageId, overlays);
+
+    this._getCachedStat(imageId, overlays, this.configuration.fillColor).then(cachedStat => {
+      cachedStat.overlays.forEach(overlay => {
+        this._renderOverlay(enabledElement, svgDrawingHelper, overlay);
+      });
+    });
+
+    return true;
+  };
+
+  /**
+   * Render to DOM
+   *
+   * @param enabledElement
+   * @param svgDrawingHelper
+   * @param overlayData
+   * @returns
+   */
+  private _renderOverlay(enabledElement, svgDrawingHelper, overlayData) {
+    const { viewport } = enabledElement;
+    const imageId = this.getReferencedImageId(viewport);
+    if (!imageId) {
+      return;
+    }
+
+    // Decide the rendering position of the overlay image on the current canvas
+    const { _id, columns: width, rows: height, x, y } = overlayData;
+    const overlayTopLeftWorldPos = utilities.imageToWorldCoords(imageId, [
+      x - 1, // Remind that top-left corner's (x, y) is be (1, 1)
+      y - 1,
+    ]);
+    const overlayTopLeftOnCanvas = viewport.worldToCanvas(overlayTopLeftWorldPos);
+    const overlayBottomRightWorldPos = utilities.imageToWorldCoords(imageId, [width, height]);
+    const overlayBottomRightOnCanvas = viewport.worldToCanvas(overlayBottomRightWorldPos);
+
+    // add image to the annotations svg layer
+    const svgns = 'http://www.w3.org/2000/svg';
+    const svgNodeHash = `image-overlay-${_id}`;
+    const existingImageElement = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+    const attributes = {
+      'data-id': svgNodeHash,
+      width: overlayBottomRightOnCanvas[0] - overlayTopLeftOnCanvas[0],
+      height: overlayBottomRightOnCanvas[1] - overlayTopLeftOnCanvas[1],
+      x: overlayTopLeftOnCanvas[0],
+      y: overlayTopLeftOnCanvas[1],
+      href: overlayData.dataUrl,
+    };
+
+    if (
+      isNaN(attributes.x) ||
+      isNaN(attributes.y) ||
+      isNaN(attributes.width) ||
+      isNaN(attributes.height)
+    ) {
+      console.warn('Invalid rendering attribute for image overlay', attributes['data-id']);
+      return false;
+    }
+
+    if (existingImageElement) {
+      drawing.setAttributesIfNecessary(attributes, existingImageElement);
+      svgDrawingHelper.setNodeTouched(svgNodeHash);
+    } else {
+      const newImageElement = document.createElementNS(svgns, 'image');
+      drawing.setNewAttributesIfValid(attributes, newImageElement);
+      svgDrawingHelper.appendNode(newImageElement, svgNodeHash);
+    }
+    return true;
+  }
+
+  private async _getCachedStat(
+    imageId: string,
+    overlayMetadata: any[],
+    color: number[]
+  ): Promise<CachedStat> {
+    if (this._cachedStats[imageId] && this._isSameColor(this._cachedStats[imageId].color, color)) {
+      return this._cachedStats[imageId];
+    }
+
+    const overlays = await Promise.all(
+      overlayMetadata
+        .filter(overlay => overlay.pixelData)
+        .map(async (overlay, idx) => {
+          let pixelData = null;
+          if (overlay.pixelData.Value) {
+            pixelData = overlay.pixelData.Value;
+          } else if (overlay.pixelData.retrieveBulkData) {
+            pixelData = await overlay.pixelData.retrieveBulkData();
+          }
+
+          if (!pixelData) {
+            return;
+          }
+
+          const dataUrl = this._renderOverlayToDataUrl(
+            { width: overlay.columns, height: overlay.rows },
+            color,
+            pixelData
+          );
+
+          return {
+            ...overlay,
+            _id: guid(),
+            dataUrl, // this will be a data url expression of the rendered image
+            color,
+          };
+        })
+    );
+
+    this._cachedStats[imageId] = {
+      color: color,
+      overlays: overlays.filter(overlay => overlay),
+    };
+
+    return this._cachedStats[imageId];
+  }
+
+  /**
+   * compare two RGBA expression of colors.
+   *
+   * @param color1
+   * @param color2
+   * @returns
+   */
+  private _isSameColor(color1: number[], color2: number[]) {
+    return (
+      color1 &&
+      color2 &&
+      color1[0] === color2[0] &&
+      color1[1] === color2[1] &&
+      color1[2] === color2[2] &&
+      color1[3] === color2[3]
+    );
+  }
+
+  /**
+   * pixelData of overlayPlane module is an array of bits corresponding
+   * to each of the underlying pixels of the image.
+   * Let's create pixel data from bit array of overlay data
+   *
+   * @param pixelDataRaw
+   * @param color
+   * @returns
+   */
+  private _renderOverlayToDataUrl({ width, height }, color, pixelDataRaw) {
+    const pixelDataView = new DataView(pixelDataRaw);
+    const totalBits = width * height;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, width, height); // make it transparent
+    ctx.globalCompositeOperation = 'copy';
+
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+    for (let i = 0, bitIdx = 0, byteIdx = 0; i < totalBits; i++) {
+      if (pixelDataView.getUint8(byteIdx) & (1 << bitIdx)) {
+        data[i * 4] = color[0];
+        data[i * 4 + 1] = color[1];
+        data[i * 4 + 2] = color[2];
+        data[i * 4 + 3] = color[3];
+      }
+
+      // next bit, byte
+      if (bitIdx >= 7) {
+        bitIdx = 0;
+        byteIdx++;
+      } else {
+        bitIdx++;
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+
+    return canvas.toDataURL();
+  }
+}
+
+export default ImageOverlayViewerTool;

extensions/cornerstone/src/types/index.ts

@@ -1,7 +1,4 @@
-import * as CornerstoneCacheService from './CornerstoneCacheService'
+import * as CornerstoneCacheService from './CornerstoneCacheService';
 import CornerstoneServices from './CornerstoneServices';
 
-export type {
-  CornerstoneCacheService,
-  CornerstoneServices,
-}
+export type { CornerstoneCacheService, CornerstoneServices };