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

chore(version): version.json [skip ci]
chore: recovery 2 (#5014 )
2025-06-09 15:06:36 +00:00 · 2025-06-09 15:06:30 +00:00 · 2025-06-09 10:58:06 -04:00 · 2025-04-11 20:02:21 +00:00 · 2025-04-11 20:02:14 +00:00 · 2025-04-11 15:57:29 -04:00
1977 changed files with 42136 additions and 136687 deletions
@@ -15,13 +15,22 @@ defaults: &defaults
 commands:
  install_bun:
    steps:
+      - restore_cache:
+          keys:
+            - bun-cache-v2-{{ arch }}-latest
      - run:
          name: Install Bun
          command: |
-            curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.23"
+            if [ ! -d "$HOME/.bun" ]; then
+              curl -fsSL https://bun.sh/install | bash
+            fi
            echo 'export BUN_INSTALL="$HOME/.bun"' >> $BASH_ENV
            echo 'export PATH="$BUN_INSTALL/bin:$PATH"' >> $BASH_ENV
            source $BASH_ENV
+      - save_cache:
+          key: bun-cache-v2-{{ arch }}-latest
+          paths:
+            - ~/.bun

 jobs:
  UNIT_TESTS:
@@ -112,50 +121,6 @@ jobs:
      - checkout
      - attach_workspace:
          at: ~/repo
-      # SECURITY AUDIT
-      - run:
-          name: 'Security Audit - High Risk Vulnerabilities'
-          command: |
-            echo "🔍 Running bun audit for security vulnerabilities..."
-            echo "Checking for HIGH-RISK vulnerabilities..."
-
-            # Define ignored vulnerabilities with comments
-            IGNORED_VULNS=(
-              "GHSA-5j98-mcp5-4vw2"  # CVE-2025-64756 - glob is not used on the command line
-              "GHSA-8qq5-rm4j-mr97"  # CVE-2026-23745 - limited to build/dev environments
-              "GHSA-r6q2-hw4h-h46w"  # CVE-2026-23950 - limited to build/dev environments
-              "GHSA-34x7-hfp2-rc4v"  # CVE-2026-24842 - limited to build/dev environments
-            )
-
-            # Build ignore flags
-            IGNORE_FLAGS=""
-            for vuln in "${IGNORED_VULNS[@]}"; do
-              IGNORE_FLAGS="$IGNORE_FLAGS --ignore=$vuln"
-            done
-
-            if bun audit $IGNORE_FLAGS --audit-level high; then
-              echo "✅ No high-risk vulnerabilities found"
-              echo "🎉 Security audit passed!"
-            else
-              echo ""
-              echo "❌ HIGH-RISK VULNERABILITIES DETECTED!"
-              echo "======================================"
-              echo ""
-              echo "🔧 To fix these issues:"
-              echo "  1. Run: bun audit"
-              echo "  2. Review the vulnerability details"
-              echo "  3. Update affected packages to secure versions"
-              echo "  4. Test your changes"
-              echo "  5. Re-run: bun audit --audit-level high"
-              echo ""
-              echo "📋 Full audit report:"
-
-              bun audit $IGNORE_FLAGS --audit-level low || true
-
-              echo ""
-              echo "❌ This build cannot proceed until high-risk vulnerabilities are resolved."
-              exit 1
-            fi
      - run:
          name: Install Dependencies
          command: bun install --frozen-lockfile
@@ -374,6 +339,7 @@ jobs:
    resource_class: large
    parallelism: 8
    steps:
+      - install_bun
      - run:
          name: Install System Dependencies
          command: |
@@ -387,11 +353,12 @@ jobs:
          name: Export Display Variable
          command: export DISPLAY=:99
      - cypress/install:
-          install-command: yarn install --frozen-lockfile --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
@@ -490,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:
@@ -51,29 +51,28 @@ body:
    validations:
      required: true

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

@@ -1,110 +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
-        with:
-          bun-version: 1.2.23
-      - 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,58 +1,75 @@
 name: Playwright Tests
 on:
+  push:
+    branches: [main, master]
  pull_request:
-    branches: [master, release/*]
-
-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
-        with:
-          bun-version: 1.2.23
      - uses: actions/setup-node@v4
        with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install Yarn
-        run: npm install -g yarn@1.22.22
+          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
-*~
@@ -19,7 +19,7 @@ echo 'Web application built and copied'

 # Build && Move Docusaurus Output (for the docs themselves)
 cd platform/docs
-yarn install --frozen-lockfile
+yarn install
 yarn run build
 cd ../..
 mkdir -p ./.netlify/www/docs
@@ -10,6 +10,6 @@
    "deploy": "netlify deploy --prod --dir ./../platform/app/dist"
  },
  "devDependencies": {
-    "netlify-cli": "2.21.0"
+    "netlify-cli": "^2.21.0"
  }
 }
@@ -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?$/,
@@ -201,6 +184,8 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
        '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
        '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
        '@state': path.resolve(__dirname, '../platform/app/src/state'),
+        'dicom-microscopy-viewer':
+          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
      },
      // Which directories to search when resolving modules
      modules: [
@@ -49,8 +49,8 @@ RUN apt-get update && apt-get install -y build-essential python3

 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
-RUN npm install -g bun@1.2.23
-RUN npm install -g lerna@7.4.2
+RUN npm install -g bun
+# RUN npm install -g lerna@7.4.2
 ENV PATH=/usr/src/app/node_modules/.bin:$PATH

 # Do an initial install and then a final install
@@ -60,7 +60,6 @@ COPY --parents ./addOns/package.json ./addOns/*/*/package.json ./extensions/*/pa

 RUN bun pm cache rm
 RUN bun install
-RUN bun add ajv@8.12.0
 # Copy the local directory
 COPY --link --exclude=yarn.lock --exclude=package.json --exclude=Dockerfile . .

@@ -99,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 777 /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;"]
@@ -53,7 +53,7 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
 ## About

 The OHIF Viewer can retrieve
-and load images from most sources and formats, render sets in 2D, 3D, and
+and load images from most sources and formats; render sets in 2D, 3D, and
 reconstructed representations; allows for the manipulation, annotation, and
 serialization of observations; supports internationalization, OpenID Connect,
 offline use, hotkeys, and many more features.
@@ -76,7 +76,7 @@ contributions of individuals, research groups, and commercial organizations.
 After more than 8-years of integrating with many companies and organizations,
 The OHIF Viewer has been rebuilt from the ground up to better address the
 varying workflow and configuration needs of its many users. All of the Viewer's
-core features are built using its own extension system. The same extensibility
+core features are built using it's own extension system. The same extensibility
 that allows us to offer:

 - 2D and 3D medical image viewing
@@ -147,14 +147,7 @@ Here is a schematic representation of our development workflow:
 3. Navigate to the cloned project's directory
 4. Add this repo as a `remote` named `upstream`
   - `git remote add upstream https://github.com/OHIF/Viewers.git`
-5. `yarn install --frozen-lockfile` to restore dependencies and link projects
-
-:::danger
-In general run `yarn install` with the `--frozen-lockfile` flag to help avoid
-supply chain attacks by enforcing reproducible dependencies. That is, if the
-`yarn.lock` file is clean and does NOT reference compromised packages, then
-no compromised packages should land on your machine by using this flag.
-:::
+5. `yarn install` to restore dependencies and link projects

 #### To Develop

@@ -165,7 +158,7 @@ _From this repository's root directory:_
 yarn config set workspaces-experimental true

 # Restore dependencies
-yarn install --frozen-lockfile
+yarn install
 ```

 ## Commands
@@ -1,7 +1,7 @@
 {
  "name": "@externals/devDependencies",
  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.13.0-beta.14",
+  "version": "3.10.2",
  "license": "MIT",
  "private": true,
  "engines": {
@@ -9,85 +9,87 @@
    "yarn": ">=1.19.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@kitware/vtk.js": "34.15.1",
-    "clsx": "2.1.1",
-    "core-js": "3.45.1",
-    "moment": "2.30.1"
+    "@babel/runtime": "^7.20.13",
+    "@kitware/vtk.js": "32.12.0",
+    "clsx": "^2.1.1",
+    "core-js": "^3.2.1",
+    "moment": "^2.30.1"
  },
  "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
  },
  "devDependencies": {
-    "@babel/eslint-parser": "7.28.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
-    "@rsbuild/core": "1.5.1",
-    "@rsbuild/plugin-node-polyfill": "1.4.2",
-    "@rsbuild/plugin-react": "1.4.0",
-    "@svgr/webpack": "8.1.0",
-    "@swc/helpers": "0.5.17",
-    "@types/jest": "27.5.2",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
-    "autoprefixer": "10.4.21",
-    "babel-loader": "8.4.1",
-    "babel-plugin-module-resolver": "5.0.2",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "9.1.0",
-    "cross-env": "7.0.3",
-    "css-loader": "6.11.0",
-    "dotenv": "8.6.0",
-    "eslint": "8.57.1",
-    "eslint-config-prettier": "7.2.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-cypress": "2.15.2",
-    "eslint-plugin-flowtype": "7.0.0",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.5.1",
-    "eslint-plugin-promise": "5.2.0",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-tsdoc": "0.2.17",
-    "eslint-webpack-plugin": "2.7.0",
-    "execa": "8.0.1",
-    "extract-css-chunks-webpack-plugin": "4.10.0",
-    "html-webpack-plugin": "5.6.3",
-    "husky": "3.1.0",
-    "jest": "29.7.0",
-    "jest-canvas-mock": "2.5.2",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-junit": "6.4.0",
-    "lerna": "7.4.2",
-    "lint-staged": "9.5.0",
-    "mini-css-extract-plugin": "2.9.2",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
-    "postcss": "8.5.6",
-    "postcss-import": "14.1.0",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "7.8.3",
-    "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "0.6.9",
-    "react-refresh": "0.14.2",
-    "semver": "7.7.2",
-    "serve": "14.2.4",
-    "shader-loader": "1.3.1",
-    "shx": "0.3.4",
-    "source-map-loader": "4.0.2",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "5.3.14",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@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",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^6.8.1",
+    "dotenv": "^8.1.0",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-flowtype": "^7.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-tsdoc": "^0.2.11",
+    "eslint-webpack-plugin": "^2.5.3",
+    "execa": "^8.0.1",
+    "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.1.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-junit": "^6.4.0",
+    "lerna": "^7.2.0",
+    "lint-staged": "^9.0.2",
+    "mini-css-extract-plugin": "^2.1.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.3.5",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^7.4.3",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "react-refresh": "^0.14.2",
+    "semver": "^7.5.1",
+    "serve": "^14.2.4",
+    "shader-loader": "^1.3.1",
+    "shx": "^0.3.3",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.59.0",
+    "stylus-loader": "^7.1.3",
+    "terser-webpack-plugin": "^5.1.4",
    "typescript": "5.5.4",
    "unused-webpack-plugin": "2.4.0",
-    "webpack": "5.105.0",
-    "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.2",
-    "webpack-hot-middleware": "2.26.1",
-    "webpack-merge": "5.10.0",
-    "workbox-webpack-plugin": "6.6.1",
-    "worker-loader": "3.0.8"
+    "webpack": "5.94.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "4.7.3",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-merge": "^5.7.3",
+    "workbox-webpack-plugin": "^6.1.5",
+    "worker-loader": "^3.0.8"
  },
  "scripts": {
    "build": "Included as direct dependency"
@@ -1,9 +1,9 @@
 {
  "name": "@externals/dicom-microscopy-viewer",
  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.13.0-beta.14",
+  "version": "3.10.2",
  "license": "MIT",
  "dependencies": {
-    "dicom-microscopy-viewer": "0.48.17"
+    "dicom-microscopy-viewer": "^0.46.1"
  }
 }
@@ -21,30 +21,31 @@
    "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/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-arrow-functions": "7.27.1",
-    "@babel/plugin-transform-regenerator": "7.28.1",
-    "@babel/plugin-transform-runtime": "7.28.0",
-    "@babel/plugin-transform-typescript": "7.28.0",
-    "@babel/preset-env": "7.28.0",
-    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.27.1"
+    "@babel/core": "7.24.7",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-arrow-functions": "^7.16.7",
+    "@babel/plugin-transform-regenerator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "7.24.7",
+    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/preset-env": "7.24.7",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.13.0"
  },
  "resolutions": {
-    "**/@babel/runtime": "7.28.2",
+    "**/@babel/runtime": "^7.20.13",
    "commander": "8.3.0",
-    "dcmjs": "0.49.4",
-    "dicomweb-client": "0.10.4",
-    "nth-check": "2.1.1",
-    "trim-newlines": "5.0.0",
-    "glob-parent": "6.0.2",
-    "trim": "1.0.1",
-    "package-json": "8.1.1",
-    "typescript": "5.5.4"
+    "dcmjs": "0.38.0",
+    "dicomweb-client": ">=0.10.4",
+    "nth-check": "^2.1.1",
+    "trim-newlines": "^5.0.0",
+    "glob-parent": "^6.0.2",
+    "trim": "^1.0.0",
+    "package-json": "^8.1.0",
+    "typescript": "5.5.4",
+    "sharp": "^0.32.6"
  }
 }
