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

chore(version): version.json [skip ci]
fix(security): Removed stylus package due to potential security vulnerability and we don't use it. (#5251 )
2025-07-23 15:55:11 +00:00 · 2025-07-23 15:55:05 +00:00 · 2025-07-23 11:49:30 -04:00 · 2025-07-22 12:02:57 -04:00 · 2025-06-09 15:06:36 +00:00 · 2025-06-09 15:06:30 +00:00
1522 changed files with 30786 additions and 66355 deletions
@@ -339,6 +339,7 @@ jobs:
    resource_class: large
    parallelism: 8
    steps:
+      - install_bun
      - run:
          name: Install System Dependencies
          command: |
@@ -352,11 +353,12 @@ jobs:
          name: Export Display Variable
          command: export DISPLAY=:99
      - cypress/install:
-          install-command: yarn install --no-save
+          install-command: bun install --no-save
+          package-manager: yarn
      - cypress/run-tests:
          cypress-command: |
            npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
-          start-command: yarn run test:data && yarn run test:e2e:serve
+          start-command: bun run test:data && bun run test:e2e:serve

  DOCKER_MULTIARCH_MANIFEST:
    <<: *defaults
@@ -455,13 +457,8 @@ workflows:
          filters:
            branches:
              only: master
-      # - HOLD_FOR_APPROVAL:
-      #     type: approval
-      #     requires:
-      #       - BUILD
      - NPM_PUBLISH:
          requires:
-            # - HOLD_FOR_APPROVAL
            - BUILD
      - DOCKER_BETA_PUBLISH:
          requires:
@@ -1,108 +0,0 @@
-name: Build and Deploy Docs
-
-on:
-  push:
-    branches: [master]
-
-env:
-  ACTIONS_STEP_DEBUG: true
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build-and-deploy-docs:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    # Need permissions to read actions and pull requests
-    permissions:
-      actions: read
-      contents: read
-      pull-requests: read
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v2
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20 # Or your desired Node version
-
-      - name: Install root dependencies
-        run: bun install --frozen-lockfile
-
-      # Removed Playwright tests and coverage generation steps
-
-      - name: Find PR and associated workflow run
-        id: find_pr_run
-        env:
-          GH_TOKEN: ${{ github.token }}
-          MERGE_COMMIT_SHA: ${{ github.sha }}
-        run: |
-          # Find the PR associated with the merge commit SHA
-          # Note: This relies on the merge commit being directly pushed to main
-          PR_DATA=$(gh pr list --state merged --search "$MERGE_COMMIT_SHA" --json number,headRefOid --jq '.[0]')
-          if [ -z "$PR_DATA" ]; then
-            echo "Could not find merged PR for commit $MERGE_COMMIT_SHA."
-            # Decide how to handle - fail, or maybe generate coverage now?
-            # For now, let's fail.
-            exit 1
-          fi
-          PR_HEAD_SHA=$(echo "$PR_DATA" | jq -r '.headRefOid')
-          PR_NUMBER=$(echo "$PR_DATA" | jq -r '.number')
-          echo "Found PR Number: $PR_NUMBER"
-          echo "Found PR Head SHA: $PR_HEAD_SHA"
-
-          # Find the latest workflow run ID for the playwright workflow on the PR head commit
-          # Uses the workflow file name 'playwright.yml'
-          # Remove the --status success flag to find any run
-          RUN_ID=$(gh run list --workflow playwright.yml --commit "$PR_HEAD_SHA" --event pull_request --json databaseId --jq '.[0].databaseId')
-
-          if [ -z "$RUN_ID" ]; then
-            echo "Could not find any 'playwright.yml' run for PR $PR_NUMBER (Head SHA: $PR_HEAD_SHA)."
-            # Decide how to handle - maybe try finding the artifact from the merge commit run if that exists?
-            # For now, let's fail.
-            exit 1
-          fi
-          echo "Found Run ID: $RUN_ID"
-          echo "run_id=$RUN_ID" >> $GITHUB_OUTPUT
-
-      - name: Download coverage artifact from PR run
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          mkdir -p ./coverage-artifact
-          gh run download ${{ steps.find_pr_run.outputs.run_id }} -n coverage-report-pr --dir ./coverage-artifact
-          # Check if download was successful (e.g., check if files exist)
-          if [ ! -f ./coverage-artifact/base.css ]; then
-            echo "Failed to download or find expected files in artifact 'coverage-report-pr' from run ${{ steps.find_pr_run.outputs.run_id }}."
-            exit 1
-          fi
-          echo "Artifact downloaded successfully."
-
-      - name: Install docs dependencies
-        run: cd platform/docs && bun install
-
-      - name: Copy coverage to docs static directory
-        run: |
-          # Copy files from the downloaded artifact directory
-          mkdir -p platform/docs/static/coverage
-          cp -r ./coverage-artifact/* platform/docs/static/coverage/
-          # Copy specific asset files from the downloaded artifact root to static root
-          cp ./coverage-artifact/base.css platform/docs/static/
-          cp ./coverage-artifact/block-navigation.js platform/docs/static/
-          cp ./coverage-artifact/prettify.css platform/docs/static/
-          cp ./coverage-artifact/prettify.js platform/docs/static/
-          cp ./coverage-artifact/favicon.png platform/docs/static/
-          cp ./coverage-artifact/sort-arrow-sprite.png platform/docs/static/
-          cp ./coverage-artifact/sorter.js platform/docs/static/
-
-      - name: Build docs
-        run: cd platform/docs && bun run build
-
-      - name: Deploy to Netlify
-        run: |
-          cd platform/docs
-          npx netlify-cli deploy --dir=./build --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
@@ -1,98 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL Advanced"
-
-on:
-  pull_request:
-    branches: [ "main" ]
-  schedule:
-    - cron: '15 1 * * 5'
-
-jobs:
-  analyze:
-    name: Analyze (${{ matrix.language }})
-    # Runner size impacts CodeQL analysis time. To learn more, please see:
-    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
-    #   - https://gh.io/supported-runners-and-hardware-resources
-    #   - https://gh.io/using-larger-runners (GitHub.com only)
-    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      # required for all workflows
-      security-events: write
-
-      # required to fetch internal or private CodeQL packs
-      packages: read
-
-      # only required for workflows in private repositories
-      actions: read
-      contents: read
-
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-        - language: actions
-          build-mode: none
-        - language: javascript-typescript
-          build-mode: none
-        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
-        # Use `c-cpp` to analyze code written in C, C++ or both
-        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
-        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
-        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
-        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
-        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
-        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-
-    # Add any setup steps before running the `github/codeql-action/init` action.
-    # This includes steps like installing compilers or runtimes (`actions/setup-node`
-    # or others). This is typically only required for manual builds.
-    # - name: Setup runtime (example)
-    #   uses: actions/setup-example@v1
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"
@@ -1,54 +1,75 @@
 name: Playwright Tests
 on:
+  push:
+    branches: [main, master]
  pull_request:
-    branches: [master]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
+    branches: [main, master]
 jobs:
  playwright-tests:
    timeout-minutes: 60
-    runs-on: self-hosted
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.51.1-noble
    strategy:
      fail-fast: false
      matrix:
-        node-version: [20]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
    steps:
      - uses: actions/checkout@v4
+      - name: Install unzip
+        run: apt-get update && apt-get install -y unzip
      - uses: oven-sh/setup-bun@v2
      - uses: actions/setup-node@v4
        with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 20
      - name: Install dependencies
        run: bun install --frozen-lockfile
-      - name: Install Playwright browsers
-        run: npx playwright install
+      - name: Set up Git safe directory
+        run: git config --global --add safe.directory /__w/Viewers/Viewers
      - name: Run Playwright tests
        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
+          NODE_OPTIONS="--max_old_space_size=8192" TEST_ENV=true bun x playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: Upload blob report to GitHub Actions Artifacts
        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
-      - name: Upload the coverage report to GitHub Actions Artifacts
-        if: ${{ !cancelled() }}
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+
+  merge-reports:
+    if: ${{ !cancelled() }}
+    needs: [playwright-tests]
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.1-focal
+    steps:
+      - name: Install unzip
+        run: apt-get update && apt-get install -y unzip
+      - uses: oven-sh/setup-bun@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Set up Git safe directory
+        run: git config --global --add safe.directory /__w/Viewers/Viewers
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: bun x playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
        uses: actions/upload-artifact@v4
        with:
-          name: coverage-report-pr
-          path: coverage
-          retention-days: 3
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14
@@ -1,7 +1,7 @@
 # Packages
 node_modules
 .cursor/
-.nyc_output/
+
 # Output
 build
 dist
@@ -13,7 +13,6 @@ coverage/
 .yarn/
 .nx/
 addOns/yarn.lock
-playwright-report/

 # YALC (for Erik)
 .yalc
@@ -58,8 +57,3 @@ tests/test-results/
 tests/playwright-report/
 /blob-report/
 /playwright/.cache/
-
-**/.claude/settings.local.json
-
-# Backup files
-*~
@@ -1,24 +0,0 @@
-{
-  "extends": "@istanbuljs/nyc-config-typescript",
-  "instrument": true,
-  "sourceMap": true,
-  "cache": false,
-  "all": true,
-  "include": [
-    "platform/*/src/**/*.ts",
-    "platform/*/src/**/*.js",
-    "extensions/*/src/**/*.ts",
-    "extensions/*/src/**/*.js",
-    "modes/*/src/**/*.ts",
-    "modes/*/src/**/*.js"
-  ],
-  "exclude": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/test/**",
-    "**/tests/**",
-    "**/examples/**",
-    "**/stories/**",
-    "platform/docs/**"
-  ]
-}
@@ -82,7 +82,6 @@
    "Reslices",
    "roadmap",
    "ROADMAPS",
-    "rtstruct",
    "Segmentations",
    "semibold",
    "sitk",
@@ -110,8 +109,6 @@
    "wado",
    "wadors",
    "wadouri",
-    "workerpool",
-    "Colorbar",
-    "Colorbars"
+    "workerpool"
  ]
 }
@@ -26,7 +26,6 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const NODE_ENV = process.env.NODE_ENV;
 const QUICK_BUILD = process.env.QUICK_BUILD;
 const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';
-const IS_COVERAGE = process.env.COVERAGE === 'true';

 // read from ../version.txt
 const VERSION_NUMBER = fs.readFileSync(path.join(__dirname, '../version.txt'), 'utf8') || '';
@@ -101,30 +100,14 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
        ...(isProdBuild
          ? []
          : [
-              ...(IS_COVERAGE
-                ? [
-                    {
-                      test: /\.[jt]sx?$/,
-                      exclude: /node_modules/,
-                      use: {
-                        loader: 'babel-loader',
-                        options: {
-                          presets: ['@babel/preset-typescript', '@babel/preset-react'],
-                          plugins: ['istanbul'],
-                        },
-                      },
-                    },
-                  ]
-                : [
-                    {
-                      test: /\.[jt]sx?$/,
-                      exclude: /node_modules/,
-                      loader: 'babel-loader',
-                      options: {
-                        plugins: isProdBuild ? [] : ['react-refresh/babel'],
-                      },
-                    },
-                  ]),
+              {
+                test: /\.[jt]sx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                  plugins: isProdBuild ? [] : ['react-refresh/babel'],
+                },
+              },
            ]),
        {
          test: /\.svg?$/,
@@ -98,7 +98,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 && chmod -R 666 /usr/share/nginx/html
+RUN chown -R nginx:nginx /usr/share/nginx/html
 USER nginx
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
@@ -1,7 +1,7 @@
 {
  "name": "@externals/devDependencies",
  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "license": "MIT",
  "private": true,
  "engines": {
@@ -20,17 +20,17 @@
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
-    "@babel/eslint-parser": "7.28.0",
    "@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",
+    "@rsbuild/core": "^1.1.13",
+    "@rsbuild/plugin-node-polyfill": "1.2.0",
+    "@rsbuild/plugin-react": "^1.1.0",
    "@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",
@@ -80,10 +80,10 @@
    "terser-webpack-plugin": "^5.1.4",
    "typescript": "5.5.4",
    "unused-webpack-plugin": "2.4.0",
-    "webpack": "^5.94.0",
+    "webpack": "5.94.0",
    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "5.2.2",
+    "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",
@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-# [3.12.0-beta.7](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.6...v3.12.0-beta.7) (2025-08-15)
+## [3.10.4](https://github.com/OHIF/Viewers/compare/v3.10.2...v3.10.4) (2025-07-23)

 **Note:** Version bump only for package @externals/dicom-microscopy-viewer

@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [3.12.0-beta.6](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.5...v3.12.0-beta.6) (2025-08-13)
+## [3.10.2](https://github.com/OHIF/Viewers/compare/v3.10.1...v3.10.2) (2025-06-09)

 **Note:** Version bump only for package @externals/dicom-microscopy-viewer

@@ -19,7 +19,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [3.12.0-beta.5](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.4...v3.12.0-beta.5) (2025-08-11)
+## [3.10.1](https://github.com/OHIF/Viewers/compare/v3.10.0...v3.10.1) (2025-04-11)

 **Note:** Version bump only for package @externals/dicom-microscopy-viewer

@@ -27,975 +27,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [3.12.0-beta.4](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.3...v3.12.0-beta.4) (2025-08-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.12.0-beta.3](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.2...v3.12.0-beta.3) (2025-08-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.12.0-beta.2](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.1...v3.12.0-beta.2) (2025-08-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.12.0-beta.1](https://github.com/OHIF/Viewers/compare/v3.12.0-beta.0...v3.12.0-beta.1) (2025-08-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.12.0-beta.0](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.116...v3.12.0-beta.0) (2025-08-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.116](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.115...v3.11.0-beta.116) (2025-08-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.115](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.114...v3.11.0-beta.115) (2025-07-31)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.114](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.113...v3.11.0-beta.114) (2025-07-30)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.113](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.112...v3.11.0-beta.113) (2025-07-30)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.112](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.111...v3.11.0-beta.112) (2025-07-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.111](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.110...v3.11.0-beta.111) (2025-07-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.110](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.109...v3.11.0-beta.110) (2025-07-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.109](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.108...v3.11.0-beta.109) (2025-07-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.108](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.107...v3.11.0-beta.108) (2025-07-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.107](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.106...v3.11.0-beta.107) (2025-07-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.106](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.105...v3.11.0-beta.106) (2025-07-24)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.105](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.104...v3.11.0-beta.105) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.104](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.103...v3.11.0-beta.104) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.103](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.102...v3.11.0-beta.103) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.102](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.101...v3.11.0-beta.102) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.101](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.100...v3.11.0-beta.101) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.100](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.99...v3.11.0-beta.100) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.99](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.98...v3.11.0-beta.99) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.98](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.97...v3.11.0-beta.98) (2025-07-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.96...v3.11.0-beta.97) (2025-07-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.95...v3.11.0-beta.96) (2025-07-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.94...v3.11.0-beta.95) (2025-07-21)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.93...v3.11.0-beta.94) (2025-07-21)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.92...v3.11.0-beta.93) (2025-07-21)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.91...v3.11.0-beta.92) (2025-07-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.90...v3.11.0-beta.91) (2025-07-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.89...v3.11.0-beta.90) (2025-07-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.88...v3.11.0-beta.89) (2025-07-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.87...v3.11.0-beta.88) (2025-07-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.86...v3.11.0-beta.87) (2025-07-15)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.85...v3.11.0-beta.86) (2025-07-14)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.84...v3.11.0-beta.85) (2025-07-14)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.83...v3.11.0-beta.84) (2025-07-14)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.82...v3.11.0-beta.83) (2025-07-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.81...v3.11.0-beta.82) (2025-07-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.80...v3.11.0-beta.81) (2025-07-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.79...v3.11.0-beta.80) (2025-07-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.78...v3.11.0-beta.79) (2025-07-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.77...v3.11.0-beta.78) (2025-07-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.76...v3.11.0-beta.77) (2025-07-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.75...v3.11.0-beta.76) (2025-07-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.74...v3.11.0-beta.75) (2025-07-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.73...v3.11.0-beta.74) (2025-07-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.72...v3.11.0-beta.73) (2025-07-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.71...v3.11.0-beta.72) (2025-07-03)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.70...v3.11.0-beta.71) (2025-07-03)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.69...v3.11.0-beta.70) (2025-07-03)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.68...v3.11.0-beta.69) (2025-07-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.67...v3.11.0-beta.68) (2025-06-27)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.66...v3.11.0-beta.67) (2025-06-27)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.65...v3.11.0-beta.66) (2025-06-27)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.64...v3.11.0-beta.65) (2025-06-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.63...v3.11.0-beta.64) (2025-06-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.62...v3.11.0-beta.63) (2025-06-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.61...v3.11.0-beta.62) (2025-06-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.60...v3.11.0-beta.61) (2025-06-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.59...v3.11.0-beta.60) (2025-06-24)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.58...v3.11.0-beta.59) (2025-06-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.57...v3.11.0-beta.58) (2025-06-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.56...v3.11.0-beta.57) (2025-06-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.55...v3.11.0-beta.56) (2025-06-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.55](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.54...v3.11.0-beta.55) (2025-06-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.54](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.53...v3.11.0-beta.54) (2025-06-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.53](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.52...v3.11.0-beta.53) (2025-06-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.52](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.51...v3.11.0-beta.52) (2025-06-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.51](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.50...v3.11.0-beta.51) (2025-06-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.50](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.49...v3.11.0-beta.50) (2025-06-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.49](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.48...v3.11.0-beta.49) (2025-06-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.48](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.47...v3.11.0-beta.48) (2025-06-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.47](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.46...v3.11.0-beta.47) (2025-06-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.46](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.45...v3.11.0-beta.46) (2025-06-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.45](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.44...v3.11.0-beta.45) (2025-05-30)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.44](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.43...v3.11.0-beta.44) (2025-05-29)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.43](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.42...v3.11.0-beta.43) (2025-05-29)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.42](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.41...v3.11.0-beta.42) (2025-05-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.14](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.13...v3.11.0-beta.14) (2025-04-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.13](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.12...v3.11.0-beta.13) (2025-04-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.12](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.11...v3.11.0-beta.12) (2025-04-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.11](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.10...v3.11.0-beta.11) (2025-04-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.10](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.9...v3.11.0-beta.10) (2025-04-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.9](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.8...v3.11.0-beta.9) (2025-04-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.8](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.7...v3.11.0-beta.8) (2025-04-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.7](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.6...v3.11.0-beta.7) (2025-04-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.6](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.5...v3.11.0-beta.6) (2025-04-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.5](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.4...v3.11.0-beta.5) (2025-04-14)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.4](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.3...v3.11.0-beta.4) (2025-04-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.3](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.2...v3.11.0-beta.3) (2025-04-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.2](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.1...v3.11.0-beta.2) (2025-04-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.1](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.0...v3.11.0-beta.1) (2025-04-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.11.0-beta.0](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.159...v3.11.0-beta.0) (2025-04-10)
+# [3.10.0](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.159...v3.10.0) (2025-04-10)

 **Note:** Version bump only for package @externals/dicom-microscopy-viewer

@@ -1,7 +1,7 @@
 {
  "name": "@externals/dicom-microscopy-viewer",
  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "license": "MIT",
  "dependencies": {
    "dicom-microscopy-viewer": "^0.46.1"
@@ -21,24 +21,24 @@
    "preinstall": "cd .. && node preinstall.js"
  },
  "devDependencies": {
-    "@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/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.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"
+    "@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"
  },
  "resolutions": {
    "**/@babel/runtime": "^7.20.13",
    "commander": "8.3.0",
-    "dcmjs": "0.43.1",
+    "dcmjs": "0.38.0",
    "dicomweb-client": ">=0.10.4",
    "nth-check": "^2.1.1",
    "trim-newlines": "^5.0.0",
@@ -3,10 +3,10 @@ module.exports = {
  babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
  plugins: [
-    ['@babel/plugin-transform-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-transform-typescript',
-    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
-    ['@babel/plugin-transform-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
    '@babel/plugin-transform-class-static-block',
  ],
  env: {
@@ -18,23 +18,19 @@ module.exports = {
          {
            modules: 'commonjs',
            debug: false,
-            targets: { node: 'current' },
-            bugfixes: true,
          },
        ],
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
      plugins: [
-        'babel-plugin-istanbul',
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-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',
      ],
    },
    production: {
@@ -1 +1 @@
-becba7861f99ae4e190caddea8b663e60a9883f5
+d383be7c720ec61f5bb1262ebe70893873718951
@@ -1,118 +0,0 @@
-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"
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-transform-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -15,7 +15,7 @@ module.exports = {
        '@babel/preset-react',
      ],
      plugins: [
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-runtime',
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "description": "DICOM Parametric Map read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.7",
-    "@ohif/extension-cornerstone": "3.12.0-beta.7",
-    "@ohif/extension-default": "3.12.0-beta.7",
-    "@ohif/i18n": "3.12.0-beta.7",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-default": "3.10.4",
+    "@ohif/i18n": "3.10.4",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,8 +46,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.32.5",
-    "@cornerstonejs/core": "^3.32.5",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
    "@kitware/vtk.js": "32.12.0",
    "react-color": "^2.19.3"
  }
@@ -1,9 +1,10 @@
-import { utils, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
+import { utils } from '@ohif/core';
 import { metaData, cache, utilities as csUtils, volumeLoader } from '@cornerstonejs/core';
 import { adaptersPMAP } from '@cornerstonejs/adapters';
 import { SOPClassHandlerId } from './id';
-import { dicomLoaderService, VOLUME_LOADER_SCHEME } from '@ohif/extension-cornerstone';
+import { dicomLoaderService } from '@ohif/extension-cornerstone';
+
+const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.30'];

 function _getDisplaySetsFromSeries(
@@ -56,8 +57,7 @@ function _getDisplaySetsFromSeries(
    wadoRoot,
    wadoUriRoot,
    wadoUri,
-    supportsWindowLevel: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('PMAP')}`,
+    isOverlayDisplaySet: true,
  };

  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
@@ -227,8 +227,7 @@ async function _loadParametricMap({ displaySet, headers }: withAppTypes) {
  return derivedVolume;
 }

-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
@@ -1,10 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useViewportGrid } from '@ohif/ui-next';
-import { OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';

 function OHIFCornerstonePMAPViewport(props: withAppTypes) {
-  const { displaySets, children, viewportOptions, displaySetOptions, servicesManager } = props;
+  const {
+    displaySets,
+    children,
+    viewportOptions,
+    displaySetOptions,
+    servicesManager,
+    extensionManager,
+  } = props;
  const viewportId = viewportOptions.viewportId;
  const { displaySetService, segmentationService, uiNotificationService, customizationService } =
    servicesManager.services;
@@ -53,6 +59,9 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {

  const getCornerstoneViewport = useCallback(() => {
    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );

    displaySetOptions.unshift({});
    const [pmapDisplaySetOptions] = displaySetOptions;
@@ -84,7 +93,7 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
    });

    return (
-      <OHIFCornerstoneViewport
+      <Component
        {...props}
        // Referenced + PMAP displaySets must be passed as parameter in this order
        displaySets={[referencedDisplaySet, pmapDisplaySet]}
@@ -95,16 +104,15 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
          presentationIds: viewportOptions.presentationIds,
        }}
        displaySetOptions={[{}, pmapDisplaySetOptions]}
-      />
+      ></Component>
    );
  }, [
+    extensionManager,
    displaySetOptions,
    props,
    pmapDisplaySet,
    viewportOptions.orientation,
    viewportOptions.viewportId,
-    viewportOptions.presentationIds,
-    uiNotificationService,
  ]);

  // Cleanup the PMAP viewport when the viewport is destroyed
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-transform-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -15,7 +15,7 @@ module.exports = {
        '@babel/preset-react',
      ],
      plugins: [
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-runtime',
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.7",
-    "@ohif/extension-cornerstone": "3.12.0-beta.7",
-    "@ohif/extension-default": "3.12.0-beta.7",
-    "@ohif/i18n": "3.12.0-beta.7",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-default": "3.10.4",
+    "@ohif/i18n": "3.10.4",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -27,7 +27,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
      // it will be in the correct position zoom and pan
      commandsManager.runCommand('updateStoredPositionPresentation', {
        viewportId,
-        displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
+        displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
      });

      viewportGridService.setDisplaySetsForViewport({
@@ -1,5 +1,4 @@
-import { utils, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
+import { utils } from '@ohif/core';

 import { SOPClassHandlerId } from './id';
 import loadRTStruct from './loadRTStruct';
@@ -31,7 +30,7 @@ function _getDisplaySetsFromSeries(
  const displaySet = {
    Modality: 'RTSTRUCT',
    loading: false,
-    isReconstructable: false,
+    isReconstructable: false, // by default for now since it is a volumetric SEG currently
    displaySetInstanceUID: utils.guid(),
    SeriesDescription,
    SeriesNumber,
@@ -54,7 +53,6 @@ function _getDisplaySetsFromSeries(
    wadoUriRoot,
    wadoUri,
    isOverlayDisplaySet: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('RTSTRUCT')}`,
  };

  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
@@ -87,7 +85,6 @@ function _getDisplaySetsFromSeries(
        const addedDisplaySet = displaySetsAdded[0];
        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
-          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
          unsubscribe();
        }
      }
@@ -95,22 +92,14 @@ function _getDisplaySetsFromSeries(
  } else {
    const referencedDisplaySet = referencedDisplaySets[0];
    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
-    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
  }

-  displaySet.load = ({ headers, createSegmentation = true }) =>
-    _load(displaySet, servicesManager, extensionManager, headers, createSegmentation);
+  displaySet.load = ({ headers }) => _load(displaySet, servicesManager, extensionManager, headers);

  return [displaySet];
 }

-function _load(
-  rtDisplaySet,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager,
-  headers,
-  createSegmentation = true
-) {
+function _load(rtDisplaySet, servicesManager: AppTypes.ServicesManager, extensionManager, headers) {
  const { SOPInstanceUID } = rtDisplaySet;
  const { segmentationService } = servicesManager.services;
  if (
@@ -132,21 +121,16 @@ function _load(
      rtDisplaySet.structureSet = structureSet;
    }

-    if (createSegmentation) {
-      segmentationService
-        .createSegmentationForRTDisplaySet(rtDisplaySet)
-        .then(() => {
-          rtDisplaySet.loading = false;
-          resolve();
-        })
-        .catch(error => {
-          rtDisplaySet.loading = false;
-          reject(error);
-        });
-    } else {
-      rtDisplaySet.loading = false;
-      resolve();
-    }
+    segmentationService
+      .createSegmentationForRTDisplaySet(rtDisplaySet)
+      .then(() => {
+        rtDisplaySet.loading = false;
+        resolve();
+      })
+      .catch(error => {
+        rtDisplaySet.loading = false;
+        reject(error);
+      });
  });

  return loadPromises[SOPInstanceUID];
@@ -187,14 +171,20 @@ function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
  return ReferencedSeriesSequence;
 }

-function _segmentationExistsInCache() {
+function _segmentationExistsInCache(
+  rtDisplaySet,
+  segmentationService: AppTypes.SegmentationService
+) {
  // Todo: fix this
  return false;
+  // This should be abstracted with the CornerstoneCacheService
+  const rtContourId = rtDisplaySet.displaySetInstanceUID;
+  const contour = segmentationService.getContour(rtContourId);
+
+  return contour !== undefined;
 }

-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
-
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  return [
    {
      name: 'dicom-rt',
@@ -1,4 +1,8 @@
-import { utils, Types } from '@ohif/extension-cornerstone';
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};

 function promptHydrateRT({
  servicesManager,
@@ -6,20 +10,74 @@ function promptHydrateRT({
  viewportId,
  preHydrateCallbacks,
  hydrateRTDisplaySet,
-}: {
-  servicesManager: AppTypes.ServicesManager;
-  rtDisplaySet: AppTypes.DisplaySet;
-  viewportId: string;
-  preHydrateCallbacks?: Types.HydrationCallback[];
-  hydrateRTDisplaySet: Types.HydrationCallback;
-}) {
-  return utils.promptHydrationDialog({
-    servicesManager,
-    viewportId,
-    displaySet: rtDisplaySet,
-    preHydrateCallbacks,
-    hydrateCallback: hydrateRTDisplaySet,
-    type: 'RTSTRUCT',
+}: withAppTypes) {
+  const { uiViewportDialogService, customizationService } = servicesManager.services;
+  const extensionManager = servicesManager._extensionManager;
+  const appConfig = extensionManager._appConfig;
+  return new Promise(async function (resolve, reject) {
+    const promptResult = appConfig?.disableConfirmationPrompts
+      ? RESPONSE.HYDRATE_SEG
+      : await _askHydrate(uiViewportDialogService, customizationService, viewportId);
+
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      preHydrateCallbacks?.forEach(callback => {
+        callback();
+      });
+
+      const isHydrated = await hydrateRTDisplaySet({
+        rtDisplaySet,
+        viewportId,
+        servicesManager,
+      });
+
+      resolve(isHydrated);
+    }
+  });
+}
+
+function _askHydrate(
+  uiViewportDialogService: AppTypes.UIViewportDialogService,
+  customizationService: AppTypes.CustomizationService,
+  viewportId
+) {
+  return new Promise(function (resolve, reject) {
+    const message = customizationService.getCustomization('viewportNotification.hydrateRTMessage');
+    const actions = [
+      {
+        id: 'no-hydrate',
+        type: 'secondary',
+        text: 'No',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        id: 'yes-hydrate',
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.HYDRATE_SEG,
+      },
+    ];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+
+    uiViewportDialogService.show({
+      id: 'promptHydrateRT',
+      viewportId,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+      onKeyPress: event => {
+        if (event.key === 'Enter') {
+          onSubmit(RESPONSE.HYDRATE_SEG);
+        }
+      },
+    });
  });
 }

@@ -1,27 +1,35 @@
-import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import { ViewportActionArrows } from '@ohif/ui-next';
 import { useViewportGrid } from '@ohif/ui-next';
-import {
-  utils,
-  usePositionPresentationStore,
-  OHIFCornerstoneViewport,
-} from '@ohif/extension-cornerstone';
+import { utils } from '@ohif/extension-cornerstone';

 import promptHydrateRT from '../utils/promptHydrateRT';
+import _getStatusComponent from './_getStatusComponent';
+
 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
-import { useSystem } from '@ohif/core/src';
+import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
+
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';

 function OHIFCornerstoneRTViewport(props: withAppTypes) {
-  const { servicesManager, commandsManager } = useSystem();
-  const { children, displaySets, viewportOptions } = props as {
-    children: React.ReactNode;
-    displaySets: AppTypes.DisplaySet[];
-    viewportOptions: AppTypes.ViewportOptions;
-  };
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    servicesManager,
+    extensionManager,
+    commandsManager,
+  } = props;

-  const { displaySetService, toolGroupService, segmentationService, customizationService } =
-    servicesManager.services;
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    uiNotificationService,
+    customizationService,
+    viewportActionCornersService,
+  } = servicesManager.services;

  const viewportId = viewportOptions.viewportId;

@@ -38,34 +46,31 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

  const rtDisplaySet = displaySets[0];

-  const [{ viewports, activeViewportId }, viewportGridService] = useViewportGrid();
+  const [viewportGrid, viewportGridService] = useViewportGrid();

  // States
+  const selectedSegmentObjectIndex: number = 0;
  const { setPositionPresentation } = usePositionPresentationStore();
+
+  // Hydration means that the RT is opened and segments are loaded into the
+  // segmentation panel, and RT is also rendered on any viewport that is in the
+  // same frameOfReferenceUID as the referencedSeriesUID of the RT. However,
+  // loading basically means RT loading over network and bit unpacking of the
+  // RT data.
+  const [isHydrated, setIsHydrated] = useState(rtDisplaySet.isHydrated);
  const [rtIsLoading, setRtIsLoading] = useState(!rtDisplaySet.isLoaded);
+  const [element, setElement] = useState(null);
  const [processingProgress, setProcessingProgress] = useState({
    percentComplete: null,
    totalSegments: null,
  });

+  // refs
  const referencedDisplaySetRef = useRef(null);

+  const { viewports, activeViewportId } = viewportGrid;
+
  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
  );
@@ -75,31 +80,100 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    displaySet: referencedDisplaySet,
    metadata: referencedDisplaySetMetadata,
  };
+  /**
+   * OnElementEnabled callback which is called after the cornerstoneExtension
+   * has enabled the element. Note: we delegate all the image rendering to
+   * cornerstoneExtension, so we don't need to do anything here regarding
+   * the image rendering, element enabling etc.
+   */
+  const onElementEnabled = evt => {
+    setElement(evt.detail.element);
+  };
+
+  const onElementDisabled = () => {
+    setElement(null);
+  };
+
+  const storePresentationState = useCallback(() => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
+      commandsManager.runCommand('storePresentation', {
+        viewportId,
+      });
+    });
+  }, [viewportGrid]);
+
+  const hydrateRTDisplaySet = useCallback(
+    ({ rtDisplaySet, viewportId }) => {
+      commandsManager.runCommand('hydrateRTSDisplaySet', {
+        displaySet: rtDisplaySet,
+        viewportId,
+      });
+    },
+    [commandsManager]
+  );
+
+  const getCornerstoneViewport = useCallback(() => {
+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );
+
+    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
+
+    // Todo: jump to the center of the first segment
+    return (
+      <Component
+        {...props}
+        displaySets={[referencedDisplaySet, rtDisplaySet]}
+        viewportOptions={{
+          viewportType: 'stack',
+          toolGroupId: toolGroupId,
+          orientation: viewportOptions.orientation,
+          viewportId: viewportOptions.viewportId,
+          presentationIds: viewportOptions.presentationIds,
+        }}
+        onElementEnabled={evt => {
+          props.onElementEnabled?.(evt);
+          onElementEnabled(evt);
+        }}
+        onElementDisabled={onElementDisabled}
+      ></Component>
+    );
+  }, [viewportId, rtDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      utils.handleSegmentChange({
+        direction,
+        segDisplaySet: rtDisplaySet,
+        viewportId,
+        selectedSegmentObjectIndex,
+        segmentationService,
+      });
+    },
+    [selectedSegmentObjectIndex]
+  );

  useEffect(() => {
    if (rtIsLoading) {
      return;
    }

-    // if not active viewport, return
-    if (viewportId !== activeViewportId) {
-      return;
-    }
-
    promptHydrateRT({
      servicesManager,
      viewportId,
      rtDisplaySet,
-      hydrateRTDisplaySet: async () => {
-        return commandsManager.runCommand('hydrateSecondaryDisplaySet', {
-          displaySet: rtDisplaySet,
-          viewportId,
-        });
-      },
+      preHydrateCallbacks: [storePresentationState],
+      hydrateRTDisplaySet,
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
    });
-  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading, commandsManager, activeViewportId]);
+  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading]);

  useEffect(() => {
+    // I'm not sure what is this, since in RT we support Overlapping segments
+    // via contours
    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
      evt => {
@@ -119,6 +193,14 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
            viewPresentation: {},
          });
        }
