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

chore(version): version.json [skip ci]
fix: e2e playwright tests runnigns (#5070 )
2025-05-26 23:13:44 +00:00 · 2025-05-26 23:13:38 +00:00 · 2025-05-26 19:09:26 -04:00 · 2025-05-26 20:12:50 +00:00 · 2025-05-26 20:12:43 +00:00 · 2025-05-26 16:08:17 -04:00
889 changed files with 20453 additions and 23094 deletions
@@ -339,7 +339,6 @@ jobs:
    resource_class: large
    parallelism: 8
    steps:
-      - install_bun
      - run:
          name: Install System Dependencies
          command: |
@@ -353,12 +352,11 @@ jobs:
          name: Export Display Variable
          command: export DISPLAY=:99
      - cypress/install:
-          install-command: bun install --no-save
-          package-manager: yarn
+          install-command: yarn install --no-save
      - cypress/run-tests:
          cypress-command: |
            npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
-          start-command: bun run test:data && bun run test:e2e:serve
+          start-command: yarn run test:data && yarn run test:e2e:serve

  DOCKER_MULTIARCH_MANIFEST:
    <<: *defaults
@@ -23,8 +23,8 @@ jobs:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies
        run: bun install --frozen-lockfile
-      # - name: Install Playwright browsers
-      #   run: bun x playwright install-deps chromium
+      - name: Install Playwright browsers
+        run: npx playwright install
      - name: Run Playwright tests
        run: |
          export NODE_OPTIONS="--max_old_space_size=10192"
@@ -58,3 +58,5 @@ tests/test-results/
 tests/playwright-report/
 /blob-report/
 /playwright/.cache/
+
+**/.claude/settings.local.json
@@ -109,6 +109,8 @@
    "wado",
    "wadors",
    "wadouri",
-    "workerpool"
+    "workerpool",
+    "Colorbar",
+    "Colorbars"
  ]
 }