@@ -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,24 +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',
-        ['babel-plugin-transform-import-meta', { module: 'ES6' }],
      ],
    },
    production: {
@@ -1,2 +0,0 @@
-[install]
-frozenLockfile = true
@@ -1,2 +0,0 @@
-[install]
-frozenLockfile = false
@@ -1 +1 @@
-f590fc05a87d27f4f98e4e2fbaf04fce9aafb4f4
+36813e0c2f1ea48953714e8e48aff6e9d4516449
@@ -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.13.0-beta.14",
+  "version": "3.10.2",
  "description": "DICOM Parametric Map read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,21 +33,22 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.13.0-beta.14",
-    "@ohif/extension-cornerstone": "3.13.0-beta.14",
-    "@ohif/extension-default": "3.13.0-beta.14",
-    "@ohif/i18n": "3.13.0-beta.14",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-router": "6.30.3",
-    "react-router-dom": "6.30.3"
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
+    "prop-types": "^15.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^12.2.2",
+    "react-router": "^6.8.1",
+    "react-router-dom": "^6.8.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.15.29",
-    "@cornerstonejs/core": "4.15.29",
-    "@kitware/vtk.js": "34.15.1"
+    "@babel/runtime": "^7.20.13",
+    "@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.13.0-beta.14",
+  "version": "3.10.2",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,18 +33,19 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.13.0-beta.14",
-    "@ohif/extension-cornerstone": "3.13.0-beta.14",
-    "@ohif/extension-default": "3.13.0-beta.14",
-    "@ohif/i18n": "3.13.0-beta.14",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-router": "6.30.3",
-    "react-router-dom": "6.30.3"
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
+    "prop-types": "^15.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^10.11.0",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2"
+    "@babel/runtime": "^7.20.13",
+    "react-color": "^2.19.3"
  }
 }
@@ -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,14 +1,9 @@
-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';

-const { sopClassDictionary } = utils;
-
-const sopClassUids = [sopClassDictionary.RTStructureSetStorage];
-
-const cachedRTStructsSEG = new Set<string>();
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];

 const loadPromises = {};

