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

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Alireza Sedghi <ar.sedghi@gmail.com>

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@3.3.1
+  cypress: cypress-io/cypress@3.4.2
 
 defaults: &defaults
   docker:

.eslintrc.json

@@ -18,7 +18,8 @@
   },
   "rules": {
     // Enforce consistent brace style for all control statements for readability
-    "curly": "error"
+    "curly": "error",
+    "import/no-anonymous-default-export": "off"
   },
   "globals": {
     "cy": true,

.github/workflows/playwright.yml

@@ -9,7 +9,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.49.0-noble
+      image: mcr.microsoft.com/playwright:v1.50.0-noble
     strategy:
       fail-fast: false
       matrix:

CHANGELOG.md

@@ -3,6 +3,295 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+
+### Features
+
+* improve dicom tag browser with nested rows ([#4451](https://github.com/OHIF/Viewers/issues/4451)) ([0b5836c](https://github.com/OHIF/Viewers/commit/0b5836ca1a908e152336752672b196f0d533f4f9))
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+
+### Bug Fixes
+
+* depandabot ([#4786](https://github.com/OHIF/Viewers/issues/4786)) ([d8a6e79](https://github.com/OHIF/Viewers/commit/d8a6e79df008139f7f2f45054b73baf8cd52fb40))
+* right panel for the create mode cli command ([#4788](https://github.com/OHIF/Viewers/issues/4788)) ([5712e91](https://github.com/OHIF/Viewers/commit/5712e91ca1d939ff3c36615d3cf1a1f6f0051c4f))
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+
+### Features
+
+* add viewport overlays to microscopy mode ([#4776](https://github.com/OHIF/Viewers/issues/4776)) ([084a10f](https://github.com/OHIF/Viewers/commit/084a10f7835acab6a851922850c474bc9c7b864b))
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+
+### Bug Fixes
+
+* add commandsManager to MoreDropdownMenu onClick props ([#4765](https://github.com/OHIF/Viewers/issues/4765)) ([bbf1a19](https://github.com/OHIF/Viewers/commit/bbf1a19676b2b345a0f911dde319e5ffefe29fa6))
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+
+### Bug Fixes
+
+* **core:** Address 3D reconstruction and Android compatibility issues and clean up 4D data mode ([#4762](https://github.com/OHIF/Viewers/issues/4762)) ([149d6d0](https://github.com/OHIF/Viewers/commit/149d6d049cd333b9e5846576b403ff387558a66f))
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+
+### Bug Fixes
+
+* changing colormap for second volume in fusion viewport ([#4746](https://github.com/OHIF/Viewers/issues/4746)) ([8996df8](https://github.com/OHIF/Viewers/commit/8996df80e45c97ad5847ebbd19291cd772a2163d))
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+
+### Features
+
+* **ui:** Add support for Custom Modal component in Modal Service ([#4752](https://github.com/OHIF/Viewers/issues/4752)) ([2c183aa](https://github.com/OHIF/Viewers/commit/2c183aa4a777d7b5a0417ebcc8576a0fc2631ad2))
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+
+### Features
+
+* **ui:** customization option for viewport notification ([#4638](https://github.com/OHIF/Viewers/issues/4638)) ([8acbd76](https://github.com/OHIF/Viewers/commit/8acbd760d801dcaf624c5d9fb636a029201b91e1))
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+
+### Bug Fixes
+
+* **context-menu:**  Fixing regression introduced by PR [#4727](https://github.com/OHIF/Viewers/issues/4727) ([#4760](https://github.com/OHIF/Viewers/issues/4760)) ([12d3db2](https://github.com/OHIF/Viewers/commit/12d3db2dbc80438df60139c67e9bcf0a610532d6))
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+
+### Bug Fixes
+
+* **measurement label auto-completion:** Customization of measurement label auto-completion fails for measurements following arrow annotations. ([#4739](https://github.com/OHIF/Viewers/issues/4739)) ([e035ef1](https://github.com/OHIF/Viewers/commit/e035ef1dcc72ecbe2a757e3b814551d768d7e610))
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+
+### Bug Fixes
+
+* **store-segmentation:** storing segmentations was hitting the wrong command resulting in an undefined datasource ([#4755](https://github.com/OHIF/Viewers/issues/4755)) ([9b8e5cf](https://github.com/OHIF/Viewers/commit/9b8e5cfd1a6121a58991c0f75660a2fd9913a4e7))
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+
+### Features
+
+* Add customization support for more UI components  ([#4634](https://github.com/OHIF/Viewers/issues/4634)) ([f15eb44](https://github.com/OHIF/Viewers/commit/f15eb44b4cf49de1b73a22512571cec02effaef3))
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+
+### Bug Fixes
+
+* Remove non-functional Tailwind class for SegmentationPanel ([#4745](https://github.com/OHIF/Viewers/issues/4745)) ([32017d1](https://github.com/OHIF/Viewers/commit/32017d15a4c11e0cb7717c13da022a01ee152ba5))
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+
+### Bug Fixes
+
+* publish dependency ([#4753](https://github.com/OHIF/Viewers/issues/4753)) ([0cb6106](https://github.com/OHIF/Viewers/commit/0cb6106d0fa576348ca3324685d5768b6ec80572))
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+
+### Bug Fixes
+
+* typo in pet_series_module ([#4748](https://github.com/OHIF/Viewers/issues/4748)) ([f10683c](https://github.com/OHIF/Viewers/commit/f10683c667ea8f20c8d3e99ee0fb206522757b71))
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+
+### Features
+
+* **customization:** enable custom onDropHandler for viewportGrid ([#4641](https://github.com/OHIF/Viewers/issues/4641)) ([054b262](https://github.com/OHIF/Viewers/commit/054b262e9cbeb0f44de65d05641efe1e8944a4f5))
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+
+### Bug Fixes
+
+* **dependencies:** Update dcmjs library and improve documentation links ([#4741](https://github.com/OHIF/Viewers/issues/4741)) ([d554f02](https://github.com/OHIF/Viewers/commit/d554f02f7cdb876e4132fb94e3b3df8d11b7bb5c))
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+
+### Features
+
+* **side-panels:** Added resize handle interactive feedback for side panels ([#4734](https://github.com/OHIF/Viewers/issues/4734)) ([6abb095](https://github.com/OHIF/Viewers/commit/6abb095b8a39c5ae4f8df8852b3ddb3249ec463f))
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+
+### Bug Fixes
+
+* for initialImageIndex mismatch issue for loading SR after disabling prompts ([#4732](https://github.com/OHIF/Viewers/issues/4732)) ([8e3e208](https://github.com/OHIF/Viewers/commit/8e3e2085d45eba230d0210849b65a6e609c9d81a))
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+
+### Bug Fixes
+
+* **context menu:** Context menus for edge-proximate measurements are partially obscured. ([#4727](https://github.com/OHIF/Viewers/issues/4727)) ([61699d0](https://github.com/OHIF/Viewers/commit/61699d00b6ce1e53631fd8c01e783701e01a7373))
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+
+### Features
+
+* **static-wado:** add support for case-insensitive searching ([#4603](https://github.com/OHIF/Viewers/issues/4603)) ([ac6e674](https://github.com/OHIF/Viewers/commit/ac6e674b4d094f942556d045178011bbf3f81796))
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+
+### Bug Fixes
+
+* **docs:** image in customization ([#4735](https://github.com/OHIF/Viewers/issues/4735)) ([28fb921](https://github.com/OHIF/Viewers/commit/28fb92108988c3304344690792947c847bad72a6))
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+
+### Features
+
+* delete active annotation using backspace/delete key ([#4722](https://github.com/OHIF/Viewers/issues/4722)) ([d6f0092](https://github.com/OHIF/Viewers/commit/d6f0092a3236cecb5d04ec46c8ad01600500831e))
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 

README.md

@@ -135,7 +135,7 @@ Here is a schematic representation of our development workflow:
 
 ### Requirements
 
-- [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install)
+- [Yarn 1.20.0+](https://yarnpkg.com/en/docs/install)
 - [Node 18+](https://nodejs.org/en/)
 - Yarn Workspaces should be enabled on your machine:
   - `yarn config set workspaces-experimental true`

addOns/externals/devDependencies/CHANGELOG.md

@@ -3,6 +3,222 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+**Note:** Version bump only for package @externals/devDependencies
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @externals/devDependencies

addOns/externals/devDependencies/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@externals/devDependencies",
   "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "license": "MIT",
   "private": true,
   "engines": {

addOns/externals/dicom-microscopy-viewer/CHANGELOG.md

@@ -3,6 +3,222 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+**Note:** Version bump only for package @externals/dicom-microscopy-viewer
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @externals/dicom-microscopy-viewer

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

@@ -1,7 +1,7 @@
 {
   "name": "@externals/dicom-microscopy-viewer",
   "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "license": "MIT",
   "dependencies": {
     "dicom-microscopy-viewer": "^0.46.1"

addOns/package.json

@@ -38,7 +38,7 @@
   "resolutions": {
     "**/@babel/runtime": "^7.20.13",
     "commander": "8.3.0",
-    "dcmjs": ">=0.33.0",
+    "dcmjs": "0.38.0",
     "dicomweb-client": ">=0.10.4",
     "nth-check": "^2.1.1",
     "trim-newlines": "^5.0.0",

commit.txt

@@ -1 +1 @@
-d9abc3da8d94d6c5ab0cc5af25a5f61849905a35
+0b5836ca1a908e152336752672b196f0d533f4f9

extensions/cornerstone-dicom-pmap/CHANGELOG.md

@@ -3,6 +3,228 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+
+### Bug Fixes
+
+* **core:** Address 3D reconstruction and Android compatibility issues and clean up 4D data mode ([#4762](https://github.com/OHIF/Viewers/issues/4762)) ([149d6d0](https://github.com/OHIF/Viewers/commit/149d6d049cd333b9e5846576b403ff387558a66f))
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+
+### Features
+
+* Add customization support for more UI components  ([#4634](https://github.com/OHIF/Viewers/issues/4634)) ([f15eb44](https://github.com/OHIF/Viewers/commit/f15eb44b4cf49de1b73a22512571cec02effaef3))
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-pmap

extensions/cornerstone-dicom-pmap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "description": "DICOM Parametric Map read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.70",
-    "@ohif/extension-cornerstone": "3.10.0-beta.70",
-    "@ohif/extension-default": "3.10.0-beta.70",
-    "@ohif/i18n": "3.10.0-beta.70",
+    "@ohif/core": "3.10.0-beta.97",
+    "@ohif/extension-cornerstone": "3.10.0-beta.97",
+    "@ohif/extension-default": "3.10.0-beta.97",
+    "@ohif/i18n": "3.10.0-beta.97",
     "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": "^2.17.2",
-    "@cornerstonejs/core": "^2.17.2",
+    "@cornerstonejs/adapters": "^2.19.3",
+    "@cornerstonejs/core": "^2.19.3",
     "@kitware/vtk.js": "32.1.1",
     "react-color": "^2.19.3"
   }

extensions/cornerstone-dicom-pmap/src/viewports/OHIFCornerstonePMAPViewport.tsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { LoadingIndicatorTotalPercent } from '@ohif/ui';
 import { useViewportGrid } from '@ohif/ui-next';
 
 function OHIFCornerstonePMAPViewport(props: withAppTypes) {
@@ -13,7 +12,7 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
     extensionManager,
   } = props;
   const viewportId = viewportOptions.viewportId;
-  const { displaySetService, segmentationService, uiNotificationService } =
+  const { displaySetService, segmentationService, uiNotificationService, customizationService } =
     servicesManager.services;
 
   // PMAP viewport will always have a single display set
@@ -21,6 +20,10 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
     throw new Error('PMAP viewport must have a single display set');
   }
 
+  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
+    'ui.loadingIndicatorTotalPercent'
+  );
+
   const pmapDisplaySet = displaySets[0];
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const referencedDisplaySetRef = useRef(null);

extensions/cornerstone-dicom-rt/CHANGELOG.md

@@ -3,6 +3,228 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+
+### Features
+
+* Add customization support for more UI components  ([#4634](https://github.com/OHIF/Viewers/issues/4634)) ([f15eb44](https://github.com/OHIF/Viewers/commit/f15eb44b4cf49de1b73a22512571cec02effaef3))
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt

extensions/cornerstone-dicom-rt/package.json

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

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

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

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui';
 import { useViewportGrid } from '@ohif/ui-next';
 
 import promptHydrateRT from '../utils/promptHydrateRT';
@@ -39,6 +39,10 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
     throw new Error('RT viewport should only have a single display set');
   }
 
+  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
+    'ui.loadingIndicatorTotalPercent'
+  );
+
   const rtDisplaySet = displaySets[0];
 
   const [viewportGrid, viewportGridService] = useViewportGrid();

extensions/cornerstone-dicom-seg/CHANGELOG.md

@@ -3,6 +3,231 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+
+### Bug Fixes
+
+* **core:** Address 3D reconstruction and Android compatibility issues and clean up 4D data mode ([#4762](https://github.com/OHIF/Viewers/issues/4762)) ([149d6d0](https://github.com/OHIF/Viewers/commit/149d6d049cd333b9e5846576b403ff387558a66f))
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+
+### Features
+
+* Add customization support for more UI components  ([#4634](https://github.com/OHIF/Viewers/issues/4634)) ([f15eb44](https://github.com/OHIF/Viewers/commit/f15eb44b4cf49de1b73a22512571cec02effaef3))
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg

extensions/cornerstone-dicom-seg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "description": "DICOM SEG read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.70",
-    "@ohif/extension-cornerstone": "3.10.0-beta.70",
-    "@ohif/extension-default": "3.10.0-beta.70",
-    "@ohif/i18n": "3.10.0-beta.70",
+    "@ohif/core": "3.10.0-beta.97",
+    "@ohif/extension-cornerstone": "3.10.0-beta.97",
+    "@ohif/extension-default": "3.10.0-beta.97",
+    "@ohif/i18n": "3.10.0-beta.97",
     "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": "^2.17.2",
-    "@cornerstonejs/core": "^2.17.2",
+    "@cornerstonejs/adapters": "^2.19.3",
+    "@cornerstonejs/core": "^2.19.3",
     "@kitware/vtk.js": "32.1.1",
     "react-color": "^2.19.3"
   }

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

@@ -1,6 +1,15 @@
 export function getToolbarModule({ servicesManager }: withAppTypes) {
   const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
   return [
+    {
+      name: 'evaluate.cornerstone.hasSegmentation',
+      evaluate: ({ viewportId }) => {
+        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
+        return {
+          disabled: !segmentations?.length,
+        };
+      },
+    },
     {
       name: 'evaluate.cornerstone.segmentation',
       evaluate: ({ viewportId, button, toolNames, disabledText }) => {
@@ -12,7 +21,6 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
         if (!segmentations?.length) {
           return {
             disabled: true,
-            className: '!text-common-bright !bg-black opacity-50',
             disabledText: disabledText ?? 'No segmentations available',
           };
         }
@@ -22,7 +30,6 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
         if (!toolGroup) {
           return {
             disabled: true,
-            className: '!text-common-bright ohif-disabled',
             disabledText: disabledText ?? 'Not available on the current viewport',
           };
         }
@@ -32,7 +39,6 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
         if (!toolGroup.hasTool(toolName) && !toolNames) {
           return {
             disabled: true,
-            className: '!text-common-bright ohif-disabled',
             disabledText: disabledText ?? 'Not available on the current viewport',
           };
         }
@@ -43,12 +49,6 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
 
         return {
           disabled: false,
-          className: isPrimaryActive
-            ? '!text-black !bg-primary-light hover:bg-primary-light hover-text-black hover:cursor-pointer'
-            : '!text-common-bright !bg-black hover:bg-primary-light hover:cursor-pointer hover:text-black',
-          // Todo: isActive right now is used for nested buttons where the primary
-          // button needs to be fully rounded (vs partial rounded) when active
-          // otherwise it does not have any other use
           isActive: isPrimaryActive,
         };
       },

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

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

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui';
 import { useViewportGrid } from '@ohif/ui-next';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
@@ -31,6 +31,10 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
     viewportActionCornersService,
   } = servicesManager.services;
 
+  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
+    'ui.loadingIndicatorTotalPercent'
+  );
+
   const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;
 
   // SEG viewport will always have a single display set

extensions/cornerstone-dicom-sr/CHANGELOG.md

@@ -3,6 +3,228 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+
+### Bug Fixes
+
+* **core:** Address 3D reconstruction and Android compatibility issues and clean up 4D data mode ([#4762](https://github.com/OHIF/Viewers/issues/4762)) ([149d6d0](https://github.com/OHIF/Viewers/commit/149d6d049cd333b9e5846576b403ff387558a66f))
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr

extensions/cornerstone-dicom-sr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "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.10.0-beta.70",
-    "@ohif/extension-cornerstone": "3.10.0-beta.70",
-    "@ohif/extension-measurement-tracking": "3.10.0-beta.70",
-    "@ohif/ui": "3.10.0-beta.70",
+    "@ohif/core": "3.10.0-beta.97",
+    "@ohif/extension-cornerstone": "3.10.0-beta.97",
+    "@ohif/extension-measurement-tracking": "3.10.0-beta.97",
+    "@ohif/ui": "3.10.0-beta.97",
     "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^2.17.2",
-    "@cornerstonejs/core": "^2.17.2",
-    "@cornerstonejs/tools": "^2.17.2",
+    "@cornerstonejs/adapters": "^2.19.3",
+    "@cornerstonejs/core": "^2.19.3",
+    "@cornerstonejs/tools": "^2.19.3",
     "classnames": "^2.3.2"
   }
 }

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

@@ -118,12 +118,11 @@ const commandsModule = (props: withAppTypes) => {
           throw new Error('Invalid report, no content');
         }
 
-        const onBeforeDicomStore =
-          customizationService.getModeCustomization('onBeforeDicomStore')?.value;
+        const onBeforeDicomStore = customizationService.getCustomization('onBeforeDicomStore');
 
         let dicomDict;
         if (typeof onBeforeDicomStore === 'function') {
-          dicomDict = onBeforeDicomStore({ measurementData, naturalizedReport });
+          dicomDict = onBeforeDicomStore({ dicomDict, measurementData, naturalizedReport });
         }
 
         await dataSource.store.dicom(naturalizedReport, null, dicomDict);
@@ -151,7 +150,7 @@ const commandsModule = (props: withAppTypes) => {
      */
     loadSRMeasurements: ({ displaySetInstanceUID }) => {
       const { SeriesInstanceUIDs } = hydrateStructuredReport(
-        { servicesManager, extensionManager },
+        { servicesManager, extensionManager, commandsManager },
         displaySetInstanceUID
       );
 

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

@@ -263,9 +263,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(
   for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
     let measurement = unloadedMeasurements[j];
 
-    const onBeforeSRAddMeasurement = customizationService.getModeCustomization(
+    const onBeforeSRAddMeasurement = customizationService.getCustomization(
       'onBeforeSRAddMeasurement'
-    )?.value;
+    );
 
     if (typeof onBeforeSRAddMeasurement === 'function') {
       measurement = onBeforeSRAddMeasurement({

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

@@ -41,22 +41,14 @@ const convertSites = (codingValues, sites) => {
  *
  */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager }: withAppTypes,
+  { servicesManager, extensionManager, commandsManager }: withAppTypes,
   displaySetInstanceUID
 ) {
-  const annotationManager = CsAnnotation.state.getAnnotationManager();
   const dataSource = extensionManager.getActiveDataSource()[0];
   const { measurementService, displaySetService, customizationService } = servicesManager.services;
 
-  const codingValues = customizationService.getCustomization('codingValues', {});
-
-  const { disableEditing } = customizationService.getCustomization(
-    'PanelMeasurement.disableEditing',
-    {
-      id: 'default.disableEditing',
-      disableEditing: false,
-    }
-  );
+  const codingValues = customizationService.getCustomization('codingValues');
+  const disableEditing = customizationService.getCustomization('panelMeasurement.disableEditing');
 
   const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
@@ -107,8 +99,7 @@ export default function hydrateStructuredReport(
     metaData
   );
 
-  const onBeforeSRHydration =
-    customizationService.getModeCustomization('onBeforeSRHydration')?.value;
+  const onBeforeSRHydration = customizationService.getCustomization('onBeforeSRHydration')?.value;
 
   if (typeof onBeforeSRHydration === 'function') {
     storedMeasurementByAnnotationType = onBeforeSRHydration({
@@ -230,8 +221,7 @@ export default function hydrateStructuredReport(
       });
 
       if (disableEditing) {
-        const addedAnnotation = annotationManager.getAnnotation(newAnnotationUID);
-        locking.setAnnotationLocked(addedAnnotation, true);
+        locking.setAnnotationLocked(newAnnotationUID, true);
       }
 
       if (!imageIds.includes(imageId)) {

extensions/cornerstone-dynamic-volume/CHANGELOG.md

@@ -3,6 +3,228 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+
+### Bug Fixes
+
+* **core:** Address 3D reconstruction and Android compatibility issues and clean up 4D data mode ([#4762](https://github.com/OHIF/Viewers/issues/4762)) ([149d6d0](https://github.com/OHIF/Viewers/commit/149d6d049cd333b9e5846576b403ff387558a66f))
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume

extensions/cornerstone-dynamic-volume/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "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.10.0-beta.70",
-    "@ohif/extension-cornerstone": "3.10.0-beta.70",
-    "@ohif/extension-default": "3.10.0-beta.70",
-    "@ohif/i18n": "3.10.0-beta.70",
-    "@ohif/ui": "3.10.0-beta.70",
+    "@ohif/core": "3.10.0-beta.97",
+    "@ohif/extension-cornerstone": "3.10.0-beta.97",
+    "@ohif/extension-default": "3.10.0-beta.97",
+    "@ohif/i18n": "3.10.0-beta.97",
+    "@ohif/ui": "3.10.0-beta.97",
     "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^2.17.2",
-    "@cornerstonejs/tools": "^2.17.2",
+    "@cornerstonejs/core": "^2.19.3",
+    "@cornerstonejs/tools": "^2.19.3",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, PanelSection, ButtonGroup, IconButton, InputNumber } from '@ohif/ui';
-import { DoubleSlider, Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent, Numeric } from '@ohif/ui-next';
 import { Enums } from '@cornerstonejs/core';
 
 const controlClassNames = {
@@ -20,7 +20,10 @@ const Header = ({ title, tooltip }) => (
           />
         </span>
       </TooltipTrigger>
-      <TooltipContent sideOffset={4} className="max-w-xs p-2 bg-primary-dark text-white">
+      <TooltipContent
+        sideOffset={4}
+        className="bg-primary-dark max-w-xs p-2 text-white"
+      >
         <div>{tooltip}</div>
       </TooltipContent>
     </Tooltip>
@@ -37,23 +40,16 @@ const DynamicVolumeControls = ({
   minFps,
   maxFps,
   // Frames
-  currentFrameIndex,
-  onFrameChange,
-  framesLength,
+  currentDimensionGroupNumber,
+  onDimensionGroupChange,
+  numDimensionGroups,
   onGenerate,
   onDoubleRangeChange,
+  rangeValues,
   onDynamicClick,
 }) => {
   const [computedView, setComputedView] = useState(false);
   const [computeViewMode, setComputeViewMode] = useState(Enums.DynamicOperatorType.SUM);
-  const [sliderRangeValues, setSliderRangeValues] = useState([0, framesLength - 1]);
-
-  const handleSliderChange = newValues => {
-    onDoubleRangeChange(newValues);
-    setSliderRangeValues(newValues);
-  };
-
-  const formatLabel = value => Math.round(value);
 
   return (
     <div className="flex select-none flex-col">
@@ -89,7 +85,7 @@ const DynamicVolumeControls = ({
           </ButtonGroup>
         </div>
         <div>
-          <FrameControls
+          <DimensionGroupControls
             onPlayPauseChange={onPlayPauseChange}
             isPlaying={isPlaying}
             computedView={computedView}
@@ -99,9 +95,9 @@ const DynamicVolumeControls = ({
             minFps={minFps}
             maxFps={maxFps}
             //
-            framesLength={framesLength}
-            onFrameChange={onFrameChange}
-            currentFrameIndex={currentFrameIndex}
+            numDimensionGroups={numDimensionGroups}
+            onDimensionGroupChange={onDimensionGroupChange}
+            currentDimensionGroupNumber={currentDimensionGroupNumber}
           />
         </div>
         <div className={`mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
@@ -111,9 +107,10 @@ const DynamicVolumeControls = ({
               <div>
                 Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
                 applied to the data set.
-                <br /> Range Slider: Choose the numeric range within which the operation will be
-                performed.
-                <br />Generate Button: Execute the chosen operation on the specified range of data.
+                <br /> Range Slider: Choose the numeric range of dimension groups within which the
+                operation will be performed.
+                <br />
+                Generate Button: Execute the chosen operation on the specified range of data.
               </div>
             }
           />
@@ -141,15 +138,15 @@ const DynamicVolumeControls = ({
             </button>
           </ButtonGroup>
           <div className="mt-2 w-full">
-            <DoubleSlider
-              min={0}
-              max={framesLength - 1}
-              step={1}
-              defaultValue={sliderRangeValues}
-              onValueChange={handleSliderChange}
-              formatLabel={formatLabel}
-              className="w-full"
-            />
+            <Numeric.Container
+              mode="doubleRange"
+              min={1}
+              max={numDimensionGroups}
+              values={rangeValues}
+              onChange={onDoubleRangeChange}
+            >
+              <Numeric.DoubleRange showNumberInputs />
+            </Numeric.Container>
           </div>
           <Button
             className="mt-2 !h-[26px] !w-[115px] self-start !p-0"
@@ -167,16 +164,16 @@ const DynamicVolumeControls = ({
 
 export default DynamicVolumeControls;
 
-function FrameControls({
+function DimensionGroupControls({
   isPlaying,
   onPlayPauseChange,
   fps,
   minFps,
   maxFps,
   onFpsChange,
-  framesLength,
-  onFrameChange,
-  currentFrameIndex,
+  numDimensionGroups,
+  onDimensionGroupChange,
+  currentDimensionGroupNumber,
   computedView,
 }) {
   const getPlayPauseIconName = () => (isPlaying ? 'icon-pause' : 'icon-play');
@@ -187,14 +184,16 @@ function FrameControls({
         title="4D Controls"
         tooltip={
           <div>
-            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br /> Frame
-            Selector: Navigate through individual frames of the 4D data. <br /> FPS (Frames Per
-            Second) Selector: Adjust the playback speed of the animation.
+            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br />
+            Dimension Group Selector: Navigate through individual dimension groups of the 4D data.{' '}
+            <br />
+            FPS (Frames Per Second) Selector: Adjust the playback speed of the animation.
           </div>
         }
       />
       <div className="mt-3 flex justify-between">
         <IconButton
+          id="play-pause-button"
           className="bg-customblue-30 h-[26px] w-[58px] rounded-[4px]"
           onClick={() => onPlayPauseChange(!isPlaying)}
         >
@@ -204,11 +203,11 @@ function FrameControls({
           />
         </IconButton>
         <InputNumber
-          value={currentFrameIndex}
-          onChange={onFrameChange}
-          minValue={0}
-          maxValue={framesLength - 1}
-          label="Frame"
+          value={currentDimensionGroupNumber}
+          onChange={onDimensionGroupChange}
+          minValue={1}
+          maxValue={numDimensionGroups}
+          label="Group"
           {...controlClassNames}
         />
         <InputNumber
@@ -222,4 +221,4 @@ function FrameControls({
       </div>
     </div>
   );
-}
+}

extensions/cornerstone-dynamic-volume/src/panels/PanelGenerateImage.tsx

@@ -15,13 +15,12 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
   const [{ activeViewportId }] = useViewportGrid();
 
   //
-  const [timePointsRange, setTimePointsRange] = useState([0, 0]);
-  const [timePointsRangeToUseForGenerate, setTimePointsRangeToUseForGenerate] = useState([0, 0]);
+  const [dimensionGroupRange, setDimensionGroupRange] = useState([1, 1]);
   const [computedDisplaySet, setComputedDisplaySet] = useState(null);
   const [dynamicVolume, setDynamicVolume] = useState(null);
   const [frameRate, setFrameRate] = useState(20);
   const [isPlaying, setIsPlaying] = useState(isCineEnabled);
-  const [timePointRendered, setTimePointRendered] = useState(null);
+  const [dimensionGroupNumberRendered, setDimensionGroupNumberRendered] = useState(null);
   const [displayingComputed, setDisplayingComputed] = useState(false);
 
   //
@@ -38,9 +37,8 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
         if (volumeData.volume?.isDynamicVolume()) {
           setDynamicVolume(volumeData.volume);
           uuidDynamicVolume.current = volumeData.displaySetInstanceUID;
-          const newRange = [1, volumeData.volume.numTimePoints];
-          setTimePointsRange(newRange);
-          setTimePointsRangeToUseForGenerate(newRange);
+          const newRange = [1, volumeData.volume.numDimensionGroups];
+          setDimensionGroupRange(newRange);
         }
       });
     };
@@ -65,10 +63,10 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
   }, [cornerstoneViewportService, cineService, servicesManager.services.cineService]);
 
   useEffect(() => {
-    const evt = Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED;
+    const evt = Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED;
 
     const callback = evt => {
-      setTimePointRendered(evt.detail.timePointIndex);
+      setDimensionGroupNumberRendered(evt.detail.dimensionGroupNumber);
     };
 
     eventTarget.addEventListener(evt, callback);
@@ -76,7 +74,7 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
     return () => {
       eventTarget.removeEventListener(evt, callback);
     };
-  }, [cornerstoneViewportService]);
+  }, []);
 
   useEffect(() => {
     const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(activeViewportId);
@@ -102,9 +100,7 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
 
     setDynamicVolume(dynamicVolume);
     uuidDynamicVolume.current = dynamicVolumeDisplaySet.displaySetInstanceUID;
-    const newRange = [1, dynamicVolume.numTimePoints];
-    setTimePointsRange(newRange);
-    setTimePointsRangeToUseForGenerate(newRange);
+    setDimensionGroupRange([1, dynamicVolume.numDimensionGroups]);
   }, [
     activeViewportId,
     viewportGridService,
@@ -141,11 +137,12 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
         volumeId: computedVolumeId,
       });
     }
-    const [start, end] = timePointsRangeToUseForGenerate;
-    const frameNumbers = Array.from({ length: end - start + 1 }, (_, i) => i + start - 1);
+    const [start, end] = dimensionGroupRange;
+    // from start to end, with steps of 1
+    const frameNumbers = Array.from({ length: end - start + 1 }, (_, i) => start + i);
 
     const options = {
-      frameNumbers: operationName === 'SUBTRACT' ? [start, end - 1] : frameNumbers,
+      dimensionGroupNumbers: operationName === 'SUBTRACT' ? [start, end] : frameNumbers,
       targetVolume: computedVolume,
     };
 
@@ -207,17 +204,6 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
     handlePlay();
   };
 
-  function handleSliderChange(newValues) {
-    if (
-      newValues[0] === timePointsRangeToUseForGenerate[0] &&
-      newValues[1] === timePointsRangeToUseForGenerate[1]
-    ) {
-      return;
-    }
-
-    setTimePointsRangeToUseForGenerate(newValues);
-  }
-
   return (
     <DynamicVolumeControls
       fps={frameRate}
@@ -225,16 +211,16 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
       onPlayPauseChange={onPlayPauseChange}
       minFps={1}
       maxFps={50}
-      currentFrameIndex={timePointRendered}
       onFpsChange={handleSetFrameRate}
-      framesLength={timePointsRange[1]}
-      onFrameChange={timePointIndex => {
-        dynamicVolume.timePointIndex = timePointIndex;
+      currentDimensionGroupNumber={dimensionGroupNumberRendered}
+      numDimensionGroups={dynamicVolume?.numDimensionGroups || 1}
+      onDimensionGroupChange={dimensionGroupNumber => {
+        dynamicVolume.dimensionGroupNumber = dimensionGroupNumber;
       }}
       onGenerate={onGenerateImage}
       onDynamicClick={displayingComputed ? () => renderDynamicImage(computedDisplaySet) : null}
-      onDoubleRangeChange={handleSliderChange}
-      initialRangeValues={timePointsRangeToUseForGenerate}
+      onDoubleRangeChange={setDimensionGroupRange}
+      rangeValues={dimensionGroupRange}
     />
   );
 }

extensions/cornerstone-dynamic-volume/src/panels/WorkflowPanel.tsx

@@ -5,7 +5,7 @@ function WorkflowPanel({ servicesManager }: { servicesManager: ServicesManager }
   const ProgressDropdownWithService =
     servicesManager.services.customizationService.getCustomization(
       'progressDropdownWithServiceComponent'
-    ).component;
+    );
 
   return (
     <div

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,249 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+
+### Bug Fixes
+
+* **core:** Address 3D reconstruction and Android compatibility issues and clean up 4D data mode ([#4762](https://github.com/OHIF/Viewers/issues/4762)) ([149d6d0](https://github.com/OHIF/Viewers/commit/149d6d049cd333b9e5846576b403ff387558a66f))
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+
+### Bug Fixes
+
+* changing colormap for second volume in fusion viewport ([#4746](https://github.com/OHIF/Viewers/issues/4746)) ([8996df8](https://github.com/OHIF/Viewers/commit/8996df80e45c97ad5847ebbd19291cd772a2163d))
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+
+### Features
+
+* **ui:** customization option for viewport notification ([#4638](https://github.com/OHIF/Viewers/issues/4638)) ([8acbd76](https://github.com/OHIF/Viewers/commit/8acbd760d801dcaf624c5d9fb636a029201b91e1))
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+
+### Bug Fixes
+
+* **store-segmentation:** storing segmentations was hitting the wrong command resulting in an undefined datasource ([#4755](https://github.com/OHIF/Viewers/issues/4755)) ([9b8e5cf](https://github.com/OHIF/Viewers/commit/9b8e5cfd1a6121a58991c0f75660a2fd9913a4e7))
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+
+### Features
+
+* Add customization support for more UI components  ([#4634](https://github.com/OHIF/Viewers/issues/4634)) ([f15eb44](https://github.com/OHIF/Viewers/commit/f15eb44b4cf49de1b73a22512571cec02effaef3))
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+
+### Bug Fixes
+
+* publish dependency ([#4753](https://github.com/OHIF/Viewers/issues/4753)) ([0cb6106](https://github.com/OHIF/Viewers/commit/0cb6106d0fa576348ca3324685d5768b6ec80572))
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+
+### Bug Fixes
+
+* for initialImageIndex mismatch issue for loading SR after disabling prompts ([#4732](https://github.com/OHIF/Viewers/issues/4732)) ([8e3e208](https://github.com/OHIF/Viewers/commit/8e3e2085d45eba230d0210849b65a6e609c9d81a))
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+
+### Features
+
+* delete active annotation using backspace/delete key ([#4722](https://github.com/OHIF/Viewers/issues/4722)) ([d6f0092](https://github.com/OHIF/Viewers/commit/d6f0092a3236cecb5d04ec46c8ad01600500831e))
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -38,10 +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": "^2.17.2",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@ohif/core": "3.10.0-beta.70",
-    "@ohif/ui": "3.10.0-beta.70",
+    "@cornerstonejs/dicom-image-loader": "^2.19.3",
+    "@ohif/core": "3.10.0-beta.97",
+    "@ohif/ui": "3.10.0-beta.97",
     "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
@@ -55,10 +54,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^2.17.2",
-    "@cornerstonejs/core": "^2.17.2",
-    "@cornerstonejs/tools": "^2.17.2",
+    "@cornerstonejs/adapters": "^2.19.3",
+    "@cornerstonejs/core": "^2.19.3",
+    "@cornerstonejs/tools": "^2.19.3",
     "@icr/polyseg-wasm": "^0.4.0",
+    "@itk-wasm/morphological-contour-interpolation": "1.1.0",
     "@kitware/vtk.js": "32.1.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "^4.0.8",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -3,7 +3,7 @@ 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, Notification, useViewportDialog } from '@ohif/ui';
+import { AllInOneMenu, useViewportDialog } from '@ohif/ui';
 import type { Types as csTypes } from '@cornerstonejs/core';
 
 import { setEnabledElement } from '../state';
@@ -99,6 +99,7 @@ const OHIFCornerstoneViewport = React.memo(
       segmentationService,
       cornerstoneCacheService,
       viewportActionCornersService,
+      customizationService,
     } = servicesManager.services;
 
     const [viewportDialogState] = useViewportDialog();
@@ -373,6 +374,8 @@ const OHIFCornerstoneViewport = React.memo(
       onResize,
     });
 
+    const Notification = customizationService.getCustomization('ui.notificationComponent');
+
     return (
       <React.Fragment>
         <div className="viewport-wrapper">

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

@@ -47,80 +47,6 @@ const OverlayItemComponents = {
   'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem,
 };
 
-const studyDateItem = {
-  id: 'StudyDate',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Study date',
-  condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
-  contentF: ({ referenceInstance, formatters: { formatDate } }) =>
-    formatDate(referenceInstance.StudyDate),
-};
-
-const seriesDescriptionItem = {
-  id: 'SeriesDescription',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Series description',
-  condition: ({ referenceInstance }) => {
-    return referenceInstance && referenceInstance.SeriesDescription;
-  },
-  contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription,
-};
-
-const topLeftItems = {
-  id: 'cornerstoneOverlayTopLeft',
-  items: [studyDateItem, seriesDescriptionItem],
-};
-
-const topRightItems = { id: 'cornerstoneOverlayTopRight', items: [] };
-
-const bottomLeftItems = {
-  id: 'cornerstoneOverlayBottomLeft',
-  items: [
-    {
-      id: 'WindowLevel',
-      customizationType: 'ohif.overlayItem.windowLevel',
-    },
-    {
-      id: 'ZoomLevel',
-      customizationType: 'ohif.overlayItem.zoomLevel',
-      condition: props => {
-        const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
-        return activeToolName === 'Zoom';
-      },
-    },
-  ],
-};
-
-const bottomRightItems = {
-  id: 'cornerstoneOverlayBottomRight',
-  items: [
-    {
-      id: 'InstanceNumber',
-      customizationType: 'ohif.overlayItem.instanceNumber',
-    },
-  ],
-};
-
-/**
- * The @ohif/cornerstoneOverlay is a default value for a customization
- * for the cornerstone overlays.  The intent is to allow it to be extended
- * without needing to re-write the individual overlays by using the append
- * mechanism.  Individual attributes can be modified individually without
- * affecting the other items by using the append as well, with position
- * based replacement.
- * This is used as a default in the getCustomizationModule so that it
- * is available early for additional customization extensions.
- */
-const CornerstoneOverlay = {
-  id: '@ohif/cornerstoneOverlay',
-  topLeftItems,
-  topRightItems,
-  bottomLeftItems,
-  bottomRightItems,
-};
-
 /**
  * Customizable Viewport Overlay
  */
@@ -143,26 +69,18 @@ function CustomizableViewportOverlay({
   const [scale, setScale] = useState(1);
   const { imageIndex } = imageSliceData;
 
-  // The new customization is 'cornerstoneOverlay', with an append or replace
-  // on the individual items rather than defining individual items.
-  const cornerstoneOverlay = customizationService.getCustomization('@ohif/cornerstoneOverlay');
-
   // Historical usage defined the overlays as separate items due to lack of
   // append functionality.  This code enables the historical usage, but
   // the recommended functionality is to append to the default values in
   // cornerstoneOverlay rather than defining individual items.
-  const topLeftCustomization =
-    customizationService.getCustomization('cornerstoneOverlayTopLeft') ||
-    cornerstoneOverlay?.topLeftItems;
-  const topRightCustomization =
-    customizationService.getCustomization('cornerstoneOverlayTopRight') ||
-    cornerstoneOverlay?.topRightItems;
-  const bottomLeftCustomization =
-    customizationService.getCustomization('cornerstoneOverlayBottomLeft') ||
-    cornerstoneOverlay?.bottomLeftItems;
-  const bottomRightCustomization =
-    customizationService.getCustomization('cornerstoneOverlayBottomRight') ||
-    cornerstoneOverlay?.bottomRightItems;
+  const topLeftCustomization = customizationService.getCustomization('viewportOverlay.topLeft');
+  const topRightCustomization = customizationService.getCustomization('viewportOverlay.topRight');
+  const bottomLeftCustomization = customizationService.getCustomization(
+    'viewportOverlay.bottomLeft'
+  );
+  const bottomRightCustomization = customizationService.getCustomization(
+    'viewportOverlay.bottomRight'
+  );
 
   const instanceNumber = useMemo(
     () =>
@@ -264,8 +182,8 @@ function CustomizableViewportOverlay({
         return null;
       }
 
-      const { customizationType } = item;
-      const OverlayItemComponent = OverlayItemComponents[customizationType];
+      const { inheritsFrom } = item;
+      const OverlayItemComponent = OverlayItemComponents[inheritsFrom];
 
       if (OverlayItemComponent) {
         return <OverlayItemComponent {...overlayItemProps} />;
@@ -293,10 +211,6 @@ function CustomizableViewportOverlay({
 
   const getContent = useCallback(
     (customization, keyPrefix) => {
-      if (!customization?.items) {
-        return null;
-      }
-      const { items } = customization;
       const props = {
         ...displaySetProps,
         formatters: { formatDate: formatDICOMDate },
@@ -309,7 +223,7 @@ function CustomizableViewportOverlay({
 
       return (
         <>
-          {items.map((item, index) => (
+          {customization.map((item, index) => (
             <div key={`${keyPrefix}_${index}`}>
               {((!item?.condition || item.condition(props)) && _renderOverlayItem(item, props)) ||
                 null}
@@ -533,4 +447,4 @@ CustomizableViewportOverlay.propTypes = {
 
 export default CustomizableViewportOverlay;
 
-export { CustomizableViewportOverlay, CornerstoneOverlay };
+export { CustomizableViewportOverlay };

extensions/cornerstone/src/commandsModule.ts

@@ -13,6 +13,7 @@ import {
   ReferenceLinesTool,
   annotation,
 } from '@cornerstonejs/tools';
+import * as cornerstoneTools from '@cornerstonejs/tools';
 
 import { Types as OhifTypes, utils } from '@ohif/core';
 import i18n from '@ohif/i18n';
@@ -123,7 +124,11 @@ function commandsModule({
         type,
       });
     },
-    updateStoredPositionPresentation: ({ viewportId, displaySetInstanceUID }) => {
+    updateStoredPositionPresentation: ({
+      viewportId,
+      displaySetInstanceUID,
+      referencedImageId,
+    }) => {
       const presentations = cornerstoneViewportService.getPresentations(viewportId);
       const { positionPresentationStore, setPositionPresentation, getPositionPresentationId } =
         usePositionPresentationStore.getState();
@@ -135,10 +140,18 @@ function commandsModule({
       )?.[0];
 
       if (previousReferencedDisplaySetStoreKey) {
-        setPositionPresentation(
-          previousReferencedDisplaySetStoreKey,
-          presentations.positionPresentation
-        );
+        if (referencedImageId) {
+          setPositionPresentation(previousReferencedDisplaySetStoreKey, {
+            viewReference: {
+              referencedImageId,
+            },
+          });
+        } else {
+          setPositionPresentation(
+            previousReferencedDisplaySetStoreKey,
+            presentations.positionPresentation
+          );
+        }
 
         return;
       }
@@ -194,9 +207,10 @@ function commandsModule({
      * on the measurement with a response if not cancelled.
      */
     setMeasurementLabel: ({ uid }) => {
-      const labelConfig = customizationService.get('measurementLabels');
+      const labelConfig = customizationService.getCustomization('measurementLabels');
+      const renderContent = customizationService.getCustomization('ui.labellingComponent');
       const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig, renderContent).then(
         (val: Map<any, any>) => {
           measurementService.update(
             uid,
@@ -311,17 +325,20 @@ function commandsModule({
     },
 
     renameMeasurement: ({ uid }) => {
-      const labelConfig = customizationService.get('measurementLabels');
+      const labelConfig = customizationService.getCustomization('measurementLabels');
+      const renderContent = customizationService.getCustomization('ui.labellingComponent');
       const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(val => {
-        measurementService.update(
-          uid,
-          {
-            ...val,
-          },
-          true
-        );
-      });
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig, renderContent).then(
+        val => {
+          measurementService.update(
+            uid,
+            {
+              ...val,
+            },
+            true
+          );
+        }
+      );
     },
 
     toggleLockMeasurement: ({ uid }) => {
@@ -362,8 +379,9 @@ function commandsModule({
       viewportGridService.setActiveViewportId(viewportId);
     },
     arrowTextCallback: ({ callback, data, uid }) => {
-      const labelConfig = customizationService.get('measurementLabels');
-      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig);
+      const labelConfig = customizationService.getCustomization('measurementLabels');
+      const renderContent = customizationService.getCustomization('ui.labellingComponent');
+      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig, renderContent);
     },
     toggleCine: () => {
       const { viewports } = viewportGridService.getState();
@@ -738,7 +756,12 @@ function commandsModule({
           displaySetInstanceUID = viewports.get(viewportId)?.displaySetInstanceUIDs[0];
         }
 
-        const volumeId = viewport.getVolumeId();
+        // ToDo: Find a better way of obtaining the volumeId that corresponds to the displaySetInstanceUID
+        const volumeId =
+          viewport
+            .getAllVolumeIds()
+            .find((_volumeId: string) => _volumeId.includes(displaySetInstanceUID)) ??
+          viewport.getVolumeId();
         viewport.setProperties({ colormap }, volumeId);
       }
 
@@ -1298,6 +1321,12 @@ function commandsModule({
         viewportGridService.getActiveViewportId()
       );
     },
+    deleteActiveAnnotation: () => {
+      const activeAnnotationsUID = cornerstoneTools.annotation.selection.getAnnotationsSelected();
+      activeAnnotationsUID.forEach(activeAnnotationUID => {
+        measurementService.remove(activeAnnotationUID);
+      });
+    },
   };
 
   const definitions = {
@@ -1558,6 +1587,9 @@ function commandsModule({
     getRenderInactiveSegmentations: {
       commandFn: actions.getRenderInactiveSegmentations,
     },
+    deleteActiveAnnotation: {
+      commandFn: actions.deleteActiveAnnotation,
+    },
   };
 
   return {

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { CinePlayer, useCine } from '@ohif/ui';
+import { useCine } from '@ohif/ui';
 import { Enums, eventTarget, cache } from '@cornerstonejs/core';
 import { useAppConfig } from '@state';
 
@@ -53,13 +53,13 @@ function WrappedCinePlayer({
       // check if the displaySet is dynamic and set the dynamic info
       if (displaySet.isDynamicVolume) {
         const { dynamicVolumeInfo } = displaySet;
-        const numTimePoints = dynamicVolumeInfo.timePoints.length;
+        const numDimensionGroups = dynamicVolumeInfo.timePoints.length;
         const label = dynamicVolumeInfo.splittingTag;
-        const timePointIndex = dynamicVolumeInfo.timePointIndex || 0;
+        const dimensionGroupNumber = dynamicVolumeInfo.dimensionGroupNumber || 1;
         setDynamicInfo({
           volumeId: displaySet.displaySetInstanceUID,
-          timePointIndex,
-          numTimePoints,
+          dimensionGroupNumber,
+          numDimensionGroups,
           label,
         });
       } else {
@@ -160,8 +160,7 @@ function RenderCinePlayer({
   dynamicInfo: dynamicInfoProp,
   customizationService,
 }) {
-  const { component: CinePlayerComponent = CinePlayer } =
-    customizationService.get('cinePlayer') ?? {};
+  const CinePlayerComponent = customizationService.getCustomization('cinePlayer');
 
   const [dynamicInfo, setDynamicInfo] = useState(dynamicInfoProp);
 
@@ -177,20 +176,20 @@ function RenderCinePlayer({
       return;
     }
 
-    const handleTimePointIndexChange = evt => {
-      const { volumeId, timePointIndex, numTimePoints, splittingTag } = evt.detail;
-      setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
+    const handleDimensionGroupChange = evt => {
+      const { volumeId, dimensionGroupNumber, numDimensionGroups, splittingTag } = evt.detail;
+      setDynamicInfo({ volumeId, dimensionGroupNumber, numDimensionGroups, label: splittingTag });
     };
 
     eventTarget.addEventListener(
-      Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
-      handleTimePointIndexChange
+      Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED,
+      handleDimensionGroupChange
     );
 
     return () => {
       eventTarget.removeEventListener(
-        Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
-        handleTimePointIndexChange
+        Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED,
+        handleDimensionGroupChange
       );
     };
   }, [dynamicInfo]);
@@ -200,17 +199,17 @@ function RenderCinePlayer({
       return;
     }
 
-    const { volumeId, timePointIndex, numTimePoints, splittingTag } = dynamicInfo || {};
+    const { volumeId, dimensionGroupNumber, numDimensionGroups, splittingTag } = dynamicInfo || {};
     const volume = cache.getVolume(volumeId, true);
-    volume.timePointIndex = timePointIndex;
+    volume.dimensionGroupNumber = dimensionGroupNumber;
 
-    setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
+    setDynamicInfo({ volumeId, dimensionGroupNumber, numDimensionGroups, label: splittingTag });
   }, []);
 
   const updateDynamicInfo = useCallback(props => {
-    const { volumeId, timePointIndex } = props;
+    const { volumeId, dimensionGroupNumber } = props;
     const volume = cache.getVolume(volumeId, true);
-    volume.timePointIndex = timePointIndex;
+    volume.dimensionGroupNumber = dimensionGroupNumber;
   }, []);
 
   return (

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ProgressLoadingBar } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
+import { Button } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 import DicomFileUploader, {
   EVENTS,
@@ -40,6 +41,11 @@ function DicomUploadProgress({
   dicomFileUploaderArr,
   onComplete,
 }: DicomUploadProgressProps): ReactElement {
+  const { servicesManager } = useSystem();
+
+  const ProgressLoadingBar =
+    servicesManager.services.customizationService.getCustomization('ui.progressLoadingBar');
+
   const [totalUploadSize] = useState(
     dicomFileUploaderArr.reduce((acc, fileUploader) => acc + fileUploader.getFileSize(), 0)
   );

extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { ViewportActionCorners } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
 
 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]) {
     return null;
   }

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

@@ -51,7 +51,7 @@ export function WindowLevelActionMenu({
   const { colorbarService, cornerstoneViewportService } = servicesManager.services;
   const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
   const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-  const backgroundColor = viewportInfo.getViewportOptions().background;
+  const backgroundColor = viewportInfo?.getViewportOptions().background;
   const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
 
   const { t } = useTranslation('WindowLevelActionMenu');

extensions/cornerstone/src/components/WindowLevelActionMenu/defaultWindowLevelPresets.ts

@@ -2,21 +2,21 @@
 // configured via the customization service.
 const defaultWindowLevelPresets = {
   CT: [
-    { description: 'Soft tissue', window: '400', level: '40' },
-    { description: 'Lung', window: '1500', level: '-600' },
-    { description: 'Liver', window: '150', level: '90' },
-    { description: 'Bone', window: '2500', level: '480' },
-    { description: 'Brain', window: '80', level: '40' },
+    { id: 'ct-soft-tissue', description: 'Soft tissue', window: '400', level: '40' },
+    { id: 'ct-lung', description: 'Lung', window: '1500', level: '-600' },
+    { id: 'ct-liver', description: 'Liver', window: '150', level: '90' },
+    { id: 'ct-bone', description: 'Bone', window: '2500', level: '480' },
+    { id: 'ct-brain', description: 'Brain', window: '80', level: '40' },
   ],
 
   PT: [
-    { description: 'Default', window: '5', level: '2.5' },
-    { description: 'SUV', window: '0', level: '3' },
-    { description: 'SUV', window: '0', level: '5' },
-    { description: 'SUV', window: '0', level: '7' },
-    { description: 'SUV', window: '0', level: '8' },
-    { description: 'SUV', window: '0', level: '10' },
-    { description: 'SUV', window: '0', level: '15' },
+    { id: 'pt-default', description: 'Default', window: '5', level: '2.5' },
+    { id: 'pt-suv-3', description: 'SUV', window: '0', level: '3' },
+    { id: 'pt-suv-5', description: 'SUV', window: '0', level: '5' },
+    { id: 'pt-suv-7', description: 'SUV', window: '0', level: '7' },
+    { id: 'pt-suv-8', description: 'SUV', window: '0', level: '8' },
+    { id: 'pt-suv-10', description: 'SUV', window: '0', level: '10' },
+    { id: 'pt-suv-15', description: 'SUV', window: '0', level: '15' },
   ],
 };
 

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { nonWLModalities, WindowLevelActionMenu } from './WindowLevelActionMenu';
+import { nonWLModalities } from './WindowLevelActionMenu';
 
 export function getWindowLevelActionMenu({
   viewportId,
@@ -16,12 +16,13 @@ export function getWindowLevelActionMenu({
 }>): ReactNode {
   const { customizationService } = servicesManager.services;
 
-  const { presets } = customizationService.get('cornerstone.windowLevelPresets');
-  const colorbarProperties = customizationService.get('cornerstone.colorbar');
-  const { volumeRenderingPresets, volumeRenderingQualityRange } = customizationService.get(
-    'cornerstone.3dVolumeRendering'
+  const presets = customizationService.getCustomization('cornerstone.windowLevelPresets');
+  const colorbarProperties = customizationService.getCustomization('cornerstone.colorbar');
+  const { volumeRenderingPresets, volumeRenderingQualityRange } =
+    customizationService.getCustomization('cornerstone.3dVolumeRendering');
+  const WindowLevelActionMenu = customizationService.getCustomization(
+    'cornerstone.windowLevelActionMenu'
   );
-
   const displaySetPresets = displaySets
     .filter(displaySet => presets[displaySet.Modality])
     .map(displaySet => {

extensions/cornerstone/src/customizations/colorbarCustomization.ts

@@ -0,0 +1,13 @@
+import { colormaps } from '../utils/colormaps';
+
+const DefaultColormap = 'Grayscale';
+
+export default {
+  'cornerstone.colorbar': {
+    width: '16px',
+    colorbarTickPosition: 'left',
+    colormaps,
+    colorbarContainerPosition: 'right',
+    colorbarInitialColormap: DefaultColormap,
+  },
+};

extensions/cornerstone/src/customizations/layoutSelectorCustomization.ts

@@ -0,0 +1,99 @@
+export default {
+  'layoutSelector.advancedPresetGenerator': ({
+    servicesManager,
+  }: {
+    servicesManager: AppTypes.ServicesManager;
+  }) => {
+    const _areSelectorsValid = (
+      hp: AppTypes.HangingProtocol.Protocol,
+      displaySets: AppTypes.DisplaySet[],
+      hangingProtocolService: AppTypes.HangingProtocolService
+    ) => {
+      if (!hp.displaySetSelectors || Object.values(hp.displaySetSelectors).length === 0) {
+        return true;
+      }
+
+      return hangingProtocolService.areRequiredSelectorsValid(
+        Object.values(hp.displaySetSelectors),
+        displaySets[0]
+      );
+    };
+
+    const generateAdvancedPresets = ({
+      servicesManager,
+    }: {
+      servicesManager: AppTypes.ServicesManager;
+    }) => {
+      const { hangingProtocolService, viewportGridService, displaySetService } =
+        servicesManager.services;
+
+      const hangingProtocols = Array.from(hangingProtocolService.protocols.values());
+
+      const viewportId = viewportGridService.getActiveViewportId();
+
+      if (!viewportId) {
+        return [];
+      }
+      const displaySetInsaneUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+
+      if (!displaySetInsaneUIDs) {
+        return [];
+      }
+
+      const displaySets = displaySetInsaneUIDs.map(uid =>
+        displaySetService.getDisplaySetByUID(uid)
+      );
+
+      return hangingProtocols
+        .map(hp => {
+          if (!hp.isPreset) {
+            return null;
+          }
+
+          const areValid = _areSelectorsValid(hp, displaySets, hangingProtocolService);
+
+          return {
+            icon: hp.icon,
+            title: hp.name,
+            commandOptions: {
+              protocolId: hp.id,
+            },
+            disabled: !areValid,
+          };
+        })
+        .filter(preset => preset !== null);
+    };
+
+    return generateAdvancedPresets({ servicesManager });
+  },
+  'layoutSelector.commonPresets': [
+    {
+      icon: 'layout-common-1x1',
+      commandOptions: {
+        numRows: 1,
+        numCols: 1,
+      },
+    },
+    {
+      icon: 'layout-common-1x2',
+      commandOptions: {
+        numRows: 1,
+        numCols: 2,
+      },
+    },
+    {
+      icon: 'layout-common-2x2',
+      commandOptions: {
+        numRows: 2,
+        numCols: 2,
+      },
+    },
+    {
+      icon: 'layout-common-2x3',
+      commandOptions: {
+        numRows: 2,
+        numCols: 3,
+      },
+    },
+  ],
+};

extensions/cornerstone/src/customizations/measurementsCustomization.ts

@@ -0,0 +1,124 @@
+export default {
+  'cornerstone.measurements': {
+    Angle: {
+      displayText: [],
+      report: [],
+    },
+    CobbAngle: {
+      displayText: [],
+      report: [],
+    },
+    ArrowAnnotate: {
+      displayText: [],
+      report: [],
+    },
+    RectangleROi: {
+      displayText: [],
+      report: [],
+    },
+    CircleROI: {
+      displayText: [],
+      report: [],
+    },
+    EllipticalROI: {
+      displayText: [],
+      report: [],
+    },
+    Bidirectional: {
+      displayText: [],
+      report: [],
+    },
+    Length: {
+      displayText: [],
+      report: [],
+    },
+    LivewireContour: {
+      displayText: [],
+      report: [],
+    },
+    SplineROI: {
+      displayText: [
+        {
+          displayName: 'Areas',
+          value: 'area',
+          type: 'value',
+        },
+        {
+          value: 'areaUnits',
+          for: ['area'],
+          type: 'unit',
+        },
+      ],
+      report: [
+        {
+          displayName: 'Area',
+          value: 'area',
+          type: 'value',
+        },
+        {
+          displayName: 'Unit',
+          value: 'areaUnits',
+          type: 'value',
+        },
+      ],
+    },
+    PlanarFreehandROI: {
+      displayTextOpen: [
+        {
+          displayName: 'Length',
+          value: 'length',
+          type: 'value',
+        },
+      ],
+      displayText: [
+        {
+          displayName: 'Mean',
+          value: 'mean',
+          type: 'value',
+        },
+        {
+          displayName: 'Max',
+          value: 'max',
+          type: 'value',
+        },
+        {
+          displayName: 'Area',
+          value: 'area',
+          type: 'value',
+        },
+        {
+          value: 'pixelValueUnits',
+          for: ['mean', 'max'],
+          type: 'unit',
+        },
+        {
+          value: 'areaUnits',
+          for: ['area'],
+          type: 'unit',
+        },
+      ],
+      report: [
+        {
+          displayName: 'Mean',
+          value: 'mean',
+          type: 'value',
+        },
+        {
+          displayName: 'Max',
+          value: 'max',
+          type: 'value',
+        },
+        {
+          displayName: 'Area',
+          value: 'area',
+          type: 'value',
+        },
+        {
+          displayName: 'Unit',
+          value: 'unit',
+          type: 'value',
+        },
+      ],
+    },
+  },
+};

extensions/cornerstone/src/customizations/miscCustomization.ts

@@ -0,0 +1,16 @@
+import { CinePlayer } from '@ohif/ui';
+import DicomUpload from '../components/DicomUpload/DicomUpload';
+
+export default {
+  cinePlayer: CinePlayer,
+  autoCineModalities: ['OT', 'US'],
+  'panelMeasurement.disableEditing': false,
+  onBeforeSRAddMeasurement: ({ measurement, StudyInstanceUID, SeriesInstanceUID }) => {
+    return measurement;
+  },
+  onBeforeDicomStore: ({ dicomDict, measurementData, naturalizedReport }) => {
+    return dicomDict;
+  },
+  dicomUploadComponent: DicomUpload,
+  codingValues: {},
+};

extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  Icons,
+} from '@ohif/ui-next';
+
+export default function getSegmentationPanelCustomization({ commandsManager, servicesManager }) {
+  return {
+    'panelSegmentation.customDropdownMenuContent': ({
+      activeSegmentation,
+      onSegmentationAdd,
+      onSegmentationRemoveFromViewport,
+      onSegmentationEdit,
+      onSegmentationDelete,
+      allowExport,
+      storeSegmentation,
+      onSegmentationDownload,
+      onSegmentationDownloadRTSS,
+      t,
+    }) => (
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem onClick={() => onSegmentationAdd(activeSegmentation.segmentationId)}>
+          <Icons.Add className="text-foreground" />
+          <span className="pl-2">{t('Create New Segmentation')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>{t('Manage Current Segmentation')}</DropdownMenuLabel>
+        <DropdownMenuItem
+          onClick={() => onSegmentationRemoveFromViewport(activeSegmentation.segmentationId)}
+        >
+          <Icons.Series className="text-foreground" />
+          <span className="pl-2">{t('Remove from Viewport')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => onSegmentationEdit(activeSegmentation.segmentationId)}>
+          <Icons.Rename className="text-foreground" />
+          <span className="pl-2">{t('Rename')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger
+            disabled={!allowExport}
+            className="pl-1"
+          >
+            <Icons.Export className="text-foreground" />
+            <span className="pl-2">{t('Export & Download')}</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                onClick={() => storeSegmentation(activeSegmentation.segmentationId)}
+              >
+                {t('Export DICOM SEG')}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onSegmentationDownload(activeSegmentation.segmentationId)}
+              >
+                {t('Download DICOM SEG')}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => onSegmentationDelete(activeSegmentation.segmentationId)}>
+          <Icons.Delete className="text-red-600" />
+          <span className="pl-2 text-red-600">{t('Delete')}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    ),
+    'panelSegmentation.disableEditing': false,
+    'panelSegmentation.showAddSegment': true,
+    'panelSegmentation.onSegmentationAdd': () => {
+      const { viewportGridService } = servicesManager.services;
+      const viewportId = viewportGridService.getState().activeViewportId;
+      commandsManager.run('createLabelmapForViewport', { viewportId });
+    },
+    'panelSegmentation.tableMode': 'collapsed',
+    'panelSegmentation.readableText': {
+      lesionStats: 'Lesion Statistics',
+      minValue: 'Minimum Value',
+      maxValue: 'Maximum Value',
+      meanValue: 'Mean Value',
+      volume: 'Volume (ml)',
+      suvPeak: 'SUV Peak',
+      suvMax: 'Maximum SUV',
+      suvMaxIJK: 'SUV Max IJK',
+      lesionGlyoclysisStats: 'Lesion Glycolysis',
+    },
+  };
+}

extensions/cornerstone/src/customizations/viewportClickCommandsCustomization.ts

@@ -0,0 +1,15 @@
+export default {
+  cornerstoneViewportClickCommands: {
+    doubleClick: ['toggleOneUp'],
+    button1: ['closeContextMenu'],
+    button3: [
+      {
+        commandName: 'showCornerstoneContextMenu',
+        commandOptions: {
+          requireNearbyToolData: true,
+          menuId: 'measurementsContextMenu',
+        },
+      },
+    ],
+  },
+};

extensions/cornerstone/src/customizations/viewportOverlayCustomization.tsx

@@ -0,0 +1,44 @@
+export default {
+  'viewportOverlay.topLeft': [
+    {
+      id: 'StudyDate',
+      inheritsFrom: 'ohif.overlayItem',
+      label: '',
+      title: 'Study date',
+      condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
+      contentF: ({ referenceInstance, formatters: { formatDate } }) =>
+        formatDate(referenceInstance.StudyDate),
+    },
+    {
+      id: 'SeriesDescription',
+      inheritsFrom: 'ohif.overlayItem',
+      label: '',
+      title: 'Series description',
+      condition: ({ referenceInstance }) => {
+        return referenceInstance && referenceInstance.SeriesDescription;
+      },
+      contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription,
+    },
+  ],
+  'viewportOverlay.topRight': [],
+  'viewportOverlay.bottomLeft': [
+    {
+      id: 'WindowLevel',
+      inheritsFrom: 'ohif.overlayItem.windowLevel',
+    },
+    {
+      id: 'ZoomLevel',
+      inheritsFrom: 'ohif.overlayItem.zoomLevel',
+      condition: props => {
+        const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
+        return activeToolName === 'Zoom';
+      },
+    },
+  ],
+  'viewportOverlay.bottomRight': [
+    {
+      id: 'InstanceNumber',
+      inheritsFrom: 'ohif.overlayItem.instanceNumber',
+    },
+  ],
+};

extensions/cornerstone/src/customizations/viewportToolsCustomization.ts

@@ -0,0 +1,33 @@
+import { Enums } from '@cornerstonejs/tools';
+import { toolNames } from '../initCornerstoneTools';
+
+export default {
+  'cornerstone.overlayViewportTools': {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      {
+        toolName: toolNames.StackScroll,
+        bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
+      },
+    ],
+    enabled: [
+      {
+        toolName: toolNames.PlanarFreehandContourSegmentation,
+        configuration: {
+          displayOnePointAsCrosshairs: true,
+        },
+      },
+    ],
+  },
+};

extensions/cornerstone/src/customizations/volumeRenderingCustomization.ts

@@ -0,0 +1,14 @@
+import { CONSTANTS } from '@cornerstonejs/core';
+
+const { VIEWPORT_PRESETS } = CONSTANTS;
+
+export default {
+  'cornerstone.3dVolumeRendering': {
+    volumeRenderingPresets: VIEWPORT_PRESETS,
+    volumeRenderingQualityRange: {
+      min: 1,
+      max: 4,
+      step: 1,
+    },
+  },
+};

extensions/cornerstone/src/customizations/windowLevelActionMenuCustomization.ts

@@ -0,0 +1,5 @@
+import { WindowLevelActionMenu } from '../components/WindowLevelActionMenu/WindowLevelActionMenu';
+
+export default {
+  'cornerstone.windowLevelActionMenu': WindowLevelActionMenu,
+};

extensions/cornerstone/src/customizations/windowLevelPresetsCustomization.ts

@@ -0,0 +1,5 @@
+import defaultWindowLevelPresets from '../components/WindowLevelActionMenu/defaultWindowLevelPresets';
+
+export default {
+  'cornerstone.windowLevelPresets': defaultWindowLevelPresets,
+};

extensions/cornerstone/src/getCustomizationModule.ts

@@ -1,213 +0,0 @@
-import { Enums } from '@cornerstonejs/tools';
-import { toolNames } from './initCornerstoneTools';
-import defaultWindowLevelPresets from './components/WindowLevelActionMenu/defaultWindowLevelPresets';
-import { colormaps } from './utils/colormaps';
-import { CONSTANTS } from '@cornerstonejs/core';
-import { CornerstoneOverlay } from './Viewport/Overlays/CustomizableViewportOverlay';
-
-const DefaultColormap = 'Grayscale';
-const { VIEWPORT_PRESETS } = CONSTANTS;
-
-const tools = {
-  active: [
-    {
-      toolName: toolNames.WindowLevel,
-      bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
-    },
-    {
-      toolName: toolNames.Pan,
-      bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
-    },
-    {
-      toolName: toolNames.Zoom,
-      bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
-    },
-    {
-      toolName: toolNames.StackScroll,
-      bindings: [{ mouseButton: Enums.MouseBindings.Wheel }],
-    },
-  ],
-  enabled: [
-    {
-      toolName: toolNames.PlanarFreehandContourSegmentation,
-      configuration: {
-        displayOnePointAsCrosshairs: true,
-      },
-    },
-  ],
-};
-
-function getCustomizationModule() {
-  return [
-    {
-      name: 'default',
-      value: [
-        CornerstoneOverlay,
-        {
-          id: 'cornerstone.overlayViewportTools',
-          tools,
-        },
-        {
-          id: 'cornerstone.windowLevelPresets',
-          presets: defaultWindowLevelPresets,
-        },
-        {
-          id: 'cornerstone.colorbar',
-          width: '16px',
-          colorbarTickPosition: 'left',
-          colormaps,
-          colorbarContainerPosition: 'right',
-          colorbarInitialColormap: DefaultColormap,
-        },
-        {
-          id: 'cornerstone.3dVolumeRendering',
-          volumeRenderingPresets: VIEWPORT_PRESETS,
-          volumeRenderingQualityRange: {
-            min: 1,
-            max: 4,
-            step: 1,
-          },
-        },
-        {
-          id: 'cornerstone.measurements',
-          Angle: {
-            displayText: [],
-            report: [],
-          },
-          CobbAngle: {
-            displayText: [],
-            report: [],
-          },
-          ArrowAnnotate: {
-            displayText: [],
-            report: [],
-          },
-          RectangleROi: {
-            displayText: [],
-            report: [],
-          },
-          CircleROI: {
-            displayText: [],
-            report: [],
-          },
-          EllipticalROI: {
-            displayText: [],
-            report: [],
-          },
-          Bidirectional: {
-            displayText: [],
-            report: [],
-          },
-          Length: {
-            displayText: [],
-            report: [],
-          },
-          LivewireContour: {
-            displayText: [],
-            report: [],
-          },
-          SplineROI: {
-            displayText: [
-              {
-                displayName: 'Area',
-                value: 'area',
-                type: 'value',
-              },
-              {
-                value: 'areaUnits',
-                for: ['area'],
-                type: 'unit',
-              },
-              /**
-              {
-                displayName: 'Modality',
-                value: 'Modality',
-                type: 'value',
-              },
-              */
-            ],
-            report: [
-              {
-                displayName: 'Area',
-                value: 'area',
-                type: 'value',
-              },
-              {
-                displayName: 'Unit',
-                value: 'areaUnits',
-                type: 'value',
-              },
-            ],
-          },
-          PlanarFreehandROI: {
-            displayTextOpen: [
-              {
-                displayName: 'Length',
-                value: 'length',
-                type: 'value',
-              },
-            ],
-            displayText: [
-              {
-                displayName: 'Mean',
-                value: 'mean',
-                type: 'value',
-              },
-              {
-                displayName: 'Max',
-                value: 'max',
-                type: 'value',
-              },
-              {
-                displayName: 'Area',
-                value: 'area',
-                type: 'value',
-              },
-              {
-                value: 'pixelValueUnits',
-                for: ['mean', 'max' /** 'stdDev **/],
-                type: 'unit',
-              },
-              {
-                value: 'areaUnits',
-                for: ['area'],
-                type: 'unit',
-              },
-              /**
-              {
-                displayName: 'Std Dev',
-                value: 'stdDev',
-                type: 'value',
-              },
-              */
-            ],
-            report: [
-              {
-                displayName: 'Mean',
-                value: 'mean',
-                type: 'value',
-              },
-              {
-                displayName: 'Max',
-                value: 'max',
-                type: 'value',
-              },
-              {
-                displayName: 'Area',
-                value: 'area',
-                type: 'value',
-              },
-              {
-                displayName: 'Unit',
-                value: 'unit',
-                type: 'value',
-              },
-            ],
-          },
-        },
-      ],
-    },
-  ];
-}
-
-export default getCustomizationModule;

extensions/cornerstone/src/getCustomizationModule.tsx

@@ -0,0 +1,34 @@
+import viewportOverlayCustomization from './customizations/viewportOverlayCustomization';
+import getSegmentationPanelCustomization from './customizations/segmentationPanelCustomization';
+import layoutSelectorCustomization from './customizations/layoutSelectorCustomization';
+import viewportToolsCustomization from './customizations/viewportToolsCustomization';
+import viewportClickCommandsCustomization from './customizations/viewportClickCommandsCustomization';
+import measurementsCustomization from './customizations/measurementsCustomization';
+import volumeRenderingCustomization from './customizations/volumeRenderingCustomization';
+import colorbarCustomization from './customizations/colorbarCustomization';
+import windowLevelPresetsCustomization from './customizations/windowLevelPresetsCustomization';
+import miscCustomization from './customizations/miscCustomization';
+import windowLevelActionMenuCustomization from './customizations/windowLevelActionMenuCustomization';
+
+function getCustomizationModule({ commandsManager, servicesManager }) {
+  return [
+    {
+      name: 'default',
+      value: {
+        ...viewportOverlayCustomization,
+        ...getSegmentationPanelCustomization({ commandsManager, servicesManager }),
+        ...layoutSelectorCustomization,
+        ...viewportToolsCustomization,
+        ...viewportClickCommandsCustomization,
+        ...measurementsCustomization,
+        ...volumeRenderingCustomization,
+        ...colorbarCustomization,
+        ...windowLevelPresetsCustomization,
+        ...miscCustomization,
+        ...windowLevelActionMenuCustomization,
+      },
+    },
+  ];
+}
+
+export default getCustomizationModule;

extensions/cornerstone/src/getToolbarModule.tsx

@@ -1,14 +1,8 @@
 import { Enums } from '@cornerstonejs/tools';
-
-const getToggledClassName = (isToggled: boolean) => {
-  return isToggled
-    ? '!text-primary-active'
-    : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
-};
+import { utils } from '@ohif/ui-next';
 
 const getDisabledState = (disabledText?: string) => ({
   disabled: true,
-  className: '!text-common-bright ohif-disabled',
   disabledText: disabledText ?? 'Not available on the current viewport',
 });
 
@@ -93,9 +87,6 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         return {
           disabled: false,
-          className: isPrimaryActive
-            ? '!text-black bg-primary-light rounded'
-            : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light rounded',
           // Todo: isActive right now is used for nested buttons where the primary
           // button needs to be fully rounded (vs partial rounded) when active
           // otherwise it does not have any other use
@@ -153,9 +144,9 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
     },
     {
       name: 'evaluate.action',
-      evaluate: ({ viewportId, button }) => {
+      evaluate: () => {
         return {
-          className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
+          disabled: false,
         };
       },
     },
@@ -190,7 +181,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         if (!synchronizers?.length) {
           return {
-            className: getToggledClassName(false),
+            className: utils.getToggledClassName(false),
           };
         }
 
@@ -204,7 +195,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         if (!synchronizers?.length) {
           return {
-            className: getToggledClassName(false),
+            className: utils.getToggledClassName(false),
           };
         }
 
@@ -216,7 +207,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
         const isEnabled = synchronizer?._enabled;
 
         return {
-          className: getToggledClassName(isEnabled),
+          className: utils.getToggledClassName(isEnabled),
         };
       },
     },
@@ -239,14 +230,13 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
         if (!prop) {
           return {
             disabled: false,
-            className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
           };
         }
 
         const isToggled = prop;
 
         return {
-          className: getToggledClassName(isToggled),
+          className: utils.getToggledClassName(isToggled),
         };
       },
     },
@@ -275,7 +265,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         return {
           disabled: false,
-          className: getToggledClassName(isMpr),
+          className: utils.getToggledClassName(isMpr),
         };
       },
     },
@@ -304,6 +294,6 @@ function _evaluateToggle({
   const isOff = offModes.includes(toolGroup.getToolOptions(toolName).mode);
 
   return {
-    className: getToggledClassName(!isOff),
+    className: utils.getToggledClassName(!isOff),
   };
 }

extensions/cornerstone/src/hooks/useActiveViewportSegmentationRepresentations.ts

@@ -12,10 +12,7 @@ function mapSegmentationToDisplay(segmentation, customizationService) {
   const { label, segments } = segmentation;
 
   // Get the readable text mapping once
-  const { readableText: readableTextMap } = customizationService.getCustomization(
-    'PanelSegmentation.readableText',
-    {}
-  );
+  const readableTextMap = customizationService.getCustomization('panelSegmentation.readableText');
 
   // Helper function to recursively map cachedStats to readable display text
   function mapStatsToDisplay(stats, indent = 0) {

extensions/cornerstone/src/hooks/useSegmentations.ts

@@ -7,10 +7,7 @@ function mapSegmentationToDisplay(segmentation, customizationService) {
   const { label, segments } = segmentation;
 
   // Get the readable text mapping once
-  const { readableText: readableTextMap } = customizationService.getCustomization(
-    'PanelSegmentation.readableText',
-    {}
-  );
+  const readableTextMap = customizationService.getCustomization('panelSegmentation.readableText');
 
   // Helper function to recursively map cachedStats to readable display text
   function mapStatsToDisplay(stats, indent = 0) {

extensions/cornerstone/src/hps/fourUp.ts

@@ -1,3 +1,5 @@
+import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+
 export const fourUp = {
   id: 'fourUp',
   locked: true,
@@ -46,17 +48,7 @@ export const fourUp = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -72,6 +64,7 @@ export const fourUp = {
             customViewportProps: {
               hideOverlays: true,
             },
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -94,17 +87,7 @@ export const fourUp = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -120,17 +103,7 @@ export const fourUp = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/hps/frameView.ts

@@ -55,6 +55,7 @@ const frameView: Types.HangingProtocol.Protocol = {
       viewports: [
         {
           viewportOptions: {
+            viewportId: 'custom_R0_C0',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -91,6 +92,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R0_C1',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -127,6 +129,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R0_C2',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -163,6 +166,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R0_C3',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -199,6 +203,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R1_C0',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -235,6 +240,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R1_C1',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -271,6 +277,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R1_C2',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -307,6 +314,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R1_C3',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -343,6 +351,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R2_C0',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -379,6 +388,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R2_C1',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -415,6 +425,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R2_C2',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -451,6 +462,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R2_C3',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -487,6 +499,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R3_C0',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -523,6 +536,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R3_C1',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -559,6 +573,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R3_C2',
             toolGroupId: 'default',
             syncGroups: [
               {
@@ -595,6 +610,7 @@ const frameView: Types.HangingProtocol.Protocol = {
         },
         {
           viewportOptions: {
+            viewportId: 'custom_R3_C3',
             toolGroupId: 'default',
             syncGroups: [
               {

extensions/cornerstone/src/hps/main3D.ts

@@ -1,3 +1,5 @@
+import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+
 export const main3D = {
   id: 'main3D',
   locked: true,
@@ -94,17 +96,7 @@ export const main3D = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -120,17 +112,7 @@ export const main3D = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -146,17 +128,7 @@ export const main3D = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/hps/mpr.ts

@@ -1,6 +1,6 @@
 import { Types } from '@ohif/core';
 
-const VOI_SYNC_GROUP = {
+export const VOI_SYNC_GROUP = {
   type: 'voi',
   id: 'mpr',
   source: true,
@@ -10,7 +10,7 @@ const VOI_SYNC_GROUP = {
   },
 };
 
-const HYDRATE_SEG_SYNC_GROUP = {
+export const HYDRATE_SEG_SYNC_GROUP = {
   type: 'hydrateseg',
   id: 'sameFORId',
   source: true,

extensions/cornerstone/src/hps/mprAnd3DVolumeViewport.ts

@@ -1,3 +1,5 @@
+import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+
 export const mprAnd3DVolumeViewport = {
   id: 'mprAnd3DVolumeViewport',
   locked: true,
@@ -53,17 +55,7 @@ export const mprAnd3DVolumeViewport = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -79,6 +71,7 @@ export const mprAnd3DVolumeViewport = {
             customViewportProps: {
               hideOverlays: true,
             },
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -101,17 +94,7 @@ export const mprAnd3DVolumeViewport = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -127,17 +110,7 @@ export const mprAnd3DVolumeViewport = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/hps/only3D.ts

@@ -1,3 +1,5 @@
+import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+
 export const only3D = {
   id: 'only3D',
   locked: true,
@@ -45,6 +47,7 @@ export const only3D = {
             orientation: 'coronal',
             customViewportProps: {
               hideOverlays: true,
+              syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
             },
           },
           displaySets: [

extensions/cornerstone/src/hps/primary3D.ts

@@ -1,3 +1,5 @@
+import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+
 export const primary3D = {
   id: 'primary3D',
   locked: true,
@@ -94,17 +96,7 @@ export const primary3D = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -120,17 +112,7 @@ export const primary3D = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -146,17 +128,7 @@ export const primary3D = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/hps/primaryAxial.ts

@@ -1,3 +1,5 @@
+import { HYDRATE_SEG_SYNC_GROUP, VOI_SYNC_GROUP } from './mpr';
+
 export const primaryAxial = {
   id: 'primaryAxial',
   locked: true,
@@ -66,17 +68,7 @@ export const primaryAxial = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -92,17 +84,7 @@ export const primaryAxial = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {
@@ -118,17 +100,7 @@ export const primaryAxial = {
             initialImageOptions: {
               preset: 'middle',
             },
-            syncGroups: [
-              {
-                type: 'voi',
-                id: 'mpr',
-                source: true,
-                target: true,
-                options: {
-                  syncColormap: true,
-                },
-              },
-            ],
+            syncGroups: [VOI_SYNC_GROUP, HYDRATE_SEG_SYNC_GROUP],
           },
           displaySets: [
             {

extensions/cornerstone/src/index.tsx

@@ -162,9 +162,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
 
     const { syncGroupService } = servicesManager.services;
     syncGroupService.registerCustomSynchronizer('frameview', createFrameViewSynchronizer);
-    servicesManager.services.customizationService.setGlobalCustomization('dicomUploadComponent', {
-      component: props => <DicomUpload {...props} />,
-    });
+
     return init.call(this, props);
   },
   getToolbarModule,

extensions/cornerstone/src/initContextMenu.ts

@@ -5,27 +5,6 @@ import { findNearbyToolData } from './utils/findNearbyToolData';
 
 const cs3DToolsEvents = Enums.Events;
 
-const DEFAULT_CONTEXT_MENU_CLICKS = {
-  button1: {
-    commands: [
-      {
-        commandName: 'closeContextMenu',
-      },
-    ],
-  },
-  button3: {
-    commands: [
-      {
-        commandName: 'showCornerstoneContextMenu',
-        commandOptions: {
-          requireNearbyToolData: true,
-          menuId: 'measurementsContextMenu',
-        },
-      },
-    ],
-  },
-};
-
 /**
  * Generates a name, consisting of:
  *    * alt when the alt key is down
@@ -60,8 +39,10 @@ function initContextMenu({
    * defaults on button1 and button2
    */
   const cornerstoneViewportHandleEvent = (name, evt) => {
-    const customizations =
-      customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_CONTEXT_MENU_CLICKS;
+    const customizations = customizationService.getCustomization(
+      'cornerstoneViewportClickCommands'
+    );
+
     const toRun = customizations[name];
 
     if (!toRun) {
@@ -71,7 +52,7 @@ function initContextMenu({
     // only find nearbyToolData if required, for the click (which closes the context menu
     // we don't need to find nearbyToolData)
     let nearbyToolData = null;
-    if (toRun.commands.some(command => command.commandOptions?.requireNearbyToolData)) {
+    if (toRun.some(command => command.commandOptions?.requireNearbyToolData)) {
       nearbyToolData = findNearbyToolData(commandsManager, evt);
     }
 

extensions/cornerstone/src/initDoubleClick.ts

@@ -1,17 +1,10 @@
 import { eventTarget, EVENTS } from '@cornerstonejs/core';
 import { Enums } from '@cornerstonejs/tools';
-import { CommandsManager, CustomizationService, Types } from '@ohif/core';
+import { CommandsManager, CustomizationService } from '@ohif/core';
 import { findNearbyToolData } from './utils/findNearbyToolData';
 
 const cs3DToolsEvents = Enums.Events;
 
-const DEFAULT_DOUBLE_CLICK = {
-  doubleClick: {
-    commandName: 'toggleOneUp',
-    commandOptions: {},
-  },
-};
-
 /**
  * Generates a double click event name, consisting of:
  *    * alt when the alt key is down
@@ -50,8 +43,9 @@ function initDoubleClick({ customizationService, commandsManager }: initDoubleCl
     const eventName = getDoubleClickEventName(evt);
 
     // Allows for the customization of the double click on a viewport.
-    const customizations =
-      customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_DOUBLE_CLICK;
+    const customizations = customizationService.getCustomization(
+      'cornerstoneViewportClickCommands'
+    );
 
     const toRun = customizations[eventName];
 

extensions/cornerstone/src/panels/PanelMeasurement.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { utils } from '@ohif/core';
 import { MeasurementTable } from '@ohif/ui-next';
 import debounce from 'lodash.debounce';

extensions/cornerstone/src/panels/PanelSegmentation.tsx

@@ -1,16 +1,5 @@
 import React from 'react';
-import {
-  DropdownMenuLabel,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  Icons,
-  SegmentationTable,
-  DropdownMenuSubTrigger,
-} from '@ohif/ui-next';
+import { SegmentationTable } from '@ohif/ui-next';
 import { useActiveViewportSegmentationRepresentations } from '../hooks/useActiveViewportSegmentationRepresentations';
 import { metaData } from '@cornerstonejs/core';
 
@@ -19,7 +8,7 @@ export default function PanelSegmentation({
   commandsManager,
   children,
 }: withAppTypes) {
-  const { customizationService, viewportGridService, displaySetService } = servicesManager.services;
+  const { customizationService, displaySetService } = servicesManager.services;
 
   const { segmentationsWithRepresentations, disabled } =
     useActiveViewportSegmentationRepresentations({
@@ -27,11 +16,6 @@ export default function PanelSegmentation({
     });
 
   const handlers = {
-    onSegmentationAdd: async () => {
-      const viewportId = viewportGridService.getState().activeViewportId;
-      commandsManager.run('createLabelmapForViewport', { viewportId });
-    },
-
     onSegmentationClick: (segmentationId: string) => {
       commandsManager.run('setActiveSegmentation', { segmentationId });
     },
@@ -77,7 +61,11 @@ export default function PanelSegmentation({
     },
 
     storeSegmentation: async segmentationId => {
-      commandsManager.run('storeSegmentation', { segmentationId });
+      commandsManager.run({
+        commandName: 'storeSegmentation',
+        commandOptions: { segmentationId },
+        context: 'CORNERSTONE',
+      });
     },
 
     onSegmentationDownloadRTSS: segmentationId => {
@@ -125,107 +113,19 @@ export default function PanelSegmentation({
     },
   };
 
-  const { mode: SegmentationTableMode } = customizationService.getCustomization(
-    'PanelSegmentation.tableMode',
-    {
-      id: 'default.segmentationTable.mode',
-      mode: 'collapsed',
-    }
+  const segmentationTableMode = customizationService.getCustomization(
+    'panelSegmentation.tableMode'
   );
 
   // custom onSegmentationAdd if provided
-  const { onSegmentationAdd } = customizationService.getCustomization(
-    'PanelSegmentation.onSegmentationAdd',
-    {
-      id: 'segmentation.onSegmentationAdd',
-      onSegmentationAdd: handlers.onSegmentationAdd,
-    }
+  const onSegmentationAdd = customizationService.getCustomization(
+    'panelSegmentation.onSegmentationAdd'
   );
 
-  const { disableEditing } = customizationService.getCustomization(
-    'PanelSegmentation.disableEditing',
-    {
-      id: 'default.disableEditing',
-      disableEditing: false,
-    }
-  );
-
-  const { showAddSegment } = customizationService.getCustomization(
-    'PanelSegmentation.showAddSegment',
-    {
-      id: 'default.showAddSegment',
-      showAddSegment: true,
-    }
-  );
-
-  const CustomDropdownMenuContent = customizationService.getCustomComponent(
-    'PanelSegmentation.CustomDropdownMenuContent',
-    ({
-      activeSegmentation,
-      onSegmentationAdd,
-      onSegmentationRemoveFromViewport,
-      onSegmentationEdit,
-      onSegmentationDelete,
-      allowExport,
-      storeSegmentation,
-      onSegmentationDownload,
-      onSegmentationDownloadRTSS,
-      t,
-    }) => {
-      return (
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => onSegmentationAdd(activeSegmentation.segmentationId)}>
-            <Icons.Add className="text-foreground" />
-            <span className="pl-2">{t('Create New Segmentation')}</span>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>{t('Manage Current Segmentation')}</DropdownMenuLabel>
-          <DropdownMenuItem
-            onClick={() => onSegmentationRemoveFromViewport(activeSegmentation.segmentationId)}
-          >
-            <Icons.Series className="text-foreground" />
-            <span className="pl-2">{t('Remove from Viewport')}</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onSegmentationEdit(activeSegmentation.segmentationId)}>
-            <Icons.Rename className="text-foreground" />
-            <span className="pl-2">{t('Rename')}</span>
-          </DropdownMenuItem>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger
-              disabled={!allowExport}
-              className="pl-1"
-            >
-              <Icons.Export className="text-foreground" />
-              <span className="pl-2">{t('Export & Download')}</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem
-                  onClick={() => storeSegmentation(activeSegmentation.segmentationId)}
-                >
-                  {t('Export DICOM SEG')}
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => onSegmentationDownload(activeSegmentation.segmentationId)}
-                >
-                  {t('Download DICOM SEG')}
-                </DropdownMenuItem>
-                {/* <DropdownMenuItem
-                  onClick={() => onSegmentationDownloadRTSS(activeSegmentation.segmentationId)}
-                >
-                  {t('Download DICOM RTSTRUCT')}
-                </DropdownMenuItem> */}
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => onSegmentationDelete(activeSegmentation.segmentationId)}>
-            <Icons.Delete className="text-red-600" />
-            <span className="pl-2 text-red-600">{t('Delete')}</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      );
-    }
+  const disableEditing = customizationService.getCustomization('panelSegmentation.disableEditing');
+  const showAddSegment = customizationService.getCustomization('panelSegmentation.showAddSegment');
+  const CustomDropdownMenuContent = customizationService.getCustomization(
+    'panelSegmentation.customDropdownMenuContent'
   );
 
   const exportOptions = segmentationsWithRepresentations.map(({ segmentation }) => {
@@ -272,7 +172,7 @@ export default function PanelSegmentation({
       <SegmentationTable
         disabled={disabled}
         data={segmentationsWithRepresentations}
-        mode={SegmentationTableMode}
+        mode={segmentationTableMode}
         title="Segmentations"
         exportOptions={exportOptions}
         disableEditing={disableEditing}
@@ -308,7 +208,7 @@ export default function PanelSegmentation({
         <SegmentationTable.Config />
         <SegmentationTable.AddSegmentationRow />
 
-        {SegmentationTableMode === 'collapsed' ? (
+        {segmentationTableMode === 'collapsed' ? (
           <SegmentationTable.Collapsed>
             <SegmentationTable.SelectorHeader>
               <CustomDropdownMenuContent />

extensions/cornerstone/src/utils/ActiveViewportBehavior.tsx

@@ -1,24 +1,18 @@
-import { useEffect, useState, memo } from 'react';
-
-const MODALITIES_REQUIRING_CINE_AUTO_MOUNT = ['OT', 'US'];
+import { useEffect, useState, memo, useCallback } from 'react';
 
 const ActiveViewportBehavior = memo(
   ({ servicesManager, viewportId }: withAppTypes<{ viewportId: string }>) => {
-    const { displaySetService, cineService, viewportGridService, customizationService } =
-      servicesManager.services;
+    const {
+      displaySetService,
+      cineService,
+      viewportGridService,
+      customizationService,
+      cornerstoneViewportService,
+    } = servicesManager.services;
 
     const [activeViewportId, setActiveViewportId] = useState(viewportId);
 
-    useEffect(() => {
-      const subscription = viewportGridService.subscribe(
-        viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
-        ({ viewportId }) => setActiveViewportId(viewportId)
-      );
-
-      return () => subscription.unsubscribe();
-    }, [viewportId, viewportGridService]);
-
-    useEffect(() => {
+    const handleCineEnable = useCallback(() => {
       if (cineService.isViewportCineClosed(activeViewportId)) {
         return;
       }
@@ -41,13 +35,7 @@ const ActiveViewportBehavior = memo(
       const modalities = displaySets.map(displaySet => displaySet?.Modality);
       const isDynamicVolume = displaySets.some(displaySet => displaySet?.isDynamicVolume);
 
-      const { modalities: sourceModalities } = customizationService.getModeCustomization(
-        'autoCineModalities',
-        {
-          id: 'autoCineModalities',
-          modalities: MODALITIES_REQUIRING_CINE_AUTO_MOUNT,
-        }
-      );
+      const sourceModalities = customizationService.getCustomization('autoCineModalities');
 
       const requiresCine = modalities.some(modality => sourceModalities.includes(modality));
 
@@ -62,6 +50,32 @@ const ActiveViewportBehavior = memo(
       customizationService,
     ]);
 
+    useEffect(() => {
+      const subscription = viewportGridService.subscribe(
+        viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
+        ({ viewportId }) => setActiveViewportId(viewportId)
+      );
+
+      return () => subscription.unsubscribe();
+    }, [viewportId, viewportGridService]);
+
+    useEffect(() => {
+      const subscription = cornerstoneViewportService.subscribe(
+        cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
+        () => {
+          const activeViewportId = viewportGridService.getActiveViewportId();
+          setActiveViewportId(activeViewportId);
+          handleCineEnable();
+        }
+      );
+
+      return () => subscription.unsubscribe();
+    }, [viewportId, cornerstoneViewportService, viewportGridService, handleCineEnable]);
+
+    useEffect(() => {
+      handleCineEnable();
+    }, [handleCineEnable]);
+
     return null;
   },
   arePropsEqual

extensions/cornerstone/src/utils/measurementServiceMappings/PlanarFreehandROI.ts

@@ -142,7 +142,7 @@ function getMappedAnnotations(annotation, displaySetService) {
  * @returns {object} Report's content.
  */
 function getColumnValueReport(annotation, customizationService) {
-  const { PlanarFreehandROI } = customizationService.get('cornerstone.measurements');
+  const { PlanarFreehandROI } = customizationService.getCustomization('cornerstone.measurements');
   const { report } = PlanarFreehandROI;
   const columns = [];
   const values = [];

extensions/cornerstone/src/utils/measurementServiceMappings/SplineROI.ts

@@ -145,7 +145,7 @@ function getMappedAnnotations(annotation, displaySetService) {
  * @returns {object} Report's content.
  */
 function getColumnValueReport(annotation, customizationService) {
-  const { SplineROI } = customizationService.get('cornerstone.measurements');
+  const { SplineROI } = customizationService.getCustomization('cornerstone.measurements');
   const { report } = SplineROI;
   const columns = [];
   const values = [];

extensions/default/CHANGELOG.md

@@ -3,6 +3,255 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0-beta.97](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.96...v3.10.0-beta.97) (2025-02-18)
+
+
+### Features
+
+* improve dicom tag browser with nested rows ([#4451](https://github.com/OHIF/Viewers/issues/4451)) ([0b5836c](https://github.com/OHIF/Viewers/commit/0b5836ca1a908e152336752672b196f0d533f4f9))
+
+
+
+
+
+# [3.10.0-beta.96](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.95...v3.10.0-beta.96) (2025-02-18)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.95](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.94...v3.10.0-beta.95) (2025-02-13)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.93...v3.10.0-beta.94) (2025-02-11)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.92...v3.10.0-beta.93) (2025-02-04)
+
+
+### Bug Fixes
+
+* add commandsManager to MoreDropdownMenu onClick props ([#4765](https://github.com/OHIF/Viewers/issues/4765)) ([bbf1a19](https://github.com/OHIF/Viewers/commit/bbf1a19676b2b345a0f911dde319e5ffefe29fa6))
+
+
+
+
+
+# [3.10.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.91...v3.10.0-beta.92) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.90...v3.10.0-beta.91) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.89...v3.10.0-beta.90) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.88...v3.10.0-beta.89) (2025-02-04)
+
+
+### Features
+
+* **ui:** customization option for viewport notification ([#4638](https://github.com/OHIF/Viewers/issues/4638)) ([8acbd76](https://github.com/OHIF/Viewers/commit/8acbd760d801dcaf624c5d9fb636a029201b91e1))
+
+
+
+
+
+# [3.10.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.87...v3.10.0-beta.88) (2025-02-04)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.86...v3.10.0-beta.87) (2025-02-03)
+
+
+### Bug Fixes
+
+* **measurement label auto-completion:** Customization of measurement label auto-completion fails for measurements following arrow annotations. ([#4739](https://github.com/OHIF/Viewers/issues/4739)) ([e035ef1](https://github.com/OHIF/Viewers/commit/e035ef1dcc72ecbe2a757e3b814551d768d7e610))
+
+
+
+
+
+# [3.10.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.85...v3.10.0-beta.86) (2025-02-03)
+
+
+### Bug Fixes
+
+* **store-segmentation:** storing segmentations was hitting the wrong command resulting in an undefined datasource ([#4755](https://github.com/OHIF/Viewers/issues/4755)) ([9b8e5cf](https://github.com/OHIF/Viewers/commit/9b8e5cfd1a6121a58991c0f75660a2fd9913a4e7))
+
+
+
+
+
+# [3.10.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.84...v3.10.0-beta.85) (2025-02-03)
+
+
+### Features
+
+* Add customization support for more UI components  ([#4634](https://github.com/OHIF/Viewers/issues/4634)) ([f15eb44](https://github.com/OHIF/Viewers/commit/f15eb44b4cf49de1b73a22512571cec02effaef3))
+
+
+
+
+
+# [3.10.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.83...v3.10.0-beta.84) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.82...v3.10.0-beta.83) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.81...v3.10.0-beta.82) (2025-01-31)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.80...v3.10.0-beta.81) (2025-01-29)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.79...v3.10.0-beta.80) (2025-01-29)
+
+
+### Features
+
+* **customization:** enable custom onDropHandler for viewportGrid ([#4641](https://github.com/OHIF/Viewers/issues/4641)) ([054b262](https://github.com/OHIF/Viewers/commit/054b262e9cbeb0f44de65d05641efe1e8944a4f5))
+
+
+
+
+
+# [3.10.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.78...v3.10.0-beta.79) (2025-01-28)
+
+
+### Bug Fixes
+
+* **dependencies:** Update dcmjs library and improve documentation links ([#4741](https://github.com/OHIF/Viewers/issues/4741)) ([d554f02](https://github.com/OHIF/Viewers/commit/d554f02f7cdb876e4132fb94e3b3df8d11b7bb5c))
+
+
+
+
+
+# [3.10.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.77...v3.10.0-beta.78) (2025-01-28)
+
+
+### Features
+
+* **side-panels:** Added resize handle interactive feedback for side panels ([#4734](https://github.com/OHIF/Viewers/issues/4734)) ([6abb095](https://github.com/OHIF/Viewers/commit/6abb095b8a39c5ae4f8df8852b3ddb3249ec463f))
+
+
+
+
+
+# [3.10.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.76...v3.10.0-beta.77) (2025-01-28)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.75...v3.10.0-beta.76) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.74...v3.10.0-beta.75) (2025-01-27)
+
+
+### Features
+
+* **static-wado:** add support for case-insensitive searching ([#4603](https://github.com/OHIF/Viewers/issues/4603)) ([ac6e674](https://github.com/OHIF/Viewers/commit/ac6e674b4d094f942556d045178011bbf3f81796))
+
+
+
+
+
+# [3.10.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.73...v3.10.0-beta.74) (2025-01-27)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.72...v3.10.0-beta.73) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.71...v3.10.0-beta.72) (2025-01-24)
+
+**Note:** Version bump only for package @ohif/extension-default
+
+
+
+
+
+# [3.10.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.70...v3.10.0-beta.71) (2025-01-23)
+
+
+### Features
+
+* **customization:** new customization service api ([#4688](https://github.com/OHIF/Viewers/issues/4688)) ([55ad8ef](https://github.com/OHIF/Viewers/commit/55ad8efbabc3fabd8031fc08927b2f92ae5aec69))
+
+
+
+
+
 # [3.10.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.69...v3.10.0-beta.70) (2025-01-23)
 
 

extensions/default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-default",
-  "version": "3.10.0-beta.70",
+  "version": "3.10.0-beta.97",
   "description": "Common/default features and functionality for basic image viewing",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.70",
-    "@ohif/i18n": "3.10.0-beta.70",
+    "@ohif/core": "3.10.0-beta.97",
+    "@ohif/i18n": "3.10.0-beta.97",
     "dcmjs": "*",
     "dicomweb-client": "^0.10.4",
     "prop-types": "^15.6.2",

extensions/default/src/Components/DataSourceConfigurationComponent.tsx

@@ -29,8 +29,9 @@ function DataSourceConfigurationComponent({
         return;
       }
 
-      const { factory: configurationAPIFactory } =
-        customizationService.get(activeDataSourceDef.configuration.configurationAPI) ?? {};
+      const { factory: configurationAPIFactory } = customizationService.getCustomization(
+        activeDataSourceDef.configuration.configurationAPI
+      ) ?? { factory: () => null };
 
       if (!configurationAPIFactory) {
         return;

extensions/default/src/Components/ItemListComponent.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, InputFilterText, LoadingIndicatorProgress } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
+import { Button, InputFilterText } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 
@@ -16,6 +17,7 @@ function ItemListComponent({
   itemList,
   onItemClicked,
 }: ItemListComponentProps): ReactElement {
+  const { servicesManager } = useSystem();
   const { t } = useTranslation('DataSourceConfiguration');
   const [filterValue, setFilterValue] = useState('');
 
@@ -23,6 +25,10 @@ function ItemListComponent({
     setFilterValue('');
   }, [itemList]);
 
+  const LoadingIndicatorProgress = servicesManager.services.customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
+
   return (
     <div className="flex min-h-[1px] grow flex-col gap-4">
       <div className="flex items-center justify-between">

extensions/default/src/Components/MoreDropdownMenu.tsx

@@ -3,6 +3,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  DropdownMenuItem,
   Icons,
   Button,
 } from '@ohif/ui-next';
@@ -11,13 +12,40 @@ import {
  * The default sub-menu appearance and setup is defined here, but this can be
  * replaced by
  */
-const getMenuItemsDefault = ({ commandsManager, items, servicesManager, ...props }) => {
+const getMenuItemsDefault = ({
+  commandsManager,
+  items,
+  servicesManager,
+  ...props
+}: withAppTypes) => {
   const { customizationService } = servicesManager.services;
 
   // This allows replacing the default child item for menus, whereas the entire
   // getMenuItems can also be replaced by providing it to the MoreDropdownMenu
   const menuContent = customizationService.getCustomization('ohif.menuContent');
 
+  // Default menu item component if none is provided through customization
+
+  const DefaultMenuItem = ({
+    item,
+  }: {
+    item: {
+      id: string;
+      label: string;
+      iconName: string;
+      onClick: ({ commandsManager, ...props }: withAppTypes) => () => void;
+    };
+  }) => (
+    <DropdownMenuItem onClick={() => item.onClick({ commandsManager, ...props })}>
+      <div className="flex items-center gap-2">
+        {item.iconName && <Icons.ByName name={item.iconName} />}
+        <span>{item.label}</span>
+      </div>
+    </DropdownMenuItem>
+  );
+
+  const MenuItemComponent = menuContent?.content || DefaultMenuItem;
+
   return (
     <DropdownMenuContent
       hideWhenDetached
@@ -27,15 +55,15 @@ const getMenuItemsDefault = ({ commandsManager, items, servicesManager, ...props
         e.preventDefault();
       }}
     >
-      {items?.map((item, index) =>
-        React.createElement(menuContent.content, {
-          key: item.id || `menu-item-${index}`,
-          item,
-          commandsManager,
-          servicesManager,
-          ...props,
-        })
-      )}
+      {items?.map((item, index) => (
+        <MenuItemComponent
+          key={item.id || `menu-item-${index}`}
+          item={item}
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          {...props}
+        />
+      ))}
     </DropdownMenuContent>
   );
 };
@@ -56,9 +84,9 @@ export default function MoreDropdownMenu(bindProps) {
   } = bindProps;
   const { customizationService } = servicesManager.services;
 
-  const items = customizationService.getCustomization(menuItemsKey)?.value;
+  const items = customizationService.getCustomization(menuItemsKey);
 
-  if (!items) {
+  if (!items?.length) {
     return null;
   }
 

extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx

@@ -1,5 +1,4 @@
 import * as ContextMenuItemsBuilder from './ContextMenuItemsBuilder';
-import ContextMenu from '../../../../platform/ui/src/components/ContextMenu/ContextMenu';
 import { CommandsManager } from '@ohif/core';
 import { annotation as CsAnnotation } from '@cornerstonejs/tools';
 import { Menu, MenuItem, Point, ContextMenuProps } from './types';
@@ -72,6 +71,8 @@ export default class ContextMenuController {
       menuId
     );
 
+    const ContextMenu = this.services.customizationService.getCustomization('ui.contextMenu');
+
     this.services.uiDialogService.dismiss({ id: 'context-menu' });
     this.services.uiDialogService.create({
       id: 'context-menu',

extensions/default/src/CustomizableContextMenu/defaultContextMenu.ts

@@ -1,34 +0,0 @@
-const defaultContextMenu = {
-  id: 'measurementsContextMenu',
-  customizationType: 'ohif.contextMenu',
-  menus: [
-    // Get the items from the UI Customization for the menu name (and have a custom name)
-    {
-      id: 'forExistingMeasurement',
-      selector: ({ nearbyToolData }) => !!nearbyToolData,
-      items: [
-        {
-          label: 'Delete measurement',
-          commands: [
-            {
-              commandName: 'deleteMeasurement',
-              // we only have support for cornerstoneTools context menu since
-              // they are svg based
-              context: 'CORNERSTONE',
-            },
-          ],
-        },
-        {
-          label: 'Add Label',
-          commands: [
-            {
-              commandName: 'setMeasurementLabel',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-export default defaultContextMenu;

extensions/default/src/CustomizableContextMenu/index.ts

@@ -1,11 +1,5 @@
 import ContextMenuController from './ContextMenuController';
 import * as ContextMenuItemsBuilder from './ContextMenuItemsBuilder';
-import defaultContextMenu from './defaultContextMenu';
 import * as CustomizableContextMenuTypes from './types';
 
-export {
-  ContextMenuController,
-  CustomizableContextMenuTypes,
-  ContextMenuItemsBuilder,
-  defaultContextMenu,
-};
+export { ContextMenuController, CustomizableContextMenuTypes, ContextMenuItemsBuilder };

extensions/default/src/CustomizableContextMenu/types.ts

@@ -45,10 +45,11 @@ export type UIMenuItem = {
  */
 export interface MenuItem {
   id?: string;
-  /** The customization type is used to apply preset values to this item
+  /**
+   * The customization type is used to apply preset values to this item
    * when registered with the customization service.
    */
-  customizationType?: string;
+  inheritsFrom?: string;
 
   // The label is the value to show in the menu for this item
   label?: string;
@@ -91,7 +92,7 @@ export interface Menu {
   /** The customization type is used to apply preset values to this item
    * when registered with the customization service.
    */
-  customizationType?: string;
+  inheritsFrom?: string;
 
   // Choose whether this menu applies.
   selector?: Types.Predicate;

extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx

@@ -1,30 +1,44 @@
 import dcmjs from 'dcmjs';
 import moment from 'moment';
-import React, { useState, useMemo, useEffect } from 'react';
-import { classes } from '@ohif/core';
+import React, { useState, useMemo, useCallback } from 'react';
+import { classes, Types } from '@ohif/core';
 import { InputFilterText } from '@ohif/ui';
-import debounce from 'lodash.debounce';
 import { Select, SelectTrigger, SelectContent, SelectItem, Slider } from '@ohif/ui-next';
 
 import DicomTagTable from './DicomTagTable';
 import './DicomTagBrowser.css';
 
+export type Row = {
+  uid: string;
+  tag: string;
+  valueRepresentation: string;
+  keyword: string;
+  value: string;
+  isVisible: boolean;
+  depth: number;
+  parents?: string[];
+  children?: string[];
+  areChildrenVisible?: true;
+};
+
+let rowCounter = 0;
+const generateRowId = () => `row_${++rowCounter}`;
+
 const { ImageSet } = classes;
 const { DicomMetaDictionary } = dcmjs.data;
 const { nameMap } = DicomMetaDictionary;
 
-const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
-  // The column indices that are to be excluded during a filter of the table.
-  // At present the column indices are:
-  // 0: DICOM tag
-  // 1: VR
-  // 2: Keyword
-  // 3: Value
-  const excludedColumnIndicesForFilter: Set<number> = new Set([1]);
-
+const DicomTagBrowser = ({
+  displaySets,
+  displaySetInstanceUID,
+}: {
+  displaySets: Types.DisplaySet[];
+  displaySetInstanceUID: string;
+}) => {
   const [selectedDisplaySetInstanceUID, setSelectedDisplaySetInstanceUID] =
     useState(displaySetInstanceUID);
   const [instanceNumber, setInstanceNumber] = useState(1);
+  const [shouldShowInstanceList, setShouldShowInstanceList] = useState(false);
   const [filterValue, setFilterValue] = useState('');
 
   const onSelectChange = value => {
@@ -36,9 +50,6 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
     ds => ds.displaySetInstanceUID === selectedDisplaySetInstanceUID
   );
 
-  const isImageStack = _isImageStack(activeDisplaySet);
-  const showInstanceList = isImageStack && activeDisplaySet.images.length > 1;
-
   const displaySetList = useMemo(() => {
     displaySets.sort((a, b) => a.SeriesNumber - b.SeriesNumber);
     return displaySets.map(displaySet => {
@@ -64,48 +75,53 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
     });
   }, [displaySets]);
 
+  const getMetadata = useCallback(
+    isImageStack => {
+      if (isImageStack) {
+        return activeDisplaySet.images[instanceNumber - 1];
+      }
+      return activeDisplaySet.instance || activeDisplaySet;
+    },
+    [activeDisplaySet, instanceNumber]
+  );
+
   const rows = useMemo(() => {
-    let metadata;
-    if (isImageStack) {
-      metadata = activeDisplaySet.images[instanceNumber - 1];
-    } else {
-      metadata = activeDisplaySet.instance || activeDisplaySet;
-    }
+    const isImageStack = activeDisplaySet instanceof ImageSet;
+    const metadata = getMetadata(isImageStack);
+
+    setShouldShowInstanceList(isImageStack && activeDisplaySet.images.length > 1);
     const tags = getSortedTags(metadata);
-    return getFormattedRowsFromTags(tags, metadata);
-  }, [instanceNumber, selectedDisplaySetInstanceUID]);
+    const rows = getFormattedRowsFromTags({ tags, metadata, depth: 0 });
+    return rows;
+  }, [getMetadata, activeDisplaySet]);
 
   const filteredRows = useMemo(() => {
     if (!filterValue) {
       return rows;
     }
 
-    const filterValueLowerCase = filterValue.toLowerCase();
-    return rows.filter(row => {
-      return row.reduce((keepRow, col, colIndex) => {
-        if (keepRow) {
-          // We are already keeping the row, why do more work so return now.
-          return keepRow;
-        }
+    const matchedRowIds = new Set();
 
-        if (excludedColumnIndicesForFilter.has(colIndex)) {
-          return keepRow;
-        }
+    const propertiesToCheck = ['tag', 'valueRepresentation', 'keyword', 'value'];
 
-        return keepRow || col.toLowerCase().includes(filterValueLowerCase);
-      }, false);
-    });
-  }, [rows, filterValue]);
+    const setIsMatched = row => {
+      const isDirectMatch = propertiesToCheck.some(propertyName =>
+        row[propertyName]?.toLowerCase().includes(filterValueLowerCase)
+      );
 
-  const debouncedSetFilterValue = useMemo(() => {
-    return debounce(setFilterValue, 200);
-  }, []);
+      if (!isDirectMatch) {
+        return;
+      }
 
-  useEffect(() => {
-    return () => {
-      debouncedSetFilterValue?.cancel();
+      matchedRowIds.add(row.uid);
+
+      [...(row.parents ?? []), ...(row.children ?? [])].forEach(uid => matchedRowIds.add(uid));
     };
-  }, []);
+
+    const filterValueLowerCase = filterValue.toLowerCase();
+    rows.forEach(setIsMatched);
+    return rows.filter(row => matchedRowIds.has(row.uid));
+  }, [rows, filterValue]);
 
   return (
     <div className="dicom-tag-browser-content bg-muted">
@@ -136,10 +152,10 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
               </SelectContent>
             </Select>
           </div>
-          {showInstanceList && (
+          {shouldShowInstanceList && (
             <div className="mx-auto flex w-1/5 flex-col">
               <span className="text-muted-foreground flex h-6 items-center text-xs">
-                Instance Number ({instanceNumber} of {activeDisplaySet.images.length})
+                Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length})
               </span>
               <Slider
                 value={[instanceNumber]}
@@ -147,7 +163,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
                   setInstanceNumber(value);
                 }}
                 min={1}
-                max={activeDisplaySet.images.length}
+                max={activeDisplaySet?.images?.length}
                 step={1}
                 className="pt-4"
               />
@@ -169,22 +185,33 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
   );
 };
 
-function getFormattedRowsFromTags(tags, metadata) {
-  const rows = [];
+function getFormattedRowsFromTags({ tags, metadata, depth, parents }) {
+  const rows: Row[] = [];
 
   tags.forEach(tagInfo => {
+    const uid = generateRowId();
     if (tagInfo.vr === 'SQ') {
-      rows.push([`${tagInfo.tagIndent}${tagInfo.tag}`, tagInfo.vr, tagInfo.keyword, '']);
-
-      const { values } = tagInfo;
-
-      values.forEach((item, index) => {
-        const formatedRowsFromTags = getFormattedRowsFromTags(item, metadata);
-
-        rows.push([`${item[0].tagIndent}(FFFE,E000)`, '', `Item #${index}`, '']);
-
-        rows.push(...formatedRowsFromTags);
-      });
+      const children = tagInfo.values.flatMap(value =>
+        getFormattedRowsFromTags({
+          tags: value,
+          metadata,
+          depth: depth + 1,
+          parents: parents ? [...parents, uid] : [uid],
+        })
+      );
+      const row: Row = {
+        uid,
+        tag: tagInfo.tag,
+        valueRepresentation: tagInfo.vr,
+        keyword: tagInfo.keyword,
+        value: '',
+        depth,
+        isVisible: true,
+        areChildrenVisible: true,
+        children: children.map(child => child.uid),
+        parents,
+      };
+      rows.push(row, ...children);
     } else {
       if (tagInfo.vr === 'xs') {
         try {
@@ -192,10 +219,20 @@ function getFormattedRowsFromTags(tags, metadata) {
           const originalTagInfo = metadata[tag];
           tagInfo.vr = originalTagInfo.vr;
         } catch (error) {
-          console.error(`Failed to parse value representation for tag '${tagInfo.keyword}'`);
+          console.warn(`Failed to parse value representation for tag '${tagInfo.keyword}'`);
         }
       }
-      rows.push([`${tagInfo.tagIndent}${tagInfo.tag}`, tagInfo.vr, tagInfo.keyword, tagInfo.value]);
+      const row: Row = {
+        uid,
+        tag: tagInfo.tag,
+        valueRepresentation: tagInfo.vr,
+        keyword: tagInfo.keyword,
+        value: tagInfo.value,
+        depth,
+        isVisible: true,
+        parents,
+      };
+      rows.push(row);
     }
   });
 
@@ -216,16 +253,6 @@ function getRows(metadata, depth = 0) {
 
   const keywords = Object.keys(metadata);
 
-  let tagIndent = '';
-
-  for (let i = 0; i < depth; i++) {
-    tagIndent += '>';
-  }
-
-  if (depth > 0) {
-    tagIndent += ' '; // If indented, add a space after the indents.
-  }
-
   const rows = [];
   for (let i = 0; i < keywords.length; i++) {
     let keyword = keywords[i];
@@ -245,7 +272,6 @@ function getRows(metadata, depth = 0) {
 
       const sequence = {
         tag: tagInfo.tag,
-        tagIndent,
         vr: tagInfo.vr,
         keyword,
         values: [],
@@ -311,7 +337,6 @@ function getRows(metadata, depth = 0) {
     if (tagInfo) {
       rows.push({
         tag: tagInfo.tag,
-        tagIndent,
         vr: tagInfo.vr,
         keyword,
         value,
@@ -323,7 +348,6 @@ function getRows(metadata, depth = 0) {
         const tag = `(${keyword.substring(0, 4)},${keyword.substring(4, 8)})`;
         rows.push({
           tag,
-          tagIndent,
           vr: '',
           keyword: 'Private Tag',
           value,
@@ -335,10 +359,6 @@ function getRows(metadata, depth = 0) {
   return rows;
 }
 
-function _isImageStack(displaySet) {
-  return displaySet instanceof ImageSet;
-}
-
 function toArray(objectOrArray) {
   return Array.isArray(objectOrArray) ? objectOrArray : [objectOrArray];
 }

extensions/default/src/DicomTagBrowser/DicomTagTable.tsx

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { VariableSizeList as List } from 'react-window';
 import classNames from 'classnames';
 import debounce from 'lodash.debounce';
+import { Row } from './DicomTagBrowser';
+import { Icons } from '@ohif/ui-next';
 
 const lineHeightPx = 20;
 const lineHeightClassName = `leading-[${lineHeightPx}px]`;
@@ -12,6 +14,52 @@ const rowStyle = {
   borderBottomWidth: `${rowBottomBorderPx}px`,
   ...rowVerticalPaddingStyle,
 };
+const indentationPadding = 8;
+
+const RowComponent = ({
+  row,
+  style,
+  keyPrefix,
+  onToggle,
+}: {
+  row: Row;
+  style: any;
+  keyPrefix: string;
+  onToggle?: (areChildrenVisible: boolean) => void;
+}) => {
+  const handleToggle = useCallback(() => {
+    onToggle(!row.areChildrenVisible);
+  }, [row.areChildrenVisible, onToggle]);
+
+  const hasChildren = row.children && row.children.length > 0;
+  const isChildOrParent = hasChildren || row.depth > 0;
+  const padding = indentationPadding * (1 + 2 * row.depth);
+
+  return (
+    <div
+      style={{ ...style, ...rowStyle }}
+      className={classNames(
+        'hover:bg-secondary-main border-secondary-light flex w-full flex-row items-center break-all bg-black text-base transition duration-300',
+        lineHeightClassName
+      )}
+      key={keyPrefix}
+    >
+      {isChildOrParent && (
+        <div style={{ paddingLeft: `${padding}px`, opacity: onToggle ? 1 : 0 }}>
+          {row.areChildrenVisible ? (
+            <Icons.ChevronDown onClick={handleToggle} />
+          ) : (
+            <Icons.ChevronRight onClick={handleToggle} />
+          )}
+        </div>
+      )}
+      <div className="w-4/24 px-3">{row.tag}</div>
+      <div className="w-2/24 px-3">{row.valueRepresentation}</div>
+      <div className="w-6/24 px-3">{row.keyword}</div>
+      <div className="w-5/24 grow px-3">{row.value}</div>
+    </div>
+  );
+};
 
 function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
   return (
@@ -56,8 +104,7 @@ function ColumnHeaders({ tagRef, vrRef, keywordRef, valueRef }) {
     </div>
   );
 }
-
-function DicomTagTable({ rows }) {
+function DicomTagTable({ rows }: { rows: Row[] }) {
   const listRef = useRef();
   const canvasRef = useRef();
 
@@ -65,6 +112,7 @@ function DicomTagTable({ rows }) {
   const [vrHeaderElem, setVrHeaderElem] = useState(null);
   const [keywordHeaderElem, setKeywordHeaderElem] = useState(null);
   const [valueHeaderElem, setValueHeaderElem] = useState(null);
+  const [internalRows, setInternalRows] = useState(rows);
 
   // Here the refs are inturn stored in state to trigger a render of the table.
   // This virtualized table does NOT render until the header is rendered because the header column widths are used to determine the row heights in the table.
@@ -90,6 +138,14 @@ function DicomTagTable({ rows }) {
     }
   };
 
+  useEffect(() => {
+    setInternalRows(rows);
+  }, [rows]);
+
+  const visibleRows = useMemo(() => {
+    return internalRows.filter(row => row.isVisible);
+  }, [internalRows]);
+
   /**
    * When new rows are set, scroll to the top and reset the virtualization.
    */
@@ -116,42 +172,8 @@ function DicomTagTable({ rows }) {
     };
   }, []);
 
-  const Row = useCallback(
-    ({ index, style }) => {
-      const row = rows[index];
-
-      return (
-        <div
-          style={{ ...style, ...rowStyle }}
-          className={classNames(
-            'hover:bg-secondary-main border-secondary-light flex w-full flex-row items-center break-all bg-black text-base transition duration-300',
-            lineHeightClassName
-          )}
-          key={`DICOMTagRow-${index}`}
-        >
-          <div className="w-4/24 px-3">{row[0]}</div>
-          <div className="w-2/24 px-3">{row[1]}</div>
-          <div className="w-6/24 px-3">{row[2]}</div>
-          <div className="w-5/24 grow px-3">{row[3]}</div>
-        </div>
-      );
-    },
-    [rows]
-  );
-
-  /**
-   * Whenever any one of the column headers is set, then the header is rendered.
-   * Here we chose the tag header.
-   */
-  const isHeaderRendered = useCallback(() => tagHeaderElem !== null, [tagHeaderElem]);
-
-  /**
-   * Get the item/row size. We use the header column widths to calculate the various row heights.
-   * @param index the row index
-   * @returns the row height
-   */
-  const getItemSize = useCallback(
-    index => {
+  const getOneRowHeight = useCallback(
+    row => {
       const headerWidths = [
         tagHeaderElem.offsetWidth,
         vrHeaderElem.offsetWidth,
@@ -162,17 +184,79 @@ function DicomTagTable({ rows }) {
       const context = canvasRef.current.getContext('2d');
       context.font = getComputedStyle(canvasRef.current).font;
 
-      return rows[index]
-        .map((colText, index) => {
+      const propertiesToCheck = ['tag', 'valueRepresentation', 'keyword', 'value'];
+
+      return Object.entries(row)
+        .filter(([key]) => propertiesToCheck.includes(key))
+        .map(([, colText], index) => {
           const colOneLineWidth = context.measureText(colText).width;
           const numLines = Math.ceil(colOneLineWidth / headerWidths[index]);
           return numLines * lineHeightPx + 2 * rowVerticalPaddingPx + rowBottomBorderPx;
         })
-        .reduce((maxHeight, colHeight) => Math.max(maxHeight, colHeight));
+        .reduce((maxHeight, colHeight) => Math.max(maxHeight, colHeight), 0);
     },
-    [rows, keywordHeaderElem, tagHeaderElem, valueHeaderElem, vrHeaderElem]
+    [keywordHeaderElem, tagHeaderElem, valueHeaderElem, vrHeaderElem]
   );
 
+  /**
+   * Get the item/row size. We use the header column widths to calculate the various row heights.
+   * @param index the row index
+   * @returns the row height
+   */
+  const getItemSize = useCallback(
+    rows => index => {
+      const row = rows[index];
+      const height = getOneRowHeight(row);
+      return height;
+    },
+    [getOneRowHeight]
+  );
+
+  const onToggle = useCallback(
+    sourceRow => {
+      if (!sourceRow.children) {
+        return undefined;
+      }
+
+      return areChildrenVisible => {
+        const newInternalRows = internalRows.map(internalRow => {
+          if (sourceRow.uid === internalRow.uid) {
+            return { ...internalRow, areChildrenVisible };
+          }
+          if (sourceRow.children.includes(internalRow.uid)) {
+            return { ...internalRow, isVisible: areChildrenVisible, areChildrenVisible };
+          }
+          return internalRow;
+        });
+        setInternalRows(newInternalRows);
+      };
+    },
+    [internalRows]
+  );
+
+  const getRowComponent = useCallback(
+    ({ rows }: { rows: Row[] }) =>
+      function RowList({ index, style }) {
+        const row = useMemo(() => rows[index], [index]);
+
+        return (
+          <RowComponent
+            style={style}
+            row={row}
+            keyPrefix={`DICOMTagRow-${index}`}
+            onToggle={onToggle(row)}
+          />
+        );
+      },
+    [onToggle]
+  );
+
+  /**
+   * Whenever any one of the column headers is set, then the header is rendered.
+   * Here we chose the tag header.
+   */
+  const isHeaderRendered = useCallback(() => tagHeaderElem !== null, [tagHeaderElem]);
+
   return (
     <div>
       <canvas
@@ -194,12 +278,12 @@ function DicomTagTable({ rows }) {
           <List
             ref={listRef}
             height={500}
-            itemCount={rows.length}
-            itemSize={getItemSize}
+            itemCount={visibleRows.length}
+            itemSize={getItemSize(visibleRows)}
             width={'100%'}
             className="ohif-scrollbar"
           >
-            {Row}
+            {getRowComponent({ rows: visibleRows })}
           </List>
         )}
       </div>
@@ -207,4 +291,4 @@ function DicomTagTable({ rows }) {
   );
 }
 
-export default DicomTagTable;
+export default React.memo(DicomTagTable);

extensions/default/src/DicomWebDataSource/index.ts

@@ -151,6 +151,7 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
         singlepart: dicomWebConfig.singlepart,
         headers: userAuthenticationService.getAuthorizationHeader(),
         errorInterceptor: errorHandler.getHTTPErrorHandler(),
+        supportsFuzzyMatching: dicomWebConfig.supportsFuzzyMatching,
       };
 
       wadoConfig = {
@@ -159,6 +160,7 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
         singlepart: dicomWebConfig.singlepart,
         headers: userAuthenticationService.getAuthorizationHeader(),
         errorInterceptor: errorHandler.getHTTPErrorHandler(),
+        supportsFuzzyMatching: dicomWebConfig.supportsFuzzyMatching,
       };
 
       // TODO -> Two clients sucks, but its better than 1000.
@@ -582,8 +584,11 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
       return dicomWebConfigCopy;
     },
     getStudyInstanceUIDs({ params, query }) {
-      const { StudyInstanceUIDs: paramsStudyInstanceUIDs } = params;
-      const queryStudyInstanceUIDs = utils.splitComma(query.getAll('StudyInstanceUIDs'));
+      const paramsStudyInstanceUIDs = params.StudyInstanceUIDs || params.studyInstanceUIDs;
+
+      const queryStudyInstanceUIDs = utils.splitComma(
+        query.getAll('StudyInstanceUIDs').concat(query.getAll('studyInstanceUIDs'))
+      );
 
       const StudyInstanceUIDs =
         (queryStudyInstanceUIDs.length && queryStudyInstanceUIDs) || paramsStudyInstanceUIDs;

extensions/default/src/DicomWebDataSource/utils/StaticWadoClient.ts

@@ -156,18 +156,40 @@ export default class StaticWadoClient extends api.DICOMwebClient {
    *
    * @param {*} desired
    * @param {*} actual
+   * @param {*} options - fuzzyMatching: if true, then do a sub-string match
    * @returns true if the values match
    */
-  compareValues(desired, actual) {
+  compareValues(desired, actual, options) {
+    const { fuzzyMatching } = options;
+
     if (Array.isArray(desired)) {
-      return desired.find(item => this.compareValues(item, actual));
+      return desired.find(item => this.compareValues(item, actual, options));
     }
     if (Array.isArray(actual)) {
-      return actual.find(actualItem => this.compareValues(desired, actualItem));
+      return actual.find(actualItem => this.compareValues(desired, actualItem, options));
     }
     if (actual?.Alphabetic) {
       actual = actual.Alphabetic;
     }
+
+    if (fuzzyMatching && typeof actual === 'string' && typeof desired === 'string') {
+      const normalizeValue = str => {
+        return str.toLowerCase();
+      };
+
+      const normalizedDesired = normalizeValue(desired);
+      const normalizedActual = normalizeValue(actual);
+
+      const tokenizeAndNormalize = str => str.split(/[\s^]+/).filter(Boolean);
+
+      const desiredTokens = tokenizeAndNormalize(normalizedDesired);
+      const actualTokens = tokenizeAndNormalize(normalizedActual);
+
+      return desiredTokens.every(desiredToken =>
+        actualTokens.some(actualToken => actualToken.startsWith(desiredToken))
+      );
+    }
+
     if (typeof actual == 'string') {
       if (actual.length === 0) {
         return true;
@@ -194,7 +216,7 @@ export default class StaticWadoClient extends api.DICOMwebClient {
     }
     const dash = range.indexOf('-');
     if (dash === -1) {
-      return this.compareValues(range, value);
+      return this.compareValues(range, value, {});
     }
     const start = range.substring(0, dash);
     const end = range.substring(dash + 1);
@@ -211,6 +233,14 @@ export default class StaticWadoClient extends api.DICOMwebClient {
    * @returns
    */
   filterItem(key: string, queryParams, study, sourceFilterMap) {
+    const isName = (key: string) => key.indexOf('name') !== -1;
+
+    const { supportsFuzzyMatching = false } = this.config;
+
+    const options = {
+      fuzzyMatching: isName(key) && supportsFuzzyMatching,
+    };
+
     const altKey = sourceFilterMap[key] || key;
     if (!queryParams) {
       return true;
@@ -227,7 +257,8 @@ export default class StaticWadoClient extends api.DICOMwebClient {
       return this.compareDateRange(testValue, valueElem.Value[0]);
     }
     const value = valueElem.Value;
-    return this.compareValues(testValue, value);
+
+    return this.compareValues(testValue, value, options);
   }
 
   /** Converts the query parameters to lower case query parameters */

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -6,7 +6,7 @@ import { utils } from '@ohif/core';
 import { useNavigate } from 'react-router-dom';
 import { Separator } from '@ohif/ui-next';
 import { PanelStudyBrowserHeader } from './PanelStudyBrowserHeader';
-import { defaultActionIcons, defaultViewPresets } from './constants';
+import { defaultActionIcons } from './constants';
 import MoreDropdownMenu from '../../Components/MoreDropdownMenu';
 
 const { sortStudyInstances, formatDate, createStudyBrowserTabs } = utils;
@@ -43,7 +43,7 @@ function PanelStudyBrowser({
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
 
   const [viewPresets, setViewPresets] = useState(
-    customizationService.getCustomization('studyBrowser.viewPresets')?.value || defaultViewPresets
+    customizationService.getCustomization('studyBrowser.viewPresets')
   );
 
   const [actionIcons, setActionIcons] = useState(defaultActionIcons);

extensions/default/src/Toolbar/ToolBoxWrapper.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ToolButton } from '@ohif/ui-next';
+
+/**
+ * Wraps the ToolButtonList component to handle the OHIF toolbar button structure
+ * @param props - Component props
+ * @returns Component
+ */
+export function ToolBoxButtonGroupWrapper({ groupId, items, onInteraction, ...props }) {
+  if (!items || !groupId) {
+    return null;
+  }
+
+  return (
+    <div className="bg-popover flex flex-row space-x-1 rounded-md px-0 py-0">
+      {items.map(item => (
+        <ToolButton
+          {...item}
+          key={item.id}
+          size="small"
+          className={props.disabled && 'text-primary'}
+          onInteraction={() =>
+            onInteraction?.({ groupId, itemId: item.id, commands: item.commands })
+          }
+        />
+      ))}
+    </div>
+  );
+}
+
+export function ToolBoxButtonWrapper({ onInteraction, ...props }) {
+  return (
+    <div className="bg-popover flex flex-row rounded-md px-0 py-0">
+      <ToolButton
+        {...props}
+        id={props.id}
+        size="small"
+        className={classNames(props.disabled && 'text-primary')}
+        onInteraction={() => onInteraction?.({ itemId: props.id, commands: props.commands })}
+      />
+    </div>
+  );
+}

extensions/default/src/Toolbar/ToolButtonListWrapper.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  ToolButtonList,
+  ToolButton,
+  ToolButtonListDefault,
+  ToolButtonListDropDown,
+  ToolButtonListItem,
+  ToolButtonListDivider,
+} from '@ohif/ui-next';
+
+interface ButtonItem {
+  id: string;
+  icon?: string;
+  label?: string;
+  tooltip?: string;
+  isActive?: boolean;
+  disabledText?: string;
+  commands?: Record<string, unknown>;
+  disabled?: boolean;
+  className?: string;
+}
+
+interface ToolButtonListWrapperProps {
+  groupId: string;
+  primary: ButtonItem;
+  items: ButtonItem[];
+  onInteraction?: (details: {
+    groupId: string;
+    itemId: string;
+    commands?: Record<string, unknown>;
+  }) => void;
+}
+
+/**
+ * Wraps the ToolButtonList component to handle the OHIF toolbar button structure
+ * @param props - Component props
+ * @returns Component
+ * // test
+ */
+export default function ToolButtonListWrapper({
+  groupId,
+  primary,
+  items,
+  onInteraction,
+}: ToolButtonListWrapperProps) {
+  return (
+    <ToolButtonList>
+      <ToolButtonListDefault>
+        <div
+          data-cy={`${groupId}-split-button-primary`}
+          data-tool={primary.id}
+          data-active={primary.isActive}
+        >
+          <ToolButton
+            {...primary}
+            onInteraction={({ itemId }) =>
+              onInteraction?.({ groupId, itemId, commands: primary.commands })
+            }
+            className={primary.className}
+          />
+        </div>
+      </ToolButtonListDefault>
+      <ToolButtonListDivider className={primary.isActive ? 'opacity-0' : 'opacity-100'} />
+      <div data-cy={`${groupId}-split-button-secondary`}>
+        <ToolButtonListDropDown>
+          {items.map(item => (
+            <ToolButtonListItem
+              key={item.id}
+              {...item}
+              data-cy={item.id}
+              data-tool={item.id}
+              data-active={item.isActive}
+              onSelect={() =>
+                onInteraction?.({ groupId, itemId: item.id, commands: item.commands })
+              }
+            >
+              <span className="pl-1">{item.label || item.tooltip || item.id}</span>
+            </ToolButtonListItem>
+          ))}
+        </ToolButtonListDropDown>
+      </div>
+    </ToolButtonList>
+  );
+}

extensions/default/src/Toolbar/Toolbar.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { Tooltip } from '@ohif/ui';
-import classnames from 'classnames';
 import { useToolbar } from '@ohif/core';
 
 export function Toolbar({ servicesManager, buttonSection = 'primary' }) {
@@ -15,7 +13,7 @@ export function Toolbar({ servicesManager, buttonSection = 'primary' }) {
 
   return (
     <>
-      {toolbarButtons.map(toolDef => {
+      {toolbarButtons?.map(toolDef => {
         if (!toolDef) {
           return null;
         }

extensions/default/src/Toolbar/ToolbarButtonGroupWithServices.tsx

@@ -1,5 +1,5 @@
-import { ToolbarButton, ButtonGroup } from '@ohif/ui';
 import React, { useCallback } from 'react';
+import { ToolbarButton, ButtonGroup } from '@ohif/ui';
 
 function ToolbarButtonGroupWithServices({ groupId, items, onInteraction, size }) {
   const getSplitButtonItems = useCallback(

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -2,87 +2,6 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton, LayoutPreset } from '@ohif/ui';
 
-const defaultCommonPresets = [
-  {
-    icon: 'layout-common-1x1',
-    commandOptions: {
-      numRows: 1,
-      numCols: 1,
-    },
-  },
-  {
-    icon: 'layout-common-1x2',
-    commandOptions: {
-      numRows: 1,
-      numCols: 2,
-    },
-  },
-  {
-    icon: 'layout-common-2x2',
-    commandOptions: {
-      numRows: 2,
-      numCols: 2,
-    },
-  },
-  {
-    icon: 'layout-common-2x3',
-    commandOptions: {
-      numRows: 2,
-      numCols: 3,
-    },
-  },
-];
-
-const _areSelectorsValid = (hp, displaySets, hangingProtocolService) => {
-  if (!hp.displaySetSelectors || Object.values(hp.displaySetSelectors).length === 0) {
-    return true;
-  }
-
-  return hangingProtocolService.areRequiredSelectorsValid(
-    Object.values(hp.displaySetSelectors),
-    displaySets[0]
-  );
-};
-
-const generateAdvancedPresets = ({ servicesManager }: withAppTypes) => {
-  const { hangingProtocolService, viewportGridService, displaySetService } =
-    servicesManager.services;
-
-  const hangingProtocols = Array.from(hangingProtocolService.protocols.values());
-
-  const viewportId = viewportGridService.getActiveViewportId();
-
-  if (!viewportId) {
-    return [];
-  }
-  const displaySetInsaneUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
-
-  if (!displaySetInsaneUIDs) {
-    return [];
-  }
-
-  const displaySets = displaySetInsaneUIDs.map(uid => displaySetService.getDisplaySetByUID(uid));
-
-  return hangingProtocols
-    .map(hp => {
-      if (!hp.isPreset) {
-        return null;
-      }
-
-      const areValid = _areSelectorsValid(hp, displaySets, hangingProtocolService);
-
-      return {
-        icon: hp.icon,
-        title: hp.name,
-        commandOptions: {
-          protocolId: hp.id,
-        },
-        disabled: !areValid,
-      };
-    })
-    .filter(preset => preset !== null);
-};
-
 function ToolbarLayoutSelectorWithServices({
   commandsManager,
   servicesManager,
@@ -138,9 +57,13 @@ function LayoutSelector({
   const dropdownRef = useRef(null);
 
   const { customizationService } = servicesManager.services;
-  const commonPresets = customizationService.get('commonPresets') || defaultCommonPresets;
-  const advancedPresets =
-    customizationService.get('advancedPresets') || generateAdvancedPresets({ servicesManager });
+
+  const commonPresets = customizationService.getCustomization('layoutSelector.commonPresets');
+  const advancedPresetsGenerator = customizationService.getCustomization(
+    'layoutSelector.advancedPresetGenerator'
+  );
+
+  const advancedPresets = advancedPresetsGenerator({ servicesManager });
 
   const closeOnOutsideClick = event => {
     if (isOpen && dropdownRef.current) {
@@ -216,7 +139,7 @@ function LayoutSelector({
               </div>
             </div>
 
-            <div className="bg-primary-dark flex flex-col gap-2.5 border-l-2 border-solid border-black  p-2">
+            <div className="bg-primary-dark flex flex-col gap-2.5 border-l-2 border-solid border-black p-2">
               <div className="text-aqua-pale text-xs">Custom</div>
               <DropdownContent
                 rows={rows}

extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx

@@ -5,7 +5,7 @@ import { panelGroupDefinition } from './constants/panels';
 /**
  * Set the minimum and maximum css style width attributes for the given element.
  * The two style attributes are cleared whenever the width
- * arguments is undefined.
+ * argument is undefined.
  * <p>
  * This utility is used as part of a HACK throughout the ViewerLayout component as
  * the means of restricting the side panel widths during the resizing of the
@@ -34,7 +34,7 @@ const useResizablePanels = (
   );
   const [leftResizablePanelMinimumSize, setLeftResizablePanelMinimumSize] = useState(0);
   const [rightResizablePanelMinimumSize, setRightResizablePanelMinimumSize] = useState(0);
-  const [leftResizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = useState(0);
+  const [leftResizablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = useState(0);
   const [rightResizePanelCollapsedSize, setRightResizePanelCollapsedSize] = useState(0);
 
   const resizablePanelGroupElemRef = useRef(null);
@@ -44,15 +44,16 @@ const useResizablePanels = (
   const resizableRightPanelAPIRef = useRef(null);
   const isResizableHandleDraggingRef = useRef(false);
 
+  // The total width of both handles.
+  const resizableHandlesWidth = useRef(null);
+
   // This useLayoutEffect is used to...
   // - Grab a reference to the various resizable panel elements needed for
   //   converting between percentages and pixels in various callbacks.
   // - Expand those panels that are initially expanded.
   useLayoutEffect(() => {
     const panelGroupElem = getPanelGroupElement(panelGroupDefinition.groupId);
-
     resizablePanelGroupElemRef.current = panelGroupElem;
-    const { width: panelGroupWidth } = panelGroupElem.getBoundingClientRect();
 
     const leftPanelElem = getPanelElement(panelGroupDefinition.left.panelId);
     resizableLeftPanelElemRef.current = leftPanelElem;
@@ -60,20 +61,29 @@ const useResizablePanels = (
     const rightPanelElem = getPanelElement(panelGroupDefinition.right.panelId);
     resizableRightPanelElemRef.current = rightPanelElem;
 
+    // Calculate and set the width of both handles combined.
+    const resizeHandles = document.querySelectorAll('[data-panel-resize-handle-id]');
+    resizableHandlesWidth.current = 0;
+    resizeHandles.forEach(resizeHandle => {
+      resizableHandlesWidth.current += resizeHandle.offsetWidth;
+    });
+
     // Since both resizable panels are collapsed by default (i.e. their default size is zero),
     // on the very first render check if either/both side panels should be expanded.
     // we use the initialExpandedOffsetWidth on the first render incase the panel has min width but we want the initial state to be larger than that
 
     if (!leftPanelClosed) {
-      const leftResizablePanelExpandedSize =
-        (panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth) * 100;
+      const leftResizablePanelExpandedSize = getPercentageSize(
+        panelGroupDefinition.left.initialExpandedOffsetWidth
+      );
       resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
       setMinMaxWidth(leftPanelElem, panelGroupDefinition.left.initialExpandedOffsetWidth);
     }
 
     if (!rightPanelClosed) {
-      const rightResizablePanelExpandedSize =
-        (panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth) * 100;
+      const rightResizablePanelExpandedSize = getPercentageSize(
+        panelGroupDefinition.right.initialExpandedOffsetWidth
+      );
       resizableRightPanelAPIRef?.current?.expand(rightResizablePanelExpandedSize);
       setMinMaxWidth(rightPanelElem, panelGroupDefinition.right.initialExpandedOffsetWidth);
     }
@@ -89,103 +99,47 @@ const useResizablePanels = (
   //   values whenever the resizable panel group is resized (e.g. whenever the
   //   browser window is resized).
   useLayoutEffect(() => {
-    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-
     // Ensure the side panels' percentage size is in synch with the pixel width of the
     // expanded side panels. In general the two get out-of-sync during a browser
     // window resize. Note that this code is here and NOT in the ResizeObserver
     // because it has to be done AFTER the minimum percentage size for a panel is
-    // updated which occurs only AFTER the render following a resize. And by virtue
-    // of the dependency on the  `resizablePanelDefaultSize` state, this code
-    // is executed on the render following an update of the minimum percentage size
+    // updated which occurs only AFTER the render following a browser window resize.
+    // And by virtue of the dependency on the minimum size state variables, this code
+    // is executed on the render following an update of the minimum percentage sizes
     // for a panel.
-    if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
-      const leftSize =
-        ((leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) /
-          panelGroupWidth) *
-        100;
-      resizableLeftPanelAPIRef.current.resize(leftSize);
+    if (!resizableLeftPanelAPIRef.current?.isCollapsed()) {
+      const leftSize = getPercentageSize(
+        leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize
+      );
+      resizableLeftPanelAPIRef.current?.resize(leftSize);
     }
 
-    if (!resizableRightPanelAPIRef.current.isCollapsed()) {
-      const rightSize =
-        ((rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) /
-          panelGroupWidth) *
-        100;
-      resizableRightPanelAPIRef.current.resize(rightSize);
+    if (!resizableRightPanelAPIRef?.current?.isCollapsed()) {
+      const rightSize = getPercentageSize(
+        rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize
+      );
+      resizableRightPanelAPIRef?.current?.resize(rightSize);
     }
 
     // This observer kicks in when the ViewportLayout resizable panel group
     // component is resized. This typically occurs when the browser window resizes.
     const observer = new ResizeObserver(() => {
-      const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-      const minimumLeftSize =
-        (panelGroupDefinition.left.minimumExpandedOffsetWidth / panelGroupWidth) * 100;
-      const minimumRightSize =
-        (panelGroupDefinition.right.minimumExpandedOffsetWidth / panelGroupWidth) * 100;
+      const minimumLeftSize = getPercentageSize(
+        panelGroupDefinition.left.minimumExpandedOffsetWidth
+      );
+      const minimumRightSize = getPercentageSize(
+        panelGroupDefinition.right.minimumExpandedOffsetWidth
+      );
 
-      // Set the new default and collapsed resizable panel sizes.
-      setLeftResizablePanelMinimumSize(Math.min(50, minimumLeftSize));
-      setRightResizablePanelMinimumSize(Math.min(50, minimumRightSize));
+      // Set the new minimum and collapsed resizable panel sizes.
+      setLeftResizablePanelMinimumSize(minimumLeftSize);
+      setRightResizablePanelMinimumSize(minimumRightSize);
       setLeftResizePanelCollapsedSize(
-        (panelGroupDefinition.left.collapsedOffsetWidth / panelGroupWidth) * 100
+        getPercentageSize(panelGroupDefinition.left.collapsedOffsetWidth)
       );
       setRightResizePanelCollapsedSize(
-        (panelGroupDefinition.right.collapsedOffsetWidth / panelGroupWidth) * 100
+        getPercentageSize(panelGroupDefinition.right.collapsedOffsetWidth)
       );
-
-      if (
-        resizableLeftPanelAPIRef.current.isCollapsed() &&
-        resizableRightPanelAPIRef.current.isCollapsed()
-      ) {
-        return;
-      }
-
-      // The code that follows is to handle cases when the group panel is resized to be
-      // too small to display either side panel at its current width.
-
-      // Determine the current widths of the two side panels.
-      let leftPanelOffsetWidth = resizableLeftPanelAPIRef.current.isCollapsed()
-        ? panelGroupDefinition.left.collapsedOffsetWidth
-        : leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
-
-      let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed()
-        ? panelGroupDefinition.right.collapsedOffsetWidth
-        : rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
-
-      if (
-        !resizableLeftPanelAPIRef.current.isCollapsed() &&
-        leftPanelOffsetWidth + rightPanelOffsetWidth > panelGroupWidth
-      ) {
-        // There is not enough space to show both panels at their pre-resize widths.
-        // Note that at this point, the viewport grid component is zero width.
-        // Reduce the left panel width so that both panels might fit.
-        leftPanelOffsetWidth = Math.max(
-          panelGroupWidth - rightPanelOffsetWidth,
-          panelGroupDefinition.left.minimumExpandedOffsetWidth
-        );
-        setLeftPanelExpandedWidth(
-          leftPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize
-        );
-        setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelOffsetWidth);
-      }
-
-      if (
-        !resizableRightPanelAPIRef.current.isCollapsed() &&
-        rightPanelOffsetWidth + leftPanelOffsetWidth > panelGroupWidth
-      ) {
-        // There is not enough space to show both panels at their pre-resize widths.
-        // Note that at this point, the viewport grid component is zero width.
-        // Reduce the right panel width so that both panels might fit.
-        rightPanelOffsetWidth = Math.max(
-          panelGroupWidth - leftPanelOffsetWidth,
-          panelGroupDefinition.right.minimumExpandedOffsetWidth
-        );
-        setRightPanelExpandedWidth(
-          rightPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize
-        );
-        setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelOffsetWidth);
-      }
     });
 
     observer.observe(resizablePanelGroupElemRef.current);
@@ -238,23 +192,26 @@ const useResizablePanels = (
   }, [setLeftPanelClosed]);
 
   const onLeftPanelOpen = useCallback(() => {
-    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
     resizableLeftPanelAPIRef?.current?.expand(
-      (panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth) * 100
+      getPercentageSize(panelGroupDefinition.left.initialExpandedOffsetWidth)
     );
     setLeftPanelClosed(false);
   }, [setLeftPanelClosed]);
 
   const onLeftPanelResize = useCallback(size => {
-    if (resizableLeftPanelAPIRef.current.isCollapsed()) {
+    if (!resizablePanelGroupElemRef?.current || resizableLeftPanelAPIRef.current?.isCollapsed()) {
       return;
     }
 
-    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    const newExpandedWidth =
-      (size / 100) * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
-
+    const newExpandedWidth = getExpandedPixelWidth(size);
     setLeftPanelExpandedWidth(newExpandedWidth);
+
+    if (!isResizableHandleDraggingRef.current) {
+      // This typically gets executed when the left panel is expanded via one of the UI
+      // buttons. It is done here instead of in the onLeftPanelOpen method
+      // because here we know the size of the expanded panel.
+      setMinMaxWidth(resizableLeftPanelElemRef.current, newExpandedWidth);
+    }
   }, []);
 
   const onRightPanelClose = useCallback(() => {
@@ -264,25 +221,49 @@ const useResizablePanels = (
   }, [setRightPanelClosed]);
 
   const onRightPanelOpen = useCallback(() => {
-    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
     resizableRightPanelAPIRef?.current?.expand(
-      (panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth) * 100
+      getPercentageSize(panelGroupDefinition.right.initialExpandedOffsetWidth)
     );
     setRightPanelClosed(false);
   }, [setRightPanelClosed]);
 
   const onRightPanelResize = useCallback(size => {
-    if (resizableRightPanelAPIRef?.current?.isCollapsed()) {
+    if (!resizablePanelGroupElemRef?.current || resizableRightPanelAPIRef?.current?.isCollapsed()) {
       return;
     }
 
-    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    const newExpandedWidth =
-      (size / 100) * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
-
+    const newExpandedWidth = getExpandedPixelWidth(size);
     setRightPanelExpandedWidth(newExpandedWidth);
+
+    if (!isResizableHandleDraggingRef.current) {
+      // This typically gets executed when the right panel is expanded via one of the UI
+      // buttons. It is done here instead of in the onRightPanelOpen method
+      // because here we know the size of the expanded panel.
+      setMinMaxWidth(resizableRightPanelElemRef.current, newExpandedWidth);
+    }
   }, []);
 
+  /**
+   * Gets the percentage size corresponding to the given pixel size.
+   * Note that the width attributed to the handles must be taken into account.
+   */
+  const getPercentageSize = pixelSize => {
+    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current?.getBoundingClientRect();
+    return (pixelSize / (panelGroupWidth - resizableHandlesWidth.current)) * 100;
+  };
+
+  /**
+   * Gets the width in pixels for an expanded panel given its percentage size/width.
+   * Note that the width attributed to the handles must be taken into account.
+   */
+  const getExpandedPixelWidth = percentageSize => {
+    const { width: panelGroupWidth } = resizablePanelGroupElemRef.current?.getBoundingClientRect();
+    const expandedWidth =
+      (percentageSize / 100) * (panelGroupWidth - resizableHandlesWidth.current) -
+      panelGroupDefinition.shared.expandedInsideBorderSize;
+    return expandedWidth;
+  };
+
   return [
     {
       expandedWidth: leftPanelExpandedWidth,
@@ -308,7 +289,7 @@ const useResizablePanels = (
       minSize: leftResizablePanelMinimumSize,
       onResize: onLeftPanelResize,
       collapsible: true,
-      collapsedSize: leftResizeablePanelCollapsedSize,
+      collapsedSize: leftResizablePanelCollapsedSize,
       onCollapse: () => setLeftPanelClosed(true),
       onExpand: () => setLeftPanelClosed(false),
       ref: resizableLeftPanelAPIRef,

extensions/default/src/ViewerLayout/constants/panels.ts

@@ -1,6 +1,6 @@
-const expandedInsideBorderSize = 4;
+const expandedInsideBorderSize = 0;
 const collapsedInsideBorderSize = 4;
-const collapsedOutsideBorderSize = 8;
+const collapsedOutsideBorderSize = 4;
 const collapsedWidth = 25;
 
 const rightPanelInitialExpandedWidth = 280;

extensions/default/src/ViewerLayout/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { LoadingIndicatorProgress, InvestigationalUseDialog } from '@ohif/ui';
+import { InvestigationalUseDialog } from '@ohif/ui';
 import { HangingProtocolService, CommandsManager } from '@ohif/core';
 import { useAppConfig } from '@state';
 import ViewerHeader from './ViewerHeader';
@@ -9,6 +9,8 @@ import SidePanelWithServices from '../Components/SidePanelWithServices';
 import { Onboarding, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@ohif/ui-next';
 import useResizablePanels from './ResizablePanelsHook';
 
+const resizableHandleClassName = 'mt-[1px] bg-black';
+
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
@@ -25,7 +27,7 @@ function ViewerLayout({
 }: withAppTypes): React.FunctionComponent {
   const [appConfig] = useAppConfig();
 
-  const { panelService, hangingProtocolService } = servicesManager.services;
+  const { panelService, hangingProtocolService, customizationService } = servicesManager.services;
   const [showLoadingIndicator, setShowLoadingIndicator] = useState(appConfig.showLoadingIndicator);
 
   const hasPanels = useCallback(
@@ -53,6 +55,10 @@ function ViewerLayout({
     setRightPanelClosed
   );
 
+  const LoadingIndicatorProgress = customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
+
   /**
    * Set body classes (tailwindcss) that don't allow vertical
    * or horizontal overflow (no scrolling). Also guarantee window
@@ -157,7 +163,7 @@ function ViewerLayout({
                 <ResizableHandle
                   onDragging={onHandleDragging}
                   disabled={!leftPanelResizable}
-                  className="!w-0"
+                  className={resizableHandleClassName}
                 />
               </>
             ) : null}
@@ -178,7 +184,7 @@ function ViewerLayout({
                 <ResizableHandle
                   onDragging={onHandleDragging}
                   disabled={!rightPanelResizable}
-                  className="!w-0"
+                  className={resizableHandleClassName}
                 />
                 <ResizablePanel {...resizableRightPanelProps}>
                   <SidePanelWithServices