@@ -3,6 +3,276 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+
+### Bug Fixes
+
+* e2e playwright tests runnigns ([#5070](https://github.com/OHIF/Viewers/issues/5070)) ([b9ca76e](https://github.com/OHIF/Viewers/commit/b9ca76ea6714726a13bceec73dbddc12280ca5bf))
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+
+### Bug Fixes
+
+* **capture:** Disable or enable the tool group based on the show flag. ([#5069](https://github.com/OHIF/Viewers/issues/5069)) ([ebfa1ff](https://github.com/OHIF/Viewers/commit/ebfa1ff5f22ea5318328722dd9f1929b37f16b0c))
+* **frame-view:** After pan and/or zoom, stack scroll is now synchronized for frame view ([#5067](https://github.com/OHIF/Viewers/issues/5067)) ([1873a84](https://github.com/OHIF/Viewers/commit/1873a8405f6c8d112035d47049582c52f00f640b))
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+
+### Bug Fixes
+
+* **router:** Expose the react router from the worklist too. ([#5062](https://github.com/OHIF/Viewers/issues/5062)) ([14f5f0c](https://github.com/OHIF/Viewers/commit/14f5f0c074738ba251b40c6a8ebd26bc287ceb4e))
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+
+### Bug Fixes
+
+* **context-menu:** Move the reposition logic from the context menu to the dialog component. ([#5060](https://github.com/OHIF/Viewers/issues/5060)) ([cb814e6](https://github.com/OHIF/Viewers/commit/cb814e6a6076847caf46200c49adbac31f3d5236))
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+
+### Bug Fixes
+
+* **cli:** removing missing imports in mode template ([#5049](https://github.com/OHIF/Viewers/issues/5049)) ([dcde841](https://github.com/OHIF/Viewers/commit/dcde8418390f7070d6830ebf6257dc08969e8136))
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+
+### Bug Fixes
+
+* backward compatibility with toolbar service ([#5052](https://github.com/OHIF/Viewers/issues/5052)) ([9b1b501](https://github.com/OHIF/Viewers/commit/9b1b501d83502d13b285050bd5fca102b7f7612c))
+* **segmentation:** segmentation stats calculations were not being done on a subsequent navigation to a mode ([#5046](https://github.com/OHIF/Viewers/issues/5046)) ([c6b2865](https://github.com/OHIF/Viewers/commit/c6b28654b507981d1dc5038b4f8a869ed53470fe))
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+
+### Features
+
+* **viewport:** Added getter for presentation id provider. ([#5053](https://github.com/OHIF/Viewers/issues/5053)) ([338bd86](https://github.com/OHIF/Viewers/commit/338bd865c3bc660bd5b377020977181939002856))
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+
+### Bug Fixes
+
+* Added missing export for LayoutSelector in ui-next ([#5040](https://github.com/OHIF/Viewers/issues/5040)) ([da51e6e](https://github.com/OHIF/Viewers/commit/da51e6e3c185e4d11d50679fd0deaa804b07511c))
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+
+### Bug Fixes
+
+* **NotFoundStudy:** Fixed the viewer not-found page when showStudyList: false ([#5035](https://github.com/OHIF/Viewers/issues/5035)) ([950453f](https://github.com/OHIF/Viewers/commit/950453fd70ed2b5fec51cc9b6d34e94538ed15cd))
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+
+### Bug Fixes
+
+* **DicomWebProxyDataSource:** bug fix to save Segmentation files back to Kheops ([#5028](https://github.com/OHIF/Viewers/issues/5028)) ([349306d](https://github.com/OHIF/Viewers/commit/349306da4013602141fecefd095d95e8dc538c30))
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+
+### Features
+
+* **app:** Decouple colorbar UI from service and enable action menu programatic control ([#5018](https://github.com/OHIF/Viewers/issues/5018)) ([1445e12](https://github.com/OHIF/Viewers/commit/1445e1212415e6e6957fce4a8fc6908aed69a93c))
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+
+### Features
+
+* **thumbnails:** Enhance DICOM Thumbnail Rendering with different strategies ([#5004](https://github.com/OHIF/Viewers/issues/5004)) ([578c393](https://github.com/OHIF/Viewers/commit/578c3939f0271f762d6a1290216dbc4bf59dd88b))
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+
+### Features
+
+* add locale files for Russian language, translated texts in locale json files to Russian language. ([#4984](https://github.com/OHIF/Viewers/issues/4984)) ([c829270](https://github.com/OHIF/Viewers/commit/c829270c80c0899132aff0294b8e7386475dc71c))
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+
+### Features
+
+* **i18n:** add Arabic translations ([#5013](https://github.com/OHIF/Viewers/issues/5013)) ([8218a9d](https://github.com/OHIF/Viewers/commit/8218a9d0346fe9a5473420e26a0b8ab389f4ef58))
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+
+### Features
+
+* improve menu modals customizations ([#5011](https://github.com/OHIF/Viewers/issues/5011)) ([7dbe5e3](https://github.com/OHIF/Viewers/commit/7dbe5e37b06056fdd5262a131417013d112c3d30))
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+
+### Bug Fixes
+
+* **referencelines:** and bring back the notification for worker updates but disallow duplication ([#5005](https://github.com/OHIF/Viewers/issues/5005)) ([98f8187](https://github.com/OHIF/Viewers/commit/98f8187dfeb8aec6eca145da75c855aec0da4e1d))
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+
+### Bug Fixes
+
+* **template:** Update mode template to match current implementation (OHI-1833) ([#4998](https://github.com/OHIF/Viewers/issues/4998)) ([0f39496](https://github.com/OHIF/Viewers/commit/0f394962904808a140221dbae063ca5dcf0df36b))
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)


@@ -3,6 +3,217 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @externals/devDependencies
@@ -1,7 +1,7 @@
 {
  "name": "@externals/devDependencies",
  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "license": "MIT",
  "private": true,
  "engines": {
@@ -21,9 +21,9 @@
  },
  "devDependencies": {
    "@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",
+    "@rsbuild/core": "^1.3.16",
+    "@rsbuild/plugin-node-polyfill": "^1.3.0",
+    "@rsbuild/plugin-react": "^1.3.1",
    "@svgr/webpack": "^8.1.0",
    "@swc/helpers": "^0.5.15",
    "@types/jest": "^27.5.0",
@@ -3,6 +3,214 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @externals/dicom-microscopy-viewer
@@ -1,7 +1,7 @@
 {
  "name": "@externals/dicom-microscopy-viewer",
  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "license": "MIT",
  "dependencies": {
    "dicom-microscopy-viewer": "^0.46.1"
@@ -1 +1 @@
-09ac43f297fa81101d3a3eaa9b5cfef8e01ea214
+b9ca76ea6714726a13bceec73dbddc12280ca5bf
@@ -3,6 +3,229 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+
+### Bug Fixes
+
+* **router:** Expose the react router from the worklist too. ([#5062](https://github.com/OHIF/Viewers/issues/5062)) ([14f5f0c](https://github.com/OHIF/Viewers/commit/14f5f0c074738ba251b40c6a8ebd26bc287ceb4e))
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+
+### Features
+
+* **thumbnails:** Enhance DICOM Thumbnail Rendering with different strategies ([#5004](https://github.com/OHIF/Viewers/issues/5004)) ([578c393](https://github.com/OHIF/Viewers/commit/578c3939f0271f762d6a1290216dbc4bf59dd88b))
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "description": "DICOM Parametric Map read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.15",
-    "@ohif/extension-cornerstone": "3.11.0-beta.15",
-    "@ohif/extension-default": "3.11.0-beta.15",
-    "@ohif/i18n": "3.11.0-beta.15",
+    "@ohif/core": "3.11.0-beta.41",
+    "@ohif/extension-cornerstone": "3.11.0-beta.41",
+    "@ohif/extension-default": "3.11.0-beta.41",
+    "@ohif/i18n": "3.11.0-beta.41",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,8 +46,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.9.5",
-    "@cornerstonejs/core": "^3.9.5",
+    "@cornerstonejs/adapters": "^3.15.6",
+    "@cornerstonejs/core": "^3.15.6",
    "@kitware/vtk.js": "32.12.0",
    "react-color": "^2.19.3"
  }
@@ -1,10 +1,9 @@
-import { utils } from '@ohif/core';
+import { utils, Types as OhifTypes } from '@ohif/core';
+import i18n from '@ohif/i18n';
 import { metaData, cache, utilities as csUtils, volumeLoader } from '@cornerstonejs/core';
 import { adaptersPMAP } from '@cornerstonejs/adapters';
 import { SOPClassHandlerId } from './id';
-import { dicomLoaderService } from '@ohif/extension-cornerstone';
-
-const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+import { dicomLoaderService, VOLUME_LOADER_SCHEME } from '@ohif/extension-cornerstone';
 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.30'];

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

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

-function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
+  const { servicesManager, extensionManager } = params;
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
@@ -1,16 +1,10 @@
 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,
-    extensionManager,
-  } = props;
+  const { displaySets, children, viewportOptions, displaySetOptions, servicesManager } = props;
  const viewportId = viewportOptions.viewportId;
  const { displaySetService, segmentationService, uiNotificationService, customizationService } =
    servicesManager.services;
@@ -59,9 +53,6 @@ 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;
@@ -93,7 +84,7 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
    });

    return (
-      <Component
+      <OHIFCornerstoneViewport
        {...props}
        // Referenced + PMAP displaySets must be passed as parameter in this order
        displaySets={[referencedDisplaySet, pmapDisplaySet]}
@@ -104,15 +95,16 @@ 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
@@ -3,6 +3,220 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.15",
-    "@ohif/extension-cornerstone": "3.11.0-beta.15",
-    "@ohif/extension-default": "3.11.0-beta.15",
-    "@ohif/i18n": "3.11.0-beta.15",
+    "@ohif/core": "3.11.0-beta.41",
+    "@ohif/extension-cornerstone": "3.11.0-beta.41",
+    "@ohif/extension-default": "3.11.0-beta.41",
+    "@ohif/i18n": "3.11.0-beta.41",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -27,7 +27,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
      // it will be in the correct position zoom and pan
      commandsManager.runCommand('updateStoredPositionPresentation', {
        viewportId,
-        displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
+        displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
      });

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

 import { SOPClassHandlerId } from './id';
 import loadRTStruct from './loadRTStruct';
@@ -53,6 +54,7 @@ function _getDisplaySetsFromSeries(
    wadoUriRoot,
    wadoUri,
    isOverlayDisplaySet: true,
+    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('RTSTRUCT')}`,
  };

  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
@@ -94,12 +96,19 @@ function _getDisplaySetsFromSeries(
    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
  }

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

  return [displaySet];
 }

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

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

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

-function _segmentationExistsInCache(
-  rtDisplaySet,
-  segmentationService: AppTypes.SegmentationService
-) {
+function _segmentationExistsInCache() {
  // 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 }) {
+function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
+  const { servicesManager, extensionManager } = params;
+
  return [
    {
      name: 'dicom-rt',
@@ -1,8 +1,4 @@
-const RESPONSE = {
-  NO_NEVER: -1,
-  CANCEL: 0,
-  HYDRATE_SEG: 5,
-};
+import { utils, Types } from '@ohif/extension-cornerstone';

 function promptHydrateRT({
  servicesManager,
@@ -10,74 +6,20 @@ function promptHydrateRT({
  viewportId,
  preHydrateCallbacks,
  hydrateRTDisplaySet,
-}: 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);
-        }
-      },
-    });
+}: {
+  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',
  });
 }

@@ -1,35 +1,27 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { Component, 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 } from '@ohif/extension-cornerstone';
+import {
+  utils,
+  usePositionPresentationStore,
+  OHIFCornerstoneViewport,
+} from '@ohif/extension-cornerstone';

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

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

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

  const viewportId = viewportOptions.viewportId;

@@ -46,30 +38,19 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

  const rtDisplaySet = displaySets[0];

-  const [viewportGrid, viewportGridService] = useViewportGrid();
+  const [{ viewports, activeViewportId }, 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;
  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
    referencedDisplaySetInstanceUID
@@ -80,100 +61,31 @@ 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,
-      preHydrateCallbacks: [storePresentationState],
-      hydrateRTDisplaySet,
-    }).then(isHydrated => {
-      if (isHydrated) {
-        setIsHydrated(true);
-      }
+      hydrateRTDisplaySet: async () => {
+        return commandsManager.runCommand('hydrateSecondaryDisplaySet', {
+          displaySet: rtDisplaySet,
+          viewportId,
+        });
+      },
    });
-  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading]);
+  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading, commandsManager, activeViewportId]);

  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 => {
@@ -193,14 +105,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
            viewPresentation: {},
          });
        }
-
-        if (evt.overlappingSegments) {
-          uiNotificationService.show({
-            title: 'Overlapping Segments',
-            message: 'Overlapping segments detected which is not currently supported',
-            type: 'warning',
-          });
-        }
      }
    );

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

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

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

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

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

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

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

-  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 (
@@ -313,43 +204,6 @@ 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">
@@ -1,59 +0,0 @@
-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 />}
-    </>
-  );
-}
@@ -3,6 +3,232 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+
+### Bug Fixes
+
+* **router:** Expose the react router from the worklist too. ([#5062](https://github.com/OHIF/Viewers/issues/5062)) ([14f5f0c](https://github.com/OHIF/Viewers/commit/14f5f0c074738ba251b40c6a8ebd26bc287ceb4e))
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+
+### Bug Fixes
+
+* **DicomWebProxyDataSource:** bug fix to save Segmentation files back to Kheops ([#5028](https://github.com/OHIF/Viewers/issues/5028)) ([349306d](https://github.com/OHIF/Viewers/commit/349306da4013602141fecefd095d95e8dc538c30))
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+
+### Features
+
+* **thumbnails:** Enhance DICOM Thumbnail Rendering with different strategies ([#5004](https://github.com/OHIF/Viewers/issues/5004)) ([578c393](https://github.com/OHIF/Viewers/commit/578c3939f0271f762d6a1290216dbc4bf59dd88b))
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.15",
-    "@ohif/extension-cornerstone": "3.11.0-beta.15",
-    "@ohif/extension-default": "3.11.0-beta.15",
-    "@ohif/i18n": "3.11.0-beta.15",
+    "@ohif/core": "3.11.0-beta.41",
+    "@ohif/extension-cornerstone": "3.11.0-beta.41",
+    "@ohif/extension-default": "3.11.0-beta.41",
+    "@ohif/i18n": "3.11.0-beta.41",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,8 +46,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.9.5",
-    "@cornerstonejs/core": "^3.9.5",
+    "@cornerstonejs/adapters": "^3.15.6",
+    "@cornerstonejs/core": "^3.15.6",
    "@kitware/vtk.js": "32.12.0",
    "react-color": "^2.19.3"
  }
@@ -220,7 +220,7 @@ const commandsModule = ({
      }

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

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

          const { dataset: naturalizedReport } = generatedData;

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

          // add the information for where we stored it to the instance as well
@@ -1,5 +1,6 @@
-import { utils } from '@ohif/core';
-import { metaData, triggerEvent, eventTarget } from '@cornerstonejs/core';
+import { utils, Types as OhifTypes } from '@ohif/core';
+import i18n from '@ohif/i18n';
+import { metaData, eventTarget } from '@cornerstonejs/core';
 import { CONSTANTS, segmentation as cstSegmentation } from '@cornerstonejs/tools';
 import { adaptersSEG, Enums } from '@cornerstonejs/adapters';

@@ -57,6 +58,7 @@ function _getDisplaySetsFromSeries(
    wadoUriRoot,
    wadoUri,
    isOverlayDisplaySet: true,
+    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SEG')}`,
  };

  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
@@ -232,7 +234,8 @@ function _segmentationExists(segDisplaySet) {
  return cstSegmentation.state.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }

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

 function promptHydrateSEG({
  servicesManager,
@@ -10,75 +6,20 @@ function promptHydrateSEG({
  viewportId,
  preHydrateCallbacks,
  hydrateCallback,
-}: 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);
-        }
-      },
-    });
+}: {
+  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',
  });
 }

@@ -1,36 +1,24 @@
 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 _getStatusComponent from './_getStatusComponent';
-import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
+import { usePositionPresentationStore, OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';
 import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-import { utils } from '@ohif/extension-cornerstone';
+import { useSystem } from '@ohif/core/src/contextProviders/SystemProvider';

 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';

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

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

  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
    'ui.loadingIndicatorTotalPercent'
@@ -47,7 +35,6 @@ 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
@@ -55,9 +42,7 @@ 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,
@@ -82,36 +67,10 @@ 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 (
-      <Component
+      <OHIFCornerstoneViewport
        {...props}
        displaySets={[segDisplaySet]}
        viewportOptions={{
@@ -123,66 +82,35 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
        }}
        onElementEnabled={evt => {
          props.onElementEnabled?.(evt);
-          onElementEnabled(evt);
        }}
-        onElementDisabled={onElementDisabled}
-      ></Component>
+      />
    );
-  }, [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]);
+  }, [viewportId, segDisplaySet, toolGroupId, props, viewportOptions]);

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

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

  useEffect(() => {
    // on new seg display set, remove all segmentations from all viewports
@@ -283,54 +211,6 @@ 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;

@@ -1,59 +0,0 @@
-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 />}
-    </>
-  );
-}
@@ -3,6 +3,229 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+
+### Bug Fixes
+
+* **router:** Expose the react router from the worklist too. ([#5062](https://github.com/OHIF/Viewers/issues/5062)) ([14f5f0c](https://github.com/OHIF/Viewers/commit/14f5f0c074738ba251b40c6a8ebd26bc287ceb4e))
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+
+### Features
+
+* **thumbnails:** Enhance DICOM Thumbnail Rendering with different strategies ([#5004](https://github.com/OHIF/Viewers/issues/5004)) ([578c393](https://github.com/OHIF/Viewers/commit/578c3939f0271f762d6a1290216dbc4bf59dd88b))
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -34,10 +34,10 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.15",
-    "@ohif/extension-cornerstone": "3.11.0-beta.15",
-    "@ohif/extension-measurement-tracking": "3.11.0-beta.15",
-    "@ohif/ui": "3.11.0-beta.15",
+    "@ohif/core": "3.11.0-beta.41",
+    "@ohif/extension-cornerstone": "3.11.0-beta.41",
+    "@ohif/extension-measurement-tracking": "3.11.0-beta.41",
+    "@ohif/ui": "3.11.0-beta.41",
    "dcmjs": "*",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.9.5",
-    "@cornerstonejs/core": "^3.9.5",
-    "@cornerstonejs/tools": "^3.9.5",
+    "@cornerstonejs/adapters": "^3.15.6",
+    "@cornerstonejs/core": "^3.15.6",
+    "@cornerstonejs/tools": "^3.15.6",
    "classnames": "^2.3.2"
  }
 }
@@ -160,36 +160,18 @@ 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.
     */
-    loadSRMeasurements: ({ displaySetInstanceUID }) => {
-      const { SeriesInstanceUIDs } = hydrateStructuredReport(
+    hydrateStructuredReport: ({ displaySetInstanceUID }) => {
+      return 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: {
-      commandFn: actions.downloadReport,
-    },
-    storeMeasurements: {
-      commandFn: actions.storeMeasurements,
-    },
-    loadSRMeasurements: {
-      commandFn: actions.loadSRMeasurements,
-    },
+    downloadReport: actions.downloadReport,
+    storeMeasurements: actions.storeMeasurements,
+    hydrateStructuredReport: actions.hydrateStructuredReport,
  };

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

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

 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';

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

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

  const viewportId = viewportOptions.viewportId;

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

  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;
@@ -105,10 +75,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
        console.warn('More than one SOPClassUID in the same series is not yet supported.');
      }

-      // if (!srDisplaySet.measurements || !srDisplaySet.measurements.length) {
-      //   return;
-      // }
-
      _getViewportReferencedDisplaySetData(
        srDisplaySet,
        newMeasurementSelected,
@@ -140,10 +106,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
      return null;
    }

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

@@ -152,7 +114,7 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
    }

    return (
-      <Component
+      <OHIFCornerstoneViewport
        {...props}
        // should be passed second since we don't want SR displaySet to
        // override the activeImageDisplaySetData
@@ -176,27 +138,10 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          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
   */
@@ -231,8 +176,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
      if (!srDisplaySet.isLoaded) {
        await srDisplaySet.load();
      }
-      const numMeasurements = srDisplaySet.measurements.length;
-      setMeasurementCount(numMeasurements);
      updateViewport(measurementSelected);
    };
    loadSR();
@@ -255,42 +198,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
    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;

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

 async function _getViewportReferencedDisplaySetData(
@@ -372,130 +277,4 @@ async function _getViewportReferencedDisplaySetData(
  return { referencedDisplaySetMetadata, referencedDisplaySet };
 }

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

@@ -122,6 +123,7 @@ function _getDisplaySetsFromSeries(
    sopClassUids,
    instance,
    addInstances,
+    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SR')}`,
  };

  displaySet.load = () => _load(displaySet, servicesManager, extensionManager);
@@ -354,7 +356,8 @@ function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frame
 * @param {Object} options.extensionManager - The extension manager.
 * @returns {Array} An array containing the SOP class handler module.
 */
-function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
+  const { servicesManager, extensionManager } = params;
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
@@ -1,11 +1,7 @@
-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, toolbarService } = servicesManager.services;
+  const { displaySetService } = servicesManager.services;
  const displaySetCache = displaySetService.getDisplaySetCache();

  const srDisplaySets = [...displaySetCache.values()].filter(
@@ -16,24 +12,4 @@ 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']);
 }
@@ -63,5 +63,4 @@ export default function addSRAnnotation(measurement, imageId, frameNumber) {
   * was not triggering annotation_added events.
   */
  annotation.state.addAnnotation(SRAnnotation);
-  console.debug('Adding SR annotation:', SRAnnotation);
 }
@@ -3,6 +3,232 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+
+### Bug Fixes
+
+* **router:** Expose the react router from the worklist too. ([#5062](https://github.com/OHIF/Viewers/issues/5062)) ([14f5f0c](https://github.com/OHIF/Viewers/commit/14f5f0c074738ba251b40c6a8ebd26bc287ceb4e))
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+
+### Bug Fixes
+
+* backward compatibility with toolbar service ([#5052](https://github.com/OHIF/Viewers/issues/5052)) ([9b1b501](https://github.com/OHIF/Viewers/commit/9b1b501d83502d13b285050bd5fca102b7f7612c))
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+
+### Features
+
+* **thumbnails:** Enhance DICOM Thumbnail Rendering with different strategies ([#5004](https://github.com/OHIF/Viewers/issues/5004)) ([578c393](https://github.com/OHIF/Viewers/commit/578c3939f0271f762d6a1290216dbc4bf59dd88b))
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "description": "OHIF extension for 4D volumes data",
  "author": "OHIF",
  "license": "MIT",
@@ -29,11 +29,11 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.11.0-beta.15",
-    "@ohif/extension-cornerstone": "3.11.0-beta.15",
-    "@ohif/extension-default": "3.11.0-beta.15",
-    "@ohif/i18n": "3.11.0-beta.15",
-    "@ohif/ui": "3.11.0-beta.15",
+    "@ohif/core": "3.11.0-beta.41",
+    "@ohif/extension-cornerstone": "3.11.0-beta.41",
+    "@ohif/extension-default": "3.11.0-beta.41",
+    "@ohif/i18n": "3.11.0-beta.41",
+    "@ohif/ui": "3.11.0-beta.41",
    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -42,8 +42,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^3.9.5",
-    "@cornerstonejs/tools": "^3.9.5",
+    "@cornerstonejs/core": "^3.15.6",
+    "@cornerstonejs/tools": "^3.15.6",
    "classnames": "^2.3.2"
  }
 }
@@ -5,6 +5,8 @@ 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
@@ -19,7 +21,7 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager, co
    return (
      <>
        <Toolbox
-          buttonSectionId="dynamic-toolbox"
+          buttonSectionId={toolbarService.sections.dynamicToolbox}
          title="Threshold Tools"
        />
        <PanelSegmentation
@@ -3,6 +3,243 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [3.11.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.40...v3.11.0-beta.41) (2025-05-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.39...v3.11.0-beta.40) (2025-05-26)
+
+
+### Bug Fixes
+
+* **capture:** Disable or enable the tool group based on the show flag. ([#5069](https://github.com/OHIF/Viewers/issues/5069)) ([ebfa1ff](https://github.com/OHIF/Viewers/commit/ebfa1ff5f22ea5318328722dd9f1929b37f16b0c))
+* **frame-view:** After pan and/or zoom, stack scroll is now synchronized for frame view ([#5067](https://github.com/OHIF/Viewers/issues/5067)) ([1873a84](https://github.com/OHIF/Viewers/commit/1873a8405f6c8d112035d47049582c52f00f640b))
+
+
+
+
+
+# [3.11.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.38...v3.11.0-beta.39) (2025-05-26)
+
+
+### Bug Fixes
+
+* **router:** Expose the react router from the worklist too. ([#5062](https://github.com/OHIF/Viewers/issues/5062)) ([14f5f0c](https://github.com/OHIF/Viewers/commit/14f5f0c074738ba251b40c6a8ebd26bc287ceb4e))
+
+
+
+
+
+# [3.11.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.37...v3.11.0-beta.38) (2025-05-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.36...v3.11.0-beta.37) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.35...v3.11.0-beta.36) (2025-05-16)
+
+
+### Bug Fixes
+
+* backward compatibility with toolbar service ([#5052](https://github.com/OHIF/Viewers/issues/5052)) ([9b1b501](https://github.com/OHIF/Viewers/commit/9b1b501d83502d13b285050bd5fca102b7f7612c))
+* **segmentation:** segmentation stats calculations were not being done on a subsequent navigation to a mode ([#5046](https://github.com/OHIF/Viewers/issues/5046)) ([c6b2865](https://github.com/OHIF/Viewers/commit/c6b28654b507981d1dc5038b4f8a869ed53470fe))
+
+
+
+
+
+# [3.11.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.34...v3.11.0-beta.35) (2025-05-16)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.33...v3.11.0-beta.34) (2025-05-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.32...v3.11.0-beta.33) (2025-05-15)
+
+
+### Features
+
+* **actions:** simplify action corner api through the toolbarService ([#5033](https://github.com/OHIF/Viewers/issues/5033)) ([7c15bb8](https://github.com/OHIF/Viewers/commit/7c15bb8901001eefedc72498176ac24f6662bfab))
+
+
+
+
+
+# [3.11.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.31...v3.11.0-beta.32) (2025-05-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.30...v3.11.0-beta.31) (2025-05-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.29...v3.11.0-beta.30) (2025-05-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.28...v3.11.0-beta.29) (2025-05-08)
+
+
+### Features
+
+* **app:** Decouple colorbar UI from service and enable action menu programatic control ([#5018](https://github.com/OHIF/Viewers/issues/5018)) ([1445e12](https://github.com/OHIF/Viewers/commit/1445e1212415e6e6957fce4a8fc6908aed69a93c))
+
+
+
+
+
+# [3.11.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.27...v3.11.0-beta.28) (2025-05-08)
+
+
+### Features
+
+* **thumbnails:** Enhance DICOM Thumbnail Rendering with different strategies ([#5004](https://github.com/OHIF/Viewers/issues/5004)) ([578c393](https://github.com/OHIF/Viewers/commit/578c3939f0271f762d6a1290216dbc4bf59dd88b))
+
+
+
+
+
+# [3.11.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.26...v3.11.0-beta.27) (2025-05-07)
+
+
+### Bug Fixes
+
+* **orientationMarker:** MPR orientation change should get reflected too ([#5020](https://github.com/OHIF/Viewers/issues/5020)) ([a5ea3e1](https://github.com/OHIF/Viewers/commit/a5ea3e15c70f6b8f2d16257f5f5c774c921d82cb))
+
+
+
+
+
+# [3.11.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.25...v3.11.0-beta.26) (2025-05-07)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.24...v3.11.0-beta.25) (2025-05-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.23...v3.11.0-beta.24) (2025-05-05)
+
+
+### Features
+
+* **data overlay:** add foreground background control plus orientation change in the UI and add RTDOSE support ([#5007](https://github.com/OHIF/Viewers/issues/5007)) ([cd4e640](https://github.com/OHIF/Viewers/commit/cd4e6408bc2964e5ee27427cdc328751eaf4d088))
+
+
+
+
+
+# [3.11.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.22...v3.11.0-beta.23) (2025-05-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.21...v3.11.0-beta.22) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.20...v3.11.0-beta.21) (2025-05-02)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.19...v3.11.0-beta.20) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.18...v3.11.0-beta.19) (2025-05-01)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.17...v3.11.0-beta.18) (2025-04-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.11.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.16...v3.11.0-beta.17) (2025-04-29)
+
+
+### Bug Fixes
+
+* **referencelines:** and bring back the notification for worker updates but disallow duplication ([#5005](https://github.com/OHIF/Viewers/issues/5005)) ([98f8187](https://github.com/OHIF/Viewers/commit/98f8187dfeb8aec6eca145da75c855aec0da4e1d))
+
+
+
+
+
+# [3.11.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.15...v3.11.0-beta.16) (2025-04-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
 # [3.11.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.11.0-beta.14...v3.11.0-beta.15) (2025-04-22)

 **Note:** Version bump only for package @ohif/extension-cornerstone
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.11.0-beta.15",
+  "version": "3.11.0-beta.41",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -38,9 +38,9 @@
    "@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.9.5",
-    "@ohif/core": "3.11.0-beta.15",
-    "@ohif/ui": "3.11.0-beta.15",
+    "@cornerstonejs/dicom-image-loader": "^3.15.6",
+    "@ohif/core": "3.11.0-beta.41",
+    "@ohif/ui": "3.11.0-beta.41",
    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -51,12 +51,12 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.9.5",
-    "@cornerstonejs/ai": "^3.9.5",
-    "@cornerstonejs/core": "^3.9.5",
-    "@cornerstonejs/labelmap-interpolation": "^3.9.5",
-    "@cornerstonejs/polymorphic-segmentation": "^3.9.5",
-    "@cornerstonejs/tools": "^3.9.5",
+    "@cornerstonejs/adapters": "^3.15.6",
+    "@cornerstonejs/ai": "^3.15.6",
+    "@cornerstonejs/core": "^3.15.6",
+    "@cornerstonejs/labelmap-interpolation": "^3.15.6",
+    "@cornerstonejs/polymorphic-segmentation": "^3.15.6",
+    "@cornerstonejs/tools": "^3.15.6",
    "@itk-wasm/morphological-contour-interpolation": "1.1.0",
    "@kitware/vtk.js": "32.12.0",
    "html2canvas": "^1.4.1",
@@ -1,9 +1,7 @@
 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 } from '@ohif/core';
-import { AllInOneMenu } from '@ohif/ui-next';
+import { MeasurementService, useViewportRef } from '@ohif/core';
 import { useViewportDialog } from '@ohif/ui-next';
 import type { Types as csTypes } from '@cornerstonejs/core';

@@ -15,8 +13,7 @@ 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 ViewportColorbarsContainer from '../components/ViewportColorbar';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
@@ -24,6 +21,9 @@ 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(
@@ -41,7 +41,6 @@ const OHIFCornerstoneViewport = React.memo(
      viewportOptions,
      displaySetOptions,
      servicesManager,
-      commandsManager,
      onElementEnabled,
      // eslint-disable-next-line react/prop-types
      onElementDisabled,
@@ -83,6 +82,7 @@ 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,
@@ -92,7 +92,6 @@ const OHIFCornerstoneViewport = React.memo(
      cornerstoneViewportService,
      segmentationService,
      cornerstoneCacheService,
-      viewportActionCornersService,
      customizationService,
      measurementService,
    } = servicesManager.services;
@@ -105,12 +104,44 @@ const OHIFCornerstoneViewport = React.memo(
    }, [elementRef]);

    // useCallback for onResize
-    const onResize = useCallback(() => {
-      if (elementRef.current) {
-        cornerstoneViewportService.resize();
-        setImageScrollBarHeight();
+    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;
      }
-    }, [elementRef]);
+
+      const resizeObserver = new ResizeObserver(onResize);
+      resizeObserver.observe(element);
+
+      // Cleanup function
+      return () => {
+        resizeObserver.unobserve(element);
+        resizeObserver.disconnect();
+      };
+    }, [onResize]);

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

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

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

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

        eventTarget.removeEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
      };
@@ -306,54 +330,6 @@ const OHIFCornerstoneViewport = React.memo(
      };
    }, [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 (
@@ -364,9 +340,10 @@ 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
@@ -516,22 +493,18 @@ 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;
  }

@@ -539,12 +512,10 @@ 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;
  }

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

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

@@ -565,13 +535,11 @@ 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;
    }

@@ -579,7 +547,6 @@ 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;
        }
      }
@@ -10,6 +10,7 @@ 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;
@@ -67,6 +68,7 @@ function CustomizableViewportOverlay({
    servicesManager.services;
  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
  const [scale, setScale] = useState(1);
+  const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
  const { imageIndex } = imageSliceData;

  // Historical usage defined the overlays as separate items due to lack of
@@ -170,6 +172,7 @@ function CustomizableViewportOverlay({
        viewportId,
        servicesManager,
        customization: item,
+        isLight,
        formatters: {
          formatPN,
          formatDate: formatDICOMDate,
@@ -219,6 +222,7 @@ function CustomizableViewportOverlay({
        instanceNumber,
        viewportId,
        toolGroupService,
+        isLight,
      };

      return (
@@ -241,6 +245,8 @@ 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'}
    />
  );
 }
@@ -375,6 +381,7 @@ function OverlayItem(props) {

 /**
 * Window Level / Center Overlay item
+ * //
 */
 function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
  const { windowWidth, windowCenter } = voi;
@@ -387,9 +394,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.67]">W:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.70]">W:</span>
      <span className="mr-2.5 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-0.5 shrink-0 opacity-[0.67]">L:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.70]">L:</span>
      <span className="shrink-0">{windowCenter.toFixed(0)}</span>
    </div>
  );
@@ -404,7 +411,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.67]">Zoom:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.70]">Zoom:</span>
      <span>{scale.toFixed(2)}x</span>
    </div>
  );
@@ -428,7 +435,7 @@ function InstanceNumberOverlayItem({
      <span>
        {instanceNumber !== undefined && instanceNumber !== null ? (
          <>
-            <span className="mr-0.5 shrink-0 opacity-[0.67]">I:</span>
+            <span className="mr-0.5 shrink-0 opacity-[0.70]">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_VIEWPORT_SCROLL) ||
+      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_NEW_IMAGE) ||
      (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 } = event.detail;
+      const { imageIndex, newImageIdIndex = imageIndex, imageIdIndex } = event.detail;
      const numberOfSlices = viewport.getNumberOfSlices();
      // find the index of imageId in the imageIds
      setImageSliceData({
-        imageIndex: newImageIdIndex,
+        imageIndex: newImageIdIndex ?? imageIdIndex,
        numberOfSlices,
      });
    };
@@ -11,18 +11,22 @@
 .ViewportOrientationMarkers .top-mid {
  top: 0.38rem;
  left: 50%;
+  transform: translateX(-50%);
 }
 .ViewportOrientationMarkers .left-mid {
-  top: 47%;
+  top: 50%;
  left: 0.38rem;
+  transform: translateY(-50%);
 }
 .ViewportOrientationMarkers .right-mid {
-  top: 47%;
+  top: 50%;
  left: calc(100% - var(--marker-width) - var(--scrollbar-width));
+  transform: translateY(-50%);
 }
 .ViewportOrientationMarkers .bottom-mid {
  top: calc(100% - var(--marker-height) - 0.6rem);
-  left: 47%;
+  left: 50%;
+  transform: translateX(-50%);
 }
 .ViewportOrientationMarkers .right-mid .orientation-marker-value {
  display: flex;
@@ -1,11 +1,17 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { metaData, Enums, Types, getEnabledElement } from '@cornerstonejs/core';
+import {
+  metaData,
+  Enums,
+  Types,
+  getEnabledElement,
+  utilities as coreUtilities,
+} 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({
@@ -20,8 +26,34 @@ function ViewportOrientationMarkers({
  const [rotation, setRotation] = useState(0);
  const [flipHorizontal, setFlipHorizontal] = useState(false);
  const [flipVertical, setFlipVertical] = useState(false);
+  const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
  const { cornerstoneViewportService } = servicesManager.services;

+  // Store initial viewUp and viewRight for volume viewports
+  const initialVolumeOrientationRef = useRef<{
+    initialViewUp: number[] | null;
+    initialViewRight: number[] | null;
+  }>({
+    initialViewUp: null,
+    initialViewRight: null,
+  });
+
+  useEffect(() => {
+    initialVolumeOrientationRef.current.initialViewUp = null;
+    initialVolumeOrientationRef.current.initialViewRight = null;
+
+    if (viewportData?.viewportType !== 'stack' && element && getEnabledElement(element)) {
+      const { viewport } = getEnabledElement(element);
+      const { viewUp, viewPlaneNormal } = viewport.getCamera();
+
+      const viewRight = vec3.create();
+      vec3.cross(viewRight, viewUp, viewPlaneNormal);
+
+      initialVolumeOrientationRef.current.initialViewUp = [...viewUp];
+      initialVolumeOrientationRef.current.initialViewRight = [...viewRight];
+    }
+  }, [element, viewportData]);
+
  useEffect(() => {
    const cameraModifiedListener = (evt: Types.EventTypes.CameraModifiedEvent) => {
      const { previousCamera, camera } = evt.detail;
@@ -79,14 +111,21 @@ function ViewportOrientationMarkers({
        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;
+      if (
+        initialVolumeOrientationRef.current.initialViewUp &&
+        initialVolumeOrientationRef.current.initialViewRight
+      ) {
+        // Use initial orientation values for consistency, even as the camera changes
+        columnCosines = [
+          -initialVolumeOrientationRef.current.initialViewUp[0],
+          -initialVolumeOrientationRef.current.initialViewUp[1],
+          -initialVolumeOrientationRef.current.initialViewUp[2],
+        ];
+        rowCosines = initialVolumeOrientationRef.current.initialViewRight;
+      } else {
+        console.warn('ViewportOrientationMarkers::No initial orientation values');
+        return '';
+      }
    }

    if (
@@ -119,7 +158,8 @@ function ViewportOrientationMarkers({
        className={classNames(
          'overlay-text',
          `${m}-mid orientation-marker`,
-          'text-highlight/65',
+          isLight ? 'text-neutral-dark/70' : 'text-neutral-light/70',
+          isLight ? 'shadow-light' : 'shadow-dark',
          'text-base',
          'leading-5'
        )}
@@ -136,6 +176,7 @@ function ViewportOrientationMarkers({
    flipHorizontal,
    orientationMarkers,
    element,
+    isLight,
  ]);

  return <div className="ViewportOrientationMarkers select-none">{markers}</div>;
@@ -3,6 +3,7 @@ import {
  StackViewport,
  VolumeViewport,
  utilities as csUtils,
+  Enums as CoreEnums,
  Types as CoreTypes,
  BaseVolumeViewport,
 } from '@cornerstonejs/core';
@@ -36,6 +37,7 @@ import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownload
 import { updateSegmentBidirectionalStats } from './utils/updateSegmentationStats';
 import { generateSegmentationCSVReport } from './utils/generateSegmentationCSVReport';
 import { getUpdatedViewportsForSegmentation } from './utils/hydrationUtils';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';

 const { DefaultHistoryMemo } = csUtils.HistoryMemo;
 const toggleSyncFunctions = {
@@ -126,6 +128,68 @@ function commandsModule({
  }

  const actions = {
+    hydrateSecondaryDisplaySet: async ({ displaySet, viewportId }) => {
+      if (!displaySet) {
+        return;
+      }
+
+      if (displaySet.isOverlayDisplaySet) {
+        // update the previously stored segmentationPresentation with the new viewportId
+        // presentation so that when we put the referencedDisplaySet back in the viewport
+        // it will have the correct segmentation representation hydrated
+        commandsManager.runCommand('updateStoredSegmentationPresentation', {
+          displaySet,
+          type:
+            displaySet.Modality === 'SEG'
+              ? SegmentationRepresentations.Labelmap
+              : SegmentationRepresentations.Contour,
+        });
+      }
+
+      const referencedDisplaySetInstanceUID = displaySet.referencedDisplaySetInstanceUID;
+
+      const storePositionPresentation = refDisplaySet => {
+        // update the previously stored positionPresentation with the new viewportId
+        // presentation so that when we put the referencedDisplaySet back in the viewport
+        // it will be in the correct position zoom and pan
+        commandsManager.runCommand('updateStoredPositionPresentation', {
+          viewportId,
+          displaySetInstanceUIDs: [refDisplaySet.displaySetInstanceUID],
+        });
+      };
+
+      if (displaySet.Modality === 'SEG' || displaySet.Modality === 'RTSTRUCT') {
+        const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+          referencedDisplaySetInstanceUID
+        );
+        storePositionPresentation(referencedDisplaySet);
+        return commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+          viewportId,
+          displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
+        });
+      } else if (displaySet.Modality === 'SR') {
+        const results = commandsManager.runCommand('hydrateStructuredReport', {
+          displaySetInstanceUID: displaySet.displaySetInstanceUID,
+        });
+        const { SeriesInstanceUIDs } = results;
+        const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+          SeriesInstanceUIDs[0]
+        );
+        referencedDisplaySets.forEach(storePositionPresentation);
+
+        if (referencedDisplaySets.length) {
+          actions.setDisplaySetsForViewports({
+            viewportsToUpdate: [
+              {
+                viewportId: viewportGridService.getActiveViewportId(),
+                displaySetInstanceUIDs: [referencedDisplaySets[0].displaySetInstanceUID],
+              },
+            ],
+          });
+        }
+        return results;
+      }
+    },
    runSegmentBidirectional: async ({ segmentationId, segmentIndex } = {}) => {
      // Get active segmentation if not specified
      const targetSegmentation =
@@ -248,7 +312,7 @@ function commandsModule({
    },
    updateStoredPositionPresentation: ({
      viewportId,
-      displaySetInstanceUID,
+      displaySetInstanceUIDs,
      referencedImageId,
      options,
    }) => {
@@ -256,11 +320,24 @@ function commandsModule({
      const { positionPresentationStore, setPositionPresentation, getPositionPresentationId } =
        usePositionPresentationStore.getState();

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

      // Create presentation data with referencedImageId and options if provided
      const presentationData = referencedImageId
@@ -282,7 +359,7 @@ function commandsModule({
      // so we need to grab the positionPresentationId directly from the store,
      // Todo: this is really hacky, we should have a better way for this
      const positionPresentationId = getPositionPresentationId({
-        displaySetInstanceUIDs: [displaySetInstanceUID],
+        displaySetInstanceUIDs,
        viewportId,
      });

@@ -562,10 +639,20 @@ function commandsModule({
      viewports.forEach((_, index) => cineService.setCine({ id: index, isPlaying: false }));
    },

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

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

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

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

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

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

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

@@ -1019,7 +1131,7 @@ function commandsModule({

      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);

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

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

      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

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

+      // Also add the segmentation representation to the viewport
      await segmentationService.addSegmentationRepresentation(viewportId, {
        segmentationId,
        type: Enums.SegmentationRepresentations.Labelmap,
@@ -1734,13 +1851,37 @@ function commandsModule({
        displaySetInstanceUIDs,
      });

-      updatedViewports.forEach(viewport => {
-        viewportGridService.setDisplaySetsForViewport({
+      actions.setDisplaySetsForViewports({
+        viewportsToUpdate: updatedViewports.map(viewport => ({
          viewportId: viewport.viewportId,
          displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
-        });
+        })),
      });
    },
+    setViewportOrientation: ({ viewportId, orientation }) => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+      if (!viewport || viewport.type !== CoreEnums.ViewportType.ORTHOGRAPHIC) {
+        console.warn('Orientation can only be set on volume viewports');
+        return;
+      }
+
+      // Get display sets for this viewport to verify at least one is reconstructable
+      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+      const displaySets = displaySetUIDs.map(uid => displaySetService.getDisplaySetByUID(uid));
+
+      if (!displaySets.some(ds => ds.isReconstructable)) {
+        console.warn('Cannot change orientation: No reconstructable display sets in viewport');
+        return;
+      }
+
+      viewport.setOrientation(orientation);
+      viewport.render();
+
+      // update the orientation in the viewport info
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      viewportInfo.setOrientation(orientation);
+    },
  };

  const definitions = {
@@ -2021,6 +2162,9 @@ function commandsModule({
    decreaseBrushSize: actions.decreaseBrushSize,
    addNewSegment: actions.addNewSegment,
    loadSegmentationDisplaySetsForViewport: actions.loadSegmentationDisplaySetsForViewport,
+    setViewportOrientation: actions.setViewportOrientation,
+    hydrateSecondaryDisplaySet: actions.hydrateSecondaryDisplaySet,
+    getVolumeIdForDisplaySet: actions.getVolumeIdForDisplaySet,
  };

  return {
@@ -0,0 +1,116 @@
+import { useToolbar, useViewportMousePosition } from '@ohif/core/src/hooks';
+import React, { useState, useEffect, useRef } from 'react';
+import { useViewportRendering } from '../../hooks';
+
+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 [isAtBottom, setIsAtBottom] = useState(false);
+  const [showAllIcons, setShowAllIcons] = useState(true);
+  const firstMountRef = useRef(true);
+  const { hasColorbar } = useViewportRendering(viewportId);
+
+  useEffect(() => {
+    if (firstMountRef.current) {
+      firstMountRef.current = false;
+
+      const timer = setTimeout(() => {
+        setShowAllIcons(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!showAllIcons && mousePosition.isInViewport) {
+      if (mousePosition.isInBottomPercentage(10)) {
+        setIsAtBottom(true);
+      } else {
+        setIsAtBottom(false);
+      }
+    }
+  }, [mousePosition, showAllIcons]);
+
+  if (!toolbarButtons?.length) {
+    return null;
+  }
+
+  if (!hasColorbar) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-row gap-2">
+      {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: () => openItem(id, viewportId),
+          onClose: () => closeItem(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 = showAllIcons || id === 'Colorbar' || isAtBottom;
+
+        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;
@@ -0,0 +1 @@
+export { default } from './AdvancedRenderingControls';
@@ -0,0 +1,168 @@
+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, overlayDisplaySets } = useViewportDisplaySets(viewportId);
+
+  const [specialDisplaySet, setSpecialDisplaySet] = useState(null);
+
+  const allDisplaySets = useMemo(() => {
+    return [backgroundDisplaySet, ...overlayDisplaySets].filter(Boolean);
+  }, [backgroundDisplaySet, overlayDisplaySets]);
+
+  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 className="flex h-6 cursor-default text-sm leading-6 text-white">
+          <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+            <StatusIcon />
+            <span className="ml-1">{statusInfo.type}</span>
+          </div>
+          {/* We don't show the load button for SRs because we handle it in the SR extension
+          via the tracked measurement context that works with state machine, this is not a regression right now  */}
+          {statusInfo.type !== 'SR' && (
+            <ViewportActionButton
+              onInteraction={() => {
+                commandsManager.runCommand('hydrateSecondaryDisplaySet', {
+                  displaySet: statusInfo.displaySet,
+                  viewportId,
+                });
+              }}
+            >
+              {loadStr}
+            </ViewportActionButton>
+          )}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      {statusInfo.tooltip && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <div>{statusInfo.tooltip}</div>
+          </TooltipContent>
+        </Tooltip>
+      )}
+      {!statusInfo.tooltip && <StatusArea />}
+    </>
+  );
+}
+
+export default ModalityLoadBadge;
@@ -0,0 +1 @@
+export { default } from './ModalityLoadBadge';
@@ -0,0 +1,151 @@
+import React, { useCallback, useState } from 'react';
+import { ViewportActionArrows } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core/src';
+import { utils } from '../..';
+import { useViewportSegmentations } from '../../hooks';
+import { useMeasurementTracking } from '../../hooks/useMeasurementTracking';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+
+/**
+ * NavigationComponent provides navigation controls for viewports containing
+ * special displaySets (SR, SEG, RTSTRUCT) to navigate between segments or measurements
+ */
+function NavigationComponent({ viewportId }: { viewportId: string }) {
+  const { servicesManager } = useSystem();
+  const { segmentationService, cornerstoneViewportService, measurementService } =
+    servicesManager.services;
+
+  // Get tracking information
+  const { isTracked, trackedMeasurementUIDs } = useMeasurementTracking({ viewportId });
+  const { viewportDisplaySets } = useViewportDisplaySets(viewportId);
+  const [measurementSelected, setMeasurementSelected] = useState(0);
+  const isSRDisplaySet = viewportDisplaySets.some(displaySet => displaySet?.Modality === 'SR');
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+  // Get segmentation information
+  const { segmentationsWithRepresentations } = useViewportSegmentations({
+    viewportId,
+  });
+
+  const hasSegmentations = segmentationsWithRepresentations.length > 0;
+
+  // prefer segment navigation if available
+  const navigationMode = hasSegmentations
+    ? 'segment'
+    : isSRDisplaySet
+      ? 'measurement'
+      : isTracked
+        ? 'measurement'
+        : null;
+
+  const handleMeasurementNavigation = useCallback(
+    (direction: number) => {
+      const measurementDisplaySet = viewportDisplaySets.find(
+        displaySet => displaySet?.Modality === 'SR'
+      );
+
+      if (measurementDisplaySet) {
+        const measurements = measurementDisplaySet.measurements;
+        if (measurements.length <= 0) {
+          return;
+        }
+
+        const newIndex = getNextIndex(measurementSelected, direction, measurements.length);
+        setMeasurementSelected(newIndex);
+
+        const measurement = measurements[newIndex];
+        cornerstoneViewport.setViewReference({
+          referencedImageId: measurement.imageId,
+        });
+        return;
+      }
+
+      if (isTracked && trackedMeasurementUIDs.length > 0) {
+        const newIndex = getNextIndex(
+          measurementSelected,
+          direction,
+          trackedMeasurementUIDs.length
+        );
+        setMeasurementSelected(newIndex);
+        measurementService.jumpToMeasurement(viewportId, trackedMeasurementUIDs[newIndex]);
+      }
+    },
+    [
+      viewportId,
+      cornerstoneViewport,
+      measurementSelected,
+      measurementService,
+      isTracked,
+      trackedMeasurementUIDs,
+      viewportDisplaySets,
+    ]
+  );
+
+  const handleSegmentNavigation = useCallback(
+    (direction: number) => {
+      if (!segmentationsWithRepresentations.length) {
+        return;
+      }
+
+      const segmentationId = segmentationsWithRepresentations[0].segmentation.segmentationId;
+
+      utils.handleSegmentChange({
+        direction,
+        segmentationId,
+        viewportId,
+        selectedSegmentObjectIndex: 0,
+        segmentationService,
+      });
+    },
+    [segmentationsWithRepresentations, viewportId, segmentationService]
+  );
+
+  // Handle navigation between segments/measurements
+  const handleNavigate = useCallback(
+    (direction: number) => {
+      if (navigationMode === 'segment') {
+        handleSegmentNavigation(direction);
+      } else if (navigationMode === 'measurement') {
+        handleMeasurementNavigation(direction);
+      }
+    },
+    [navigationMode, handleSegmentNavigation, handleMeasurementNavigation]
+  );
+
+  // Only render if we have a navigation mode
+  if (!navigationMode) {
+    return null;
+  }
+
+  return (
+    <ViewportActionArrows
+      onArrowsClick={handleNavigate}
+      className="h-6"
+    />
+  );
+}
+
+/**
+ * Calculate the next index with circular navigation support
+ * @param currentIndex Current index position
+ * @param direction Direction of movement (1 for next, -1 for previous)
+ * @param totalItems Total number of items to navigate through
+ * @returns The next index with wrap-around support
+ */
+function getNextIndex(currentIndex: number, direction: number, totalItems: number): number {
+  if (totalItems <= 0) {
+    return 0;
+  }
+
+  // Use modulo to handle circular navigation
+  let nextIndex = (currentIndex + direction) % totalItems;
+
+  // Handle negative index when going backwards from index 0
+  if (nextIndex < 0) {
+    nextIndex = totalItems - 1;
+  }
+
+  return nextIndex;
+}
+
+export default NavigationComponent;
@@ -0,0 +1,3 @@
+import NavigationComponent from './NavigationComponent';
+
+export default NavigationComponent;
@@ -1,25 +1,94 @@
-import React from 'react';
-import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { useSystem } from '@ohif/core';
+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';

 export type OHIFViewportActionCornersProps = {
  viewportId: string;
 };

-function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
-  const { servicesManager } = useSystem();
-  const [viewportActionCornersState] = useViewportActionCornersContext();
-  const ViewportActionCorners =
-    servicesManager.services.customizationService.getCustomization('ui.viewportActionCorner');
-  if (!viewportActionCornersState[viewportId]) {
+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) {
    return null;
  }

  return (
-    <ViewportActionCorners
-      cornerComponents={viewportActionCornersState[viewportId]}
-    ></ViewportActionCorners>
+    <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>
  );
 }

+const OHIFViewportActionCorners = memo(OHIFViewportActionCornersComponent);
+
 export default OHIFViewportActionCorners;
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Numeric } from '@ohif/ui-next';
+import { useViewportDisplaySets, useViewportRendering } from '../../hooks';
+
+interface OpacityMenuProps {
+  viewportId: string;
+  className?: string;
+}
+
+function OpacityMenu({ viewportId, className }: OpacityMenuProps) {
+  const { backgroundDisplaySet, foregroundDisplaySets } = useViewportDisplaySets(viewportId, {
+    includeForeground: true,
+    includeBackground: true,
+  });
+  const { opacityLinear, setOpacityLinear } = useViewportRendering(viewportId, {
+    displaySetInstanceUID: foregroundDisplaySets[0].displaySetInstanceUID,
+  });
+
+  const opacityValue = opacityLinear !== undefined ? opacityLinear : 0;
+  const backgroundModality = backgroundDisplaySet?.Modality || '';
+  const foregroundModality = foregroundDisplaySets[0]?.Modality || '';
+
+  return (
+    <div className={className}>
+      <div className="bg-popover w-72 rounded-lg p-3">
+        <div className="mb-2 flex items-center justify-center">
+          <span className="text-muted-foreground text-base">Opacity</span>
+        </div>
+        <div className="">
+          <Numeric.Container
+            mode="singleRange"
+            value={opacityValue}
+            onChange={(val: number | [number, number]) => {
+              if (typeof val === 'number') {
+                setOpacityLinear(val);
+              }
+            }}
+            min={0}
+            max={1}
+            step={0.0001}
+          >
+            <div className="flex items-center">
+              <span className="text-foreground mr-2 text-sm">{backgroundModality}</span>
+              <Numeric.SingleRange showNumberInput={false} />
+              <span className="text-foreground ml-2 text-sm">{foregroundModality}</span>
+            </div>
+          </Numeric.Container>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default OpacityMenu;
@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useIconPresentation,
+} from '@ohif/ui-next';
+import OpacityMenu from './OpacityMenu';
+
+type OpacityMenuWrapperProps = {
+  viewportId: string;
+  location: string;
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+};
+
+export function OpacityMenuWrapper(props: OpacityMenuWrapperProps): ReactNode {
+  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+
+  const handleOpenChange = (openState: boolean) => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const { servicesManager } = useSystem();
+  const { toolbarService } = servicesManager.services;
+
+  const { align, side } = toolbarService.getAlignAndSide(location);
+
+  const Icon = <Icons.Opacity className={iconClassName} />;
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              icon="Opacity"
+              {...rest}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <OpacityMenu
+          className="w-full"
+          viewportId={viewportId}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -0,0 +1,2 @@
+export { OpacityMenuWrapper } from './OpacityMenuWrapper';
+export { default as OpacityMenu } from './OpacityMenu';
@@ -0,0 +1,21 @@
+import React from 'react';
+
+// should be used in a Select component
+const SelectItemWithModality = ({
+  displaySet,
+  showModality = true,
+}: {
+  displaySet: AppTypes.DisplaySet;
+  showModality?: boolean;
+}): JSX.Element => (
+  <div className="flex w-[90%] items-center justify-between">
+    <span className="text-foreground truncate text-base">{displaySet.label}</span>
+    {showModality && displaySet.Modality && (
+      <span className="text-muted-foreground flex-shrink-0 whitespace-nowrap text-xs">
+        {displaySet.Modality}
+      </span>
+    )}
+  </div>
+);
+
+export default SelectItemWithModality;
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Numeric,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  Button,
+} from '@ohif/ui-next';
+import { useViewportRendering } from '../../hooks';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+import SelectItemWithModality from '../SelectItemWithModality';
+
+interface ThresholdMenuProps {
+  viewportId: string;
+  className?: string;
+}
+
+function ThresholdMenu({ viewportId, className }: ThresholdMenuProps) {
+  const { viewportDisplaySets, foregroundDisplaySets } = useViewportDisplaySets(viewportId);
+  const [selectedDisplaySetUID, setSelectedDisplaySetUID] = useState<string | undefined>(
+    foregroundDisplaySets.length > 0 ? foregroundDisplaySets[0].displaySetInstanceUID : undefined
+  );
+
+  const { threshold, setThreshold, pixelValueRange } = useViewportRendering(viewportId, {
+    displaySetInstanceUID: selectedDisplaySetUID,
+  });
+
+  const { min, max } = pixelValueRange;
+  const thresholdValue = threshold ?? min;
+
+  useEffect(() => {
+    if (foregroundDisplaySets.length > 0 && !selectedDisplaySetUID) {
+      setSelectedDisplaySetUID(foregroundDisplaySets[0].displaySetInstanceUID);
+    }
+  }, [foregroundDisplaySets, selectedDisplaySetUID]);
+
+  const selectedDisplaySet = viewportDisplaySets.find(
+    ds => ds.displaySetInstanceUID === selectedDisplaySetUID
+  );
+
+  return (
+    <div className={className}>
+      <div className="bg-popover w-72 rounded-lg p-4 shadow-md">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <span className="text-muted-foreground text-base">Threshold</span>
+            {viewportDisplaySets.length > 1 && (
+              <div className="w-32">
+                <Select
+                  value={selectedDisplaySetUID}
+                  onValueChange={setSelectedDisplaySetUID}
+                >
+                  <SelectTrigger>
+                    <SelectValue>{selectedDisplaySet?.label || 'Select Display Set'}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {viewportDisplaySets.map(ds => (
+                      <SelectItem
+                        key={ds.displaySetInstanceUID}
+                        value={ds.displaySetInstanceUID}
+                      >
+                        <SelectItemWithModality displaySet={ds} />
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setThreshold(min)}
+            className="text-sm"
+          >
+            Reset
+          </Button>
+        </div>
+        <Numeric.Container
+          mode="singleRange"
+          value={thresholdValue}
+          onChange={(val: number | [number, number]) => {
+            if (typeof val === 'number') {
+              setThreshold(val);
+            }
+          }}
+          min={min}
+          max={max}
+          step={0.01}
+        >
+          <Numeric.SingleRange />
+          <div className="mt-1 flex justify-between">
+            <span className="text-muted-foreground text-sm">{min.toFixed(0)}</span>
+            <span className="text-muted-foreground text-sm">{max.toFixed(0)}</span>
+          </div>
+        </Numeric.Container>
+      </div>
+    </div>
+  );
+}
+
+export default ThresholdMenu;
@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useIconPresentation,
+} from '@ohif/ui-next';
+import ThresholdMenu from './ThresholdMenu';
+
+type ThresholdMenuWrapperProps = {
+  viewportId: string;
+  location: string;
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+};
+
+export function ThresholdMenuWrapper(props: ThresholdMenuWrapperProps): ReactNode {
+  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+
+  const handleOpenChange = (openState: boolean) => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const { servicesManager } = useSystem();
+  const { toolbarService } = servicesManager.services;
+
+  const { align, side } = toolbarService.getAlignAndSide(location);
+
+  const Icon = <Icons.Threshold className={iconClassName} />;
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              icon="Threshold"
+              {...rest}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <ThresholdMenu
+          className="w-full"
+          viewportId={viewportId}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -0,0 +1,2 @@
+export { ThresholdMenuWrapper } from './ThresholdMenuWrapper';
+export { default as ThresholdMenu } from './ThresholdMenu';
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+import { useMeasurementTracking } from '../../hooks/useMeasurementTracking';
+
+/**
+ * TrackingStatus displays an indicator icon for viewports that have
+ * tracked measurements
+ */
+function TrackingStatus({ viewportId }: { viewportId: string }) {
+  const { isTracked } = useMeasurementTracking({ viewportId });
+
+  if (!isTracked) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span>
+            <Icons.StatusTracking className="h-4 w-4" />
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <div>Tracking</div>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  );
+}
+
+export default TrackingStatus;
@@ -0,0 +1 @@
+export { default } from './TrackingStatus';
@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Numeric,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@ohif/ui-next';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+import { useViewportRendering } from '../../hooks/useViewportRendering';
+import { useSystem } from '@ohif/core';
+import { cache } from '@cornerstonejs/core';
+
+interface VOIManualControlMenuProps {
+  viewportId: string;
+  className?: string;
+}
+
+const TABS = {
+  MINMAX: 'minmax',
+  MANUAL: 'manual',
+};
+
+function VOIManualControlMenu({ viewportId, className }: VOIManualControlMenuProps) {
+  const { servicesManager } = useSystem();
+  const { displaySetService } = servicesManager.services;
+  const [activeTab, setActiveTab] = useState(TABS.MINMAX);
+  const { viewportDisplaySets } = useViewportDisplaySets(viewportId);
+  const [selectedDisplaySetUID, setSelectedDisplaySetUID] = useState<string | undefined>(
+    viewportDisplaySets.length > 0 ? viewportDisplaySets[0].displaySetInstanceUID : undefined
+  );
+
+  const { voiRange, setVOIRange, windowLevel, setWindowLevel } = useViewportRendering(viewportId, {
+    displaySetInstanceUID: selectedDisplaySetUID,
+  });
+
+  useEffect(() => {
+    if (viewportDisplaySets.length > 0 && !selectedDisplaySetUID) {
+      setSelectedDisplaySetUID(viewportDisplaySets[0].displaySetInstanceUID);
+    }
+  }, [viewportDisplaySets, selectedDisplaySetUID]);
+
+  if (!voiRange) {
+    return null;
+  }
+
+  const { upper, lower } = voiRange;
+  const { windowWidth, windowCenter } = windowLevel;
+
+  const selectedViewportImageIds =
+    displaySetService.getDisplaySetByUID(selectedDisplaySetUID)?.imageIds;
+
+  let min = Infinity;
+  let max = -Infinity;
+
+  if (selectedViewportImageIds) {
+    for (const imageId of selectedViewportImageIds) {
+      const image = cache.getImage(imageId);
+      if (image) {
+        min = Math.min(min, image.minPixelValue);
+        max = Math.max(max, image.maxPixelValue);
+      }
+    }
+  }
+
+  // Provide reasonable defaults if min/max couldn't be determined
+  if (min === Infinity || max === -Infinity) {
+    min = 0;
+    max = 255;
+  }
+
+  const selectedDisplaySet = viewportDisplaySets.find(
+    ds => ds.displaySetInstanceUID === selectedDisplaySetUID
+  );
+
+  return (
+    <div className={className}>
+      <div className="bg-popover w-72 rounded-lg p-4 shadow-md">
+        <Tabs
+          defaultValue={activeTab}
+          onValueChange={setActiveTab}
+        >
+          <div className="mb-4 flex items-center space-x-2">
+            {viewportDisplaySets.length > 1 && (
+              <Select
+                value={selectedDisplaySetUID}
+                onValueChange={setSelectedDisplaySetUID}
+              >
+                <SelectTrigger>
+                  <SelectValue>{selectedDisplaySet?.label || 'Select Display Set'}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {viewportDisplaySets.map(ds => (
+                    <SelectItem
+                      key={ds.displaySetInstanceUID}
+                      value={ds.displaySetInstanceUID}
+                    >
+                      {`${ds.SeriesDescription || ''}`.trim()}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <TabsList className="w-full flex-1">
+              <TabsTrigger
+                value={TABS.MINMAX}
+                className="flex-1"
+              >
+                Min/Max
+              </TabsTrigger>
+              <TabsTrigger
+                value={TABS.MANUAL}
+                className="flex-1"
+              >
+                Manual
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value={TABS.MINMAX}>
+            <Numeric.Container
+              mode="doubleRange"
+              min={min}
+              max={max}
+              values={[lower, upper]}
+              step={1}
+              className="space-y-1"
+              onChange={(vals: [number, number]) => {
+                const [newLower, newUpper] = vals;
+                if (newLower !== lower || newUpper !== upper) {
+                  setVOIRange({ lower: newLower, upper: newUpper });
+                }
+              }}
+            >
+              <Numeric.DoubleRange showNumberInputs />
+            </Numeric.Container>
+          </TabsContent>
+          <TabsContent value={TABS.MANUAL}>
+            <div className="space-y-1">
+              <Numeric.Container
+                mode="singleRange"
+                min={0}
+                max={max}
+                step={1}
+                value={windowWidth}
+                className="space-y-1"
+                onChange={(val: number) => {
+                  if (val !== windowWidth) {
+                    setWindowLevel({ windowWidth: val, windowCenter });
+                  }
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <Numeric.Label>W:</Numeric.Label>
+                  <Numeric.SingleRange showNumberInput />
+                </div>
+              </Numeric.Container>
+
+              <Numeric.Container
+                mode="singleRange"
+                min={min}
+                max={max}
+                step={1}
+                value={windowCenter}
+                className="space-y-1"
+                onChange={(val: number) => {
+                  if (val !== windowCenter) {
+                    setWindowLevel({ windowWidth, windowCenter: val });
+                  }
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <Numeric.Label>L:</Numeric.Label>
+                  <Numeric.SingleRange showNumberInput />
+                </div>
+              </Numeric.Container>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
+export default VOIManualControlMenu;
@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useIconPresentation,
+} from '@ohif/ui-next';
+import VOIManualControlMenu from './VOIManualControlMenu';
+
+type VOIManualControlMenuWrapperProps = {
+  viewportId: string;
+  location: string;
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+};
+
+export function VOIManualControlMenuWrapper(props: VOIManualControlMenuWrapperProps): ReactNode {
+  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+
+  const handleOpenChange = (openState: boolean) => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const { servicesManager } = useSystem();
+  const { toolbarService } = servicesManager.services;
+
+  const { align, side } = toolbarService.getAlignAndSide(location);
+
+  const Icon = <Icons.WindowLevelAdvanced className={iconClassName} />;
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              icon="WindowLevelAdvanced"
+              {...rest}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <VOIManualControlMenu
+          className="w-full"
+          viewportId={viewportId}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -0,0 +1,2 @@
+export { VOIManualControlMenuWrapper } from './VOIManualControlMenuWrapper';
+export { default as VOIManualControlMenu } from './VOIManualControlMenu';
@@ -0,0 +1,154 @@
+import React, { useEffect, useRef, useMemo, memo } from 'react';
+import { utilities } from '@cornerstonejs/tools';
+import { useSystem, useViewportRef, useViewportSize } from '@ohif/core';
+import {
+  ColorbarPositionType,
+  TickPositionType,
+  ColorbarCustomization,
+  TickStyleType,
+  ContainerStyleType,
+} from '../../types/Colorbar';
+import { ColorbarRangeTextPosition } from '@cornerstonejs/tools/utilities/voi/colorbar/enums/ColorbarRangeTextPosition';
+
+const { ViewportColorbar: CornerstoneViewportColorbar } = utilities.voi.colorbar;
+
+type ColorbarProps = {
+  viewportId: string;
+  displaySetInstanceUID: string;
+  colormap?: any;
+  colormaps: any[];
+  activeColormapName: string;
+  volumeId?: string;
+  position: ColorbarPositionType;
+  tickPosition: TickPositionType;
+  tickStyles?: TickStyleType;
+  containerStyles?: ContainerStyleType;
+  viewportElementRef?: React.RefObject<HTMLDivElement>;
+  numColorbars: number;
+};
+
+/**
+ * ViewportColorbar Component
+ * A React wrapper for the cornerstone ViewportColorbar that adds a close button
+ * positioned appropriately based on the colorbar position.
+ */
+const ViewportColorbar = memo(function ViewportColorbar({
+  viewportId,
+  displaySetInstanceUID,
+  colormaps,
+  activeColormapName,
+  volumeId,
+  position,
+  tickPosition,
+  tickStyles,
+  numColorbars,
+}: ColorbarProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { servicesManager } = useSystem();
+  const { customizationService } = servicesManager.services;
+  const viewportElementRef = useViewportRef(viewportId);
+  const { height, width } = useViewportSize(viewportId);
+
+  // Memoize colorbar customization to prevent rerenders from unrelated customization changes
+  const colorbarCustomization = useMemo(() => {
+    return customizationService.getCustomization(
+      'cornerstone.colorbar'
+    ) as unknown as ColorbarCustomization;
+  }, [customizationService]);
+
+  const appropriateTickPosition = useMemo(() => {
+    let tickPos = tickPosition;
+    if (position === 'left' || position === 'right') {
+      tickPos = position === 'left' ? 'right' : 'left';
+    } else {
+      tickPos = position === 'top' ? 'bottom' : 'top';
+    }
+    return tickPos;
+  }, [position, tickPosition]);
+
+  const positionTickStyles = useMemo(() => {
+    return colorbarCustomization?.positionTickStyles?.[position];
+  }, [colorbarCustomization, position]);
+
+  const positionStylesFromConfig = useMemo(() => {
+    return colorbarCustomization?.positionStyles?.[position] || {};
+  }, [colorbarCustomization, position]);
+
+  const mergedTickStyles = useMemo(() => {
+    return {
+      ...(colorbarCustomization?.tickStyles || {}),
+      ...(positionTickStyles?.style || {}),
+      ...(tickStyles || {}),
+    };
+  }, [colorbarCustomization, positionTickStyles, tickStyles]);
+
+  const colorbarId = useMemo(() => {
+    return `Colorbar-${viewportId}-${displaySetInstanceUID}`;
+  }, [viewportId, displaySetInstanceUID]);
+
+  useEffect(() => {
+    if (!containerRef.current || !colormaps || !activeColormapName) {
+      return;
+    }
+
+    const viewportElement = viewportElementRef?.current;
+
+    if (!viewportElement || !colormaps?.length) {
+      return;
+    }
+
+    // Using stable references from memoized values
+    const csColorbar = new CornerstoneViewportColorbar({
+      id: colorbarId,
+      element: viewportElement,
+      container: containerRef.current,
+      colormaps: colormaps,
+      activeColormapName: activeColormapName,
+      volumeId,
+      ticks: {
+        position: appropriateTickPosition as ColorbarRangeTextPosition,
+        style: mergedTickStyles,
+      },
+    });
+
+    return () => {
+      if (csColorbar) {
+        csColorbar.destroy();
+      }
+    };
+  }, [
+    viewportId,
+    displaySetInstanceUID,
+    colormaps,
+    activeColormapName,
+    volumeId,
+    colorbarId,
+    appropriateTickPosition,
+    mergedTickStyles,
+    viewportElementRef,
+  ]);
+
+  if (!height || !width) {
+    return null;
+  }
+
+  return (
+    <div
+      id={`colorbar-container-${viewportId}-${displaySetInstanceUID}`}
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        zIndex: 1000,
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        pointerEvents: 'auto',
+        minWidth: position === 'bottom' ? width / 2.5 : '17px',
+        minHeight: position === 'bottom' ? '20px' : numColorbars === 1 ? height / 3 : height / 4,
+        ...positionStylesFromConfig,
+      }}
+    ></div>
+  );
+});
+
+export default ViewportColorbar;
@@ -0,0 +1,128 @@
+import React, { useEffect, useState, useMemo, memo, useCallback } from 'react';
+import { useSystem } from '@ohif/core';
+import { ColorbarCustomization } from '../../types/Colorbar';
+import type { ColorMapPreset } from '../../types/Colormap';
+import ViewportColorbar from './ViewportColorbar';
+import useViewportRendering from '../../hooks/useViewportRendering';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+type ViewportColorbarsContainerProps = {
+  viewportId: string;
+  location: number;
+};
+
+type ColorbarData = {
+  colorbar: {
+    activeColormapName: string;
+    colormaps: ColorMapPreset[];
+    volumeId?: string;
+  };
+  displaySetInstanceUID: string;
+};
+
+/**
+ * Container component that manages multiple colorbars for a viewport
+ * It interacts with the colorbarService to get/set colorbar states
+ */
+const ViewportColorbarsContainer = memo(function ViewportColorbarsContainer({
+  viewportId,
+  location,
+}: ViewportColorbarsContainerProps) {
+  const [colorbars, setColorbars] = useState<ColorbarData[]>([]);
+  const { servicesManager } = useSystem();
+  const { colorbarService, customizationService, displaySetService } = servicesManager.services;
+  const { viewportDisplaySets, backgroundDisplaySet, foregroundDisplaySets } =
+    useViewportDisplaySets(viewportId);
+  const { colorbarPosition: position, opacity } = useViewportRendering(viewportId, {
+    location,
+  });
+
+  // Memoize the customization to prevent recomputation
+  const colorbarCustomization = useMemo(() => {
+    return customizationService.getCustomization(
+      'cornerstone.colorbar'
+    ) as unknown as ColorbarCustomization;
+  }, [customizationService]);
+
+  // Memoize tick position
+  const tickPosition = useMemo(() => {
+    const defaultTickPosition = colorbarCustomization?.colorbarTickPosition;
+    return colorbarCustomization?.colorbarTickPosition || defaultTickPosition;
+  }, [colorbarCustomization]);
+
+  // Initial load of colorbars
+  useEffect(() => {
+    setColorbars(colorbarService.getViewportColorbar(viewportId) || []);
+  }, [viewportId, colorbarService]);
+
+  // Subscribe to colorbar state changes
+  useEffect(() => {
+    const { unsubscribe } = colorbarService.subscribe(
+      colorbarService.EVENTS.STATE_CHANGED,
+      (event: { viewportId: string; displaySetInstanceUID?: string; changeType: string }) => {
+        if (event.viewportId === viewportId) {
+          setColorbars(colorbarService.getViewportColorbar(viewportId) || []);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [viewportId, colorbarService]);
+
+  if (!colorbars.length) {
+    return null;
+  }
+
+  const isBottom = position === 'bottom';
+
+  const isSingleViewport = viewportDisplaySets.length === 1;
+  const showFullList = isSingleViewport || !isBottom;
+
+  const colorbarsToUse = showFullList
+    ? colorbars
+    : colorbars.filter(({ displaySetInstanceUID }) => {
+        const { displaySetInstanceUID: dsUID } =
+          displaySetService.getDisplaySetByUID(displaySetInstanceUID) ?? {};
+
+        const targetUID =
+          opacity === 0 || opacity == null
+            ? backgroundDisplaySet?.displaySetInstanceUID
+            : foregroundDisplaySets[0].displaySetInstanceUID;
+
+        return dsUID === targetUID;
+      });
+
+  return (
+    <div
+      style={{
+        pointerEvents: 'auto',
+      }}
+    >
+      <div
+        className="flex h-full flex-col items-center justify-center"
+        style={{ pointerEvents: 'auto' }}
+      >
+        {colorbarsToUse.map(colorbarInfo => {
+          const { colorbar, displaySetInstanceUID } = colorbarInfo;
+          return (
+            <ViewportColorbar
+              key={`colorbar-${viewportId}-${displaySetInstanceUID}`}
+              viewportId={viewportId}
+              displaySetInstanceUID={displaySetInstanceUID}
+              colormaps={colorbar.colormaps}
+              activeColormapName={colorbar.activeColormapName}
+              volumeId={colorbar.volumeId}
+              position={position}
+              tickPosition={tickPosition}
+              tickStyles={colorbarCustomization?.tickStyles}
+              numColorbars={colorbars.length}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+export default ViewportColorbarsContainer;
@@ -0,0 +1,5 @@
+import ViewportColorbar from './ViewportColorbar';
+import ViewportColorbarsContainer from './ViewportColorbarsContainer';
+
+export { ViewportColorbar, ViewportColorbarsContainer };
+export default ViewportColorbarsContainer;
@@ -0,0 +1,486 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Icons,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+import SelectItemWithModality from '../SelectItemWithModality';
+import { useViewportRendering } from '../../hooks';
+
+function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: string }>) {
+  const { commandsManager, servicesManager } = useSystem();
+  const [pendingForegrounds, setPendingForegrounds] = useState<string[]>([]);
+  const [pendingSegmentations, setPendingSegmentations] = useState<string[]>([]);
+  const { toggleColorbar } = useViewportRendering(viewportId);
+
+  const { hangingProtocolService, toolbarService } = servicesManager.services;
+
+  const {
+    backgroundDisplaySet,
+    potentialOverlayDisplaySets,
+    potentialForegroundDisplaySets,
+    potentialBackgroundDisplaySets,
+    overlayDisplaySets,
+    foregroundDisplaySets,
+  } = useViewportDisplaySets(viewportId);
+
+  const [thresholdOpacityEnabled, setThresholdOpacityEnabled] = useState(false);
+
+  /**
+   * Change the background display set
+   */
+  const handleBackgroundSelection = (newBackgroundDisplaySet: AppTypes.DisplaySet) => {
+    const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+      viewportId,
+      newBackgroundDisplaySet.displaySetInstanceUID
+    );
+
+    commandsManager.run('setDisplaySetsForViewports', {
+      viewportsToUpdate: updatedViewports,
+    });
+  };
+
+  /**
+   * Replace a display set layer with a new one
+   */
+  const handleReplaceDisplaySetLayer = (
+    currentDisplaySetInstanceUID: string,
+    newDisplaySetInstanceUID: string
+  ) => {
+    // Remove current display set
+    commandsManager.runCommand('removeDisplaySetLayer', {
+      viewportId,
+      displaySetInstanceUID: currentDisplaySetInstanceUID,
+    });
+
+    setTimeout(() => {
+      commandsManager.runCommand('addDisplaySetAsLayer', {
+        viewportId,
+        displaySetInstanceUID: newDisplaySetInstanceUID,
+      });
+    }, 0);
+  };
+
+  /**
+   * Remove a display set layer
+   */
+  const handleRemoveDisplaySetLayer = (displaySetInstanceUID: string) => {
+    commandsManager.runCommand('removeDisplaySetLayer', {
+      viewportId,
+      displaySetInstanceUID,
+    });
+  };
+
+  /**
+   * Add a display set as a layer
+   */
+  const handleAddDisplaySetAsLayer = (displaySetInstanceUID: string) => {
+    commandsManager.runCommand('addDisplaySetAsLayer', {
+      viewportId,
+      displaySetInstanceUID,
+    });
+  };
+
+  /**
+   * Handle overlay display set selection change
+   */
+  const handleOverlaySelectionChange = (
+    currentDisplaySet: AppTypes.DisplaySet,
+    newDisplaySetInstanceUID: string
+  ) => {
+    if (newDisplaySetInstanceUID === currentDisplaySet.displaySetInstanceUID) {
+      return;
+    }
+
+    // Find the selected display set
+    const selectedDisplaySet = potentialOverlayDisplaySets.find(
+      ds => ds.displaySetInstanceUID === newDisplaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleReplaceDisplaySetLayer(
+        currentDisplaySet.displaySetInstanceUID,
+        selectedDisplaySet.displaySetInstanceUID
+      );
+    }
+  };
+
+  /**
+   * Handle foreground display set selection change
+   */
+  const handleForegroundSelectionChange = (
+    currentDisplaySet: AppTypes.DisplaySet,
+    newDisplaySetInstanceUID: string
+  ) => {
+    if (newDisplaySetInstanceUID === currentDisplaySet.displaySetInstanceUID) {
+      return;
+    }
+
+    // Find the selected display set
+    const selectedDisplaySet = potentialForegroundDisplaySets.find(
+      ds => ds.displaySetInstanceUID === newDisplaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleReplaceDisplaySetLayer(
+        currentDisplaySet.displaySetInstanceUID,
+        selectedDisplaySet.displaySetInstanceUID
+      );
+    }
+  };
+
+  /**
+   * Handle pending segmentation selection
+   */
+  const handlePendingSegmentationSelection = (pendingId: string, displaySetInstanceUID: string) => {
+    const selectedDisplaySet = potentialOverlayDisplaySets.find(
+      ds => ds.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
+      // Remove this pending segmentation from the list
+      setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
+    }
+  };
+
+  /**
+   * Handle pending foreground selection
+   */
+  const handlePendingForegroundSelection = (pendingId: string, displaySetInstanceUID: string) => {
+    const selectedDisplaySet = potentialForegroundDisplaySets.find(
+      ds => ds.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
+      // Remove this pending foreground from the list
+      setPendingForegrounds(pendingForegrounds.filter(id => id !== pendingId));
+    }
+  };
+
+  // Check if the advanced window level components exist in toolbar
+  const hasAdvancedRenderingControls = !!toolbarService.getButton('AdvancedRenderingControls');
+  const hasOpacityMenu = !!toolbarService.getButton('opacityMenu');
+
+  const handleThresholdOpacityToggle = () => {
+    const newValue = !thresholdOpacityEnabled;
+    if (hasAdvancedRenderingControls) {
+      toggleColorbar();
+    }
+    setThresholdOpacityEnabled(newValue);
+  };
+
+  return (
+    <div className="bg-popover flex h-full w-[275px] flex-col rounded rounded-md p-1.5">
+      {/* Top buttons row */}
+      <div className={`flex`}>
+        <Button
+          variant="ghost"
+          className="text-primary flex items-center p-1"
+          onClick={() => {
+            // Add a new pending foreground slot with a unique ID
+            setPendingForegrounds([...pendingForegrounds, `pending-${Date.now()}`]);
+          }}
+          disabled={potentialForegroundDisplaySets.length === 0}
+        >
+          <Icons.Plus className="h-4 w-4" />
+          Foreground
+        </Button>
+        <Button
+          variant="ghost"
+          className="text-primary ml-2 flex items-center"
+          disabled={potentialOverlayDisplaySets.length === 0}
+          onClick={() => {
+            setPendingSegmentations([...pendingSegmentations, `seg-${Date.now()}`]);
+          }}
+        >
+          <Icons.Plus className="h-4 w-4" />
+          Segmentation
+        </Button>
+      </div>
+
+      <div className="">
+        {/* Overlays Segmentation section */}
+        <div className="my-2 ml-1">
+          {overlayDisplaySets.map((displaySet, index) => (
+            <div
+              key={displaySet.displaySetInstanceUID}
+              className="mb-1 flex items-center"
+            >
+              <Icons.LayerSegmentation className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value={displaySet.displaySetInstanceUID}
+                onValueChange={value => handleOverlaySelectionChange(displaySet, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue>{displaySet.label?.toUpperCase()}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {/* Include both potential overlays and the current overlay */}
+                  <SelectItem
+                    key={displaySet.displaySetInstanceUID}
+                    value={displaySet.displaySetInstanceUID}
+                    className="pr-2"
+                  >
+                    <SelectItemWithModality displaySet={displaySet} />
+                  </SelectItem>
+                  {potentialOverlayDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                      className="pr-2"
+                    >
+                      <SelectItemWithModality displaySet={item} />
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => handleRemoveDisplaySetLayer(displaySet.displaySetInstanceUID)}
+                  >
+                    Remove
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+
+          {pendingSegmentations.map(pendingId => (
+            <div
+              key={pendingId}
+              className="mb-2 flex items-center"
+            >
+              <Icons.LayerSegmentation className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value=""
+                onValueChange={value => handlePendingSegmentationSelection(pendingId, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="SELECT A SEGMENTATION" />
+                </SelectTrigger>
+                <SelectContent>
+                  {potentialOverlayDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                      className="pr-2"
+                    >
+                      <SelectItemWithModality displaySet={item} />
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      // Remove this pending segmentation
+                      setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
+                    }}
+                  >
+                    Cancel
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+        </div>
+        {/* Foregrounds section */}
+        <div className="my-2 px-1">
+          {foregroundDisplaySets.map((displaySet, index) => (
+            <div
+              key={displaySet.displaySetInstanceUID}
+              className="mb-1 flex items-center"
+            >
+              <Icons.LayerForeground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value={displaySet.displaySetInstanceUID}
+                onValueChange={value => handleForegroundSelectionChange(displaySet, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue>{displaySet.label?.toUpperCase()}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {/* Include both potential foregrounds and the current foreground */}
+                  <SelectItem
+                    key={displaySet.displaySetInstanceUID}
+                    value={displaySet.displaySetInstanceUID}
+                    className="pr-2"
+                  >
+                    <SelectItemWithModality displaySet={displaySet} />
+                  </SelectItem>
+                  {potentialForegroundDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                      className="pr-2"
+                    >
+                      <SelectItemWithModality displaySet={item} />
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => handleRemoveDisplaySetLayer(displaySet.displaySetInstanceUID)}
+                  >
+                    Remove
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+
+          {pendingForegrounds.map(pendingId => (
+            <div
+              key={pendingId}
+              className="mb-2 flex items-center"
+            >
+              <Icons.LayerForeground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value=""
+                onValueChange={value => handlePendingForegroundSelection(pendingId, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="SELECT A FOREGROUND" />
+                </SelectTrigger>
+                <SelectContent>
+                  {potentialForegroundDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                      className="pr-2"
+                    >
+                      <SelectItemWithModality displaySet={item} />
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      // Remove this pending foreground
+                      setPendingForegrounds(pendingForegrounds.filter(id => id !== pendingId));
+                    }}
+                  >
+                    Cancel
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+        </div>
+        {/* Background section */}
+        <div className="mt-1 mb-1 flex items-center px-1">
+          <Icons.LayerBackground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+          <Select
+            value={backgroundDisplaySet?.displaySetInstanceUID}
+            onValueChange={value => {
+              const selectedDisplaySet = potentialBackgroundDisplaySets.find(
+                ds => ds.displaySetInstanceUID === value
+              );
+              if (selectedDisplaySet) {
+                handleBackgroundSelection(selectedDisplaySet);
+              }
+            }}
+          >
+            <SelectTrigger className="flex-1">
+              <SelectValue>
+                {(
+                  backgroundDisplaySet?.SeriesDescription ||
+                  backgroundDisplaySet?.label ||
+                  'background'
+                ).toUpperCase()}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {potentialBackgroundDisplaySets.map(displaySet => (
+                <SelectItem
+                  key={displaySet.displaySetInstanceUID}
+                  value={displaySet.displaySetInstanceUID}
+                  className="pr-2"
+                >
+                  <SelectItemWithModality displaySet={displaySet} />
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      {foregroundDisplaySets.length > 0 && (hasAdvancedRenderingControls || hasOpacityMenu) && (
+        <div className="mt-1 ml-7">
+          <div className="flex items-center">
+            <Switch
+              id="threshold-opacity-switch"
+              className="mr-2"
+              checked={thresholdOpacityEnabled}
+              onCheckedChange={handleThresholdOpacityToggle}
+            />
+            <label
+              htmlFor="threshold-opacity-switch"
+              className="text-muted-foreground cursor-pointer text-sm"
+              onClick={() => setThresholdOpacityEnabled(!thresholdOpacityEnabled)}
+            >
+              Control threshold & opacity
+            </label>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ViewportDataOverlayMenu;
@@ -0,0 +1,88 @@
+import React, { ReactNode } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useIconPresentation,
+} from '@ohif/ui-next';
+import ViewportDataOverlayMenu from './ViewportDataOverlayMenu';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+
+type DataOverlayMenuProps = {
+  viewportId: string;
+  location: string;
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+};
+
+export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): ReactNode {
+  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
+  const { viewportDisplaySets: displaySets } = useViewportDisplaySets(viewportId);
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+
+  const handleOpenChange = (openState: boolean) => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const { servicesManager } = useSystem();
+  const { toolbarService } = servicesManager.services;
+
+  const { align, side } = toolbarService.getAlignAndSide(location);
+
+  const Icon = <Icons.ViewportViews className={iconClassName} />;
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              icon="ViewportViews"
+              {...rest}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <ViewportDataOverlayMenu
+          className="w-full"
+          viewportId={viewportId}
+          displaySets={displaySets}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -1,136 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Icons, Separator } from '@ohif/ui-next';
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-
-function ViewportSegmentationMenu({
-  viewportId,
-  servicesManager,
-}: withAppTypes<{ viewportId: string }>) {
-  const { segmentationService } = servicesManager.services;
-  const [activeSegmentations, setActiveSegmentations] = useState([]);
-  const [availableSegmentations, setAvailableSegmentations] = useState([]);
-
-  useEffect(() => {
-    const updateSegmentations = () => {
-      const active = segmentationService.getSegmentationRepresentations(viewportId);
-      setActiveSegmentations(active);
-
-      const all = segmentationService.getSegmentations();
-      const available = all.filter(
-        seg => !active.some(activeSeg => activeSeg.segmentationId === seg.segmentationId)
-      );
-      setAvailableSegmentations(available);
-    };
-
-    updateSegmentations();
-
-    const subscriptions = [
-      segmentationService.EVENTS.SEGMENTATION_MODIFIED,
-      segmentationService.EVENTS.SEGMENTATION_REMOVED,
-      segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
-    ].map(event => segmentationService.subscribe(event, updateSegmentations));
-
-    return () => {
-      subscriptions.forEach(subscription => subscription.unsubscribe());
-    };
-  }, [segmentationService, viewportId]);
-
-  const toggleSegmentationRepresentationVisibility = (
-    segmentationId,
-    type = SegmentationRepresentations.Labelmap
-  ) => {
-    segmentationService.toggleSegmentationRepresentationVisibility(viewportId, {
-      segmentationId,
-      type,
-    });
-  };
-
-  const addSegmentationToViewport = segmentationId => {
-    segmentationService.addSegmentationRepresentation(viewportId, { segmentationId });
-  };
-
-  const removeSegmentationFromViewport = segmentationId => {
-    segmentationService.removeSegmentationRepresentations(viewportId, {
-      segmentationId,
-    });
-  };
-
-  return (
-    <div className="bg-muted flex h-full w-[262px] flex-col rounded p-3">
-      <span className="text-muted-foreground mb-2 text-xs font-semibold">Current Viewport</span>
-      <ul className="space-y-1">
-        {activeSegmentations.map(segmentation => (
-          <li
-            key={segmentation.id}
-            className="flex items-center text-sm"
-          >
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-muted-foreground mr-2"
-              onClick={() => removeSegmentationFromViewport(segmentation.segmentationId)}
-            >
-              <Icons.Minus className="h-6 w-6" />
-            </Button>
-            <span className="text-foreground flex-grow">{segmentation.label}</span>
-            {segmentation.visible ? (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-muted-foreground"
-                onClick={() =>
-                  toggleSegmentationRepresentationVisibility(
-                    segmentation.segmentationId,
-                    segmentation.type
-                  )
-                }
-              >
-                <Icons.Hide className="h-6 w-6" />
-              </Button>
-            ) : (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-muted-foreground"
-                onClick={() =>
-                  toggleSegmentationRepresentationVisibility(
-                    segmentation.segmentationId,
-                    segmentation.type
-                  )
-                }
-              >
-                <Icons.Show className="h-6 w-6" />
-              </Button>
-            )}
-          </li>
-        ))}
-      </ul>
-      {availableSegmentations.length > 0 && (
-        <>
-          <Separator className="bg-input mb-3" />
-          <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
-          <ul className="space-y-1">
-            {availableSegmentations.map(({ segmentationId, label }) => (
-              <li
-                key={segmentationId}
-                className="flex items-center text-sm"
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="text-muted-foreground mr-2"
-                  onClick={() => addSegmentationToViewport(segmentationId)}
-                >
-                  <Icons.Plus className="h-6 w-6" />
-                </Button>
-                <span className="text-foreground/60">{label}</span>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default ViewportSegmentationMenu;
@@ -1,83 +0,0 @@
-import React, { ReactNode, useEffect, useState } from 'react';
-import { Button, Icons, Popover, PopoverContent, PopoverTrigger } from '@ohif/ui-next';
-import ViewportSegmentationMenu from './ViewportSegmentationMenu';
-import classNames from 'classnames';
-import { useSegmentations } from '../../hooks/useSegmentations';
-
-export function ViewportSegmentationMenuWrapper({
-  viewportId,
-  displaySets,
-  servicesManager,
-  commandsManager,
-  location,
-}: withAppTypes<{
-  viewportId: string;
-  element: HTMLElement;
-}>): ReactNode {
-  const { viewportActionCornersService, viewportGridService } = servicesManager.services;
-
-  const segmentations = useSegmentations({ servicesManager });
-
-  const activeViewportId = viewportGridService.getActiveViewportId();
-  const isActiveViewport = viewportId === activeViewportId;
-
-  const { align, side } = getAlignAndSide(viewportActionCornersService, location);
-
-  if (!segmentations?.length) {
-    return null;
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger
-        asChild
-        className="flex items-center justify-center"
-      >
-        <Button
-          variant="ghost"
-          size="icon"
-        >
-          <Icons.ViewportViews
-            className={classNames(
-              'text-highlight',
-              isActiveViewport ? 'visible' : 'invisible group-hover/pane:visible'
-            )}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="border-none bg-transparent p-0 shadow-none"
-        side={side}
-        align={align}
-        alignOffset={-15}
-        sideOffset={5}
-      >
-        <ViewportSegmentationMenu
-          className="w-full"
-          viewportId={viewportId}
-          displaySets={displaySets}
-          servicesManager={servicesManager}
-          commandsManager={commandsManager}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-const getAlignAndSide = (viewportActionCornersService, location) => {
-  const ViewportActionCornersLocations = viewportActionCornersService.LOCATIONS;
-
-  switch (location) {
-    case ViewportActionCornersLocations.topLeft:
-      return { align: 'start', side: 'bottom' };
-    case ViewportActionCornersLocations.topRight:
-      return { align: 'end', side: 'bottom' };
-    case ViewportActionCornersLocations.bottomLeft:
-      return { align: 'start', side: 'top' };
-    case ViewportActionCornersLocations.bottomRight:
-      return { align: 'end', side: 'top' };
-    default:
-      console.debug('Unknown location, defaulting to bottom-start');
-      return { align: 'start', side: 'bottom' };
-  }
-};
@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewportSegmentationMenuWrapper } from './ViewportSegmentationMenuWrapper';
-
-export function getViewportDataOverlaySettingsMenu(
-  props: withAppTypes<{
-    viewportId: string;
-    element: HTMLElement;
-  }>
-): ReactNode {
-  return <ViewportSegmentationMenuWrapper {...props} />;
-}
@@ -0,0 +1,164 @@
+import { utilities as csUtils } from '@cornerstonejs/core';
+
+export const DEFAULT_COLORMAP = 'hsv';
+export const DEFAULT_OPACITY = 0.5;
+export const DEFAULT_OPACITY_PERCENT = DEFAULT_OPACITY * 100;
+export const DERIVED_OVERLAY_MODALITIES = ['SEG', 'RTSTRUCT'];
+
+/**
+ * Get modality-specific color and opacity settings from the customization service
+ */
+export function getModalityOverlayColormap(customizationService, modality) {
+  const modalityOverlayDefaultColorMaps = customizationService?.getCustomization(
+    'cornerstone.modalityOverlayDefaultColorMaps'
+  ) || { defaultSettings: {} };
+
+  return (
+    modalityOverlayDefaultColorMaps.defaultSettings[modality] || {
+      colormap: DEFAULT_COLORMAP,
+      opacity: DEFAULT_OPACITY,
+    }
+  );
+}
+
+/**
+ * Identifies display sets that can be used as overlays for a specific viewport.
+ *
+ * "Enhanced" display sets are those that:
+ * 1. Are not already in the viewport
+ * 2. Are evaluated for their ability to be overlaid onto the background display set
+ * 3. Have an "isOverlayable" flag indicating if they're compatible with the viewport
+ *
+ * A display set is considered overlayable when:
+ * - The background display set is reconstructable
+ * - The display set is not unsupported
+ * - The Frame of Reference matches the background display set
+ * - For non-derived modalities: background can be a volume and display set is either multiframe or valid volume
+ *
+ * @returns {Object} Object containing:
+ *   - viewportDisplaySets: Display sets already in the viewport
+ *   - enhancedDisplaySets: Other display sets with overlayability assessment
+ */
+export function getEnhancedDisplaySets({ viewportId, services }) {
+  const { displaySetService, viewportGridService } = services;
+  const displaySetsUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+
+  if (!displaySetsUIDs?.length) {
+    return {
+      viewportDisplaySets: [],
+      enhancedDisplaySets: [],
+    };
+  }
+
+  const allDisplaySets = displaySetService.getActiveDisplaySets();
+
+  const otherDisplaySets = allDisplaySets.filter(
+    displaySet => !displaySetsUIDs.includes(displaySet.displaySetInstanceUID)
+  );
+
+  const viewportDisplaySets = displaySetsUIDs.map(displaySetUID =>
+    displaySetService.getDisplaySetByUID(displaySetUID)
+  );
+
+  const backgroundCanBeVolume = csUtils.isValidVolume(viewportDisplaySets[0].imageIds || []);
+  const backgroundDisplaySet = viewportDisplaySets[0];
+
+  const enhancedDisplaySets = otherDisplaySets.map(displaySet => {
+    if (!backgroundDisplaySet.isReconstructable) {
+      return {
+        ...displaySet,
+        isOverlayable: false,
+      };
+    }
+
+    if (displaySet.unsupported) {
+      return {
+        ...displaySet,
+        isOverlayable: false,
+      };
+    }
+
+    // Check if Frame of Reference matches
+    if (
+      displaySet.FrameOfReferenceUID &&
+      displaySet.FrameOfReferenceUID !== backgroundDisplaySet.FrameOfReferenceUID
+    ) {
+      return {
+        ...displaySet,
+        isOverlayable: false,
+      };
+    }
+
+    // Special handling for derived modalities
+    if (!DERIVED_OVERLAY_MODALITIES.includes(displaySet.Modality)) {
+      if (!backgroundCanBeVolume) {
+        return {
+          ...displaySet,
+          isOverlayable: false,
+        };
+      }
+
+      const imageIds = displaySet.imageIds || displaySet.images?.map(image => image.imageId);
+      const isMultiframe = displaySet.isMultiFrame;
+
+      if (!isMultiframe && imageIds?.length > 0 && !csUtils.isValidVolume(imageIds)) {
+        return {
+          ...displaySet,
+          isOverlayable: false,
+        };
+      }
+    }
+
+    return {
+      ...displaySet,
+      isOverlayable: true,
+    };
+  });
+
+  return {
+    viewportDisplaySets,
+    enhancedDisplaySets,
+  };
+}
+
+/**
+ * Sort function: puts disabled items (isOverlayable: false) at the end
+ */
+export const sortByOverlayable = (a, b) => {
+  if (a.isOverlayable === b.isOverlayable) {
+    return 0;
+  }
+  return a.isOverlayable ? -1 : 1;
+};
+
+/**
+ * Create display set options based on modality and opacity settings
+ */
+export function createColormapOverlayDisplaySetOptions(displaySet, opacity, customizationService) {
+  if (displaySet.Modality === 'SEG') {
+    return {};
+  }
+
+  const modalitySettings = getModalityOverlayColormap(customizationService, displaySet.Modality);
+  return {
+    colormap: {
+      name: modalitySettings.colormap || DEFAULT_COLORMAP,
+      opacity: opacity / 100, // Convert from percentage to 0-1 range
+    },
+  };
+}
+
+/**
+ * Get segmentations that can be added as overlays to the viewport
+ *
+ * Note: This function is deprecated as we now use display sets for segmentations
+ */
+export function getAvailableSegmentations(segmentationService) {
+  const segmentations = segmentationService.getSegmentations() || [];
+  return segmentations.map(segmentation => ({
+    segmentationId: segmentation.segmentationId,
+    label: segmentation.label || 'Segmentation',
+    segments: segmentation.segments,
+    frameOfReferenceUID: segmentation.frameOfReferenceUID,
+  }));
+}
@@ -0,0 +1,181 @@
+import React from 'react';
+import { cn, Icons, ToolButton, useIconPresentation } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+import { Enums } from '@cornerstonejs/core';
+import { Popover, PopoverTrigger, PopoverContent, Button, useViewportGrid } from '@ohif/ui-next';
+
+function ViewportOrientationMenu({
+  location,
+  viewportId,
+  displaySets,
+  isOpen = false,
+  onOpen,
+  onClose,
+  disabled,
+  ...props
+}: withAppTypes<{
+  location?: string;
+  viewportId: string;
+  displaySets: AppTypes.DisplaySet[];
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+}>) {
+  const [gridState] = useViewportGrid();
+  const viewportIdToUse = viewportId || gridState.activeViewportId;
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+  const { servicesManager, commandsManager } = useSystem();
+  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
+
+  const handleOrientationChange = (orientation: string) => {
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportIdToUse);
+    const currentViewportType = viewportInfo?.getViewportType();
+
+    if (!displaySets.length) {
+      return;
+    }
+
+    // Check if at least one displaySet is reconstructable
+    const hasReconstructableDisplaySet = displaySets.some(ds => ds.isReconstructable);
+
+    if (!hasReconstructableDisplaySet) {
+      console.warn('Cannot change orientation: No reconstructable display sets in viewport');
+      return;
+    }
+
+    // Set the orientation enum based on the selected orientation
+    let orientationEnum;
+    switch (orientation.toLowerCase()) {
+      case 'axial':
+        orientationEnum = Enums.OrientationAxis.AXIAL;
+        break;
+      case 'sagittal':
+        orientationEnum = Enums.OrientationAxis.SAGITTAL;
+        break;
+      case 'coronal':
+        orientationEnum = Enums.OrientationAxis.CORONAL;
+        break;
+      default:
+        orientationEnum = Enums.OrientationAxis.ACQUISITION;
+    }
+
+    const displaySetUIDs = displaySets.map(ds => ds.displaySetInstanceUID);
+
+    // If viewport is not already a volume type, we need to convert it
+    if (currentViewportType !== Enums.ViewportType.ORTHOGRAPHIC) {
+      // Configure the viewport to be a volume viewport with current display sets
+      const updatedViewport = {
+        viewportId: viewportIdToUse,
+        displaySetInstanceUIDs: displaySetUIDs,
+        viewportOptions: {
+          viewportType: Enums.ViewportType.ORTHOGRAPHIC,
+          orientation: orientationEnum,
+        },
+        displaySetOptions: displaySetUIDs.map(() => ({})),
+      };
+
+      // Update the viewport to be a volume viewport
+      commandsManager.run('setDisplaySetsForViewports', {
+        viewportsToUpdate: [updatedViewport],
+      });
+    } else {
+      // Set the viewport orientation
+      commandsManager.runCommand('setViewportOrientation', {
+        viewportId: viewportIdToUse,
+        orientation: orientationEnum,
+      });
+    }
+
+    // Close the menu after selection
+    onClose?.();
+  };
+
+  const handleOpenChange = (openState: boolean) => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  if (!displaySets.length) {
+    return null;
+  }
+
+  // Get proper alignment and side based on the location using toolbar service
+  const { align, side } = toolbarService.getAlignAndSide(Number(location));
+
+  const Icon = <Icons.OrientationSwitch className={iconClassName} />;
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className={cn('flex items-center justify-center')}
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              icon="OrientationSwitch"
+              {...props}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+              onClick={() => {}}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[100px] p-1"
+        align={align}
+        side={side}
+      >
+        <div className="flex flex-col">
+          <Button
+            variant="ghost"
+            className="justify-start"
+            onClick={() => handleOrientationChange('axial')}
+          >
+            Axial
+          </Button>
+          <Button
+            variant="ghost"
+            className="justify-start"
+            onClick={() => handleOrientationChange('sagittal')}
+          >
+            Sagittal
+          </Button>
+          <Button
+            variant="ghost"
+            className="justify-start"
+            onClick={() => handleOrientationChange('coronal')}
+          >
+            Coronal
+          </Button>
+          <Button
+            variant="ghost"
+            className="justify-start"
+            onClick={() => handleOrientationChange('acquisition')}
+          >
+            Acquisition
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default ViewportOrientationMenu;
@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import ViewportOrientationMenu from './ViewportOrientationMenu';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+
+export function ViewportOrientationMenuWrapper(
+  props: withAppTypes<{
+    viewportId: string;
+    location: string;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    iconSize?: number;
+    disabled?: boolean;
+  }>
+): ReactNode {
+  const { viewportId } = props;
+  const { viewportDisplaySets } = useViewportDisplaySets(viewportId);
+
+  if (!viewportDisplaySets.length) {
+    return null;
+  }
+
+  return (
+    <ViewportOrientationMenu
+      {...props}
+      displaySets={viewportDisplaySets}
+    />
+  );
+}
@@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState, ReactElement, useMemo } from '
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import { PanelSection, WindowLevel } from '@ohif/ui-next';
-import { Enums, eventTarget } from '@cornerstonejs/core';
+import { BaseVolumeViewport, Enums, eventTarget } from '@cornerstonejs/core';
 import { useActiveViewportDisplaySets } from '@ohif/core';
 import {
  getNodeOpacity,
@@ -22,7 +22,7 @@ const ViewportWindowLevel = ({
  const { cornerstoneViewportService } = servicesManager.services;
  const [windowLevels, setWindowLevels] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
-  const displaySets = useActiveViewportDisplaySets({ servicesManager });
+  const displaySets = useActiveViewportDisplaySets();

  const getViewportsWithVolumeIds = useCallback(
    (volumeIds: string[]) => {
@@ -30,7 +30,7 @@ const ViewportWindowLevel = ({
      const viewports = renderingEngine.getVolumeViewports();

      return viewports.filter(vp => {
-        const viewportVolumeIds = vp.getActors().map(actor => actor.referencedId);
+        const viewportVolumeIds = vp instanceof BaseVolumeViewport ? vp.getAllVolumeIds() : [];
        return (
          volumeIds.length === viewportVolumeIds.length &&
          volumeIds.every(volumeId => viewportVolumeIds.includes(volumeId))
@@ -124,7 +124,8 @@ const ViewportWindowLevel = ({
        return;
      }

-      const viewportVolumeIds = viewport.getActors().map(actor => actor.referencedId);
+      const viewportVolumeIds =
+        viewport instanceof BaseVolumeViewport ? viewport.getAllVolumeIds() : [];
      const viewports = getViewportsWithVolumeIds(viewportVolumeIds);

      viewports.forEach(vp => {
@@ -1,122 +1,27 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback } from 'react';
 import { Switch } from '@ohif/ui-next';
-import { StackViewport, VolumeViewport } from '@cornerstonejs/core';
-import { ColorbarProps } from '../../types/Colorbar';
-import { utilities } from '@cornerstonejs/core';
+import { useViewportRendering } from '../../hooks/useViewportRendering';

-export function setViewportColorbar(
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager: AppTypes.ServicesManager,
-  colorbarOptions
-) {
-  const { cornerstoneViewportService } = servicesManager.services;
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+export function Colorbar({ viewportId }: { viewportId?: string } = {}): ReactElement {
+  const { hasColorbar, toggleColorbar } = useViewportRendering(viewportId);

-  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-  const backgroundColor = viewportInfo.getViewportOptions().background;
-  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
-
-  if (isLight) {
-    colorbarOptions.ticks = {
-      position: 'left',
-      style: {
-        font: '13px Inter',
-        color: '#000000',
-        maxNumTicks: 8,
-        tickSize: 5,
-        tickWidth: 1,
-        labelMargin: 3,
-      },
-    };
-  }
-
-  const displaySetInstanceUIDs = [];
-
-  if (viewport instanceof StackViewport) {
-    displaySetInstanceUIDs.push(viewportId);
-  }
-
-  if (viewport instanceof VolumeViewport) {
-    displaySets.forEach(ds => {
-      displaySetInstanceUIDs.push(ds.displaySetInstanceUID);
-    });
-  }
-
-  commandsManager.run({
-    commandName: 'toggleViewportColorbar',
-    commandOptions: {
-      viewportId,
-      options: colorbarOptions,
-      displaySetInstanceUIDs,
-    },
-    context: 'CORNERSTONE',
-  });
-}
-
-export function Colorbar({
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
-  colorbarProperties,
-}: withAppTypes<ColorbarProps>): ReactElement {
-  const { colorbarService } = servicesManager.services;
-  const {
-    width: colorbarWidth,
-    colorbarTickPosition,
-    colorbarContainerPosition,
-    colormaps,
-    colorbarInitialColormap,
-  } = colorbarProperties;
-  const [showColorbar, setShowColorbar] = useState(colorbarService.hasColorbar(viewportId));
-
-  const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
-      viewportId,
-      colormaps,
-      ticks: {
-        position: colorbarTickPosition,
-      },
-      width: colorbarWidth,
-      position: colorbarContainerPosition,
-      activeColormapName: colorbarInitialColormap,
-    });
-  }, [commandsManager]);
-
-  useEffect(() => {
-    const updateColorbarState = () => {
-      setShowColorbar(colorbarService.hasColorbar(viewportId));
-    };
-
-    const { unsubscribe } = colorbarService.subscribe(
-      colorbarService.EVENTS.STATE_CHANGED,
-      updateColorbarState
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportId]);
+  const handleToggle = useCallback(() => {
+    toggleColorbar();
+  }, [toggleColorbar]);

  return (
-    <div
-      className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
-      onClick={e => {
-        e.stopPropagation();
-        onSetColorbar();
-      }}
-    >
+    <div className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded">
      <div className="flex w-7 flex-shrink-0 items-center justify-center"></div>
-      <span className="flex-grow">Display Color bar</span>
+      <span
+        className="flex-grow"
+        onClick={handleToggle}
+      >
+        Display Color bar
+      </span>
      <Switch
        className="ml-2 flex-shrink-0"
-        checked={showColorbar}
-        onClick={e => {
-          e.stopPropagation();
-          onSetColorbar();
-        }}
+        checked={!!hasColorbar}
+        onCheckedChange={handleToggle}
      />
    </div>
  );
@@ -1,95 +1,66 @@
-import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
-import { AllInOneMenu, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
+import { AllInOneMenu, ScrollArea, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
+import { useViewportRendering } from '../../hooks/useViewportRendering';

-import { StackViewport, Types } from '@cornerstonejs/core';
-import { ColormapProps } from '../../types/Colormap';
+export function Colormap({ viewportId }: { viewportId?: string } = {}): ReactElement {
+  const { viewportDisplaySets } = useViewportRendering(viewportId);

-export function Colormap({
-  colormaps,
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
-}: ColormapProps): ReactElement {
-  const { cornerstoneViewportService } = servicesManager.services;
+  const [activeDisplaySetUID, setActiveDisplaySetUID] = useState<string | undefined>(
+    viewportDisplaySets?.[0]?.displaySetInstanceUID
+  );

-  const [activeDisplaySet, setActiveDisplaySet] = useState(displaySets[0]);
+  // Use the hook with the active display set
+  const { colorbarProperties, setColormap } = useViewportRendering(viewportId, {
+    displaySetInstanceUID: activeDisplaySetUID,
+  });
+
+  const { colormaps } = colorbarProperties;

  const [showPreview, setShowPreview] = useState(false);
  const [prePreviewColormap, setPrePreviewColormap] = useState(null);
+  const [currentColormap, setCurrentColormap] = useState(null);

  const showPreviewRef = useRef(showPreview);
  showPreviewRef.current = showPreview;
  const prePreviewColormapRef = useRef(prePreviewColormap);
  prePreviewColormapRef.current = prePreviewColormap;
-  const activeDisplaySetRef = useRef(activeDisplaySet);
-  activeDisplaySetRef.current = activeDisplaySet;
-
-  const onSetColorLUT = useCallback(
-    props => {
-      // TODO: Better way to check if it's a fusion
-      const oneOpacityColormaps = ['Grayscale', 'X Ray'];
-      const opacity =
-        displaySets.length > 1 && !oneOpacityColormaps.includes(props.colormap.name) ? 0.5 : 1;
-      commandsManager.run({
-        commandName: 'setViewportColormap',
-        commandOptions: {
-          ...props,
-          opacity,
-          immediate: true,
-        },
-        context: 'CORNERSTONE',
-      });
-    },
-    [commandsManager]
-  );
-
-  const getViewportColormap = (viewportId, displaySet) => {
-    const { displaySetInstanceUID } = displaySet;
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof StackViewport) {
-      const { colormap } = viewport.getProperties();
-      if (!colormap) {
-        return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
-      }
-      return colormap;
-    }
-    const actorEntries = viewport.getActors();
-    const actorEntry = actorEntries?.find(entry =>
-      entry.referencedId.includes(displaySetInstanceUID)
-    );
-    const { colormap } = (viewport as Types.IVolumeViewport).getProperties(actorEntry.referencedId);
-    if (!colormap) {
-      return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
-    }
-    return colormap;
-  };
-
-  const activeIndex = displaySets.findIndex(
-    ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID
-  );
+  const currentColormapRef = useRef(currentColormap);
+  currentColormapRef.current = currentColormap;

  useEffect(() => {
-    setActiveDisplaySet(displaySets[displaySets.length - 1]);
-  }, [displaySets]);
+    setCurrentColormap(null);
+    setPrePreviewColormap(null);
+  }, [activeDisplaySetUID]);
+
+  const handleSetColorLUT = (colormap, immediate = true) => {
+    // Check if it's a fusion viewport
+    const oneOpacityColormaps = ['Grayscale', 'X Ray'];
+    const opacity =
+      viewportDisplaySets.length > 1 && !oneOpacityColormaps.includes(colormap.name) ? 0.5 : 1;
+
+    setColormap({
+      colormap,
+      opacity,
+      immediate,
+    });
+  };

  return (
    <>
-      {displaySets.length > 1 && (
+      {viewportDisplaySets && viewportDisplaySets.length > 1 && (
        <div className="flex h-8 w-full flex-shrink-0 items-center justify-center px-2 text-base">
          <Tabs
-            value={String(activeIndex)}
-            onValueChange={val => {
-              const index = parseInt(val, 10);
-              setActiveDisplaySet(displaySets[index]);
+            value={activeDisplaySetUID}
+            onValueChange={displaySetUID => {
+              setActiveDisplaySetUID(displaySetUID);
              setPrePreviewColormap(null);
            }}
          >
            <TabsList>
-              {displaySets.map((ds, i) => (
+              {viewportDisplaySets.map(ds => (
                <TabsTrigger
-                  key={i}
-                  value={String(i)}
+                  key={ds.displaySetInstanceUID}
+                  value={ds.displaySetInstanceUID}
                >
                  {ds.Modality}
                </TabsTrigger>
@@ -98,6 +69,7 @@ export function Colormap({
          </Tabs>
        </div>
      )}
+
      <div
        className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
        onClick={() => setShowPreview(!showPreview)}
@@ -108,49 +80,47 @@ export function Colormap({
          checked={showPreview}
          onCheckedChange={checked => {
            setShowPreview(checked);
+
+            if (!checked && currentColormapRef.current) {
+              handleSetColorLUT(currentColormapRef.current);
+            }
          }}
        />
      </div>
+
      <AllInOneMenu.DividerItem />
-      <AllInOneMenu.ItemPanel
-        maxHeight="calc(100vh - 250px)"
-        className="min-h-[200px] flex-grow"
-      >
-        {colormaps.map((colormap, index) => (
-          <AllInOneMenu.Item
-            key={index}
-            label={colormap.description}
-            useIconSpace={false}
-            onClick={() => {
-              onSetColorLUT({
-                viewportId,
-                colormap,
-                displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID,
-              });
-              setPrePreviewColormap(null);
-            }}
-            onMouseEnter={() => {
-              if (showPreviewRef.current) {
-                setPrePreviewColormap(getViewportColormap(viewportId, activeDisplaySetRef.current));
-                onSetColorLUT({
-                  viewportId,
-                  colormap,
-                  displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID,
-                });
-              }
-            }}
-            onMouseLeave={() => {
-              if (showPreviewRef.current && prePreviewColormapRef.current) {
-                onSetColorLUT({
-                  viewportId,
-                  colormap: prePreviewColormapRef.current,
-                  displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID,
-                });
-              }
-            }}
-          ></AllInOneMenu.Item>
-        ))}
-      </AllInOneMenu.ItemPanel>
+
+      <div className="h-[300px] flex-grow">
+        <ScrollArea className="h-full w-full">
+          <div className="p-1">
+            {colormaps.map((colormap, index) => (
+              <AllInOneMenu.Item
+                key={index}
+                label={colormap.description}
+                useIconSpace={false}
+                onClick={() => {
+                  setCurrentColormap(colormap);
+                  handleSetColorLUT(colormap);
+                  setPrePreviewColormap(null);
+                }}
+                onMouseEnter={() => {
+                  if (showPreviewRef.current) {
+                    if (!prePreviewColormapRef.current) {
+                      setPrePreviewColormap(colormap);
+                    }
+                    handleSetColorLUT(colormap);
+                  }
+                }}
+                onMouseLeave={() => {
+                  if (showPreviewRef.current && prePreviewColormapRef.current) {
+                    handleSetColorLUT(prePreviewColormapRef.current);
+                  }
+                }}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
    </>
  );
 }
@@ -1,13 +1,10 @@
 import React, { ReactElement, useState, useEffect, useCallback } from 'react';
 import { VolumeLightingProps } from '../../types/ViewportPresets';
 import { Numeric } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';

-export function VolumeLighting({
-  servicesManager,
-  commandsManager,
-  viewportId,
-  hasShade,
-}: VolumeLightingProps): ReactElement {
+export function VolumeLighting({ viewportId, hasShade }: VolumeLightingProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
  const { cornerstoneViewportService } = servicesManager.services;
  const [lightingValues, setLightingValues] = useState({
    ambient: null,
@@ -1,47 +1,33 @@
 import React, { ReactElement, useState } from 'react';
 import { AllInOneMenu } from '@ohif/ui-next';
-import { VolumeRenderingOptionsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingQuality } from './VolumeRenderingQuality';
 import { VolumeShift } from './VolumeShift';
 import { VolumeLighting } from './VolumeLighting';
 import { VolumeShade } from './VolumeShade';
-export function VolumeRenderingOptions({
-  viewportId,
-  commandsManager,
-  volumeRenderingQualityRange,
-  servicesManager,
-}: VolumeRenderingOptionsProps): ReactElement {
+import { useViewportRendering } from '../../hooks/useViewportRendering';
+
+export function VolumeRenderingOptions({ viewportId }: { viewportId?: string } = {}): ReactElement {
+  const { volumeRenderingQualityRange } = useViewportRendering(viewportId);
  const [hasShade, setShade] = useState(false);
  return (
    <AllInOneMenu.ItemPanel>
      <VolumeRenderingQuality
        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
        volumeRenderingQualityRange={volumeRenderingQualityRange}
      />
-
-      <VolumeShift
-        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      />
+      <VolumeShift viewportId={viewportId} />
      <div className="mt-2 flex h-8 !h-[20px] w-full flex-shrink-0 items-center justify-start px-2 text-base">
        <div className="text-muted-foreground text-sm">Lighting</div>
      </div>
      <div className="bg-background mt-1 mb-1 h-px w-full"></div>
      <div className="hover:bg-accent flex h-8 w-full flex-shrink-0 items-center px-2 text-base hover:rounded">
        <VolumeShade
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
          viewportId={viewportId}
          onClickShade={setShade}
        />
      </div>
      <VolumeLighting
        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
        hasShade={hasShade}
      />
    </AllInOneMenu.ItemPanel>
@@ -1,15 +1,13 @@
 import { AllInOneMenu } from '@ohif/ui-next';
 import { Icons } from '@ohif/ui-next';
 import React, { ReactElement } from 'react';
-import { VolumeRenderingPresetsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingPresetsContent } from './VolumeRenderingPresetsContent';
+import { useSystem } from '@ohif/core';
+import { useViewportRendering } from '../../hooks/useViewportRendering';

-export function VolumeRenderingPresets({
-  viewportId,
-  servicesManager,
-  commandsManager,
-  volumeRenderingPresets,
-}: VolumeRenderingPresetsProps): ReactElement {
+export function VolumeRenderingPresets({ viewportId }: { viewportId?: string } = {}): ReactElement {
+  const { volumeRenderingPresets } = useViewportRendering(viewportId);
+  const { servicesManager } = useSystem();
  const { uiDialogService } = servicesManager.services;

  const onClickPresets = () => {
@@ -21,7 +19,6 @@ export function VolumeRenderingPresets({
      contentProps: {
        presets: volumeRenderingPresets,
        viewportId,
-        commandsManager,
      },
    });
  };
@@ -1,13 +1,13 @@
 import React, { ReactElement, useCallback, useState, useEffect } from 'react';
 import { VolumeRenderingQualityProps } from '../../types/ViewportPresets';
 import { Numeric } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';

 export function VolumeRenderingQuality({
  volumeRenderingQualityRange,
-  commandsManager,
-  servicesManager,
  viewportId,
 }: VolumeRenderingQualityProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
  const { cornerstoneViewportService } = servicesManager.services;
  const { min, max, step } = volumeRenderingQualityRange;
  const [quality, setQuality] = useState(null);
@@ -1,13 +1,13 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { Switch } from '@ohif/ui-next';
 import { VolumeShadeProps } from '../../types/ViewportPresets';
+import { useSystem } from '@ohif/core';

 export function VolumeShade({
-  commandsManager,
  viewportId,
-  servicesManager,
  onClickShade = bool => {},
 }: VolumeShadeProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
  const { cornerstoneViewportService } = servicesManager.services;
  const [shade, setShade] = useState(true);
  const [key, setKey] = useState(0);
@@ -1,12 +1,10 @@
 import React, { ReactElement, useCallback, useEffect, useState, useRef } from 'react';
 import { VolumeShiftProps } from '../../types/ViewportPresets';
 import { Numeric } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';

-export function VolumeShift({
-  viewportId,
-  commandsManager,
-  servicesManager,
-}: VolumeShiftProps): ReactElement {
+export function VolumeShift({ viewportId }: VolumeShiftProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
  const { cornerstoneViewportService } = servicesManager.services;
  const [minShift, setMinShift] = useState<number | null>(null);
  const [maxShift, setMaxShift] = useState<number | null>(null);
@@ -1,58 +1,122 @@
-import React, { ReactElement, useCallback } from 'react';
-import { AllInOneMenu } from '@ohif/ui-next';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
+import { AllInOneMenu, ScrollArea, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
+import { useViewportRendering } from '../../hooks/useViewportRendering';
 import { WindowLevelPreset } from '../../types/WindowLevel';
-import { CommandsManager } from '@ohif/core';
-import { useTranslation } from 'react-i18next';

-export type WindowLevelProps = {
-  viewportId: string;
-  presets: Array<Record<string, Array<WindowLevelPreset>>>;
-  commandsManager: CommandsManager;
-};
-
-export function WindowLevel({
-  viewportId,
-  commandsManager,
-  presets,
-}: WindowLevelProps): ReactElement {
-  const { t } = useTranslation('WindowLevelActionMenu');
-
-  const onSetWindowLevel = useCallback(
-    props => {
-      commandsManager.run({
-        commandName: 'setViewportWindowLevel',
-        commandOptions: {
-          ...props,
-          viewportId,
-        },
-        context: 'CORNERSTONE',
-      });
-    },
-    [commandsManager, viewportId]
+export function WindowLevel({ viewportId }: { viewportId?: string } = {}): ReactElement {
+  const { viewportDisplaySets } = useViewportRendering(viewportId);
+  const [activeDisplaySetUID, setActiveDisplaySetUID] = useState<string | undefined>(
+    viewportDisplaySets?.[0]?.displaySetInstanceUID
  );

+  // Use the hook with the active display set
+  const { windowLevelPresets, setWindowLevel } = useViewportRendering(viewportId, {
+    displaySetInstanceUID: activeDisplaySetUID,
+  });
+
+  const [showPreview, setShowPreview] = useState(false);
+  const [prePreviewPreset, setPrePreviewPreset] = useState<WindowLevelPreset | null>(null);
+  const [currentPreset, setCurrentPreset] = useState<WindowLevelPreset | null>(null);
+
+  const showPreviewRef = useRef(showPreview);
+  showPreviewRef.current = showPreview;
+  const prePreviewPresetRef = useRef(prePreviewPreset);
+  prePreviewPresetRef.current = prePreviewPreset;
+  const currentPresetRef = useRef(currentPreset);
+  currentPresetRef.current = currentPreset;
+
+  // Reset presets when active display set changes
+  useEffect(() => {
+    setCurrentPreset(null);
+    setPrePreviewPreset(null);
+  }, [activeDisplaySetUID]);
+
+  // Handle applying window level preset
+  const handleSetWindowLevel = (preset: WindowLevelPreset, immediate = false) => {
+    setWindowLevel({
+      windowWidth: Number(preset.window),
+      windowCenter: Number(preset.level),
+      immediate,
+    });
+  };
+
  return (
-    <AllInOneMenu.ItemPanel>
-      {presets.map((modalityPresets, modalityIndex) => (
-        <React.Fragment key={modalityIndex}>
-          {Object.entries(modalityPresets).map(([modality, presetsArray]) => (
-            <React.Fragment key={modality}>
-              <AllInOneMenu.HeaderItem>
-                {t('Modality Presets', { modality })}
-              </AllInOneMenu.HeaderItem>
-              {presetsArray.map((preset, index) => (
-                <AllInOneMenu.Item
-                  key={`${modality}-${index}`}
-                  label={preset.description}
-                  secondaryLabel={`${preset.window} / ${preset.level}`}
-                  useIconSpace={false}
-                  onClick={() => onSetWindowLevel(preset)}
-                />
+    <>
+      {viewportDisplaySets && viewportDisplaySets.length > 1 && (
+        <div className="flex h-8 w-full flex-shrink-0 items-center justify-center px-2 text-base">
+          <Tabs
+            value={activeDisplaySetUID}
+            onValueChange={displaySetUID => {
+              setActiveDisplaySetUID(displaySetUID);
+            }}
+          >
+            <TabsList>
+              {viewportDisplaySets.map(ds => (
+                <TabsTrigger
+                  key={ds.displaySetInstanceUID}
+                  value={ds.displaySetInstanceUID}
+                >
+                  {ds.Modality}
+                </TabsTrigger>
              ))}
-            </React.Fragment>
-          ))}
-        </React.Fragment>
-      ))}
-    </AllInOneMenu.ItemPanel>
+            </TabsList>
+          </Tabs>
+        </div>
+      )}
+
+      <div
+        className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
+        onClick={() => setShowPreview(!showPreview)}
+      >
+        <span className="flex-shrink-0">Preview in viewport</span>
+        <Switch
+          className="ml-auto flex-shrink-0"
+          checked={showPreview}
+          onCheckedChange={checked => {
+            setShowPreview(checked);
+
+            // When turning off preview, restore the current preset if one exists
+            if (!checked && currentPresetRef.current) {
+              handleSetWindowLevel(currentPresetRef.current, true);
+            }
+          }}
+        />
+      </div>
+
+      <AllInOneMenu.DividerItem />
+
+      <div className="h-[175px] flex-grow">
+        <ScrollArea className="h-full w-full">
+          <div className="p-1">
+            {windowLevelPresets.map((preset, index) => (
+              <AllInOneMenu.Item
+                key={index}
+                label={preset.description}
+                secondaryLabel={`${preset.window} / ${preset.level}`}
+                useIconSpace={false}
+                onClick={() => {
+                  setCurrentPreset(preset);
+                  handleSetWindowLevel(preset, true);
+                  setPrePreviewPreset(null);
+                }}
+                onMouseEnter={() => {
+                  if (showPreviewRef.current) {
+                    if (!prePreviewPresetRef.current) {
+                      setPrePreviewPreset(currentPresetRef.current || preset);
+                    }
+                    handleSetWindowLevel(preset, true);
+                  }
+                }}
+                onMouseLeave={() => {
+                  if (showPreviewRef.current && prePreviewPresetRef.current) {
+                    handleSetWindowLevel(prePreviewPresetRef.current, true);
+                  }
+                }}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </>
  );
 }
@@ -1,196 +1,97 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import classNames from 'classnames';
 import { AllInOneMenu } from '@ohif/ui-next';
-import { useViewportGrid } from '@ohif/ui-next';
 import { Colormap } from './Colormap';
 import { Colorbar } from './Colorbar';
-import { setViewportColorbar } from './Colorbar';
-import { WindowLevelPreset } from '../../types/WindowLevel';
-import { ColorbarProperties } from '../../types/Colorbar';
-import { VolumeRenderingQualityRange } from '../../types/ViewportPresets';
 import { WindowLevel } from './WindowLevel';
 import { VolumeRenderingPresets } from './VolumeRenderingPresets';
 import { VolumeRenderingOptions } from './VolumeRenderingOptions';
-import { ViewportPreset } from '../../types/ViewportPresets';
-import { VolumeViewport3D } from '@cornerstonejs/core';
-import { utilities } from '@cornerstonejs/core';
-
-export const nonWLModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
+import { useViewportRendering } from '../../hooks/useViewportRendering';

 export type WindowLevelActionMenuProps = {
  viewportId: string;
-  element: HTMLElement;
-  presets: Array<Record<string, Array<WindowLevelPreset>>>;
-  colorbarProperties: ColorbarProperties;
-  displaySets: Array<any>;
-  volumeRenderingPresets: Array<ViewportPreset>;
-  volumeRenderingQualityRange: VolumeRenderingQualityRange;
+  element?: HTMLElement;
+  align?: 'start' | 'end' | 'center';
+  side?: 'top' | 'bottom' | 'left' | 'right';
 };

 export function WindowLevelActionMenu({
  viewportId,
  element,
-  presets,
-  verticalDirection,
-  horizontalDirection,
-  commandsManager,
-  servicesManager,
-  colorbarProperties,
-  displaySets,
-  volumeRenderingPresets,
-  volumeRenderingQualityRange,
-}: withAppTypes<WindowLevelActionMenuProps>): ReactElement {
-  const {
-    colormaps,
-    colorbarContainerPosition,
-    colorbarInitialColormap,
-    colorbarTickPosition,
-    width: colorbarWidth,
-  } = colorbarProperties;
-  const { colorbarService, cornerstoneViewportService } = servicesManager.services;
-  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-  const backgroundColor = viewportInfo?.getViewportOptions().background;
-  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
+  align,
+  side,
+}: WindowLevelActionMenuProps): ReactElement {
+  return (
+    <WindowLevelActionMenuContent
+      viewportId={viewportId}
+      align={align}
+      side={side}
+    />
+  );
+}

+export function WindowLevelActionMenuContent({
+  viewportId,
+  align,
+  side,
+}: {
+  viewportId: string;
+  align?: string;
+  side?: string;
+}): ReactElement {
  const { t } = useTranslation('WindowLevelActionMenu');
+  // Use a stable key for the menu to avoid infinite re-renders
+  const menuKey = useMemo(() => `${viewportId}`, [viewportId]);

-  const [viewportGrid] = useViewportGrid();
-  const { activeViewportId } = viewportGrid;
-
-  const [vpHeight, setVpHeight] = useState(element?.clientHeight);
-  const [menuKey, setMenuKey] = useState(0);
-  const [is3DVolume, setIs3DVolume] = useState(false);
-
-  const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
-      colormaps,
-      ticks: {
-        position: colorbarTickPosition,
-      },
-      width: colorbarWidth,
-      position: colorbarContainerPosition,
-      activeColormapName: colorbarInitialColormap,
-    });
-  }, [commandsManager]);
-
-  useEffect(() => {
-    const newVpHeight = element?.clientHeight;
-    if (vpHeight !== newVpHeight) {
-      setVpHeight(newVpHeight);
-    }
-  }, [element, vpHeight]);
-
-  useEffect(() => {
-    if (!colorbarService.hasColorbar(viewportId)) {
-      return;
-    }
-    window.setTimeout(() => {
-      colorbarService.removeColorbar(viewportId);
-      onSetColorbar();
-    }, 0);
-  }, [viewportId, displaySets, viewport]);
-
-  useEffect(() => {
-    setMenuKey(menuKey + 1);
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof VolumeViewport3D) {
-      setIs3DVolume(true);
-    } else {
-      setIs3DVolume(false);
-    }
-  }, [
-    displaySets,
-    viewportId,
-    presets,
-    volumeRenderingQualityRange,
-    volumeRenderingPresets,
+  const {
+    is3DVolume,
    colorbarProperties,
-    activeViewportId,
-    viewportGrid,
-  ]);
+    windowLevelPresets,
+    volumeRenderingPresets,
+    volumeRenderingQualityRange,
+  } = useViewportRendering(viewportId);

  return (
-    <AllInOneMenu.IconMenu
-      icon="viewport-window-level"
-      verticalDirection={verticalDirection}
-      horizontalDirection={horizontalDirection}
-      iconClassName={classNames(
-        // Visible on hover and for the active viewport
-        activeViewportId === viewportId ? 'visible' : 'invisible group-hover/pane:visible',
-        'flex shrink-0 cursor-pointer rounded active:text-foreground text-highlight',
-        isLight ? ' hover:bg-primary/30' : 'hover:bg-primary/30'
-      )}
-      menuStyle={{ maxHeight: vpHeight - 32, minWidth: 218 }}
-      onVisibilityChange={() => {
-        setVpHeight(element.clientHeight);
-      }}
+    <AllInOneMenu.Menu
      menuKey={menuKey}
+      key={menuKey}
+      // the visibility is handled by the parent component
+      isVisible={true}
+      align={align}
+      side={side}
    >
      <AllInOneMenu.ItemPanel>
-        {!is3DVolume && (
-          <Colorbar
-            viewportId={viewportId}
-            displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
-            commandsManager={commandsManager}
-            servicesManager={servicesManager}
-            colorbarProperties={colorbarProperties}
-          />
-        )}
+        {!is3DVolume && <Colorbar viewportId={viewportId} />}

-        {colormaps && !is3DVolume && (
+        {colorbarProperties?.colormaps && !is3DVolume && (
          <AllInOneMenu.SubMenu
            key="colorLUTPresets"
            itemLabel="Color LUT"
            itemIcon="icon-color-lut"
            className="flex h-[calc(100%-32px)] flex-col"
          >
-            <Colormap
-              className="flex h-full w-full flex-col"
-              colormaps={colormaps}
-              viewportId={viewportId}
-              displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
-              commandsManager={commandsManager}
-              servicesManager={servicesManager}
-            />
+            <Colormap viewportId={viewportId} />
          </AllInOneMenu.SubMenu>
        )}

-        {presets && presets.length > 0 && !is3DVolume && (
+        {windowLevelPresets?.length > 0 && !is3DVolume && (
          <AllInOneMenu.SubMenu
            key="windowLevelPresets"
            itemLabel={t('Modality Window Presets')}
            itemIcon="viewport-window-level"
          >
-            <WindowLevel
-              viewportId={viewportId}
-              commandsManager={commandsManager}
-              presets={presets}
-            />
+            <WindowLevel viewportId={viewportId} />
          </AllInOneMenu.SubMenu>
        )}

-        {volumeRenderingPresets && is3DVolume && (
-          <VolumeRenderingPresets
-            servicesManager={servicesManager}
-            viewportId={viewportId}
-            commandsManager={commandsManager}
-            volumeRenderingPresets={volumeRenderingPresets}
-          />
-        )}
+        {volumeRenderingPresets && is3DVolume && <VolumeRenderingPresets viewportId={viewportId} />}

        {volumeRenderingQualityRange && is3DVolume && (
          <AllInOneMenu.SubMenu itemLabel="Rendering Options">
-            <VolumeRenderingOptions
-              viewportId={viewportId}
-              commandsManager={commandsManager}
-              volumeRenderingQualityRange={volumeRenderingQualityRange}
-              servicesManager={servicesManager}
-            />
+            <VolumeRenderingOptions viewportId={viewportId} />
          </AllInOneMenu.SubMenu>
        )}
      </AllInOneMenu.ItemPanel>
-    </AllInOneMenu.IconMenu>
+    </AllInOneMenu.Menu>
  );
 }
@@ -0,0 +1,133 @@
+import React, { ReactNode } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useViewportGrid,
+  useIconPresentation,
+} from '@ohif/ui-next';
+import { WindowLevelActionMenu } from './WindowLevelActionMenu';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+import { useViewportRendering } from '../../hooks';
+
+export function WindowLevelActionMenuWrapper(
+  props: withAppTypes<{
+    viewportId: string;
+    element?: HTMLElement;
+    location?: number;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    displaySets?: Array<AppTypes.DisplaySet>;
+    disabled?: boolean;
+    isEmbedded?: boolean;
+  }>
+): ReactNode {
+  const {
+    viewportId,
+    element,
+    location,
+    isOpen = false,
+    onOpen,
+    onClose,
+    disabled,
+    isEmbedded = false,
+    onInteraction: onInteractionProps,
+    hasEmbeddedVariantToUse,
+    ...rest
+  } = props;
+
+  const [gridState] = useViewportGrid();
+  const viewportIdToUse = viewportId || gridState.activeViewportId;
+
+  const { viewportDisplaySets: displaySets } = useViewportDisplaySets(viewportIdToUse);
+  const { servicesManager } = useSystem();
+  const { toolbarService } = servicesManager.services;
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+  const { hasColorbar, toggleColorbar } = useViewportRendering(viewportId);
+
+  const handleOpenChange = (openState: boolean) => {
+    const shouldToggleColorbar = hasColorbar && !isEmbedded;
+
+    if (isOpen && shouldToggleColorbar && openState) {
+      toggleColorbar();
+      onClose?.();
+      return;
+    }
+
+    if (!isOpen && openState && shouldToggleColorbar) {
+      toggleColorbar();
+      return;
+    }
+
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const { align, side } = toolbarService.getAlignAndSide(location);
+
+  const modalities = displaySets.map(displaySet => displaySet.supportsWindowLevel);
+
+  if (modalities.length === 0) {
+    return null;
+  }
+
+  const Icon =
+    hasColorbar && !isEmbedded && hasEmbeddedVariantToUse ? (
+      <Icons.Close className={iconClassName} />
+    ) : (
+      <Icons.ViewportWindowLevel className={iconClassName} />
+    );
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              {...rest}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <WindowLevelActionMenu
+          viewportId={viewportIdToUse}
+          element={element}
+          align={align}
+          side={side}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -1,57 +0,0 @@
-import React, { ReactNode } from 'react';
-import { nonWLModalities } from './WindowLevelActionMenu';
-
-export function getWindowLevelActionMenu({
-  viewportId,
-  element,
-  displaySets,
-  servicesManager,
-  commandsManager,
-  verticalDirection,
-  horizontalDirection,
-}: withAppTypes<{
-  viewportId: string;
-  element: HTMLElement;
-  displaySets: AppTypes.DisplaySet[];
-}>): ReactNode {
-  const { customizationService } = servicesManager.services;
-
-  const presets = customizationService.getCustomization('cornerstone.windowLevelPresets');
-  const colorbarProperties = customizationService.getCustomization('cornerstone.colorbar');
-  const { volumeRenderingPresets, volumeRenderingQualityRange } =
-    customizationService.getCustomization('cornerstone.3dVolumeRendering');
-  const WindowLevelActionMenu = customizationService.getCustomization(
-    'viewportActionMenu.windowLevelActionMenu'
-  );
-  const displaySetPresets = displaySets
-    .filter(displaySet => presets[displaySet.Modality])
-    .map(displaySet => {
-      return { [displaySet.Modality]: presets[displaySet.Modality] };
-    });
-
-  const modalities = displaySets
-    .map(displaySet => displaySet.Modality)
-    .filter(modality => !nonWLModalities.includes(modality));
-
-  if (modalities.length === 0) {
-    return null;
-  }
-
-  const WindowLevelActionMenuComponent = WindowLevelActionMenu?.component;
-
-  return (
-    <WindowLevelActionMenuComponent
-      viewportId={viewportId}
-      element={element}
-      presets={displaySetPresets}
-      verticalDirection={verticalDirection}
-      horizontalDirection={horizontalDirection}
-      commandsManager={commandsManager}
-      servicesManager={servicesManager}
-      colorbarProperties={colorbarProperties}
-      displaySets={displaySets}
-      volumeRenderingPresets={volumeRenderingPresets}
-      volumeRenderingQualityRange={volumeRenderingQualityRange}
-    />
-  );
-}
@@ -0,0 +1,11 @@
+export * from './Colorbar';
+export * from './Colormap';
+export * from './WindowLevel';
+export * from './WindowLevelActionMenu';
+export * from './WindowLevelActionMenuWrapper';
+export * from './VolumeRenderingOptions';
+export * from './VolumeRenderingPresets';
+export * from './VolumeRenderingQuality';
+export * from './VolumeLighting';
+export * from './VolumeShade';
+export * from './VolumeShift';
@@ -1,3 +1,4 @@
+import DicomUpload from './DicomUpload/DicomUpload';
 export * from './AccordionGroup';
 export * from './MeasurementTableNested';
 export * from './StudyMeasurements';
@@ -5,6 +6,7 @@ export * from './MeasurementsMenu';
 export * from './SeriesMeasurements';
 export * from './StudyMeasurementsActions';
 export * from './MeasurementsOrAdditionalFindings';
-import DicomUpload from './DicomUpload/DicomUpload';
+export * from './WindowLevelActionMenu';
+export * from './ModalityLoadBadge';

 export { DicomUpload };
@@ -0,0 +1,3 @@
+// Volume loader schemes
+export const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+export const DYNAMIC_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingDynamicImageVolume';
@@ -1,180 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useReducer,
-} from 'react';
-import PropTypes from 'prop-types';
-
-import { Types, ViewportActionCornersLocations } from '@ohif/ui-next';
-import ViewportActionCornersService, {
-  ActionComponentInfo,
-} from '../services/ViewportActionCornersService/ViewportActionCornersService';
-
-interface StateComponentInfo extends Types.ViewportActionCornersComponentInfo {
-  indexPriority: number;
-}
-
-type State = Record<string, Record<ViewportActionCornersLocations, Array<StateComponentInfo>>>;
-
-const DEFAULT_STATE: State = {
-  // default here is the viewportId of the default viewport
-  default: {
-    [ViewportActionCornersLocations.topLeft]: [],
-    [ViewportActionCornersLocations.topRight]: [],
-    [ViewportActionCornersLocations.bottomLeft]: [],
-    [ViewportActionCornersLocations.bottomRight]: [],
-  },
-  // [anotherViewportId]: { ..... }
-};
-
-export const ViewportActionCornersContext = createContext(DEFAULT_STATE);
-
-export function ViewportActionCornersProvider({ children, service }) {
-  const viewportActionCornersReducer = (state, action) => {
-    switch (action.type) {
-      case 'ADD_ACTION_COMPONENT': {
-        const { viewportId, id, component, location, indexPriority } = action.payload;
-        // Get the components at the specified location of the specified viewport.
-        let locationComponents = state?.[viewportId]?.[location]
-          ? [...state[viewportId][location]]
-          : [];
-
-        // If the component (id) already exists at the location specified in the payload,
-        // then it must be replaced with the component in the payload so first
-        // remove it from that location.
-        const deletionIndex = locationComponents.findIndex(component => component.id === id);
-        if (deletionIndex !== -1) {
-          locationComponents = [
-            ...locationComponents.slice(0, deletionIndex),
-            ...locationComponents.slice(deletionIndex + 1),
-          ];
-        }
-
-        // Insert the component from the payload but
-        // do not insert an undefined or null component.
-        if (component) {
-          let insertionIndex;
-          const isRightSide =
-            location === ViewportActionCornersLocations.topRight ||
-            location === ViewportActionCornersLocations.bottomRight;
-
-          if (indexPriority === undefined) {
-            // If no indexPriority is provided, add it to the appropriate end
-            insertionIndex = isRightSide ? 0 : locationComponents.length;
-          } else {
-            if (isRightSide) {
-              insertionIndex = locationComponents.findIndex(
-                component => indexPriority > component.indexPriority
-              );
-            } else {
-              insertionIndex = locationComponents.findIndex(
-                component => indexPriority <= component.indexPriority
-              );
-            }
-            if (insertionIndex === -1) {
-              // If no suitable position found, add to the appropriate end
-              insertionIndex = isRightSide ? 0 : locationComponents.length;
-            }
-          }
-
-          const defaultPriority = isRightSide ? Number.MIN_SAFE_INTEGER : Number.MAX_SAFE_INTEGER;
-
-          locationComponents = [
-            ...locationComponents.slice(0, insertionIndex),
-            {
-              id,
-              component,
-              indexPriority: indexPriority ?? defaultPriority,
-            },
-            ...locationComponents.slice(insertionIndex),
-          ];
-        }
-
-        return {
-          ...state,
-          [viewportId]: {
-            ...state[viewportId],
-            [location]: locationComponents,
-          },
-        };
-      }
-      case 'CLEAR_ACTION_COMPONENTS': {
-        const viewportId = action.payload;
-        const nextState = { ...state };
-        delete nextState[viewportId];
-        return nextState;
-      }
-      default:
-        return { ...state };
-    }
-  };
-
-  const [viewportActionCornersState, dispatch] = useReducer(
-    viewportActionCornersReducer,
-    DEFAULT_STATE
-  );
-
-  const getState = useCallback(() => {
-    return viewportActionCornersState;
-  }, [viewportActionCornersState]);
-
-  const addComponent = useCallback(
-    (actionComponentInfo: ActionComponentInfo) => {
-      dispatch({ type: 'ADD_ACTION_COMPONENT', payload: actionComponentInfo });
-    },
-    [dispatch]
-  );
-
-  const addComponents = useCallback(
-    (actionComponentInfos: Array<ActionComponentInfo>) => {
-      actionComponentInfos.forEach(actionComponentInfo =>
-        dispatch({ type: 'ADD_ACTION_COMPONENT', payload: actionComponentInfo })
-      );
-    },
-    [dispatch]
-  );
-
-  const clear = useCallback(
-    (viewportId: string) => dispatch({ type: 'CLEAR_ACTION_COMPONENTS', payload: viewportId }),
-    [dispatch]
-  );
-
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({
-        getState,
-        addComponent,
-        addComponents,
-        clear,
-      });
-    }
-  }, [getState, service, addComponent, addComponents, clear]);
-
-  const viewportCornerActions = {
-    getState,
-    addComponent: props => service.addComponent(props),
-    addComponents: props => service.addComponents(props),
-    clear: props => service.clear(props),
-  };
-
-  const contextValue = useMemo(
-    () => [viewportActionCornersState, viewportCornerActions],
-    [viewportActionCornersState, viewportCornerActions]
-  );
-
-  return (
-    <ViewportActionCornersContext.Provider value={contextValue}>
-      {children}
-    </ViewportActionCornersContext.Provider>
-  );
-}
-
-ViewportActionCornersProvider.propTypes = {
-  children: PropTypes.node,
-  service: PropTypes.instanceOf(ViewportActionCornersService).isRequired,
-};
-
-export const useViewportActionCornersContext = () => useContext(ViewportActionCornersContext);
@@ -1,13 +1,93 @@
 import { colormaps } from '../utils/colormaps';
+import {
+  ColorbarPositionType,
+  TickPositionType,
+  PositionStylesMapType,
+  PositionTickStylesMapType,
+  ContainerStyleType,
+  TickStyleType,
+  ColorbarProperties,
+} from '../types/Colorbar';
+import { ColorMapPreset } from '../types/Colormap';

+const defaultPosition: ColorbarPositionType = 'bottom';
 const DefaultColormap = 'Grayscale';

-export default {
-  'cornerstone.colorbar': {
-    width: '16px',
-    colorbarTickPosition: 'left',
-    colormaps,
-    colorbarContainerPosition: 'right',
-    colorbarInitialColormap: DefaultColormap,
+const positionStyles: PositionStylesMapType = {
+  left: { width: '15px' },
+  right: { width: '15px' },
+  bottom: { height: '15px' },
+};
+
+// Typed position-specific tick styles
+const positionTickStyles: PositionTickStylesMapType = {
+  bottom: {
+    position: 'top',
+    style: {
+      labelOffset: 5,
+      labelMargin: 13,
+    },
+  },
+  right: {
+    position: 'left',
+    style: {
+      labelMargin: 5,
+    },
+  },
+  left: {
+    position: 'right',
+    style: {
+      labelMargin: 5,
+    },
+  },
+  top: {
+    position: 'bottom',
+    style: {
+      labelMargin: 5,
+    },
  },
 };
+
+// Get recommended tick position for a given colorbar position
+const getTickPositionForPosition = (position: ColorbarPositionType): TickPositionType => {
+  if (position === 'bottom') {
+    return 'top';
+  } else if (position === 'top') {
+    return 'bottom';
+  } else if (position === 'left') {
+    return 'right';
+  } else if (position === 'right') {
+    return 'left';
+  }
+
+  return positionTickStyles[position]?.position || 'top';
+};
+
+// Container styles for colorbar
+const containerStyles: ContainerStyleType = {
+  cursor: 'initial',
+};
+
+// Tick styling
+const tickStyles: TickStyleType = {
+  font: '12px Arial',
+  color: '#fff',
+  maxNumTicks: 6,
+  tickSize: 5,
+  tickWidth: 1,
+};
+
+const colorbarConfig: Partial<ColorbarProperties> = {
+  colorbarTickPosition: getTickPositionForPosition(defaultPosition),
+  colormaps: colormaps as unknown as Record<string, ColorMapPreset>,
+  colorbarContainerPosition: defaultPosition,
+  colorbarInitialColormap: DefaultColormap,
+  positionStyles,
+  positionTickStyles,
+  containerStyles,
+  tickStyles,
+};
+
+export default {
+  'cornerstone.colorbar': colorbarConfig,
+};
@@ -0,0 +1,23 @@
+export default {
+  'cornerstone.modalityOverlayDefaultColorMaps': {
+    defaultSettings: {
+      PT: {
+        colormap: 'hsv',
+        // Note: Right now, there is a nonlinear relationship between the opacity value
+        // below and how it will get applied to the image. The limitation is in rendering.
+        // We are working on this and will remove this note when it's fixed.
+        // But don't expect 0.5 to be 50% opacity, but rather close to that.
+        opacity: 0.5,
+      },
+      RTDOSE: {
+        colormap: 'Isodose',
+        // Note: Right now, there is a nonlinear relationship between the opacity value
+        // below and how it will get applied to the image. The limitation is in rendering.
+        // We are working on this and will remove this note when it's fixed.
+        // But don't expect 0.5 to be 50% opacity, but rather close to that.
+
+        opacity: 0.5,
+      },
+    },
+  },
+};
@@ -1,14 +0,0 @@
-import viewportActionCornersService from '../services/ViewportActionCornersService/ViewportActionCornersService';
-import { WindowLevelActionMenu } from '../components/WindowLevelActionMenu/WindowLevelActionMenu';
-
-export default {
-  'viewportActionMenu.windowLevelActionMenu': {
-    enabled: true,
-    location: viewportActionCornersService.LOCATIONS.topRight,
-    component: WindowLevelActionMenu,
-  },
-  'viewportActionMenu.segmentationOverlay': {
-    enabled: true,
-    location: viewportActionCornersService.LOCATIONS.topRight,
-  },
-};
@@ -6,11 +6,11 @@ import viewportClickCommandsCustomization from './customizations/viewportClickCo
 import measurementsCustomization from './customizations/measurementsCustomization';
 import volumeRenderingCustomization from './customizations/volumeRenderingCustomization';
 import colorbarCustomization from './customizations/colorbarCustomization';
+import modalityColorMapCustomization from './customizations/modalityColorMapCustomization';
 import windowLevelPresetsCustomization from './customizations/windowLevelPresetsCustomization';
 import miscCustomization from './customizations/miscCustomization';
 import captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
 import viewportDownloadWarningCustomization from './customizations/viewportDownloadWarningCustomization';
-import viewportActionMenuCustomizations from './customizations/viewportActionMenuCustomizations';

 function getCustomizationModule({ commandsManager, servicesManager }) {
  return [
@@ -25,11 +25,11 @@ function getCustomizationModule({ commandsManager, servicesManager }) {
        ...measurementsCustomization,
        ...volumeRenderingCustomization,
        ...colorbarCustomization,
+        ...modalityColorMapCustomization,
        ...windowLevelPresetsCustomization,
        ...miscCustomization,
        ...captureViewportModalCustomization,
        ...viewportDownloadWarningCustomization,
-        ...viewportActionMenuCustomizations,
      },
    },
  ];
@@ -33,10 +33,12 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
  };

  const wrappedPanelSegmentationWithTools = ({ configuration }) => {
+    const { toolbarService } = servicesManager.services;
+
    return (
      <>
        <Toolbox
-          buttonSectionId="segmentationToolbox"
+          buttonSectionId={toolbarService.sections.segmentationToolbox}
          title="Segmentation Tools"
        />
        <PanelSegmentation
@@ -1,4 +1,5 @@
 import OHIF from '@ohif/core';
+import i18n from '@ohif/i18n';
 import { utilities as csUtils, Enums as csEnums } from '@cornerstonejs/core';
 import dcmjs from 'dcmjs';
 import { dicomWebUtils } from '@ohif/extension-default';
@@ -16,6 +17,7 @@ const SOPClassHandlerId =
  '@ohif/extension-cornerstone.sopClassHandlerModule.DicomMicroscopySopClassHandler';

 function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
+  const dataSource = extensionManager.getActiveDataSource()[0];
  // If the series has no instances, stop here
  if (!instances || !instances.length) {
    throw new Error('No instances were provided');
@@ -32,22 +34,6 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
      currentFrames = framesI;
    }
  }
-  let imageIdForThumbnail = null;
-  const dataSource = extensionManager.getActiveDataSource()[0];
-  if (singleFrameInstance) {
-    if (currentFrames == 1) {
-      // Not all DICOM server implementations support thumbnail service,
-      // So if we have a single-frame image, we will prefer it.
-      imageIdForThumbnail = singleFrameInstance.imageId;
-    }
-    if (!imageIdForThumbnail) {
-      // use the thumbnail service provided by DICOM server
-      imageIdForThumbnail = dataSource.getImageIdsForInstance({
-        instance: singleFrameInstance,
-        thumbnail: true,
-      });
-    }
-  }

  const {
    FrameOfReferenceUID,
@@ -107,11 +93,15 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
    instance,
    numImageFrames: 0,
    numInstances: 1,
-    imageIdForThumbnail, // thumbnail image
    others: instances, // all other level instances in the image Pyramid
    instances,
    othersFrameOfReferenceUID,
    imageIds: instances.map(instance => instance.imageId),
+    getThumbnailSrc: dataSource.retrieve.getGetThumbnailSrc?.(
+      singleFrameInstance,
+      singleFrameInstance.imageId
+    ),
+    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SM')}`,
  };
  // The microscopy viewer directly accesses the metadata already loaded, and
  // uses the DICOMweb client library directly for loading, so it has to be
Author	SHA1	Message	Date
ohif-bot	a8d438d8f7	chore(version): Update package versions [skip ci]	2025-05-26 23:13:44 +00:00
ohif-bot	fec45860b8	chore(version): version.json [skip ci]	2025-05-26 23:13:38 +00:00
Alireza	b9ca76ea67	fix: e2e playwright tests runnigns (#5070 )	2025-05-26 19:09:26 -04:00
ohif-bot	ffc7d2bd6b	chore(version): Update package versions [skip ci]	2025-05-26 20:12:50 +00:00
ohif-bot	1d91871d2c	chore(version): version.json [skip ci]	2025-05-26 20:12:43 +00:00
Joe Boccanfuso	ebfa1ff5f2	fix(capture): Disable or enable the tool group based on the show flag. (#5069 )	2025-05-26 16:08:17 -04:00
Joe Boccanfuso	1873a8405f	fix(frame-view): After pan and/or zoom, stack scroll is now synchronized for frame view (#5067 )	2025-05-26 16:08:01 -04:00
ohif-bot	df35cb55b6	chore(version): Update package versions [skip ci]	2025-05-26 04:09:21 +00:00
ohif-bot	9247d07ccd	chore(version): version.json [skip ci]	2025-05-26 04:09:15 +00:00
Joe Boccanfuso	14f5f0c074	fix(router): Expose the react router from the worklist too. (#5062 )	2025-05-26 00:04:16 -04:00
ohif-bot	c2cc0832f3	chore(version): Update package versions [skip ci]	2025-05-24 02:16:33 +00:00
ohif-bot	10d64322bf	chore(version): version.json [skip ci]	2025-05-24 02:16:27 +00:00
Joe Boccanfuso	cb814e6a60	fix(context-menu): Move the reposition logic from the context menu to the dialog component. (#5060 )	2025-05-23 22:12:08 -04:00
ohif-bot	fa9bbe3afc	chore(version): Update package versions [skip ci]	2025-05-16 18:20:40 +00:00
ohif-bot	7f2f739b1b	chore(version): version.json [skip ci]	2025-05-16 18:20:34 +00:00
Alexis jankowski	dcde841839	fix(cli): removing missing imports in mode template (#5049 )	2025-05-16 14:11:01 -04:00
ohif-bot	c784b7e6d5	chore(version): Update package versions [skip ci]	2025-05-16 17:53:12 +00:00
ohif-bot	0d8f43fa30	chore(version): version.json [skip ci]	2025-05-16 17:53:05 +00:00
Alireza	9b1b501d83	fix: backward compatibility with toolbar service (#5052 )	2025-05-16 13:42:35 -04:00
Joe Boccanfuso	c6b28654b5	fix(segmentation): segmentation stats calculations were not being done on a subsequent navigation to a mode (#5046 )	2025-05-16 13:33:57 -04:00
ohif-bot	fb1c2673a8	chore(version): Update package versions [skip ci]	2025-05-16 17:32:07 +00:00
ohif-bot	b6b06ed09e	chore(version): version.json [skip ci]	2025-05-16 17:32:01 +00:00
Joe Boccanfuso	338bd865c3	feat(viewport): Added getter for presentation id provider. (#5053 )	2025-05-16 13:22:09 -04:00
ohif-bot	cf1018c779	chore(version): Update package versions [skip ci]	2025-05-15 21:22:31 +00:00
ohif-bot	0f12fa16bc	chore(version): version.json [skip ci]	2025-05-15 21:22:25 +00:00
Dan Rukasandsedghi	04ab79f8fb	ui(feat): Adds light/dark mode support for viewport overlay text and markers (#5041 ) Co-authored-by: sedghi <ar.sedghi@gmail.com>	2025-05-15 17:12:53 -04:00
ohif-bot	1fd39626e7	chore(version): Update package versions [skip ci]	2025-05-15 16:18:22 +00:00
ohif-bot	5e406a8c93	chore(version): version.json [skip ci]	2025-05-15 16:18:15 +00:00
Alireza	7c15bb8901	feat(actions): simplify action corner api through the toolbarService (#5033 )	2025-05-15 12:08:12 -04:00
ohif-bot	f71b88e639	chore(version): Update package versions [skip ci]	2025-05-13 15:29:21 +00:00
ohif-bot	faaaccdfa7	chore(version): version.json [skip ci]	2025-05-13 15:29:14 +00:00
Celian-abd	da51e6e3c1	fix: Added missing export for LayoutSelector in ui-next (#5040 )	2025-05-13 11:24:25 -04:00
ohif-bot	4a91dfdfa5	chore(version): Update package versions [skip ci]	2025-05-12 13:39:55 +00:00
ohif-bot	c2534198ad	chore(version): version.json [skip ci]	2025-05-12 13:39:48 +00:00
Dan	950453fd70	fix(NotFoundStudy): Fixed the viewer not-found page when showStudyList: false (#5035 )	2025-05-12 09:35:33 -04:00
ohif-bot	f4ba9b3cc6	chore(version): Update package versions [skip ci]	2025-05-09 12:24:02 +00:00
ohif-bot	7610b4c6a5	chore(version): version.json [skip ci]	2025-05-09 12:23:55 +00:00
taliabeckie	349306da40	fix(DicomWebProxyDataSource): bug fix to save Segmentation files back to Kheops (#5028 )	2025-05-09 08:19:20 -04:00
ohif-bot	66322c68a2	chore(version): Update package versions [skip ci]	2025-05-08 16:56:20 +00:00
ohif-bot	4e03f34fd4	chore(version): version.json [skip ci]	2025-05-08 16:56:14 +00:00
Alireza	1445e12124	feat(app): Decouple colorbar UI from service and enable action menu programatic control (#5018 )	2025-05-08 12:51:30 -04:00
ohif-bot	f14d9ebdd7	chore(version): Update package versions [skip ci]	2025-05-08 16:49:34 +00:00
ohif-bot	a3bf972177	chore(version): version.json [skip ci]	2025-05-08 16:49:26 +00:00
Bill WallaceandMartin Bellehumeur, M. Eng.	578c3939f0	feat(thumbnails): Enhance DICOM Thumbnail Rendering with different strategies (#5004 ) Co-authored-by: Martin Bellehumeur, M. Eng. <23396581+mbellehumeur@users.noreply.github.com>	2025-05-08 12:44:56 -04:00
ohif-bot	dee6909a99	chore(version): Update package versions [skip ci]	2025-05-07 21:41:38 +00:00
ohif-bot	12094cc77a	chore(version): version.json [skip ci]	2025-05-07 21:41:32 +00:00
Alireza	a5ea3e15c7	fix(orientationMarker): MPR orientation change should get reflected too (#5020 )	2025-05-07 17:37:12 -04:00
ohif-bot	f412dc254b	chore(version): Update package versions [skip ci]	2025-05-07 20:24:55 +00:00
ohif-bot	c0ed128fb7	chore(version): version.json [skip ci]	2025-05-07 20:24:49 +00:00
Rafael Osipov	c829270c80	feat: add locale files for Russian language, translated texts in locale json files to Russian language. (#4984 )	2025-05-07 16:20:10 -04:00
ohif-bot	a16d612a8a	chore(version): Update package versions [skip ci]	2025-05-06 15:10:20 +00:00
ohif-bot	5f94ebe81a	chore(version): version.json [skip ci]	2025-05-06 15:10:13 +00:00
Ibrahim	8218a9d034	feat(i18n): add Arabic translations (#5013 )	2025-05-06 11:05:34 -04:00
ohif-bot	4b94f18f7c	chore(version): Update package versions [skip ci]	2025-05-05 20:40:11 +00:00
ohif-bot	8e7e9ca02f	chore(version): version.json [skip ci]	2025-05-05 20:40:04 +00:00
Alireza	cd4e6408bc	feat(data overlay): add foreground background control plus orientation change in the UI and add RTDOSE support (#5007 )	2025-05-05 16:35:05 -04:00
ohif-bot	c1fced0573	chore(version): Update package versions [skip ci]	2025-05-05 15:32:36 +00:00
ohif-bot	e41019f2b3	chore(version): version.json [skip ci]	2025-05-05 15:32:30 +00:00
Alireza	383f45823c	refactor(viewport): Remove resize detector and optimize viewport resizing logic (#5006 )	2025-05-05 11:27:26 -04:00
ohif-bot	6337d2e9cb	chore(version): Update package versions [skip ci]	2025-05-02 18:50:57 +00:00
ohif-bot	e987710908	chore(version): version.json [skip ci]	2025-05-02 18:50:50 +00:00
Pedro Köhler	7dbe5e37b0	feat: improve menu modals customizations (#5011 )	2025-05-02 14:45:39 -04:00
ohif-bot	ff974e2a03	chore(version): Update package versions [skip ci]	2025-05-02 18:10:04 +00:00
ohif-bot	cccf74d6ea	chore(version): version.json [skip ci]	2025-05-02 18:09:57 +00:00
Alireza	4be8495335	fix/remove legacy ui (#5010 )	2025-05-02 14:05:40 -04:00
ohif-bot	1cb8d328a4	chore(version): Update package versions [skip ci]	2025-05-01 22:22:48 +00:00
ohif-bot	2c8dda01ae	chore(version): version.json [skip ci]	2025-05-01 22:22:42 +00:00
Alireza	4e185e4b21	docs: add llm txt (#5009 )	2025-05-01 18:13:21 -04:00
ohif-bot	4732e8093e	chore(version): Update package versions [skip ci]	2025-05-01 18:51:19 +00:00
ohif-bot	984471e972	chore(version): version.json [skip ci]	2025-05-01 18:51:13 +00:00
Julia Young	25cb71b3f6	docs: clarify terminology for study, series, and display sets (#5000 )	2025-05-01 14:46:21 -04:00
ohif-bot	0e75f6d62c	chore(version): Update package versions [skip ci]	2025-04-30 16:29:06 +00:00
ohif-bot	d75b3e25b6	chore(version): version.json [skip ci]	2025-04-30 16:28:59 +00:00
Tang Cheng	0bb9b17636	Fix: issue #4759 Enable proper DICOM image rendering when Rescale parameters are set to null (#5003 )	2025-04-30 12:24:06 -04:00
ohif-bot	b21ee9bc5b	chore(version): Update package versions [skip ci]	2025-04-29 18:58:50 +00:00
ohif-bot	7ed0f6d53b	chore(version): version.json [skip ci]	2025-04-29 18:58:44 +00:00
Alireza	98f8187dfe	fix(referencelines): and bring back the notification for worker updates but disallow duplication (#5005 )	2025-04-29 14:53:37 -04:00
ohif-bot	4643d6dc40	chore(version): Update package versions [skip ci]	2025-04-29 17:02:30 +00:00
ohif-bot	258b353269	chore(version): version.json [skip ci]	2025-04-29 17:02:23 +00:00
devin-ai-integration[bot]andAlireza Sedghi	0f39496290	fix(template): Update mode template to match current implementation (OHI-1833) (#4998 ) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Alireza Sedghi <ar.sedghi@gmail.com>	2025-04-29 12:57:24 -04:00
				`@@ -0,0 +1 @@`
				`export { default } from './AdvancedRenderingControls';`
				`@@ -0,0 +1 @@`
				`export { default } from './ModalityLoadBadge';`
				`@@ -0,0 +1 @@`
				`export { default } from './TrackingStatus';`