@@ -17,41 +12,29 @@ function _getDisplaySetsFromSeries(
  servicesManager: AppTypes.ServicesManager,
  extensionManager
 ) {
-  utils.sortStudyInstances(instances);
-  // Choose the LAST instance in the list as the most recently created one.
-  const instance = instances[instances.length - 1];
+  const instance = instances[0];

  const {
    StudyInstanceUID,
    SeriesInstanceUID,
    SOPInstanceUID,
-    SeriesDescription = '',
+    SeriesDescription,
    SeriesNumber,
    SeriesDate,
-    SeriesTime,
-    StructureSetDate,
-    StructureSetTime,
    SOPClassUID,
    wadoRoot,
    wadoUri,
    wadoUriRoot,
-    imageId: predecessorImageId,
  } = instance;

  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,
-    /**
-     * The "SeriesDate" for a display set is really the display set date, which
-     * should be the date of the instance being used, which will be the structure
-     * set date in this case.
-     */
-    SeriesDate: StructureSetDate || SeriesDate,
-    SeriesTime: StructureSetTime || SeriesTime,
+    SeriesDate,
    SOPInstanceUID,
    SeriesInstanceUID,
    StudyInstanceUID,
@@ -66,20 +49,14 @@ function _getDisplaySetsFromSeries(
    structureSet: null,
    sopClassUids,
    instance,
-    instances,
-    predecessorImageId,
    wadoRoot,
    wadoUriRoot,
    wadoUri,
    isOverlayDisplaySet: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('RTSTRUCT')}`,
  };

  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
-  if (
-    instance.ReferencedFrameOfReferenceSequence?.RTReferencedStudySequence &&
-    !instance.ReferencedSeriesSequence
-  ) {
+  if (instance.ReferencedFrameOfReferenceSequence && !instance.ReferencedSeriesSequence) {
    instance.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
      instance.ReferencedFrameOfReferenceSequence
    );
@@ -87,8 +64,7 @@ function _getDisplaySetsFromSeries(
  }

  if (!referencedSeriesSequence) {
-    console.error('ReferencedSeriesSequence is missing for the RTSTRUCT');
-    return;
+    throw new Error('ReferencedSeriesSequence is missing for the RTSTRUCT');
  }

  const referencedSeries = referencedSeriesSequence[0];
@@ -97,13 +73,9 @@ function _getDisplaySetsFromSeries(
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;

  const { displaySetService } = servicesManager.services;
-  const referencedDisplaySets =
-    displaySetService.getDisplaySetsForReferences(referencedSeriesSequence);
-  if (referencedDisplaySets?.length > 1) {
-    console.warn(
-      'Reference applies to more than 1 display set for Contours, applying only to first display set'
-    );
-  }
+  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+    displaySet.referencedSeriesInstanceUID
+  );

  if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
    // Instead of throwing error, subscribe to display sets added
@@ -113,72 +85,52 @@ function _getDisplaySetsFromSeries(
        const addedDisplaySet = displaySetsAdded[0];
        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
-          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
          unsubscribe();
        }
      }
    );
  } else {
-    const [referencedDisplaySet] = referencedDisplaySets;
+    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 (
    (rtDisplaySet.loading || rtDisplaySet.isLoaded) &&
    loadPromises[SOPInstanceUID] &&
-    cachedRTStructsSEG.has(rtDisplaySet.displaySetInstanceUID)
+    _segmentationExistsInCache(rtDisplaySet, segmentationService)
  ) {
    return loadPromises[SOPInstanceUID];
  }

  rtDisplaySet.loading = true;

-  const { unsubscribe } = segmentationService.subscribe(
-    segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
-    (evt: { rtDisplaySet: { displaySetInstanceUID: string } }) => {
-      if (evt.rtDisplaySet?.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
-        cachedRTStructsSEG.add(rtDisplaySet.displaySetInstanceUID);
-        unsubscribe();
-      }
-    }
-  );
-
  // We don't want to fire multiple loads, so we'll wait for the first to finish
  // and also return the same promise to any other callers.
-  loadPromises[SOPInstanceUID] = new Promise<void>(async (resolve, reject) => {
-    try {
-      if (!rtDisplaySet.structureSet) {
-        const structureSet = await loadRTStruct(extensionManager, rtDisplaySet, headers);
-        rtDisplaySet.structureSet = structureSet;
-      }
+  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
+    if (!rtDisplaySet.structureSet) {
+      const structureSet = await loadRTStruct(extensionManager, rtDisplaySet, headers);

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

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

-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
+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({ servicesManager, extensionManager }) {
  return [
    {
      name: 'dicom-rt',
@@ -2,34 +2,9 @@ import dcmjs from 'dcmjs';
 const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
 const dicomlab2RGB = dcmjs.data.Colors.dicomlab2RGB;

-/**
- * Checks and loads contour data for RT Structure Set, handling both inline and bulk data URIs.
- * Processes ROIContourSequence to extract contour data and resolve any bulk data references.
- *
- * @async
- * @function checkAndLoadContourData
- * @param {Object} params - Parameters object
- * @param {Object} params.instance - Initial RT Structure instance
- * @param {Object} params.dataSource - Data source for retrieving bulk data
- * @param {Object} params.extensionManager - OHIF extension manager
- * @param {Object} params.rtStructDisplaySet - RT Structure display set
- * @param {Object} params.headers - HTTP headers for requests
- * @returns {Promise<Object>} Promise that resolves to the processed RT Structure instance with loaded contour data
- * @throws {Promise<string>} Rejects with error message if instance is invalid or data retrieval fails
- */
-async function checkAndLoadContourData({
-  instance: initialInstance,
-  dataSource,
-  extensionManager,
-  rtStructDisplaySet,
-  headers,
-}) {
-  let instance = initialInstance;
+async function checkAndLoadContourData(instance, datasource) {
  if (!instance || !instance.ROIContourSequence) {
-    instance = await getRTStructInstance({ extensionManager, rtStructDisplaySet, headers });
-    if (!instance || !instance.ROIContourSequence) {
-      return Promise.reject('Invalid instance object or ROIContourSequence');
-    }
+    return Promise.reject('Invalid instance object or ROIContourSequence');
  }

  const promisesMap = new Map();
@@ -55,11 +30,11 @@ async function checkAndLoadContourData({
      } else if (contourData && contourData.BulkDataURI) {
        const bulkDataURI = contourData.BulkDataURI;

-        if (!dataSource || !dataSource.retrieve || !dataSource.retrieve.bulkDataURI) {
-          return Promise.reject('Invalid dataSource object or retrieve function');
+        if (!datasource || !datasource.retrieve || !datasource.retrieve.bulkDataURI) {
+          return Promise.reject('Invalid datasource object or retrieve function');
        }

-        const bulkDataPromise = dataSource.retrieve.bulkDataURI({
+        const bulkDataPromise = datasource.retrieve.bulkDataURI({
          BulkDataURI: bulkDataURI,
          StudyInstanceUID: instance.StudyInstanceUID,
          SeriesInstanceUID: instance.SeriesInstanceUID,
@@ -69,40 +44,6 @@ async function checkAndLoadContourData({
        promisesMap.has(referencedROINumber)
          ? promisesMap.get(referencedROINumber).push(bulkDataPromise)
          : promisesMap.set(referencedROINumber, [bulkDataPromise]);
-      } else if (contourData && contourData.InlineBinary) {
-        // Contour data is still in binary format, conversion needed
-        const base64String = contourData.InlineBinary;
-        const decodedText = atob(base64String);
-
-        const rawValues = decodedText.split('\\');
-
-        const result = [];
-
-        // Ensure strictly that we have a full set of 3 coordinates
-        if (rawValues.length % 3 !== 0) {
-          return Promise.reject('ContourData raw values not divisible by 3');
-        }
-
-        for (let i = 0; i < rawValues.length; i += 3) {
-          if (i + 2 < rawValues.length) {
-            const x = parseFloat(rawValues[i]);
-            const y = parseFloat(rawValues[i + 1]);
-            const z = parseFloat(rawValues[i + 2]);
-
-            // Only push if all three are valid numbers (filters out trailing empty splits)
-            if (!isNaN(x) && !isNaN(y) && !isNaN(z)) {
-              result.push(x);
-              result.push(y);
-              result.push(z);
-            } else {
-              return Promise.reject('Error parsing contourData from InlineBinary format');
-            }
-          }
-        }
-
-        promisesMap.has(referencedROINumber)
-          ? promisesMap.get(referencedROINumber).push(result)
-          : promisesMap.set(referencedROINumber, [result]);
      } else {
        return Promise.reject(`Invalid ContourData: ${contourData}`);
      }
@@ -123,12 +64,9 @@ async function checkAndLoadContourData({
        ROIContour.ContourSequence.forEach((Contour, index) => {
          const promise = resolvedPromises[index];
          if (promise.status === 'fulfilled') {
-            if (
-              Array.isArray(promise.value) &&
-              promise.value.every(it => Number.isFinite(Number(it)))
-            ) {
+            if (Array.isArray(promise.value) && promise.value.every(Number.isFinite)) {
              // If promise.value is already an array of numbers, use it directly
-              Contour.ContourData = promise.value.map(Number);
+              Contour.ContourData = promise.value;
            } else {
              // If the resolved promise value is a byte array (Blob), it needs to be decoded
              const uint8Array = new Uint8Array(promise.value);
@@ -149,74 +87,35 @@ async function checkAndLoadContourData({
      console.error(error);
    }
  });
-
-  return instance;
 }

-/**
- * Retrieves and parses RT Structure Set instance from DICOM data.
- * Uses the cornerstone utility module to load DICOM data and converts it to a naturalized dataset.
- *
- * @async
- * @function getRTStructInstance
- * @param {Object} params - Parameters object
- * @param {Object} params.extensionManager - OHIF extension manager
- * @param {Object} params.rtStructDisplaySet - RT Structure display set
- * @param {Object} params.headers - HTTP headers for requests
- * @returns {Promise<Object>} Promise that resolves to the parsed RT Structure dataset
- */
-const getRTStructInstance = async ({ extensionManager, rtStructDisplaySet, headers }) => {
+export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
  const utilityModule = extensionManager.getModuleEntry(
    '@ohif/extension-cornerstone.utilityModule.common'
  );
-  const { dicomLoaderService } = utilityModule.exports;
-  const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
-    rtStructDisplaySet,
-    null,
-    headers
-  );
-  const dicomData = DicomMessage.readFile(segArrayBuffer);
-  const rtStructDataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
-  rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
-  return rtStructDataset;
-};
-
-/**
- * Main function to load and process RT Structure Set data.
- * Creates a structure set object with ROI contours, metadata, and visualization properties.
- * Handles both bulk data URI and inline contour data scenarios.
- *
- * @async
- * @function loadRTStruct
- * @param {Object} extensionManager - OHIF extension manager
- * @param {Object} rtStructDisplaySet - RT Structure display set to process
- * @param {Object} headers - HTTP headers for data requests
- * @returns {Promise<Object>} Promise that resolves to a structure set object containing:
- *   - StructureSetLabel: Label of the structure set
- *   - SeriesInstanceUID: Series instance UID
- *   - ROIContours: Array of ROI contour data with points and metadata
- *   - visible: Visibility state
- *   - ReferencedSOPInstanceUIDsSet: Set of referenced SOP instance UIDs
- */
-export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
  const dataSource = extensionManager.getActiveDataSource()[0];
  const { bulkDataURI } = dataSource.getConfig?.() || {};

+  const { dicomLoaderService } = utilityModule.exports;
+
  // Set here is loading is asynchronous.
  // If this function throws its set back to false.
  rtStructDisplaySet.isLoaded = true;
  let instance = rtStructDisplaySet.instance;

  if (!bulkDataURI || !bulkDataURI.enabled) {
-    instance = await getRTStructInstance({ extensionManager, rtStructDisplaySet, headers });
-  } else {
-    instance = await checkAndLoadContourData({
-      instance,
-      dataSource,
-      extensionManager,
+    const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
      rtStructDisplaySet,
-      headers,
-    });
+      null,
+      headers
+    );
+
+    const dicomData = DicomMessage.readFile(segArrayBuffer);
+    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
+    rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+    instance = rtStructDataset;
+  } else {
+    await checkAndLoadContourData(instance, dataSource);
  }

  const { StructureSetROISequence, ROIContourSequence, RTROIObservationsSequence } = instance;
@@ -233,16 +132,21 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
  for (let i = 0; i < ROIContourSequence.length; i++) {
    const ROIContour = ROIContourSequence[i];
    const { ContourSequence } = ROIContour;
+
    if (!ContourSequence) {
      continue;
    }

+    const isSupported = false;
+
    const ContourSequenceArray = _toArray(ContourSequence);

    const contourPoints = [];
-    for (const ContourSequenceItem of ContourSequenceArray) {
+    for (let c = 0; c < ContourSequenceArray.length; c++) {
      const { ContourData, NumberOfContourPoints, ContourGeometricType, ContourImageSequence } =
-        ContourSequenceItem;
+        ContourSequenceArray[c];
+
+      let isSupported = false;

      const points = [];
      for (let p = 0; p < NumberOfContourPoints * 3; p += 3) {
@@ -253,18 +157,22 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
        });
      }

-      const supportedContourTypesMap = new Map([
-        ['CLOSED_PLANAR', false],
-        ['OPEN_NONPLANAR', false],
-        ['OPEN_PLANAR', false],
-        ['POINT', true],
-      ]);
+      switch (ContourGeometricType) {
+        case 'CLOSED_PLANAR':
+        case 'OPEN_PLANAR':
+        case 'POINT':
+          isSupported = true;
+
+          break;
+        default:
+          continue;
+      }

      contourPoints.push({
        numberOfPoints: NumberOfContourPoints,
        points,
        type: ContourGeometricType,
-        isSupported: supportedContourTypesMap.get(ContourGeometricType) ?? false,
+        isSupported,
      });

      if (ContourImageSequence?.ReferencedSOPInstanceUID) {
@@ -279,30 +187,20 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
      StructureSetROISequence,
      RTROIObservationsSequence,
      ROIContour,
-      contourPoints
+      contourPoints,
+      isSupported
    );
  }
  return structureSet;
 }

-/**
- * Sets metadata for ROI contour data and adds it to the structure set.
- * Extracts ROI information from StructureSetROISequence and RTROIObservationsSequence,
- * then creates a complete ROI contour data object with visualization properties.
- *
- * @function _setROIContourMetadata
- * @param {Object} structureSet - The structure set object to add ROI contour to
- * @param {Array} StructureSetROISequence - Array of structure set ROI definitions
- * @param {Array} RTROIObservationsSequence - Array of RT ROI observations
- * @param {Object} ROIContour - ROI contour object containing contour data
- * @param {Array} contourPoints - Array of processed contour points
- */
 function _setROIContourMetadata(
  structureSet,
  StructureSetROISequence,
  RTROIObservationsSequence,
  ROIContour,
-  contourPoints
+  contourPoints,
+  isSupported
 ) {
  const StructureSetROI = StructureSetROISequence.find(
    structureSetROI => structureSetROI.ROINumber === ROIContour.ReferencedROINumber
@@ -313,9 +211,9 @@ function _setROIContourMetadata(
    ROIName: StructureSetROI.ROIName,
    ROIGenerationAlgorithm: StructureSetROI.ROIGenerationAlgorithm,
    ROIDescription: StructureSetROI.ROIDescription,
+    isSupported,
    contourPoints,
    visible: true,
-    colorArray: [],
  };

  _setROIContourDataColor(ROIContour, ROIContourData);
@@ -332,14 +230,6 @@ function _setROIContourMetadata(
  structureSet.ROIContours.push(ROIContourData);
 }

-/**
- * Sets the display color for ROI contour data.
- * Uses ROIDisplayColor if available, otherwise converts RecommendedDisplayCIELabValue to RGB.
- *
- * @function _setROIContourDataColor
- * @param {Object} ROIContour - ROI contour object containing color information
- * @param {Object} ROIContourData - ROI contour data object to set color on
- */
 function _setROIContourDataColor(ROIContour, ROIContourData) {
  let { ROIDisplayColor, RecommendedDisplayCIELabValue } = ROIContour;

@@ -353,15 +243,6 @@ function _setROIContourDataColor(ROIContour, ROIContourData) {
  }
 }

-/**
- * Sets RT ROI observations metadata for ROI contour data.
- * Finds matching RTROIObservations by ROINumber and adds observation details to contour data.
- *
- * @function _setROIContourRTROIObservations
- * @param {Object} ROIContourData - ROI contour data object to add observations to
- * @param {Array} RTROIObservationsSequence - Array of RT ROI observations
- * @param {number} ROINumber - ROI number to match observations
- */
 function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequence, ROINumber) {
  const RTROIObservations = RTROIObservationsSequence.find(
    RTROIObservations => RTROIObservations.ReferencedROINumber === ROINumber
@@ -381,14 +262,6 @@ function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequen
  }
 }

-/**
- * Converts a single object or array to an array.
- * Utility function to ensure consistent array handling for DICOM sequences.
- *
- * @function _toArray
- * @param {*} objOrArray - Object or array to convert
- * @returns {Array} Array containing the input (if already array) or wrapped in array
- */
 function _toArray(objOrArray) {
  return Array.isArray(objOrArray) ? objOrArray : [objOrArray];
 }
@@ -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,35 +80,104 @@ 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 => {
-        if (evt.rtDisplaySet?.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
+        if (evt.rtDisplaySet.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
          setRtIsLoading(false);
        }

@@ -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.13.0-beta.14",
+  "version": "3.10.2",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,21 +33,22 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.13.0-beta.14",
-    "@ohif/extension-cornerstone": "3.13.0-beta.14",
-    "@ohif/extension-default": "3.13.0-beta.14",
-    "@ohif/i18n": "3.13.0-beta.14",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-router": "6.30.3",
-    "react-router-dom": "6.30.3"
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
+    "prop-types": "^15.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^12.2.2",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.15.29",
-    "@cornerstonejs/core": "4.15.29",
-    "@kitware/vtk.js": "34.15.1"
+    "@babel/runtime": "^7.20.13",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@kitware/vtk.js": "32.12.0",
+    "react-color": "^2.19.3"
  }
 }
@@ -1,13 +1,15 @@
 import dcmjs from 'dcmjs';
-import { classes, Types, utils } from '@ohif/core';
+import { classes, Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
 import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
-import { createReportDialogPrompt, useUIStateStore } from '@ohif/extension-default';
+import { createReportDialogPrompt } from '@ohif/extension-default';
 import { DicomMetadataStore } from '@ohif/core';

 import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';

+const { datasetToBlob } = dcmjs.data;
+
 const getTargetViewport = ({ viewportId, viewportGridService }) => {
  const { viewports, activeViewportId } = viewportGridService.getState();
  const targetViewportId = viewportId || activeViewportId;
@@ -25,7 +27,7 @@ const {

 const {
  Cornerstone3D: {
-    RTSS: { generateRTSSFromRepresentation },
+    RTSS: { generateRTSSFromSegmentations },
  },
 } = adaptersRT;

@@ -35,7 +37,7 @@ const commandsModule = ({
  servicesManager,
  extensionManager,
 }: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
-  const { segmentationService, displaySetService, viewportGridService } =
+  const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
    servicesManager.services as AppTypes.Services;

  const actions = {
@@ -90,7 +92,6 @@ const commandsModule = ({
     */
    generateSegmentation: ({ segmentationId, options = {} }) => {
      const segmentation = cornerstoneToolsSegmentation.state.getSegmentation(segmentationId);
-      const predecessorImageId = options.predecessorImageId ?? segmentation.predecessorImageId;

      const { imageIds } = segmentation.representationData.Labelmap;

@@ -172,10 +173,12 @@ const commandsModule = ({
        labelmap3D.metadata[segmentIndex] = segmentMetadata;
      });

-      const generatedSegmentation = generateSegmentation(referencedImages, labelmap3D, metaData, {
-        predecessorImageId,
-        ...options,
-      });
+      const generatedSegmentation = generateSegmentation(
+        referencedImages,
+        labelmap3D,
+        metaData,
+        options
+      );

      return generatedSegmentation;
    },
@@ -209,28 +212,24 @@ const commandsModule = ({
     * @returns {Object|void} Returns the naturalized report if successfully stored,
     * otherwise throws an error.
     */
-    storeSegmentation: async ({ segmentationId, dataSource, modality = 'SEG' }) => {
+    storeSegmentation: async ({ segmentationId, dataSource }) => {
      const segmentation = segmentationService.getSegmentation(segmentationId);

      if (!segmentation) {
        throw new Error('No segmentation found');
      }

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

      const {
        value: reportName,
        dataSourceName: selectedDataSource,
-        series,
-        priorSeriesNumber,
        action,
      } = await createReportDialogPrompt({
        servicesManager,
        extensionManager,
-        predecessorImageId,
        title: 'Store Segmentation',
-        modality,
      });

      if (action === PROMPT_RESPONSES.CREATE_REPORT) {
@@ -239,18 +238,12 @@ const commandsModule = ({
            ? extensionManager.getDataSources(selectedDataSource)[0]
            : defaultDataSource;

-          const args = {
+          const generatedData = actions.generateSegmentation({
            segmentationId,
            options: {
-              SeriesDescription: series ? undefined : reportName || label || 'Contour Series',
-              SeriesNumber: series ? undefined : 1 + priorSeriesNumber,
-              predecessorImageId: series,
+              SeriesDescription: reportName || label || 'Research Derived Series',
            },
-          };
-          const generatedDataAsync =
-            (modality === 'SEG' && actions.generateSegmentation(args)) ||
-            (modality === 'RTSTRUCT' && actions.generateContour(args));
-          const generatedData = await generatedDataAsync;
+          });

          if (!generatedData || !generatedData.dataset) {
            throw new Error('Error during segmentation generation');
@@ -258,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
@@ -277,9 +265,14 @@ const commandsModule = ({
        }
      }
    },
-
-    generateContour: async args => {
-      const { segmentationId, options } = args;
+    /**
+     * Converts segmentations into RTSS for download.
+     * This sample function retrieves all segentations and passes to
+     * cornerstone tool adapter to convert to DICOM RTSS format. It then
+     * converts dataset to downloadable blob.
+     *
+     */
+    downloadRTSS: async ({ segmentationId }) => {
      const segmentations = segmentationService.getSegmentation(segmentationId);

      // inject colors to the segmentIndex
@@ -289,54 +282,45 @@ const commandsModule = ({
        segment.color = segmentationService.getSegmentColor(
          firstRepresentation.viewportId,
          segmentationId,
-          Number(segmentIndex)
+          segmentIndex
        );
      });
-      const predecessorImageId = options?.predecessorImageId ?? segmentations.predecessorImageId;
-      const dataset = await generateRTSSFromRepresentation(segmentations, {
-        predecessorImageId,
-        ...options,
-      });
-      return { dataset };
-    },

-    /**
-     * Downloads an RTSS instance from a segmentation or contour
-     * representation.
-     */
-    downloadRTSS: async args => {
-      const { dataset } = await actions.generateContour(args);
-      const { InstanceNumber: instanceNumber = 1, SeriesInstanceUID: seriesUID } = dataset;
+      const RTSS = await generateRTSSFromSegmentations(
+        segmentations,
+        classes.MetadataProvider,
+        DicomMetadataStore
+      );

      try {
+        const reportBlob = datasetToBlob(RTSS);
+
        //Create a URL for the binary.
-        const filename = `rtss-${seriesUID}-${instanceNumber}.dcm`;
-        downloadDICOMData(dataset, filename);
+        const objectUrl = URL.createObjectURL(reportBlob);
+        window.location.assign(objectUrl);
      } catch (e) {
        console.warn(e);
      }
    },
-
-    toggleActiveSegmentationUtility: ({ itemId: buttonId }) => {
-      const { uiState, setUIState } = useUIStateStore.getState();
-      const isButtonActive = uiState['activeSegmentationUtility'] === buttonId;
-      console.log('toggleActiveSegmentationUtility', isButtonActive, buttonId);
-      // if the button is active, clear the active segmentation utility
-      if (isButtonActive) {
-        setUIState('activeSegmentationUtility', null);
-      } else {
-        setUIState('activeSegmentationUtility', buttonId);
-      }
-    },
  };

  const definitions = {
-    loadSegmentationsForViewport: actions.loadSegmentationsForViewport,
-    generateSegmentation: actions.generateSegmentation,
-    downloadSegmentation: actions.downloadSegmentation,
-    storeSegmentation: actions.storeSegmentation,
-    downloadRTSS: actions.downloadRTSS,
-    toggleActiveSegmentationUtility: actions.toggleActiveSegmentationUtility,
+    loadSegmentationsForViewport: {
+      commandFn: actions.loadSegmentationsForViewport,
+    },
+
+    generateSegmentation: {
+      commandFn: actions.generateSegmentation,
+    },
+    downloadSegmentation: {
+      commandFn: actions.downloadSegmentation,
+    },
+    storeSegmentation: {
+      commandFn: actions.storeSegmentation,
+    },
+    downloadRTSS: {
+      commandFn: actions.downloadRTSS,
+    },
  };

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

@@ -16,34 +15,29 @@ function _getDisplaySetsFromSeries(
  servicesManager: AppTypes.ServicesManager,
  extensionManager
 ) {
-  utils.sortStudyInstances(instances);
-
-  // Choose the LAST instance in the list as the most recently created one.
-  const instance = instances[instances.length - 1];
+  const instance = instances[0];

  const {
    StudyInstanceUID,
    SeriesInstanceUID,
    SOPInstanceUID,
-    SeriesDescription = '',
+    SeriesDescription,
    SeriesNumber,
    SeriesDate,
-    StructureSetDate,
    SOPClassUID,
    wadoRoot,
    wadoUri,
    wadoUriRoot,
-    imageId: predecessorImageId,
  } = instance;

  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,
-    SeriesDate: SeriesDate || StructureSetDate || '',
+    SeriesDate,
    SOPInstanceUID,
    SeriesInstanceUID,
    StudyInstanceUID,
@@ -58,13 +52,11 @@ function _getDisplaySetsFromSeries(
    segments: {},
    sopClassUids,
    instance,
-    predecessorImageId,
    instances: [instance],
    wadoRoot,
    wadoUriRoot,
    wadoUri,
    isOverlayDisplaySet: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SEG')}`,
  };

  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
