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

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

.circleci/config.yml

@@ -15,22 +15,13 @@ defaults: &defaults
 commands:
   install_bun:
     steps:
-      - restore_cache:
-          keys:
-            - bun-cache-v2-{{ arch }}-latest
       - run:
           name: Install Bun
           command: |
-            if [ ! -d "$HOME/.bun" ]; then
-              curl -fsSL https://bun.sh/install | bash
-            fi
+            curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.23"
             echo 'export BUN_INSTALL="$HOME/.bun"' >> $BASH_ENV
             echo 'export PATH="$BUN_INSTALL/bin:$PATH"' >> $BASH_ENV
             source $BASH_ENV
-      - save_cache:
-          key: bun-cache-v2-{{ arch }}-latest
-          paths:
-            - ~/.bun
 
 jobs:
   UNIT_TESTS:
@@ -121,6 +112,34 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/repo
+      # SECURITY AUDIT
+      - run:
+          name: 'Security Audit - High Risk Vulnerabilities'
+          command: |
+            echo "🔍 Running bun audit for security vulnerabilities..."
+            echo "Checking for HIGH-RISK vulnerabilities..."
+
+            if bun audit --audit-level high; then
+              echo "✅ No high-risk vulnerabilities found"
+              echo "🎉 Security audit passed!"
+            else
+              echo ""
+              echo "❌ HIGH-RISK VULNERABILITIES DETECTED!"
+              echo "======================================"
+              echo ""
+              echo "🔧 To fix these issues:"
+              echo "  1. Run: bun audit"
+              echo "  2. Review the vulnerability details"
+              echo "  3. Update affected packages to secure versions"
+              echo "  4. Test your changes"
+              echo "  5. Re-run: bun audit --audit-level high"
+              echo ""
+              echo "📋 Full audit report:"
+              bun audit --audit-level low || true
+              echo ""
+              echo "❌ This build cannot proceed until high-risk vulnerabilities are resolved."
+              exit 1
+            fi
       - run:
           name: Install Dependencies
           command: bun install --frozen-lockfile
@@ -352,7 +371,7 @@ jobs:
           name: Export Display Variable
           command: export DISPLAY=:99
       - cypress/install:
-          install-command: yarn install --no-save
+          install-command: yarn install --frozen-lockfile --no-save
       - cypress/run-tests:
           cypress-command: |
             npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
@@ -455,8 +474,13 @@ workflows:
           filters:
             branches:
               only: master
+      # - HOLD_FOR_APPROVAL:
+      #     type: approval
+      #     requires:
+      #       - BUILD
       - NPM_PUBLISH:
           requires:
+            # - HOLD_FOR_APPROVAL
             - BUILD
       - DOCKER_BETA_PUBLISH:
           requires:

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -51,28 +51,29 @@ body:
     validations:
       required: true
 
-  - type: input
-    id: os
+  - type: textarea
+    id: system_info
     attributes:
-      label: 'OS'
-      description: 'Your operating system.'
-      placeholder: 'e.g., Windows 10, macOS 10.15.4'
-    validations:
-      required: true
-  - type: input
-    id: node-version
-    attributes:
-      label: 'Node version'
-      description: 'Your Node.js version.'
-      placeholder: 'e.g., 20.18.1'
-    validations:
-      required: true
-  - type: input
-    id: browser
-    attributes:
-      label: 'Browser'
-      description: 'Your browser.'
-      placeholder: 'e.g., Chrome 83.0.4103.116, Firefox 77.0.1, Safari 13.1.1'
+      label: 'System Information'
+      description: 'Please run the following command in your terminal and paste the output:'
+      placeholder: |
+        Run: npx envinfo --system --binaries --browsers
+        
+        Then paste the output here. It should look something like:
+        
+        System:
+          OS: Windows 10 10.0.19042
+          CPU: (8) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
+          Memory: 15.89 GB / 31.74 GB
+          Shell: 1.0.0 - C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe
+        Binaries:
+          Node: 20.18.1 - C:\Program Files\nodejs\node.EXE
+          Yarn: 1.22.22 - C:\Users\user\AppData\Roaming\npm\yarn.CMD
+          npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
+        Browsers:
+          Chrome: 83.0.4103.116
+          Edge: Spartan (44.19041.1266.0), Chromium (83.0.478.58)
+          Firefox: 77.0.1
     validations:
       required: true
 

.github/workflows/build-docs.yml

@@ -23,6 +23,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.23
       - uses: actions/setup-node@v4
         with:
           node-version: 20 # Or your desired Node version

.github/workflows/playwright.yml

@@ -1,7 +1,7 @@
 name: Playwright Tests
 on:
   pull_request:
-    branches: [master]
+    branches: [master, release/*]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -18,6 +18,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.23
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
@@ -29,6 +31,19 @@ jobs:
         run: |
           export NODE_OPTIONS="--max_old_space_size=10192"
           bun run test:e2e:coverage
+      - name: Create directory of test results
+        if: ${{ !cancelled() }}
+        run: |
+          mkdir -p packaged-test-results
+          cp -r ./tests/test-results packaged-test-results/ || true
+          cp ./tests/playwright-report.json packaged-test-results/ || true
+      - name: Upload directory of test results artifact
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results
+          path: packaged-test-results/
+          retention-days: 5
       - name: create the coverage report
         run: |
           bun nyc report --reporter=lcov --reporter=text

.gitignore

@@ -60,3 +60,6 @@ tests/playwright-report/
 /playwright/.cache/
 
 **/.claude/settings.local.json
+
+# Backup files
+*~

.netlify/build-deploy-preview.sh

@@ -19,7 +19,7 @@ echo 'Web application built and copied'
 
 # Build && Move Docusaurus Output (for the docs themselves)
 cd platform/docs
-yarn install
+yarn install --frozen-lockfile
 yarn run build
 cd ../..
 mkdir -p ./.netlify/www/docs

.netlify/package.json

@@ -10,6 +10,6 @@
     "deploy": "netlify deploy --prod --dir ./../platform/app/dist"
   },
   "devDependencies": {
-    "netlify-cli": "^2.21.0"
+    "netlify-cli": "2.21.0"
   }
 }

.vscode/settings.json

@@ -82,6 +82,7 @@
     "Reslices",
     "roadmap",
     "ROADMAPS",
+    "rtstruct",
     "Segmentations",
     "semibold",
     "sitk",

.webpack/webpack.base.js

@@ -201,8 +201,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
         '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
         '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
         '@state': path.resolve(__dirname, '../platform/app/src/state'),
-        'dicom-microscopy-viewer':
-          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
       },
       // Which directories to search when resolving modules
       modules: [

Dockerfile

@@ -49,8 +49,8 @@ RUN apt-get update && apt-get install -y build-essential python3
 
 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
-RUN npm install -g bun
-# RUN npm install -g lerna@7.4.2
+RUN npm install -g bun@1.2.23
+RUN npm install -g lerna@7.4.2
 ENV PATH=/usr/src/app/node_modules/.bin:$PATH
 
 # Do an initial install and then a final install
@@ -60,6 +60,7 @@ COPY --parents ./addOns/package.json ./addOns/*/*/package.json ./extensions/*/pa
 
 RUN bun pm cache rm
 RUN bun install
+RUN bun add ajv@8.12.0
 # Copy the local directory
 COPY --link --exclude=yarn.lock --exclude=package.json --exclude=Dockerfile . .
 
@@ -98,7 +99,7 @@ COPY --from=builder /usr/src/app/platform/app/dist/dicom-microscopy-viewer /usr/
 # In entrypoint.sh, app-config.js might be overwritten, so chmod it to be writeable.
 # The nginx user cannot chmod it, so change to root.
 USER root
-RUN chown -R nginx:nginx /usr/share/nginx/html
+RUN chown -R nginx:nginx /usr/share/nginx/html && chmod -R 777 /usr/share/nginx/html
 USER nginx
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -76,7 +76,7 @@ contributions of individuals, research groups, and commercial organizations.
 After more than 8-years of integrating with many companies and organizations,
 The OHIF Viewer has been rebuilt from the ground up to better address the
 varying workflow and configuration needs of its many users. All of the Viewer's
-core features are built using it's own extension system. The same extensibility
+core features are built using its own extension system. The same extensibility
 that allows us to offer:
 
 - 2D and 3D medical image viewing
@@ -147,7 +147,14 @@ Here is a schematic representation of our development workflow:
 3. Navigate to the cloned project's directory
 4. Add this repo as a `remote` named `upstream`
    - `git remote add upstream https://github.com/OHIF/Viewers.git`
-5. `yarn install` to restore dependencies and link projects
+5. `yarn install --frozen-lockfile` to restore dependencies and link projects
+
+:::danger
+In general run `yarn install` with the `--frozen-lockfile` flag to help avoid
+supply chain attacks by enforcing reproducible dependencies. That is, if the
+`yarn.lock` file is clean and does NOT reference compromised packages, then
+no compromised packages should land on your machine by using this flag.
+:::
 
 #### To Develop
 
@@ -158,7 +165,7 @@ _From this repository's root directory:_
 yarn config set workspaces-experimental true
 
 # Restore dependencies
-yarn install
+yarn install --frozen-lockfile
 ```
 
 ## Commands

addOns/externals/devDependencies/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@externals/devDependencies",
   "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "license": "MIT",
   "private": true,
   "engines": {
@@ -9,87 +9,85 @@
     "yarn": ">=1.19.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
+    "@babel/runtime": "7.28.2",
     "@kitware/vtk.js": "32.12.0",
-    "clsx": "^2.1.1",
-    "core-js": "^3.2.1",
-    "moment": "^2.30.1"
+    "clsx": "2.1.1",
+    "core-js": "3.45.1",
+    "moment": "2.30.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@rsbuild/core": "^1.3.16",
-    "@rsbuild/plugin-node-polyfill": "^1.3.0",
-    "@rsbuild/plugin-react": "^1.3.1",
-    "@svgr/webpack": "^8.1.0",
-    "@swc/helpers": "^0.5.15",
-    "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "autoprefixer": "^10.4.4",
-    "babel-eslint": "9.x",
-    "babel-loader": "^8.2.4",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "cross-env": "^5.2.0",
-    "css-loader": "^6.8.1",
-    "dotenv": "^8.1.0",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^7.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-tsdoc": "^0.2.11",
-    "eslint-webpack-plugin": "^2.5.3",
-    "execa": "^8.0.1",
-    "extract-css-chunks-webpack-plugin": "^4.5.4",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.1.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-junit": "^6.4.0",
-    "lerna": "^7.2.0",
-    "lint-staged": "^9.0.2",
-    "mini-css-extract-plugin": "^2.1.0",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.5",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-env": "^7.4.3",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "react-refresh": "^0.14.2",
-    "semver": "^7.5.1",
-    "serve": "^14.2.4",
-    "shader-loader": "^1.3.1",
-    "shx": "^0.3.3",
-    "source-map-loader": "^4.0.1",
-    "style-loader": "^1.0.0",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^7.1.3",
-    "terser-webpack-plugin": "^5.1.4",
+    "@babel/eslint-parser": "7.28.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
+    "@rsbuild/core": "1.5.1",
+    "@rsbuild/plugin-node-polyfill": "1.4.2",
+    "@rsbuild/plugin-react": "1.4.0",
+    "@svgr/webpack": "8.1.0",
+    "@swc/helpers": "0.5.17",
+    "@types/jest": "27.5.2",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
+    "autoprefixer": "10.4.21",
+    "babel-loader": "8.4.1",
+    "babel-plugin-module-resolver": "5.0.2",
+    "clean-webpack-plugin": "3.0.0",
+    "copy-webpack-plugin": "9.1.0",
+    "cross-env": "7.0.3",
+    "css-loader": "6.11.0",
+    "dotenv": "8.6.0",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "7.2.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-cypress": "2.15.2",
+    "eslint-plugin-flowtype": "7.0.0",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "5.5.1",
+    "eslint-plugin-promise": "5.2.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-tsdoc": "0.2.17",
+    "eslint-webpack-plugin": "2.7.0",
+    "execa": "8.0.1",
+    "extract-css-chunks-webpack-plugin": "4.10.0",
+    "html-webpack-plugin": "5.6.3",
+    "husky": "3.1.0",
+    "jest": "29.7.0",
+    "jest-canvas-mock": "2.5.2",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-junit": "6.4.0",
+    "lerna": "7.4.2",
+    "lint-staged": "9.5.0",
+    "mini-css-extract-plugin": "2.9.2",
+    "optimize-css-assets-webpack-plugin": "6.0.1",
+    "postcss": "8.5.6",
+    "postcss-import": "14.1.0",
+    "postcss-loader": "6.2.1",
+    "postcss-preset-env": "7.8.3",
+    "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "0.6.9",
+    "react-refresh": "0.14.2",
+    "semver": "7.7.2",
+    "serve": "14.2.4",
+    "shader-loader": "1.3.1",
+    "shx": "0.3.4",
+    "source-map-loader": "4.0.2",
+    "style-loader": "1.3.0",
+    "terser-webpack-plugin": "5.3.14",
     "typescript": "5.5.4",
     "unused-webpack-plugin": "2.4.0",
-    "webpack": "5.94.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "4.7.3",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3",
-    "workbox-webpack-plugin": "^6.1.5",
-    "worker-loader": "^3.0.8"
+    "webpack": "5.95.0",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.2.2",
+    "webpack-hot-middleware": "2.26.1",
+    "webpack-merge": "5.10.0",
+    "workbox-webpack-plugin": "6.6.1",
+    "worker-loader": "3.0.8"
   },
   "scripts": {
     "build": "Included as direct dependency"

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

@@ -1,9 +1,9 @@
 {
   "name": "@externals/dicom-microscopy-viewer",
   "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "license": "MIT",
   "dependencies": {
-    "dicom-microscopy-viewer": "^0.46.1"
+    "dicom-microscopy-viewer": "0.48.6"
   }
 }

addOns/package.json

@@ -21,31 +21,30 @@
     "preinstall": "cd .. && node preinstall.js"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.16.7",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-env": "7.24.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.13.0"
+    "@babel/core": "7.28.0",
+    "@babel/plugin-transform-class-properties": "7.27.1",
+    "@babel/plugin-transform-object-rest-spread": "7.28.0",
+    "@babel/plugin-transform-private-methods": "7.27.1",
+    "@babel/plugin-transform-private-property-in-object": "7.27.1",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-arrow-functions": "7.27.1",
+    "@babel/plugin-transform-regenerator": "7.28.1",
+    "@babel/plugin-transform-runtime": "7.28.0",
+    "@babel/plugin-transform-typescript": "7.28.0",
+    "@babel/preset-env": "7.28.0",
+    "@babel/preset-react": "7.27.1",
+    "@babel/preset-typescript": "7.27.1"
   },
   "resolutions": {
-    "**/@babel/runtime": "^7.20.13",
+    "**/@babel/runtime": "7.28.2",
     "commander": "8.3.0",
-    "dcmjs": "0.38.0",
+    "dcmjs": "0.43.1",
     "dicomweb-client": ">=0.10.4",
-    "nth-check": "^2.1.1",
-    "trim-newlines": "^5.0.0",
-    "glob-parent": "^6.0.2",
-    "trim": "^1.0.0",
-    "package-json": "^8.1.0",
-    "typescript": "5.5.4",
-    "sharp": "^0.32.6"
+    "nth-check": "2.1.1",
+    "trim-newlines": "5.0.0",
+    "glob-parent": "6.0.2",
+    "trim": "1.0.1",
+    "package-json": "8.1.1",
+    "typescript": "5.5.4"
   }
 }

babel.config.js