+
+        if (evt.overlappingSegments) {
+          uiNotificationService.show({
+            title: 'Overlapping Segments',
+            message: 'Overlapping segments detected which is not currently supported',
+            type: 'warning',
+          });
+        }
      }
    );

@@ -128,7 +210,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
  }, [rtDisplaySet]);

  useEffect(() => {
-    const segmentLoadingSubscription = segmentationService.subscribe(
+    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE,
      ({ percentComplete, numSegments }) => {
        setProcessingProgress({
@@ -138,7 +220,16 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
      }
    );

-    const displaySetsRemovedSubscription = displaySetService.subscribe(
+    return () => {
+      unsubscribe();
+    };
+  }, [rtDisplaySet]);
+
+  /**
+   Cleanup the SEG viewport when the viewport is destroyed
+   */
+  useEffect(() => {
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
      ({ displaySetInstanceUIDs }) => {
        const activeViewport = viewports.get(activeViewportId);
@@ -152,10 +243,9 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    );

    return () => {
-      segmentLoadingSubscription.unsubscribe();
-      displaySetsRemovedSubscription.unsubscribe();
+      onDisplaySetsRemovedSubscription.unsubscribe();
    };
-  }, [rtDisplaySet, displaySetService, viewports, activeViewportId, viewportGridService]);
+  }, []);

  useEffect(() => {
    let toolGroup = toolGroupService.getToolGroup(toolGroupId);
@@ -169,33 +259,38 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    return () => {
      // remove the segmentation representations if seg displayset changed
      segmentationService.removeSegmentationRepresentations(viewportId);
-      referencedDisplaySetRef.current = null;
+
      toolGroupService.destroyToolGroup(toolGroupId);
    };
  }, []);

-  const getCornerstoneViewport = useCallback(() => {
-    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
+  useEffect(() => {
+    setIsHydrated(rtDisplaySet.isHydrated);

-    // Todo: jump to the center of the first segment
-    return (
-      <OHIFCornerstoneViewport
-        {...props}
-        displaySets={[referencedDisplaySet, rtDisplaySet]}
-        viewportOptions={{
-          viewportType: viewportOptions.viewportType,
-          toolGroupId: toolGroupId,
-          orientation: viewportOptions.orientation,
-          viewportId: viewportOptions.viewportId,
-          presentationIds: viewportOptions.presentationIds,
-        }}
-        onElementEnabled={evt => {
-          props.onElementEnabled?.(evt);
-        }}
-      />
-    );
-  }, [viewportId, rtDisplaySet, toolGroupId]);
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentations(viewportId);
+      referencedDisplaySetRef.current = null;
+    };
+  }, [rtDisplaySet]);

+  const onStatusClick = useCallback(async () => {
+    // Before hydrating a RT and make it added to all viewports in the grid
+    // that share the same frameOfReferenceUID, we need to store the viewport grid
+    // presentation state, so that we can restore it after hydrating the RT. This is
+    // required if the user has changed the viewport (other viewport than RT viewport)
+    // presentation state (w/l and invert) and then opens the RT. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
+    const isHydrated = await hydrateRTDisplaySet({
+      rtDisplaySet,
+      viewportId,
+    });
+
+    setIsHydrated(isHydrated);
+  }, [hydrateRTDisplaySet, rtDisplaySet, storePresentationState, viewportId]);
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;

  if (
@@ -218,6 +313,43 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    });
  }

+  useEffect(() => {
+    viewportActionCornersService.addComponents([
+      {
+        viewportId,
+        id: 'viewportStatusComponent',
+        component: _getStatusComponent({
+          isHydrated,
+          onStatusClick,
+        }),
+        indexPriority: -100,
+        location: viewportActionCornersService.LOCATIONS.topLeft,
+      },
+      {
+        viewportId,
+        id: 'viewportActionArrowsComponent',
+        component: (
+          <ViewportActionArrows
+            key="actionArrows"
+            onArrowsClick={onSegmentChange}
+            className={
+              viewportId === activeViewportId ? 'visible' : 'invisible group-hover/pane:visible'
+            }
+          ></ViewportActionArrows>
+        ),
+        indexPriority: 0,
+        location: viewportActionCornersService.LOCATIONS.topRight,
+      },
+    ]);
+  }, [
+    activeViewportId,
+    isHydrated,
+    onSegmentChange,
+    onStatusClick,
+    viewportActionCornersService,
+    viewportId,
+  ]);
+
  return (
    <>
      <div className="relative flex h-full w-full flex-row overflow-hidden">
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ViewportActionButton } from '@ohif/ui-next';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+
+export default function _getStatusComponent({ isHydrated, onStatusClick }) {
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => <Icons.ByName name="status-alert" />;
+      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
+      break;
+    case false:
+      StatusIcon = () => (
+        <Icons.ByName
+          className="text-muted-foreground h-4 w-4"
+          name="status-untracked"
+        />
+      );
+      ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
+  }
+
+  const StatusArea = () => {
+    const { t } = useTranslation('Common');
+    const loadStr = t('LOAD');
+
+    return (
+      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+          <StatusIcon />
+          <span className="ml-1">RTSTRUCT</span>
+        </div>
+        {!isHydrated && (
+          <ViewportActionButton onInteraction={onStatusClick}>{loadStr}</ViewportActionButton>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <ToolTipMessage />
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-transform-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -15,7 +15,7 @@ module.exports = {
        '@babel/preset-react',
      ],
      plugins: [
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-runtime',
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.7",
-    "@ohif/extension-cornerstone": "3.12.0-beta.7",
-    "@ohif/extension-default": "3.12.0-beta.7",
-    "@ohif/i18n": "3.12.0-beta.7",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-default": "3.10.4",
+    "@ohif/i18n": "3.10.4",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,8 +46,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.32.5",
-    "@cornerstonejs/core": "^3.32.5",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
    "@kitware/vtk.js": "32.12.0",
    "react-color": "^2.19.3"
  }
@@ -220,7 +220,7 @@ const commandsModule = ({
      }

      const { label } = segmentation;
-      const defaultDataSource = dataSource ?? extensionManager.getActiveDataSource()[0];
+      const defaultDataSource = dataSource ?? extensionManager.getActiveDataSource();

      const {
        value: reportName,
@@ -251,11 +251,6 @@ const commandsModule = ({

          const { dataset: naturalizedReport } = generatedData;

-          // DCMJS assigns a dummy study id during creation, and this can cause problems, so clearing it out
-          if (naturalizedReport.StudyID === 'No Study ID') {
-            naturalizedReport.StudyID = '';
-          }
-
          await selectedDataSourceConfig.store.dicom(naturalizedReport);

          // add the information for where we stored it to the instance as well
@@ -1,13 +1,12 @@
-import { utils, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
-import { metaData, eventTarget } from '@cornerstonejs/core';
+import { utils } from '@ohif/core';
+import { metaData, triggerEvent, eventTarget } from '@cornerstonejs/core';
 import { CONSTANTS, segmentation as cstSegmentation } from '@cornerstonejs/tools';
 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', '1.2.840.10008.5.1.4.1.1.66.7'];
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];

 const loadPromises = {};

@@ -34,7 +33,7 @@ function _getDisplaySetsFromSeries(
  const displaySet = {
    Modality: 'SEG',
    loading: false,
-    isReconstructable: false,
+    isReconstructable: true, // by default for now since it is a volumetric SEG currently
    displaySetInstanceUID: utils.guid(),
    SeriesDescription,
    SeriesNumber,
@@ -58,7 +57,6 @@ function _getDisplaySetsFromSeries(
    wadoUriRoot,
    wadoUri,
    isOverlayDisplaySet: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SEG')}`,
  };

  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
@@ -91,14 +89,12 @@ 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 }) =>
@@ -236,8 +232,7 @@ function _segmentationExists(segDisplaySet) {
  return cstSegmentation.state.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }

-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
@@ -1,14 +1,7 @@
-function createSEGToolGroupAndAddTools({
-  commandsManager,
-  toolGroupService,
-  customizationService,
-  toolGroupId,
-}) {
+function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
  const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');

-  const updatedTools = commandsManager.run('initializeSegmentLabelTool', { tools });
-
-  return toolGroupService.createToolGroupAndAddTools(toolGroupId, updatedTools);
+  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }

 export default createSEGToolGroupAndAddTools;
@@ -1,4 +1,8 @@
-import { utils, Types } from '@ohif/extension-cornerstone';
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};

 function promptHydrateSEG({
  servicesManager,
@@ -6,20 +10,75 @@ function promptHydrateSEG({
  viewportId,
  preHydrateCallbacks,
  hydrateCallback,
-}: {
-  servicesManager: AppTypes.ServicesManager;
-  segDisplaySet: AppTypes.DisplaySet;
-  viewportId: string;
-  preHydrateCallbacks?: Types.HydrationCallback[];
-  hydrateCallback: Types.HydrationCallback;
-}) {
-  return utils.promptHydrationDialog({
-    servicesManager,
-    viewportId,
-    displaySet: segDisplaySet as AppTypes.DisplaySet,
-    preHydrateCallbacks,
-    hydrateCallback,
-    type: 'SEG',
+}: withAppTypes) {
+  const { uiViewportDialogService, customizationService } = servicesManager.services;
+  const extensionManager = servicesManager._extensionManager;
+  const appConfig = extensionManager._appConfig;
+
+  return new Promise(async function (resolve, reject) {
+    const promptResult = appConfig?.disableConfirmationPrompts
+      ? RESPONSE.HYDRATE_SEG
+      : await _askHydrate(uiViewportDialogService, customizationService, viewportId);
+
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      preHydrateCallbacks?.forEach(callback => {
+        callback();
+      });
+
+      window.setTimeout(async () => {
+        const isHydrated = await hydrateCallback({
+          segDisplaySet,
+          viewportId,
+        });
+
+        resolve(isHydrated);
+      }, 0);
+    }
+  });
+}
+
+function _askHydrate(
+  uiViewportDialogService: AppTypes.UIViewportDialogService,
+  customizationService: AppTypes.CustomizationService,
+  viewportId
+) {
+  return new Promise(function (resolve, reject) {
+    const message = customizationService.getCustomization('viewportNotification.hydrateSEGMessage');
+    const actions = [
+      {
+        id: 'no-hydrate',
+        type: 'secondary',
+        text: 'No',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        id: 'yes-hydrate',
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.HYDRATE_SEG,
+      },
+    ];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+
+    uiViewportDialogService.show({
+      viewportId,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+      onKeyPress: event => {
+        if (event.key === 'Enter') {
+          onSubmit(RESPONSE.HYDRATE_SEG);
+        }
+      },
+    });
  });
 }

@@ -1,24 +1,36 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ViewportActionArrows } from '@ohif/ui-next';
 import { useViewportGrid } from '@ohif/ui-next';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
-import { usePositionPresentationStore, OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';
+import _getStatusComponent from './_getStatusComponent';
+import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
 import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-import { useSystem } from '@ohif/core/src/contextProviders/SystemProvider';
+import { utils } from '@ohif/extension-cornerstone';

 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';

 function OHIFCornerstoneSEGViewport(props: withAppTypes) {
-  const { servicesManager, commandsManager } = useSystem();
-  const { children, displaySets, viewportOptions } = props as {
-    children: React.ReactNode;
-    displaySets: AppTypes.DisplaySet[];
-    viewportOptions: AppTypes.ViewportOptions;
-  };
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    servicesManager,
+    extensionManager,
+    commandsManager,
+  } = props;
+
+  const { t } = useTranslation('SEGViewport');
  const viewportId = viewportOptions.viewportId;

-  const { displaySetService, toolGroupService, segmentationService, customizationService } =
-    servicesManager.services;
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    customizationService,
+    viewportActionCornersService,
+  } = servicesManager.services;

  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
    'ui.loadingIndicatorTotalPercent'
@@ -35,6 +47,7 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  const [viewportGrid, viewportGridService] = useViewportGrid();

  // States
+  const selectedSegmentObjectIndex: number = 0;
  const { setPositionPresentation } = usePositionPresentationStore();

  // Hydration means that the SEG is opened and segments are loaded into the
@@ -42,7 +55,9 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  // same frameOfReferenceUID as the referencedSeriesUID of the SEG. However,
  // loading basically means SEG loading over network and bit unpacking of the
  // SEG data.
+  const [isHydrated, setIsHydrated] = useState(segDisplaySet.isHydrated);
  const [segIsLoading, setSegIsLoading] = useState(!segDisplaySet.isLoaded);
+  const [element, setElement] = useState(null);
  const [processingProgress, setProcessingProgress] = useState({
    percentComplete: null,
    totalSegments: null,
@@ -54,21 +69,6 @@ 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
  );
@@ -82,10 +82,36 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    displaySet: referencedDisplaySet,
    metadata: referencedDisplaySetMetadata,
  };
+  /**
+   * OnElementEnabled callback which is called after the cornerstoneExtension
+   * has enabled the element. Note: we delegate all the image rendering to
+   * cornerstoneExtension, so we don't need to do anything here regarding
+   * the image rendering, element enabling etc.
+   */
+  const onElementEnabled = evt => {
+    setElement(evt.detail.element);
+  };
+
+  const onElementDisabled = () => {
+    setElement(null);
+  };
+
+  const storePresentationState = useCallback(() => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
+      commandsManager.runCommand('storePresentation', {
+        viewportId,
+      });
+    });
+  }, [viewportGrid]);

  const getCornerstoneViewport = useCallback(() => {
+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );
+
+    // Todo: jump to the center of the first segment
    return (
-      <OHIFCornerstoneViewport
+      <Component
        {...props}
        displaySets={[segDisplaySet]}
        viewportOptions={{
@@ -97,35 +123,66 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
        }}
        onElementEnabled={evt => {
          props.onElementEnabled?.(evt);
+          onElementEnabled(evt);
        }}
-      />
+        onElementDisabled={onElementDisabled}
+      ></Component>
    );
-  }, [viewportId, segDisplaySet, toolGroupId, props, viewportOptions]);
+  }, [viewportId, segDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      utils.handleSegmentChange({
+        direction,
+        segDisplaySet: segDisplaySet,
+        viewportId,
+        selectedSegmentObjectIndex,
+        segmentationService,
+      });
+    },
+    [selectedSegmentObjectIndex]
+  );
+
+  const hydrateSEG = useCallback(() => {
+    // 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
+    commandsManager.runCommand('updateStoredSegmentationPresentation', {
+      displaySet: segDisplaySet,
+      type: SegmentationRepresentations.Labelmap,
+    });
+
+    // update the previously stored positionPresentation with the new viewportId
+    // presentation so that when we put the referencedDisplaySet back in the viewport
+    // it will be in the correct position zoom and pan
+    commandsManager.runCommand('updateStoredPositionPresentation', {
+      viewportId,
+      displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
+    });
+
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      viewportId,
+      displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
+    });
+  }, [commandsManager, viewportId, referencedDisplaySet, segDisplaySet]);

  useEffect(() => {
    if (segIsLoading) {
      return;
    }

-    // if not active viewport, return
-    if (viewportId !== activeViewportId) {
-      return;
-    }
-
    promptHydrateSEG({
      servicesManager,
      viewportId,
      segDisplaySet,
-      hydrateCallback: async () => {
-        await commandsManager.runCommand('hydrateSecondaryDisplaySet', {
-          displaySet: segDisplaySet,
-          viewportId,
-        });
-
-        return true;
-      },
+      preHydrateCallbacks: [storePresentationState],
+      hydrateCallback: hydrateSEG,
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
    });
-  }, [servicesManager, viewportId, segDisplaySet, segIsLoading, commandsManager, activeViewportId]);
+  }, [servicesManager, viewportId, segDisplaySet, segIsLoading, hydrateSEG]);

  useEffect(() => {
    // on new seg display set, remove all segmentations from all viewports
@@ -214,12 +271,7 @@ 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({
-      commandsManager,
-      toolGroupService,
-      customizationService,
-      toolGroupId,
-    });
+    toolGroup = createSEGToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);

    return () => {
      // remove the segmentation representations if seg displayset changed
@@ -231,6 +283,54 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    };
  }, []);