@@ -79,16 +71,10 @@ function _getDisplaySetsFromSeries(
  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
  const { displaySetService } = servicesManager.services;
-  const referencedDisplaySets = displaySetService.getDisplaySetsForReferences(
-    instance.ReferencedSeriesSequence
+  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+    displaySet.referencedSeriesInstanceUID
  );

-  if (referencedDisplaySets?.length > 1) {
-    console.warn(
-      'Segmentation does not currently handle references to multiple series, defaulting to first series'
-    );
-  }
-
  const referencedDisplaySet = referencedDisplaySets[0];

  if (!referencedDisplaySet) {
@@ -103,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 }) =>
@@ -248,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,35 +1,6 @@
-import { utilities as cstUtils } from '@cornerstonejs/tools';
-import i18n from '@ohif/i18n';
-import { useUIStateStore } from '@ohif/extension-default';
-
-import LogicalContourOperationsOptions from './components/LogicalContourOperationsOptions';
-import SimplifyContourOptions from './components/SimplifyContourOptions';
-import SmoothContoursOptions from './components/SmoothContoursOptions';
-
 export function getToolbarModule({ servicesManager }: withAppTypes) {
  const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
  return [
-    {
-      name: 'cornerstone.SimplifyContourOptions',
-      defaultComponent: SimplifyContourOptions,
-    },
-    {
-      name: 'cornerstone.LogicalContourOperationsOptions',
-      defaultComponent: LogicalContourOperationsOptions,
-    },
-    {
-      name: 'cornerstone.SmoothContoursOptions',
-      defaultComponent: SmoothContoursOptions,
-    },
-    {
-      name: 'cornerstone.isActiveSegmentationUtility',
-      evaluate: ({ button }) => {
-        const { uiState } = useUIStateStore.getState();
-        return {
-          isActive: uiState[`activeSegmentationUtility`] === button.id,
-        };
-      },
-    },
    {
      name: 'evaluate.cornerstone.hasSegmentation',
      evaluate: ({ viewportId }) => {
@@ -39,30 +10,6 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        };
      },
    },
-    {
-      name: 'evaluate.cornerstone.hasSegmentationOfType',
-      evaluate: ({ viewportId, segmentationRepresentationType }) => {
-        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
-
-        if (!segmentations?.length) {
-          return {
-            disabled: true,
-            disabledText: i18n.t('SegmentationPanel:No segmentations available'),
-          };
-        }
-
-        if (
-          !segmentations.some(segmentation =>
-            Boolean(segmentation.type === segmentationRepresentationType)
-          )
-        ) {
-          return {
-            disabled: true,
-            disabledText: `No ${segmentationRepresentationType} segmentations available`,
-          };
-        }
-      },
-    },
    {
      name: 'evaluate.cornerstone.segmentation',
      evaluate: ({ viewportId, button, toolNames, disabledText }) => {
@@ -74,7 +21,7 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        if (!segmentations?.length) {
          return {
            disabled: true,
-            disabledText: disabledText ?? i18n.t('SegmentationPanel:No segmentations available'),
+            disabledText: disabledText ?? 'No segmentations available',
          };
        }

@@ -82,7 +29,7 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        if (!Object.keys(activeSegmentation.segments).length) {
          return {
            disabled: true,
-            disabledText: i18n.t('SegmentationPanel:Add segment to enable this tool'),
+            disabledText: 'Add segment to enable this tool',
          };
        }

@@ -91,7 +38,7 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        if (!toolGroup) {
          return {
            disabled: true,
-            disabledText: disabledText ?? i18n.t('SegmentationPanel:Not available on the current viewport'),
+            disabledText: disabledText ?? 'Not available on the current viewport',
          };
        }

@@ -107,7 +54,7 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        if (!toolGroup.hasTool(toolName) && !toolNames) {
          return {
            disabled: true,
-            disabledText: disabledText ?? i18n.t('SegmentationPanel:Not available on the current viewport'),
+            disabledText: disabledText ?? 'Not available on the current viewport',
          };
        }

@@ -121,23 +68,5 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        };
      },
    },
-    {
-      name: 'evaluate.cornerstone.segmentation.synchronizeDrawingRadius',
-      evaluate: ({ button, radiusOptionId }) => {
-        const toolGroupIds = toolGroupService.getToolGroupIds();
-        if (!toolGroupIds?.length) {
-          return;
-        }
-
-        for (const toolGroupId of toolGroupIds) {
-          const brushSize = cstUtils.segmentation.getBrushSizeForToolGroup(toolGroupId);
-
-          if (brushSize) {
-            const option = toolbarService.getOptionById(button, radiusOptionId);
-            option.value = brushSize;
-          }
-        }
-      },
-    },
  ];
 }
@@ -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,32 +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).
-
-  // Additional guard: If no customization handler is registered for missing
-  // referenced display sets, skip SEG rendering to avoid a viewport crash.
-  if (!referencedDisplaySetInstanceUID) {
-    const missingReferenceDisplaySetHandler = customizationService.getCustomization(
-      'missingReferenceDisplaySetHandler'
-    );
-    if (typeof missingReferenceDisplaySetHandler === 'function') {
-      const { handled } = missingReferenceDisplaySetHandler();
-      if (handled) {
-        return;
-      }
-    } else {
-      console.log(
-        "No customization 'missingReferenceDisplaySetHandler' registered. Skipping SEG rendering."
-      );
-      return;
-    }
-  }
-
  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
    referencedDisplaySetInstanceUID
  );