@@ -3,10 +3,10 @@ module.exports = {
   babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
   presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-transform-class-properties', { loose: true }],
     '@babel/plugin-transform-typescript',
-    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+    ['@babel/plugin-transform-private-methods', { loose: true }],
     '@babel/plugin-transform-class-static-block',
   ],
   env: {
@@ -18,6 +18,8 @@ module.exports = {
           {
             modules: 'commonjs',
             debug: false,
+            targets: { node: 'current' },
+            bugfixes: true,
           },
         ],
         '@babel/preset-react',
@@ -25,13 +27,15 @@ module.exports = {
       ],
       plugins: [
         'babel-plugin-istanbul',
-        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-transform-object-rest-spread',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-regenerator',
         '@babel/transform-destructuring',
         '@babel/plugin-transform-runtime',
         '@babel/plugin-transform-typescript',
         '@babel/plugin-transform-class-static-block',
+        '@babel/plugin-transform-for-of',
+        ['babel-plugin-transform-import-meta', { module: 'ES6' }],
       ],
     },
     production: {

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+frozenLockfile = true

bunfig.update-lockfile.toml

@@ -0,0 +1,2 @@
+[install]
+frozenLockfile = false

commit.txt

@@ -1 +1 @@
-d6d3fa7ef47cc56ad5c9d0e577023358a0c26381
+35bfc9b0ccfea25a61bebf8e252284db7c40e602

diff.txt

@@ -0,0 +1,118 @@
+diff --git a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
+index 6c1e4f8f6..56dac15b5 100644
+--- a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
++++ b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
+@@ -156,65 +156,65 @@ function ViewportOrientationMenu({
+       >
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('axial')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'axial' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Axial</span>
++          </div>
++          <div className="flex-1 text-left">Axial</div>
+         </Button>
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('sagittal')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'sagittal' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Sagittal</span>
++          </div>
++          <div className="flex-1 text-left">Sagittal</div>
+         </Button>
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('coronal')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'coronal' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Coronal</span>
++          </div>
++          <div className="flex-1 text-left">Coronal</div>
+         </Button>
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('acquisition')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'acquisition' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Acquisition</span>
++          </div>
++          <div className="flex-1 text-left">Acquisition</div>
+         </Button>
+         {/* Divider */}
+-        <div className="my-2 border-t border-white/20" />
++        <div className="mx-1 my-2 border-t border-white/20" />
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('reformat')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'reformat' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Reformat</span>
++          </div>
++          <div className="flex-1 text-left">Reformat</div>
+         </Button>
+       </PopoverContent>
+     </Popover>
+diff --git a/platform/ui-next/src/components/Icons/Sources/Checked.tsx b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
+index 83c8fc57e..c88b75e0d 100644
+--- a/platform/ui-next/src/components/Icons/Sources/Checked.tsx
++++ b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
+@@ -4,14 +4,14 @@ import type { IconProps } from '../types';
+ export const Checked = (props: IconProps) => (
+   <svg
+     {...props}
+-    width="24"
++    width="20"
+     height="24"
+-    viewBox="0 0 24 24"
++    viewBox="0 0 20 24"
+     fill="none"
+     xmlns="http://www.w3.org/2000/svg"
+   >
+     <path
+-      d="M16 9L11.3333 15L8 12.4737"
++      d="M14 9L9.3333 15L6 12.4737"
+       stroke="currentColor"
+       strokeWidth="1.5"
+       strokeLinecap="round"

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

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-transform-class-properties'],
   env: {
     test: {
       presets: [
@@ -15,7 +15,7 @@ module.exports = {
         '@babel/preset-react',
       ],
       plugins: [
-        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-transform-object-rest-spread',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-regenerator',
         '@babel/plugin-transform-runtime',

extensions/cornerstone-dicom-pmap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "description": "DICOM Parametric Map read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -33,22 +33,22 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.59",
-    "@ohif/extension-cornerstone": "3.11.0-beta.59",
-    "@ohif/extension-default": "3.11.0-beta.59",
-    "@ohif/i18n": "3.11.0-beta.59",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^12.2.2",
-    "react-router": "^6.8.1",
-    "react-router-dom": "^6.8.1"
+    "@ohif/core": "3.12.0-beta.78",
+    "@ohif/extension-cornerstone": "3.12.0-beta.78",
+    "@ohif/extension-default": "3.12.0-beta.78",
+    "@ohif/i18n": "3.12.0-beta.78",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-i18next": "12.3.1",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.15.6",
-    "@cornerstonejs/core": "^3.15.6",
+    "@babel/runtime": "7.28.2",
+    "@cornerstonejs/adapters": "4.5.20",
+    "@cornerstonejs/core": "4.5.20",
     "@kitware/vtk.js": "32.12.0",
-    "react-color": "^2.19.3"
+    "react-color": "2.19.3"
   }
 }

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

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-transform-class-properties'],
   env: {
     test: {
       presets: [
@@ -15,7 +15,7 @@ module.exports = {
         '@babel/preset-react',
       ],
       plugins: [
-        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-transform-object-rest-spread',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-regenerator',
         '@babel/plugin-transform-runtime',

extensions/cornerstone-dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "description": "DICOM RT read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -33,19 +33,19 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.59",
-    "@ohif/extension-cornerstone": "3.11.0-beta.59",
-    "@ohif/extension-default": "3.11.0-beta.59",
-    "@ohif/i18n": "3.11.0-beta.59",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^10.11.0",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1"
+    "@ohif/core": "3.12.0-beta.78",
+    "@ohif/extension-cornerstone": "3.12.0-beta.78",
+    "@ohif/extension-default": "3.12.0-beta.78",
+    "@ohif/i18n": "3.12.0-beta.78",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-i18next": "12.3.1",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "react-color": "^2.19.3"
+    "@babel/runtime": "7.28.2",
+    "react-color": "2.19.3"
   }
 }

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

@@ -4,7 +4,11 @@ import i18n from '@ohif/i18n';
 import { SOPClassHandlerId } from './id';
 import loadRTStruct from './loadRTStruct';
 
-const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];
+const { sopClassDictionary } = utils;
+
+const sopClassUids = [sopClassDictionary.RTStructureSetStorage];
+
+const cachedRTStructsSEG = new Set<string>();
 
 const loadPromises = {};
 
@@ -31,7 +35,7 @@ function _getDisplaySetsFromSeries(
   const displaySet = {
     Modality: 'RTSTRUCT',
     loading: false,
-    isReconstructable: false, // by default for now since it is a volumetric SEG currently
+    isReconstructable: false,
     displaySetInstanceUID: utils.guid(),
     SeriesDescription,
     SeriesNumber,
@@ -87,6 +91,7 @@ function _getDisplaySetsFromSeries(
         const addedDisplaySet = displaySetsAdded[0];
         if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
           displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
           unsubscribe();
         }
       }
@@ -94,6 +99,7 @@ function _getDisplaySetsFromSeries(
   } else {
     const referencedDisplaySet = referencedDisplaySets[0];
     displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
+    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
   }
 
   displaySet.load = ({ headers, createSegmentation = true }) =>
@@ -111,39 +117,45 @@ function _load(
 ) {
   const { SOPInstanceUID } = rtDisplaySet;
   const { segmentationService } = servicesManager.services;
+
   if (
     (rtDisplaySet.loading || rtDisplaySet.isLoaded) &&
     loadPromises[SOPInstanceUID] &&
-    _segmentationExistsInCache(rtDisplaySet, segmentationService)
+    cachedRTStructsSEG.has(rtDisplaySet.displaySetInstanceUID)
   ) {
     return loadPromises[SOPInstanceUID];
   }
 
   rtDisplaySet.loading = true;
 
+  const { unsubscribe } = segmentationService.subscribe(
+    segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
+    (evt: { rtDisplaySet: { displaySetInstanceUID: string } }) => {
+      if (evt.rtDisplaySet?.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
+        cachedRTStructsSEG.add(rtDisplaySet.displaySetInstanceUID);
+        unsubscribe();
+      }
+    }
+  );
+
   // 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 (!rtDisplaySet.structureSet) {
-      const structureSet = await loadRTStruct(extensionManager, rtDisplaySet, headers);
+  loadPromises[SOPInstanceUID] = new Promise<void>(async (resolve, reject) => {
+    try {
+      if (!rtDisplaySet.structureSet) {
+        const structureSet = await loadRTStruct(extensionManager, rtDisplaySet, headers);
+        rtDisplaySet.structureSet = structureSet;
+      }
 
-      rtDisplaySet.structureSet = structureSet;
-    }
+      if (createSegmentation) {
+        await segmentationService.createSegmentationForRTDisplaySet(rtDisplaySet);
+      }
 
-    if (createSegmentation) {
-      segmentationService
-        .createSegmentationForRTDisplaySet(rtDisplaySet)
-        .then(() => {
-          rtDisplaySet.loading = false;
-          resolve();
-        })
-        .catch(error => {
-          rtDisplaySet.loading = false;
-          reject(error);
-        });
-    } else {
-      rtDisplaySet.loading = false;
       resolve();
+    } catch (error) {
+      reject(error);
+    } finally {
+      rtDisplaySet.loading = false;
     }
   });
 
@@ -185,11 +197,6 @@ function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
   return ReferencedSeriesSequence;
 }
 
-function _segmentationExistsInCache() {
-  // Todo: fix this
-  return false;
-}
-
 function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
   const { servicesManager, extensionManager } = params;
 

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

@@ -2,9 +2,34 @@ import dcmjs from 'dcmjs';
 const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
 const dicomlab2RGB = dcmjs.data.Colors.dicomlab2RGB;
 
-async function checkAndLoadContourData(instance, datasource) {
+/**
+ * Checks and loads contour data for RT Structure Set, handling both inline and bulk data URIs.
+ * Processes ROIContourSequence to extract contour data and resolve any bulk data references.
+ *
+ * @async
+ * @function checkAndLoadContourData
+ * @param {Object} params - Parameters object
+ * @param {Object} params.instance - Initial RT Structure instance
+ * @param {Object} params.dataSource - Data source for retrieving bulk data
+ * @param {Object} params.extensionManager - OHIF extension manager
+ * @param {Object} params.rtStructDisplaySet - RT Structure display set
+ * @param {Object} params.headers - HTTP headers for requests
+ * @returns {Promise<Object>} Promise that resolves to the processed RT Structure instance with loaded contour data
+ * @throws {Promise<string>} Rejects with error message if instance is invalid or data retrieval fails
+ */
+async function checkAndLoadContourData({
+  instance: initialInstance,
+  dataSource,
+  extensionManager,
+  rtStructDisplaySet,
+  headers,
+}) {
+  let instance = initialInstance;
   if (!instance || !instance.ROIContourSequence) {
-    return Promise.reject('Invalid instance object or ROIContourSequence');
+    instance = await getRTStructInstance({ extensionManager, rtStructDisplaySet, headers });
+    if (!instance || !instance.ROIContourSequence) {
+      return Promise.reject('Invalid instance object or ROIContourSequence');
+    }
   }
 
   const promisesMap = new Map();
@@ -30,11 +55,11 @@ async function checkAndLoadContourData(instance, datasource) {
       } 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({
+        const bulkDataPromise = dataSource.retrieve.bulkDataURI({
           BulkDataURI: bulkDataURI,
           StudyInstanceUID: instance.StudyInstanceUID,
           SeriesInstanceUID: instance.SeriesInstanceUID,
@@ -87,35 +112,74 @@ async function checkAndLoadContourData(instance, datasource) {
       console.error(error);
     }
   });
+
+  return instance;
 }
 
-export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
+/**
+ * Retrieves and parses RT Structure Set instance from DICOM data.
+ * Uses the cornerstone utility module to load DICOM data and converts it to a naturalized dataset.
+ *
+ * @async
+ * @function getRTStructInstance
+ * @param {Object} params - Parameters object
+ * @param {Object} params.extensionManager - OHIF extension manager
+ * @param {Object} params.rtStructDisplaySet - RT Structure display set
+ * @param {Object} params.headers - HTTP headers for requests
+ * @returns {Promise<Object>} Promise that resolves to the parsed RT Structure dataset
+ */
+const getRTStructInstance = async ({ extensionManager, rtStructDisplaySet, headers }) => {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.common'
   );
+  const { dicomLoaderService } = utilityModule.exports;
+  const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
+    rtStructDisplaySet,
+    null,
+    headers
+  );
+  const dicomData = DicomMessage.readFile(segArrayBuffer);
+  const rtStructDataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
+  rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+  return rtStructDataset;
+};
+
+/**
+ * Main function to load and process RT Structure Set data.
+ * Creates a structure set object with ROI contours, metadata, and visualization properties.
+ * Handles both bulk data URI and inline contour data scenarios.
+ *
+ * @async
+ * @function loadRTStruct
+ * @param {Object} extensionManager - OHIF extension manager
+ * @param {Object} rtStructDisplaySet - RT Structure display set to process
+ * @param {Object} headers - HTTP headers for data requests
+ * @returns {Promise<Object>} Promise that resolves to a structure set object containing:
+ *   - StructureSetLabel: Label of the structure set
+ *   - SeriesInstanceUID: Series instance UID
+ *   - ROIContours: Array of ROI contour data with points and metadata
+ *   - visible: Visibility state
+ *   - ReferencedSOPInstanceUIDsSet: Set of referenced SOP instance UIDs
+ */
+export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
   const dataSource = extensionManager.getActiveDataSource()[0];
   const { bulkDataURI } = dataSource.getConfig?.() || {};
 
-  const { dicomLoaderService } = utilityModule.exports;
-
   // Set here is loading is asynchronous.
   // If this function throws its set back to false.
   rtStructDisplaySet.isLoaded = true;
   let instance = rtStructDisplaySet.instance;
 
   if (!bulkDataURI || !bulkDataURI.enabled) {
-    const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
-      rtStructDisplaySet,
-      null,
-      headers
-    );
-
-    const dicomData = DicomMessage.readFile(segArrayBuffer);
-    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
-    rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
-    instance = rtStructDataset;
+    instance = await getRTStructInstance({ extensionManager, rtStructDisplaySet, headers });
   } else {
-    await checkAndLoadContourData(instance, dataSource);
+    instance = await checkAndLoadContourData({
+      instance,
+      dataSource,
+      extensionManager,
+      rtStructDisplaySet,
+      headers,
+    });
   }
 
   const { StructureSetROISequence, ROIContourSequence, RTROIObservationsSequence } = instance;
@@ -132,21 +196,16 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
   for (let i = 0; i < ROIContourSequence.length; i++) {
     const ROIContour = ROIContourSequence[i];
     const { ContourSequence } = ROIContour;
-
     if (!ContourSequence) {
       continue;
     }
 
-    const isSupported = false;
-
     const ContourSequenceArray = _toArray(ContourSequence);
 
     const contourPoints = [];
-    for (let c = 0; c < ContourSequenceArray.length; c++) {
+    for (const ContourSequenceItem of ContourSequenceArray) {
       const { ContourData, NumberOfContourPoints, ContourGeometricType, ContourImageSequence } =
-        ContourSequenceArray[c];
-
-      let isSupported = false;
+        ContourSequenceItem;
 
       const points = [];
       for (let p = 0; p < NumberOfContourPoints * 3; p += 3) {
@@ -157,22 +216,18 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
         });
       }
 
-      switch (ContourGeometricType) {
-        case 'CLOSED_PLANAR':
-        case 'OPEN_PLANAR':
-        case 'POINT':
-          isSupported = true;
-
-          break;
-        default:
-          continue;
-      }
+      const supportedContourTypesMap = new Map([
+        ['CLOSED_PLANAR', false],
+        ['OPEN_NONPLANAR', false],
+        ['OPEN_PLANAR', false],
+        ['POINT', true],
+      ]);
 
       contourPoints.push({
         numberOfPoints: NumberOfContourPoints,
         points,
         type: ContourGeometricType,
-        isSupported,
+        isSupported: supportedContourTypesMap.get(ContourGeometricType) ?? false,
       });
 
       if (ContourImageSequence?.ReferencedSOPInstanceUID) {
@@ -187,20 +242,30 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
       StructureSetROISequence,
       RTROIObservationsSequence,
       ROIContour,
-      contourPoints,
-      isSupported
+      contourPoints
     );
   }
   return structureSet;
 }
 
+/**
+ * Sets metadata for ROI contour data and adds it to the structure set.
+ * Extracts ROI information from StructureSetROISequence and RTROIObservationsSequence,
+ * then creates a complete ROI contour data object with visualization properties.
+ *
+ * @function _setROIContourMetadata
+ * @param {Object} structureSet - The structure set object to add ROI contour to
+ * @param {Array} StructureSetROISequence - Array of structure set ROI definitions
+ * @param {Array} RTROIObservationsSequence - Array of RT ROI observations
+ * @param {Object} ROIContour - ROI contour object containing contour data
+ * @param {Array} contourPoints - Array of processed contour points
+ */
 function _setROIContourMetadata(
   structureSet,
   StructureSetROISequence,
   RTROIObservationsSequence,
   ROIContour,
-  contourPoints,
-  isSupported
+  contourPoints
 ) {
   const StructureSetROI = StructureSetROISequence.find(
     structureSetROI => structureSetROI.ROINumber === ROIContour.ReferencedROINumber
@@ -211,9 +276,9 @@ function _setROIContourMetadata(
     ROIName: StructureSetROI.ROIName,
     ROIGenerationAlgorithm: StructureSetROI.ROIGenerationAlgorithm,
     ROIDescription: StructureSetROI.ROIDescription,
-    isSupported,
     contourPoints,
     visible: true,
+    colorArray: [],
   };
 
   _setROIContourDataColor(ROIContour, ROIContourData);
@@ -230,6 +295,14 @@ function _setROIContourMetadata(
   structureSet.ROIContours.push(ROIContourData);
 }
 
+/**
+ * Sets the display color for ROI contour data.
+ * Uses ROIDisplayColor if available, otherwise converts RecommendedDisplayCIELabValue to RGB.
+ *
+ * @function _setROIContourDataColor
+ * @param {Object} ROIContour - ROI contour object containing color information
+ * @param {Object} ROIContourData - ROI contour data object to set color on
+ */
 function _setROIContourDataColor(ROIContour, ROIContourData) {
   let { ROIDisplayColor, RecommendedDisplayCIELabValue } = ROIContour;
 
@@ -243,6 +316,15 @@ function _setROIContourDataColor(ROIContour, ROIContourData) {
   }
 }
 
+/**
+ * Sets RT ROI observations metadata for ROI contour data.
+ * Finds matching RTROIObservations by ROINumber and adds observation details to contour data.
+ *
+ * @function _setROIContourRTROIObservations
+ * @param {Object} ROIContourData - ROI contour data object to add observations to
+ * @param {Array} RTROIObservationsSequence - Array of RT ROI observations
+ * @param {number} ROINumber - ROI number to match observations
+ */
 function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequence, ROINumber) {
   const RTROIObservations = RTROIObservationsSequence.find(
     RTROIObservations => RTROIObservations.ReferencedROINumber === ROINumber
@@ -262,6 +344,14 @@ function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequen
   }
 }
 
+/**
+ * Converts a single object or array to an array.
+ * Utility function to ensure consistent array handling for DICOM sequences.
+ *
+ * @function _toArray
+ * @param {*} objOrArray - Object or array to convert
+ * @returns {Array} Array containing the input (if already array) or wrapped in array
+ */
 function _toArray(objOrArray) {
   return Array.isArray(objOrArray) ? objOrArray : [objOrArray];
 }

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

@@ -41,7 +41,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
   const [{ viewports, activeViewportId }, viewportGridService] = useViewportGrid();
 
   // States
-  const selectedSegmentObjectIndex: number = 0;
   const { setPositionPresentation } = usePositionPresentationStore();
   const [rtIsLoading, setRtIsLoading] = useState(!rtDisplaySet.isLoaded);
   const [processingProgress, setProcessingProgress] = useState({
@@ -52,6 +51,21 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
   const referencedDisplaySetRef = useRef(null);
 
   const referencedDisplaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
+  // If the referencedDisplaySetInstanceUID is not found, it means the RTStruct series is being
+  // launched without its corresponding referenced display set (e.g., the RTStruct series is launched using
+  // series launch /mode?StudyInstanceUIDs=&SeriesInstanceUID).
+  // In such cases, we attempt to handle this scenario gracefully by
+  // invoking a custom handler. Ideally, if a user tries to launch a series that isn't viewable,
+  // (eg.: we can prompt them with an explanation and provide a link to the full study).
+  if (!referencedDisplaySetInstanceUID) {
+    const missingReferenceDisplaySetHandler = customizationService.getCustomization(
+      'missingReferenceDisplaySetHandler'
+    );
+    const { handled } = missingReferenceDisplaySetHandler();
+    if (handled) {
+      return;
+    }
+  }
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(
     referencedDisplaySetInstanceUID
   );
@@ -169,7 +183,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
         {...props}
         displaySets={[referencedDisplaySet, rtDisplaySet]}
         viewportOptions={{
-          viewportType: 'stack',
+          viewportType: viewportOptions.viewportType,
           toolGroupId: toolGroupId,
           orientation: viewportOptions.orientation,
           viewportId: viewportOptions.viewportId,

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

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-transform-class-properties'],
   env: {
     test: {
       presets: [
@@ -15,7 +15,7 @@ module.exports = {
         '@babel/preset-react',
       ],
       plugins: [
-        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-transform-object-rest-spread',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-regenerator',
         '@babel/plugin-transform-runtime',

extensions/cornerstone-dicom-seg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "description": "DICOM SEG read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -33,22 +33,22 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.59",
-    "@ohif/extension-cornerstone": "3.11.0-beta.59",
-    "@ohif/extension-default": "3.11.0-beta.59",
-    "@ohif/i18n": "3.11.0-beta.59",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^12.2.2",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1"
+    "@ohif/core": "3.12.0-beta.78",
+    "@ohif/extension-cornerstone": "3.12.0-beta.78",
+    "@ohif/extension-default": "3.12.0-beta.78",
+    "@ohif/i18n": "3.12.0-beta.78",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-i18next": "12.3.1",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.15.6",
-    "@cornerstonejs/core": "^3.15.6",
+    "@babel/runtime": "7.28.2",
+    "@cornerstonejs/adapters": "4.5.20",
+    "@cornerstonejs/core": "4.5.20",
     "@kitware/vtk.js": "32.12.0",
-    "react-color": "^2.19.3"
+    "react-color": "2.19.3"
   }
 }

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

@@ -3,7 +3,7 @@ import { classes, Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
 import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
-import { createReportDialogPrompt } from '@ohif/extension-default';
+import { createReportDialogPrompt, useUIStateStore } from '@ohif/extension-default';
 import { DicomMetadataStore } from '@ohif/core';
 
 import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';
@@ -37,7 +37,7 @@ const commandsModule = ({
   servicesManager,
   extensionManager,
 }: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
-  const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
+  const { segmentationService, displaySetService, viewportGridService } =
     servicesManager.services as AppTypes.Services;
 
   const actions = {
@@ -307,6 +307,17 @@ const commandsModule = ({
         console.warn(e);
       }
     },
+    toggleActiveSegmentationUtility: ({ itemId: buttonId }) => {
+      const { uiState, setUIState } = useUIStateStore.getState();
+      const isButtonActive = uiState['activeSegmentationUtility'] === buttonId;
+      console.log('toggleActiveSegmentationUtility', isButtonActive, buttonId);
+      // if the button is active, clear the active segmentation utility
+      if (isButtonActive) {
+        setUIState('activeSegmentationUtility', null);
+      } else {
+        setUIState('activeSegmentationUtility', buttonId);
+      }
+    },
   };
 
   const definitions = {
@@ -326,6 +337,9 @@ const commandsModule = ({
     downloadRTSS: {
       commandFn: actions.downloadRTSS,
     },
+    toggleActiveSegmentationUtility: {
+      commandFn: actions.toggleActiveSegmentationUtility,
+    },
   };
 
   return {

extensions/cornerstone-dicom-seg/src/components/LogicalContourOperationsOptions.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useRunCommand, useSystem } from '@ohif/core';
+import { useActiveViewportSegmentationRepresentations } from '@ohif/extension-cornerstone';
+import {
+  Button,
+  cn,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Switch,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from '@ohif/ui-next';
+import { Icons } from '@ohif/ui-next';
+import { contourSegmentation } from '@cornerstonejs/tools/utilities';
+import { Segment } from '@cornerstonejs/tools/types';
+
+const { LogicalOperation } = contourSegmentation;
+const options = [
+  {
+    value: 'merge',
+    logicalOperation: LogicalOperation.Union,
+    label: 'Merge',
+    icon: 'actions-combine-merge',
+    helperIcon: 'helper-combine-merge',
+  },
+  {
+    value: 'intersect',
+    logicalOperation: LogicalOperation.Intersect,
+    label: 'Intersect',
+    icon: 'actions-combine-intersect',
+    helperIcon: 'helper-combine-intersect',
+  },
+  {
+    value: 'subtract',
+    logicalOperation: LogicalOperation.Subtract,
+    label: 'Subtract',
+    icon: 'actions-combine-subtract',
+    helperIcon: 'helper-combine-subtract',
+  },
+];
+
+// Shared component for segment selection
+function SegmentSelector({
+  label,
+  value,
+  onValueChange,
+  segments,
+  placeholder = 'Select a segment',
+}: {
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  segments: Segment[];
+  placeholder?: string;
+}) {
+  return (
+    <div className="flex justify-between gap-6">
+      <div>{label}</div>
+      <Select
+        key={`select-segment-${label}`}
+        onValueChange={onValueChange}
+        value={value}
+      >
+        <SelectTrigger className="overflow-hidden">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {segments.map(segment => (
+            <SelectItem
+              key={segment.segmentIndex}
+              value={segment.segmentIndex.toString()}
+            >
+              {segment.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function LogicalContourOperationOptions() {
+  const { servicesManager } = useSystem();
+  const { segmentationService } = servicesManager.services;
+  const { segmentationsWithRepresentations } = useActiveViewportSegmentationRepresentations();
+
+  const activeRepresentation = segmentationsWithRepresentations?.find(
+    ({ representation }) => representation?.active
+  );
+
+  const segments = activeRepresentation
+    ? Object.values(activeRepresentation.segmentation.segments)
+    : [];
+
+  // Calculate the next available segment index
+  const nextSegmentIndex = activeRepresentation
+    ? segmentationService.getNextAvailableSegmentIndex(
+        activeRepresentation.segmentation.segmentationId
+      )
+    : 1;
+
+  const activeSegment = segments.find(segment => segment.active);
+
+  const activeSegmentIndex = activeSegment?.segmentIndex || 0;
+
+  const [operation, setOperation] = useState(options[0]);
+  const [segmentA, setSegmentA] = useState<string>(activeSegmentIndex?.toString() || '');
+  const [segmentB, setSegmentB] = useState<string>('');
+  const [createNewSegment, setCreateNewSegment] = useState<boolean>(false);
+  const [newSegmentName, setNewSegmentName] = useState<string>('');
+
+  useEffect(() => {
+    setSegmentA(activeSegmentIndex?.toString() || null);
+  }, [activeSegmentIndex]);
+
+  useEffect(() => {
+    setNewSegmentName(`Segment ${nextSegmentIndex}`);
+  }, [nextSegmentIndex]);
+
+  const runCommand = useRunCommand();
+
+  const applyLogicalContourOperation = useCallback(() => {
+    let resultSegmentIndex = segmentA;
+    if (createNewSegment) {
+      resultSegmentIndex = nextSegmentIndex.toString();
+      runCommand('addSegment', {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        config: {
+          label: newSegmentName,
+          segmentIndex: nextSegmentIndex,
+        },
+      });
+    }
+    runCommand('applyLogicalContourOperation', {
+      segmentAInfo: {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        segmentIndex: parseInt(segmentA),
+      },
+      segmentBInfo: {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        segmentIndex: parseInt(segmentB),
+      },
+      resultSegmentInfo: {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        segmentIndex: parseInt(resultSegmentIndex),
+      },
+      logicalOperation: operation.logicalOperation,
+    });
+  }, [
+    activeRepresentation?.segmentation?.segmentationId,
+    createNewSegment,
+    newSegmentName,
+    nextSegmentIndex,
+    operation.logicalOperation,
+    runCommand,
+    segmentA,
+    segmentB,
+  ]);
+
+  return (
+    <div className="flex w-[245px] flex-col gap-4">
+      <div className="flex items-start justify-between">
+        <div className="flex w-auto flex-col items-center gap-2 text-base font-normal leading-none">
+          <Tabs value={operation.value}>
+            <TabsList className="inline-flex space-x-1">
+              {options.map(option => {
+                const { value, icon } = option;
+                return (
+                  <TabsTrigger
+                    value={value}
+                    key={`logical-contour-operation-${value}`}
+                    onClick={() => setOperation(option)}
+                  >
+                    <Icons.ByName name={icon}></Icons.ByName>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </Tabs>
+          <div>{operation.label}</div>
+        </div>
+        <div className="bg-primary-dark flex h-[62px] w-[88px] items-center justify-center rounded-lg">
+          <Icons.ByName name={operation.helperIcon}></Icons.ByName>
+        </div>
+      </div>
+      <SegmentSelector
+        label="A"
+        value={segmentA}
+        onValueChange={setSegmentA}
+        segments={segments}
+      />
+      <SegmentSelector
+        label="B"
+        value={segmentB}
+        onValueChange={setSegmentB}
+        segments={segments}
+      />
+      <div className="flex justify-end pl-[34px]">
+        <Button
+          className="border-primary/60 grow border"
+          variant="ghost"
+          onClick={() => {
+            applyLogicalContourOperation();
+          }}
+        >
+          {operation.label}
+        </Button>
+      </div>
+      <Separator className="bg-input mt-2 h-[1px]" />
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-start gap-2">
+          <Switch
+            id="logical-contour-operations-create-new-segment-switch"
+            onCheckedChange={setCreateNewSegment}
+          ></Switch>
+          <Label htmlFor="logical-contour-operations-create-new-segment-switch">
+            Create a new segment
+          </Label>
+        </div>
+        <div className="pl-9">
+          <Input
+            className={cn(createNewSegment ? 'visible' : 'hidden')}
+            disabled={!createNewSegment}
+            id="logical-contour-operations-create-new-segment-input"
+            type="text"
+            placeholder="New segment name"
+            value={newSegmentName}
+            onChange={e => setNewSegmentName(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LogicalContourOperationOptions;

extensions/cornerstone-dicom-seg/src/components/SimplifyContourOptions.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Button, Input, Label, Separator } from '@ohif/ui-next';
+import { useRunCommand } from '@ohif/core';
+
+function SimplifyContourOptions() {
+  const [areaThreshold, setAreaThreshold] = useState(10);
+
+  const runCommand = useRunCommand();
+
+  return (
+    <div className="flex w-auto w-[252px] flex-col gap-[8px] text-base font-normal leading-none">
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Fill contour holes</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('removeContourHoles');
+          }}
+        >
+          Fill Holes
+        </Button>
+        <Separator className="bg-input mt-[20px] h-[1px]" />
+      </div>
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Remove Small Contours</div>
+        <div className="flex items-center gap-2 self-end">
+          <Label
+            htmlFor="simplify-contour-options"
+            className="text-muted-foreground"
+          >
+            Area Threshold
+          </Label>
+          <Input
+            id="simplify-contour-options"
+            className="w-20"
+            type="number"
+            value={areaThreshold}
+            onChange={e => setAreaThreshold(Number(e.target.value))}
+          />
+        </div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('removeSmallContours', {
+              areaThreshold,
+            });
+          }}
+        >
+          Remove Small Contours
+        </Button>
+        <Separator className="bg-input mt-[20px] h-[1px]" />
+      </div>
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Create New Segment from Holes</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('convertContourHoles');
+          }}
+        >
+          Create New Segment
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default SimplifyContourOptions;

extensions/cornerstone-dicom-seg/src/components/SmoothContoursOptions.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button, Separator } from '@ohif/ui-next';
+import { useRunCommand } from '@ohif/core';
+
+function SmoothContoursOptions() {
+  const runCommand = useRunCommand();
+
+  return (
+    <div className="flex w-auto w-[245px] flex-col gap-[8px] text-base font-normal leading-none">
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Smooth all edges</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('smoothContours');
+          }}
+        >
+          Smooth Edges
+        </Button>
+        <Separator className="bg-input mt-[20px] h-[1px]" />
+      </div>
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Remove extra points</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('decimateContours');
+          }}
+        >
+          Remove Points
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default SmoothContoursOptions;

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

@@ -7,7 +7,7 @@ import { adaptersSEG, Enums } from '@cornerstonejs/adapters';
 import { SOPClassHandlerId } from './id';
 import { dicomlabToRGB } from './utils/dicomlabToRGB';
 
-const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4', '1.2.840.10008.5.1.4.1.1.66.7'];
 
 const loadPromises = {};
 
@@ -34,7 +34,7 @@ function _getDisplaySetsFromSeries(
   const displaySet = {
     Modality: 'SEG',
     loading: false,
-    isReconstructable: true, // by default for now since it is a volumetric SEG currently
+    isReconstructable: false,
     displaySetInstanceUID: utils.guid(),
     SeriesDescription,
     SeriesNumber,
@@ -91,12 +91,14 @@ function _getDisplaySetsFromSeries(
         const addedDisplaySet = displaySetsAdded[0];
         if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
           displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
           unsubscribe();
         }
       }
     );
   } else {
     displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
+    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
   }
 
   displaySet.load = async ({ headers }) =>

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

@@ -1,6 +1,32 @@
+import { useUIStateStore } from '@ohif/extension-default';
+import LogicalContourOperationsOptions from './components/LogicalContourOperationsOptions';
+import SimplifyContourOptions from './components/SimplifyContourOptions';
+import SmoothContoursOptions from './components/SmoothContoursOptions';
+
 export function getToolbarModule({ servicesManager }: withAppTypes) {
   const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
   return [
+    {
+      name: 'cornerstone.SimplifyContourOptions',
+      defaultComponent: SimplifyContourOptions,
+    },
+    {
+      name: 'cornerstone.LogicalContourOperationsOptions',
+      defaultComponent: LogicalContourOperationsOptions,
+    },
+    {
+      name: 'cornerstone.SmoothContoursOptions',
+      defaultComponent: SmoothContoursOptions,
+    },
+    {
+      name: 'cornerstone.isActiveSegmentationUtility',
+      evaluate: ({ button }) => {
+        const { uiState } = useUIStateStore.getState();
+        return {
+          isActive: uiState[`activeSegmentationUtility`] === button.id,
+        };
+      },
+    },
     {
       name: 'evaluate.cornerstone.hasSegmentation',
       evaluate: ({ viewportId }) => {
@@ -10,6 +36,30 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
         };
       },
     },
+    {
+      name: 'evaluate.cornerstone.hasSegmentationOfType',
+      evaluate: ({ viewportId, segmentationRepresentationType }) => {
+        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
+
+        if (!segmentations?.length) {
+          return {
+            disabled: true,
+            disabledText: 'No segmentations available',
+          };
+        }
+
+        if (
+          !segmentations.some(segmentation =>
+            Boolean(segmentation.type === segmentationRepresentationType)
+          )
+        ) {
+          return {
+            disabled: true,
+            disabledText: `No ${segmentationRepresentationType} segmentations available`,
+          };
+        }
+      },
+    },
     {
       name: 'evaluate.cornerstone.segmentation',
       evaluate: ({ viewportId, button, toolNames, disabledText }) => {

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

@@ -1,7 +1,14 @@
-function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
+function createSEGToolGroupAndAddTools({
+  commandsManager,
+  toolGroupService,
+  customizationService,
+  toolGroupId,
+}) {
   const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');
 
-  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+  const updatedTools = commandsManager.run('initializeSegmentLabelTool', { tools });
+
+  return toolGroupService.createToolGroupAndAddTools(toolGroupId, updatedTools);
 }
 
 export default createSEGToolGroupAndAddTools;

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

@@ -54,6 +54,21 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
   const { viewports, activeViewportId } = viewportGrid;
 
   const referencedDisplaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
+  // If the referencedDisplaySetInstanceUID is not found, it means the SEG series is being
+  // launched without its corresponding referenced display set (e.g., the SEG series is launched using
+  // series launch /mode?StudyInstanceUIDs=&SeriesInstanceUID).
+  // In such cases, we attempt to handle this scenario gracefully by
+  // invoking a custom handler. Ideally, if a user tries to launch a series that isn't viewable,
+  // (eg.: we can prompt them with an explanation and provide a link to the full study).
+  if (!referencedDisplaySetInstanceUID) {
+    const missingReferenceDisplaySetHandler = customizationService.getCustomization(
+      'missingReferenceDisplaySetHandler'
+    );
+    const { handled } = missingReferenceDisplaySetHandler();
+    if (handled) {
+      return;
+    }
+  }
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(
     referencedDisplaySetInstanceUID
   );
@@ -199,7 +214,12 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
 
     // 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({
+      commandsManager,
+      toolGroupService,
+      customizationService,
+      toolGroupId,
+    });
 
     return () => {
       // remove the segmentation representations if seg displayset changed

extensions/cornerstone-dicom-sr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "description": "OHIF extension for an SR Cornerstone Viewport",
   "author": "OHIF",
   "license": "MIT",
@@ -34,21 +34,21 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.59",
-    "@ohif/extension-cornerstone": "3.11.0-beta.59",
-    "@ohif/extension-measurement-tracking": "3.11.0-beta.59",
-    "@ohif/ui": "3.11.0-beta.59",
-    "dcmjs": "*",
-    "dicom-parser": "^1.8.9",
-    "hammerjs": "^2.0.8",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1"
+    "@ohif/core": "3.12.0-beta.78",
+    "@ohif/extension-cornerstone": "3.12.0-beta.78",
+    "@ohif/extension-measurement-tracking": "3.12.0-beta.78",
+    "@ohif/ui": "3.12.0-beta.78",
+    "dcmjs": "0.43.1",
+    "dicom-parser": "1.8.21",
+    "hammerjs": "2.0.8",
+    "prop-types": "15.8.1",
+    "react": "18.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.15.6",
-    "@cornerstonejs/core": "^3.15.6",
-    "@cornerstonejs/tools": "^3.15.6",
-    "classnames": "^2.3.2"
+    "@babel/runtime": "7.28.2",
+    "@cornerstonejs/adapters": "4.5.20",
+    "@cornerstonejs/core": "4.5.20",
+    "@cornerstonejs/tools": "4.5.20",
+    "classnames": "2.5.1"
   }
 }

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

@@ -32,12 +32,7 @@ const _generateReport = (measurementData, additionalFindingTypes, options: Optio
     additionalFindingTypes
   );
 
-  const report = MeasurementReport.generateReport(
-    filteredToolState,
-    metaData,
-    utilities.worldToImageCoords,
-    options
-  );
+  const report = MeasurementReport.generateReport(filteredToolState, metaData, options);
 
   const { dataset } = report;
 
@@ -54,7 +49,7 @@ const _generateReport = (measurementData, additionalFindingTypes, options: Optio
 
 const commandsModule = (props: withAppTypes) => {
   const { servicesManager, extensionManager, commandsManager } = props;
-  const { customizationService, viewportGridService, displaySetService } = servicesManager.services;
+  const { customizationService } = servicesManager.services;
 
   const actions = {
     changeColorMeasurement: ({ uid }) => {
@@ -129,6 +124,9 @@ const commandsModule = (props: withAppTypes) => {
           console.log('naturalizedReport missing imaging content', naturalizedReport);
           throw new Error('Invalid report, no content');
         }
+        if (!naturalizedReport.SOPClassUID) {
+          throw new Error('No sop class uid');
+        }
 
         const onBeforeDicomStore = customizationService.getCustomization('onBeforeDicomStore');
 

extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx

@@ -63,18 +63,12 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
 
   const updateViewport = useCallback(
     newMeasurementSelected => {
-      const { StudyInstanceUID, displaySetInstanceUID, sopClassUids } = srDisplaySet;
+      const { StudyInstanceUID, displaySetInstanceUID } = srDisplaySet;
 
       if (!StudyInstanceUID || !displaySetInstanceUID) {
         return;
       }
 
-      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.');
-      }
-
       _getViewportReferencedDisplaySetData(
         srDisplaySet,
         newMeasurementSelected,
@@ -92,7 +86,7 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
         const { presentationIds } = viewportOptions;
         const measurement = srDisplaySet.measurements[newMeasurementSelected];
         setPositionPresentation(presentationIds.positionPresentationId, {
-          viewReference: {
+          viewReference: measurement.viewReference || {
             referencedImageId: measurement.imageId,
           },
         });
@@ -258,6 +252,9 @@ async function _getViewportReferencedDisplaySetData(
   }
 
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+  if (!referencedDisplaySet?.images) {
+    return { referencedDisplaySetMetadata: null, referencedDisplaySet: null };
+  }
 
   const image0 = referencedDisplaySet.images[0];
   const referencedDisplaySetMetadata = {

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

@@ -15,10 +15,14 @@ import { CodeNameCodeSequenceValues, CodingSchemeDesignators } from './enums';
 
 const { sopClassDictionary } = utils;
 const { CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION } = CSExtensionEnums;
-const { ImageSet, MetadataProvider: metadataProvider } = classes;
-const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
+const { MetadataProvider: metadataProvider } = classes;
+const {
+  TEXT_ANNOTATION_POSITION,
+  COMMENT_CODE,
+  CodeScheme: Cornerstone3DCodeScheme,
+} = adaptersSR.Cornerstone3D;
 
-type InstanceMetadata = Types.InstanceMetadata;
+type InstanceMetadata = OhifTypes.InstanceMetadata;
 
 /**
  * TODO
@@ -31,6 +35,7 @@ const sopClassUids = [
   sopClassDictionary.BasicTextSR,
   sopClassDictionary.EnhancedSR,
   sopClassDictionary.ComprehensiveSR,
+  sopClassDictionary.Comprehensive3DSR,
 ];
 
 const validateSameStudyUID = (uid: string, instances): void => {
@@ -49,7 +54,7 @@ const validateSameStudyUID = (uid: string, instances): void => {
  * @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.
@@ -64,9 +69,10 @@ function addInstances(instances: InstanceMetadata[], displaySetService: DisplayS
  * DICOM SR SOP Class Handler
  * For all referenced images in the TID 1500/300 sections, add an image to the
  * display.
- * @param instances is a set of instances all from the same series
- * @param servicesManager is the services that can be used for creating
- * @returns The list of display sets created for the given instances object
+ * @param {InstanceMetadata[]} instances - A set of instances all from the same series
+ * @param {AppTypes.ServicesManager} servicesManager - The services that can be used for creating
+ * @param {AppTypes.ExtensionManager} extensionManager - The extension manager
+ * @returns {Types.DisplaySet[]} The list of display sets created for the given instances object
  */
 function _getDisplaySetsFromSeries(
   instances,
@@ -138,7 +144,7 @@ function _getDisplaySetsFromSeries(
  * @param extensionManager - The extension manager containing data sources.
  */
 async function _load(
-  srDisplaySet: Types.DisplaySet,
+  srDisplaySet: OhifTypes.DisplaySet,
   servicesManager: AppTypes.ServicesManager,
   extensionManager: AppTypes.ExtensionManager
 ) {
@@ -216,17 +222,15 @@ async function _load(
   });
 }
 
-/**
- * Checks if measurements can be added to a display set.
- *
- * @param srDisplaySet - The source display set containing measurements.
- * @param newDisplaySet - The new display set to check if measurements can be added.
- * @param dataSource - The data source used to retrieve image IDs.
- * @param servicesManager - The services manager.
- */
+function _measurementBelongsToDisplaySet({ measurement, displaySet }) {
+  return (
+    measurement.coords[0].ReferencedFrameOfReferenceSequence === displaySet.FrameOfReferenceUID
+  );
+}
+
 function _checkIfCanAddMeasurementsToDisplaySet(
-  srDisplaySet,
-  newDisplaySet,
+  srDisplaySet: OhifTypes.DisplaySet,
+  newDisplaySet: OhifTypes.DisplaySet,
   dataSource,
   servicesManager: AppTypes.ServicesManager
 ) {
@@ -236,18 +240,10 @@ function _checkIfCanAddMeasurementsToDisplaySet(
     measurement => measurement.loaded === false
   );
 
-  if (
-    unloadedMeasurements.length === 0 ||
-    !(newDisplaySet instanceof ImageSet) ||
-    newDisplaySet.unsupported
-  ) {
+  if (!unloadedMeasurements.length || newDisplaySet.unsupported) {
     return;
   }
 
-  // const { sopClassUids } = newDisplaySet;
-  // Create a Set for faster lookups
-  // const sopClassUidSet = new Set(sopClassUids);
-
   // Create a Map to efficiently look up ImageIds by SOPInstanceUID and frame number
   const imageIdMap = new Map<string, string>();
   const imageIds = dataSource.getImageIdsForDisplaySet(newDisplaySet);
@@ -266,6 +262,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
 
   for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
     let measurement = unloadedMeasurements[j];
+    const is3DMeasurement = measurement.coords?.[0]?.ValueType === 'SCOORD3D';
 
     const onBeforeSRAddMeasurement = customizationService.getCustomization(
       'onBeforeSRAddMeasurement'
@@ -280,9 +277,15 @@ function _checkIfCanAddMeasurementsToDisplaySet(
     }
 
     // if it is 3d SR we can just add the SR annotation
-    if (is3DSR) {
-      addSRAnnotation(measurement, null, null);
+    if (
+      is3DSR &&
+      is3DMeasurement &&
+      _measurementBelongsToDisplaySet({ measurement, displaySet: newDisplaySet })
+    ) {
+      addSRAnnotation({ measurement, displaySet: newDisplaySet });
       measurement.loaded = true;
+      measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
+      unloadedMeasurements.splice(j, 1);
       continue;
     }
 
@@ -300,15 +303,12 @@ function _checkIfCanAddMeasurementsToDisplaySet(
       imageId &&
       _measurementReferencesSOPInstanceUID(measurement, ReferencedSOPInstanceUID, frame)
     ) {
-      addSRAnnotation(measurement, imageId, frame);
-
-      // Update measurement properties
+      addSRAnnotation({ measurement, imageId, frameNumber: frame, displaySet: newDisplaySet });
       measurement.loaded = true;
       measurement.imageId = imageId;
       measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
       measurement.ReferencedSOPInstanceUID = ReferencedSOPInstanceUID;
       measurement.frameNumber = frame;
-
       unloadedMeasurements.splice(j, 1);
     }
   }
@@ -316,10 +316,10 @@ function _checkIfCanAddMeasurementsToDisplaySet(
 
 /**
  * Checks if a measurement references a specific SOP Instance UID.
- * @param measurement - The measurement object.
- * @param SOPInstanceUID - The SOP Instance UID to check against.
- * @param frameNumber - The frame number to check against (optional).
- * @returns True if the measurement references the specified SOP Instance UID, false otherwise.
+ * @param {any} measurement - The measurement object.
+ * @param {string} sopInstanceUID - The SOP Instance UID to check against.
+ * @param {number} frameNumber - The frame number to check against (optional).
+ * @returns {boolean} True if the measurement references the specified SOP Instance UID, false otherwise.
  */
 function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber) {
   const { coords } = measurement;
@@ -351,10 +351,8 @@ function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frame
 /**
  * Retrieves the SOP class handler module.
  *
- * @param {Object} options - The options for retrieving the SOP class handler module.
- * @param {Object} options.servicesManager - The services manager.
- * @param {Object} options.extensionManager - The extension manager.
- * @returns {Array} An array containing the SOP class handler module.
+ * @param {OhifTypes.Extensions.ExtensionParams} params - The extension parameters.
+ * @returns {Array} An array containing the SOP class handler modules.
  */
 function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
   const { servicesManager, extensionManager } = params;
@@ -378,8 +376,8 @@ function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams)
 /**
  * Retrieves the measurements from the ImagingMeasurementReportContentSequence.
  *
- * @param {Array} ImagingMeasurementReportContentSequence - The ImagingMeasurementReportContentSequence array.
- * @returns {Array} - The array of measurements.
+ * @param {any[]} imagingMeasurementReportContentSequence - The ImagingMeasurementReportContentSequence array.
+ * @returns {any[]} The array of measurements.
  */
 function _getMeasurements(ImagingMeasurementReportContentSequence) {
   const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
@@ -417,8 +415,8 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
 /**
  * Retrieves merged content sequences by tracking unique identifiers.
  *
- * @param {Array} MeasurementGroups - The measurement groups.
- * @returns {Object} - The merged content sequences by tracking unique identifiers.
+ * @param {any[]} measurementGroups - The measurement groups.
+ * @returns {Object} The merged content sequences by tracking unique identifiers.
  */
 function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups) {
   const mergedContentSequencesByTrackingUniqueIdentifiers = {};
@@ -465,15 +463,11 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups
  * it calls the _processTID1410Measurement function.
  * Otherwise, it calls the _processNonGeometricallyDefinedMeasurement function.
  *
- * @param {Array<Object>} mergedContentSequence - The merged content sequence to process.
- * @returns {any} - The processed measurement result.
+ * @param {any[]} mergedContentSequence - The merged content sequence to process.
+ * @returns {any} The processed measurement result.
  */
 function _processMeasurement(mergedContentSequence) {
-  if (
-    mergedContentSequence.some(
-      group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
-    )
-  ) {
+  if (mergedContentSequence.some(group => isScoordOr3d(group) && !isTextPosition(group))) {
     return _processTID1410Measurement(mergedContentSequence);
   }
 
@@ -485,8 +479,8 @@ function _processMeasurement(mergedContentSequence) {
  * TID 1410 style measurements have a SCOORD or SCOORD3D at the top level,
  * and non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D.
  *
- * @param mergedContentSequence - The merged content sequence containing the measurements.
- * @returns The measurement object containing the loaded status, labels, coordinates, tracking unique identifier, and tracking identifier.
+ * @param {any[]} mergedContentSequence - The merged content sequence containing the measurements.
+ * @returns {any} The measurement object containing the loaded status, labels, coordinates, tracking unique identifier, and tracking identifier.
  */
 function _processTID1410Measurement(mergedContentSequence) {
   // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
@@ -511,12 +505,25 @@ function _processTID1410Measurement(mergedContentSequence) {
 
   const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');
 
+  const { ConceptNameCodeSequence: conceptNameItem } = graphicItem;
+  const { CodeValue: graphicValue, CodingSchemeDesignator: graphicDesignator } = conceptNameItem;
+  const graphicCode = `${graphicDesignator}:${graphicValue}`;
+
+  const pointDataItem = _getCoordsFromSCOORDOrSCOORD3D(graphicItem);
+  const is3DMeasurement = pointDataItem.ValueType === 'SCOORD3D';
+  const pointLength = is3DMeasurement ? 3 : 2;
+  const pointsLength = pointDataItem.GraphicData.length / pointLength;
+
   const measurement = {
     loaded: false,
     labels: [],
-    coords: [_getCoordsFromSCOORDOrSCOORD3D(graphicItem)],
+    coords: [pointDataItem],
     TrackingUniqueIdentifier: UIDREFContentItem.UID,
     TrackingIdentifier: TrackingIdentifierContentItem.TextValue,
+    graphicCode,
+    is3DMeasurement,
+    pointsLength,
+    graphicType: pointDataItem.GraphicType,
   };
 
   NUMContentItems.forEach(item => {
@@ -546,8 +553,8 @@ function _processTID1410Measurement(mergedContentSequence) {
 /**
  * Processes the non-geometrically defined measurement from the merged content sequence.
  *
- * @param mergedContentSequence The merged content sequence containing the measurement data.
- * @returns The processed measurement object.
+ * @param {any[]} mergedContentSequence The merged content sequence containing the measurement data.
+ * @returns {any} The processed measurement object.
  */
 function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
   const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');
@@ -567,6 +574,12 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
       item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.FindingSite
   );
 
+  const commentSites = mergedContentSequence.filter(
+    item =>
+      item.ConceptNameCodeSequence.CodingSchemeDesignator === COMMENT_CODE.schemeDesignator &&
+      item.ConceptNameCodeSequence.CodeValue === COMMENT_CODE.value
+  );
+
   const measurement = {
     loaded: false,
     labels: [],
@@ -575,6 +588,14 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
     TrackingIdentifier: TrackingIdentifierContentItem.TextValue,
   };
 
+  if (commentSites) {
+    for (const group of commentSites) {
+      if (group.TextValue) {
+        measurement.labels.push({ label: group.TextValue, value: '' });
+      }
+    }
+  }
+
   if (
     finding &&
     CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
@@ -633,8 +654,8 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
 
 /**
  * Extracts coordinates from a graphic item of type SCOORD or SCOORD3D.
- * @param {object} graphicItem - The graphic item containing the coordinates.
- * @returns {object} - The extracted coordinates.
+ * @param {any} graphicItem - The graphic item containing the coordinates.
+ * @returns {any} The extracted coordinates.
  */
 const _getCoordsFromSCOORDOrSCOORD3D = graphicItem => {
   const { ValueType, GraphicType, GraphicData } = graphicItem;
@@ -648,9 +669,9 @@ const _getCoordsFromSCOORDOrSCOORD3D = graphicItem => {
 
 /**
  * Retrieves the label and value from the provided ConceptNameCodeSequence and MeasuredValueSequence.
- * @param {Object} ConceptNameCodeSequence - The ConceptNameCodeSequence object.
- * @param {Object} MeasuredValueSequence - The MeasuredValueSequence object.
- * @returns {Object} - An object containing the label and value.
+ * @param {any} conceptNameCodeSequence - The ConceptNameCodeSequence object.
+ * @param {any} measuredValueSequence - The MeasuredValueSequence object.
+ * @returns {Object} An object containing the label and value.
  *                    The label represents the CodeMeaning from the ConceptNameCodeSequence.
  *                    The value represents the formatted NumericValue and CodeValue from the MeasuredValueSequence.
  *                    Example: { label: 'Long Axis', value: '31.00 mm' }
@@ -669,8 +690,8 @@ function _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredVal
 /**
  * Retrieves a list of referenced images from the Imaging Measurement Report Content Sequence.
  *
- * @param {Array} ImagingMeasurementReportContentSequence - The Imaging Measurement Report Content Sequence.
- * @returns {Array} - The list of referenced images.
+ * @param {any[]} imagingMeasurementReportContentSequence - The Imaging Measurement Report Content Sequence.
+ * @returns {any[]} The list of referenced images.
  */
 function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
   const ImageLibrary = ImagingMeasurementReportContentSequence.find(
@@ -717,7 +738,7 @@ function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
  * Otherwise, the sequence is wrapped in an array and returned.
  *
  * @param {any} sequence - The DICOM sequence to convert.
- * @returns {any[]} - The converted array.
+ * @returns {any[]} The converted array.
  */
 function _getSequenceAsArray(sequence) {
   if (!sequence) {
@@ -726,4 +747,17 @@ function _getSequenceAsArray(sequence) {
   return Array.isArray(sequence) ? sequence : [sequence];
 }
 
+function isScoordOr3d(group) {
+  return group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D';
+}
+
+function isTextPosition(group) {
+  const concept = group.ConceptNameCodeSequence[0];
+  return (
+    concept &&
+    concept.CodeValue === TEXT_ANNOTATION_POSITION.value &&
+    concept.CodingSchemeDesignator === TEXT_ANNOTATION_POSITION.schemeDesignator
+  );
+}
+
 export default getSopClassHandlerModule;

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

@@ -9,11 +9,10 @@ import {
   LengthTool,
   PlanarFreehandROITool,
   RectangleROITool,
-  utilities as csToolsUtils,
 } from '@cornerstonejs/tools';
-import { Types, MeasurementService } from '@ohif/core';
-import { StackViewport, utilities as csUtils } from '@cornerstonejs/core';
+import { Types } from '@ohif/core';
 import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
+
 import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
 import SCOORD3DPointTool from './tools/SCOORD3DPointTool';
 import SRSCOOR3DProbeMapper from './utils/SRSCOOR3DProbeMapper';
@@ -29,7 +28,7 @@ export default function init({
   configuration = {},
   servicesManager,
 }: Types.Extensions.ExtensionParams): void {
-  const { measurementService, cornerstoneViewportService } = servicesManager.services;
+  const { measurementService } = servicesManager.services;
 
   addToolInstance(toolNames.DICOMSRDisplay, DICOMSRDisplayTool);
   addToolInstance(toolNames.SRLength, LengthTool);
@@ -57,7 +56,7 @@ export default function init({
     'SRSCOORD3DPoint',
     POINT,
     SRSCOOR3DProbeMapper.toAnnotation,
-    SRSCOOR3DProbeMapper.toMeasurement
+    SRSCOOR3DProbeMapper.toMeasurement.bind(null, { servicesManager })
   );
 
   // Modify annotation tools to use dashed lines on SR

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

@@ -1,4 +1,4 @@
-import { Types, metaData, utilities as csUtils } from '@cornerstonejs/core';
+import { type Types } from '@cornerstonejs/core';
 import {
   annotation,
   drawing,

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

@@ -7,13 +7,8 @@ const SRSCOOR3DProbe = {
    * @param {Object} cornerstone Cornerstone event data
    * @return {Measurement} Measurement instance
    */
-  toMeasurement: (
-    csToolsEventDetail,
-    displaySetService,
-    CornerstoneViewportService,
-    getValueTypeFromToolType,
-    customizationService
-  ) => {
+  toMeasurement: ({ servicesManager, getValueTypeFromToolType }, csToolsEventDetail) => {
+    const { displaySetService } = servicesManager.services;
     const { annotation } = csToolsEventDetail;
     const { metadata, data, annotationUID } = annotation;
 
@@ -22,14 +17,25 @@ const SRSCOOR3DProbe = {
       return null;
     }
 
-    const { toolName } = metadata;
+    const { toolName, FrameOfReferenceUID } = metadata;
     const { points } = data.handles;
 
+    const displaySets = displaySetService
+      .getActiveDisplaySets()
+      .filter(ds => ds.FrameOfReferenceUID === FrameOfReferenceUID);
+    const displaySet = displaySets.filter(ds => ds.isReconstructable)[0] || displaySets[0];
+
+    const { StudyInstanceUID: referenceStudyUID, SeriesInstanceUID: referenceSeriesUID } =
+      displaySets[0] || {};
+
     const displayText = getDisplayText(annotation);
     return {
       uid: annotationUID,
       points,
       metadata,
+      referenceStudyUID,
+      referenceSeriesUID,
+      displaySetInstanceUID: displaySet?.displaySetInstanceUID,
       toolName: metadata.toolName,
       label: data.label,
       displayText: displayText,
@@ -56,7 +62,10 @@ function getDisplayText(annotation) {
     }
   }
 
-  return displayText;
+  return {
+    primary: displayText,
+    secondary: [],
+  };
 }
 
 export default SRSCOOR3DProbe;

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

@@ -1,11 +1,59 @@
 import { Types, annotation } from '@cornerstonejs/tools';
 import { metaData } from '@cornerstonejs/core';
+import { adaptersSR } from '@cornerstonejs/adapters';
 
 import getRenderableData from './getRenderableData';
 import toolNames from '../tools/toolNames';
 
-export default function addSRAnnotation(measurement, imageId, frameNumber) {
+const { MeasurementReport } = adaptersSR.Cornerstone3D;
+
+/**
+ * Adds a DICOM SR (Structured Report) annotation to the annotation manager.
+ * This function processes measurement data from DICOM SR and converts it into
+ * a format suitable for display in the Cornerstone3D viewer.
+ *
+ * @param {Object} params - The parameters object
+ * @param {Object} params.measurement - The DICOM SR measurement data containing coordinates, labels, and metadata
+ * @param {Array} params.measurement.coords - Array of coordinate objects with GraphicType, ValueType, and other properties
+ * @param {string} params.measurement.TrackingUniqueIdentifier - Unique identifier for the measurement
+ * @param {string} params.measurement.TrackingIdentifier - Tracking identifier for adapter lookup
+ * @param {Array} [params.measurement.labels] - Optional array of label objects
+ * @param {string} [params.measurement.displayText] - Optional display text for the annotation
+ * @param {Object} [params.measurement.textBox] - Optional text box configuration
+ * @param {string|null} [params.imageId] - Optional image ID for the referenced image (defaults to null)
+ * @param {number|null} [params.frameNumber] - Optional frame number for multi-frame images (defaults to null)
+ * @param {Object} params.displaySet - The display set containing the image
+ * @param {string} params.displaySet.displaySetInstanceUID - Unique identifier for the display set
+ * @returns {void}
+ *
+ * @example
+ * ```typescript
+ * addSRAnnotation({
+ *   measurement: {
+ *     TrackingUniqueIdentifier: '1.2.3.4.5',
+ *     TrackingIdentifier: 'POINT',
+ *     coords: [{
+ *       GraphicType: 'POINT',
+ *       ValueType: 'SCOORD',
+ *       // ... other coordinate properties
+ *     }],
+ *     labels: [{ value: 'Measurement Point' }],
+ *     displayText: 'Point measurement'
+ *   },
+ *   imageId: 'wadouri:file://path/to/image.dcm', // Optional
+ *   frameNumber: 0, // Optional
+ *   displaySet: { displaySetInstanceUID: '1.2.3.4' }
+ * });
+ * ```
+ */
+export default function addSRAnnotation({ measurement, imageId = null, frameNumber = null, displaySet }) {
+  /** @type {string} The tool name to use for the annotation, defaults to DICOMSRDisplay */
   let toolName = toolNames.DICOMSRDisplay;
+  
+  /** 
+   * @type {Object} Renderable data organized by graphic type
+   * Groups coordinate data by GraphicType for efficient rendering
+   */
   const renderableData = measurement.coords.reduce((acc, coordProps) => {
     acc[coordProps.GraphicType] = acc[coordProps.GraphicType] || [];
     acc[coordProps.GraphicType].push(getRenderableData({ ...coordProps, imageId }));
@@ -18,6 +66,7 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
 
   /** TODO: Read the tool name from the DICOM SR identification type in the future. */
   let frameOfReferenceUID = null;
+  let planeRestriction = null;
 
   if (imageId) {
     const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
@@ -25,23 +74,47 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
   }
 
   if (valueType === 'SCOORD3D') {
-    toolName = toolNames.SRSCOORD3DPoint;
+    const adapter = MeasurementReport.getAdapterForTrackingIdentifier(
+      measurement.TrackingIdentifier
+    );
+    if (!adapter) {
+      toolName = toolNames.SRSCOORD3DPoint;
+    }
 
     // get the ReferencedFrameOfReferenceUID from the measurement
     frameOfReferenceUID = measurement.coords[0].ReferencedFrameOfReferenceSequence;
+
+    planeRestriction = {
+      FrameOfReferenceUID: frameOfReferenceUID,
+      point: graphicTypePoints[0][0],
+    };
   }
 
+  // Store the view reference for use in initial navigation
+  measurement.viewReference = {
+    planeRestriction,
+    FrameOfReferenceUID: frameOfReferenceUID,
+    referencedImageId: imageId,
+  };
+
+  /**
+   * @type {Types.Annotation} The annotation object to be added to the annotation manager
+   * Contains all necessary metadata and data for rendering the DICOM SR measurement
+   */
   const SRAnnotation: Types.Annotation = {
     annotationUID: TrackingUniqueIdentifier,
     highlighted: false,
     isLocked: false,
+    isPreview: toolName === toolNames.DICOMSRDisplay,
     invalidated: false,
     metadata: {
       toolName,
+      planeRestriction,
       valueType,
       graphicType,
       FrameOfReferenceUID: frameOfReferenceUID,
       referencedImageId: imageId,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
     },
     data: {
       label: measurement.labels?.[0]?.value || undefined,
@@ -59,8 +132,11 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
   };
 
   /**
-   * const annotationManager = annotation.annotationState.getAnnotationManager();
-   * was not triggering annotation_added events.
+   * Add the annotation to the annotation state manager.
+   * Note: Using annotation.state.addAnnotation() instead of annotationManager.addAnnotation()
+   * because the latter was not triggering annotation_added events properly.
+   * 
+   * @param {Types.Annotation} SRAnnotation - The annotation to add
    */
   annotation.state.addAnnotation(SRAnnotation);
 }

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

@@ -1,17 +1,11 @@
-import OHIF from '@ohif/core';
 import { annotation } from '@cornerstonejs/tools';
-const { log } = OHIF;
+import { NO_IMAGE_ID } from '@cornerstonejs/adapters';
 
 function getFilteredCornerstoneToolState(measurementData, additionalFindingTypes) {
   const filteredToolState = {};
 
   function addToFilteredToolState(annotation, toolType) {
-    if (!annotation.metadata?.referencedImageId) {
-      log.warn(`[DICOMSR] No referencedImageId found for ${toolType} ${annotation.id}`);
-      return;
-    }
-
-    const imageId = annotation.metadata.referencedImageId;
+    const imageId = annotation.metadata?.referencedImageId ?? NO_IMAGE_ID;
 
     if (!filteredToolState[imageId]) {
       filteredToolState[imageId] = {};

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

@@ -11,7 +11,11 @@ const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
  * @returns {string} The extracted label.
  */
 export default function getLabelFromDCMJSImportedToolData(toolData) {
-  const { findingSites = [], finding } = toolData;
+  const { findingSites = [], finding, annotation } = toolData;
+
+  if (annotation.data.label) {
+    return annotation.data.label;
+  }
 
   let freeTextLabel = findingSites.find(
     fs => fs.CodeValue === Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT

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

@@ -36,6 +36,14 @@ function getRenderableData({ GraphicType, GraphicData, ValueType, imageId }) {
         ValueType,
         imageId,
       });
+
+      if (!imageId) {
+        // without the image id it's not possible to perform the calculations below
+        // these calculations also do not seem to be needed, since everything works
+        // just fine when we skip them. At least for SCOORD3D annotations.
+        return pointsWorld;
+      }
+
       // We do not have an explicit draw circle svg helper in Cornerstone3D at
       // this time, but we can use the ellipse svg helper to draw a circle, so
       // here we reshape the data for that purpose.
@@ -90,6 +98,13 @@ function getRenderableData({ GraphicType, GraphicData, ValueType, imageId }) {
         imageId,
       });
 
+      if (!imageId) {
+        // without the image id it's not possible to perform the calculations below
+        // these calculations also do not seem to be needed, since everything works
+        // just fine when we skip them. At least for SCOORD3D annotations.
+        return pointsWorld;
+      }
+
       const majorAxisStart = vec3.fromValues(...pointsWorld[0]);
       const majorAxisEnd = vec3.fromValues(...pointsWorld[1]);
       const minorAxisStart = vec3.fromValues(...pointsWorld[2]);

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

@@ -1,15 +1,16 @@
-import { utilities, metaData } from '@cornerstonejs/core';
+import { utilities, metaData, type Types } from '@cornerstonejs/core';
 import OHIF, { DicomMetadataStore } from '@ohif/core';
+import { vec3 } from 'gl-matrix';
+
 import getLabelFromDCMJSImportedToolData from './getLabelFromDCMJSImportedToolData';
 import { adaptersSR } from '@cornerstonejs/adapters';
-import { annotation as CsAnnotation } from '@cornerstonejs/tools';
+import { annotation as CsAnnotation, type Types as ToolTypes } from '@cornerstonejs/tools';
 import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
 
 const { locking } = CsAnnotation;
 const { guid } = OHIF.utils;
-const { MeasurementReport, CORNERSTONE_3D_TAG } = adaptersSR.Cornerstone3D;
+const { MeasurementReport } = adaptersSR.Cornerstone3D;
 const { CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION } = CSExtensionEnums;
-const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 
 const convertCode = (codingValues, code) => {
   if (!code || code.CodingSchemeDesignator === 'CORNERSTONEJS') {
@@ -37,8 +38,10 @@ const convertSites = (codingValues, sites) => {
 };
 
 /**
- * Hydrates a structured report, for default viewports.
- *
+ * Hydrates a structured report
+ * Handles 2d and 3d hydration from SCOORD and SCOORD3D points
+ * For 3D hydration, chooses a volume display set to display with
+ * FOr 2D hydration, chooses the (first) display set containing the referenced image.
  */
 export default function hydrateStructuredReport(
   { servicesManager, extensionManager, commandsManager }: withAppTypes,
@@ -71,24 +74,20 @@ export default function hydrateStructuredReport(
   );
 
   const sopInstanceUIDToImageId = {};
-  const imageIdsForToolState = {};
 
   displaySet.measurements.forEach(measurement => {
-    const { ReferencedSOPInstanceUID, imageId, frameNumber } = measurement;
+    const { ReferencedSOPInstanceUID, imageId, frameNumber=1 } = measurement;
+    const key = `${ReferencedSOPInstanceUID}:${frameNumber}`;
 
-    if (!sopInstanceUIDToImageId[ReferencedSOPInstanceUID]) {
-      sopInstanceUIDToImageId[ReferencedSOPInstanceUID] = imageId;
-      imageIdsForToolState[ReferencedSOPInstanceUID] = [];
-    }
-    if (!imageIdsForToolState[ReferencedSOPInstanceUID][frameNumber]) {
-      imageIdsForToolState[ReferencedSOPInstanceUID][frameNumber] = imageId;
+    if (!sopInstanceUIDToImageId[key]) {
+      sopInstanceUIDToImageId[key] = imageId;
     }
   });
 
   // Mapping of legacy datasets is now directly handled by adapters module
   const datasetToUse = instance;
 
-  // Use dcmjs to generate toolState.
+  // Use CS3D adapters to generate toolState.
   let storedMeasurementByAnnotationType = MeasurementReport.generateToolState(
     datasetToUse,
     // NOTE: we need to pass in the imageIds to dcmjs since the we use them
@@ -96,7 +95,6 @@ export default function hydrateStructuredReport(
     // that measurements were added to the display set are the same order as
     // the measurementGroups in the instance.
     sopInstanceUIDToImageId,
-    utilities.imageToWorldCoords,
     metaData
   );
 
@@ -131,10 +129,8 @@ export default function hydrateStructuredReport(
       // 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 imageId =
-        imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
-        sopInstanceUIDToImageId[toolData.sopInstanceUid];
+      const frameNumber = toolData.annotation.data?.frameNumber || 1;
+      const imageId = sopInstanceUIDToImageId[`${toolData.sopInstanceUid}:${frameNumber}`];
 
       if (!imageIds.includes(imageId)) {
         imageIds.push(imageId);
@@ -147,6 +143,9 @@ export default function hydrateStructuredReport(
 
   for (let i = 0; i < imageIds.length; i++) {
     const imageId = imageIds[i];
+    if (!imageId) {
+      continue;
+    }
     const { SeriesInstanceUID, StudyInstanceUID } = metaData.get('instance', imageId);
 
     if (!SeriesInstanceUIDs.includes(SeriesInstanceUID)) {
@@ -160,38 +159,53 @@ export default function hydrateStructuredReport(
     }
   }
 
+  /**
+   * Gets reference data for what frame of reference and the referenced
+   * image id, or for 3d measurements, the volumeId to apply this annotation to.
+   */
+  function getReferenceData(toolData): ToolTypes.AnnotationMetadata {
+    // 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 imageId = sopInstanceUIDToImageId[`${toolData.sopInstanceUid}:${frameNumber}`];
+
+    if (!imageId) {
+      return getReferenceData3D(toolData, servicesManager);
+    }
+
+    const instance = metaData.get('instance', imageId);
+    const {
+      FrameOfReferenceUID,
+      // SOPInstanceUID,
+      // SeriesInstanceUID,
+      // StudyInstanceUID,
+    } = instance;
+
+    return {
+      referencedImageId: imageId,
+      FrameOfReferenceUID,
+    };
+  }
+
   Object.keys(hydratableMeasurementsInSR).forEach(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 imageId =
-        imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
-        sopInstanceUIDToImageId[toolData.sopInstanceUid];
-
       toolData.uid = guid();
-
-      const instance = metaData.get('instance', imageId);
-      const {
-        FrameOfReferenceUID,
-        // SOPInstanceUID,
-        // SeriesInstanceUID,
-        // StudyInstanceUID,
-      } = instance;
+      const referenceData = getReferenceData(toolData);
+      const { imageId } = referenceData;
 
       const annotation = {
         annotationUID: toolData.annotation.annotationUID,
         data: toolData.annotation.data,
         metadata: {
+          ...referenceData,
           toolName: annotationType,
-          referencedImageId: imageId,
-          FrameOfReferenceUID,
         },
       };
+      utilities.updatePlaneRestriction(annotation.data.handles.points, annotation.metadata);
 
       const source = measurementService.getSource(
         CORNERSTONE_3D_TOOLS_SOURCE_NAME,
@@ -225,7 +239,7 @@ export default function hydrateStructuredReport(
         locking.setAnnotationLocked(newAnnotationUID, true);
       }
 
-      if (!imageIds.includes(imageId)) {
+      if (imageId && !imageIds.includes(imageId)) {
         imageIds.push(imageId);
       }
     });
@@ -238,3 +252,92 @@ export default function hydrateStructuredReport(
     SeriesInstanceUIDs,
   };
 }
+
+/**
+ * For 3d annotations, there are often several display sets which could
+ * be used to display the annotation.  Choose the first annotation with the
+ * same frame of reference that is reconstructable, or the first display set
+ * otherwise.
+ */
+function chooseDisplaySet(displaySets, annotation) {
+  if (!displaySets?.length) {
+    console.warn('No display set found for', annotation);
+    return;
+  }
+  if (displaySets.length === 1) {
+    return displaySets[0];
+  }
+  const volumeDs = displaySets.find(ds => ds.isReconstructable);
+  if (volumeDs) {
+    return volumeDs;
+  }
+  return displaySets[0];
+}
+
+/**
+ * Gets the additional reference data appropriate for a 3d reference.
+ * This will choose a volume id, frame of reference and a plane restriction.
+ */
+function getReferenceData3D(toolData, servicesManager: Types.ServicesManager) {
+  const { FrameOfReferenceUID } = toolData.annotation.metadata;
+  const { points } = toolData.annotation.data.handles;
+  const { displaySetService } = servicesManager.services;
+  const displaySetsFOR = displaySetService.getDisplaySetsBy(
+    ds => ds.FrameOfReferenceUID === FrameOfReferenceUID
+  );
+  if (!displaySetsFOR.length || !points?.length) {
+    return {
+      FrameOfReferenceUID,
+    };
+  }
+  const ds = chooseDisplaySet(displaySetsFOR, toolData.annotation);
+  const cameraView = chooseCameraView(ds, points);
+
+  const viewReference = {
+    ...cameraView,
+    volumeId: ds.displaySetInstanceUID,
+    FrameOfReferenceUID,
+  };
+  utilities.updatePlaneRestriction(points, viewReference);
+  return viewReference;
+}
+
+/**
+ * Chooses a possible camera view - right now this is fairly basic,
+ * just setting the unknowns to null.
+ */
+function chooseCameraView(_ds, points) {
+  const selectedPoints = choosePoints(points);
+  const cameraFocalPoint = <Point3>centerOf(selectedPoints);
+  // These are sufficient to be null for now and can be set on first view
+  let viewPlaneNormal: Types.Point3 = null;
+  let viewUp: Types.Point3 = null;
+
+  return {
+    cameraFocalPoint,
+    viewPlaneNormal,
+    viewUp,
+  };
+}
+
+function centerOf(points) {
+  const scale = 1 / points.length;
+  const center = vec3.create();
+  for (const point of points) {
+    vec3.scaleAndAdd(center, center, point, scale);
+  }
+  return center;
+}
+
+function choosePoints(points) {
+  if (points.length === 1 || points.length === 2) {
+    return points;
+  }
+  const firstIndex = 0;
+  const secondIndex = Math.ceil(points.length / 4);
+  const thirdIndex = Math.ceil(points.length / 2);
+  // TODO - check if colinear, if so try to find another 3 points.
+
+  const newPoints = [points[firstIndex], points[secondIndex], points[thirdIndex]];
+  return newPoints;
+}

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

@@ -22,13 +22,20 @@ export default function isRehydratable(displaySet, mappings) {
   const { measurements } = displaySet;
 
   for (let i = 0; i < measurements.length; i++) {
-    const { TrackingIdentifier } = measurements[i] || {};
-    if (!TrackingIdentifier) {
-      console.warn('No tracking identifier for measurement ', measurements[i]);
+    const measurement = measurements[i];
+    if (!measurement) {
+      continue;
+    }
+    const { TrackingIdentifier = '', graphicType, graphicCode, pointsLength } = measurement;
+    if (!TrackingIdentifier && !graphicType) {
+      console.warn('No tracking identifier  or graphicType for measurement ', measurement);
       continue;
     }
     const adapter = MeasurementReport.getAdapterForTrackingIdentifier(TrackingIdentifier);
-    const hydratable = adapter && mappingDefinitions.has(adapter.toolType);
+    const adapters = MeasurementReport.getAdaptersForTypes(graphicCode, graphicType, pointsLength);
+    const hydratable =
+      (adapter && mappingDefinitions.has(adapter.toolType)) ||
+      (adapters && adapters.some(adapter => mappingDefinitions.has(adapter.toolType)));
 
     if (hydratable) {
       return true;

extensions/cornerstone-dynamic-volume/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "description": "OHIF extension for 4D volumes data",
   "author": "OHIF",
   "license": "MIT",
@@ -29,21 +29,21 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.59",
-    "@ohif/extension-cornerstone": "3.11.0-beta.59",
-    "@ohif/extension-default": "3.11.0-beta.59",
-    "@ohif/i18n": "3.11.0-beta.59",
-    "@ohif/ui": "3.11.0-beta.59",
-    "dcmjs": "*",
-    "dicom-parser": "^1.8.21",
-    "hammerjs": "^2.0.8",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1"
+    "@ohif/core": "3.12.0-beta.78",
+    "@ohif/extension-cornerstone": "3.12.0-beta.78",
+    "@ohif/extension-default": "3.12.0-beta.78",
+    "@ohif/i18n": "3.12.0-beta.78",
+    "@ohif/ui": "3.12.0-beta.78",
+    "dcmjs": "0.43.1",
+    "dicom-parser": "1.8.21",
+    "hammerjs": "2.0.8",
+    "prop-types": "15.8.1",
+    "react": "18.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^3.15.6",
-    "@cornerstonejs/tools": "^3.15.6",
-    "classnames": "^2.3.2"
+    "@babel/runtime": "7.28.2",
+    "@cornerstonejs/core": "4.5.20",
+    "@cornerstonejs/tools": "4.5.20",
+    "classnames": "2.5.1"
   }
 }

extensions/cornerstone/jest.config.js

@@ -1,9 +1,13 @@
 const base = require('../../jest.config.base.js');
-const pkg = require('./package');
 
 module.exports = {
   ...base,
-  displayName: pkg.name,
+  moduleNameMapper: {
+    ...base.moduleNameMapper,
+    '@ohif/(.*)': '<rootDir>/../../platform/$1/src',
+    '^@cornerstonejs/([^/]+)/(.*)$': '<rootDir>/../../node_modules/@cornerstonejs/$1/dist/esm/$2',
+    '^@cornerstonejs/([^/]+)$': '<rootDir>/../../node_modules/@cornerstonejs/$1/dist/esm',
+  },
   // rootDir: "../.."
   // testMatch: [
   //   //`<rootDir>/platform/${pack.name}/**/*.spec.js`

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "3.11.0-beta.59",
+  "version": "3.12.0-beta.78",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -31,41 +31,43 @@
     "dev:cornerstone": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --progress --config .webpack/webpack.prod.js",
     "build:package-1": "yarn run build",
-    "start": "yarn run dev"
+    "start": "yarn run dev",
+    "test:unit": "jest --watchAll",
+    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@cornerstonejs/codec-charls": "^1.2.3",
-    "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
-    "@cornerstonejs/codec-openjpeg": "^1.2.4",
-    "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^3.15.6",
-    "@ohif/core": "3.11.0-beta.59",
-    "@ohif/ui": "3.11.0-beta.59",
-    "dcmjs": "*",
-    "dicom-parser": "^1.8.21",
-    "hammerjs": "^2.0.8",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-resize-detector": "^10.0.1"
+    "@cornerstonejs/codec-charls": "1.2.3",
+    "@cornerstonejs/codec-libjpeg-turbo-8bit": "1.2.2",
+    "@cornerstonejs/codec-openjpeg": "1.3.0",
+    "@cornerstonejs/codec-openjph": "2.4.7",
+    "@cornerstonejs/dicom-image-loader": "4.5.20",
+    "@ohif/core": "3.12.0-beta.78",
+    "@ohif/ui": "3.12.0-beta.78",
+    "dcmjs": "0.43.1",
+    "dicom-parser": "1.8.21",
+    "hammerjs": "2.0.8",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-resize-detector": "10.0.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.15.6",
-    "@cornerstonejs/ai": "^3.15.6",
-    "@cornerstonejs/core": "^3.15.6",
-    "@cornerstonejs/labelmap-interpolation": "^3.15.6",
-    "@cornerstonejs/polymorphic-segmentation": "^3.15.6",
-    "@cornerstonejs/tools": "^3.15.6",
+    "@babel/runtime": "7.28.2",
+    "@cornerstonejs/adapters": "4.5.20",
+    "@cornerstonejs/ai": "4.5.20",
+    "@cornerstonejs/core": "4.5.20",
+    "@cornerstonejs/labelmap-interpolation": "4.5.20",
+    "@cornerstonejs/polymorphic-segmentation": "4.5.20",
+    "@cornerstonejs/tools": "4.5.20",
     "@itk-wasm/morphological-contour-interpolation": "1.1.0",
     "@kitware/vtk.js": "32.12.0",
-    "html2canvas": "^1.4.1",
-    "lodash.compact": "^3.0.1",
-    "lodash.debounce": "^4.0.8",
-    "lodash.flatten": "^4.4.0",
-    "lodash.merge": "^4.6.2",
-    "lodash.zip": "^4.2.0",
-    "shader-loader": "^1.3.1",
-    "worker-loader": "^3.0.8"
+    "html2canvas": "1.4.1",
+    "lodash.compact": "3.0.1",
+    "lodash.debounce": "4.0.8",
+    "lodash.flatten": "4.4.0",
+    "lodash.merge": "4.6.2",
+    "lodash.zip": "4.2.0",
+    "shader-loader": "1.3.1",
+    "worker-loader": "3.0.8"
   }
 }

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -13,7 +13,6 @@ import CinePlayer from '../components/CinePlayer';
 import type { Types } from '@ohif/core';
 
 import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
-import ViewportColorbarsContainer from '../components/ViewportColorbar';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
@@ -305,31 +304,6 @@ const OHIFCornerstoneViewport = React.memo(
       loadViewportData();
     }, [viewportOptions, displaySets, dataSource]);
 
-    /**
-     * There are two scenarios for jump to click
-     * 1. Current viewports contain the displaySet that the annotation was drawn on
-     * 2. Current viewports don't contain the displaySet that the annotation was drawn on
-     * and we need to change the viewports displaySet for jumping.
-     * Since measurement_jump happens via events and listeners, the former case is handled
-     * by the measurement_jump direct callback, but the latter case is handled first by
-     * the viewportGrid to set the correct displaySet on the viewport, AND THEN we check
-     * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
-     */
-    useEffect(() => {
-      if (isJumpToMeasurementDisabled) {
-        return;
-      }
-
-      const { unsubscribe } = measurementService.subscribe(
-        MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT,
-        event => handleJumpToMeasurement(event, elementRef, viewportId, cornerstoneViewportService)
-      );
-
-      return () => {
-        unsubscribe();
-      };
-    }, [displaySets, elementRef, viewportId, isJumpToMeasurementDisabled, servicesManager]);
-
     const Notification = customizationService.getCustomization('ui.notificationComponent');
 
     return (
@@ -387,54 +361,6 @@ const OHIFCornerstoneViewport = React.memo(
   areEqual
 );
 
-// Helper function to handle jumping to measurements
-function handleJumpToMeasurement(event, elementRef, viewportId, cornerstoneViewportService) {
-  const { measurement, isConsumed } = event;
-  if (!measurement || isConsumed) {
-    return;
-  }
-
-  const enabledElement = getEnabledElement(elementRef.current);
-
-  if (!enabledElement) {
-    return;
-  }
-
-  const viewport = enabledElement.viewport as csTypes.IStackViewport | csTypes.IVolumeViewport;
-
-  const { metadata, displaySetInstanceUID } = measurement;
-
-  const viewportDisplaySets = cornerstoneViewportService.getViewportDisplaySets(viewportId);
-
-  const showingDisplaySet = viewportDisplaySets.find(
-    ds => ds.displaySetInstanceUID === displaySetInstanceUID
-  );
-
-  let metadataToUse = metadata;
-  // if it is not showing the displaySet we need to remove the FOR from the metadata
-  if (!showingDisplaySet) {
-    metadataToUse = {
-      ...metadata,
-      FrameOfReferenceUID: undefined,
-    };
-  }
-
-  // Todo: make it work with cases where we want to define FOR based measurements too
-  if (!viewport.isReferenceViewable(metadataToUse, WITH_NAVIGATION)) {
-    return;
-  }
-
-  try {
-    viewport.setViewReference(metadata);
-    viewport.render();
-  } catch (e) {
-    console.warn('Unable to apply', metadata, e);
-  }
-
-  cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
-  event?.consume?.();
-}
-
 function _rehydrateSynchronizers(viewportId: string, syncGroupService: any) {
   const { synchronizersStore } = useSynchronizersStore.getState();
   const synchronizers = synchronizersStore[viewportId];
@@ -558,16 +484,4 @@ function areEqual(prevProps, nextProps) {
   return true;
 }
 
-// Helper function to check if display sets have changed
-function haveDisplaySetsChanged(prevDisplaySets, currentDisplaySets) {
-  if (prevDisplaySets.length !== currentDisplaySets.length) {
-    return true;
-  }
-
-  return currentDisplaySets.some((currentDS, index) => {
-    const prevDS = prevDisplaySets[index];
-    return currentDS.displaySetInstanceUID !== prevDS.displaySetInstanceUID;
-  });
-}
-
 export default OHIFCornerstoneViewport;

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

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
-import { metaData, Enums, utilities } from '@cornerstonejs/core';
+import { metaData, Enums, utilities, eventTarget } from '@cornerstonejs/core';
+import { Enums as csToolsEnums, UltrasoundPleuraBLineTool } from '@cornerstonejs/tools';
 import type { ImageSliceData } from '@cornerstonejs/core/types';
 import { ViewportOverlay } from '@ohif/ui-next';
 import type { InstanceMetadata } from '@ohif/core/src/types';
@@ -68,6 +69,7 @@ function CustomizableViewportOverlay({
     servicesManager.services;
   const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
   const [scale, setScale] = useState(1);
+  const [annotationState, setAnnotationState] = useState(0);
   const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
   const { imageIndex } = imageSliceData;
 
@@ -132,6 +134,20 @@ function CustomizableViewportOverlay({
     };
   }, [viewportId, viewportData, voi, element]);
 
+  const annotationModified = useCallback(evt => {
+    if (evt.detail.annotation.metadata.toolName === UltrasoundPleuraBLineTool.toolName) {
+      // Update the annotation state to trigger a re-render
+      setAnnotationState(prevState => prevState + 1);
+    }
+  }, []);
+
+  useEffect(() => {
+    eventTarget.addEventListener(csToolsEnums.Events.ANNOTATION_MODIFIED, annotationModified);
+
+    return () => {
+      eventTarget.removeEventListener(csToolsEnums.Events.ANNOTATION_MODIFIED, annotationModified);
+    };
+  }, [annotationModified]);
   /**
    * Updating the scale when the viewport changes its zoom
    */
@@ -209,6 +225,7 @@ function CustomizableViewportOverlay({
       voi,
       scale,
       instanceNumber,
+      annotationState,
     ]
   );
 

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

@@ -1,12 +1,6 @@
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import classNames from 'classnames';
-import {
-  metaData,
-  Enums,
-  Types,
-  getEnabledElement,
-  utilities as coreUtilities,
-} from '@cornerstonejs/core';
+import { metaData, Enums, getEnabledElement } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/tools';
 import { vec3 } from 'gl-matrix';
 
@@ -22,75 +16,36 @@ function ViewportOrientationMarkers({
   servicesManager,
   orientationMarkers = ['top', 'left'],
 }: withAppTypes) {
-  // Rotation is in degrees
-  const [rotation, setRotation] = useState(0);
-  const [flipHorizontal, setFlipHorizontal] = useState(false);
-  const [flipVertical, setFlipVertical] = useState(false);
+  const [cameraModifiedTime, setCameraModifiedTime] = useState(0);
   const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
   const { cornerstoneViewportService } = servicesManager.services;
 
-  // Store initial viewUp and viewRight for volume viewports
-  const initialVolumeOrientationRef = useRef<{
-    initialViewUp: number[] | null;
-    initialViewRight: number[] | null;
-  }>({
-    initialViewUp: null,
-    initialViewRight: null,
-  });
-
   useEffect(() => {
-    initialVolumeOrientationRef.current.initialViewUp = null;
-    initialVolumeOrientationRef.current.initialViewRight = null;
-
-    if (viewportData?.viewportType !== 'stack' && element && getEnabledElement(element)) {
-      const { viewport } = getEnabledElement(element);
-      const { viewUp, viewPlaneNormal } = viewport.getCamera();
-
-      const viewRight = vec3.create();
-      vec3.cross(viewRight, viewUp, viewPlaneNormal);
-
-      initialVolumeOrientationRef.current.initialViewUp = [...viewUp];
-      initialVolumeOrientationRef.current.initialViewRight = [...viewRight];
-    }
-  }, [element, viewportData]);
-
-  useEffect(() => {
-    const cameraModifiedListener = (evt: Types.EventTypes.CameraModifiedEvent) => {
-      const { previousCamera, camera } = evt.detail;
-
-      const { rotation } = camera;
-      if (rotation !== undefined) {
-        setRotation(rotation);
-      }
-
-      if (
-        camera.flipHorizontal !== undefined &&
-        previousCamera.flipHorizontal !== camera.flipHorizontal
-      ) {
-        setFlipHorizontal(camera.flipHorizontal);
-      }
-
-      if (
-        camera.flipVertical !== undefined &&
-        previousCamera.flipVertical !== camera.flipVertical
-      ) {
-        setFlipVertical(camera.flipVertical);
-      }
-    };
-
+    const cameraModifiedListener = () => setCameraModifiedTime(Date.now());
     element.addEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
 
     return () => {
       element.removeEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
     };
-  }, []);
+  }, [element]);
 
   const markers = useMemo(() => {
-    if (!viewportData) {
+    if (!viewportData || cameraModifiedTime === 0) {
+      return '';
+    }
+
+    if (!element || !getEnabledElement(element)) {
+      console.log(`ViewportOrientationMarkers :: Viewport element not enabled (${viewportId})`);
+      return '';
+    }
+
+    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
+
+    if (!ohifViewport) {
+      console.log(`ViewportOrientationMarkers :: No viewport (${viewportId})`);
       return '';
     }
 
-    let rowCosines, columnCosines, isDefaultValueSetForRowCosine, isDefaultValueSetForColumnCosine;
     if (viewportData.viewportType === 'stack') {
       const imageIndex = imageSliceData.imageIndex;
       const imageId = viewportData.data[0].imageIds?.[imageIndex];
@@ -100,58 +55,25 @@ function ViewportOrientationMarkers({
         return false;
       }
 
-      ({
-        rowCosines,
-        columnCosines,
-        isDefaultValueSetForColumnCosine,
-        isDefaultValueSetForColumnCosine,
-      } = metaData.get('imagePlaneModule', imageId) || {});
-    } else {
-      if (!element || !getEnabledElement(element)) {
-        return '';
-      }
+      const { isDefaultValueSetForRowCosine, isDefaultValueSetForColumnCosine } =
+        metaData.get('imagePlaneModule', imageId) || {};
 
-      if (
-        initialVolumeOrientationRef.current.initialViewUp &&
-        initialVolumeOrientationRef.current.initialViewRight
-      ) {
-        // Use initial orientation values for consistency, even as the camera changes
-        columnCosines = [
-          -initialVolumeOrientationRef.current.initialViewUp[0],
-          -initialVolumeOrientationRef.current.initialViewUp[1],
-          -initialVolumeOrientationRef.current.initialViewUp[2],
-        ];
-        rowCosines = initialVolumeOrientationRef.current.initialViewRight;
-      } else {
-        console.warn('ViewportOrientationMarkers::No initial orientation values');
+      if (isDefaultValueSetForColumnCosine || isDefaultValueSetForRowCosine) {
         return '';
       }
     }
 
-    if (
-      !rowCosines ||
-      !columnCosines ||
-      rotation === undefined ||
-      isDefaultValueSetForRowCosine ||
-      isDefaultValueSetForColumnCosine
-    ) {
-      return '';
-    }
+    const { viewport } = getEnabledElement(element);
+    const p00 = viewport.canvasToWorld([0, 0]);
+    const p10 = viewport.canvasToWorld([1, 0]);
+    const p01 = viewport.canvasToWorld([0, 1]);
+    const rowCosines = vec3.sub(vec3.create(), p10, p00);
+    const columnCosines = vec3.sub(vec3.create(), p01, p00);
 
-    const markers = _getOrientationMarkers(
-      rowCosines,
-      columnCosines,
-      rotation,
-      flipVertical,
-      flipHorizontal
-    );
+    vec3.normalize(rowCosines, rowCosines);
+    vec3.normalize(columnCosines, columnCosines);
 
-    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
-
-    if (!ohifViewport) {
-      console.log('ViewportOrientationMarkers::No viewport');
-      return null;
-    }
+    const markers = _getOrientationMarkers(rowCosines, columnCosines);
 
     return orientationMarkers.map((m, index) => (
       <div
@@ -168,16 +90,7 @@ function ViewportOrientationMarkers({
         <div className="orientation-marker-value">{markers[m]}</div>
       </div>
     ));
-  }, [
-    viewportData,
-    imageSliceData,
-    rotation,
-    flipVertical,
-    flipHorizontal,
-    orientationMarkers,
-    element,
-    isLight,
-  ]);
+  }, [viewportData, imageSliceData, cameraModifiedTime, orientationMarkers, element, isLight]);
 
   return <div className="ViewportOrientationMarkers select-none">{markers}</div>;
 }
@@ -189,10 +102,8 @@ function ViewportOrientationMarkers({
  *
  * @param {*} rowCosines
  * @param {*} columnCosines
- * @param {*} rotation in degrees
- * @returns
  */
-function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal) {
+function _getOrientationMarkers(rowCosines, columnCosines) {
   const rowString = getOrientationStringLPS(rowCosines);
   const columnString = getOrientationStringLPS(columnCosines);
   const oppositeRowString = invertOrientationStringLPS(rowString);
@@ -205,43 +116,6 @@ function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertica
     bottom: columnString,
   };
 
-  // If any vertical or horizontal flips are applied, change the orientation strings ahead of
-  // the rotation applications
-  if (flipVertical) {
-    markers.top = invertOrientationStringLPS(markers.top);
-    markers.bottom = invertOrientationStringLPS(markers.bottom);
-  }
-
-  if (flipHorizontal) {
-    markers.left = invertOrientationStringLPS(markers.left);
-    markers.right = invertOrientationStringLPS(markers.right);
-  }
-
-  // Swap the labels accordingly if the viewport has been rotated
-  // This could be done in a more complex way for intermediate rotation values (e.g. 45 degrees)
-  if (rotation === 90 || rotation === -270) {
-    return {
-      top: markers.left,
-      left: invertOrientationStringLPS(markers.top),
-      right: invertOrientationStringLPS(markers.bottom),
-      bottom: markers.right, // left
-    };
-  } else if (rotation === -90 || rotation === 270) {
-    return {
-      top: invertOrientationStringLPS(markers.left),
-      left: markers.top,
-      bottom: markers.left,
-      right: markers.bottom,
-    };
-  } else if (rotation === 180 || rotation === -180) {
-    return {
-      top: invertOrientationStringLPS(markers.top),
-      left: invertOrientationStringLPS(markers.left),
-      bottom: invertOrientationStringLPS(markers.bottom),
-      right: invertOrientationStringLPS(markers.right),
-    };
-  }
-
   return markers;
 }
 

extensions/cornerstone/src/commandsModule.ts

@@ -14,13 +14,18 @@ import {
   utilities as cstUtils,
   annotation,
   Types as ToolTypes,
+  SplineContourSegmentationTool,
 } from '@cornerstonejs/tools';
+import {
+  SegmentInfo,
+  LogicalOperation,
+  OperatorOptions,
+} from '@cornerstonejs/tools/utilities/contourSegmentation/logicalOperators';
 import * as cornerstoneTools from '@cornerstonejs/tools';
 import * as labelmapInterpolation from '@cornerstonejs/labelmap-interpolation';
 import { ONNXSegmentationController } from '@cornerstonejs/ai';
 
 import { Types as OhifTypes, utils } from '@ohif/core';
-import i18n from '@ohif/i18n';
 import {
   callInputDialogAutoComplete,
   createReportAsync,
@@ -33,13 +38,25 @@ import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/u
 import { getViewportEnabledElement } from './utils/getViewportEnabledElement';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import toggleVOISliceSync from './utils/toggleVOISliceSync';
-import { usePositionPresentationStore, useSegmentationPresentationStore } from './stores';
+import {
+  usePositionPresentationStore,
+  useSegmentationPresentationStore,
+  useSelectedSegmentationsForViewportStore,
+} from './stores';
 import { toolNames } from './initCornerstoneTools';
 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 import { updateSegmentBidirectionalStats } from './utils/updateSegmentationStats';
 import { generateSegmentationCSVReport } from './utils/generateSegmentationCSVReport';
 import { getUpdatedViewportsForSegmentation } from './utils/hydrationUtils';
 import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import { isMeasurementWithinViewport } from './utils/isMeasurementWithinViewport';
+import { getCenterExtent } from './utils/getCenterExtent';
+import { EasingFunctionEnum } from './utils/transitions';
+import { createSegmentationForViewport } from './utils/createSegmentationForViewport';
+import { utilities as segmentationUtilities } from '@cornerstonejs/tools/segmentation';
+import i18n from '@ohif/i18n';
+
+const { add, intersect, subtract, copy } = cstUtils.contourSegmentation;
 
 const { DefaultHistoryMemo } = csUtils.HistoryMemo;
 const toggleSyncFunctions = {
@@ -99,6 +116,7 @@ let segmentAIEnabled = false;
 function commandsModule({
   servicesManager,
   commandsManager,
+  extensionManager,
 }: OhifTypes.Extensions.ExtensionParams): OhifTypes.Extensions.CommandsModule {
   const {
     viewportGridService,
@@ -142,21 +160,118 @@ function commandsModule({
   }
 
   const actions = {
+    jumpToMeasurementViewport: ({ annotationUID, measurement }) => {
+      cornerstoneTools.annotation.selection.setAnnotationSelected(annotationUID, true);
+      const { metadata } = measurement;
+
+      const activeViewportId = viewportGridService.getActiveViewportId();
+      // Finds the best viewport to jump to for showing the annotation view reference
+      // This may be different from active if there is a viewport already showing the display set.
+      const viewportId = cornerstoneViewportService.findNavigationCompatibleViewportId(
+        activeViewportId,
+        metadata
+      );
+      if (viewportId) {
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+        viewport.setViewReference(metadata);
+        viewport.render();
+
+        /**
+         * If the measurement is not visible inside the current viewport,
+         * we need to move the camera to the measurement.
+         */
+        if (!isMeasurementWithinViewport(viewport, measurement)) {
+          const camera = viewport.getCamera();
+          const { focalPoint: cameraFocalPoint, position: cameraPosition } = camera;
+          const { center, extent } = getCenterExtent(measurement);
+          const position = vec3.sub(vec3.create(), cameraPosition, cameraFocalPoint);
+          vec3.add(position, position, center);
+          viewport.setCamera({ focalPoint: center, position: position as any });
+          /** Zoom out if the measurement is too large */
+          const measurementSize = vec3.dist(extent.min, extent.max);
+          if (measurementSize > camera.parallelScale) {
+            const scaleFactor = measurementSize / camera.parallelScale;
+            viewport.setZoom(viewport.getZoom() / scaleFactor);
+          }
+          viewport.render();
+        }
+
+        return;
+      }
+
+      const { displaySetInstanceUID: referencedDisplaySetInstanceUID } = measurement;
+      if (!referencedDisplaySetInstanceUID) {
+        console.warn('ViewportGrid::No display set found in', measurement);
+        return;
+      }
+
+      // Finds the viewport to update to show the given displayset/orientation.
+      // This will choose a view already containing the measurement display set
+      // if possible, otherwise will fallback to the active.
+      const viewportToUpdate = cornerstoneViewportService.findUpdateableViewportConfiguration(
+        activeViewportId,
+        measurement
+      );
+
+      if (!viewportToUpdate) {
+        console.warn('Unable to find a viewport to show this in');
+        return;
+      }
+      const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+        viewportToUpdate.viewportId,
+        referencedDisplaySetInstanceUID
+      );
+
+      if (!updatedViewports?.[0]) {
+        console.warn(
+          'ViewportGrid::Unable to navigate to viewport containing',
+          referencedDisplaySetInstanceUID
+        );
+        return;
+      }
+
+      updatedViewports[0].viewportOptions = viewportToUpdate.viewportOptions;
+
+      // Update stored position presentation
+      commandsManager.run('updateStoredPositionPresentation', {
+        viewportId: viewportToUpdate.viewportId,
+        displaySetInstanceUIDs: [referencedDisplaySetInstanceUID],
+        referencedImageId: measurement.referencedImageId,
+        options: {
+          ...measurement.metadata,
+        },
+      });
+
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate: updatedViewports });
+    },
+
     hydrateSecondaryDisplaySet: async ({ displaySet, viewportId }) => {
       if (!displaySet) {
         return;
       }
 
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+      if (!viewport) {
+        return;
+      }
+
       if (displaySet.isOverlayDisplaySet) {
         // update the previously stored segmentationPresentation with the new viewportId
         // presentation so that when we put the referencedDisplaySet back in the viewport
         // it will have the correct segmentation representation hydrated
+
+        const segmentationType =
+          // Todo: check if PMAP modality should be handled such as SEG
+          displaySet.Modality !== 'SEG'
+            ? SegmentationRepresentations.Contour
+            : viewport.type === CoreEnums.ViewportType.VOLUME_3D
+              ? SegmentationRepresentations.Surface
+              : SegmentationRepresentations.Labelmap;
+
         commandsManager.runCommand('updateStoredSegmentationPresentation', {
           displaySet,
-          type:
-            displaySet.Modality === 'SEG'
-              ? SegmentationRepresentations.Labelmap
-              : SegmentationRepresentations.Contour,
+          type: segmentationType,
         });
       }
 
@@ -177,10 +292,35 @@ function commandsModule({
           referencedDisplaySetInstanceUID
         );
         storePositionPresentation(referencedDisplaySet);
-        return commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+
+        const results = commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
           viewportId,
           displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
         });
+
+        const disableEditing = customizationService.getCustomization(
+          'panelSegmentation.disableEditing'
+        );
+        if (disableEditing) {
+          const segmentationRepresentations = segmentationService.getSegmentationRepresentations(
+            viewportId,
+            {
+              segmentationId: displaySet.displaySetInstanceUID,
+            }
+          );
+
+          segmentationRepresentations.forEach(representation => {
+            const segmentIndices = Object.keys(representation.segments);
+            segmentIndices.forEach(segmentIndex => {
+              segmentationService.setSegmentLocked(
+                representation.segmentationId,
+                parseInt(segmentIndex),
+                true
+              );
+            });
+          });
+        }
+        return results;
       } else if (displaySet.Modality === 'SR') {
         const results = commandsManager.runCommand('hydrateStructuredReport', {
           displaySetInstanceUID: displaySet.displaySetInstanceUID,
@@ -324,6 +464,8 @@ function commandsModule({
         type,
       });
     },
+
+    /** Stores the changed position presentation */
     updateStoredPositionPresentation: ({
       viewportId,
       displaySetInstanceUIDs,
@@ -347,22 +489,23 @@ function commandsModule({
           ([key, value]) => {
             return (
               displaySetInstanceUIDs.every(uid => key.includes(uid)) &&
-              value.viewportId === viewportId
+              value?.viewportId === viewportId
             );
           }
         )?.[0];
       }
 
       // Create presentation data with referencedImageId and options if provided
-      const presentationData = referencedImageId
-        ? {
-            ...presentations.positionPresentation,
-            viewReference: {
-              referencedImageId,
-              ...options,
-            },
-          }
-        : presentations.positionPresentation;
+      const presentationData =
+        referencedImageId || options?.FrameOfReferenceUID
+          ? {
+              ...presentations.positionPresentation,
+              viewReference: {
+                referencedImageId,
+                ...options,
+              },
+            }
+          : presentations.positionPresentation;
 
       if (previousReferencedDisplaySetStoreKey) {
         setPositionPresentation(previousReferencedDisplaySetStoreKey, presentationData);
@@ -426,8 +569,8 @@ function commandsModule({
       if (!labelConfig) {
         const label = await callInputDialog({
           uiDialogService,
-          title: 'Edit Measurement Label',
-          placeholder: measurement.label || 'Enter new label',
+          title: i18n.t('Tools:Edit Measurement Label'),
+          placeholder: measurement.label || i18n.t('Tools:Enter new label'),
           defaultValue: measurement.label,
         });
 
@@ -445,7 +588,7 @@ function commandsModule({
       });
 
       if (val !== undefined && val !== null) {
-        measurementService.update(uid, { ...val }, true);
+        measurementService.update(uid, { ...measurement, label: val }, true);
       }
     },
     /**
@@ -634,10 +777,22 @@ function commandsModule({
 
       viewportGridService.setActiveViewportId(viewportId);
     },
-    arrowTextCallback: async ({ callback }) => {
+    arrowTextCallback: async ({ callback, data }) => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
       const renderContent = customizationService.getCustomization('ui.labellingComponent');
 
+      if (!labelConfig) {
+        const label = await callInputDialog({
+          uiDialogService,
+          title: i18n.t('Tools:Edit Arrow Text'),
+          placeholder: data?.data?.label || i18n.t('Tools:Enter new text'),
+          defaultValue: data?.data?.label || '',
+        });
+
+        callback?.(label);
+        return;
+      }
+
       const value = await callInputDialogAutoComplete({
         uiDialogService,
         labelConfig,
@@ -822,17 +977,21 @@ function commandsModule({
         }
       }
     },
-    setToolActiveToolbar: ({ value, itemId, toolName, toolGroupIds = [] }) => {
+    setToolActiveToolbar: ({ value, itemId, toolName, toolGroupIds = [], bindings }) => {
       // Sometimes it is passed as value (tools with options), sometimes as itemId (toolbar buttons)
       toolName = toolName || itemId || value;
 
       toolGroupIds = toolGroupIds.length ? toolGroupIds : toolGroupService.getToolGroupIds();
 
       toolGroupIds.forEach(toolGroupId => {
-        actions.setToolActive({ toolName, toolGroupId });
+        actions.setToolActive({ toolName, toolGroupId, bindings });
       });
     },
-    setToolActive: ({ toolName, toolGroupId = null }) => {
+    setToolActive: ({
+      toolName,
+      toolGroupId = null,
+      bindings = [{ mouseButton: Enums.MouseBindings.Primary }],
+    }) => {
       const { viewports } = viewportGridService.getState();
 
       if (!viewports.size) {
@@ -860,11 +1019,7 @@ function commandsModule({
 
       // Set the new toolName to be active
       toolGroup.setToolActive(toolName, {
-        bindings: [
-          {
-            mouseButton: Enums.MouseBindings.Primary,
-          },
-        ],
+        bindings,
       });
     },
     // capture viewport
@@ -874,8 +1029,8 @@ function commandsModule({
       if (!cornerstoneViewportService.getCornerstoneViewport(activeViewportId)) {
         // Cannot download a non-cornerstone viewport (image).
         uiNotificationService.show({
-          title: 'Download Image',
-          message: 'Image cannot be downloaded',
+          title: i18n.t('Tools:Download Image'),
+          message: i18n.t('Tools:Image cannot be downloaded'),
           type: 'error',
         });
         return;
@@ -886,7 +1041,7 @@ function commandsModule({
       if (uiModalService) {
         uiModalService.show({
           content: CornerstoneViewportDownloadForm,
-          title: 'Download High Quality Image',
+          title: i18n.t('Tools:Download High Quality Image'),
           contentProps: {
             activeViewportId,
             cornerstoneViewportService,
@@ -1337,48 +1492,24 @@ function commandsModule({
      * as a segmentation representation to the viewport.
      */
     createLabelmapForViewport: async ({ viewportId, options = {} }) => {
-      const { viewportGridService, displaySetService, segmentationService } =
-        servicesManager.services;
-      const { viewports } = viewportGridService.getState();
-      const targetViewportId = viewportId;
-
-      const viewport = viewports.get(targetViewportId);
-
-      // Todo: add support for multiple display sets
-      const displaySetInstanceUID =
-        options.displaySetInstanceUID || viewport.displaySetInstanceUIDs[0];
-
-      const segs = segmentationService.getSegmentations();
-
-      const label = options.label || `Segmentation ${segs.length + 1}`;
-      const segmentationId = options.segmentationId || `${csUtils.uuidv4()}`;
-
-      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-
-      // This will create the segmentation and register it as a display set
-      const generatedSegmentationId = await segmentationService.createLabelmapForDisplaySet(
-        displaySet,
-        {
-          label,
-          segmentationId,
-          segments: options.createInitialSegment
-            ? {
-                1: {
-                  label: `${i18n.t('Segment')} 1`,
-                  active: true,
-                },
-              }
-            : {},
-        }
-      );
-
-      // Also add the segmentation representation to the viewport
-      await segmentationService.addSegmentationRepresentation(viewportId, {
-        segmentationId,
-        type: Enums.SegmentationRepresentations.Labelmap,
+      return createSegmentationForViewport(servicesManager, {
+        viewportId,
+        options,
+        segmentationType: SegmentationRepresentations.Labelmap,
+      });
+    },
+    /**
+     * Creates a contour for the active viewport
+     *
+     * The created contour will be registered as a display set and also added
+     * as a segmentation representation to the viewport.
+     */
+    createContourForViewport: async ({ viewportId, options = {} }) => {
+      return createSegmentationForViewport(servicesManager, {
+        viewportId,
+        options,
+        segmentationType: SegmentationRepresentations.Contour,
       });
-
-      return generatedSegmentationId;
     },
 
     /**
@@ -1397,9 +1528,9 @@ function commandsModule({
      * Adds a new segment to a segmentation
      * @param props.segmentationId - The ID of the segmentation to add the segment to
      */
-    addSegmentCommand: ({ segmentationId }) => {
+    addSegmentCommand: ({ segmentationId, config }) => {
       const { segmentationService } = servicesManager.services;
-      segmentationService.addSegment(segmentationId);
+      segmentationService.addSegment(segmentationId, config);
     },
 
     /**
@@ -1415,7 +1546,33 @@ function commandsModule({
         segmentationId
       );
       segmentationService.setActiveSegment(segmentationId, segmentIndex);
-      segmentationService.jumpToSegmentCenter(segmentationId, segmentIndex);
+
+      const { highlightAlpha, highlightSegment, animationLength, animationFunctionType } =
+        (customizationService.getCustomization(
+          'panelSegmentation.jumpToSegmentHighlightAnimationConfig'
+        ) as Object as {
+          highlightAlpha?: number;
+          highlightSegment?: boolean;
+          animationLength?: number;
+          animationFunctionType?: EasingFunctionEnum;
+        }) ?? {};
+
+      const validAnimationFunctionType = Object.values(EasingFunctionEnum).includes(
+        animationFunctionType
+      )
+        ? animationFunctionType
+        : undefined;
+
+      segmentationService.jumpToSegmentCenter(
+        segmentationId,
+        segmentIndex,
+        undefined,
+        highlightAlpha,
+        highlightSegment,
+        animationLength,
+        undefined,
+        validAnimationFunctionType
+      );
     },
 
     /**
@@ -1615,8 +1772,8 @@ function commandsModule({
 
       callInputDialog({
         uiDialogService,
-        title: 'Edit Segment Label',
-        placeholder: 'Enter new label',
+        title: i18n.t('Tools:Edit Segment Label'),
+        placeholder: i18n.t('Tools:Enter new label'),
         defaultValue: segment.label,
       }).then(label => {
         segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
@@ -1635,8 +1792,8 @@ function commandsModule({
 
       callInputDialog({
         uiDialogService,
-        title: 'Edit Segmentation Label',
-        placeholder: 'Enter new label',
+        title: i18n.t('Tools:Edit Segmentation Label'),
+        placeholder: i18n.t('Tools:Enter new label'),
         defaultValue: label,
       }).then(label => {
         segmentationService.addOrUpdateSegmentation({ segmentationId, label });
@@ -1658,7 +1815,7 @@ function commandsModule({
 
       uiDialogService.show({
         content: colorPickerDialog,
-        title: 'Segment Color',
+        title: i18n.t('Tools:Segment Color'),
         contentProps: {
           value: rgbaColor,
           onSave: newRgbaColor => {
@@ -1728,6 +1885,64 @@ function commandsModule({
         }
       });
     },
+    toggleSegmentLabel: ({ enabled }: { enabled?: boolean }) => {
+      const toolName = cornerstoneTools.SegmentLabelTool.toolName;
+      const toolGroupIds = toolGroupService.getToolGroupIds();
+
+      const isToolOn = toolGroupIds.some(toolGroupId => {
+        const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
+        const mode = toolGroup.getToolInstance(toolName)?.mode;
+        return mode === 'Active';
+      });
+
+      const enableTool = enabled !== undefined ? enabled : !isToolOn;
+
+      toolGroupIds.forEach(toolGroupId => {
+        const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
+        if (enableTool) {
+          toolGroup.setToolActive(toolName);
+        } else {
+          toolGroup.setToolDisabled(toolName);
+        }
+      });
+    },
+    /**
+     * Used to sync the apps initial state with the config file settings.
+     *
+     * Will mutate the tools object of the given tool group and add the segmentLabelTool to the proper place.
+     *
+     * Use it before initializing the toolGroup with the tools.
+     */
+    initializeSegmentLabelTool: ({ tools }) => {
+      const appConfig = extensionManager.appConfig;
+      const segmentLabelConfig = appConfig.segmentation?.segmentLabel;
+
+      if (segmentLabelConfig?.enabledByDefault) {
+        const activeTools = tools?.active ?? [];
+        activeTools.push({
+          toolName: toolNames.SegmentLabel,
+          configuration: {
+            hoverTimeout: segmentLabelConfig?.hoverTimeout ?? 1,
+            color: segmentLabelConfig?.labelColor,
+            background: segmentLabelConfig?.background,
+          },
+        });
+
+        tools.active = activeTools;
+        return tools;
+      }
+
+      const disabledTools = tools?.disabled ?? [];
+      disabledTools.push({
+        toolName: toolNames.SegmentLabel,
+        configuration: {
+          hoverTimeout: segmentLabelConfig?.hoverTimeout ?? 1,
+          color: segmentLabelConfig?.labelColor,
+        },
+      });
+      tools.disabled = disabledTools;
+      return tools;
+    },
     toggleUseCenterSegmentIndex: ({ toggle }) => {
       let labelmapTools = getLabelmapTools({ toolGroupService });
       labelmapTools = labelmapTools.filter(tool => !tool.toolName.includes('Eraser'));
@@ -1874,6 +2089,9 @@ function commandsModule({
       const { segmentationService } = servicesManager.services;
       const { activeViewportId } = viewportGridService.getState();
       const activeSegmentation = segmentationService.getActiveSegmentation(activeViewportId);
+      if (!activeSegmentation) {
+        return;
+      }
       segmentationService.addSegment(activeSegmentation.segmentationId);
     },
     loadSegmentationDisplaySetsForViewport: ({ viewportId, displaySetInstanceUIDs }) => {
@@ -2010,6 +2228,12 @@ function commandsModule({
         viewport.render();
       }
     },
+    startRecordingForAnnotationGroup: () => {
+      cornerstoneTools.AnnotationTool.startGroupRecording();
+    },
+    endRecordingForAnnotationGroup: () => {
+      cornerstoneTools.AnnotationTool.endGroupRecording();
+    },
     triggerCreateAnnotationMemo: ({
       annotation,
       FrameOfReferenceUID,
@@ -2035,6 +2259,207 @@ function commandsModule({
         deleting,
       });
     },
+    activateSelectedSegmentationOfType: ({ segmentationRepresentationType }) => {
+      const { segmentationService, viewportGridService } = servicesManager.services;
+      const activeViewportId = viewportGridService.getActiveViewportId();
+      const { selectedSegmentationsForViewport } =
+        useSelectedSegmentationsForViewportStore.getState();
+      const segmentationId = selectedSegmentationsForViewport[activeViewportId]?.get(
+        segmentationRepresentationType
+      );
+
+      if (!segmentationId) {
+        return;
+      }
+
+      segmentationService.setActiveSegmentation(activeViewportId, segmentationId);
+    },
+    setDynamicCursorSizeForSculptorTool: ({ value: isDynamicCursorSize }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      const sculptorToolInstance = toolGroup.getToolInstance(toolNames.SculptorTool);
+      const oldConfiguration = sculptorToolInstance.configuration;
+
+      sculptorToolInstance.configuration = {
+        ...oldConfiguration,
+        updateCursorSize: isDynamicCursorSize ? 'dynamic' : '',
+      };
+    },
+    setInterpolationToolConfiguration: ({ value: interpolateContours, toolNames }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+      // Set the interpolation configuration for the active tool.
+      const activeTool = toolGroupService.getActiveToolForViewport(viewportId);
+      const interpolationConfig = {
+        interpolation: {
+          enabled: interpolateContours,
+          showInterpolationPolyline: true,
+        },
+      };
+      toolGroup.setToolConfiguration(activeTool, interpolationConfig);
+
+      // Now set the interpolation configuration for the other tools specified.
+      if (toolNames) {
+        Object.values(toolGroup.getToolInstances()).forEach(toolInstance => {
+          if (toolNames?.includes(toolInstance.toolName)) {
+            toolGroup.setToolConfiguration(toolInstance.toolName, interpolationConfig);
+          }
+        });
+      }
+    },
+    setSimplifiedSplineForSplineContourSegmentationTool: ({ value: simplifiedSpline }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      Object.values(toolGroup.getToolInstances()).forEach(toolInstance => {
+        if (toolInstance instanceof SplineContourSegmentationTool) {
+          const oldConfiguration = toolInstance.configuration;
+          toolInstance.configuration = {
+            ...oldConfiguration,
+            simplifiedSpline,
+          };
+        }
+      });
+    },
+    removeSmallContours: ({ areaThreshold: threshold }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { removeContourIslands } = segmentationUtilities;
+      removeContourIslands(activeSegmentation.segmentationId, activeSegment.segmentIndex, {
+        threshold,
+      });
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    applyLogicalContourOperation: ({
+      segmentAInfo,
+      segmentBInfo,
+      resultSegmentInfo,
+      logicalOperation,
+    }: {
+      segmentAInfo: SegmentInfo;
+      segmentBInfo: SegmentInfo;
+      resultSegmentInfo: OperatorOptions;
+      logicalOperation: LogicalOperation;
+    }) => {
+      switch (logicalOperation) {
+        case LogicalOperation.Union:
+          add(segmentAInfo, segmentBInfo, resultSegmentInfo);
+          break;
+        case LogicalOperation.Intersect:
+          intersect(segmentAInfo, segmentBInfo, resultSegmentInfo);
+          break;
+        case LogicalOperation.Subtract:
+          subtract(segmentAInfo, segmentBInfo, resultSegmentInfo);
+          break;
+        default:
+          throw new Error('Unsupported logical operation');
+          break;
+      }
+    },
+    copyContourSegment: ({
+      sourceSegmentInfo,
+      targetSegmentInfo,
+    }: {
+      sourceSegmentInfo: SegmentInfo;
+      targetSegmentInfo?: SegmentInfo;
+    }) => {
+      if (!targetSegmentInfo) {
+        targetSegmentInfo = {
+          segmentationId: sourceSegmentInfo.segmentationId,
+          segmentIndex: segmentationService.getNextAvailableSegmentIndex(
+            sourceSegmentInfo.segmentationId
+          ),
+        };
+        segmentationService.addSegment(targetSegmentInfo.segmentationId, {
+          segmentIndex: targetSegmentInfo.segmentIndex,
+        });
+      }
+
+      copy(sourceSegmentInfo, targetSegmentInfo);
+    },
+    smoothContours: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { smoothContours } = segmentationUtilities;
+      smoothContours(activeSegmentation.segmentationId, activeSegment.segmentIndex);
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    removeContourHoles: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { removeContourHoles } = segmentationUtilities;
+      removeContourHoles(activeSegmentation.segmentationId, activeSegment.segmentIndex);
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    decimateContours: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { decimateContours } = segmentationUtilities;
+      decimateContours(activeSegmentation.segmentationId, activeSegment.segmentIndex);
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    convertContourHoles: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const targetSegmentInfo = {
+        segmentationId: activeSegmentation.segmentationId,
+        segmentIndex: segmentationService.getNextAvailableSegmentIndex(
+          activeSegmentation.segmentationId
+        ),
+      };
+
+      segmentationService.addSegment(targetSegmentInfo.segmentationId, {
+        segmentIndex: targetSegmentInfo.segmentIndex,
+      });
+
+      const { convertContourHoles } = segmentationUtilities;
+      convertContourHoles(
+        activeSegmentation.segmentationId,
+        activeSegment.segmentIndex,
+        targetSegmentInfo.segmentationId,
+        targetSegmentInfo.segmentIndex
+      );
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
   };
 
   const definitions = {
@@ -2072,9 +2497,7 @@ function commandsModule({
     updateMeasurement: {
       commandFn: actions.updateMeasurement,
     },
-    jumpToMeasurement: {
-      commandFn: actions.jumpToMeasurement,
-    },
+    jumpToMeasurement: actions.jumpToMeasurement,
     removeMeasurement: {
       commandFn: actions.removeMeasurement,
     },
@@ -2235,6 +2658,9 @@ function commandsModule({
     createLabelmapForViewport: {
       commandFn: actions.createLabelmapForViewport,
     },
+    createContourForViewport: {
+      commandFn: actions.createContourForViewport,
+    },
     setActiveSegmentation: {
       commandFn: actions.setActiveSegmentation,
     },
@@ -2331,6 +2757,23 @@ function commandsModule({
     hydrateSecondaryDisplaySet: actions.hydrateSecondaryDisplaySet,
     getVolumeIdForDisplaySet: actions.getVolumeIdForDisplaySet,
     triggerCreateAnnotationMemo: actions.triggerCreateAnnotationMemo,
+    startRecordingForAnnotationGroup: actions.startRecordingForAnnotationGroup,
+    endRecordingForAnnotationGroup: actions.endRecordingForAnnotationGroup,
+    toggleSegmentLabel: actions.toggleSegmentLabel,
+    jumpToMeasurementViewport: actions.jumpToMeasurementViewport,
+    initializeSegmentLabelTool: actions.initializeSegmentLabelTool,
+    activateSelectedSegmentationOfType: actions.activateSelectedSegmentationOfType,
+    setDynamicCursorSizeForSculptorTool: actions.setDynamicCursorSizeForSculptorTool,
+    setSimplifiedSplineForSplineContourSegmentationTool:
+      actions.setSimplifiedSplineForSplineContourSegmentationTool,
+    removeSmallContours: actions.removeSmallContours,
+    applyLogicalContourOperation: actions.applyLogicalContourOperation,
+    copyContourSegment: actions.copyContourSegment,
+    smoothContours: actions.smoothContours,
+    removeContourHoles: actions.removeContourHoles,
+    decimateContours: actions.decimateContours,
+    convertContourHoles: actions.convertContourHoles,
+    setInterpolationToolConfiguration: actions.setInterpolationToolConfiguration,
   };
 
   return {

extensions/cornerstone/src/components/AccordionGroup/AccordionGroup.tsx

@@ -55,7 +55,7 @@ const DEFAULT_TYPES = [GroupAccordion, Content, Trigger];
  * measurements panel for a practical, working example.
  */
 export function AccordionGroup(props) {
-  const { grouping, items, children, sourceChildren, type } = props;
+  const { grouping, items, children, sourceChildren } = props;
   const childProps = useSystem();
   let defaultValue = props.defaultValue;
   const groups = grouping.groupingFunction(items, grouping, childProps);

extensions/cornerstone/src/components/AdvancedRenderingControls/AdvancedRenderingControls.tsx

@@ -1,6 +1,20 @@
 import { useToolbar, useViewportMousePosition } from '@ohif/core/src/hooks';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useViewportRendering } from '../../hooks';
+import { ButtonLocation } from '@ohif/core/src/services/ToolBarService/ToolbarService';
+import classNames from 'classnames';
+
+const mouseNearControlsRanges = {
+  [ButtonLocation.TopMiddle]: { minX: 0, minY: 0, maxX: 1, maxY: 0.1 },
+  [ButtonLocation.BottomMiddle]: { minX: 0, minY: 0.9, maxX: 1, maxY: 1 },
+  [ButtonLocation.LeftMiddle]: { minX: 0, minY: 0, maxX: 0.1, maxY: 1 },
+  [ButtonLocation.RightMiddle]: { minX: 0.9, minY: 0, maxX: 1, maxY: 1 },
+};
+
+const getFlexDirectionClassName = (location: ButtonLocation) =>
+  location === ButtonLocation.LeftMiddle || location === ButtonLocation.RightMiddle
+    ? 'flex-col'
+    : 'flex-row';
 
 function AdvancedRenderingControls({
   viewportId,
@@ -24,10 +38,11 @@ function AdvancedRenderingControls({
   });
 
   const mousePosition = useViewportMousePosition(viewportId);
-  const [isAtBottom, setIsAtBottom] = useState(false);
+  const [isMouseNearControls, setIsMouseNearControls] = useState(false);
   const [showAllIcons, setShowAllIcons] = useState(true);
   const firstMountRef = useRef(true);
   const { hasColorbar } = useViewportRendering(viewportId);
+  const [isAnItemOpen, setIsAnItemOpen] = useState(false);
 
   useEffect(() => {
     if (firstMountRef.current) {
@@ -43,13 +58,30 @@ function AdvancedRenderingControls({
 
   useEffect(() => {
     if (!showAllIcons && mousePosition.isInViewport) {
-      if (mousePosition.isInBottomPercentage(10)) {
-        setIsAtBottom(true);
+      const mouseHoverLocation = mouseNearControlsRanges[location];
+      if (mousePosition.isWithinNormalizedBox(mouseHoverLocation)) {
+        setIsMouseNearControls(true);
       } else {
-        setIsAtBottom(false);
+        setIsMouseNearControls(false);
       }
     }
-  }, [mousePosition, showAllIcons]);
+  }, [location, mousePosition, showAllIcons]);
+
+  const handleOnItemOpen = useCallback(
+    (id, viewportId) => {
+      openItem(id, viewportId);
+      setIsAnItemOpen(true);
+    },
+    [openItem, setIsAnItemOpen]
+  );
+
+  const handleOnItemClose = useCallback(
+    (id, viewportId) => {
+      closeItem(id, viewportId);
+      setIsAnItemOpen(false);
+    },
+    [closeItem, setIsAnItemOpen]
+  );
 
   if (!toolbarButtons?.length) {
     return null;
@@ -60,7 +92,7 @@ function AdvancedRenderingControls({
   }
 
   return (
-    <div className="flex flex-row gap-2">
+    <div className={classNames('flex gap-2', getFlexDirectionClassName(location))}>
       {toolbarButtons.map(toolDef => {
         if (!toolDef) {
           return null;
@@ -73,8 +105,8 @@ function AdvancedRenderingControls({
           ...componentProps,
           isOpen: isItemOpen(id, viewportId),
           isLocked: isItemLocked(id, viewportId),
-          onOpen: () => openItem(id, viewportId),
-          onClose: () => closeItem(id, viewportId),
+          onOpen: () => handleOnItemOpen(id, viewportId),
+          onClose: () => handleOnItemClose(id, viewportId),
           onToggleLock: () => toggleLock(id, viewportId),
           viewportId,
         };
@@ -97,7 +129,8 @@ function AdvancedRenderingControls({
 
         // Always show all icons on first mount for 3 seconds
         // After that, always show Colorbar, show others only when mouse is at bottom
-        const shouldBeVisible = showAllIcons || id === 'Colorbar' || isAtBottom;
+        const shouldBeVisible =
+          isAnItemOpen || showAllIcons || id === 'Colorbar' || isMouseNearControls;
 
         return (
           <div

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

@@ -259,22 +259,24 @@ function DicomUploadProgress({
   }, [getPercentCompleteRounded, percentComplete]);
 
   /**
-   * Gets the css style for the 'n of m' (files completed) text. The only css attribute
-   * of the style is width such that the 'n of m' is always a fixed width and thus
-   * as each file completes uploading the text on screen does not constantly shift
-   * left and right.
+   * Gets the CSS style for the 'n of m' (files completed) text.
+   * The width changes according to numFilesCompleted and can vary,
+   * e.g. "1 of 200", "10 of 200", "100 of 200" all have differents width.
    */
   const getNofMFilesStyle = useCallback(() => {
     // the number of digits accounts for the digits being on each side of the ' of '
-    const numDigits = 2 * dicomFileUploaderArr.length.toString().length;
-    // the number of digits + 2 spaces and 2 characters for ' of '
-    const numChars = numDigits + 4;
+    const numDigits =
+      numFilesCompleted.toString().length + dicomFileUploaderArr.length.toString().length;
+    // The number of digits + 3 additional characters (accounts for ' of ').
+    // Even though intuitively 4 should be better, this is the most accurate width.
+    // The font may play a part in this discrepancy.
+    const numChars = numDigits + 3;
     return { width: `${numChars}ch` };
-  }, []);
+  }, [numFilesCompleted]);
 
   const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
     return (
-      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg">
+      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg text-white">
         {numFilesCompleted === dicomFileUploaderArr.length ? (
           <>
             <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${
@@ -290,21 +292,24 @@ function DicomUploadProgress({
           </>
         ) : (
           <>
+            <div className="flex flex-wrap">
+              <span
+                style={getNofMFilesStyle()}
+                className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'text-right')}
+              >
+                {`${numFilesCompleted} of ${dicomFileUploaderArr.length}`}&nbsp;
+              </span>
+              <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{' files completed.'}</span>
+              <br />
+              <span>
+                {timeRemaining ? `Less than ${getFormattedTimeRemaining()} remaining. ` : ''}
+              </span>
+            </div>
+
             <span
-              style={getNofMFilesStyle()}
-              className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'text-end')}
-            >
-              {`${numFilesCompleted} of ${dicomFileUploaderArr.length}`}&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. ` : ''}
-            </span>
-            <span
-              className={classNames(
-                NO_WRAP_ELLIPSIS_CLASS_NAMES,
-                'text-primary hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'
-              )}
+              className={
+                'text-primary hover:text-primary-lightactive:text-aqua-pale ml-auto cursor-pointer whitespace-nowrap'
+              }
               onClick={cancelAllUploads}
             >
               Cancel All Uploads
@@ -354,7 +359,7 @@ function DicomUploadProgress({
                 ></ProgressLoadingBar>
               </div>
               <div className="ml-1 flex w-24 items-center">
-                <div className="w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
+                <div className="w-10 text-right text-foreground">{`${getPercentCompleteRounded()}%`}</div>
                 {getShowFailedOnlyIconComponent()}
               </div>
             </>

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

@@ -75,7 +75,7 @@ const DicomUploadProgressItem = memo(
         <div className="self-top flex w-0 shrink grow flex-col gap-1">
           <div className="flex gap-4">
             <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-white">
               {dicomFileUploader.getFileName()}
             </div>
           </div>

extensions/cornerstone/src/components/ExportSegmentationSubMenuItem.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Icons,
+} from '@ohif/ui-next';
+
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+interface ExportSegmentationSubMenuItemProps {
+  segmentationId: string;
+  segmentationRepresentationType: string;
+  allowExport: boolean;
+  actions: {
+    storeSegmentation: (segmentationId: string) => Promise<void>;
+    onSegmentationDownloadRTSS: (segmentationId: string) => void;
+    onSegmentationDownload: (segmentationId: string) => void;
+    downloadCSVSegmentationReport: (segmentationId: string) => void;
+  };
+}
+
+export const ExportSegmentationSubMenuItem: React.FC<ExportSegmentationSubMenuItemProps> = ({
+  segmentationId,
+  segmentationRepresentationType,
+  allowExport,
+  actions,
+}) => {
+  const { t } = useTranslation('SegmentationTable');
+
+  return (
+    <>
+      {segmentationRepresentationType === SegmentationRepresentations.Labelmap && (
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="pl-1">
+            <Icons.Export className="text-foreground" />
+            <span className="pl-2">{t('Download & Export')}</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuLabel className="flex items-center pl-0">
+                <Icons.Download className="h-5 w-5" />
+                <span className="pl-1">{t('Download')}</span>
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.downloadCSVSegmentationReport(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('CSV Report')}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.onSegmentationDownload(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('DICOM SEG')}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.onSegmentationDownloadRTSS(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('DICOM RTSS')}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="flex items-center pl-0">
+                <Icons.Export className="h-5 w-5" />
+                <span className="pl-1 pt-1">{t('Export')}</span>
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.storeSegmentation(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('DICOM SEG')}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      )}
+      {segmentationRepresentationType === SegmentationRepresentations.Contour && (
+        <>
+          <DropdownMenuItem
+            onClick={e => {
+              e.preventDefault();
+              actions.onSegmentationDownloadRTSS(segmentationId);
+            }}
+            disabled={!allowExport}
+          >
+            <Icons.Export className="text-foreground" />
+            <span className="pl-2">{t('Download DICOM RTSS')}</span>
+          </DropdownMenuItem>
+        </>
+      )}
+    </>
+  );
+};

extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx

@@ -17,13 +17,13 @@ function ModalityLoadBadge({ viewportId }: { viewportId: string }) {
 
   const { isTracked, isLocked } = useMeasurementTracking({ viewportId });
 
-  const { backgroundDisplaySet, overlayDisplaySets } = useViewportDisplaySets(viewportId);
+  const { backgroundDisplaySet } = useViewportDisplaySets(viewportId);
 
   const [specialDisplaySet, setSpecialDisplaySet] = useState(null);
 
   const allDisplaySets = useMemo(() => {
-    return [backgroundDisplaySet, ...overlayDisplaySets].filter(Boolean);
-  }, [backgroundDisplaySet, overlayDisplaySets]);
+    return [backgroundDisplaySet].filter(Boolean);
+  }, [backgroundDisplaySet]);
 
   useEffect(() => {
     const displaySet = allDisplaySets.find(ds => ds.isOverlayDisplaySet || ds?.Modality === 'SR');
@@ -120,7 +120,10 @@ function ModalityLoadBadge({ viewportId }: { viewportId: string }) {
   const StatusArea = () => {
     if (!statusInfo.isHydrated) {
       return (
-        <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+        <div
+          data-cy={`ModalityLoadBadge-${viewportId}`}
+          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">{statusInfo.type}</span>

extensions/cornerstone/src/components/SegmentationToolConfig.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Switch } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+export default function SegmentationToolConfig() {
+  const { commandsManager } = useSystem();
+
+  // Get initial states based on current configuration
+  const [previewEdits, setPreviewEdits] = useState(false);
+  const [segmentLabelEnabled, setSegmentLabelEnabled] = useState(false);
+  const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
+  const [useCenterAsSegmentIndex, setUseCenterAsSegmentIndex] = useState(false);
+
+  const handlePreviewEditsChange = checked => {
+    setPreviewEdits(checked);
+    commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
+  };
+
+  const handleToggleSegmentEnabledChange = checked => {
+    setToggleSegmentEnabled(checked);
+    commandsManager.run('toggleSegmentSelect', { toggle: checked });
+  };
+
+  const handleUseCenterAsSegmentIndexChange = checked => {
+    setUseCenterAsSegmentIndex(checked);
+    commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
+  };
+
+  const handleSegmentLabelEnabledChange = checked => {
+    setSegmentLabelEnabled(checked);
+    commandsManager.run('toggleSegmentLabel', { enabled: checked });
+  };
+
+  return (
+    <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-black px-2 py-3">
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={previewEdits}
+          onCheckedChange={handlePreviewEditsChange}
+        />
+        <span className="text-foreground text-base">Preview edits before creating</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={useCenterAsSegmentIndex}
+          onCheckedChange={handleUseCenterAsSegmentIndexChange}
+        />
+        <span className="text-foreground text-base">Use center as segment index</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={toggleSegmentEnabled}
+          onCheckedChange={handleToggleSegmentEnabledChange}
+        />
+        <span className="text-foreground text-base">Hover on segment border to activate</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={segmentLabelEnabled}
+          onCheckedChange={handleSegmentLabelEnabledChange}
+        />
+        <span className="text-foreground text-base">Show segment name on hover</span>
+      </div>
+    </div>
+  );
+}

extensions/cornerstone/src/components/SegmentationUtilityButton.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { cn, ToolButton } from '@ohif/ui-next';
+import { useUIStateStore } from '@ohif/extension-default';
+
+interface SegmentationUtilityButtonProps {
+  className?: string;
+  isActive?: boolean;
+  id: string;
+}
+
+/**
+ * A button that represents a segmentation utility.
+ * It is implicitly the PopoverTrigger for the options Popover panel that is
+ * opened in the PanelSegmentation component. It in essence is the PopoverTrigger
+ * because typically this button has the associated options to display in the Popover.
+ * Furthermore it also typically has a command for toggling the activeSegmentationUtility
+ * value in the UIStateStore that triggers the fetching of its options.
+
+ * @param props - The props for the button.
+ * @param props.className - The class name for the button.
+ * @param props.isActive - Whether the button is active
+ * @param props.id - The id of the button.
+ */
+function SegmentationUtilityButton(props: SegmentationUtilityButtonProps) {
+  const { className, isActive, id } = props;
+
+  const activeSegmentationUtility = useUIStateStore(
+    store => store.uiState.activeSegmentationUtility
+  );
+
+  const toolButtonClassName = cn(
+    'w-7 h-7 text-primary hover:text-primary hover:!bg-primary/30',
+    className,
+    isActive && 'bg-primary/30'
+  );
+
+  const handleMouseDownCapture = useCallback(
+    event => {
+      if (activeSegmentationUtility === id) {
+        // If this active button is clicked, prevent the default Popover
+        // behaviour of closing the Popover on a pointer/mouse down.
+        // Not doing this will cause the Popover to close and then reopen again.
+        // Why? Because propagating this event will cause PanelSegmentation to
+        // close the Popover by clearing the activeSegmentationUtility. Then
+        // this button will set the activeSegmentationUtility again and the
+        // Popover will reopen.
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [activeSegmentationUtility, id]
+  );
+
+  return (
+    <div onPointerDownCapture={handleMouseDownCapture}>
+      <ToolButton
+        {...props}
+        className={toolButtonClassName}
+      />
+    </div>
+  );
+}
+
+export default SegmentationUtilityButton;

extensions/cornerstone/src/components/SelectItemWithModality.tsx

@@ -4,11 +4,16 @@ import React from 'react';
 const SelectItemWithModality = ({
   displaySet,
   showModality = true,
+  dataCY = `${displaySet.label}-${displaySet.Modality}`,
 }: {
   displaySet: AppTypes.DisplaySet;
   showModality?: boolean;
+  dataCY?: string;
 }): JSX.Element => (
-  <div className="flex w-[90%] items-center justify-between">
+  <div
+    className="flex w-[90%] items-center justify-between"
+    data-cy={dataCY}
+  >
     <span className="text-foreground truncate text-base">{displaySet.label}</span>
     {showModality && displaySet.Modality && (
       <span className="text-muted-foreground flex-shrink-0 whitespace-nowrap text-xs">

extensions/cornerstone/src/components/StudyMeasurements.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useActiveViewportDisplaySets, useSystem, utils } from '@ohif/core';
-// import { AccordionContent, AccordionItem, AccordionTrigger } from '@ohif/ui-next';
+import { useActiveViewportDisplaySets, utils } from '@ohif/core';
 
 import { AccordionGroup } from './AccordionGroup';
 import MeasurementsOrAdditionalFindings from './MeasurementsOrAdditionalFindings';
@@ -24,36 +23,38 @@ export const groupByStudy = (items, grouping, childProps) => {
 
   let firstSelected, firstGroup;
 
-  items.forEach(item => {
-    const studyUID = getItemStudyInstanceUID(item);
-    if (!groups.has(studyUID)) {
-      const items = [];
-      const filter = MeasurementFilters.filterAnd(
-        MeasurementFilters.filterMeasurementsByStudyUID(activeStudyUID),
-        grouping.filter
-      );
-      const group = {
-        ...grouping,
-        items,
-        displayMeasurements: items,
-        key: studyUID,
-        isSelected: studyUID === activeStudyUID,
-        StudyInstanceUID: activeStudyUID,
-        filter,
-        measurementFilter: filter,
-      };
-      if (group.isSelected && !firstSelected) {
-        firstSelected = group;
+  items
+    .filter(item => item.displaySetInstanceUID)
+    .forEach(item => {
+      const studyUID = getItemStudyInstanceUID(item);
+      if (!groups.has(studyUID)) {
+        const items = [];
+        const filter = MeasurementFilters.filterAnd(
+          MeasurementFilters.filterMeasurementsByStudyUID(studyUID),
+          grouping.filter
+        );
+        const group = {
+          ...grouping,
+          items,
+          displayMeasurements: items,
+          key: studyUID,
+          isSelected: studyUID === activeStudyUID,
+          StudyInstanceUID: studyUID,
+          filter,
+          measurementFilter: filter,
+        };
+        if (group.isSelected && !firstSelected) {
+          firstSelected = group;
+        }
+        firstGroup ||= group;
+        groups.set(studyUID, group);
       }
-      firstGroup ||= group;
-      groups.set(studyUID, group);
-    }
-    if (!firstSelected && firstGroup) {
-      firstGroup.isSelected = true;
-    }
-    const group = groups.get(studyUID);
-    group.items.push(item);
-  });
+      if (!firstSelected && firstGroup) {
+        firstGroup.isSelected = true;
+      }
+      const group = groups.get(studyUID);
+      group.items.push(item);
+    });
 
   return groups;
 };
@@ -61,8 +62,7 @@ export const groupByStudy = (items, grouping, childProps) => {
 export function StudyMeasurements(props): React.ReactNode {
   const { items, grouping = {}, children } = props;
 
-  const system = useSystem();
-  const activeDisplaySets = useActiveViewportDisplaySets(system);
+  const activeDisplaySets = useActiveViewportDisplaySets();
   const activeStudyUID = activeDisplaySets?.[0]?.StudyInstanceUID;
 
   return (

extensions/cornerstone/src/components/ViewportColorbar/ViewportColorbar.tsx

@@ -27,6 +27,9 @@ type ColorbarProps = {
   numColorbars: number;
 };
 
+export const isHorizontal = (position: ColorbarPositionType): boolean =>
+  position === 'top' || position === 'bottom';
+
 /**
  * ViewportColorbar Component
  * A React wrapper for the cornerstone ViewportColorbar that adds a close button
@@ -143,8 +146,9 @@ const ViewportColorbar = memo(function ViewportColorbar({
         display: 'flex',
         alignItems: 'center',
         pointerEvents: 'auto',
-        minWidth: position === 'bottom' ? width / 2.5 : '17px',
-        minHeight: position === 'bottom' ? '20px' : numColorbars === 1 ? height / 3 : height / 4,
+        minWidth: isHorizontal(position) ? width / 2.5 : '17px',
+        minHeight: isHorizontal(position) ? '20px' : numColorbars === 1 ? height / 3 : height / 4,
+        height: '1px', // sometimes flex items with min-height need a starting point for its height calculation
         ...positionStylesFromConfig,
       }}
     ></div>

extensions/cornerstone/src/components/ViewportColorbar/ViewportColorbarsContainer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo, memo, useCallback } from 'react';
 import { useSystem } from '@ohif/core';
 import { ColorbarCustomization } from '../../types/Colorbar';
 import type { ColorMapPreset } from '../../types/Colormap';
-import ViewportColorbar from './ViewportColorbar';
+import ViewportColorbar, { isHorizontal } from './ViewportColorbar';
 import useViewportRendering from '../../hooks/useViewportRendering';
 import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
 type ViewportColorbarsContainerProps = {
@@ -74,10 +74,8 @@ const ViewportColorbarsContainer = memo(function ViewportColorbarsContainer({
     return null;
   }
 
-  const isBottom = position === 'bottom';
-
   const isSingleViewport = viewportDisplaySets.length === 1;
-  const showFullList = isSingleViewport || !isBottom;
+  const showFullList = isSingleViewport || !isHorizontal(position);
 
   const colorbarsToUse = showFullList
     ? colorbars

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportDataOverlayMenu.tsx

@@ -36,6 +36,9 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
     foregroundDisplaySets,
   } = useViewportDisplaySets(viewportId);
 
+  const [optimisticOverlayDisplaySets, setOptimisticOverlayDisplaySets] =
+    useState(overlayDisplaySets);
+
   const [thresholdOpacityEnabled, setThresholdOpacityEnabled] = useState(false);
 
   /**
@@ -77,6 +80,18 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
    * Remove a display set layer
    */
   const handleRemoveDisplaySetLayer = (displaySetInstanceUID: string) => {
+    const optimisticOverlayDisplaySetsIndex = optimisticOverlayDisplaySets.findIndex(
+      displaySet => displaySet.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    if (optimisticOverlayDisplaySetsIndex !== -1) {
+      setOptimisticOverlayDisplaySets(prevOptimisticOverlayDisplaySets => {
+        return prevOptimisticOverlayDisplaySets.filter(
+          displaySet => displaySet.displaySetInstanceUID !== displaySetInstanceUID
+        );
+      });
+    }
+
     commandsManager.runCommand('removeDisplaySetLayer', {
       viewportId,
       displaySetInstanceUID,
@@ -110,6 +125,17 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
     );
 
     if (selectedDisplaySet) {
+      setOptimisticOverlayDisplaySets(prevOptimisticOverlayDisplaySets => {
+        const currentDisplaySetIndex = prevOptimisticOverlayDisplaySets.findIndex(
+          displaySet => displaySet.displaySetInstanceUID === currentDisplaySet.displaySetInstanceUID
+        );
+        return [
+          ...prevOptimisticOverlayDisplaySets.slice(0, currentDisplaySetIndex),
+          selectedDisplaySet,
+          ...prevOptimisticOverlayDisplaySets.slice(currentDisplaySetIndex + 1),
+        ];
+      });
+
       handleReplaceDisplaySetLayer(
         currentDisplaySet.displaySetInstanceUID,
         selectedDisplaySet.displaySetInstanceUID
@@ -150,6 +176,10 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
     );
 
     if (selectedDisplaySet) {
+      setOptimisticOverlayDisplaySets(prevOptimisticOverlayDisplaySets => [
+        ...prevOptimisticOverlayDisplaySets,
+        selectedDisplaySet,
+      ]);
       handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
       // Remove this pending segmentation from the list
       setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
@@ -184,7 +214,10 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
   };
 
   return (
-    <div className="bg-popover flex h-full w-[275px] flex-col rounded rounded-md p-1.5">
+    <div
+      className="bg-popover flex h-full w-[275px] flex-col rounded rounded-md p-1.5"
+      data-cy={`viewport-data-overlay-menu-${viewportId}`}
+    >
       {/* Top buttons row */}
       <div className={`flex`}>
         <Button
@@ -206,6 +239,7 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
           onClick={() => {
             setPendingSegmentations([...pendingSegmentations, `seg-${Date.now()}`]);
           }}
+          dataCY={`AddSegmentationDataOverlay-${viewportId}`}
         >
           <Icons.Plus className="h-4 w-4" />
           Segmentation
@@ -215,7 +249,7 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
       <div className="">
         {/* Overlays Segmentation section */}
         <div className="my-2 ml-1">
-          {overlayDisplaySets.map((displaySet, index) => (
+          {optimisticOverlayDisplaySets.map(displaySet => (
             <div
               key={displaySet.displaySetInstanceUID}
               className="mb-1 flex items-center"
@@ -226,7 +260,11 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
                 onValueChange={value => handleOverlaySelectionChange(displaySet, value)}
               >
                 <SelectTrigger className="flex-1">
-                  <SelectValue>{displaySet.label?.toUpperCase()}</SelectValue>
+                  <SelectValue
+                    data-cy={`overlay-ds-select-value-${displaySet.label?.toUpperCase()}`}
+                  >
+                    {displaySet.label?.toUpperCase()}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {/* Include both potential overlays and the current overlay */}
@@ -254,12 +292,14 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
                     variant="ghost"
                     size="icon"
                     className="ml-2 flex-shrink-0"
+                    dataCY={`overlay-ds-more-button-${displaySet.label?.toUpperCase()}`}
                   >
                     <Icons.More className="h-4 w-4" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start">
                   <DropdownMenuItem
+                    data-cy={`overlay-ds-remove-button-${displaySet.label?.toUpperCase()}`}
                     onClick={() => handleRemoveDisplaySetLayer(displaySet.displaySetInstanceUID)}
                   >
                     Remove
@@ -289,7 +329,10 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
                       value={item.displaySetInstanceUID}
                       className="pr-2"
                     >
-                      <SelectItemWithModality displaySet={item} />
+                      <SelectItemWithModality
+                        displaySet={item}
+                        dataCY={`${item.label}`}
+                      />
                     </SelectItem>
                   ))}
                 </SelectContent>

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportDataOverlayMenuWrapper.tsx

@@ -18,6 +18,7 @@ type DataOverlayMenuProps = {
   onOpen?: () => void;
   onClose?: () => void;
   disabled?: boolean;
+  id?: string;
 };
 
 export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): ReactNode {
@@ -40,6 +41,7 @@ export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): Rea
 
   const Icon = <Icons.ViewportViews className={iconClassName} />;
 
+  const idProp = rest.id ? { id: `${rest.id}-${viewportId}` } : {};
   return (
     <Popover
       open={isOpen}
@@ -56,6 +58,7 @@ export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): Rea
               icon="ViewportViews"
               {...rest}
               {...containerProps}
+              {...idProp}
             >
               {Icon}
             </IconContainer>

extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn, Icons, ToolButton, useIconPresentation } from '@ohif/ui-next';
+import { cn, Icons, useIconPresentation } from '@ohif/ui-next';
 import { useSystem } from '@ohif/core';
 import { Enums } from '@cornerstonejs/core';
 import { Popover, PopoverTrigger, PopoverContent, Button, useViewportGrid } from '@ohif/ui-next';
@@ -22,13 +22,20 @@ function ViewportOrientationMenu({
   onClose?: () => void;
   disabled?: boolean;
 }>) {
+  const { servicesManager, commandsManager } = useSystem();
+  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
+  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+  const viewportOrientation = viewportInfo.getOrientation();
+
   const [gridState] = useViewportGrid();
   const viewportIdToUse = viewportId || gridState.activeViewportId;
   const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
-  const { servicesManager, commandsManager } = useSystem();
-  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
+  const [currentOrientation, setCurrentOrientation] = React.useState<string>(
+    typeof viewportOrientation === 'string' ? viewportOrientation : 'axial'
+  );
 
   const handleOrientationChange = (orientation: string) => {
+    setCurrentOrientation(orientation);
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportIdToUse);
     const currentViewportType = viewportInfo?.getViewportType();
 
@@ -56,6 +63,9 @@ function ViewportOrientationMenu({
       case 'coronal':
         orientationEnum = Enums.OrientationAxis.CORONAL;
         break;
+      case 'reformat':
+        orientationEnum = Enums.OrientationAxis.REFORMAT;
+        break;
       default:
         orientationEnum = Enums.OrientationAxis.ACQUISITION;
     }
@@ -106,7 +116,7 @@ function ViewportOrientationMenu({
   // Get proper alignment and side based on the location using toolbar service
   const { align, side } = toolbarService.getAlignAndSide(Number(location));
 
-  const Icon = <Icons.OrientationSwitch className={iconClassName} />;
+  const Icon = React.createElement(getIcon(currentOrientation), { className: iconClassName });
   return (
     <Popover
       open={isOpen}
@@ -139,43 +149,93 @@ function ViewportOrientationMenu({
         </div>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[100px] p-1"
+        className="h-[170px] w-[130px] flex-shrink-0 flex-col items-start rounded p-1"
         align={align}
         side={side}
+        style={{ left: 0 }}
       >
-        <div className="flex flex-col">
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('axial')}
-          >
-            Axial
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('sagittal')}
-          >
-            Sagittal
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('coronal')}
-          >
-            Coronal
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('acquisition')}
-          >
-            Acquisition
-          </Button>
-        </div>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('axial')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'axial' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Axial</div>
+        </Button>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('sagittal')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'sagittal' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Sagittal</div>
+        </Button>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('coronal')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'coronal' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Coronal</div>
+        </Button>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('acquisition')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'acquisition' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Acquisition</div>
+        </Button>
+        {/* Divider */}
+        <div className="mx-1 my-2 border-t border-white/20" />
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('reformat')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'reformat' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Reformat</div>
+        </Button>
       </PopoverContent>
     </Popover>
   );
 }
 
+const getIcon = (orientationName: string) => {
+  switch (orientationName.toLowerCase()) {
+    case 'axial':
+      return Icons.OrientationSwitchA;
+    case 'sagittal':
+      return Icons.OrientationSwitchS;
+    case 'coronal':
+      return Icons.OrientationSwitchC;
+    case 'reformat':
+      return Icons.OrientationSwitchR;
+    case 'acquisition':
+      return Icons.OrientationSwitch;
+    default:
+      return Icons.OrientationSwitch;
+  }
+};
+
 export default ViewportOrientationMenu;

extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx

@@ -1,9 +1,11 @@
 import React, { ReactElement, useCallback } from 'react';
 import { Switch } from '@ohif/ui-next';
 import { useViewportRendering } from '../../hooks/useViewportRendering';
+import { useTranslation } from 'react-i18next';
 
 export function Colorbar({ viewportId }: { viewportId?: string } = {}): ReactElement {
   const { hasColorbar, toggleColorbar } = useViewportRendering(viewportId);
+  const { t } = useTranslation('WindowLevelActionMenu');
 
   const handleToggle = useCallback(() => {
     toggleColorbar();
@@ -16,7 +18,7 @@ export function Colorbar({ viewportId }: { viewportId?: string } = {}): ReactEle
         className="flex-grow"
         onClick={handleToggle}
       >
-        Display Color bar
+        {t('Display Color bar')}
       </span>
       <Switch
         className="ml-2 flex-shrink-0"

extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx

@@ -1,9 +1,11 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { AllInOneMenu, ScrollArea, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
 import { useViewportRendering } from '../../hooks/useViewportRendering';
+import { useTranslation } from 'react-i18next';
 
 export function Colormap({ viewportId }: { viewportId?: string } = {}): ReactElement {
   const { viewportDisplaySets } = useViewportRendering(viewportId);
+  const { t } = useTranslation('WindowLevelActionMenu');
 
   const [activeDisplaySetUID, setActiveDisplaySetUID] = useState<string | undefined>(
     viewportDisplaySets?.[0]?.displaySetInstanceUID
@@ -74,7 +76,7 @@ export function Colormap({ viewportId }: { viewportId?: string } = {}): ReactEle
         className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
         onClick={() => setShowPreview(!showPreview)}
       >
-        <span className="flex-shrink-0">Preview in viewport</span>
+        <span className="flex-shrink-0">{t('Preview in viewport')}</span>
         <Switch
           className="ml-auto flex-shrink-0"
           checked={showPreview}

extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx

@@ -7,6 +7,7 @@ import { WindowLevel } from './WindowLevel';
 import { VolumeRenderingPresets } from './VolumeRenderingPresets';
 import { VolumeRenderingOptions } from './VolumeRenderingOptions';
 import { useViewportRendering } from '../../hooks/useViewportRendering';
+import i18n from 'i18next';
 
 export type WindowLevelActionMenuProps = {
   viewportId: string;
@@ -58,6 +59,7 @@ export function WindowLevelActionMenuContent({
       isVisible={true}
       align={align}
       side={side}
+      backLabel={i18n.t('WindowLevelActionMenu:Back to Display Options')}
     >
       <AllInOneMenu.ItemPanel>
         {!is3DVolume && <Colorbar viewportId={viewportId} />}
@@ -65,7 +67,7 @@ export function WindowLevelActionMenuContent({
         {colorbarProperties?.colormaps && !is3DVolume && (
           <AllInOneMenu.SubMenu
             key="colorLUTPresets"
-            itemLabel="Color LUT"
+            itemLabel={t('Color LUT')}
             itemIcon="icon-color-lut"
             className="flex h-[calc(100%-32px)] flex-col"
           >
@@ -86,7 +88,7 @@ export function WindowLevelActionMenuContent({
         {volumeRenderingPresets && is3DVolume && <VolumeRenderingPresets viewportId={viewportId} />}
 
         {volumeRenderingQualityRange && is3DVolume && (
-          <AllInOneMenu.SubMenu itemLabel="Rendering Options">
+          <AllInOneMenu.SubMenu itemLabel={t('Rendering Options')}>
             <VolumeRenderingOptions viewportId={viewportId} />
           </AllInOneMenu.SubMenu>
         )}

extensions/cornerstone/src/customizations/CustomDropdownMenuContent.tsx

@@ -3,17 +3,14 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
   Icons,
   useSegmentationTableContext,
   useSegmentationExpanded,
 } from '@ohif/ui-next';
 import { useTranslation } from 'react-i18next';
 import { useSystem } from '@ohif/core/src';
+import { ExportSegmentationSubMenuItem } from '../components/ExportSegmentationSubMenuItem';
 
 /**
  * Custom dropdown menu component for segmentation panel that uses context for data
@@ -29,6 +26,8 @@ export const CustomDropdownMenuContent = () => {
     exportOptions,
     activeSegmentation,
     activeSegmentationId,
+    segmentationRepresentationType,
+    disableEditing,
   } = useSegmentationTableContext('CustomDropdownMenu');
 
   // Try to get segmentation data from expanded context first, fall back to table context
@@ -78,10 +77,14 @@ export const CustomDropdownMenuContent = () => {
 
   return (
     <DropdownMenuContent align="start">
-      <DropdownMenuItem onClick={() => onSegmentationAdd(segmentationId)}>
-        <Icons.Add className="text-foreground" />
-        <span className="pl-2">{t('Create New Segmentation')}</span>
-      </DropdownMenuItem>
+      {!disableEditing && (
+        <DropdownMenuItem
+          onClick={() => onSegmentationAdd({ segmentationId, segmentationRepresentationType })}
+        >
+          <Icons.Add className="text-foreground" />
+          <span className="pl-2">{t('Create New Segmentation')}</span>
+        </DropdownMenuItem>
+      )}
       <DropdownMenuSeparator />
       <DropdownMenuLabel>{t('Manage Current Segmentation')}</DropdownMenuLabel>
       <DropdownMenuItem onClick={() => onSegmentationRemoveFromViewport(segmentationId)}>
@@ -92,60 +95,12 @@ export const CustomDropdownMenuContent = () => {
         <Icons.Rename className="text-foreground" />
         <span className="pl-2">{t('Rename')}</span>
       </DropdownMenuItem>
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger className="pl-1">
-          <Icons.Export className="text-foreground" />
-          <span className="pl-2">{t('Download & Export')}</span>
-        </DropdownMenuSubTrigger>
-        <DropdownMenuPortal>
-          <DropdownMenuSubContent>
-            <DropdownMenuLabel className="flex items-center pl-0">
-              <Icons.Download className="h-5 w-5" />
-              <span className="pl-1">{t('Download')}</span>
-            </DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.downloadCSVSegmentationReport(segmentationId);
-              }}
-            >
-              {t('CSV Report')}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.onSegmentationDownload(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM SEG')}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.onSegmentationDownloadRTSS(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM RTSS')}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel className="flex items-center pl-0">
-              <Icons.Export className="h-5 w-5" />
-              <span className="pl-1 pt-1">{t('Export')}</span>
-            </DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.storeSegmentation(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM SEG')}
-            </DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuPortal>
-      </DropdownMenuSub>
+      <ExportSegmentationSubMenuItem
+        segmentationId={segmentationId}
+        segmentationRepresentationType={segmentationRepresentationType}
+        allowExport={allowExport}
+        actions={actions}
+      />
       <DropdownMenuSeparator />
       <DropdownMenuItem onClick={() => onSegmentationDelete(segmentationId)}>
         <Icons.Delete className="text-red-600" />

extensions/cornerstone/src/customizations/captureViewportModalCustomization.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { ImageModal, FooterAction } from '@ohif/ui-next';
-
+import { useTranslation } from 'react-i18next';
 const MAX_TEXTURE_SIZE = 10000;
 const DEFAULT_FILENAME = 'image';
 
@@ -37,6 +37,7 @@ function ViewportDownloadFormNew({
   const [showWarningMessage, setShowWarningMessage] = useState(true);
   const [filename, setFilename] = useState(DEFAULT_FILENAME);
   const [fileType, setFileType] = useState('jpg');
+  const { t } = useTranslation('CaptureViewportModal');
 
   useEffect(() => {
     if (!viewportElement) {
@@ -82,7 +83,7 @@ function ViewportDownloadFormNew({
               value={filename}
               onChange={e => setFilename(e.target.value)}
             >
-              File name
+              {t('File name')}
             </ImageModal.Filename>
             <ImageModal.Filetype
               selected={fileType}
@@ -109,7 +110,7 @@ function ViewportDownloadFormNew({
             maxWidth={MAX_TEXTURE_SIZE.toString()}
             maxHeight={MAX_TEXTURE_SIZE.toString()}
           >
-            Image size <span className="text-muted-foreground">px</span>
+            {t('Image size')} <span className="text-muted-foreground">px</span>
           </ImageModal.ImageSize>
 
           <ImageModal.SwitchOption
@@ -117,7 +118,7 @@ function ViewportDownloadFormNew({
             checked={showAnnotations}
             onCheckedChange={onAnnotationsChange}
           >
-            Include annotations
+            {t('Include annotations')}
           </ImageModal.SwitchOption>
           {warningState.enabled && (
             <ImageModal.SwitchOption
@@ -125,19 +126,21 @@ function ViewportDownloadFormNew({
               checked={showWarningMessage}
               onCheckedChange={setShowWarningMessage}
             >
-              Include warning message
+              {t('Include warning message')}
             </ImageModal.SwitchOption>
           )}
           <FooterAction className="mt-2">
             <FooterAction.Right>
-              <FooterAction.Secondary onClick={onClose}>Cancel</FooterAction.Secondary>
+              <FooterAction.Secondary onClick={onClose}>
+                {t('Common:Cancel')}
+              </FooterAction.Secondary>
               <FooterAction.Primary
                 onClick={() => {
                   onDownload(filename || DEFAULT_FILENAME, fileType);
                   onClose();
                 }}
               >
-                Save
+                {t('Common:Save')}
               </FooterAction.Primary>
             </FooterAction.Right>
           </FooterAction>

extensions/cornerstone/src/customizations/layoutSelectorCustomization.ts

@@ -34,15 +34,20 @@ export default {
       if (!viewportId) {
         return [];
       }
-      const displaySetInsaneUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+      const displaySetInstanceUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
 
-      if (!displaySetInsaneUIDs) {
+      if (!displaySetInstanceUIDs) {
         return [];
       }
 
-      const displaySets = displaySetInsaneUIDs.map(uid =>
-        displaySetService.getDisplaySetByUID(uid)
-      );
+      const displaySets = displaySetInstanceUIDs.map(uid => {
+        const displaySet = displaySetService.getDisplaySetByUID(uid);
+        const referencedDisplaySetUID = displaySet?.measurements?.[0]?.displaySetInstanceUID;
+        if (displaySet.Modality === 'SR' && referencedDisplaySetUID) {
+          return displaySetService.getDisplaySetByUID(referencedDisplaySetUID);
+        }
+        return displaySet;
+      });
 
       return hangingProtocols
         .map(hp => {

extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx

@@ -1,7 +1,9 @@
 import { CustomDropdownMenuContent } from './CustomDropdownMenuContent';
 import { CustomSegmentStatisticsHeader } from './CustomSegmentStatisticsHeader';
-import React, { useState } from 'react';
-import { Switch } from '@ohif/ui-next';
+import SegmentationToolConfig from '../components/SegmentationToolConfig';
+import React from 'react';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import * as cornerstoneTools from '@cornerstonejs/tools';
 
 export default function getSegmentationPanelCustomization({ commandsManager, servicesManager }) {
   return {
@@ -9,10 +11,25 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
     'panelSegmentation.customSegmentStatisticsHeader': CustomSegmentStatisticsHeader,
     'panelSegmentation.disableEditing': false,
     'panelSegmentation.showAddSegment': true,
-    'panelSegmentation.onSegmentationAdd': () => {
+    'panelSegmentation.onSegmentationAdd': async ({
+      segmentationRepresentationType = SegmentationRepresentations.Labelmap,
+    }) => {
       const { viewportGridService } = servicesManager.services;
       const viewportId = viewportGridService.getState().activeViewportId;
-      commandsManager.run('createLabelmapForViewport', { viewportId });
+      if (segmentationRepresentationType === SegmentationRepresentations.Labelmap) {
+        commandsManager.run('createLabelmapForViewport', { viewportId });
+      } else if (segmentationRepresentationType === SegmentationRepresentations.Contour) {
+        const segmentationId = await commandsManager.run('createContourForViewport', {
+          viewportId,
+        });
+        cornerstoneTools.segmentation.config.style.setStyle(
+          { segmentationId, type: SegmentationRepresentations.Contour },
+          {
+            fillAlpha: 0.5,
+            renderFill: true,
+          }
+        );
+      }
     },
     'panelSegmentation.tableMode': 'collapsed',
     'panelSegmentation.readableText': {
@@ -33,53 +50,11 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
       lesionGlycolysis: 'Lesion Glycolysis',
       center: 'Center',
     },
-    'segmentationToolbox.config': () => {
-      // Get initial states based on current configuration
-      const [previewEdits, setPreviewEdits] = useState(false);
-      const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
-      const [useCenterAsSegmentIndex, setUseCenterAsSegmentIndex] = useState(false);
-      const handlePreviewEditsChange = checked => {
-        setPreviewEdits(checked);
-        commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
-      };
-
-      const handleToggleSegmentEnabledChange = checked => {
-        setToggleSegmentEnabled(checked);
-        commandsManager.run('toggleSegmentSelect', { toggle: checked });
-      };
-
-      const handleUseCenterAsSegmentIndexChange = checked => {
-        setUseCenterAsSegmentIndex(checked);
-        commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
-      };
-
-      return (
-        <div className="bg-muted flex flex-col gap-4 border-b border-b-[2px] border-black px-2 py-3">
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={previewEdits}
-              onCheckedChange={handlePreviewEditsChange}
-            />
-            <span className="text-base text-white">Preview edits before creating</span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={useCenterAsSegmentIndex}
-              onCheckedChange={handleUseCenterAsSegmentIndexChange}
-            />
-            <span className="text-base text-white">Use center as segment index</span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={toggleSegmentEnabled}
-              onCheckedChange={handleToggleSegmentEnabledChange}
-            />
-            <span className="text-base text-white">Hover on segment border to activate</span>
-          </div>
-        </div>
-      );
+    'labelMapSegmentationToolbox.config': () => {
+      return <SegmentationToolConfig />;
+    },
+    'contourSegmentationToolbox.config': () => {
+      return <SegmentationToolConfig />;
     },
   };
 }

extensions/cornerstone/src/getCustomizationModule.tsx

@@ -12,13 +12,17 @@ import miscCustomization from './customizations/miscCustomization';
 import captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
 import viewportDownloadWarningCustomization from './customizations/viewportDownloadWarningCustomization';
 
-function getCustomizationModule({ commandsManager, servicesManager }) {
+function getCustomizationModule({ commandsManager, servicesManager, extensionManager }) {
   return [
     {
       name: 'default',
       value: {
         ...viewportOverlayCustomization,
-        ...getSegmentationPanelCustomization({ commandsManager, servicesManager }),
+        ...getSegmentationPanelCustomization({
+          commandsManager,
+          servicesManager,
+          extensionManager,
+        }),
         ...layoutSelectorCustomization,
         ...viewportToolsCustomization,
         ...viewportClickCommandsCustomization,

extensions/cornerstone/src/getPanelModule.tsx

@@ -1,53 +1,67 @@
 import React from 'react';
-
+import { useTranslation } from 'react-i18next';
 import { Toolbox } from '@ohif/extension-default';
 import PanelSegmentation from './panels/PanelSegmentation';
 import ActiveViewportWindowLevel from './components/ActiveViewportWindowLevel';
 import PanelMeasurement from './panels/PanelMeasurement';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import i18n from '@ohif/i18n';
 
 const getPanelModule = ({ commandsManager, servicesManager, extensionManager }: withAppTypes) => {
-  const wrappedPanelSegmentation = ({ configuration }) => {
+  const { toolbarService } = servicesManager.services;
+
+  const toolSectionMap = {
+    [SegmentationRepresentations.Labelmap]: toolbarService.sections.labelMapSegmentationToolbox,
+    [SegmentationRepresentations.Contour]: toolbarService.sections.contourSegmentationToolbox,
+  };
+
+  const wrappedPanelSegmentation = props => {
     return (
       <PanelSegmentation
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
         configuration={{
-          ...configuration,
+          ...props?.configuration,
         }}
+        segmentationRepresentationType={props?.segmentationRepresentationType}
       />
     );
   };
 
-  const wrappedPanelSegmentationNoHeader = ({ configuration }) => {
+  const wrappedPanelSegmentationNoHeader = props => {
     return (
       <PanelSegmentation
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
         configuration={{
-          ...configuration,
+          ...props?.configuration,
         }}
+        segmentationRepresentationType={props?.segmentationRepresentationType}
       />
     );
   };
 
-  const wrappedPanelSegmentationWithTools = ({ configuration }) => {
-    const { toolbarService } = servicesManager.services;
+  const wrappedPanelSegmentationWithTools = props => {
+    const { t } = useTranslation('SegmentationTable');
+    const tKey = `${props.segmentationRepresentationType ?? 'Segmentation'} tools`;
+    const tValue = t(tKey);
 
     return (
       <>
         <Toolbox
-          buttonSectionId={toolbarService.sections.segmentationToolbox}
-          title="Segmentation Tools"
+          buttonSectionId={toolSectionMap[props.segmentationRepresentationType]}
+          title={tValue}
         />
         <PanelSegmentation
           commandsManager={commandsManager}
           servicesManager={servicesManager}
           extensionManager={extensionManager}
           configuration={{
-            ...configuration,
+            ...props?.configuration,
           }}
+          segmentationRepresentationType={props?.segmentationRepresentationType}
         />
       </>
     );
@@ -82,11 +96,26 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
       component: wrappedPanelSegmentationNoHeader,
     },
     {
-      name: 'panelSegmentationWithTools',
+      name: 'panelSegmentationWithToolsLabelMap',
       iconName: 'tab-segmentation',
       iconLabel: 'Segmentation',
-      label: 'Segmentation',
-      component: wrappedPanelSegmentationWithTools,
+      label: i18n.t('SegmentationTable:Labelmap'),
+      component: props =>
+        wrappedPanelSegmentationWithTools({
+          ...props,
+          segmentationRepresentationType: SegmentationRepresentations.Labelmap,
+        }),
+    },
+    {
+      name: 'panelSegmentationWithToolsContour',
+      iconName: 'tab-contours',
+      iconLabel: 'Segmentation',
+      label: i18n.t('SegmentationTable:Contour'),
+      component: props =>
+        wrappedPanelSegmentationWithTools({
+          ...props,
+          segmentationRepresentationType: SegmentationRepresentations.Contour,
+        }),
     },
   ];
 };

extensions/cornerstone/src/hooks/useMeasurements.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import debounce from 'lodash.debounce';
 import { useSystem } from '@ohif/core';
+
 function mapMeasurementToDisplay(measurement, displaySetService) {
   const { referenceSeriesUID } = measurement;
 

extensions/cornerstone/src/hooks/useViewportDisplaySets.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useSystem, utils } from '@ohif/core';
 import { useViewportGrid } from '@ohif/ui-next';
 import {
@@ -122,12 +122,34 @@ export function useViewportDisplaySets(
 
   // Get all available segmentations (only if needed)
   const needsSegmentations = includeOverlay;
-  const segmentationRepresentations = useMemo(
-    () =>
-      needsSegmentations ? segmentationService.getSegmentationRepresentations(viewportIdToUse) : [],
-    [segmentationService, viewportIdToUse, needsSegmentations]
+
+  const [segmentationRepresentations, setSegmentationRepresentations] = useState(
+    needsSegmentations ? segmentationService.getSegmentationRepresentations(viewportIdToUse) : []
   );
 
+  useEffect(() => {
+    setSegmentationRepresentations(
+      needsSegmentations ? segmentationService.getSegmentationRepresentations(viewportIdToUse) : []
+    );
+
+    const unsubscribeArr = needsSegmentations
+      ? [
+          segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
+          segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_REMOVED,
+        ].map(event =>
+          segmentationService.subscribe(event, () => {
+            setSegmentationRepresentations(
+              segmentationService.getSegmentationRepresentations(viewportIdToUse)
+            );
+          })
+        )
+      : [];
+
+    return () => {
+      unsubscribeArr.forEach(item => item.unsubscribe());
+    };
+  }, [segmentationService, viewportIdToUse, needsSegmentations]);
+
   const overlayDisplaySets = useMemo(() => {
     if (!includeOverlay) {
       return [];

extensions/cornerstone/src/hooks/useViewportRendering.tsx

@@ -262,13 +262,13 @@ export function useViewportRendering(
 
           if (volumeId) {
             properties = viewport.getProperties(volumeId);
-            if (properties.voiRange) {
+            if (properties?.voiRange) {
               setVoiRange(properties.voiRange);
               voiRangeRef.current = properties.voiRange;
             }
 
             // Get opacity from colormap if available
-            if (properties.colormap && properties.colormap.opacity !== undefined) {
+            if (properties?.colormap?.opacity !== undefined) {
               const isArray = Array.isArray(properties.colormap.opacity);
               const opacity = isArray
                 ? properties.colormap.opacity.reduce((max, current) => Math.max(max, current), 0)
@@ -279,7 +279,7 @@ export function useViewportRendering(
             }
 
             // Get threshold from colormap if available
-            if (properties.colormap && properties.colormap.threshold !== undefined) {
+            if (properties?.colormap && properties.colormap.threshold !== undefined) {
               setThresholdState(properties.colormap.threshold);
             }
           }
@@ -682,7 +682,7 @@ export function useViewportRendering(
 
       const actorEntries = viewport.getActors();
       const actorEntry = actorEntries?.find(entry =>
-        entry.referencedId.includes(activeDisplaySetInstanceUID)
+        entry.referencedId?.includes(activeDisplaySetInstanceUID)
       );
 
       if (!actorEntry) {

extensions/cornerstone/src/hooks/useViewportSegmentations.ts

@@ -152,15 +152,27 @@ export function useViewportSegmentations({
 
       const representations = segmentationService.getSegmentationRepresentations(viewportId);
 
-      const newSegmentationsWithRepresentations = representations.map(representation => {
-        const segmentation = segmentationService.getSegmentation(representation.segmentationId);
-        const mappedSegmentation = mapSegmentationToDisplay(segmentation, customizationService);
-        return {
-          representation,
-          segmentation: mappedSegmentation,
-        };
+      // Deduplicate representations by segmentationId to prevent showing
+      // the same segmentation multiple times in the panel when it has
+      // multiple representation types (e.g., labelmap and surface)
+      const uniqueSegmentationMap = new Map();
+      representations.forEach(representation => {
+        if (!uniqueSegmentationMap.has(representation.segmentationId)) {
+          uniqueSegmentationMap.set(representation.segmentationId, representation);
+        }
       });
 
+      const newSegmentationsWithRepresentations = Array.from(uniqueSegmentationMap.values()).map(
+        representation => {
+          const segmentation = segmentationService.getSegmentation(representation.segmentationId);
+          const mappedSegmentation = mapSegmentationToDisplay(segmentation, customizationService);
+          return {
+            representation,
+            segmentation: mappedSegmentation,
+          };
+        }
+      );
+
       setSegmentationsWithRepresentations({
         segmentationsWithRepresentations: newSegmentationsWithRepresentations,
         disabled: false,

extensions/cornerstone/src/hps/fourUp.ts

@@ -1,9 +1,9 @@
 import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
-
+import i18n from 'i18next';
 export const fourUp = {
   id: 'fourUp',
   locked: true,
-  name: '3D four up',
+  name: i18n.t('Hps:3D four up'),
   icon: 'layout-advanced-3d-four-up',
   isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
@@ -64,7 +64,7 @@ export const fourUp = {
             customViewportProps: {
               hideOverlays: true,
             },
-            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
+            syncGroups: [HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/hps/frameView.ts

@@ -1,9 +1,9 @@
 import { Types } from '@ohif/core';
-
+import i18n from 'i18next';
 const frameView: Types.HangingProtocol.Protocol = {
   id: '@ohif/frameView',
-  description: 'Frame view for the active series',
-  name: 'Frame View',
+  description: i18n.t('Hps:Frame view for the active series'),
+  name: i18n.t('Hps:Frame View'),
   icon: 'tool-stack-scroll',
   isPreset: true,
   toolGroupIds: ['default'],

extensions/cornerstone/src/hps/main3D.ts

@@ -1,9 +1,9 @@
 import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
-
+import i18n from 'i18next';
 export const main3D = {
   id: 'main3D',
   locked: true,
-  name: '3D main',
+  name: i18n.t('Hps:3D main'),
   icon: 'layout-advanced-3d-main',
   isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',

extensions/cornerstone/src/hps/mpr.ts

@@ -1,5 +1,5 @@
 import { Types } from '@ohif/core';
-
+import i18n from 'i18next';
 export const VOI_SYNC_GROUP = {
   type: 'voi',
   id: 'mpr',
@@ -22,7 +22,7 @@ export const HYDRATE_SEG_SYNC_GROUP = {
 
 export const mpr: Types.HangingProtocol.Protocol = {
   id: 'mpr',
-  name: 'MPR',
+  name: i18n.t('Hps:MPR'),
   locked: true,
   icon: 'layout-advanced-mpr',
   isPreset: true,

extensions/cornerstone/src/hps/mprAnd3DVolumeViewport.ts

@@ -1,9 +1,9 @@
 import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
-
+import i18n from 'i18next';
 export const mprAnd3DVolumeViewport = {
   id: 'mprAnd3DVolumeViewport',
   locked: true,
-  name: 'mpr',
+  name: i18n.t('Hps:mpr'),
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -71,7 +71,7 @@ export const mprAnd3DVolumeViewport = {
             customViewportProps: {
               hideOverlays: true,
             },
-            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
+            syncGroups: [HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/hps/only3D.ts

@@ -1,9 +1,10 @@
 import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+import i18n from 'i18next';
 
 export const only3D = {
   id: 'only3D',
   locked: true,
-  name: '3D only',
+  name: i18n.t('Hps:3D only'),
   icon: 'layout-advanced-3d-only',
   isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
@@ -47,7 +48,7 @@ export const only3D = {
             orientation: 'coronal',
             customViewportProps: {
               hideOverlays: true,
-              syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
+              syncGroups: [HYDRATE_SEG_SYNC_GROUP],
             },
           },
           displaySets: [