+  const onStatusClick = useCallback(async () => {
+    // Before hydrating a SEG and make it added to all viewports in the grid
+    // that share the same frameOfReferenceUID, we need to store the viewport grid
+    // presentation state, so that we can restore it after hydrating the SEG. This is
+    // required if the user has changed the viewport (other viewport than SEG viewport)
+    // presentation state (w/l and invert) and then opens the SEG. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
+    hydrateSEG();
+  }, [storePresentationState, hydrateSEG]);
+
+  useEffect(() => {
+    viewportActionCornersService.addComponents([
+      {
+        viewportId,
+        id: 'viewportStatusComponent',
+        component: _getStatusComponent({
+          isHydrated,
+          onStatusClick,
+        }),
+        indexPriority: -100,
+        location: viewportActionCornersService.LOCATIONS.topLeft,
+      },
+      {
+        viewportId,
+        id: 'viewportActionArrowsComponent',
+        component: (
+          <ViewportActionArrows
+            key="actionArrows"
+            onArrowsClick={onSegmentChange}
+            className={
+              viewportId === activeViewportId ? 'visible' : 'invisible group-hover/pane:visible'
+            }
+          ></ViewportActionArrows>
+        ),
+        indexPriority: 0,
+        location: viewportActionCornersService.LOCATIONS.topRight,
+      },
+    ]);
+  }, [
+    activeViewportId,
+    isHydrated,
+    onSegmentChange,
+    onStatusClick,
+    viewportActionCornersService,
+    viewportId,
+  ]);
+
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ViewportActionButton } from '@ohif/ui-next';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+
+export default function _getStatusComponent({ isHydrated, onStatusClick }) {
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => <Icons.ByName name="status-alert" />;
+      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
+      break;
+    case false:
+      StatusIcon = () => (
+        <Icons.ByName
+          className="text-muted-foreground h-4 w-4"
+          name="status-untracked"
+        />
+      );
+      ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
+  }
+
+  const StatusArea = () => {
+    const { t } = useTranslation('Common');
+    const loadStr = t('LOAD');
+
+    return (
+      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+          <StatusIcon />
+          <span className="ml-1">SEG</span>
+        </div>
+        {!isHydrated && (
+          <ViewportActionButton onInteraction={onStatusClick}>{loadStr}</ViewportActionButton>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <ToolTipMessage />
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -34,11 +34,11 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.7",
-    "@ohif/extension-cornerstone": "3.12.0-beta.7",
-    "@ohif/extension-measurement-tracking": "3.12.0-beta.7",
-    "@ohif/ui": "3.12.0-beta.7",
-    "dcmjs": "0.43.1",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-measurement-tracking": "3.10.4",
+    "@ohif/ui": "3.10.4",
+    "dcmjs": "*",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.32.5",
-    "@cornerstonejs/core": "^3.32.5",
-    "@cornerstonejs/tools": "^3.32.5",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
    "classnames": "^2.3.2"
  }
 }
@@ -32,7 +32,12 @@ const _generateReport = (measurementData, additionalFindingTypes, options: Optio
    additionalFindingTypes
  );

-  const report = MeasurementReport.generateReport(filteredToolState, metaData, options);
+  const report = MeasurementReport.generateReport(
+    filteredToolState,
+    metaData,
+    utilities.worldToImageCoords,
+    options
+  );

  const { dataset } = report;

@@ -49,7 +54,7 @@ const _generateReport = (measurementData, additionalFindingTypes, options: Optio

 const commandsModule = (props: withAppTypes) => {
  const { servicesManager, extensionManager, commandsManager } = props;
-  const { customizationService } = servicesManager.services;
+  const { customizationService, viewportGridService, displaySetService } = servicesManager.services;

  const actions = {
    changeColorMeasurement: ({ uid }) => {
@@ -124,9 +129,6 @@ 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');

@@ -158,18 +160,36 @@ const commandsModule = (props: withAppTypes) => {
     * Loads measurements by hydrating and loading the SR for the given display set instance UID
     * and displays it in the active viewport.
     */
-    hydrateStructuredReport: ({ displaySetInstanceUID }) => {
-      return hydrateStructuredReport(
+    loadSRMeasurements: ({ displaySetInstanceUID }) => {
+      const { SeriesInstanceUIDs } = hydrateStructuredReport(
        { servicesManager, extensionManager, commandsManager },
        displaySetInstanceUID
      );
+
+      const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUIDs[0]);
+      if (displaySets.length) {
+        commandsManager.run('setDisplaySetsForViewports', {
+          viewportsToUpdate: [
+            {
+              viewportId: viewportGridService.getActiveViewportId(),
+              displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
+            },
+          ],
+        });
+      }
    },
  };

  const definitions = {
-    downloadReport: actions.downloadReport,
-    storeMeasurements: actions.storeMeasurements,
-    hydrateStructuredReport: actions.hydrateStructuredReport,
+    downloadReport: {
+      commandFn: actions.downloadReport,
+    },
+    storeMeasurements: {
+      commandFn: actions.storeMeasurements,
+    },
+    loadSRMeasurements: {
+      commandFn: actions.loadSRMeasurements,
+    },
  };

  return {
@@ -1,24 +1,25 @@
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ExtensionManager, useToolbar } from '@ohif/core';
+
 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';

+import { ViewportActionArrows } from '@ohif/ui-next';
 import createReferencedImageDisplaySet from '../utils/createReferencedImageDisplaySet';
-import { usePositionPresentationStore, OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';
+import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
 import { useViewportGrid } from '@ohif/ui-next';
-import { useSystem } from '@ohif/core/src/contextProviders/SystemProvider';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+
+const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking';

 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';

-function OHIFCornerstoneSRMeasurementViewport(props) {
-  const { servicesManager } = useSystem();
-  const { children, dataSource, displaySets, viewportOptions } = props as {
-    children: React.ReactNode;
-    dataSource: unknown;
-    displaySets: AppTypes.DisplaySet[];
-    viewportOptions: AppTypes.ViewportOptions;
-  };
+function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
+  const { children, dataSource, displaySets, viewportOptions, servicesManager, extensionManager } =
+    props;

-  const { displaySetService } = servicesManager.services;
+  const { displaySetService, viewportActionCornersService } = servicesManager.services;

  const viewportId = viewportOptions.viewportId;

@@ -33,11 +34,40 @@ function OHIFCornerstoneSRMeasurementViewport(props) {

  const [viewportGrid, viewportGridService] = useViewportGrid();
  const [measurementSelected, setMeasurementSelected] = useState(0);
+  const [measurementCount, setMeasurementCount] = useState(1);
  const [activeImageDisplaySetData, setActiveImageDisplaySetData] = useState(null);
  const [referencedDisplaySetMetadata, setReferencedDisplaySetMetadata] = useState(null);
  const [element, setElement] = useState(null);
  const { viewports, activeViewportId } = viewportGrid;

+  const { t } = useTranslation('Common');
+
+  // Optional hook into tracking extension, if present.
+  let trackedMeasurements;
+
+  const hasMeasurementTrackingExtension = extensionManager.registeredExtensionIds.includes(
+    MEASUREMENT_TRACKING_EXTENSION_ID
+  );
+
+  if (hasMeasurementTrackingExtension) {
+    const contextModule = extensionManager.getModuleEntry(
+      '@ohif/extension-measurement-tracking.contextModule.TrackedMeasurementsContext'
+    );
+
+    const tracked = useContext(contextModule.context);
+    trackedMeasurements = tracked?.[0];
+  }
+
+  /**
+   * Todo: what is this, not sure what it does regarding the react aspect,
+   * it is updating a local variable? which is not state.
+   */
+  const [isLocked, setIsLocked] = useState(trackedMeasurements?.context?.trackedSeries?.length > 0);
+  /**
+   * Store the tracking identifiers per viewport in order to be able to
+   * show the SR measurements on the referenced image on the correct viewport,
+   * when multiple viewports are used.
+   */
  const setTrackingIdentifiers = useCallback(
    measurementSelected => {
      const { measurements } = srDisplaySet;
@@ -63,12 +93,22 @@ function OHIFCornerstoneSRMeasurementViewport(props) {

  const updateViewport = useCallback(
    newMeasurementSelected => {
-      const { StudyInstanceUID, displaySetInstanceUID } = srDisplaySet;
+      const { StudyInstanceUID, displaySetInstanceUID, sopClassUids } = 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.');
+      }
+
+      // if (!srDisplaySet.measurements || !srDisplaySet.measurements.length) {
+      //   return;
+      // }
+
      _getViewportReferencedDisplaySetData(
        srDisplaySet,
        newMeasurementSelected,
@@ -86,7 +126,7 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
        const { presentationIds } = viewportOptions;
        const measurement = srDisplaySet.measurements[newMeasurementSelected];
        setPositionPresentation(presentationIds.positionPresentationId, {
-          viewReference: measurement.viewReference || {
+          viewReference: {
            referencedImageId: measurement.imageId,
          },
        });
@@ -100,6 +140,10 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
      return null;
    }

+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );
+
    const { measurements } = srDisplaySet;
    const measurement = measurements[measurementSelected];

@@ -108,7 +152,7 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
    }

    return (
-      <OHIFCornerstoneViewport
+      <Component
        {...props}
        // should be passed second since we don't want SR displaySet to
        // override the activeImageDisplaySetData
@@ -132,10 +176,27 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
          onElementEnabled(evt);
        }}
        isJumpToMeasurementDisabled={true}
-      />
+      ></Component>
    );
  }, [activeImageDisplaySetData, viewportId, measurementSelected]);

+  const onMeasurementChange = useCallback(
+    direction => {
+      let newMeasurementSelected = measurementSelected;
+
+      newMeasurementSelected += direction;
+      if (newMeasurementSelected >= measurementCount) {
+        newMeasurementSelected = 0;
+      } else if (newMeasurementSelected < 0) {
+        newMeasurementSelected = measurementCount - 1;
+      }
+
+      setTrackingIdentifiers(newMeasurementSelected);
+      updateViewport(newMeasurementSelected);
+    },
+    [measurementSelected, measurementCount, updateViewport, setTrackingIdentifiers]
+  );
+
  /**
   Cleanup the SR viewport when the viewport is destroyed
   */
@@ -170,6 +231,8 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
      if (!srDisplaySet.isLoaded) {
        await srDisplaySet.load();
      }
+      const numMeasurements = srDisplaySet.measurements.length;
+      setMeasurementCount(numMeasurements);
      updateViewport(measurementSelected);
    };
    loadSR();
@@ -192,6 +255,42 @@ function OHIFCornerstoneSRMeasurementViewport(props) {
    updateSR();
  }, [measurementSelected, element, setTrackingIdentifiers, srDisplaySet]);

+  useEffect(() => {
+    setIsLocked(trackedMeasurements?.context?.trackedSeries?.length > 0);
+  }, [trackedMeasurements]);
+
+  useEffect(() => {
+    viewportActionCornersService.addComponents([
+      {
+        viewportId,
+        id: 'viewportStatusComponent',
+        component: _getStatusComponent({
+          srDisplaySet,
+          viewportId,
+          isRehydratable: srDisplaySet.isRehydratable,
+          isLocked,
+          t,
+          servicesManager,
+        }),
+        indexPriority: -100,
+        location: viewportActionCornersService.LOCATIONS.topLeft,
+      },
+      {
+        viewportId,
+        id: 'viewportActionArrowsComponent',
+        index: 0,
+        component: (
+          <ViewportActionArrows
+            key="actionArrows"
+            onArrowsClick={onMeasurementChange}
+          ></ViewportActionArrows>
+        ),
+        indexPriority: 0,
+        location: viewportActionCornersService.LOCATIONS.topRight,
+      },
+    ]);
+  }, [isLocked, onMeasurementChange, srDisplaySet, t, viewportActionCornersService, viewportId]);
+
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;

@@ -228,6 +327,8 @@ OHIFCornerstoneSRMeasurementViewport.propTypes = {
  children: PropTypes.node,
  viewportLabel: PropTypes.string,
  viewportOptions: PropTypes.object,
+  servicesManager: PropTypes.object.isRequired,
+  extensionManager: PropTypes.instanceOf(ExtensionManager).isRequired,
 };

 async function _getViewportReferencedDisplaySetData(
@@ -252,9 +353,6 @@ async function _getViewportReferencedDisplaySetData(
  }

  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-  if (!referencedDisplaySet?.images) {
-    return { referencedDisplaySetMetadata: null, referencedDisplaySet: null };
-  }

  const image0 = referencedDisplaySet.images[0];
  const referencedDisplaySetMetadata = {
@@ -274,4 +372,130 @@ async function _getViewportReferencedDisplaySetData(
  return { referencedDisplaySetMetadata, referencedDisplaySet };
 }

+function _getStatusComponent({
+  srDisplaySet,
+  viewportId,
+  isRehydratable,
+  isLocked,
+  t,
+  servicesManager,
+}) {
+  const loadStr = t('LOAD');
+
+  // 1 - Incompatible
+  // 2 - Locked
+  // 3 - Rehydratable / Open
+  const state = isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  switch (state) {
+    case 1:
+      StatusIcon = () => (
+        <Icons.ByName
+          name="status-alert"
+          className="h-4 w-4"
+        />
+      );
+
+      ToolTipMessage = () => (
+        <div>
+          This structured report is not compatible
+          <br />
+          with this application.
+        </div>
+      );
+      break;
+    case 2:
+      StatusIcon = () => (
+        <Icons.ByName
+          name="status-locked"
+          className="h-4 w-4"
+        />
+      );
+
+      ToolTipMessage = () => (
+        <div>
+          This structured report is currently read-only
+          <br />
+          because you are tracking measurements in
+          <br />
+          another viewport.
+        </div>
+      );
+      break;
+    case 3:
+      StatusIcon = () => (
+        <Icons.ByName
+          className="text-muted-foreground h-4 w-4"
+          name="status-untracked"
+        />
+      );
+
+      ToolTipMessage = () => <div>{`Click ${loadStr} to restore measurements.`}</div>;
+  }
+
+  const StatusArea = () => {
+    const { toolbarButtons: loadSRMeasurementsButtons, onInteraction } = useToolbar({
+      servicesManager,
+      buttonSection: 'loadSRMeasurements',
+    });
+
+    const commandOptions = {
+      displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
+      viewportId,
+    };
+
+    return (
+      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+          <StatusIcon className="h-4 w-4" />
+          <span className="ml-1">SR</span>
+        </div>
+        {state === 3 && (
+          <>
+            {loadSRMeasurementsButtons.map(toolDef => {
+              if (!toolDef) {
+                return null;
+              }
+              const { id, Component, componentProps } = toolDef;
+              const tool = (
+                <Component
+                  key={id}
+                  id={id}
+                  onInteraction={args => onInteraction({ ...args, ...commandOptions })}
+                  {...componentProps}
+                />
+              );
+
+              return <div key={id}>{tool}</div>;
+            })}
+          </>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent
+            side="bottom"
+            align="start"
+          >
+            <ToolTipMessage />
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}
+
 export default OHIFCornerstoneSRMeasurementViewport;
@@ -1,5 +1,4 @@
-import { utils, classes, DisplaySetService, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
+import { utils, classes, DisplaySetService, Types } from '@ohif/core';
 import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
 import { adaptersSR } from '@cornerstonejs/adapters';

@@ -15,12 +14,8 @@ import { CodeNameCodeSequenceValues, CodingSchemeDesignators } from './enums';

 const { sopClassDictionary } = utils;
 const { CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION } = CSExtensionEnums;
-const { MetadataProvider: metadataProvider } = classes;
-const {
-  TEXT_ANNOTATION_POSITION,
-  COMMENT_CODE,
-  CodeScheme: Cornerstone3DCodeScheme,
-} = adaptersSR.Cornerstone3D;
+const { ImageSet, MetadataProvider: metadataProvider } = classes;
+const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;

 type InstanceMetadata = Types.InstanceMetadata;

@@ -35,7 +30,6 @@ const sopClassUids = [
  sopClassDictionary.BasicTextSR,
  sopClassDictionary.EnhancedSR,
  sopClassDictionary.ComprehensiveSR,
-  sopClassDictionary.Comprehensive3DSR,
 ];

 const validateSameStudyUID = (uid: string, instances): void => {
@@ -54,7 +48,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.
@@ -128,7 +122,6 @@ function _getDisplaySetsFromSeries(
    sopClassUids,
    instance,
    addInstances,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SR')}`,
  };

  displaySet.load = () => _load(displaySet, servicesManager, extensionManager);
@@ -221,12 +214,6 @@ async function _load(
  });
 }

-function _measurementBelongsToDisplaySet({ measurement, displaySet }) {
-  return (
-    measurement.coords[0].ReferencedFrameOfReferenceSequence === displaySet.FrameOfReferenceUID
-  );
-}
-
 /**
 * Checks if measurements can be added to a display set.
 *
@@ -247,10 +234,18 @@ function _checkIfCanAddMeasurementsToDisplaySet(
    measurement => measurement.loaded === false
  );

-  if (!unloadedMeasurements.length || newDisplaySet.unsupported) {
+  if (
+    unloadedMeasurements.length === 0 ||
+    !(newDisplaySet instanceof ImageSet) ||
+    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);
@@ -269,7 +264,6 @@ 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'
@@ -284,17 +278,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(
    }

    // if it is 3d SR we can just add the SR annotation
-    if (
-      is3DSR &&
-      is3DMeasurement &&
-      _measurementBelongsToDisplaySet({ measurement, displaySet: newDisplaySet })
-    ) {
-      _measurementBelongsToDisplaySet({ measurement, displaySet: newDisplaySet })
-
+    if (is3DSR) {
      addSRAnnotation(measurement, null, null);
      measurement.loaded = true;
-      measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
-      unloadedMeasurements.splice(j, 1);
      continue;
    }

@@ -368,8 +354,7 @@ function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frame
 * @param {Object} options.extensionManager - The extension manager.
 * @returns {Array} An array containing the SOP class handler module.
 */
-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
@@ -481,7 +466,11 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups
 * @returns {any} - The processed measurement result.
 */
 function _processMeasurement(mergedContentSequence) {
-  if (mergedContentSequence.some(group => isScoordOr3d(group) && !isTextPosition(group))) {
+  if (
+    mergedContentSequence.some(
+      group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
+    )
+  ) {
    return _processTID1410Measurement(mergedContentSequence);
  }

@@ -519,25 +508,12 @@ 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: [pointDataItem],
+    coords: [_getCoordsFromSCOORDOrSCOORD3D(graphicItem)],
    TrackingUniqueIdentifier: UIDREFContentItem.UID,
    TrackingIdentifier: TrackingIdentifierContentItem.TextValue,
-    graphicCode,
-    is3DMeasurement,
-    pointsLength,
-    graphicType: pointDataItem.GraphicType,
  };

  NUMContentItems.forEach(item => {
@@ -588,12 +564,6 @@ 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: [],
@@ -602,14 +572,6 @@ 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(
@@ -761,17 +723,4 @@ 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;
@@ -12,6 +12,7 @@ import {
  utilities as csToolsUtils,
 } from '@cornerstonejs/tools';
 import { Types, MeasurementService } from '@ohif/core';
+import { StackViewport, utilities as csUtils } from '@cornerstonejs/core';
 import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
 import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
 import SCOORD3DPointTool from './tools/SCOORD3DPointTool';
@@ -56,7 +57,7 @@ export default function init({
    'SRSCOORD3DPoint',
    POINT,
    SRSCOOR3DProbeMapper.toAnnotation,
-    SRSCOOR3DProbeMapper.toMeasurement.bind(null, { servicesManager })
+    SRSCOOR3DProbeMapper.toMeasurement
  );

  // Modify annotation tools to use dashed lines on SR
@@ -1,7 +1,11 @@
+import React from 'react';
+
 import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
+import { ViewportActionButton } from '@ohif/ui-next';
+import i18n from '@ohif/i18n';

 export default function onModeEnter({ servicesManager }) {
-  const { displaySetService } = servicesManager.services;
+  const { displaySetService, toolbarService } = servicesManager.services;
  const displaySetCache = displaySetService.getDisplaySetCache();

  const srDisplaySets = [...displaySetCache.values()].filter(
@@ -12,4 +16,24 @@ export default function onModeEnter({ servicesManager }) {
    // New mode route, allow SRs to be hydrated again
    ds.isHydrated = false;
  });
+
+  toolbarService.addButtons([
+    {
+      // A base/default button for loading measurements. It is added to the toolbar below.
+      // Customizations to this button can be made in the mode or by another extension.
+      // For example, the button label can be changed and/or the command to clear
+      // the measurements can be dropped.
+      id: 'loadSRMeasurements',
+      component: props => (
+        <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
+      ),
+      props: {
+        commands: ['clearMeasurements', 'loadSRMeasurements'],
+      },
+    },
+  ]);
+
+  // The toolbar used in the viewport's status bar. Modes and extensions can further customize
+  // it to optionally add other buttons.
+  toolbarService.createButtonSection('loadSRMeasurements', ['loadSRMeasurements']);
 }
@@ -1,4 +1,4 @@
-import { type Types } from '@cornerstonejs/core';
+import { Types, metaData, utilities as csUtils } from '@cornerstonejs/core';
 import {
  annotation,
  drawing,
@@ -7,8 +7,13 @@ const SRSCOOR3DProbe = {
   * @param {Object} cornerstone Cornerstone event data
   * @return {Measurement} Measurement instance
   */
-  toMeasurement: ({ servicesManager, getValueTypeFromToolType }, csToolsEventDetail) => {
-    const { displaySetService } = servicesManager.services;
+  toMeasurement: (
+    csToolsEventDetail,
+    displaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType,
+    customizationService
+  ) => {
    const { annotation } = csToolsEventDetail;
    const { metadata, data, annotationUID } = annotation;

@@ -17,25 +22,14 @@ const SRSCOOR3DProbe = {
      return null;
    }

-    const { toolName, FrameOfReferenceUID } = metadata;
+    const { toolName } = 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,
@@ -62,10 +56,7 @@ function getDisplayText(annotation) {
    }
  }

-  return {
-    primary: displayText,
-    secondary: [],
-  };
+  return displayText;
 }

 export default SRSCOOR3DProbe;
@@ -1,12 +1,9 @@
 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';

-const { MeasurementReport } = adaptersSR.Cornerstone3D;
-
 export default function addSRAnnotation(measurement, imageId, frameNumber) {
  let toolName = toolNames.DICOMSRDisplay;
  const renderableData = measurement.coords.reduce((acc, coordProps) => {
@@ -21,7 +18,6 @@ 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);
@@ -29,29 +25,12 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
  }

  if (valueType === 'SCOORD3D') {
-    const adapter = MeasurementReport.getAdapterForTrackingIdentifier(
-      measurement.TrackingIdentifier
-    );
-    if (!adapter) {
-      toolName = toolNames.SRSCOORD3DPoint;
-    }
+    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,
-  };
-
  const SRAnnotation: Types.Annotation = {
    annotationUID: TrackingUniqueIdentifier,
    highlighted: false,
@@ -59,7 +38,6 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
    invalidated: false,
    metadata: {
      toolName,
-      planeRestriction,
      valueType,
      graphicType,
      FrameOfReferenceUID: frameOfReferenceUID,
@@ -85,4 +63,5 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
   * was not triggering annotation_added events.
   */
  annotation.state.addAnnotation(SRAnnotation);
+  console.debug('Adding SR annotation:', SRAnnotation);
 }
@@ -1,11 +1,17 @@
+import OHIF from '@ohif/core';
 import { annotation } from '@cornerstonejs/tools';
-import { NO_IMAGE_ID } from '@cornerstonejs/adapters';
+const { log } = OHIF;

 function getFilteredCornerstoneToolState(measurementData, additionalFindingTypes) {
  const filteredToolState = {};

  function addToFilteredToolState(annotation, toolType) {
-    const imageId = annotation.metadata?.referencedImageId ?? NO_IMAGE_ID;
+    if (!annotation.metadata?.referencedImageId) {
+      log.warn(`[DICOMSR] No referencedImageId found for ${toolType} ${annotation.id}`);
+      return;
+    }
+
+    const imageId = annotation.metadata.referencedImageId;

    if (!filteredToolState[imageId]) {
      filteredToolState[imageId] = {};
@@ -11,11 +11,7 @@ const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
 * @returns {string} The extracted label.
 */
 export default function getLabelFromDCMJSImportedToolData(toolData) {
-  const { findingSites = [], finding, annotation } = toolData;
-
-  if (annotation.data.label) {
-    return annotation.data.label;
-  }
+  const { findingSites = [], finding } = toolData;

  let freeTextLabel = findingSites.find(
    fs => fs.CodeValue === Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT
@@ -36,14 +36,6 @@ 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.
@@ -98,13 +90,6 @@ 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]);
@@ -1,16 +1,15 @@
-import { utilities, metaData, type Types } from '@cornerstonejs/core';
+import { utilities, metaData } 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, type Types as ToolTypes } from '@cornerstonejs/tools';
+import { annotation as CsAnnotation } from '@cornerstonejs/tools';
 import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';

 const { locking } = CsAnnotation;
 const { guid } = OHIF.utils;
-const { MeasurementReport } = adaptersSR.Cornerstone3D;
+const { MeasurementReport, CORNERSTONE_3D_TAG } = 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') {
@@ -38,10 +37,8 @@ const convertSites = (codingValues, sites) => {
 };

 /**
- * 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.
+ * Hydrates a structured report, for default viewports.
+ *
 */
 export default function hydrateStructuredReport(
  { servicesManager, extensionManager, commandsManager }: withAppTypes,
@@ -91,7 +88,7 @@ export default function hydrateStructuredReport(
  // Mapping of legacy datasets is now directly handled by adapters module
  const datasetToUse = instance;

-  // Use CS3D adapters to generate toolState.
+  // Use dcmjs to generate toolState.
  let storedMeasurementByAnnotationType = MeasurementReport.generateToolState(
    datasetToUse,
    // NOTE: we need to pass in the imageIds to dcmjs since the we use them
@@ -99,6 +96,7 @@ 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
  );

@@ -149,9 +147,6 @@ 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)) {
@@ -165,55 +160,38 @@ 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 =
-      imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
-      sopInstanceUIDToImageId[toolData.sopInstanceUid];
-
-    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 referenceData = getReferenceData(toolData);
-      const { imageId } = referenceData;
+
+      const instance = metaData.get('instance', imageId);
+      const {
+        FrameOfReferenceUID,
+        // SOPInstanceUID,
+        // SeriesInstanceUID,
+        // StudyInstanceUID,
+      } = instance;

      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,
@@ -247,7 +225,7 @@ export default function hydrateStructuredReport(
        locking.setAnnotationLocked(newAnnotationUID, true);
      }

-      if (imageId && !imageIds.includes(imageId)) {
+      if (!imageIds.includes(imageId)) {
        imageIds.push(imageId);
      }
    });
@@ -260,92 +238,3 @@ 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;
-}
@@ -22,20 +22,13 @@ export default function isRehydratable(displaySet, mappings) {
  const { measurements } = displaySet;

  for (let i = 0; i < measurements.length; 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);
+    const { TrackingIdentifier } = measurements[i] || {};
+    if (!TrackingIdentifier) {
+      console.warn('No tracking identifier for measurement ', measurements[i]);
      continue;
    }
    const adapter = MeasurementReport.getAdapterForTrackingIdentifier(TrackingIdentifier);
-    const adapters = MeasurementReport.getAdaptersForTypes(graphicCode, graphicType, pointsLength);
-    const hydratable =
-      (adapter && mappingDefinitions.has(adapter.toolType)) ||
-      (adapters && adapters.some(adapter => mappingDefinitions.has(adapter.toolType)));
+    const hydratable = adapter && mappingDefinitions.has(adapter.toolType);

    if (hydratable) {
      return true;
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "description": "OHIF extension for 4D volumes data",
  "author": "OHIF",
  "license": "MIT",
@@ -29,12 +29,12 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.7",
-    "@ohif/extension-cornerstone": "3.12.0-beta.7",
-    "@ohif/extension-default": "3.12.0-beta.7",
-    "@ohif/i18n": "3.12.0-beta.7",
-    "@ohif/ui": "3.12.0-beta.7",
-    "dcmjs": "0.43.1",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-default": "3.10.4",
+    "@ohif/i18n": "3.10.4",
+    "@ohif/ui": "3.10.4",
+    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
@@ -42,8 +42,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^3.32.5",
-    "@cornerstonejs/tools": "^3.32.5",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
    "classnames": "^2.3.2"
  }
 }
@@ -5,8 +5,6 @@ import { PanelSegmentation } from '@ohif/extension-cornerstone';
 import DynamicExport from './panels/DynamicExport';

 function getPanelModule({ commandsManager, extensionManager, servicesManager, configuration }) {
-  const { toolbarService } = servicesManager.services;
-
  const wrappedDynamicDataPanel = () => {
    return (
      <DynamicDataPanel
@@ -21,7 +19,7 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager, co
    return (
      <>
        <Toolbox
-          buttonSectionId={toolbarService.sections.dynamicToolbox}
+          buttonSectionId="dynamic-toolbox"
          title="Threshold Tools"
        />
        <PanelSegmentation
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.12.0-beta.7",
+  "version": "3.10.4",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -38,10 +38,10 @@
    "@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.32.5",
-    "@ohif/core": "3.12.0-beta.7",
-    "@ohif/ui": "3.12.0-beta.7",
-    "dcmjs": "0.43.1",
+    "@cornerstonejs/dicom-image-loader": "^3.11.6",
+    "@ohif/core": "3.10.4",
+    "@ohif/ui": "3.10.4",
+    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
@@ -51,12 +51,12 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.32.5",
-    "@cornerstonejs/ai": "^3.32.5",
-    "@cornerstonejs/core": "^3.32.5",
-    "@cornerstonejs/labelmap-interpolation": "^3.32.5",
-    "@cornerstonejs/polymorphic-segmentation": "^3.32.5",
-    "@cornerstonejs/tools": "^3.32.5",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/ai": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/labelmap-interpolation": "^3.11.6",
+    "@cornerstonejs/polymorphic-segmentation": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
    "@itk-wasm/morphological-contour-interpolation": "1.1.0",
    "@kitware/vtk.js": "32.12.0",
    "html2canvas": "^1.4.1",
@@ -2,11 +2,6 @@
  width: 100%;
  height: 100%; /* MUST have `height` to prevent resize infinite loop */
  position: relative;
-  /* Prevent text selection on the entire viewport wrapper */
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }

 .cornerstone-viewport-element {
@@ -21,26 +16,4 @@
  /* Prevents the entire page from getting larger
     when the magnify tool is near the sides/corners of the page */
  overflow: hidden;
-  
-  /* Prevent text selection on the viewport element */
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-/* Prevent text selection on overlay elements */
-.noselect {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-/* Ensure all elements within viewport wrapper prevent text selection */
-.viewport-wrapper * {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }
@@ -1,7 +1,9 @@
 import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 import * as cs3DTools from '@cornerstonejs/tools';
 import { Enums, eventTarget, getEnabledElement } from '@cornerstonejs/core';
-import { MeasurementService, useViewportRef } from '@ohif/core';
+import { MeasurementService } from '@ohif/core';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { useViewportDialog } from '@ohif/ui-next';
 import type { Types as csTypes } from '@cornerstonejs/core';

@@ -13,6 +15,8 @@ import CinePlayer from '../components/CinePlayer';
 import type { Types } from '@ohif/core';

 import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
+import { getWindowLevelActionMenu } from '../components/WindowLevelActionMenu/getWindowLevelActionMenu';
+import { getViewportDataOverlaySettingsMenu } from '../components/ViewportDataOverlaySettingMenu';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
@@ -20,9 +24,6 @@ import { WITH_NAVIGATION } from '../services/ViewportService/CornerstoneViewport

 const STACK = 'stack';

-// Cache for viewport dimensions, persists across component remounts
-const viewportDimensions = new Map<string, { width: number; height: number }>();
-
 // Todo: This should be done with expose of internal API similar to react-vtkjs-viewport
 // Then we don't need to worry about the re-renders if the props change.
 const OHIFCornerstoneViewport = React.memo(
@@ -40,6 +41,7 @@ const OHIFCornerstoneViewport = React.memo(
      viewportOptions,
      displaySetOptions,
      servicesManager,
+      commandsManager,
      onElementEnabled,
      // eslint-disable-next-line react/prop-types
      onElementDisabled,
@@ -81,7 +83,6 @@ const OHIFCornerstoneViewport = React.memo(
    const [scrollbarHeight, setScrollbarHeight] = useState('100px');
    const [enabledVPElement, setEnabledVPElement] = useState(null);
    const elementRef = useRef() as React.MutableRefObject<HTMLDivElement>;
-    const viewportRef = useViewportRef(viewportId);

    const {
      displaySetService,
@@ -91,6 +92,7 @@ const OHIFCornerstoneViewport = React.memo(
      cornerstoneViewportService,
      segmentationService,
      cornerstoneCacheService,
+      viewportActionCornersService,
      customizationService,
      measurementService,
    } = servicesManager.services;
@@ -103,44 +105,12 @@ const OHIFCornerstoneViewport = React.memo(
    }, [elementRef]);

    // useCallback for onResize
-    const onResize = useCallback(
-      (entries: ResizeObserverEntry[]) => {
-        if (elementRef.current && entries?.length) {
-          const entry = entries[0];
-          const { width, height } = entry.contentRect;
-
-          const prevDimensions = viewportDimensions.get(viewportId) || { width: 0, height: 0 };
-
-          // Check if dimensions actually changed and then only resize if they have changed
-          const hasDimensionsChanged =
-            prevDimensions.width !== width || prevDimensions.height !== height;
-
-          if (width > 0 && height > 0 && hasDimensionsChanged) {
-            viewportDimensions.set(viewportId, { width, height });
-            // Perform resize operations
-            cornerstoneViewportService.resize();
-            setImageScrollBarHeight();
-          }
-        }
-      },
-      [viewportId, elementRef, cornerstoneViewportService, setImageScrollBarHeight]
-    );
-
-    useEffect(() => {
-      const element = elementRef.current;
-      if (!element) {
-        return;
+    const onResize = useCallback(() => {
+      if (elementRef.current) {
+        cornerstoneViewportService.resize();
+        setImageScrollBarHeight();
      }
-
-      const resizeObserver = new ResizeObserver(onResize);
-      resizeObserver.observe(element);
-
-      // Cleanup function
-      return () => {
-        resizeObserver.unobserve(element);
-        resizeObserver.disconnect();
-      };
-    }, [onResize]);
+    }, [elementRef]);

    const cleanUpServices = useCallback(
      viewportInfo => {
@@ -151,8 +121,16 @@ const OHIFCornerstoneViewport = React.memo(
        syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroups);

        segmentationService.clearSegmentationRepresentations(viewportId);
+
+        viewportActionCornersService.clear(viewportId);
      },
-      [viewportId, segmentationService, syncGroupService, toolGroupService]
+      [
+        viewportId,
+        segmentationService,
+        syncGroupService,
+        toolGroupService,
+        viewportActionCornersService,
+      ]
    );

    const elementEnabledHandler = useCallback(
@@ -220,7 +198,6 @@ const OHIFCornerstoneViewport = React.memo(
        }

        cornerstoneViewportService.disableElement(viewportId);
-        viewportRef.unregister();

        eventTarget.removeEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
      };
@@ -304,6 +281,79 @@ 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]);
+
+    // Set up the window level action menu in the viewport action corners.
+    useEffect(() => {
+      const windowLevelActionMenu = customizationService.getCustomization(
+        'viewportActionMenu.windowLevelActionMenu'
+      );
+      const segmentationOverlay = customizationService.getCustomization(
+        'viewportActionMenu.segmentationOverlay'
+      );
+
+      if (windowLevelActionMenu?.enabled) {
+        viewportActionCornersService.addComponent({
+          viewportId,
+          id: 'windowLevelActionMenu',
+          component: getWindowLevelActionMenu({
+            viewportId,
+            element: elementRef.current,
+            displaySets,
+            servicesManager,
+            commandsManager,
+            location: windowLevelActionMenu.location,
+            verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
+            horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
+          }),
+          location: windowLevelActionMenu.location,
+        });
+      }
+
+      if (segmentationOverlay?.enabled) {
+        viewportActionCornersService.addComponent({
+          viewportId,
+          id: 'segmentation',
+          component: getViewportDataOverlaySettingsMenu({
+            viewportId,
+            element: elementRef.current,
+            displaySets,
+            servicesManager,
+            commandsManager,
+            location: segmentationOverlay.location,
+          }),
+          location: segmentationOverlay.location,
+        });
+      }
+    }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
+
+    const { ref: resizeRef } = useResizeDetector({
+      onResize,
+    });
+
    const Notification = customizationService.getCustomization('ui.notificationComponent');

    return (
@@ -314,12 +364,9 @@ const OHIFCornerstoneViewport = React.memo(
            style={{ height: '100%', width: '100%' }}
            onContextMenu={e => e.preventDefault()}
            onMouseDown={e => e.preventDefault()}
-            data-viewportid={viewportId}
            ref={el => {
+              resizeRef.current = el;
              elementRef.current = el;
-              if (el) {
-                viewportRef.register(el);
-              }
            }}
          ></div>
          <CornerstoneOverlays
@@ -361,6 +408,54 @@ 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];
@@ -421,18 +516,22 @@ OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';

 function areEqual(prevProps, nextProps) {
  if (nextProps.needsRerendering) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: needsRerendering');
    return false;
  }

  if (prevProps.displaySets.length !== nextProps.displaySets.length) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: displaySets length change');
    return false;
  }

  if (prevProps.viewportOptions.orientation !== nextProps.viewportOptions.orientation) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: orientation change');
    return false;
  }

  if (prevProps.viewportOptions.toolGroupId !== nextProps.viewportOptions.toolGroupId) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: toolGroupId change');
    return false;
  }

@@ -440,10 +539,12 @@ function areEqual(prevProps, nextProps) {
    nextProps.viewportOptions.viewportType &&
    prevProps.viewportOptions.viewportType !== nextProps.viewportOptions.viewportType
  ) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: viewportType change');
    return false;
  }

  if (nextProps.viewportOptions.needsRerendering) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: viewportOptions.needsRerendering');
    return false;
  }

@@ -451,6 +552,7 @@ function areEqual(prevProps, nextProps) {
  const nextDisplaySets = nextProps.displaySets;

  if (prevDisplaySets.length !== nextDisplaySets.length) {
+    console.debug('OHIFCornerstoneViewport: Rerender caused by: displaySets length mismatch');
    return false;
  }

@@ -463,11 +565,13 @@ function areEqual(prevProps, nextProps) {
    );

    if (!foundDisplaySet) {
+      console.debug('OHIFCornerstoneViewport: Rerender caused by: displaySet not found');
      return false;
    }

    // check they contain the same image
    if (foundDisplaySet.images?.length !== prevDisplaySet.images?.length) {
+      console.debug('OHIFCornerstoneViewport: Rerender caused by: images length mismatch');
      return false;
    }

@@ -475,6 +579,7 @@ function areEqual(prevProps, nextProps) {
    if (foundDisplaySet.images?.length) {
      for (let j = 0; j < foundDisplaySet.images.length; j++) {
        if (foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId) {
+          console.debug('OHIFCornerstoneViewport: Rerender caused by: imageId mismatch');
          return false;
        }
      }
@@ -484,4 +589,16 @@ 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;
@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
-import { metaData, Enums, utilities, eventTarget } from '@cornerstonejs/core';
-import { Enums as csToolsEnums, UltrasoundPleuraBLineTool } from '@cornerstonejs/tools';
+import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import type { ImageSliceData } from '@cornerstonejs/core/types';
 import { ViewportOverlay } from '@ohif/ui-next';
 import type { InstanceMetadata } from '@ohif/core/src/types';
@@ -11,7 +10,6 @@ import { utils } from '@ohif/core';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';

 import './CustomizableViewportOverlay.css';
-import { useViewportRendering } from '../../hooks';

 const EPSILON = 1e-4;
 const { formatPN } = utils;
@@ -69,8 +67,6 @@ 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;

  // Historical usage defined the overlays as separate items due to lack of
@@ -134,20 +130,6 @@ 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
   */
@@ -188,7 +170,6 @@ function CustomizableViewportOverlay({
        viewportId,
        servicesManager,
        customization: item,
-        isLight,
        formatters: {
          formatPN,
          formatDate: formatDICOMDate,
@@ -225,7 +206,6 @@ function CustomizableViewportOverlay({
      voi,
      scale,
      instanceNumber,
-      annotationState,
    ]
  );

@@ -239,7 +219,6 @@ function CustomizableViewportOverlay({
        instanceNumber,
        viewportId,
        toolGroupService,
-        isLight,
      };

      return (
@@ -262,8 +241,6 @@ function CustomizableViewportOverlay({
      topRight={getContent(topRightCustomization, 'topRightOverlayItem')}
      bottomLeft={getContent(bottomLeftCustomization, 'bottomLeftOverlayItem')}
      bottomRight={getContent(bottomRightCustomization, 'bottomRightOverlayItem')}
-      color={isLight ? 'text-neutral-dark' : 'text-neutral-light'}
-      shadowClass={isLight ? 'shadow-light' : 'shadow-dark'}
    />
  );
 }
@@ -398,7 +375,6 @@ function OverlayItem(props) {

 /**
 * Window Level / Center Overlay item
- * //
 */
 function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
  const { windowWidth, windowCenter } = voi;
@@ -411,9 +387,9 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
      className="overlay-item flex flex-row"
      style={{ color: customization?.color }}
    >
-      <span className="mr-0.5 shrink-0 opacity-[0.70]">W:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">W:</span>
      <span className="mr-2.5 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-0.5 shrink-0 opacity-[0.70]">L:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">L:</span>
      <span className="shrink-0">{windowCenter.toFixed(0)}</span>
    </div>
  );
@@ -428,7 +404,7 @@ function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
      className="overlay-item flex flex-row"
      style={{ color: (customization && customization.color) || undefined }}
    >
-      <span className="mr-0.5 shrink-0 opacity-[0.70]">Zoom:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">Zoom:</span>
      <span>{scale.toFixed(2)}x</span>
    </div>
  );
@@ -452,7 +428,7 @@ function InstanceNumberOverlayItem({
      <span>
        {instanceNumber !== undefined && instanceNumber !== null ? (
          <>
-            <span className="mr-0.5 shrink-0 opacity-[0.70]">I:</span>
+            <span className="mr-0.5 shrink-0 opacity-[0.67]">I:</span>
            <span>{`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`}</span>
          </>
        ) : (
@@ -63,7 +63,7 @@ function CornerstoneImageScrollbar({
    }
    const { viewportType } = viewportData;
    const eventId =
-      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_NEW_IMAGE) ||
+      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_VIEWPORT_SCROLL) ||
      (viewportType === Enums.ViewportType.ORTHOGRAPHIC && Enums.Events.VOLUME_NEW_IMAGE) ||
      Enums.Events.IMAGE_RENDERED;

@@ -72,11 +72,11 @@ function CornerstoneImageScrollbar({
      if (!viewport || viewport instanceof VolumeViewport3D) {
        return;
      }
-      const { imageIndex, newImageIdIndex = imageIndex, imageIdIndex } = event.detail;
+      const { imageIndex, newImageIdIndex = imageIndex } = event.detail;
      const numberOfSlices = viewport.getNumberOfSlices();
      // find the index of imageId in the imageIds
      setImageSliceData({
-        imageIndex: newImageIdIndex ?? imageIdIndex,
+        imageIndex: newImageIdIndex,
        numberOfSlices,
      });
    };
@@ -11,22 +11,18 @@
 .ViewportOrientationMarkers .top-mid {
  top: 0.38rem;
  left: 50%;
-  transform: translateX(-50%);
 }
 .ViewportOrientationMarkers .left-mid {
-  top: 50%;
+  top: 47%;
  left: 0.38rem;
-  transform: translateY(-50%);
 }
 .ViewportOrientationMarkers .right-mid {
-  top: 50%;
+  top: 47%;
  left: calc(100% - var(--marker-width) - var(--scrollbar-width));
-  transform: translateY(-50%);
 }
 .ViewportOrientationMarkers .bottom-mid {
  top: calc(100% - var(--marker-height) - 0.6rem);
-  left: 50%;
-  transform: translateX(-50%);
+  left: 47%;
 }
 .ViewportOrientationMarkers .right-mid .orientation-marker-value {
  display: flex;
@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import classNames from 'classnames';
-import { metaData, Enums, getEnabledElement } from '@cornerstonejs/core';
+import { metaData, Enums, Types, getEnabledElement } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/tools';
 import { vec3 } from 'gl-matrix';

 import './ViewportOrientationMarkers.css';
-import { useViewportRendering } from '../../hooks';
+
 const { getOrientationStringLPS, invertOrientationStringLPS } = utilities.orientation;

 function ViewportOrientationMarkers({
@@ -16,36 +16,49 @@ function ViewportOrientationMarkers({
  servicesManager,
  orientationMarkers = ['top', 'left'],
 }: withAppTypes) {
-  const [cameraModifiedTime, setCameraModifiedTime] = useState(0);
-  const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
+  // Rotation is in degrees
+  const [rotation, setRotation] = useState(0);
+  const [flipHorizontal, setFlipHorizontal] = useState(false);
+  const [flipVertical, setFlipVertical] = useState(false);
  const { cornerstoneViewportService } = servicesManager.services;

  useEffect(() => {
-    const cameraModifiedListener = () => setCameraModifiedTime(Date.now());
+    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);
+      }
+    };
+
    element.addEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);

    return () => {
      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
    };
-  }, [element]);
+  }, []);

  const markers = useMemo(() => {
-    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})`);
+    if (!viewportData) {
      return '';
    }

+    let rowCosines, columnCosines, isDefaultValueSetForRowCosine, isDefaultValueSetForColumnCosine;
    if (viewportData.viewportType === 'stack') {
      const imageIndex = imageSliceData.imageIndex;
      const imageId = viewportData.data[0].imageIds?.[imageIndex];
@@ -55,33 +68,58 @@ function ViewportOrientationMarkers({
        return false;
      }

-      const { isDefaultValueSetForRowCosine, isDefaultValueSetForColumnCosine } =
-        metaData.get('imagePlaneModule', imageId) || {};
-
-      if (isDefaultValueSetForColumnCosine || isDefaultValueSetForRowCosine) {
+      ({
+        rowCosines,
+        columnCosines,
+        isDefaultValueSetForColumnCosine,
+        isDefaultValueSetForColumnCosine,
+      } = metaData.get('imagePlaneModule', imageId) || {});
+    } else {
+      if (!element || !getEnabledElement(element)) {
        return '';
      }
+
+      const { viewport } = getEnabledElement(element);
+      const { viewUp, viewPlaneNormal } = viewport.getCamera();
+
+      const viewRight = vec3.create();
+      vec3.cross(viewRight, viewUp, viewPlaneNormal);
+
+      columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]];
+      rowCosines = viewRight;
    }

-    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);
+    if (
+      !rowCosines ||
+      !columnCosines ||
+      rotation === undefined ||
+      isDefaultValueSetForRowCosine ||
+      isDefaultValueSetForColumnCosine
+    ) {
+      return '';
+    }

-    vec3.normalize(rowCosines, rowCosines);
-    vec3.normalize(columnCosines, columnCosines);
+    const markers = _getOrientationMarkers(
+      rowCosines,
+      columnCosines,
+      rotation,
+      flipVertical,
+      flipHorizontal
+    );

-    const markers = _getOrientationMarkers(rowCosines, columnCosines);
+    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
+
+    if (!ohifViewport) {
+      console.log('ViewportOrientationMarkers::No viewport');
+      return null;
+    }

    return orientationMarkers.map((m, index) => (
      <div
        className={classNames(
          'overlay-text',
          `${m}-mid orientation-marker`,
-          isLight ? 'text-neutral-dark/70' : 'text-neutral-light/70',
-          isLight ? 'shadow-light' : 'shadow-dark',
+          'text-highlight/65',
          'text-base',
          'leading-5'
        )}
@@ -90,7 +128,15 @@ function ViewportOrientationMarkers({
        <div className="orientation-marker-value">{markers[m]}</div>
      </div>
    ));
-  }, [viewportData, imageSliceData, cameraModifiedTime, orientationMarkers, element, isLight]);
+  }, [
+    viewportData,
+    imageSliceData,
+    rotation,
+    flipVertical,
+    flipHorizontal,
+    orientationMarkers,
+    element,
+  ]);

  return <div className="ViewportOrientationMarkers select-none">{markers}</div>;
 }
@@ -102,8 +148,10 @@ function ViewportOrientationMarkers({
 *
 * @param {*} rowCosines
 * @param {*} columnCosines
+ * @param {*} rotation in degrees
+ * @returns
 */
-function _getOrientationMarkers(rowCosines, columnCosines) {
+function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal) {
  const rowString = getOrientationStringLPS(rowCosines);
  const columnString = getOrientationStringLPS(columnCosines);
  const oppositeRowString = invertOrientationStringLPS(rowString);
@@ -116,6 +164,43 @@ function _getOrientationMarkers(rowCosines, columnCosines) {
    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;
 }

@@ -3,10 +3,8 @@ import {
  StackViewport,
  VolumeViewport,
  utilities as csUtils,
-  Enums as CoreEnums,
  Types as CoreTypes,
  BaseVolumeViewport,
-  getRenderingEngines,
 } from '@cornerstonejs/core';
 import {
  ToolGroupManager,
@@ -30,7 +28,6 @@ import {
 import { vec3, mat4 } from 'gl-matrix';
 import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
-import { getViewportEnabledElement } from './utils/getViewportEnabledElement';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import toggleVOISliceSync from './utils/toggleVOISliceSync';
 import { usePositionPresentationStore, useSegmentationPresentationStore } from './stores';
@@ -39,7 +36,6 @@ import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownload
 import { updateSegmentBidirectionalStats } from './utils/updateSegmentationStats';
 import { generateSegmentationCSVReport } from './utils/generateSegmentationCSVReport';
 import { getUpdatedViewportsForSegmentation } from './utils/hydrationUtils';
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';

 const { DefaultHistoryMemo } = csUtils.HistoryMemo;
 const toggleSyncFunctions = {
@@ -58,10 +54,7 @@ const getLabelmapTools = ({ toolGroupService }) => {
    // tools is an object with toolName as the key and tool as the value
    Object.keys(tools).forEach(toolName => {
      const tool = tools[toolName];
-      if (
-        tool instanceof cornerstoneTools.LabelmapBaseTool &&
-        tool.shouldResolvePreviewRequests()
-      ) {
+      if (tool instanceof cornerstoneTools.LabelmapBaseTool) {
        labelmapTools.push(tool);
      }
    });
@@ -69,14 +62,6 @@ const getLabelmapTools = ({ toolGroupService }) => {
  return labelmapTools;
 };

-const getPreviewTools = ({ toolGroupService }) => {
-  const labelmapTools = getLabelmapTools({ toolGroupService });
-
-  const previewTools = labelmapTools.filter(tool => tool.acceptPreview || tool.rejectPreview);
-
-  return previewTools;
-};
-
 const segmentAI = new ONNXSegmentationController({
  autoSegmentMode: true,
  models: {
@@ -102,7 +87,6 @@ let segmentAIEnabled = false;
 function commandsModule({
  servicesManager,
  commandsManager,
-  extensionManager,
 }: OhifTypes.Extensions.ExtensionParams): OhifTypes.Extensions.CommandsModule {
  const {
    viewportGridService,
@@ -124,10 +108,6 @@ function commandsModule({
    return getActiveViewportEnabledElement(viewportGridService);
  }

-  function _getViewportEnabledElement(viewportId: string) {
-    return getViewportEnabledElement(viewportId);
-  }
-
  function _getActiveViewportToolGroupId() {
    const viewport = _getActiveViewportEnabledElement();
    return toolGroupService.getToolGroupForViewport(viewport.id);
@@ -146,132 +126,6 @@ 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();
-        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;
-      }
-
-      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
-        commandsManager.runCommand('updateStoredSegmentationPresentation', {
-          displaySet,
-          type:
-            displaySet.Modality === 'SEG'
-              ? SegmentationRepresentations.Labelmap
-              : SegmentationRepresentations.Contour,
-        });
-      }
-
-      const referencedDisplaySetInstanceUID = displaySet.referencedDisplaySetInstanceUID;
-
-      const storePositionPresentation = refDisplaySet => {
-        // update the previously stored positionPresentation with the new viewportId
-        // presentation so that when we put the referencedDisplaySet back in the viewport
-        // it will be in the correct position zoom and pan
-        commandsManager.runCommand('updateStoredPositionPresentation', {
-          viewportId,
-          displaySetInstanceUIDs: [refDisplaySet.displaySetInstanceUID],
-        });
-      };
-
-      if (displaySet.Modality === 'SEG' || displaySet.Modality === 'RTSTRUCT') {
-        const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-          referencedDisplaySetInstanceUID
-        );
-        storePositionPresentation(referencedDisplaySet);
-        return commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
-          viewportId,
-          displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
-        });
-      } else if (displaySet.Modality === 'SR') {
-        const results = commandsManager.runCommand('hydrateStructuredReport', {
-          displaySetInstanceUID: displaySet.displaySetInstanceUID,
-        });
-        const { SeriesInstanceUIDs } = results;
-        const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
-          SeriesInstanceUIDs[0]
-        );
-        referencedDisplaySets.forEach(storePositionPresentation);
-
-        if (referencedDisplaySets.length) {
-          actions.setDisplaySetsForViewports({
-            viewportsToUpdate: [
-              {
-                viewportId: viewportGridService.getActiveViewportId(),
-                displaySetInstanceUIDs: [referencedDisplaySets[0].displaySetInstanceUID],
-              },
-            ],
-          });
-        }
-        return results;
-      }
-    },
    runSegmentBidirectional: async ({ segmentationId, segmentIndex } = {}) => {
      // Get active segmentation if not specified
      const targetSegmentation =
@@ -392,11 +246,9 @@ function commandsModule({
        type,
      });
    },
-
-    /** Stores the changed position presentation */
    updateStoredPositionPresentation: ({
      viewportId,
-      displaySetInstanceUIDs,
+      displaySetInstanceUID,
      referencedImageId,
      options,
    }) => {
@@ -404,36 +256,22 @@ function commandsModule({
      const { positionPresentationStore, setPositionPresentation, getPositionPresentationId } =
        usePositionPresentationStore.getState();

-      // Look inside positionPresentationStore and find the key that includes ALL the displaySetInstanceUIDs
+      // Look inside positionPresentationStore and find the key that includes the displaySetInstanceUID
      // and the value has viewportId as activeViewportId.
-      let previousReferencedDisplaySetStoreKey;
-
-      if (
-        displaySetInstanceUIDs &&
-        Array.isArray(displaySetInstanceUIDs) &&
-        displaySetInstanceUIDs.length > 0
-      ) {
-        previousReferencedDisplaySetStoreKey = Object.entries(positionPresentationStore).find(
-          ([key, value]) => {
-            return (
-              displaySetInstanceUIDs.every(uid => key.includes(uid)) &&
-              value?.viewportId === viewportId
-            );
-          }
-        )?.[0];
-      }
+      const previousReferencedDisplaySetStoreKey = Object.entries(positionPresentationStore).find(
+        ([key, value]) => key.includes(displaySetInstanceUID) && value.viewportId === viewportId
+      )?.[0];

      // Create presentation data with referencedImageId and options if provided
-      const presentationData =
-        referencedImageId || options?.FrameOfReferenceUID
-          ? {
-              ...presentations.positionPresentation,
-              viewReference: {
-                referencedImageId,
-                ...options,
-              },
-            }
-          : presentations.positionPresentation;
+      const presentationData = referencedImageId
+        ? {
+            ...presentations.positionPresentation,
+            viewReference: {
+              referencedImageId,
+              ...options,
+            },
+          }
+        : presentations.positionPresentation;

      if (previousReferencedDisplaySetStoreKey) {
        setPositionPresentation(previousReferencedDisplaySetStoreKey, presentationData);
@@ -444,7 +282,7 @@ function commandsModule({
      // so we need to grab the positionPresentationId directly from the store,
      // Todo: this is really hacky, we should have a better way for this
      const positionPresentationId = getPositionPresentationId({
-        displaySetInstanceUIDs,
+        displaySetInstanceUIDs: [displaySetInstanceUID],
        viewportId,
      });

@@ -516,7 +354,7 @@ function commandsModule({
      });

      if (val !== undefined && val !== null) {
-        measurementService.update(uid, { ...measurement, label: val }, true);
+        measurementService.update(uid, { ...val }, true);
      }
    },
    /**
@@ -705,22 +543,10 @@ function commandsModule({

      viewportGridService.setActiveViewportId(viewportId);
    },
-    arrowTextCallback: async ({ callback, data }) => {
+    arrowTextCallback: async ({ callback }) => {
      const labelConfig = customizationService.getCustomization('measurementLabels');
      const renderContent = customizationService.getCustomization('ui.labellingComponent');

-      if (!labelConfig) {
-        const label = await callInputDialog({
-          uiDialogService,
-          title: 'Edit Arrow Text',
-          placeholder: data?.data?.label || 'Enter new text',
-          defaultValue: data?.data?.label || '',
-        });
-
-        callback?.(label);
-        return;
-      }
-
      const value = await callInputDialogAutoComplete({
        uiDialogService,
        labelConfig,
@@ -736,20 +562,10 @@ function commandsModule({
      viewports.forEach((_, index) => cineService.setCine({ id: index, isPlaying: false }));
    },

-    setViewportWindowLevel({
-      viewportId,
-      windowWidth,
-      windowCenter,
-      displaySetInstanceUID,
-    }: {
-      viewportId: string;
-      windowWidth: number;
-      windowCenter: number;
-      displaySetInstanceUID?: string;
-    }) {
+    setViewportWindowLevel({ viewportId, window, level }) {
      // convert to numbers
-      const windowWidthNum = Number(windowWidth);
-      const windowCenterNum = Number(windowCenter);
+      const windowWidthNum = Number(window);
+      const windowCenterNum = Number(level);

      // get actor from the viewport
      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
@@ -757,28 +573,12 @@ function commandsModule({

      const { lower, upper } = csUtils.windowLevel.toLowHighRange(windowWidthNum, windowCenterNum);

-      if (viewport instanceof BaseVolumeViewport) {
-        const volumeId = actions.getVolumeIdForDisplaySet({
-          viewportId,
-          displaySetInstanceUID,
-        });
-        viewport.setProperties(
-          {
-            voiRange: {
-              upper,
-              lower,
-            },
-          },
-          volumeId
-        );
-      } else {
-        viewport.setProperties({
-          voiRange: {
-            upper,
-            lower,
-          },
-        });
-      }
+      viewport.setProperties({
+        voiRange: {
+          upper,
+          lower,
+        },
+      });
      viewport.render();
    },
    toggleViewportColorbar: ({ viewportId, displaySetInstanceUIDs, options = {} }) => {
@@ -827,19 +627,10 @@ function commandsModule({

      actions.setViewportWindowLevel({
        viewportId: activeViewport,
-        windowWidth: windowLevelPreset.window,
-        windowCenter: windowLevelPreset.level,
+        window: windowLevelPreset.window,
+        level: windowLevelPreset.level,
      });
    },
-    getVolumeIdForDisplaySet: ({ viewportId, displaySetInstanceUID }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      if (viewport instanceof BaseVolumeViewport) {
-        const volumeIds = viewport.getAllVolumeIds();
-        const volumeId = volumeIds.find(id => id.includes(displaySetInstanceUID));
-        return volumeId;
-      }
-      return null;
-    },
    setToolEnabled: ({ toolName, toggle, toolGroupId }) => {
      const { viewports } = viewportGridService.getState();

@@ -928,7 +719,7 @@ function commandsModule({
        return;
      }

-      if (!toolGroup?.hasTool(toolName)) {
+      if (!toolGroup.hasTool(toolName)) {
        return;
      }

@@ -978,28 +769,32 @@ function commandsModule({
        });
      }
    },
-    /**
-     * Rotates the viewport by `rotation` relative to its current rotation.
-     */
-    rotateViewportBy: ({ rotation, viewportId }: { rotation: number; viewportId?: string }) => {
-      actions._rotateViewport({ rotation, viewportId, rotationMode: 'apply' });
+    rotateViewport: ({ rotation }) => {
+      const enabledElement = _getActiveViewportEnabledElement();
+      if (!enabledElement) {
+        return;
+      }
+
+      const { viewport } = enabledElement;
+
+      if (viewport instanceof BaseVolumeViewport) {
+        const camera = viewport.getCamera();
+        const rotAngle = (rotation * Math.PI) / 180;
+        const rotMat = mat4.identity(new Float32Array(16));
+        mat4.rotate(rotMat, rotMat, rotAngle, camera.viewPlaneNormal);
+        const rotatedViewUp = vec3.transformMat4(vec3.create(), camera.viewUp, rotMat);
+        viewport.setCamera({ viewUp: rotatedViewUp as CoreTypes.Point3 });
+        viewport.render();
+      } else if (viewport.getRotation !== undefined) {
+        const presentation = viewport.getViewPresentation();
+        const { rotation: currentRotation } = presentation;
+        const newRotation = (currentRotation + rotation + 360) % 360;
+        viewport.setViewPresentation({ rotation: newRotation });
+        viewport.render();
+      }
    },
-    /**
-     * Sets the viewport rotation to an absolute value `rotation`.
-     */
-    setViewportRotation: ({ rotation, viewportId }: { rotation: number; viewportId?: string }) => {
-      actions._rotateViewport({ rotation, viewportId, rotationMode: 'set' });
-    },
-    flipViewportHorizontal: ({
-      viewportId,
-      newValue = 'toggle',
-    }: {
-      viewportId?: string;
-      newValue?: 'toggle' | boolean;
-    }) => {
-      const enabledElement = viewportId
-        ? _getViewportEnabledElement(viewportId)
-        : _getActiveViewportEnabledElement();
+    flipViewportHorizontal: () => {
+      const enabledElement = _getActiveViewportEnabledElement();

      if (!enabledElement) {
        return;
@@ -1007,27 +802,12 @@ function commandsModule({

      const { viewport } = enabledElement;

-      let flipHorizontal: boolean;
-      if (newValue === 'toggle') {
-        const { flipHorizontal: currentHorizontalFlip } = viewport.getCamera();
-        flipHorizontal = !currentHorizontalFlip;
-      } else {
-        flipHorizontal = newValue;
-      }
-
-      viewport.setCamera({ flipHorizontal });
+      const { flipHorizontal } = viewport.getCamera();
+      viewport.setCamera({ flipHorizontal: !flipHorizontal });
      viewport.render();
    },
-    flipViewportVertical: ({
-      viewportId,
-      newValue = 'toggle',
-    }: {
-      viewportId?: string;
-      newValue?: 'toggle' | boolean;
-    }) => {
-      const enabledElement = viewportId
-        ? _getViewportEnabledElement(viewportId)
-        : _getActiveViewportEnabledElement();
+    flipViewportVertical: () => {
+      const enabledElement = _getActiveViewportEnabledElement();

      if (!enabledElement) {
        return;
@@ -1035,14 +815,8 @@ function commandsModule({

      const { viewport } = enabledElement;

-      let flipVertical: boolean;
-      if (newValue === 'toggle') {
-        const { flipVertical: currentVerticalFlip } = viewport.getCamera();
-        flipVertical = !currentVerticalFlip;
-      } else {
-        flipVertical = newValue;
-      }
-      viewport.setCamera({ flipVertical });
+      const { flipVertical } = viewport.getCamera();
+      viewport.setCamera({ flipVertical: !flipVertical });
      viewport.render();
    },
    invertViewport: ({ element }) => {
@@ -1245,7 +1019,7 @@ function commandsModule({

      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);

-      if (!toolGroup?.hasTool(toolName)) {
+      if (!toolGroup.hasTool(toolName)) {
        return;
      }

@@ -1415,9 +1189,6 @@ function commandsModule({
    },
    /**
     * Creates a labelmap for the active viewport
-     *
-     * The created labelmap will be registered as a display set and also added
-     * as a segmentation representation to the viewport.
     */
    createLabelmapForViewport: async ({ viewportId, options = {} }) => {
      const { viewportGridService, displaySetService, segmentationService } =
@@ -1438,7 +1209,6 @@ function commandsModule({

      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

-      // This will create the segmentation and register it as a display set
      const generatedSegmentationId = await segmentationService.createLabelmapForDisplaySet(
        displaySet,
        {
@@ -1455,7 +1225,6 @@ function commandsModule({
        }
      );

-      // Also add the segmentation representation to the viewport
      await segmentationService.addSegmentationRepresentation(viewportId, {
        segmentationId,
        type: Enums.SegmentationRepresentations.Labelmap,
@@ -1811,62 +1580,6 @@ function commandsModule({
        }
      });
    },
-    toggleSegmentLabel: () => {
-      const toolName = cornerstoneTools.SegmentLabelTool.toolName;
-      const toolGroupIds = toolGroupService.getToolGroupIds();
-
-      const isOn = toolGroupIds.some(toolGroupId => {
-        const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
-        const mode = toolGroup.getToolInstance(toolName)?.mode;
-        return mode === 'Active';
-      });
-
-      toolGroupIds.forEach(toolGroupId => {
-        const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
-        if (isOn) {
-          toolGroup.setToolDisabled(toolName);
-        } else {
-          toolGroup.setToolActive(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'));
@@ -1878,15 +1591,14 @@ function commandsModule({
      });
    },
    _handlePreviewAction: action => {
+      const labelmapTools = getLabelmapTools({ toolGroupService });
      const { viewport } = _getActiveViewportEnabledElement();
-      const previewTools = getPreviewTools({ toolGroupService });
+      const activeTools = labelmapTools.filter(
+        tool => tool.mode === 'Active' || tool.mode === 'Enabled'
+      );

-      previewTools.forEach(tool => {
-        try {
-          tool[`${action}Preview`]();
-        } catch (error) {
-          console.debug('Error accepting preview for tool', tool.toolName);
-        }
+      activeTools.forEach(tool => {
+        tool[`${action}Preview`]();
      });

      if (segmentAI.enabled) {
@@ -2013,9 +1725,6 @@ 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 }) => {
@@ -2025,162 +1734,11 @@ function commandsModule({
        displaySetInstanceUIDs,
      });

-      actions.setDisplaySetsForViewports({
-        viewportsToUpdate: updatedViewports.map(viewport => ({
+      updatedViewports.forEach(viewport => {
+        viewportGridService.setDisplaySetsForViewport({
          viewportId: viewport.viewportId,
          displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
-        })),
-      });
-    },
-    setViewportOrientation: ({ viewportId, orientation }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-      if (!viewport || viewport.type !== CoreEnums.ViewportType.ORTHOGRAPHIC) {
-        console.warn('Orientation can only be set on volume viewports');
-        return;
-      }
-
-      // Get display sets for this viewport to verify at least one is reconstructable
-      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
-      const displaySets = displaySetUIDs.map(uid => displaySetService.getDisplaySetByUID(uid));
-
-      if (!displaySets.some(ds => ds.isReconstructable)) {
-        console.warn('Cannot change orientation: No reconstructable display sets in viewport');
-        return;
-      }
-
-      viewport.setOrientation(orientation);
-      viewport.render();
-
-      // update the orientation in the viewport info
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-      viewportInfo.setOrientation(orientation);
-    },
-    /**
-     * Toggles the horizontal flip state of the viewport.
-     */
-    toggleViewportHorizontalFlip: ({ viewportId }: { viewportId?: string } = {}) => {
-      actions.flipViewportHorizontal({ viewportId, newValue: 'toggle' });
-    },
-
-    /**
-     * Explicitly sets the horizontal flip state of the viewport.
-     */
-    setViewportHorizontalFlip: ({
-      flipped,
-      viewportId,
-    }: {
-      flipped: boolean;
-      viewportId?: string;
-    }) => {
-      actions.flipViewportHorizontal({ viewportId, newValue: flipped });
-    },
-
-    /**
-     * Toggles the vertical flip state of the viewport.
-     */
-    toggleViewportVerticalFlip: ({ viewportId }: { viewportId?: string } = {}) => {
-      actions.flipViewportVertical({ viewportId, newValue: 'toggle' });
-    },
-
-    /**
-     * Explicitly sets the vertical flip state of the viewport.
-     */
-    setViewportVerticalFlip: ({
-      flipped,
-      viewportId,
-    }: {
-      flipped: boolean;
-      viewportId?: string;
-    }) => {
-      actions.flipViewportVertical({ viewportId, newValue: flipped });
-    },
-    /**
-     * Internal helper to rotate or set absolute rotation for a viewport.
-     */
-    _rotateViewport: ({
-      rotation,
-      viewportId,
-      rotationMode = 'apply',
-    }: {
-      rotation: number;
-      viewportId?: string;
-      rotationMode?: 'apply' | 'set';
-    }) => {
-      const enabledElement = viewportId
-        ? _getViewportEnabledElement(viewportId)
-        : _getActiveViewportEnabledElement();
-
-      if (!enabledElement) {
-        return;
-      }
-
-      const { viewport } = enabledElement;
-
-      if (viewport instanceof BaseVolumeViewport) {
-        const camera = viewport.getCamera();
-        const rotAngle = (rotation * Math.PI) / 180;
-        const rotMat = mat4.identity(new Float32Array(16));
-        mat4.rotate(rotMat, rotMat, rotAngle, camera.viewPlaneNormal);
-        const rotatedViewUp = vec3.transformMat4(vec3.create(), camera.viewUp, rotMat);
-        viewport.setCamera({ viewUp: rotatedViewUp as CoreTypes.Point3 });
-        viewport.render();
-        return;
-      }
-
-      if (viewport.getRotation !== undefined) {
-        const { rotation: currentRotation } = viewport.getViewPresentation();
-        const newRotation =
-          rotationMode === 'apply'
-            ? (currentRotation + rotation + 360) % 360
-            : (() => {
-                // In 'set' mode, account for the effect horizontal/vertical flips
-                // have on the perceived rotation direction. A single flip mirrors
-                // the image and inverses rotation direction, while two flips
-                // restore the original parity. We therefore invert the rotation
-                // angle when an odd number of flips are applied so that the
-                // requested absolute rotation matches the user expectation.
-                const { flipHorizontal = false, flipVertical = false } =
-                  viewport.getViewPresentation();
-
-                const flipsParity = (flipHorizontal ? 1 : 0) + (flipVertical ? 1 : 0);
-                const effectiveRotation = flipsParity % 2 === 1 ? -rotation : rotation;
-
-                return (effectiveRotation + 360) % 360;
-              })();
-        viewport.setViewPresentation({ rotation: newRotation });
-        viewport.render();
-      }
-    },
-    startRecordingForAnnotationGroup: () => {
-      cornerstoneTools.AnnotationTool.startGroupRecording();
-    },
-    endRecordingForAnnotationGroup: () => {
-      cornerstoneTools.AnnotationTool.endGroupRecording();
-    },
-    triggerCreateAnnotationMemo: ({
-      annotation,
-      FrameOfReferenceUID,
-      options,
-    }: {
-      annotation: ToolTypes.Annotation;
-      FrameOfReferenceUID: string;
-      options: { newAnnotation?: boolean; deleting?: boolean };
-    }): void => {
-      const { newAnnotation, deleting } = options;
-      const renderingEngines = getRenderingEngines();
-      const viewports = renderingEngines.flatMap(re => re.getViewports());
-      const validViewport = viewports.find(
-        vp => vp.getFrameOfReferenceUID() === FrameOfReferenceUID
-      );
-
-      if (!validViewport) {
-        return;
-      }
-
-      cornerstoneTools.AnnotationTool.createAnnotationMemo(validViewport.element, annotation, {
-        newAnnotation,
-        deleting,
+        });
      });
    },
  };
@@ -2220,7 +1778,9 @@ function commandsModule({
    updateMeasurement: {
      commandFn: actions.updateMeasurement,
    },
-    jumpToMeasurement: actions.jumpToMeasurement,
+    jumpToMeasurement: {
+      commandFn: actions.jumpToMeasurement,
+    },
    removeMeasurement: {
      commandFn: actions.removeMeasurement,
    },
@@ -2252,17 +1812,13 @@ function commandsModule({
      commandFn: actions.setToolEnabled,
    },
    rotateViewportCW: {
-      commandFn: actions.rotateViewportBy,
+      commandFn: actions.rotateViewport,
      options: { rotation: 90 },
    },
    rotateViewportCCW: {
-      commandFn: actions.rotateViewportBy,
+      commandFn: actions.rotateViewport,
      options: { rotation: -90 },
    },
-    rotateViewportCWSet: {
-      commandFn: actions.setViewportRotation,
-      options: { rotation: 90 },
-    },
    incrementActiveViewport: {
      commandFn: actions.changeActiveViewport,
    },
@@ -2271,18 +1827,10 @@ function commandsModule({
      options: { direction: -1 },
    },
    flipViewportHorizontal: {
-      commandFn: actions.toggleViewportHorizontalFlip,
+      commandFn: actions.flipViewportHorizontal,
    },
    flipViewportVertical: {
-      commandFn: actions.toggleViewportVerticalFlip,
-    },
-    setViewportHorizontalFlip: {
-      commandFn: actions.setViewportHorizontalFlip,
-      options: { flipped: true },
-    },
-    setViewportVerticalFlip: {
-      commandFn: actions.setViewportVerticalFlip,
-      options: { flipped: true },
+      commandFn: actions.flipViewportVertical,
    },
    invertViewport: {
      commandFn: actions.invertViewport,
@@ -2473,15 +2021,6 @@ function commandsModule({
    decreaseBrushSize: actions.decreaseBrushSize,
    addNewSegment: actions.addNewSegment,
    loadSegmentationDisplaySetsForViewport: actions.loadSegmentationDisplaySetsForViewport,
-    setViewportOrientation: actions.setViewportOrientation,
-    hydrateSecondaryDisplaySet: actions.hydrateSecondaryDisplaySet,
-    getVolumeIdForDisplaySet: actions.getVolumeIdForDisplaySet,
-    triggerCreateAnnotationMemo: actions.triggerCreateAnnotationMemo,
-    startRecordingForAnnotationGroup: actions.startRecordingForAnnotationGroup,
-    endRecordingForAnnotationGroup: actions.endRecordingForAnnotationGroup,
-    toggleSegmentLabel: actions.toggleSegmentLabel,
-    jumpToMeasurementViewport: actions.jumpToMeasurementViewport,
-    initializeSegmentLabelTool: actions.initializeSegmentLabelTool,
  };

  return {
@@ -1,149 +0,0 @@
-import { useToolbar, useViewportMousePosition } from '@ohif/core/src/hooks';
-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,
-  location,
-  buttonSection,
-}: {
-  viewportId: string;
-  location: number;
-  buttonSection: string;
-}) {
-  const {
-    onInteraction,
-    toolbarButtons,
-    isItemOpen,
-    isItemLocked,
-    openItem,
-    closeItem,
-    toggleLock,
-  } = useToolbar({
-    buttonSection,
-  });
-
-  const mousePosition = useViewportMousePosition(viewportId);
-  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) {
-      firstMountRef.current = false;
-
-      const timer = setTimeout(() => {
-        setShowAllIcons(false);
-      }, 3000);
-
-      return () => clearTimeout(timer);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!showAllIcons && mousePosition.isInViewport) {
-      const mouseHoverLocation = mouseNearControlsRanges[location];
-      if (mousePosition.isWithinNormalizedBox(mouseHoverLocation)) {
-        setIsMouseNearControls(true);
-      } else {
-        setIsMouseNearControls(false);
-      }
-    }
-  }, [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;
-  }
-
-  if (!hasColorbar) {
-    return null;
-  }
-
-  return (
-    <div className={classNames('flex gap-2', getFlexDirectionClassName(location))}>
-      {toolbarButtons.map(toolDef => {
-        if (!toolDef) {
-          return null;
-        }
-
-        const { id, Component, componentProps } = toolDef;
-
-        // Enhanced props with state and actions - respecting viewport specificity
-        const enhancedProps = {
-          ...componentProps,
-          isOpen: isItemOpen(id, viewportId),
-          isLocked: isItemLocked(id, viewportId),
-          onOpen: () => handleOnItemOpen(id, viewportId),
-          onClose: () => handleOnItemClose(id, viewportId),
-          onToggleLock: () => toggleLock(id, viewportId),
-          viewportId,
-        };
-
-        const tool = (
-          <Component
-            key={id}
-            id={id}
-            location={location}
-            onInteraction={args => {
-              onInteraction({
-                ...args,
-                itemId: id,
-                viewportId,
-              });
-            }}
-            {...enhancedProps}
-          />
-        );
-
-        // 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 =
-          isAnItemOpen || showAllIcons || id === 'Colorbar' || isMouseNearControls;
-
-        return (
-          <div
-            key={id}
-            className={shouldBeVisible ? 'opacity-100' : 'pointer-events-none opacity-0'}
-            style={{ transition: 'opacity 0.2s ease-in-out' }}
-          >
-            {tool}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default AdvancedRenderingControls;
@@ -1 +0,0 @@
-export { default } from './AdvancedRenderingControls';
@@ -259,24 +259,22 @@ function DicomUploadProgress({
  }, [getPercentCompleteRounded, percentComplete]);

  /**
-   * 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.
+   * 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.
   */
  const getNofMFilesStyle = useCallback(() => {
    // the number of digits accounts for the digits being on each side of the ' of '
-    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;
+    const numDigits = 2 * dicomFileUploaderArr.length.toString().length;
+    // the number of digits + 2 spaces and 2 characters for ' of '
+    const numChars = numDigits + 4;
    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 text-white">
+      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg">
        {numFilesCompleted === dicomFileUploaderArr.length ? (
          <>
            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${
@@ -292,24 +290,21 @@ 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
-              className={
-                'text-primary hover:text-primary-lightactive:text-aqua-pale ml-auto cursor-pointer whitespace-nowrap'
-              }
+              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'
+              )}
              onClick={cancelAllUploads}
            >
              Cancel All Uploads
@@ -359,7 +354,7 @@ function DicomUploadProgress({
                ></ProgressLoadingBar>
              </div>
              <div className="ml-1 flex w-24 items-center">
-                <div className="w-10 text-right text-foreground">{`${getPercentCompleteRounded()}%`}</div>
+                <div className="w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
                {getShowFailedOnlyIconComponent()}
              </div>
            </>
@@ -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 text-white">
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
              {dicomFileUploader.getFileName()}
            </div>
          </div>
@@ -1,171 +0,0 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ViewportActionButton } from '@ohif/ui-next';
-import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
-import { useSystem } from '@ohif/core/src';
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-import { useMeasurementTracking } from '../../hooks/useMeasurementTracking';
-
-/**
- * ModalityLoadBadge displays the status and actionable buttons for viewports containing
- * special displaySets (SR, SEG, RTSTRUCT) or when tracking measurements
- */
-function ModalityLoadBadge({ viewportId }: { viewportId: string }) {
-  const { commandsManager } = useSystem();
-  const { t } = useTranslation('Common');
-  const loadStr = t('LOAD');
-
-  const { isTracked, isLocked } = useMeasurementTracking({ viewportId });
-
-  const { backgroundDisplaySet } = useViewportDisplaySets(viewportId);
-
-  const [specialDisplaySet, setSpecialDisplaySet] = useState(null);
-
-  const allDisplaySets = useMemo(() => {
-    return [backgroundDisplaySet].filter(Boolean);
-  }, [backgroundDisplaySet]);
-
-  useEffect(() => {
-    const displaySet = allDisplaySets.find(ds => ds.isOverlayDisplaySet || ds?.Modality === 'SR');
-
-    setSpecialDisplaySet(displaySet || null);
-  }, [allDisplaySets]);
-
-  const statusInfo = useMemo(() => {
-    if (isTracked && !specialDisplaySet) {
-      return {
-        type: 'SR',
-        isHydrated: true,
-        isTracked,
-        displaySet: null,
-        tooltip: 'Currently tracking measurements in this viewport',
-      };
-    }
-
-    if (!specialDisplaySet) {
-      return {
-        type: null,
-      };
-    }
-
-    const type = specialDisplaySet.Modality;
-    const isHydrated = specialDisplaySet.isHydrated || false;
-    let tooltip = null;
-    const isRehydratable = specialDisplaySet.isRehydratable || false;
-
-    if (type === 'SEG') {
-      tooltip = isHydrated
-        ? 'This Segmentation is loaded in the segmentation panel'
-        : 'Click LOAD to load segmentation.';
-    } else if (type === 'RTSTRUCT') {
-      tooltip = isHydrated
-        ? 'This RTSTRUCT is loaded in the segmentation panel'
-        : 'Click LOAD to load RTSTRUCT.';
-    } else if (type === 'SR') {
-      if (!isRehydratable) {
-        tooltip = 'This structured report is not compatible with this application.';
-      } else if (isRehydratable && isLocked) {
-        tooltip =
-          'This structured report is currently read-only because you are tracking measurements in another viewport.';
-      } else {
-        tooltip = `Click ${loadStr} to restore measurements.`;
-      }
-    }
-
-    return {
-      type,
-      isHydrated,
-      displaySet: specialDisplaySet,
-      isRehydratable,
-      tooltip,
-    };
-  }, [specialDisplaySet, loadStr, isLocked, isTracked]);
-
-  // Nothing to show if there's no special display set type or tracking
-  if (!statusInfo.type && !isTracked) {
-    return null;
-  }
-
-  const StatusIcon = () => {
-    if (statusInfo.type === 'SR') {
-      if (statusInfo.isRehydratable && !isLocked) {
-        return (
-          <Icons.ByName
-            className="text-muted-foreground h-4 w-4"
-            name="status-untracked"
-          />
-        );
-      }
-
-      if (statusInfo.isRehydratable && isLocked) {
-        return (
-          <Icons.ByName
-            name="status-locked"
-            className="h-4 w-4"
-          />
-        );
-      } else {
-        return (
-          <Icons.ByName
-            name="status-alert"
-            className="h-4 w-4"
-          />
-        );
-      }
-    } else {
-      return <Icons.StatusUntracked className="h-4 w-4" />;
-    }
-  };
-
-  const StatusArea = () => {
-    if (!statusInfo.isHydrated) {
-      return (
-        <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>
-          </div>
-          {/* We don't show the load button for SRs because we handle it in the SR extension
-          via the tracked measurement context that works with state machine, this is not a regression right now  */}
-          {statusInfo.type !== 'SR' && (
-            <ViewportActionButton
-              onInteraction={() => {
-                commandsManager.runCommand('hydrateSecondaryDisplaySet', {
-                  displaySet: statusInfo.displaySet,
-                  viewportId,
-                });
-              }}
-            >
-              {loadStr}
-            </ViewportActionButton>
-          )}
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <>
-      {statusInfo.tooltip && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span>
-              <StatusArea />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            <div>{statusInfo.tooltip}</div>
-          </TooltipContent>
-        </Tooltip>
-      )}
-      {!statusInfo.tooltip && <StatusArea />}
-    </>
-  );
-}
-
-export default ModalityLoadBadge;
@@ -1 +0,0 @@
-export { default } from './ModalityLoadBadge';
@@ -1,151 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { ViewportActionArrows } from '@ohif/ui-next';
-import { useSystem } from '@ohif/core/src';
-import { utils } from '../..';
-import { useViewportSegmentations } from '../../hooks';
-import { useMeasurementTracking } from '../../hooks/useMeasurementTracking';
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-
-/**
- * NavigationComponent provides navigation controls for viewports containing
- * special displaySets (SR, SEG, RTSTRUCT) to navigate between segments or measurements
- */
-function NavigationComponent({ viewportId }: { viewportId: string }) {
-  const { servicesManager } = useSystem();
-  const { segmentationService, cornerstoneViewportService, measurementService } =
-    servicesManager.services;
-
-  // Get tracking information
-  const { isTracked, trackedMeasurementUIDs } = useMeasurementTracking({ viewportId });
-  const { viewportDisplaySets } = useViewportDisplaySets(viewportId);
-  const [measurementSelected, setMeasurementSelected] = useState(0);
-  const isSRDisplaySet = viewportDisplaySets.some(displaySet => displaySet?.Modality === 'SR');
-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-  // Get segmentation information
-  const { segmentationsWithRepresentations } = useViewportSegmentations({
-    viewportId,
-  });
-
-  const hasSegmentations = segmentationsWithRepresentations.length > 0;
-
-  // prefer segment navigation if available
-  const navigationMode = hasSegmentations
-    ? 'segment'
-    : isSRDisplaySet
-      ? 'measurement'
-      : isTracked
-        ? 'measurement'
-        : null;
-
-  const handleMeasurementNavigation = useCallback(
-    (direction: number) => {
-      const measurementDisplaySet = viewportDisplaySets.find(
-        displaySet => displaySet?.Modality === 'SR'
-      );
-
-      if (measurementDisplaySet) {
-        const measurements = measurementDisplaySet.measurements;
-        if (measurements.length <= 0) {
-          return;
-        }
-
-        const newIndex = getNextIndex(measurementSelected, direction, measurements.length);
-        setMeasurementSelected(newIndex);
-
-        const measurement = measurements[newIndex];
-        cornerstoneViewport.setViewReference({
-          referencedImageId: measurement.imageId,
-        });
-        return;
-      }
-
-      if (isTracked && trackedMeasurementUIDs.length > 0) {
-        const newIndex = getNextIndex(
-          measurementSelected,
-          direction,
-          trackedMeasurementUIDs.length
-        );
-        setMeasurementSelected(newIndex);
-        measurementService.jumpToMeasurement(viewportId, trackedMeasurementUIDs[newIndex]);
-      }
-    },
-    [
-      viewportId,
-      cornerstoneViewport,
-      measurementSelected,
-      measurementService,
-      isTracked,
-      trackedMeasurementUIDs,
-      viewportDisplaySets,
-    ]
-  );
-
-  const handleSegmentNavigation = useCallback(
-    (direction: number) => {
-      if (!segmentationsWithRepresentations.length) {
-        return;
-      }
-
-      const segmentationId = segmentationsWithRepresentations[0].segmentation.segmentationId;
-
-      utils.handleSegmentChange({
-        direction,
-        segmentationId,
-        viewportId,
-        selectedSegmentObjectIndex: 0,
-        segmentationService,
-      });
-    },
-    [segmentationsWithRepresentations, viewportId, segmentationService]
-  );
-
-  // Handle navigation between segments/measurements
-  const handleNavigate = useCallback(
-    (direction: number) => {
-      if (navigationMode === 'segment') {
-        handleSegmentNavigation(direction);
-      } else if (navigationMode === 'measurement') {
-        handleMeasurementNavigation(direction);
-      }
-    },
-    [navigationMode, handleSegmentNavigation, handleMeasurementNavigation]
-  );
-
-  // Only render if we have a navigation mode
-  if (!navigationMode) {
-    return null;
-  }
-
-  return (
-    <ViewportActionArrows
-      onArrowsClick={handleNavigate}
-      className="h-6"
-    />
-  );
-}
-
-/**
- * Calculate the next index with circular navigation support
- * @param currentIndex Current index position
- * @param direction Direction of movement (1 for next, -1 for previous)
- * @param totalItems Total number of items to navigate through
- * @returns The next index with wrap-around support
- */
-function getNextIndex(currentIndex: number, direction: number, totalItems: number): number {
-  if (totalItems <= 0) {
-    return 0;
-  }
-
-  // Use modulo to handle circular navigation
-  let nextIndex = (currentIndex + direction) % totalItems;
-
-  // Handle negative index when going backwards from index 0
-  if (nextIndex < 0) {
-    nextIndex = totalItems - 1;
-  }
-
-  return nextIndex;
-}
-
-export default NavigationComponent;
@@ -1,3 +0,0 @@
-import NavigationComponent from './NavigationComponent';
-
-export default NavigationComponent;
@@ -1,94 +1,25 @@
-import React, { memo } from 'react';
-import { ViewportActionCorners, IconPresentationProvider, ToolButton } from '@ohif/ui-next';
-import { Toolbar } from '@ohif/extension-default/src/Toolbar/Toolbar';
-import { ButtonLocation } from '@ohif/core/src/services/ToolBarService/ToolbarService';
-import { useViewportHover } from '../hooks';
+import React from 'react';
+import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
+import { useSystem } from '@ohif/core';

 export type OHIFViewportActionCornersProps = {
  viewportId: string;
 };

-function OHIFViewportActionCornersComponent({ viewportId }: OHIFViewportActionCornersProps) {
-  // Use the viewport hover hook to track if viewport is hovered or active
-  const { isHovered, isActive } = useViewportHover(viewportId);
-
-  const shouldShowCorners = isHovered || isActive;
-
-  if (!shouldShowCorners) {
+function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
+  const { servicesManager } = useSystem();
+  const [viewportActionCornersState] = useViewportActionCornersContext();
+  const ViewportActionCorners =
+    servicesManager.services.customizationService.getCustomization('ui.viewportActionCorner');
+  if (!viewportActionCornersState[viewportId]) {
    return null;
  }

  return (
-    <IconPresentationProvider
-      size="medium"
-      IconContainer={ToolButton}
-      containerProps={{
-        size: 'tiny',
-        className: 'font-normal text-primary hover:bg-primary/25',
-      }}
-    >
-      <ViewportActionCorners.Container>
-        <ViewportActionCorners.TopLeft>
-          <Toolbar
-            buttonSection="viewportActionMenu.topLeft"
-            viewportId={viewportId}
-            location={ButtonLocation.TopLeft}
-          />
-        </ViewportActionCorners.TopLeft>
-        <ViewportActionCorners.TopMiddle>
-          <Toolbar
-            buttonSection="viewportActionMenu.topMiddle"
-            viewportId={viewportId}
-            location={ButtonLocation.TopMiddle}
-          />
-        </ViewportActionCorners.TopMiddle>
-        <ViewportActionCorners.TopRight>
-          <Toolbar
-            buttonSection="viewportActionMenu.topRight"
-            viewportId={viewportId}
-            location={ButtonLocation.TopRight}
-          />
-        </ViewportActionCorners.TopRight>
-        <ViewportActionCorners.LeftMiddle>
-          <Toolbar
-            buttonSection="viewportActionMenu.leftMiddle"
-            viewportId={viewportId}
-            location={ButtonLocation.LeftMiddle}
-          />
-        </ViewportActionCorners.LeftMiddle>
-        <ViewportActionCorners.RightMiddle>
-          <Toolbar
-            buttonSection="viewportActionMenu.rightMiddle"
-            viewportId={viewportId}
-            location={ButtonLocation.RightMiddle}
-          />
-        </ViewportActionCorners.RightMiddle>
-        <ViewportActionCorners.BottomLeft>
-          <Toolbar
-            buttonSection="viewportActionMenu.bottomLeft"
-            viewportId={viewportId}
-            location={ButtonLocation.BottomLeft}
-          />
-        </ViewportActionCorners.BottomLeft>
-        <ViewportActionCorners.BottomMiddle>
-          <Toolbar
-            buttonSection="viewportActionMenu.bottomMiddle"
-            viewportId={viewportId}
-            location={ButtonLocation.BottomMiddle}
-          />
-        </ViewportActionCorners.BottomMiddle>
-        <ViewportActionCorners.BottomRight>
-          <Toolbar
-            buttonSection="viewportActionMenu.bottomRight"
-            viewportId={viewportId}
-            location={ButtonLocation.BottomRight}
-          />
-        </ViewportActionCorners.BottomRight>
-      </ViewportActionCorners.Container>
-    </IconPresentationProvider>
+    <ViewportActionCorners
+      cornerComponents={viewportActionCornersState[viewportId]}
+    ></ViewportActionCorners>
  );
 }

-const OHIFViewportActionCorners = memo(OHIFViewportActionCornersComponent);
-
 export default OHIFViewportActionCorners;
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Numeric } from '@ohif/ui-next';
-import { useViewportDisplaySets, useViewportRendering } from '../../hooks';
-
-interface OpacityMenuProps {
-  viewportId: string;
-  className?: string;
-}
-
-function OpacityMenu({ viewportId, className }: OpacityMenuProps) {
-  const { backgroundDisplaySet, foregroundDisplaySets } = useViewportDisplaySets(viewportId, {
-    includeForeground: true,
-    includeBackground: true,
-  });
-  const { opacityLinear, setOpacityLinear } = useViewportRendering(viewportId, {
-    displaySetInstanceUID: foregroundDisplaySets[0].displaySetInstanceUID,
-  });
-
-  const opacityValue = opacityLinear !== undefined ? opacityLinear : 0;
-  const backgroundModality = backgroundDisplaySet?.Modality || '';
-  const foregroundModality = foregroundDisplaySets[0]?.Modality || '';
-
-  return (
-    <div className={className}>
-      <div className="bg-popover w-72 rounded-lg p-3">
-        <div className="mb-2 flex items-center justify-center">
-          <span className="text-muted-foreground text-base">Opacity</span>
-        </div>
-        <div className="">
-          <Numeric.Container
-            mode="singleRange"
-            value={opacityValue}
-            onChange={(val: number | [number, number]) => {
-              if (typeof val === 'number') {
-                setOpacityLinear(val);
-              }
-            }}
-            min={0}
-            max={1}
-            step={0.0001}
-          >
-            <div className="flex items-center">
-              <span className="text-foreground mr-2 text-sm">{backgroundModality}</span>
-              <Numeric.SingleRange showNumberInput={false} />
-              <span className="text-foreground ml-2 text-sm">{foregroundModality}</span>
-            </div>
-          </Numeric.Container>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default OpacityMenu;
@@ -1,85 +0,0 @@
-import React, { ReactNode } from 'react';
-import { useSystem } from '@ohif/core';
-import {
-  Button,
-  Icons,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  useIconPresentation,
-} from '@ohif/ui-next';
-import OpacityMenu from './OpacityMenu';
-
-type OpacityMenuWrapperProps = {
-  viewportId: string;
-  location: string;
-  isOpen?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  disabled?: boolean;
-};
-
-export function OpacityMenuWrapper(props: OpacityMenuWrapperProps): ReactNode {
-  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
-  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
-
-  const handleOpenChange = (openState: boolean) => {
-    if (openState) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  };
-
-  const { servicesManager } = useSystem();
-  const { toolbarService } = servicesManager.services;
-
-  const { align, side } = toolbarService.getAlignAndSide(location);
-
-  const Icon = <Icons.Opacity className={iconClassName} />;
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-    >
-      <PopoverTrigger
-        asChild
-        className="flex items-center justify-center"
-      >
-        <div>
-          {IconContainer ? (
-            <IconContainer
-              disabled={disabled}
-              icon="Opacity"
-              {...rest}
-              {...containerProps}
-            >
-              {Icon}
-            </IconContainer>
-          ) : (
-            <Button
-              variant="ghost"
-              size="icon"
-              disabled={disabled}
-            >
-              {Icon}
-            </Button>
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        className="border-none bg-transparent p-0 shadow-none"
-        side={side}
-        align={align}
-        alignOffset={0}
-        sideOffset={5}
-      >
-        <OpacityMenu
-          className="w-full"
-          viewportId={viewportId}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
@@ -1,2 +0,0 @@
-export { OpacityMenuWrapper } from './OpacityMenuWrapper';
-export { default as OpacityMenu } from './OpacityMenu';
@@ -1,26 +0,0 @@
-import React from 'react';
-
-// should be used in a Select component
-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"
-    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">
-        {displaySet.Modality}
-      </span>
-    )}
-  </div>
-);
-
-export default SelectItemWithModality;
@@ -24,38 +24,36 @@ export const groupByStudy = (items, grouping, childProps) => {

  let firstSelected, firstGroup;

-  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);
+  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;
      }
-      if (!firstSelected && firstGroup) {
-        firstGroup.isSelected = true;
-      }
-      const group = groups.get(studyUID);
-      group.items.push(item);
-    });
+      firstGroup ||= group;
+      groups.set(studyUID, group);
+    }
+    if (!firstSelected && firstGroup) {
+      firstGroup.isSelected = true;
+    }
+    const group = groups.get(studyUID);
+    group.items.push(item);
+  });

  return groups;
 };
@@ -1,104 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Numeric,
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  Button,
-} from '@ohif/ui-next';
-import { useViewportRendering } from '../../hooks';
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-import SelectItemWithModality from '../SelectItemWithModality';
-
-interface ThresholdMenuProps {
-  viewportId: string;
-  className?: string;
-}
-
-function ThresholdMenu({ viewportId, className }: ThresholdMenuProps) {
-  const { viewportDisplaySets, foregroundDisplaySets } = useViewportDisplaySets(viewportId);
-  const [selectedDisplaySetUID, setSelectedDisplaySetUID] = useState<string | undefined>(
-    foregroundDisplaySets.length > 0 ? foregroundDisplaySets[0].displaySetInstanceUID : undefined
-  );
-
-  const { threshold, setThreshold, pixelValueRange } = useViewportRendering(viewportId, {
-    displaySetInstanceUID: selectedDisplaySetUID,
-  });
-
-  const { min, max } = pixelValueRange;
-  const thresholdValue = threshold ?? min;
-
-  useEffect(() => {
-    if (foregroundDisplaySets.length > 0 && !selectedDisplaySetUID) {
-      setSelectedDisplaySetUID(foregroundDisplaySets[0].displaySetInstanceUID);
-    }
-  }, [foregroundDisplaySets, selectedDisplaySetUID]);
-
-  const selectedDisplaySet = viewportDisplaySets.find(
-    ds => ds.displaySetInstanceUID === selectedDisplaySetUID
-  );
-
-  return (
-    <div className={className}>
-      <div className="bg-popover w-72 rounded-lg p-4 shadow-md">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <span className="text-muted-foreground text-base">Threshold</span>
-            {viewportDisplaySets.length > 1 && (
-              <div className="w-32">
-                <Select
-                  value={selectedDisplaySetUID}
-                  onValueChange={setSelectedDisplaySetUID}
-                >
-                  <SelectTrigger>
-                    <SelectValue>{selectedDisplaySet?.label || 'Select Display Set'}</SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {viewportDisplaySets.map(ds => (
-                      <SelectItem
-                        key={ds.displaySetInstanceUID}
-                        value={ds.displaySetInstanceUID}
-                      >
-                        <SelectItemWithModality displaySet={ds} />
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-          </div>
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={() => setThreshold(min)}
-            className="text-sm"
-          >
-            Reset
-          </Button>
-        </div>
-        <Numeric.Container
-          mode="singleRange"
-          value={thresholdValue}
-          onChange={(val: number | [number, number]) => {
-            if (typeof val === 'number') {
-              setThreshold(val);
-            }
-          }}
-          min={min}
-          max={max}
-          step={0.01}
-        >
-          <Numeric.SingleRange />
-          <div className="mt-1 flex justify-between">
-            <span className="text-muted-foreground text-sm">{min.toFixed(0)}</span>
-            <span className="text-muted-foreground text-sm">{max.toFixed(0)}</span>
-          </div>
-        </Numeric.Container>
-      </div>
-    </div>
-  );
-}
-
-export default ThresholdMenu;
@@ -1,85 +0,0 @@
-import React, { ReactNode } from 'react';
-import { useSystem } from '@ohif/core';
-import {
-  Button,
-  Icons,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  useIconPresentation,
-} from '@ohif/ui-next';
-import ThresholdMenu from './ThresholdMenu';
-
-type ThresholdMenuWrapperProps = {
-  viewportId: string;
-  location: string;
-  isOpen?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  disabled?: boolean;
-};
-
-export function ThresholdMenuWrapper(props: ThresholdMenuWrapperProps): ReactNode {
-  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
-  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
-
-  const handleOpenChange = (openState: boolean) => {
-    if (openState) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  };
-
-  const { servicesManager } = useSystem();
-  const { toolbarService } = servicesManager.services;
-
-  const { align, side } = toolbarService.getAlignAndSide(location);
-
-  const Icon = <Icons.Threshold className={iconClassName} />;
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-    >
-      <PopoverTrigger
-        asChild
-        className="flex items-center justify-center"
-      >
-        <div>
-          {IconContainer ? (
-            <IconContainer
-              disabled={disabled}
-              icon="Threshold"
-              {...rest}
-              {...containerProps}
-            >
-              {Icon}
-            </IconContainer>
-          ) : (
-            <Button
-              variant="ghost"
-              size="icon"
-              disabled={disabled}
-            >
-              {Icon}
-            </Button>
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        className="border-none bg-transparent p-0 shadow-none"
-        side={side}
-        align={align}
-        alignOffset={0}
-        sideOffset={5}
-      >
-        <ThresholdMenu
-          className="w-full"
-          viewportId={viewportId}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
@@ -1,2 +0,0 @@
-export { ThresholdMenuWrapper } from './ThresholdMenuWrapper';
-export { default as ThresholdMenu } from './ThresholdMenu';
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
-import { useMeasurementTracking } from '../../hooks/useMeasurementTracking';
-
-/**
- * TrackingStatus displays an indicator icon for viewports that have
- * tracked measurements
- */
-function TrackingStatus({ viewportId }: { viewportId: string }) {
-  const { isTracked } = useMeasurementTracking({ viewportId });
-
-  if (!isTracked) {
-    return null;
-  }
-
-  return (
-    <>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span>
-            <Icons.StatusTracking className="h-4 w-4" />
-          </span>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <div>Tracking</div>
-        </TooltipContent>
-      </Tooltip>
-    </>
-  );
-}
-
-export default TrackingStatus;
@@ -1 +0,0 @@
-export { default } from './TrackingStatus';
@@ -1,190 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  Numeric,
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from '@ohif/ui-next';
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-import { useViewportRendering } from '../../hooks/useViewportRendering';
-import { useSystem } from '@ohif/core';
-import { cache } from '@cornerstonejs/core';
-
-interface VOIManualControlMenuProps {
-  viewportId: string;
-  className?: string;
-}
-
-const TABS = {
-  MINMAX: 'minmax',
-  MANUAL: 'manual',
-};
-
-function VOIManualControlMenu({ viewportId, className }: VOIManualControlMenuProps) {
-  const { servicesManager } = useSystem();
-  const { displaySetService } = servicesManager.services;
-  const [activeTab, setActiveTab] = useState(TABS.MINMAX);
-  const { viewportDisplaySets } = useViewportDisplaySets(viewportId);
-  const [selectedDisplaySetUID, setSelectedDisplaySetUID] = useState<string | undefined>(
-    viewportDisplaySets.length > 0 ? viewportDisplaySets[0].displaySetInstanceUID : undefined
-  );
-
-  const { voiRange, setVOIRange, windowLevel, setWindowLevel } = useViewportRendering(viewportId, {
-    displaySetInstanceUID: selectedDisplaySetUID,
-  });
-
-  useEffect(() => {
-    if (viewportDisplaySets.length > 0 && !selectedDisplaySetUID) {
-      setSelectedDisplaySetUID(viewportDisplaySets[0].displaySetInstanceUID);
-    }
-  }, [viewportDisplaySets, selectedDisplaySetUID]);
-
-  if (!voiRange) {
-    return null;
-  }
-
-  const { upper, lower } = voiRange;
-  const { windowWidth, windowCenter } = windowLevel;
-
-  const selectedViewportImageIds =
-    displaySetService.getDisplaySetByUID(selectedDisplaySetUID)?.imageIds;
-
-  let min = Infinity;
-  let max = -Infinity;
-
-  if (selectedViewportImageIds) {
-    for (const imageId of selectedViewportImageIds) {
-      const image = cache.getImage(imageId);
-      if (image) {
-        min = Math.min(min, image.minPixelValue);
-        max = Math.max(max, image.maxPixelValue);
-      }
-    }
-  }
-
-  // Provide reasonable defaults if min/max couldn't be determined
-  if (min === Infinity || max === -Infinity) {
-    min = 0;
-    max = 255;
-  }
-
-  const selectedDisplaySet = viewportDisplaySets.find(
-    ds => ds.displaySetInstanceUID === selectedDisplaySetUID
-  );
-
-  return (
-    <div className={className}>
-      <div className="bg-popover w-72 rounded-lg p-4 shadow-md">
-        <Tabs
-          defaultValue={activeTab}
-          onValueChange={setActiveTab}
-        >
-          <div className="mb-4 flex items-center space-x-2">
-            {viewportDisplaySets.length > 1 && (
-              <Select
-                value={selectedDisplaySetUID}
-                onValueChange={setSelectedDisplaySetUID}
-              >
-                <SelectTrigger>
-                  <SelectValue>{selectedDisplaySet?.label || 'Select Display Set'}</SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {viewportDisplaySets.map(ds => (
-                    <SelectItem
-                      key={ds.displaySetInstanceUID}
-                      value={ds.displaySetInstanceUID}
-                    >
-                      {`${ds.SeriesDescription || ''}`.trim()}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
-            <TabsList className="w-full flex-1">
-              <TabsTrigger
-                value={TABS.MINMAX}
-                className="flex-1"
-              >
-                Min/Max
-              </TabsTrigger>
-              <TabsTrigger
-                value={TABS.MANUAL}
-                className="flex-1"
-              >
-                Manual
-              </TabsTrigger>
-            </TabsList>
-          </div>
-
-          <TabsContent value={TABS.MINMAX}>
-            <Numeric.Container
-              mode="doubleRange"
-              min={min}
-              max={max}
-              values={[lower, upper]}
-              step={1}
-              className="space-y-1"
-              onChange={(vals: [number, number]) => {
-                const [newLower, newUpper] = vals;
-                if (newLower !== lower || newUpper !== upper) {
-                  setVOIRange({ lower: newLower, upper: newUpper });
-                }
-              }}
-            >
-              <Numeric.DoubleRange showNumberInputs />
-            </Numeric.Container>
-          </TabsContent>
-          <TabsContent value={TABS.MANUAL}>
-            <div className="space-y-1">
-              <Numeric.Container
-                mode="singleRange"
-                min={0}
-                max={max}
-                step={1}
-                value={windowWidth}
-                className="space-y-1"
-                onChange={(val: number) => {
-                  if (val !== windowWidth) {
-                    setWindowLevel({ windowWidth: val, windowCenter });
-                  }
-                }}
-              >
-                <div className="flex items-center space-x-2">
-                  <Numeric.Label>W:</Numeric.Label>
-                  <Numeric.SingleRange showNumberInput />
-                </div>
-              </Numeric.Container>
-
-              <Numeric.Container
-                mode="singleRange"
-                min={min}
-                max={max}
-                step={1}
-                value={windowCenter}
-                className="space-y-1"
-                onChange={(val: number) => {
-                  if (val !== windowCenter) {
-                    setWindowLevel({ windowWidth, windowCenter: val });
-                  }
-                }}
-              >
-                <div className="flex items-center space-x-2">
-                  <Numeric.Label>L:</Numeric.Label>
-                  <Numeric.SingleRange showNumberInput />
-                </div>
-              </Numeric.Container>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  );
-}
-
-export default VOIManualControlMenu;
@@ -1,85 +0,0 @@
-import React, { ReactNode } from 'react';
-import { useSystem } from '@ohif/core';
-import {
-  Button,
-  Icons,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  useIconPresentation,
-} from '@ohif/ui-next';
-import VOIManualControlMenu from './VOIManualControlMenu';
-
-type VOIManualControlMenuWrapperProps = {
-  viewportId: string;
-  location: string;
-  isOpen?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  disabled?: boolean;
-};
-
-export function VOIManualControlMenuWrapper(props: VOIManualControlMenuWrapperProps): ReactNode {
-  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
-  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
-
-  const handleOpenChange = (openState: boolean) => {
-    if (openState) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  };
-
-  const { servicesManager } = useSystem();
-  const { toolbarService } = servicesManager.services;
-
-  const { align, side } = toolbarService.getAlignAndSide(location);
-
-  const Icon = <Icons.WindowLevelAdvanced className={iconClassName} />;
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-    >
-      <PopoverTrigger
-        asChild
-        className="flex items-center justify-center"
-      >
-        <div>
-          {IconContainer ? (
-            <IconContainer
-              disabled={disabled}
-              icon="WindowLevelAdvanced"
-              {...rest}
-              {...containerProps}
-            >
-              {Icon}
-            </IconContainer>
-          ) : (
-            <Button
-              variant="ghost"
-              size="icon"
-              disabled={disabled}
-            >
-              {Icon}
-            </Button>
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        className="border-none bg-transparent p-0 shadow-none"
-        side={side}
-        align={align}
-        alignOffset={0}
-        sideOffset={5}
-      >
-        <VOIManualControlMenu
-          className="w-full"
-          viewportId={viewportId}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
@@ -1,2 +0,0 @@
-export { VOIManualControlMenuWrapper } from './VOIManualControlMenuWrapper';
-export { default as VOIManualControlMenu } from './VOIManualControlMenu';
@@ -1,158 +0,0 @@
-import React, { useEffect, useRef, useMemo, memo } from 'react';
-import { utilities } from '@cornerstonejs/tools';
-import { useSystem, useViewportRef, useViewportSize } from '@ohif/core';
-import {
-  ColorbarPositionType,
-  TickPositionType,
-  ColorbarCustomization,
-  TickStyleType,
-  ContainerStyleType,
-} from '../../types/Colorbar';
-import { ColorbarRangeTextPosition } from '@cornerstonejs/tools/utilities/voi/colorbar/enums/ColorbarRangeTextPosition';
-
-const { ViewportColorbar: CornerstoneViewportColorbar } = utilities.voi.colorbar;
-
-type ColorbarProps = {
-  viewportId: string;
-  displaySetInstanceUID: string;
-  colormap?: any;
-  colormaps: any[];
-  activeColormapName: string;
-  volumeId?: string;
-  position: ColorbarPositionType;
-  tickPosition: TickPositionType;
-  tickStyles?: TickStyleType;
-  containerStyles?: ContainerStyleType;
-  viewportElementRef?: React.RefObject<HTMLDivElement>;
-  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
- * positioned appropriately based on the colorbar position.
- */
-const ViewportColorbar = memo(function ViewportColorbar({
-  viewportId,
-  displaySetInstanceUID,
-  colormaps,
-  activeColormapName,
-  volumeId,
-  position,
-  tickPosition,
-  tickStyles,
-  numColorbars,
-}: ColorbarProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { servicesManager } = useSystem();
-  const { customizationService } = servicesManager.services;
-  const viewportElementRef = useViewportRef(viewportId);
-  const { height, width } = useViewportSize(viewportId);
-
-  // Memoize colorbar customization to prevent rerenders from unrelated customization changes
-  const colorbarCustomization = useMemo(() => {
-    return customizationService.getCustomization(
-      'cornerstone.colorbar'
-    ) as unknown as ColorbarCustomization;
-  }, [customizationService]);
-
-  const appropriateTickPosition = useMemo(() => {
-    let tickPos = tickPosition;
-    if (position === 'left' || position === 'right') {
-      tickPos = position === 'left' ? 'right' : 'left';
-    } else {
-      tickPos = position === 'top' ? 'bottom' : 'top';
-    }
-    return tickPos;
-  }, [position, tickPosition]);
-
-  const positionTickStyles = useMemo(() => {
-    return colorbarCustomization?.positionTickStyles?.[position];
-  }, [colorbarCustomization, position]);
-
-  const positionStylesFromConfig = useMemo(() => {
-    return colorbarCustomization?.positionStyles?.[position] || {};
-  }, [colorbarCustomization, position]);
-
-  const mergedTickStyles = useMemo(() => {
-    return {
-      ...(colorbarCustomization?.tickStyles || {}),
-      ...(positionTickStyles?.style || {}),
-      ...(tickStyles || {}),
-    };
-  }, [colorbarCustomization, positionTickStyles, tickStyles]);
-
-  const colorbarId = useMemo(() => {
-    return `Colorbar-${viewportId}-${displaySetInstanceUID}`;
-  }, [viewportId, displaySetInstanceUID]);
-
-  useEffect(() => {
-    if (!containerRef.current || !colormaps || !activeColormapName) {
-      return;
-    }
-
-    const viewportElement = viewportElementRef?.current;
-
-    if (!viewportElement || !colormaps?.length) {
-      return;
-    }
-
-    // Using stable references from memoized values
-    const csColorbar = new CornerstoneViewportColorbar({
-      id: colorbarId,
-      element: viewportElement,
-      container: containerRef.current,
-      colormaps: colormaps,
-      activeColormapName: activeColormapName,
-      volumeId,
-      ticks: {
-        position: appropriateTickPosition as ColorbarRangeTextPosition,
-        style: mergedTickStyles,
-      },
-    });
-
-    return () => {
-      if (csColorbar) {
-        csColorbar.destroy();
-      }
-    };
-  }, [
-    viewportId,
-    displaySetInstanceUID,
-    colormaps,
-    activeColormapName,
-    volumeId,
-    colorbarId,
-    appropriateTickPosition,
-    mergedTickStyles,
-    viewportElementRef,
-  ]);
-
-  if (!height || !width) {
-    return null;
-  }
-
-  return (
-    <div
-      id={`colorbar-container-${viewportId}-${displaySetInstanceUID}`}
-      ref={containerRef}
-      style={{
-        position: 'relative',
-        zIndex: 1000,
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-        pointerEvents: 'auto',
-        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>
-  );
-});
-
-export default ViewportColorbar;
@@ -1,126 +0,0 @@
-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, { isHorizontal } from './ViewportColorbar';
-import useViewportRendering from '../../hooks/useViewportRendering';
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-type ViewportColorbarsContainerProps = {
-  viewportId: string;
-  location: number;
-};
-
-type ColorbarData = {
-  colorbar: {
-    activeColormapName: string;
-    colormaps: ColorMapPreset[];
-    volumeId?: string;
-  };
-  displaySetInstanceUID: string;
-};
-
-/**
- * Container component that manages multiple colorbars for a viewport
- * It interacts with the colorbarService to get/set colorbar states
- */
-const ViewportColorbarsContainer = memo(function ViewportColorbarsContainer({
-  viewportId,
-  location,
-}: ViewportColorbarsContainerProps) {
-  const [colorbars, setColorbars] = useState<ColorbarData[]>([]);
-  const { servicesManager } = useSystem();
-  const { colorbarService, customizationService, displaySetService } = servicesManager.services;
-  const { viewportDisplaySets, backgroundDisplaySet, foregroundDisplaySets } =
-    useViewportDisplaySets(viewportId);
-  const { colorbarPosition: position, opacity } = useViewportRendering(viewportId, {
-    location,
-  });
-
-  // Memoize the customization to prevent recomputation
-  const colorbarCustomization = useMemo(() => {
-    return customizationService.getCustomization(
-      'cornerstone.colorbar'
-    ) as unknown as ColorbarCustomization;
-  }, [customizationService]);
-
-  // Memoize tick position
-  const tickPosition = useMemo(() => {
-    const defaultTickPosition = colorbarCustomization?.colorbarTickPosition;
-    return colorbarCustomization?.colorbarTickPosition || defaultTickPosition;
-  }, [colorbarCustomization]);
-
-  // Initial load of colorbars
-  useEffect(() => {
-    setColorbars(colorbarService.getViewportColorbar(viewportId) || []);
-  }, [viewportId, colorbarService]);
-
-  // Subscribe to colorbar state changes
-  useEffect(() => {
-    const { unsubscribe } = colorbarService.subscribe(
-      colorbarService.EVENTS.STATE_CHANGED,
-      (event: { viewportId: string; displaySetInstanceUID?: string; changeType: string }) => {
-        if (event.viewportId === viewportId) {
-          setColorbars(colorbarService.getViewportColorbar(viewportId) || []);
-        }
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportId, colorbarService]);
-
-  if (!colorbars.length) {
-    return null;
-  }
-
-  const isSingleViewport = viewportDisplaySets.length === 1;
-  const showFullList = isSingleViewport || !isHorizontal(position);
-
-  const colorbarsToUse = showFullList
-    ? colorbars
-    : colorbars.filter(({ displaySetInstanceUID }) => {
-        const { displaySetInstanceUID: dsUID } =
-          displaySetService.getDisplaySetByUID(displaySetInstanceUID) ?? {};
-
-        const targetUID =
-          opacity === 0 || opacity == null
-            ? backgroundDisplaySet?.displaySetInstanceUID
-            : foregroundDisplaySets[0].displaySetInstanceUID;
-
-        return dsUID === targetUID;
-      });
-
-  return (
-    <div
-      style={{
-        pointerEvents: 'auto',
-      }}
-    >
-      <div
-        className="flex h-full flex-col items-center justify-center"
-        style={{ pointerEvents: 'auto' }}
-      >
-        {colorbarsToUse.map(colorbarInfo => {
-          const { colorbar, displaySetInstanceUID } = colorbarInfo;
-          return (
-            <ViewportColorbar
-              key={`colorbar-${viewportId}-${displaySetInstanceUID}`}
-              viewportId={viewportId}
-              displaySetInstanceUID={displaySetInstanceUID}
-              colormaps={colorbar.colormaps}
-              activeColormapName={colorbar.activeColormapName}
-              volumeId={colorbar.volumeId}
-              position={position}
-              tickPosition={tickPosition}
-              tickStyles={colorbarCustomization?.tickStyles}
-              numColorbars={colorbars.length}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-});
-
-export default ViewportColorbarsContainer;
@@ -1,5 +0,0 @@
-import ViewportColorbar from './ViewportColorbar';
-import ViewportColorbarsContainer from './ViewportColorbarsContainer';
-
-export { ViewportColorbar, ViewportColorbarsContainer };
-export default ViewportColorbarsContainer;
@@ -1,529 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  Icons,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Switch,
-} from '@ohif/ui-next';
-import { useSystem } from '@ohif/core';
-
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-import SelectItemWithModality from '../SelectItemWithModality';
-import { useViewportRendering } from '../../hooks';
-
-function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: string }>) {
-  const { commandsManager, servicesManager } = useSystem();
-  const [pendingForegrounds, setPendingForegrounds] = useState<string[]>([]);
-  const [pendingSegmentations, setPendingSegmentations] = useState<string[]>([]);
-  const { toggleColorbar } = useViewportRendering(viewportId);
-
-  const { hangingProtocolService, toolbarService } = servicesManager.services;
-
-  const {
-    backgroundDisplaySet,
-    potentialOverlayDisplaySets,
-    potentialForegroundDisplaySets,
-    potentialBackgroundDisplaySets,
-    overlayDisplaySets,
-    foregroundDisplaySets,
-  } = useViewportDisplaySets(viewportId);
-
-  const [optimisticOverlayDisplaySets, setOptimisticOverlayDisplaySets] =
-    useState(overlayDisplaySets);
-
-  const [thresholdOpacityEnabled, setThresholdOpacityEnabled] = useState(false);
-
-  /**
-   * Change the background display set
-   */
-  const handleBackgroundSelection = (newBackgroundDisplaySet: AppTypes.DisplaySet) => {
-    const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-      viewportId,
-      newBackgroundDisplaySet.displaySetInstanceUID
-    );
-
-    commandsManager.run('setDisplaySetsForViewports', {
-      viewportsToUpdate: updatedViewports,
-    });
-  };
-
-  /**
-   * Replace a display set layer with a new one
-   */
-  const handleReplaceDisplaySetLayer = (
-    currentDisplaySetInstanceUID: string,
-    newDisplaySetInstanceUID: string
-  ) => {
-    // Remove current display set
-    commandsManager.runCommand('removeDisplaySetLayer', {
-      viewportId,
-      displaySetInstanceUID: currentDisplaySetInstanceUID,
-    });
-
-    setTimeout(() => {
-      commandsManager.runCommand('addDisplaySetAsLayer', {
-        viewportId,
-        displaySetInstanceUID: newDisplaySetInstanceUID,
-      });
-    }, 0);
-  };
-
-  /**
-   * 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,
-    });
-  };
-
-  /**
-   * Add a display set as a layer
-   */
-  const handleAddDisplaySetAsLayer = (displaySetInstanceUID: string) => {
-    commandsManager.runCommand('addDisplaySetAsLayer', {
-      viewportId,
-      displaySetInstanceUID,
-    });
-  };
-
-  /**
-   * Handle overlay display set selection change
-   */
-  const handleOverlaySelectionChange = (
-    currentDisplaySet: AppTypes.DisplaySet,
-    newDisplaySetInstanceUID: string
-  ) => {
-    if (newDisplaySetInstanceUID === currentDisplaySet.displaySetInstanceUID) {
-      return;
-    }
-
-    // Find the selected display set
-    const selectedDisplaySet = potentialOverlayDisplaySets.find(
-      ds => ds.displaySetInstanceUID === newDisplaySetInstanceUID
-    );
-
-    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
-      );
-    }
-  };
-
-  /**
-   * Handle foreground display set selection change
-   */
-  const handleForegroundSelectionChange = (
-    currentDisplaySet: AppTypes.DisplaySet,
-    newDisplaySetInstanceUID: string
-  ) => {
-    if (newDisplaySetInstanceUID === currentDisplaySet.displaySetInstanceUID) {
-      return;
-    }
-
-    // Find the selected display set
-    const selectedDisplaySet = potentialForegroundDisplaySets.find(
-      ds => ds.displaySetInstanceUID === newDisplaySetInstanceUID
-    );
-
-    if (selectedDisplaySet) {
-      handleReplaceDisplaySetLayer(
-        currentDisplaySet.displaySetInstanceUID,
-        selectedDisplaySet.displaySetInstanceUID
-      );
-    }
-  };
-
-  /**
-   * Handle pending segmentation selection
-   */
-  const handlePendingSegmentationSelection = (pendingId: string, displaySetInstanceUID: string) => {
-    const selectedDisplaySet = potentialOverlayDisplaySets.find(
-      ds => ds.displaySetInstanceUID === displaySetInstanceUID
-    );
-
-    if (selectedDisplaySet) {
-      setOptimisticOverlayDisplaySets(prevOptimisticOverlayDisplaySets => [
-        ...prevOptimisticOverlayDisplaySets,
-        selectedDisplaySet,
-      ]);
-      handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
-      // Remove this pending segmentation from the list
-      setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
-    }
-  };
-
-  /**
-   * Handle pending foreground selection
-   */
-  const handlePendingForegroundSelection = (pendingId: string, displaySetInstanceUID: string) => {
-    const selectedDisplaySet = potentialForegroundDisplaySets.find(
-      ds => ds.displaySetInstanceUID === displaySetInstanceUID
-    );
-
-    if (selectedDisplaySet) {
-      handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
-      // Remove this pending foreground from the list
-      setPendingForegrounds(pendingForegrounds.filter(id => id !== pendingId));
-    }
-  };
-
-  // Check if the advanced window level components exist in toolbar
-  const hasAdvancedRenderingControls = !!toolbarService.getButton('AdvancedRenderingControls');
-  const hasOpacityMenu = !!toolbarService.getButton('opacityMenu');
-
-  const handleThresholdOpacityToggle = () => {
-    const newValue = !thresholdOpacityEnabled;
-    if (hasAdvancedRenderingControls) {
-      toggleColorbar();
-    }
-    setThresholdOpacityEnabled(newValue);
-  };
-
-  return (
-    <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
-          variant="ghost"
-          className="text-primary flex items-center p-1"
-          onClick={() => {
-            // Add a new pending foreground slot with a unique ID
-            setPendingForegrounds([...pendingForegrounds, `pending-${Date.now()}`]);
-          }}
-          disabled={potentialForegroundDisplaySets.length === 0}
-        >
-          <Icons.Plus className="h-4 w-4" />
-          Foreground
-        </Button>
-        <Button
-          variant="ghost"
-          className="text-primary ml-2 flex items-center"
-          disabled={potentialOverlayDisplaySets.length === 0}
-          onClick={() => {
-            setPendingSegmentations([...pendingSegmentations, `seg-${Date.now()}`]);
-          }}
-          dataCY={`AddSegmentationDataOverlay-${viewportId}`}
-        >
-          <Icons.Plus className="h-4 w-4" />
-          Segmentation
-        </Button>
-      </div>
-
-      <div className="">
-        {/* Overlays Segmentation section */}
-        <div className="my-2 ml-1">
-          {optimisticOverlayDisplaySets.map(displaySet => (
-            <div
-              key={displaySet.displaySetInstanceUID}
-              className="mb-1 flex items-center"
-            >
-              <Icons.LayerSegmentation className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
-              <Select
-                value={displaySet.displaySetInstanceUID}
-                onValueChange={value => handleOverlaySelectionChange(displaySet, value)}
-              >
-                <SelectTrigger className="flex-1">
-                  <SelectValue
-                    data-cy={`overlay-ds-select-value-${displaySet.label?.toUpperCase()}`}
-                  >
-                    {displaySet.label?.toUpperCase()}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {/* Include both potential overlays and the current overlay */}
-                  <SelectItem
-                    key={displaySet.displaySetInstanceUID}
-                    value={displaySet.displaySetInstanceUID}
-                    className="pr-2"
-                  >
-                    <SelectItemWithModality displaySet={displaySet} />
-                  </SelectItem>
-                  {potentialOverlayDisplaySets.map(item => (
-                    <SelectItem
-                      key={item.displaySetInstanceUID}
-                      value={item.displaySetInstanceUID}
-                      className="pr-2"
-                    >
-                      <SelectItemWithModality displaySet={item} />
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    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
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          ))}
-
-          {pendingSegmentations.map(pendingId => (
-            <div
-              key={pendingId}
-              className="mb-2 flex items-center"
-            >
-              <Icons.LayerSegmentation className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
-              <Select
-                value=""
-                onValueChange={value => handlePendingSegmentationSelection(pendingId, value)}
-              >
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="SELECT A SEGMENTATION" />
-                </SelectTrigger>
-                <SelectContent>
-                  {potentialOverlayDisplaySets.map(item => (
-                    <SelectItem
-                      key={item.displaySetInstanceUID}
-                      value={item.displaySetInstanceUID}
-                      className="pr-2"
-                    >
-                      <SelectItemWithModality
-                        displaySet={item}
-                        dataCY={`${item.label}`}
-                      />
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="ml-2 flex-shrink-0"
-                  >
-                    <Icons.More className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuItem
-                    onClick={() => {
-                      // Remove this pending segmentation
-                      setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
-                    }}
-                  >
-                    Cancel
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          ))}
-        </div>
-        {/* Foregrounds section */}
-        <div className="my-2 px-1">
-          {foregroundDisplaySets.map((displaySet, index) => (
-            <div
-              key={displaySet.displaySetInstanceUID}
-              className="mb-1 flex items-center"
-            >
-              <Icons.LayerForeground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
-              <Select
-                value={displaySet.displaySetInstanceUID}
-                onValueChange={value => handleForegroundSelectionChange(displaySet, value)}
-              >
-                <SelectTrigger className="flex-1">
-                  <SelectValue>{displaySet.label?.toUpperCase()}</SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {/* Include both potential foregrounds and the current foreground */}
-                  <SelectItem
-                    key={displaySet.displaySetInstanceUID}
-                    value={displaySet.displaySetInstanceUID}
-                    className="pr-2"
-                  >
-                    <SelectItemWithModality displaySet={displaySet} />
-                  </SelectItem>
-                  {potentialForegroundDisplaySets.map(item => (
-                    <SelectItem
-                      key={item.displaySetInstanceUID}
-                      value={item.displaySetInstanceUID}
-                      className="pr-2"
-                    >
-                      <SelectItemWithModality displaySet={item} />
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="ml-2 flex-shrink-0"
-                  >
-                    <Icons.More className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuItem
-                    onClick={() => handleRemoveDisplaySetLayer(displaySet.displaySetInstanceUID)}
-                  >
-                    Remove
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          ))}
-
-          {pendingForegrounds.map(pendingId => (
-            <div
-              key={pendingId}
-              className="mb-2 flex items-center"
-            >
-              <Icons.LayerForeground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
-              <Select
-                value=""
-                onValueChange={value => handlePendingForegroundSelection(pendingId, value)}
-              >
-                <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="SELECT A FOREGROUND" />
-                </SelectTrigger>
-                <SelectContent>
-                  {potentialForegroundDisplaySets.map(item => (
-                    <SelectItem
-                      key={item.displaySetInstanceUID}
-                      value={item.displaySetInstanceUID}
-                      className="pr-2"
-                    >
-                      <SelectItemWithModality displaySet={item} />
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="ml-2 flex-shrink-0"
-                  >
-                    <Icons.More className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuItem
-                    onClick={() => {
-                      // Remove this pending foreground
-                      setPendingForegrounds(pendingForegrounds.filter(id => id !== pendingId));
-                    }}
-                  >
-                    Cancel
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          ))}
-        </div>
-        {/* Background section */}
-        <div className="mt-1 mb-1 flex items-center px-1">
-          <Icons.LayerBackground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
-          <Select
-            value={backgroundDisplaySet?.displaySetInstanceUID}
-            onValueChange={value => {
-              const selectedDisplaySet = potentialBackgroundDisplaySets.find(
-                ds => ds.displaySetInstanceUID === value
-              );
-              if (selectedDisplaySet) {
-                handleBackgroundSelection(selectedDisplaySet);
-              }
-            }}
-          >
-            <SelectTrigger className="flex-1">
-              <SelectValue>
-                {(
-                  backgroundDisplaySet?.SeriesDescription ||
-                  backgroundDisplaySet?.label ||
-                  'background'
-                ).toUpperCase()}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {potentialBackgroundDisplaySets.map(displaySet => (
-                <SelectItem
-                  key={displaySet.displaySetInstanceUID}
-                  value={displaySet.displaySetInstanceUID}
-                  className="pr-2"
-                >
-                  <SelectItemWithModality displaySet={displaySet} />
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      {foregroundDisplaySets.length > 0 && (hasAdvancedRenderingControls || hasOpacityMenu) && (
-        <div className="mt-1 ml-7">
-          <div className="flex items-center">
-            <Switch
-              id="threshold-opacity-switch"
-              className="mr-2"
-              checked={thresholdOpacityEnabled}
-              onCheckedChange={handleThresholdOpacityToggle}
-            />
-            <label
-              htmlFor="threshold-opacity-switch"
-              className="text-muted-foreground cursor-pointer text-sm"
-              onClick={() => setThresholdOpacityEnabled(!thresholdOpacityEnabled)}
-            >
-              Control threshold & opacity
-            </label>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default ViewportDataOverlayMenu;
@@ -1,91 +0,0 @@
-import React, { ReactNode } from 'react';
-import { useSystem } from '@ohif/core';
-import {
-  Button,
-  Icons,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  useIconPresentation,
-} from '@ohif/ui-next';
-import ViewportDataOverlayMenu from './ViewportDataOverlayMenu';
-import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
-
-type DataOverlayMenuProps = {
-  viewportId: string;
-  location: string;
-  isOpen?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  disabled?: boolean;
-  id?: string;
-};
-
-export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): ReactNode {
-  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
-  const { viewportDisplaySets: displaySets } = useViewportDisplaySets(viewportId);
-  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
-
-  const handleOpenChange = (openState: boolean) => {
-    if (openState) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  };
-
-  const { servicesManager } = useSystem();
-  const { toolbarService } = servicesManager.services;
-
-  const { align, side } = toolbarService.getAlignAndSide(location);
-
-  const Icon = <Icons.ViewportViews className={iconClassName} />;
-
-  const idProp = rest.id ? { id: `${rest.id}-${viewportId}` } : {};
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-    >
-      <PopoverTrigger
-        asChild
-        className="flex items-center justify-center"
-      >
-        <div>
-          {IconContainer ? (
-            <IconContainer
-              disabled={disabled}
-              icon="ViewportViews"
-              {...rest}
-              {...containerProps}
-              {...idProp}
-            >
-              {Icon}
-            </IconContainer>
-          ) : (
-            <Button
-              variant="ghost"
-              size="icon"
-              disabled={disabled}
-            >
-              {Icon}
-            </Button>
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        className="border-none bg-transparent p-0 shadow-none"
-        side={side}
-        align={align}
-        alignOffset={0}
-        sideOffset={5}
-      >
-        <ViewportDataOverlayMenu
-          className="w-full"
-          viewportId={viewportId}
-          displaySets={displaySets}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Icons, Separator } from '@ohif/ui-next';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+function ViewportSegmentationMenu({
+  viewportId,
+  servicesManager,
+}: withAppTypes<{ viewportId: string }>) {
+  const { segmentationService } = servicesManager.services;
+  const [activeSegmentations, setActiveSegmentations] = useState([]);
+  const [availableSegmentations, setAvailableSegmentations] = useState([]);
+
+  useEffect(() => {
+    const updateSegmentations = () => {
+      const active = segmentationService.getSegmentationRepresentations(viewportId);
+      setActiveSegmentations(active);
+
+      const all = segmentationService.getSegmentations();
+      const available = all.filter(
+        seg => !active.some(activeSeg => activeSeg.segmentationId === seg.segmentationId)
+      );
+      setAvailableSegmentations(available);
+    };
+
+    updateSegmentations();
+
+    const subscriptions = [
+      segmentationService.EVENTS.SEGMENTATION_MODIFIED,
+      segmentationService.EVENTS.SEGMENTATION_REMOVED,
+      segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
+    ].map(event => segmentationService.subscribe(event, updateSegmentations));
+
+    return () => {
+      subscriptions.forEach(subscription => subscription.unsubscribe());
+    };
+  }, [segmentationService, viewportId]);
+
+  const toggleSegmentationRepresentationVisibility = (
+    segmentationId,
+    type = SegmentationRepresentations.Labelmap
+  ) => {
+    segmentationService.toggleSegmentationRepresentationVisibility(viewportId, {
+      segmentationId,
+      type,
+    });
+  };
+
+  const addSegmentationToViewport = segmentationId => {
+    segmentationService.addSegmentationRepresentation(viewportId, { segmentationId });
+  };
+
+  const removeSegmentationFromViewport = segmentationId => {
+    segmentationService.removeSegmentationRepresentations(viewportId, {
+      segmentationId,
+    });
+  };
+
+  return (
+    <div className="bg-muted flex h-full w-[262px] flex-col rounded p-3">
+      <span className="text-muted-foreground mb-2 text-xs font-semibold">Current Viewport</span>
+      <ul className="space-y-1">
+        {activeSegmentations.map(segmentation => (
+          <li
+            key={segmentation.id}
+            className="flex items-center text-sm"
+          >
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground mr-2"
+              onClick={() => removeSegmentationFromViewport(segmentation.segmentationId)}
+            >
+              <Icons.Minus className="h-6 w-6" />
+            </Button>
+            <span className="text-foreground flex-grow">{segmentation.label}</span>
+            {segmentation.visible ? (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground"
+                onClick={() =>
+                  toggleSegmentationRepresentationVisibility(
+                    segmentation.segmentationId,
+                    segmentation.type
+                  )
+                }
+              >
+                <Icons.Hide className="h-6 w-6" />
+              </Button>
+            ) : (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground"
+                onClick={() =>
+                  toggleSegmentationRepresentationVisibility(
+                    segmentation.segmentationId,
+                    segmentation.type
+                  )
+                }
+              >
+                <Icons.Show className="h-6 w-6" />
+              </Button>
+            )}
+          </li>
+        ))}
+      </ul>
+      {availableSegmentations.length > 0 && (
+        <>
+          <Separator className="bg-input mb-3" />
+          <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
+          <ul className="space-y-1">
+            {availableSegmentations.map(({ segmentationId, label }) => (
+              <li
+                key={segmentationId}
+                className="flex items-center text-sm"
+              >
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-muted-foreground mr-2"
+                  onClick={() => addSegmentationToViewport(segmentationId)}
+                >
+                  <Icons.Plus className="h-6 w-6" />
+                </Button>
+                <span className="text-foreground/60">{label}</span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default ViewportSegmentationMenu;
@@ -0,0 +1,83 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { Button, Icons, Popover, PopoverContent, PopoverTrigger } from '@ohif/ui-next';
+import ViewportSegmentationMenu from './ViewportSegmentationMenu';
+import classNames from 'classnames';
+import { useSegmentations } from '../../hooks/useSegmentations';
+
+export function ViewportSegmentationMenuWrapper({
+  viewportId,
+  displaySets,
+  servicesManager,
+  commandsManager,
+  location,
+}: withAppTypes<{
+  viewportId: string;
+  element: HTMLElement;
+}>): ReactNode {
+  const { viewportActionCornersService, viewportGridService } = servicesManager.services;
+
+  const segmentations = useSegmentations({ servicesManager });
+
+  const activeViewportId = viewportGridService.getActiveViewportId();
+  const isActiveViewport = viewportId === activeViewportId;
+
+  const { align, side } = getAlignAndSide(viewportActionCornersService, location);
+
+  if (!segmentations?.length) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <Button
+          variant="ghost"
+          size="icon"
+        >
+          <Icons.ViewportViews
+            className={classNames(
+              'text-highlight',
+              isActiveViewport ? 'visible' : 'invisible group-hover/pane:visible'
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={-15}
+        sideOffset={5}
+      >
+        <ViewportSegmentationMenu
+          className="w-full"
+          viewportId={viewportId}
+          displaySets={displaySets}
+          servicesManager={servicesManager}
+          commandsManager={commandsManager}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const getAlignAndSide = (viewportActionCornersService, location) => {
+  const ViewportActionCornersLocations = viewportActionCornersService.LOCATIONS;
+
+  switch (location) {
+    case ViewportActionCornersLocations.topLeft:
+      return { align: 'start', side: 'bottom' };
+    case ViewportActionCornersLocations.topRight:
+      return { align: 'end', side: 'bottom' };
+    case ViewportActionCornersLocations.bottomLeft:
+      return { align: 'start', side: 'top' };
+    case ViewportActionCornersLocations.bottomRight:
+      return { align: 'end', side: 'top' };
+    default:
+      console.debug('Unknown location, defaulting to bottom-start');
+      return { align: 'start', side: 'bottom' };
+  }
+};
@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { ViewportSegmentationMenuWrapper } from './ViewportSegmentationMenuWrapper';
+
+export function getViewportDataOverlaySettingsMenu(
+  props: withAppTypes<{
+    viewportId: string;
+    element: HTMLElement;
+  }>
+): ReactNode {
+  return <ViewportSegmentationMenuWrapper {...props} />;
+}
@@ -1,164 +0,0 @@
-import { utilities as csUtils } from '@cornerstonejs/core';
-
-export const DEFAULT_COLORMAP = 'hsv';
-export const DEFAULT_OPACITY = 0.5;
-export const DEFAULT_OPACITY_PERCENT = DEFAULT_OPACITY * 100;
-export const DERIVED_OVERLAY_MODALITIES = ['SEG', 'RTSTRUCT'];
-
-/**
- * Get modality-specific color and opacity settings from the customization service
- */
-export function getModalityOverlayColormap(customizationService, modality) {
-  const modalityOverlayDefaultColorMaps = customizationService?.getCustomization(
-    'cornerstone.modalityOverlayDefaultColorMaps'
-  ) || { defaultSettings: {} };
-
-  return (
-    modalityOverlayDefaultColorMaps.defaultSettings[modality] || {
-      colormap: DEFAULT_COLORMAP,
-      opacity: DEFAULT_OPACITY,
-    }
-  );
-}
-
-/**
- * Identifies display sets that can be used as overlays for a specific viewport.
- *
- * "Enhanced" display sets are those that:
- * 1. Are not already in the viewport
- * 2. Are evaluated for their ability to be overlaid onto the background display set
- * 3. Have an "isOverlayable" flag indicating if they're compatible with the viewport
- *
- * A display set is considered overlayable when:
- * - The background display set is reconstructable
- * - The display set is not unsupported
- * - The Frame of Reference matches the background display set
- * - For non-derived modalities: background can be a volume and display set is either multiframe or valid volume
- *
- * @returns {Object} Object containing:
- *   - viewportDisplaySets: Display sets already in the viewport
- *   - enhancedDisplaySets: Other display sets with overlayability assessment
- */
-export function getEnhancedDisplaySets({ viewportId, services }) {
-  const { displaySetService, viewportGridService } = services;
-  const displaySetsUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
-
-  if (!displaySetsUIDs?.length) {
-    return {
-      viewportDisplaySets: [],
-      enhancedDisplaySets: [],
-    };
-  }
-
-  const allDisplaySets = displaySetService.getActiveDisplaySets();
-
-  const otherDisplaySets = allDisplaySets.filter(
-    displaySet => !displaySetsUIDs.includes(displaySet.displaySetInstanceUID)
-  );
-
-  const viewportDisplaySets = displaySetsUIDs.map(displaySetUID =>
-    displaySetService.getDisplaySetByUID(displaySetUID)
-  );
-
-  const backgroundCanBeVolume = csUtils.isValidVolume(viewportDisplaySets[0].imageIds || []);
-  const backgroundDisplaySet = viewportDisplaySets[0];
-
-  const enhancedDisplaySets = otherDisplaySets.map(displaySet => {
-    if (!backgroundDisplaySet.isReconstructable) {
-      return {
-        ...displaySet,
-        isOverlayable: false,
-      };
-    }
-
-    if (displaySet.unsupported) {
-      return {
-        ...displaySet,
-        isOverlayable: false,
-      };
-    }
-
-    // Check if Frame of Reference matches
-    if (
-      displaySet.FrameOfReferenceUID &&
-      displaySet.FrameOfReferenceUID !== backgroundDisplaySet.FrameOfReferenceUID
-    ) {
-      return {
-        ...displaySet,
-        isOverlayable: false,
-      };
-    }
-
-    // Special handling for derived modalities
-    if (!DERIVED_OVERLAY_MODALITIES.includes(displaySet.Modality)) {
-      if (!backgroundCanBeVolume) {
-        return {
-          ...displaySet,
-          isOverlayable: false,
-        };
-      }
-
-      const imageIds = displaySet.imageIds || displaySet.images?.map(image => image.imageId);
-      const isMultiframe = displaySet.isMultiFrame;
-
-      if (!isMultiframe && imageIds?.length > 0 && !csUtils.isValidVolume(imageIds)) {
-        return {
-          ...displaySet,
-          isOverlayable: false,
-        };
-      }
-    }
-
-    return {
-      ...displaySet,
-      isOverlayable: true,
-    };
-  });
-
-  return {
-    viewportDisplaySets,
-    enhancedDisplaySets,
-  };
-}
-
-/**
- * Sort function: puts disabled items (isOverlayable: false) at the end
- */
-export const sortByOverlayable = (a, b) => {
-  if (a.isOverlayable === b.isOverlayable) {
-    return 0;
-  }
-  return a.isOverlayable ? -1 : 1;
-};
-
-/**
- * Create display set options based on modality and opacity settings
- */
-export function createColormapOverlayDisplaySetOptions(displaySet, opacity, customizationService) {
-  if (displaySet.Modality === 'SEG') {
-    return {};
-  }
-
-  const modalitySettings = getModalityOverlayColormap(customizationService, displaySet.Modality);
-  return {
-    colormap: {
-      name: modalitySettings.colormap || DEFAULT_COLORMAP,
-      opacity: opacity / 100, // Convert from percentage to 0-1 range
-    },
-  };
-}
-
-/**
- * Get segmentations that can be added as overlays to the viewport
- *
- * Note: This function is deprecated as we now use display sets for segmentations
- */
-export function getAvailableSegmentations(segmentationService) {
-  const segmentations = segmentationService.getSegmentations() || [];
-  return segmentations.map(segmentation => ({
-    segmentationId: segmentation.segmentationId,
-    label: segmentation.label || 'Segmentation',
-    segments: segmentation.segments,
-    frameOfReferenceUID: segmentation.frameOfReferenceUID,
-  }));
-}
@@ -1,241 +0,0 @@
-import React from 'react';
-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';
-
-function ViewportOrientationMenu({
-  location,
-  viewportId,
-  displaySets,
-  isOpen = false,
-  onOpen,
-  onClose,
-  disabled,
-  ...props
-}: withAppTypes<{
-  location?: string;
-  viewportId: string;
-  displaySets: AppTypes.DisplaySet[];
-  isOpen?: boolean;
-  onOpen?: () => void;
-  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 [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();
-
-    if (!displaySets.length) {
-      return;
-    }
-
-    // Check if at least one displaySet is reconstructable
-    const hasReconstructableDisplaySet = displaySets.some(ds => ds.isReconstructable);
-
-    if (!hasReconstructableDisplaySet) {
-      console.warn('Cannot change orientation: No reconstructable display sets in viewport');
-      return;
-    }
-
-    // Set the orientation enum based on the selected orientation
-    let orientationEnum;
-    switch (orientation.toLowerCase()) {
-      case 'axial':
-        orientationEnum = Enums.OrientationAxis.AXIAL;
-        break;
-      case 'sagittal':
-        orientationEnum = Enums.OrientationAxis.SAGITTAL;
-        break;
-      case 'coronal':
-        orientationEnum = Enums.OrientationAxis.CORONAL;
-        break;
-      case 'reformat':
-        orientationEnum = Enums.OrientationAxis.REFORMAT;
-        break;
-      default:
-        orientationEnum = Enums.OrientationAxis.ACQUISITION;
-    }
-
-    const displaySetUIDs = displaySets.map(ds => ds.displaySetInstanceUID);
-
-    // If viewport is not already a volume type, we need to convert it
-    if (currentViewportType !== Enums.ViewportType.ORTHOGRAPHIC) {
-      // Configure the viewport to be a volume viewport with current display sets
-      const updatedViewport = {
-        viewportId: viewportIdToUse,
-        displaySetInstanceUIDs: displaySetUIDs,
-        viewportOptions: {
-          viewportType: Enums.ViewportType.ORTHOGRAPHIC,
-          orientation: orientationEnum,
-        },
-        displaySetOptions: displaySetUIDs.map(() => ({})),
-      };
-
-      // Update the viewport to be a volume viewport
-      commandsManager.run('setDisplaySetsForViewports', {
-        viewportsToUpdate: [updatedViewport],
-      });
-    } else {
-      // Set the viewport orientation
-      commandsManager.runCommand('setViewportOrientation', {
-        viewportId: viewportIdToUse,
-        orientation: orientationEnum,
-      });
-    }
-
-    // Close the menu after selection
-    onClose?.();
-  };
-
-  const handleOpenChange = (openState: boolean) => {
-    if (openState) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  };
-
-  if (!displaySets.length) {
-    return null;
-  }
-
-  // Get proper alignment and side based on the location using toolbar service
-  const { align, side } = toolbarService.getAlignAndSide(Number(location));
-
-  const Icon = React.createElement(getIcon(currentOrientation), { className: iconClassName });
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-    >
-      <PopoverTrigger
-        asChild
-        className={cn('flex items-center justify-center')}
-      >
-        <div>
-          {IconContainer ? (
-            <IconContainer
-              disabled={disabled}
-              icon="OrientationSwitch"
-              {...props}
-              {...containerProps}
-            >
-              {Icon}
-            </IconContainer>
-          ) : (
-            <Button
-              variant="ghost"
-              size="icon"
-              disabled={disabled}
-              onClick={() => {}}
-            >
-              {Icon}
-            </Button>
-          )}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent
-        className="h-[170px] w-[130px] flex-shrink-0 flex-col items-start rounded p-1"
-        align={align}
-        side={side}
-        style={{ left: 0 }}
-      >
-        <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;
Author	SHA1	Message	Date
ohif-bot	29eca3bd20	chore(version): Update package versions [skip ci]	2025-07-23 15:55:11 +00:00
ohif-bot	38bc497545	chore(version): version.json [skip ci]	2025-07-23 15:55:05 +00:00
Joe Boccanfuso	d383be7c72	fix(security): Removed stylus package due to potential security vulnerability and we don't use it. (#5251 )	2025-07-23 11:49:30 -04:00
Joe Boccanfuso	d206cf9ba5	fix(security): Pin eslint-config-prettier and eslint-plugin-prettier versions. (#5246 )	2025-07-22 12:02:57 -04:00
ohif-bot	1ad5acae9d	chore(version): Update package versions [skip ci]	2025-06-09 15:06:36 +00:00
ohif-bot	c19e32e0d1	chore(version): version.json [skip ci]	2025-06-09 15:06:30 +00:00
Alireza Dan Rukas Tang Cheng	36813e0c2f	chore: recovery 2 (#5014 ) Co-authored-by: Dan Rukas <dan.rukas@gmail.com> Co-authored-by: Tang Cheng <45505657+tctco@users.noreply.github.com>	2025-06-09 10:58:06 -04:00
ohif-bot	9a4a40468f	chore(version): Update package versions [skip ci]	2025-04-11 20:02:21 +00:00
ohif-bot	466a867e6a	chore(version): version.json [skip ci]	2025-04-11 20:02:14 +00:00
Alireza Pedro Köhler Dan Rukas	aaba8bf1b0	fix: make datasource selection work and UI fixes (#4952 ) Co-authored-by: Pedro Köhler <pedrokohlerbh@gmail.com> Co-authored-by: Dan Rukas <dan.rukas@gmail.com>	2025-04-11 15:57:29 -04:00
ohif-bot	0b6e9cba76	chore(version): Update package versions [skip ci]	2025-04-10 02:48:32 +00:00
ohif-bot	963664cb63	chore(version): version.json [skip ci]	2025-04-10 02:48:27 +00:00
sedghi	12fe1e107d	chore: release 3p10	2025-04-09 22:41:26 -04:00
				`@@ -1 +0,0 @@`
				`export { default } from './AdvancedRenderingControls';`
				`@@ -1 +0,0 @@`
				`export { default } from './ModalityLoadBadge';`
				`@@ -1 +0,0 @@`
				`export { default } from './TrackingStatus';`