@@ -93,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={{
@@ -108,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
@@ -145,7 +191,7 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
      evt => {
-        if (evt.segDisplaySet?.displaySetInstanceUID === segDisplaySet?.displaySetInstanceUID) {
+        if (evt.segDisplaySet.displaySetInstanceUID === segDisplaySet.displaySetInstanceUID) {
          setSegIsLoading(false);
        }

@@ -225,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
@@ -242,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.13.0-beta.14",
+  "version": "3.10.2",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -34,21 +34,21 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.13.0-beta.14",
-    "@ohif/extension-cornerstone": "3.13.0-beta.14",
-    "@ohif/extension-measurement-tracking": "3.13.0-beta.14",
-    "@ohif/ui": "3.13.0-beta.14",
-    "dcmjs": "0.49.4",
-    "dicom-parser": "1.8.21",
-    "hammerjs": "2.0.8",
-    "prop-types": "15.8.1",
-    "react": "18.3.1"
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-measurement-tracking": "3.10.2",
+    "@ohif/ui": "3.10.2",
+    "dcmjs": "*",
+    "dicom-parser": "^1.8.9",
+    "hammerjs": "^2.0.8",
+    "prop-types": "^15.6.2",
+    "react": "^18.3.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.15.29",
-    "@cornerstonejs/core": "4.15.29",
-    "@cornerstonejs/tools": "4.15.29",
-    "classnames": "2.5.1"
+    "@babel/runtime": "^7.20.13",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
+    "classnames": "^2.3.2"
  }
 }
@@ -1,14 +1,12 @@
-import { metaData } from '@cornerstonejs/core';
+import { metaData, utilities } from '@cornerstonejs/core';

-import OHIF, { DicomMetadataStore, utils } from '@ohif/core';
+import OHIF, { DicomMetadataStore } from '@ohif/core';
 import dcmjs from 'dcmjs';
 import { adaptersSR } from '@cornerstonejs/adapters';

 import getFilteredCornerstoneToolState from './utils/getFilteredCornerstoneToolState';
 import hydrateStructuredReport from './utils/hydrateStructuredReport';

-const { downloadBlob } = utils;
-
 const { MeasurementReport } = adaptersSR.Cornerstone3D;
 const { log } = OHIF;

@@ -34,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;

@@ -44,12 +47,14 @@ const _generateReport = (measurementData, additionalFindingTypes, options: Optio
    dataset.SpecificCharacterSet = 'ISO_IR 192';
  }

+  dataset.InstanceNumber = options.InstanceNumber ?? 1;
+
  return dataset;
 };

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

  const actions = {
    changeColorMeasurement: ({ uid }) => {
@@ -85,7 +90,8 @@ const commandsModule = (props: withAppTypes) => {
      const reportBlob = dcmjs.data.datasetToBlob(srDataset);

      //Create a URL for the binary.
-      downloadBlob(reportBlob, { filename: 'dicom-sr.dcm' });
+      const objectUrl = URL.createObjectURL(reportBlob);
+      window.location.assign(objectUrl);
    },

    /**
@@ -123,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');

@@ -157,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;
@@ -9,7 +9,7 @@ function OHIFCornerstoneSRTextViewport(props: withAppTypes) {
  const instance = displaySet.instances[0];

  return (
-    <div className="text-foreground relative flex h-full w-full flex-col overflow-auto p-4">
+    <div className="relative flex h-full w-full flex-col overflow-auto p-4 text-white">
      <div>
        {/* The root level is always a container */}
        <OHIFCornerstoneSRContainer container={instance} />
@@ -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,14 +14,10 @@ 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 = OhifTypes.InstanceMetadata;
+type InstanceMetadata = Types.InstanceMetadata;

 /**
 * TODO
@@ -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.
@@ -69,10 +63,9 @@ function addInstances(instances: InstanceMetadata[], _displaySetService: Display
 * DICOM SR SOP Class Handler
 * For all referenced images in the TID 1500/300 sections, add an image to the
 * display.
- * @param {InstanceMetadata[]} instances - A set of instances all from the same series
- * @param {AppTypes.ServicesManager} servicesManager - The services that can be used for creating
- * @param {AppTypes.ExtensionManager} extensionManager - The extension manager
- * @returns {Types.DisplaySet[]} The list of display sets created for the given instances object
+ * @param instances is a set of instances all from the same series
+ * @param servicesManager is the services that can be used for creating
+ * @returns The list of display sets created for the given instances object
 */
 function _getDisplaySetsFromSeries(
  instances,
@@ -100,7 +93,6 @@ function _getDisplaySetsFromSeries(
    SeriesTime,
    ConceptNameCodeSequence,
    SOPClassUID,
-    imageId: predecessorImageId,
  } = instance;
  validateSameStudyUID(instance.StudyInstanceUID, instances);

@@ -129,9 +121,7 @@ function _getDisplaySetsFromSeries(
    isImagingMeasurementReport,
    sopClassUids,
    instance,
-    predecessorImageId,
    addInstances,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SR')}`,
  };

  displaySet.load = () => _load(displaySet, servicesManager, extensionManager);
@@ -146,7 +136,7 @@ function _getDisplaySetsFromSeries(
 * @param extensionManager - The extension manager containing data sources.
 */
 async function _load(
-  srDisplaySet: OhifTypes.DisplaySet,
+  srDisplaySet: Types.DisplaySet,
  servicesManager: AppTypes.ServicesManager,
  extensionManager: AppTypes.ExtensionManager
 ) {
@@ -186,10 +176,6 @@ async function _load(
    srDisplaySet.referencedImages = [];
    srDisplaySet.measurements = [];
  }
-  const { predecessorImageId } = srDisplaySet;
-  for (const measurement of srDisplaySet.measurements) {
-    measurement.predecessorImageId = predecessorImageId;
-  }

  const mappings = measurementService.getSourceMappings(
    CORNERSTONE_3D_TOOLS_SOURCE_NAME,
@@ -228,15 +214,17 @@ async function _load(
  });
 }

-function _measurementBelongsToDisplaySet({ measurement, displaySet }) {
-  return (
-    measurement.coords[0].ReferencedFrameOfReferenceSequence === displaySet.FrameOfReferenceUID
-  );
-}
-
+/**
+ * Checks if measurements can be added to a display set.
+ *
+ * @param srDisplaySet - The source display set containing measurements.
+ * @param newDisplaySet - The new display set to check if measurements can be added.
+ * @param dataSource - The data source used to retrieve image IDs.
+ * @param servicesManager - The services manager.
+ */
 function _checkIfCanAddMeasurementsToDisplaySet(
-  srDisplaySet: OhifTypes.DisplaySet,
-  newDisplaySet: OhifTypes.DisplaySet,
+  srDisplaySet,
+  newDisplaySet,
  dataSource,
  servicesManager: AppTypes.ServicesManager
 ) {
@@ -246,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);
@@ -268,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'
@@ -283,15 +278,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(
    }

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

@@ -309,12 +298,15 @@ function _checkIfCanAddMeasurementsToDisplaySet(
      imageId &&
      _measurementReferencesSOPInstanceUID(measurement, ReferencedSOPInstanceUID, frame)
    ) {
-      addSRAnnotation({ measurement, imageId, frameNumber: frame, displaySet: newDisplaySet });
+      addSRAnnotation(measurement, imageId, frame);
+
+      // Update measurement properties
      measurement.loaded = true;
      measurement.imageId = imageId;
      measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
      measurement.ReferencedSOPInstanceUID = ReferencedSOPInstanceUID;
      measurement.frameNumber = frame;
+
      unloadedMeasurements.splice(j, 1);
    }
  }
@@ -322,10 +314,10 @@ function _checkIfCanAddMeasurementsToDisplaySet(

 /**
 * Checks if a measurement references a specific SOP Instance UID.
- * @param {any} measurement - The measurement object.
- * @param {string} sopInstanceUID - The SOP Instance UID to check against.
- * @param {number} frameNumber - The frame number to check against (optional).
- * @returns {boolean} True if the measurement references the specified SOP Instance UID, false otherwise.
+ * @param measurement - The measurement object.
+ * @param SOPInstanceUID - The SOP Instance UID to check against.
+ * @param frameNumber - The frame number to check against (optional).
+ * @returns True if the measurement references the specified SOP Instance UID, false otherwise.
 */
 function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber) {
  const { coords } = measurement;
@@ -357,11 +349,12 @@ function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frame
 /**
 * Retrieves the SOP class handler module.
 *
- * @param {OhifTypes.Extensions.ExtensionParams} params - The extension parameters.
- * @returns {Array} An array containing the SOP class handler modules.
+ * @param {Object} options - The options for retrieving the SOP class handler module.
+ * @param {Object} options.servicesManager - The services manager.
+ * @param {Object} options.extensionManager - The extension manager.
+ * @returns {Array} An array containing the SOP class handler module.
 */
-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
@@ -382,8 +375,8 @@ function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams)
 /**
 * Retrieves the measurements from the ImagingMeasurementReportContentSequence.
 *
- * @param {any[]} imagingMeasurementReportContentSequence - The ImagingMeasurementReportContentSequence array.
- * @returns {any[]} The array of measurements.
+ * @param {Array} ImagingMeasurementReportContentSequence - The ImagingMeasurementReportContentSequence array.
+ * @returns {Array} - The array of measurements.
 */
 function _getMeasurements(ImagingMeasurementReportContentSequence) {
  const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
@@ -421,8 +414,8 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
 /**
 * Retrieves merged content sequences by tracking unique identifiers.
 *
- * @param {any[]} measurementGroups - The measurement groups.
- * @returns {Object} The merged content sequences by tracking unique identifiers.
+ * @param {Array} MeasurementGroups - The measurement groups.
+ * @returns {Object} - The merged content sequences by tracking unique identifiers.
 */
 function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups) {
  const mergedContentSequencesByTrackingUniqueIdentifiers = {};
@@ -469,11 +462,15 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups
 * it calls the _processTID1410Measurement function.
 * Otherwise, it calls the _processNonGeometricallyDefinedMeasurement function.
 *
- * @param {any[]} mergedContentSequence - The merged content sequence to process.
- * @returns {any} The processed measurement result.
+ * @param {Array<Object>} mergedContentSequence - The merged content sequence to process.
+ * @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);
  }

@@ -485,8 +482,8 @@ function _processMeasurement(mergedContentSequence) {
 * TID 1410 style measurements have a SCOORD or SCOORD3D at the top level,
 * and non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D.
 *
- * @param {any[]} mergedContentSequence - The merged content sequence containing the measurements.
- * @returns {any} The measurement object containing the loaded status, labels, coordinates, tracking unique identifier, and tracking identifier.
+ * @param mergedContentSequence - The merged content sequence containing the measurements.
+ * @returns The measurement object containing the loaded status, labels, coordinates, tracking unique identifier, and tracking identifier.
 */
 function _processTID1410Measurement(mergedContentSequence) {
  // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
@@ -511,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 => {
@@ -559,8 +543,8 @@ function _processTID1410Measurement(mergedContentSequence) {
 /**
 * Processes the non-geometrically defined measurement from the merged content sequence.
 *
- * @param {any[]} mergedContentSequence The merged content sequence containing the measurement data.
- * @returns {any} The processed measurement object.
+ * @param mergedContentSequence The merged content sequence containing the measurement data.
+ * @returns The processed measurement object.
 */
 function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
  const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');
@@ -580,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: [],
@@ -594,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(
@@ -637,20 +607,15 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
  NUMContentItems.forEach(item => {
    const { ConceptNameCodeSequence, ContentSequence, MeasuredValueSequence } = item;

-    // Handle spatial reference ONLY if ContentSequence exists
-    if (ContentSequence) {
-      const { ValueType } = ContentSequence;
+    const { ValueType } = ContentSequence;
+    if (!ValueType === 'SCOORD') {
+      console.warn(`Graphic ${ValueType} not currently supported, skipping annotation.`);
+      return;
+    }

-      if (ValueType !== 'SCOORD' && ValueType !== 'SCOORD3D') {
-        console.warn(`Graphic ${ValueType} not currently supported, skipping annotation.`);
-        return;
-      }
-
-      const coords = _getCoordsFromSCOORDOrSCOORD3D(ContentSequence);
-
-      if (coords) {
-        measurement.coords.push(coords);
-      }
+    const coords = _getCoordsFromSCOORDOrSCOORD3D(ContentSequence);
+    if (coords) {
+      measurement.coords.push(coords);
    }

    if (MeasuredValueSequence) {
@@ -665,8 +630,8 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {

 /**
 * Extracts coordinates from a graphic item of type SCOORD or SCOORD3D.
- * @param {any} graphicItem - The graphic item containing the coordinates.
- * @returns {any} The extracted coordinates.
+ * @param {object} graphicItem - The graphic item containing the coordinates.
+ * @returns {object} - The extracted coordinates.
 */
 const _getCoordsFromSCOORDOrSCOORD3D = graphicItem => {
  const { ValueType, GraphicType, GraphicData } = graphicItem;
@@ -680,9 +645,9 @@ const _getCoordsFromSCOORDOrSCOORD3D = graphicItem => {

 /**
 * Retrieves the label and value from the provided ConceptNameCodeSequence and MeasuredValueSequence.
- * @param {any} conceptNameCodeSequence - The ConceptNameCodeSequence object.
- * @param {any} measuredValueSequence - The MeasuredValueSequence object.
- * @returns {Object} An object containing the label and value.
+ * @param {Object} ConceptNameCodeSequence - The ConceptNameCodeSequence object.
+ * @param {Object} MeasuredValueSequence - The MeasuredValueSequence object.
+ * @returns {Object} - An object containing the label and value.
 *                    The label represents the CodeMeaning from the ConceptNameCodeSequence.
 *                    The value represents the formatted NumericValue and CodeValue from the MeasuredValueSequence.
 *                    Example: { label: 'Long Axis', value: '31.00 mm' }
@@ -701,8 +666,8 @@ function _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredVal
 /**
 * Retrieves a list of referenced images from the Imaging Measurement Report Content Sequence.
 *
- * @param {any[]} imagingMeasurementReportContentSequence - The Imaging Measurement Report Content Sequence.
- * @returns {any[]} The list of referenced images.
+ * @param {Array} ImagingMeasurementReportContentSequence - The Imaging Measurement Report Content Sequence.
+ * @returns {Array} - The list of referenced images.
 */
 function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
  const ImageLibrary = ImagingMeasurementReportContentSequence.find(
@@ -749,7 +714,7 @@ function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
 * Otherwise, the sequence is wrapped in an array and returned.
 *
 * @param {any} sequence - The DICOM sequence to convert.
- * @returns {any[]} The converted array.
+ * @returns {any[]} - The converted array.
 */
 function _getSequenceAsArray(sequence) {
  if (!sequence) {
@@ -758,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;
@@ -9,13 +9,19 @@ import {
  LengthTool,
  PlanarFreehandROITool,
  RectangleROITool,
+  utilities as csToolsUtils,
 } from '@cornerstonejs/tools';
-import { Types } from '@ohif/core';
-
+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';
+import SRSCOOR3DProbeMapper from './utils/SRSCOOR3DProbeMapper';
 import addToolInstance from './utils/addToolInstance';
 import toolNames from './tools/toolNames';

+const { CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION } = CSExtensionEnums;
+
 /**
 * @param {object} configuration
 */
@@ -23,6 +29,8 @@ export default function init({
  configuration = {},
  servicesManager,
 }: Types.Extensions.ExtensionParams): void {
+  const { measurementService, cornerstoneViewportService } = servicesManager.services;
+
  addToolInstance(toolNames.DICOMSRDisplay, DICOMSRDisplayTool);
  addToolInstance(toolNames.SRLength, LengthTool);
  addToolInstance(toolNames.SRBidirectional, BidirectionalTool);
@@ -32,10 +40,26 @@ export default function init({
  addToolInstance(toolNames.SRAngle, AngleTool);
  addToolInstance(toolNames.SRPlanarFreehandROI, PlanarFreehandROITool);
  addToolInstance(toolNames.SRRectangleROI, RectangleROITool);
+  addToolInstance(toolNames.SRSCOORD3DPoint, SCOORD3DPointTool);

  // TODO - fix the SR display of Cobb Angle, as it joins the two lines
  addToolInstance(toolNames.SRCobbAngle, CobbAngleTool);

+  const csTools3DVer1MeasurementSource = measurementService.getSource(
+    CORNERSTONE_3D_TOOLS_SOURCE_NAME,
+    CORNERSTONE_3D_TOOLS_SOURCE_VERSION
+  );
+
+  const { POINT } = measurementService.VALUE_TYPES;
+
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'SRSCOORD3DPoint',
+    POINT,
+    SRSCOOR3DProbeMapper.toAnnotation,
+    SRSCOOR3DProbeMapper.toMeasurement
+  );
+
  // Modify annotation tools to use dashed lines on SR
  const dashedLine = {
    lineDash: '4,4',
@@ -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']);
 }
@@ -0,0 +1,203 @@
+import { Types, metaData, utilities as csUtils } from '@cornerstonejs/core';
+import {
+  annotation,
+  drawing,
+  utilities,
+  Types as cs3DToolsTypes,
+  AnnotationDisplayTool,
+} from '@cornerstonejs/tools';
+import toolNames from './toolNames';
+import { Annotation } from '@cornerstonejs/tools/dist/types/types';
+
+export default class SCOORD3DPointTool extends AnnotationDisplayTool {
+  static toolName = toolNames.SRSCOORD3DPoint;
+
+  constructor(
+    toolProps = {},
+    defaultToolProps = {
+      configuration: {},
+    }
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  _getTextBoxLinesFromLabels(labels) {
+    // TODO -> max 5 for now (label + shortAxis + longAxis), need a generic solution for this!
+
+    const labelLength = Math.min(labels.length, 5);
+    const lines = [];
+
+    return lines;
+  }
+
+  // This tool should not inherit from AnnotationTool and we should not need
+  // to add the following lines.
+  isPointNearTool = () => null;
+  getHandleNearImagePoint = () => null;
+
+  renderAnnotation = (enabledElement: Types.IEnabledElement, svgDrawingHelper: any): void => {
+    const { viewport } = enabledElement;
+    const { element } = viewport;
+
+    const annotations = annotation.state.getAnnotations(this.getToolName(), element);
+
+    // Todo: We don't need this anymore, filtering happens in triggerAnnotationRender
+    if (!annotations?.length) {
+      return;
+    }
+
+    // Filter toolData to only render the data for the active SR.
+    const filteredAnnotations = annotations;
+    if (!viewport._actors?.size) {
+      return;
+    }
+
+    const styleSpecifier: cs3DToolsTypes.AnnotationStyle.StyleSpecifier = {
+      toolGroupId: this.toolGroupId,
+      toolName: this.getToolName(),
+      viewportId: enabledElement.viewport.id,
+    };
+
+    for (let i = 0; i < filteredAnnotations.length; i++) {
+      const annotation = filteredAnnotations[i];
+
+      const annotationUID = annotation.annotationUID;
+      const { renderableData } = annotation.data;
+      const { POINT: points } = renderableData;
+
+      styleSpecifier.annotationUID = annotationUID;
+
+      const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotation);
+      const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
+      const color = this.getStyle('color', styleSpecifier, annotation);
+
+      const options = {
+        color,
+        lineDash,
+        lineWidth,
+      };
+
+      const point = points[0][0];
+
+      // check if viewport can render it
+      const viewable = viewport.isReferenceViewable(
+        { FrameOfReferenceUID: annotation.metadata.FrameOfReferenceUID, cameraFocalPoint: point },
+        { asNearbyProjection: true }
+      );
+
+      if (!viewable) {
+        continue;
+      }
+
+      // render the point
+      const arrowPointCanvas = viewport.worldToCanvas(point);
+      // Todo: configure this
+      const arrowEndCanvas = [arrowPointCanvas[0] + 20, arrowPointCanvas[1] + 20];
+      const canvasCoordinates = [arrowPointCanvas, arrowEndCanvas];
+
+      drawing.drawArrow(
+        svgDrawingHelper,
+        annotationUID,
+        '1',
+        canvasCoordinates[1],
+        canvasCoordinates[0],
+        {
+          color: options.color,
+          width: options.lineWidth,
+        }
+      );
+
+      this.renderTextBox(
+        svgDrawingHelper,
+        viewport,
+        canvasCoordinates,
+        annotation,
+        styleSpecifier,
+        options
+      );
+    }
+  };
+
+  renderTextBox(
+    svgDrawingHelper,
+    viewport,
+    canvasCoordinates,
+    annotation,
+    styleSpecifier,
+    options = {}
+  ) {
+    if (!canvasCoordinates || !annotation) {
+      return;
+    }
+
+    const { annotationUID, data = {} } = annotation;
+    const { labels } = data;
+
+    const textLines = [];
+
+    for (const label of labels) {
+      // make this generic
+      // fix this
+      if (label.label === '363698007') {
+        textLines.push(`Finding Site: ${label.value}`);
+      }
+    }
+
+    const { color } = options;
+
+    const adaptedCanvasCoordinates = canvasCoordinates;
+    // adapt coordinates if there is an adapter
+    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(adaptedCanvasCoordinates);
+
+    if (!annotation.data?.handles?.textBox?.worldPosition) {
+      annotation.data.handles.textBox.worldPosition = viewport.canvasToWorld(canvasTextBoxCoords);
+    }
+
+    const textBoxPosition = viewport.worldToCanvas(annotation.data.handles.textBox.worldPosition);
+
+    const textBoxUID = '1';
+    const textBoxOptions = this.getLinkedTextBoxStyle(styleSpecifier, annotation);
+
+    const boundingBox = drawing.drawLinkedTextBox(
+      svgDrawingHelper,
+      annotationUID,
+      textBoxUID,
+      textLines,
+      textBoxPosition,
+      canvasCoordinates,
+      {},
+      {
+        ...textBoxOptions,
+        color,
+      }
+    );
+
+    const { x: left, y: top, width, height } = boundingBox;
+
+    annotation.data.handles.textBox.worldBoundingBox = {
+      topLeft: viewport.canvasToWorld([left, top]),
+      topRight: viewport.canvasToWorld([left + width, top]),
+      bottomLeft: viewport.canvasToWorld([left, top + height]),
+      bottomRight: viewport.canvasToWorld([left + width, top + height]),
+    };
+  }
+
+  public getLinkedTextBoxStyle(
+    specifications: cs3DToolsTypes.AnnotationStyle.StyleSpecifier,
+    annotation?: Annotation
+  ): Record<string, unknown> {
+    // Todo: this function can be used to set different styles for different toolMode
+    // for the textBox.
+
+    return {
+      visibility: this.getStyle('textBoxVisibility', specifications, annotation),
+      fontFamily: this.getStyle('textBoxFontFamily', specifications, annotation),
+      fontSize: this.getStyle('textBoxFontSize', specifications, annotation),
+      color: this.getStyle('textBoxColor', specifications, annotation),
+      shadow: this.getStyle('textBoxShadow', specifications, annotation),
+      background: this.getStyle('textBoxBackground', specifications, annotation),
+      lineWidth: this.getStyle('textBoxLinkLineWidth', specifications, annotation),
+      lineDash: this.getStyle('textBoxLinkLineDash', specifications, annotation),
+    };
+  }
+}
@@ -9,6 +9,7 @@ const toolNames = {
  SRCobbAngle: 'SRCobbAngle',
  SRRectangleROI: 'SRRectangleROI',
  SRPlanarFreehandROI: 'SRPlanarFreehandROI',
+  SRSCOORD3DPoint: 'SRSCOORD3DPoint',
 };

 export default toolNames;
@@ -0,0 +1,62 @@
+const SRSCOOR3DProbe = {
+  toAnnotation: measurement => {},
+
+  /**
+   * Maps cornerstone annotation event data to measurement service format.
+   *
+   * @param {Object} cornerstone Cornerstone event data
+   * @return {Measurement} Measurement instance
+   */
+  toMeasurement: (
+    csToolsEventDetail,
+    displaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType,
+    customizationService
+  ) => {
+    const { annotation } = csToolsEventDetail;
+    const { metadata, data, annotationUID } = annotation;
+
+    if (!metadata || !data) {
+      console.warn('Probe tool: Missing metadata or data');
+      return null;
+    }
+
+    const { toolName } = metadata;
+    const { points } = data.handles;
+
+    const displayText = getDisplayText(annotation);
+    return {
+      uid: annotationUID,
+      points,
+      metadata,
+      toolName: metadata.toolName,
+      label: data.label,
+      displayText: displayText,
+      data: data.cachedStats,
+      type: getValueTypeFromToolType?.(toolName) ?? null,
+    };
+  },
+};
+
+function getDisplayText(annotation) {
+  const { data } = annotation;
+
+  if (!data) {
+    return [''];
+  }
+  const { labels } = data;
+
+  const displayText = [];
+
+  for (const label of labels) {
+    // make this generic
+    if (label.label === '33636980076') {
+      displayText.push(`Finding Site: ${label.value}`);
+    }
+  }
+
+  return displayText;
+}
+
+export default SRSCOOR3DProbe;
@@ -1,59 +1,11 @@
 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;
-
-/**
- * Adds a DICOM SR (Structured Report) annotation to the annotation manager.
- * This function processes measurement data from DICOM SR and converts it into
- * a format suitable for display in the Cornerstone3D viewer.
- *
- * @param {Object} params - The parameters object
- * @param {Object} params.measurement - The DICOM SR measurement data containing coordinates, labels, and metadata
- * @param {Array} params.measurement.coords - Array of coordinate objects with GraphicType, ValueType, and other properties
- * @param {string} params.measurement.TrackingUniqueIdentifier - Unique identifier for the measurement
- * @param {string} params.measurement.TrackingIdentifier - Tracking identifier for adapter lookup
- * @param {Array} [params.measurement.labels] - Optional array of label objects
- * @param {string} [params.measurement.displayText] - Optional display text for the annotation
- * @param {Object} [params.measurement.textBox] - Optional text box configuration
- * @param {string|null} [params.imageId] - Optional image ID for the referenced image (defaults to null)
- * @param {number|null} [params.frameNumber] - Optional frame number for multi-frame images (defaults to null)
- * @param {Object} params.displaySet - The display set containing the image
- * @param {string} params.displaySet.displaySetInstanceUID - Unique identifier for the display set
- * @returns {void}
- *
- * @example
- * ```typescript
- * addSRAnnotation({
- *   measurement: {
- *     TrackingUniqueIdentifier: '1.2.3.4.5',
- *     TrackingIdentifier: 'POINT',
- *     coords: [{
- *       GraphicType: 'POINT',
- *       ValueType: 'SCOORD',
- *       // ... other coordinate properties
- *     }],
- *     labels: [{ value: 'Measurement Point' }],
- *     displayText: 'Point measurement'
- *   },
- *   imageId: 'wadouri:file://path/to/image.dcm', // Optional
- *   frameNumber: 0, // Optional
- *   displaySet: { displaySetInstanceUID: '1.2.3.4' }
- * });
- * ```
- */
-export default function addSRAnnotation({ measurement, imageId = null, frameNumber = null, displaySet }) {
-  /** @type {string} The tool name to use for the annotation, defaults to DICOMSRDisplay */
+export default function addSRAnnotation(measurement, imageId, frameNumber) {
  let toolName = toolNames.DICOMSRDisplay;
-  
-  /** 
-   * @type {Object} Renderable data organized by graphic type
-   * Groups coordinate data by GraphicType for efficient rendering
-   */
  const renderableData = measurement.coords.reduce((acc, coordProps) => {
    acc[coordProps.GraphicType] = acc[coordProps.GraphicType] || [];
    acc[coordProps.GraphicType].push(getRenderableData({ ...coordProps, imageId }));
@@ -64,58 +16,32 @@ export default function addSRAnnotation({ measurement, imageId = null, frameNumb
  const { ValueType: valueType, GraphicType: graphicType } = measurement.coords[0];
  const graphicTypePoints = renderableData[graphicType];

-  /**
-   * TODO: Read the tool name from the DICOM SR identification type in the future.
-   */
+  /** TODO: Read the tool name from the DICOM SR identification type in the future. */
  let frameOfReferenceUID = null;
-  let planeRestriction = null;

-  /**
-   * Store the view reference for use in initial navigation
-   */
  if (imageId) {
    const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
    frameOfReferenceUID = imagePlaneModule?.frameOfReferenceUID;
  }

-  /**
-   * Store the view reference for use in initial navigation
-   */
  if (valueType === 'SCOORD3D') {
+    toolName = toolNames.SRSCOORD3DPoint;
+
+    // get the ReferencedFrameOfReferenceUID from the measurement
    frameOfReferenceUID = measurement.coords[0].ReferencedFrameOfReferenceSequence;
-    planeRestriction = {
-      FrameOfReferenceUID: frameOfReferenceUID,
-      point: graphicTypePoints[0][0],
-    };
  }

-  /**
-   * Store the view reference for use in initial navigation
-   */
-  measurement.viewReference = {
-    planeRestriction,
-    FrameOfReferenceUID: frameOfReferenceUID,
-    referencedImageId: imageId,
-  };
-
-  /**
-   * @type {Types.Annotation} The annotation object to be added to the annotation manager
-   * Contains all necessary metadata and data for rendering the DICOM SR measurement
-   */
  const SRAnnotation: Types.Annotation = {
    annotationUID: TrackingUniqueIdentifier,
    highlighted: false,
    isLocked: false,
-    isPreview: toolName === toolNames.DICOMSRDisplay,
    invalidated: false,
    metadata: {
      toolName,
-      planeRestriction,
      valueType,
      graphicType,
      FrameOfReferenceUID: frameOfReferenceUID,
      referencedImageId: imageId,
-      displaySetInstanceUID: displaySet.displaySetInstanceUID,
    },
    data: {
      label: measurement.labels?.[0]?.value || undefined,
@@ -133,11 +59,9 @@ export default function addSRAnnotation({ measurement, imageId = null, frameNumb
  };

  /**
-   * Add the annotation to the annotation state manager.
-   * Note: Using annotation.state.addAnnotation() instead of annotationManager.addAnnotation()
-   * because the latter was not triggering annotation_added events properly.
-   * 
-   * @param {Types.Annotation} SRAnnotation - The annotation to add
+   * const annotationManager = annotation.annotationState.getAnnotationManager();
+   * 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,
@@ -54,11 +51,6 @@ export default function hydrateStructuredReport(
  const disableEditing = customizationService.getCustomization('panelMeasurement.disableEditing');

  const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-  const {
-    StudyInstanceUID: studyUID,
-    SeriesInstanceUID: seriesUID,
-    instance: { SOPInstanceUID: sopUID },
-  } = displaySet;

  // TODO -> We should define a strict versioning somewhere.
  const mappings = measurementService.getSourceMappings(
@@ -72,23 +64,31 @@ export default function hydrateStructuredReport(
    );
  }

-  const instance = DicomMetadataStore.getInstance(studyUID, seriesUID, sopUID);
+  const instance = DicomMetadataStore.getInstance(
+    displaySet.StudyInstanceUID,
+    displaySet.SeriesInstanceUID,
+    displaySet.SOPInstanceUID
+  );

  const sopInstanceUIDToImageId = {};
+  const imageIdsForToolState = {};

  displaySet.measurements.forEach(measurement => {
-    const { ReferencedSOPInstanceUID, imageId, frameNumber = 1 } = measurement;
-    const key = `${ReferencedSOPInstanceUID}:${frameNumber}`;
+    const { ReferencedSOPInstanceUID, imageId, frameNumber } = measurement;

-    if (!sopInstanceUIDToImageId[key]) {
-      sopInstanceUIDToImageId[key] = imageId;
+    if (!sopInstanceUIDToImageId[ReferencedSOPInstanceUID]) {
+      sopInstanceUIDToImageId[ReferencedSOPInstanceUID] = imageId;
+      imageIdsForToolState[ReferencedSOPInstanceUID] = [];
+    }
+    if (!imageIdsForToolState[ReferencedSOPInstanceUID][frameNumber]) {
+      imageIdsForToolState[ReferencedSOPInstanceUID][frameNumber] = imageId;
    }
  });

  // 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
@@ -96,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
  );

@@ -130,8 +131,10 @@ export default function hydrateStructuredReport(
      // dcmjs and Cornerstone3D has structural defect in supporting multi-frame
      // files, and looking up the imageId from sopInstanceUIDToImageId results
      // in the wrong value.
-      const frameNumber = toolData.annotation.data?.frameNumber || 1;
-      const imageId = sopInstanceUIDToImageId[`${toolData.sopInstanceUid}:${frameNumber}`];
+      const frameNumber = (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
+      const imageId =
+        imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
+        sopInstanceUIDToImageId[toolData.sopInstanceUid];

      if (!imageIds.includes(imageId)) {
        imageIds.push(imageId);
@@ -144,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)) {
@@ -160,54 +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 = sopInstanceUIDToImageId[`${toolData.sopInstanceUid}:${frameNumber}`];
-
-    if (!imageId) {
-      return getReferenceData3D(toolData, servicesManager);
-    }
-
-    const instance = metaData.get('instance', imageId);
-    const {
-      FrameOfReferenceUID,
-      // SOPInstanceUID,
-      // SeriesInstanceUID,
-      // StudyInstanceUID,
-    } = instance;
-
-    return {
-      referencedImageId: imageId,
-      FrameOfReferenceUID,
-    };
-  }
-
  Object.keys(hydratableMeasurementsInSR).forEach(annotationType => {
    const toolDataForAnnotationType = hydratableMeasurementsInSR[annotationType];

    toolDataForAnnotationType.forEach(toolData => {
+      // Add the measurement to toolState
+      // dcmjs and Cornerstone3D has structural defect in supporting multi-frame
+      // files, and looking up the imageId from sopInstanceUIDToImageId results
+      // in the wrong value.
+      const frameNumber = (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
+      const imageId =
+        imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
+        sopInstanceUIDToImageId[toolData.sopInstanceUid];
+
      toolData.uid = guid();
-      const 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,
-        predecessorImageId: toolData.predecessorImageId,
        metadata: {
-          ...referenceData,
          toolName: annotationType,
+          referencedImageId: imageId,
+          FrameOfReferenceUID,
        },
      };
-      utilities.updatePlaneRestriction(annotation.data.handles.points, annotation.metadata);

      const source = measurementService.getSource(
        CORNERSTONE_3D_TOOLS_SOURCE_NAME,
@@ -241,7 +225,7 @@ export default function hydrateStructuredReport(
        locking.setAnnotationLocked(newAnnotationUID, true);
      }

-      if (imageId && !imageIds.includes(imageId)) {
+      if (!imageIds.includes(imageId)) {
        imageIds.push(imageId);
      }
    });
@@ -254,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.13.0-beta.14",
+  "version": "3.10.2",
  "description": "OHIF extension for 4D volumes data",
  "author": "OHIF",
  "license": "MIT",
@@ -29,21 +29,21 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.13.0-beta.14",
-    "@ohif/extension-cornerstone": "3.13.0-beta.14",
-    "@ohif/extension-default": "3.13.0-beta.14",
-    "@ohif/i18n": "3.13.0-beta.14",
-    "@ohif/ui": "3.13.0-beta.14",
-    "dcmjs": "0.49.4",
-    "dicom-parser": "1.8.21",
-    "hammerjs": "2.0.8",
-    "prop-types": "15.8.1",
-    "react": "18.3.1"
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
+    "@ohif/ui": "3.10.2",
+    "dcmjs": "*",
+    "dicom-parser": "^1.8.21",
+    "hammerjs": "^2.0.8",
+    "prop-types": "^15.6.2",
+    "react": "^18.3.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/core": "4.15.29",
-    "@cornerstonejs/tools": "4.15.29",
-    "classnames": "2.5.1"
+    "@babel/runtime": "^7.20.13",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
+    "classnames": "^2.3.2"
  }
 }
@@ -1,10 +1,8 @@
+import * as importedActions from './actions';
 import { utilities, Enums } from '@cornerstonejs/tools';
 import { cache } from '@cornerstonejs/core';
-import { utils } from '@ohif/core';

-import * as importedActions from './actions';
-
-const { downloadCsv } = utils;
+const LABELMAP = Enums.SegmentationRepresentations.Labelmap;

 const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
  const services = servicesManager.services;
@@ -39,7 +37,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
      });
      return computedDisplaySets;
    },
-    exportTimeReportCSV: ({ segmentations, summaryStats }) => {
+    exportTimeReportCSV: ({ segmentations, config, options, summaryStats }) => {
      const dynamic4DDisplaySet = actions.getDynamic4DDisplaySet();

      const volumeId = dynamic4DDisplaySet?.displaySetInstanceUID;
@@ -205,7 +203,15 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {

      // Generate filename and trigger download
      const filename = `${instance.PatientID}.csv`;
-      downloadCsv(csvContent, { filename });
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const link = document.createElement('a');
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', filename);
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
    },
    swapDynamicWithComputedDisplaySet: ({ displaySet }) => {
      const computedDisplaySet = displaySet;
@@ -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,8 +19,8 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager, co
    return (
      <>
        <Toolbox
-          buttonSectionId={toolbarService.sections.dynamicToolbox}
-          title="Buttons:Threshold Tools"
+          buttonSectionId="dynamic-toolbox"
+          title="Threshold Tools"
        />
        <PanelSegmentation
          servicesManager={servicesManager}
@@ -5,7 +5,7 @@ function DynamicDataPanel({ servicesManager, commandsManager, tab }: withAppType
  return (
    <>
      <div
-        className="text-foreground flex flex-col"
+        className="flex flex-col text-white"
        data-cy={'dynamic-volume-panel'}
      >
        <PanelGenerateImage
@@ -10,7 +10,7 @@ function WorkflowPanel({ servicesManager }: { servicesManager: ServicesManager }
  return (
    <div
      data-cy={'workflow-panel'}
-      className="bg-popover mb-1 px-3 py-4"
+      className="bg-secondary-dark mb-1 px-3 py-4"
    >
      <div className="mb-1">Workflow</div>
      <div>
@@ -1,13 +1,9 @@
 const base = require('../../jest.config.base.js');
+const pkg = require('./package');

 module.exports = {
  ...base,
-  moduleNameMapper: {
-    ...base.moduleNameMapper,
-    '@ohif/(.*)': '<rootDir>/../../platform/$1/src',
-    '^@cornerstonejs/([^/]+)/(.*)$': '<rootDir>/../../node_modules/@cornerstonejs/$1/dist/esm/$2',
-    '^@cornerstonejs/([^/]+)$': '<rootDir>/../../node_modules/@cornerstonejs/$1/dist/esm',
-  },
+  displayName: pkg.name,
  // rootDir: "../.."
  // testMatch: [
  //   //`<rootDir>/platform/${pack.name}/**/*.spec.js`
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.13.0-beta.14",
+  "version": "3.10.2",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -31,44 +31,41 @@
    "dev:cornerstone": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --progress --config .webpack/webpack.prod.js",
    "build:package-1": "yarn run build",
-    "start": "yarn run dev",
-    "test:unit": "jest --watchAll",
-    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
+    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@cornerstonejs/codec-charls": "1.2.3",
-    "@cornerstonejs/codec-libjpeg-turbo-8bit": "1.2.2",
-    "@cornerstonejs/codec-openjpeg": "1.3.0",
-    "@cornerstonejs/codec-openjph": "2.4.7",
-    "@cornerstonejs/dicom-image-loader": "4.15.29",
-    "@ohif/core": "3.13.0-beta.14",
-    "@ohif/ui": "3.13.0-beta.14",
-    "dcmjs": "0.49.4",
-    "dicom-parser": "1.8.21",
-    "hammerjs": "2.0.8",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-resize-detector": "10.0.1"
+    "@cornerstonejs/codec-charls": "^1.2.3",
+    "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
+    "@cornerstonejs/codec-openjpeg": "^1.2.4",
+    "@cornerstonejs/codec-openjph": "^2.4.5",
+    "@cornerstonejs/dicom-image-loader": "^3.11.6",
+    "@ohif/core": "3.10.2",
+    "@ohif/ui": "3.10.2",
+    "dcmjs": "*",
+    "dicom-parser": "^1.8.21",
+    "hammerjs": "^2.0.8",
+    "prop-types": "^15.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-resize-detector": "^10.0.1"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.15.29",
-    "@cornerstonejs/ai": "4.15.29",
-    "@cornerstonejs/core": "4.15.29",
-    "@cornerstonejs/labelmap-interpolation": "4.15.29",
-    "@cornerstonejs/polymorphic-segmentation": "4.15.29",
-    "@cornerstonejs/tools": "4.15.29",
-    "@icr/polyseg-wasm": "0.4.0",
+    "@babel/runtime": "^7.20.13",
+    "@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": "34.15.1",
-    "html2canvas": "1.4.1",
-    "immutability-helper": "3.1.1",
-    "lodash.compact": "3.0.1",
-    "lodash.debounce": "4.0.8",
-    "lodash.flatten": "4.4.0",
-    "lodash.zip": "4.2.0",
-    "shader-loader": "1.3.1",
-    "worker-loader": "3.0.8"
+    "@kitware/vtk.js": "32.12.0",
+    "html2canvas": "^1.4.1",
+    "lodash.compact": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.flatten": "^4.4.0",
+    "lodash.merge": "^4.6.2",
+    "lodash.zip": "^4.2.0",
+    "shader-loader": "^1.3.1",
+    "worker-loader": "^3.0.8"
  }
 }
@@ -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,17 +1,15 @@
 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, formatDICOMDate } from '@ohif/ui-next';
+import { ViewportOverlay } from '@ohif/ui-next';
 import type { InstanceMetadata } from '@ohif/core/src/types';
-import { formatDICOMTime, formatNumberPrecision } from './utils';
+import { formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
 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,
      });
    };
@@ -51,7 +51,7 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
      <>
        <div className="absolute top-0 left-0 h-full w-full bg-black opacity-50">
          <div className="transparent flex h-full w-full items-center justify-center">
-            <p className="text-highlight text-xl font-light">
+            <p className="text-primary-light text-xl font-light">
              <h4>Error Loading Image</h4>
              <p>An error has occurred.</p>
              <p>{error}</p>
@@ -68,7 +68,7 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
      // interacting with the mouse, since scrolling should propagate to the viewport underneath
      <div className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50">
        <div className="transparent flex h-full w-full items-center justify-center">
-          <p className="text-highlight text-xl font-light">Loading...</p>
+          <p className="text-primary-light text-xl font-light">Loading...</p>
        </div>
      </div>
    );
@@ -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;
 }

@@ -1,7 +1,5 @@
 import moment from 'moment';
-import i18n from 'i18next';
 import { metaData } from '@cornerstonejs/core';
-import { formatDICOMDate } from '@ohif/ui-next';

 /**
 * Checks if value is valid.
@@ -26,6 +24,17 @@ export function formatNumberPrecision(number, precision = 0) {
  }
 }

+/**
+ * Formats DICOM date.
+ *
+ * @param {string} date
+ * @param {string} strFormat
+ * @returns {string} formatted date.
+ */
+export function formatDICOMDate(date, strFormat = 'MMM D, YYYY') {
+  return moment(date, 'YYYYMMDD').format(strFormat);
+}
+
 /**
 *    DICOM Time is stored as HHmmss.SSS, where:
 *      HH 24 hour time:
@@ -62,5 +71,3 @@ export function getCompression(imageId) {

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

-  if (asChild) {
+  if (Boolean(asChild)) {
    return React.cloneElement(props.children, props);
  }

  return (
    <Accordion
      type={grouping.type || 'multiple'}
-      className="text-foreground"
+      className="text-white"
      defaultValue={defaultValue}
    >
      {[...groups.entries()].map(([key, group]) => {
@@ -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';
@@ -0,0 +1,23 @@
+.dicom-upload-drop-area-border-dash {
+  background-image: repeating-linear-gradient(
+      to right,
+      #7bb2ce 0%,
+      #7bb2ce 50%,
+      transparent 50%,
+      transparent 100%
+    ),
+    repeating-linear-gradient(to right, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
+    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
+    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%);
+  background-position:
+    left top,
+    left bottom,
+    left top,
+    right top;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-size:
+    20px 3px,
+    20px 3px,
+    3px 20px,
+    3px 20px;
+}
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DicomFileUploader from '../../utils/DicomFileUploader';
 import DicomUploadProgress from './DicomUploadProgress';
-import { Button } from '@ohif/ui-next';
-// Removed dashed border CSS; using simple 1px solid border with muted foreground color
+import { Button, ButtonEnums } from '@ohif/ui';
+import './DicomUpload.css';

 type DicomUploadProps = {
  dataSource;
@@ -15,8 +15,7 @@ type DicomUploadProps = {
 };

 function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement {
-  const baseClassNames =
-    'min-h-[375px] flex flex-col bg-background select-none rounded-lg overflow-hidden';
+  const baseClassNames = 'min-h-[480px] flex flex-col bg-black select-none';
  const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]);

  const onDrop = useCallback(async acceptedFiles => {
@@ -35,10 +34,9 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
        {({ getRootProps }) => (
          <div
            {...getRootProps()}
-            className="m-5 flex h-full flex-col items-center justify-center rounded-2xl border"
-            style={{ borderColor: 'hsl(var(--muted-foreground) / 0.25)' }}
+            className="dicom-upload-drop-area-border-dash m-5 flex h-full flex-col items-center justify-center"
          >
-            <div className="flex gap-2">
+            <div className="flex gap-3">
              <Dropzone
                onDrop={onDrop}
                noDrag
@@ -46,16 +44,11 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
                {({ getRootProps, getInputProps }) => (
                  <div {...getRootProps()}>
                    <Button
-                      variant="default"
-                      size="lg"
                      disabled={false}
                      onClick={() => {}}
                    >
                      {'Add files'}
-                      <input
-                        {...getInputProps()}
-                        style={{ display: 'none' }}
-                      />
+                      <input {...getInputProps()} />
                    </Button>
                  </div>
                )}
@@ -67,8 +60,7 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
                {({ getRootProps, getInputProps }) => (
                  <div {...getRootProps()}>
                    <Button
-                      variant="secondary"
-                      size="lg"
+                      type={ButtonEnums.type.secondary}
                      disabled={false}
                      onClick={() => {}}
                    >
@@ -77,15 +69,14 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
                        {...getInputProps()}
                        webkitdirectory="true"
                        mozdirectory="true"
-                        style={{ display: 'none' }}
                      />
                    </Button>
                  </div>
                )}
              </Dropzone>
            </div>
-            <div className="text-foreground pt-6 text-base">or drag images or folders here</div>
-            <div className="text-muted-foreground pt-1 text-base">(DICOM files supported)</div>
+            <div className="pt-5">or drag images or folders here</div>
+            <div className="text-aqua-pale pt-3 text-lg">(DICOM files supported)</div>
          </div>
        )}
      </Dropzone>
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { useSystem } from '@ohif/core';
-import { Button } from '@ohif/ui-next';
+import { Button } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 import DicomFileUploader, {
  EVENTS,
@@ -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-muted text-foreground flex h-14 items-center px-1 pb-4 text-lg">
+      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg">
        {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-highlight active:text-muted-foreground 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
@@ -337,11 +332,11 @@ function DicomUploadProgress({

  const getPercentCompleteComponent = (): ReactElement => {
    return (
-      <div className="ohif-scrollbar border-input overflow-y-scroll border-b px-2">
+      <div className="ohif-scrollbar border-secondary-light overflow-y-scroll border-b px-2">
        <div className="min-h-14 flex w-full items-center p-2.5">
          {numFilesCompleted === dicomFileUploaderArr.length ? (
            <>
-              <div className="text-highlight text-xl">
+              <div className="text-primary-light text-xl">
                {numFails > 0
                  ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!`
                  : 'Completed!'}
@@ -359,7 +354,7 @@ function DicomUploadProgress({
                ></ProgressLoadingBar>
              </div>
              <div className="ml-1 flex w-24 items-center">
-                <div className="text-foreground w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
+                <div className="w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
                {getShowFailedOnlyIconComponent()}
              </div>
            </>
@@ -372,7 +367,7 @@ function DicomUploadProgress({
  return (
    <div className="flex grow flex-col">
      {getNumCompletedAndTimeRemainingComponent()}
-      <div className="flex grow flex-col overflow-hidden bg-background text-lg">
+      <div className="flex grow flex-col overflow-hidden bg-black text-lg">
        {getPercentCompleteComponent()}
        <div className="ohif-scrollbar h-1 grow overflow-y-scroll px-2">
          {dicomFileUploaderArr
@@ -56,7 +56,7 @@ const DicomUploadProgressItem = memo(
          return (
            <Icons.ByName
              name="status-tracked"
-              className="text-highlight"
+              className="text-primary-light"
            />
          );
        case UploadStatus.InProgress:
@@ -71,11 +71,11 @@ const DicomUploadProgressItem = memo(
    };

    return (
-      <div className="min-h-14 border-input flex w-full items-center overflow-hidden border-b p-2.5 text-lg">
+      <div className="min-h-14 border-secondary-light flex w-full items-center overflow-hidden border-b p-2.5 text-lg">
        <div className="self-top flex w-0 shrink grow flex-col gap-1">
          <div className="flex gap-4">
            <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
-            <div className="text-foreground overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
              {dicomFileUploader.getFileName()}
            </div>
          </div>
@@ -1,108 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuPortal,
-  DropdownMenuSubContent,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  Icons,
-} from '@ohif/ui-next';
-
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-
-interface ExportSegmentationSubMenuItemProps {
-  segmentationId: string;
-  segmentationRepresentationType: string;
-  allowExport: boolean;
-  actions: {
-    storeSegmentation: (segmentationId: string, modality?: string) => Promise<unknown>;
-    onSegmentationDownloadRTSS: (segmentationId: string) => void;
-    onSegmentationDownload: (segmentationId: string) => void;
-    downloadCSVSegmentationReport: (segmentationId: string) => void;
-  };
-}
-
-export const ExportSegmentationSubMenuItem: React.FC<ExportSegmentationSubMenuItemProps> = ({
-  segmentationId,
-  segmentationRepresentationType,
-  allowExport,
-  actions,
-}) => {
-  const { t } = useTranslation('SegmentationPanel');
-
-  return (
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger className="pl-1">
-        <Icons.Export className="text-foreground" />
-        <span className="pl-2">{t('Download & Export')}</span>
-      </DropdownMenuSubTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent>
-          <DropdownMenuLabel className="flex items-center pl-0">
-            <Icons.Download className="h-5 w-5" />
-            <span className="pl-1">{t('Download')}</span>
-          </DropdownMenuLabel>
-          {segmentationRepresentationType === SegmentationRepresentations.Labelmap && (
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.downloadCSVSegmentationReport(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('CSV Report')}
-            </DropdownMenuItem>
-          )}
-          {segmentationRepresentationType === SegmentationRepresentations.Labelmap && (
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.onSegmentationDownload(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM SEG')}
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem
-            onClick={e => {
-              e.preventDefault();
-              actions.onSegmentationDownloadRTSS(segmentationId);
-            }}
-            disabled={!allowExport}
-          >
-            {t('DICOM RTSS')}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel className="flex items-center pl-0">
-            <Icons.Export className="h-5 w-5" />
-            <span className="pl-1 pt-1">{t('Export')}</span>
-          </DropdownMenuLabel>
-          {segmentationRepresentationType === SegmentationRepresentations.Labelmap && (
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.storeSegmentation(segmentationId, 'SEG');
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM SEG')}
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem
-            onClick={e => {
-              e.preventDefault();
-              actions.storeSegmentation(segmentationId, 'RTSTRUCT');
-            }}
-            disabled={!allowExport}
-          >
-            {t('DICOM RTSS')}
-          </DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-  );
-};
@@ -8,11 +8,9 @@ import {
  DropdownMenuItem,
  Icons,
 } from '@ohif/ui-next';
-import { useTranslation } from 'react-i18next';

 export function MeasumentsMenu(props) {
  const { group, classNames } = props;
-  const { t } = useTranslation('MeasurementTable');
  if (!group.items?.length) {
    console.log('No items to iterate', group.items);
    return null;
@@ -46,7 +44,7 @@ export function MeasumentsMenu(props) {
        className={`h-6 w-6 transition-opacity ${
          isSelected || !isVisible ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'
        }`}
-        aria-label={isVisible ? t('Hide') : t('Show')}
+        aria-label={isVisible ? 'Hide' : 'Show'}
        onClick={e => {
          e.stopPropagation();
          onAction(e, ['jumpToMeasurement', 'toggleVisibilityMeasurement']);
@@ -72,7 +70,7 @@ export function MeasumentsMenu(props) {
        <DropdownMenuContent align="end">
          <DropdownMenuItem onClick={e => onAction(e, 'removeMeasurement')}>
            <Icons.Delete className="text-foreground" />
-            <span className="pl-2">{t('Delete')}</span>
+            <span className="pl-2">Delete</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
@@ -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="text-foreground flex h-6 cursor-default text-sm leading-6"
-        >
-          <div className="bg-popover 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,159 +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';
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-
-/**
- * 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 &&
-    segmentationsWithRepresentations.some(
-      segmentation => segmentation?.representation?.type !== SegmentationRepresentations.Surface
-    );
-
-  // 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 activeSegmentationWithRepresentation = segmentationsWithRepresentations.find(
-        segmentation => segmentation?.representation?.active
-      );
-      const segmentationId = activeSegmentationWithRepresentation.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;
Author	SHA1	Message	Date
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';`