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

chore(version): version.json [skip ci]
fix: video playback (#4497 )
2024-11-13 04:21:28 +00:00 · 2024-11-13 04:21:19 +00:00 · 2024-11-12 21:18:06 -05:00 · 2024-11-12 17:21:05 -05:00 · 2024-11-12 14:45:02 -05:00 · 2024-11-12 19:13:32 +00:00
1972 changed files with 33668 additions and 91972 deletions
@@ -1,52 +1,72 @@
 version: 2.1

+### ABOUT
+#
+# This configuration powers our Circleci.io integration
+#
+# Note:
+# Netlify works independently from this configuration to
+# create pull request previews and to update `https://docs.ohif.org`
+###
+
+## https://github.com/cypress-io/circleci-orb
+##
 orbs:
  codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@3.4.2
+  cypress: cypress-io/cypress@3.3.1
+
+executors:
+  cypress-custom:
+    description: |
+      Single Docker container used to run Cypress Tests
+    docker:
+      - image: cimg/node:<< parameters.node-version >>-browsers
+    parameters:
+      node-version:
+        default: '18.16.1'
+        description: |
+          The version of Node to run your tests with.
+        type: string

 defaults: &defaults
  docker:
-    - image: cimg/node:20.18.1
+    - image: cimg/node:18.18
      environment:
-        TERM: xterm
+        TERM: xterm # Enable colors in term
        QUICK_BUILD: true
  working_directory: ~/repo

-commands:
-  install_bun:
-    steps:
-      - restore_cache:
-          keys:
-            - bun-cache-v2-{{ arch }}-latest
-      - run:
-          name: Install Bun
-          command: |
-            if [ ! -d "$HOME/.bun" ]; then
-              curl -fsSL https://bun.sh/install | bash
-            fi
-            echo 'export BUN_INSTALL="$HOME/.bun"' >> $BASH_ENV
-            echo 'export PATH="$BUN_INSTALL/bin:$PATH"' >> $BASH_ENV
-            source $BASH_ENV
-      - save_cache:
-          key: bun-cache-v2-{{ arch }}-latest
-          paths:
-            - ~/.bun
-
 jobs:
+  ###
+  # Workflow: PR_CHECKS
+  ###
  UNIT_TESTS:
    <<: *defaults
    resource_class: large
    steps:
-      - install_bun
+      # Update yarn
+      - run: yarn -v
      - run: node --version
+      # Checkout code and ALL Git Tags
      - checkout
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            # when lock file changes, use increasingly general patterns to restore cache
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
      - run:
          name: Install Dependencies
-          command: bun install --no-save
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache ## Cache yarn and Cypress
+          key: yarn-packages-{{ checksum "yarn.lock" }}
      # RUN TESTS
      - run:
          name: 'JavaScript Test Suite'
-          command: bun run test:unit:ci
+          command: yarn run test:unit:ci
      # platform/app
      - run:
          name: 'VIEWER: Combine report output'
@@ -74,23 +94,36 @@ jobs:
          file: '/home/circleci/repo/platform/core/coverage/reports'
          flags: 'core'

+  ###
+  # Workflow: DEPLOY
+  ###
  BUILD:
    <<: *defaults
    resource_class: large
    steps:
      # Checkout code and ALL Git Tags
      - checkout
-      - install_bun
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            # when lock file changes, use increasingly general patterns to restore cache
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
      - run:
          name: Install Dependencies
-          command: bun install --no-save
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache ## Cache yarn and Cypress
+          key: yarn-packages-{{ checksum "yarn.lock" }}
      # Build & Test
      - run:
          name: 'Perform the versioning before build'
-          command: bun ./version.mjs
+          command: node ./version.mjs
      - run:
          name: 'Build the OHIF Viewer'
-          command: bun run build
+          command: yarn run build
          no_output_timeout: 45m
      - run:
          name: 'Upload SourceMaps, Send Deploy Notification'
@@ -112,18 +145,30 @@ jobs:
            - commit.txt
            - version.json

+  # just to make sure later on we can publish them
  BUILD_PACKAGES_QUICK:
    <<: *defaults
    resource_class: large
    steps:
-      - install_bun
+      - run: yarn -v
      # Checkout code and ALL Git Tags
      - checkout
      - attach_workspace:
          at: ~/repo
+      # Use increasingly general patterns to restore cache
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
      - run:
          name: Install Dependencies
-          command: bun install --frozen-lockfile
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache/yarn
+          key: yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Avoid hosts unknown for github
          command: |
@@ -138,24 +183,38 @@ jobs:
      - run:
          name: build half of the packages (to avoid out of memory in circleci)
          command: |
-            bun run build:package-all
+            yarn run build:package-all
      - run:
          name: build the other half of the packages
          command: |
-            bun run build:package-all-1
+            yarn run build:package-all-1

+  ###
+  # Workflow: RELEASE
+  ###
  NPM_PUBLISH:
    <<: *defaults
    resource_class: large
    steps:
-      - install_bun
+      - run: yarn -v
      # Checkout code and ALL Git Tags
      - checkout
      - attach_workspace:
          at: ~/repo
+      # Use increasingly general patterns to restore cache
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
      - run:
          name: Install Dependencies
-          command: bun install --no-save
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache/yarn
+          key: yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Avoid hosts unknown for github
          command: |
@@ -170,11 +229,11 @@ jobs:
      - run:
          name: build half of the packages (to avoid out of memory in circleci)
          command: |
-            bun run build:package-all
+            yarn run build:package-all
      - run:
          name: build the other half of the packages
          command: |
-            bun run build:package-all-1
+            yarn run build:package-all-1
      - run:
          name: increase min time out
          command: |
@@ -186,14 +245,14 @@ jobs:
      - run:
          name: publish package versions
          command: |
-            bun ./publish-version.mjs
+            node ./publish-version.mjs
      - run:
          name: Again set the NPM registry (was deleted in the version script)
          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
      - run:
          name: publish package dist
          command: |
-            bun ./publish-package.mjs
+            node ./publish-package.mjs
      - persist_to_workspace:
          root: ~/repo
          paths:
@@ -208,7 +267,7 @@ jobs:
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name: Build Docker image for amd64
+          name: Build and push Docker image from the release branch
          command: |
            # This file will exist if a new version was published by
            # our command in the previous job.
@@ -222,50 +281,12 @@ jobs:
              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
              echo $IMAGE_VERSION
              echo $IMAGE_VERSION_FULL
-              # Build our amd64 image, auth, and push
-              docker build --platform linux/amd64 --tag ohif/app:$IMAGE_VERSION_FULL-amd64 --tag ohif/app:latest-amd64 .
+              # Build our image, auth, and push
+              docker build --tag ohif/app:$IMAGE_VERSION_FULL --tag ohif/app:latest .
              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL-amd64
-              docker push ohif/app:latest-amd64
+              docker push ohif/app:$IMAGE_VERSION_FULL
+              docker push ohif/app:latest
            fi
-      - persist_to_workspace:
-          root: ~/repo
-          paths:
-            - .
-
-  DOCKER_RELEASE_PUBLISH_ARM:
-    <<: *defaults
-    resource_class: arm.large
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: false
-      - run:
-          name: Build Docker image for arm64
-          command: |
-            # This file will exist if a new version was published by
-            # our command in the previous job.
-            if [[ ! -e version.txt ]]; then
-              exit 0
-            else
-              # Remove npm config
-              rm -f ./.npmrc
-              # Set our version number using vars
-              export IMAGE_VERSION=$(cat version.txt)
-              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
-              echo $IMAGE_VERSION
-              echo $IMAGE_VERSION_FULL
-              # Build our arm64 image, auth, and push
-              docker build --platform linux/arm64 --tag ohif/app:$IMAGE_VERSION_FULL-arm64 --tag ohif/app:latest-arm64 .
-              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL-arm64
-              docker push ohif/app:latest-arm64
-            fi
-      - persist_to_workspace:
-          root: ~/repo
-          paths:
-            - .

  DOCKER_BETA_PUBLISH:
    <<: *defaults
@@ -276,7 +297,7 @@ jobs:
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name: Build Docker image for amd64 (Beta)
+          name: Build and push Docker image from the master branch (beta releases)
          command: |
            echo $(ls -l)

@@ -288,155 +309,108 @@ jobs:
            else
              echo "Building and pushing Docker image from the master branch (beta releases)"
              rm -f ./.npmrc
-
              # Set our version number using vars
              export IMAGE_VERSION=$(cat version.txt)
              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
              echo $IMAGE_VERSION
              echo $IMAGE_VERSION_FULL
-              # Build our amd64 image, auth, and push
-              docker build --platform linux/amd64 --tag ohif/app:$IMAGE_VERSION_FULL-amd64 --tag ohif/app:latest-beta-amd64 .
+              # Build our image, auth, and push
+
+              echo "starting docker build"
+              docker build --tag ohif/app:$IMAGE_VERSION_FULL .
              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL-amd64
-              docker push ohif/app:latest-beta-amd64
+
+              echo "starting docker push"
+              docker push ohif/app:$IMAGE_VERSION_FULL
            fi

-  DOCKER_BETA_PUBLISH_ARM:
-    <<: *defaults
-    resource_class: arm.large
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: false
-      - run:
-          name: Build Docker image for arm64 (Beta)
-          command: |
-            echo $(ls -l)
-
-            # This file will exist if a new version was published by
-            # our command in the previous job.
-            if [[ ! -e version.txt ]]; then
-              echo "don't have version txt"
-              exit 0
-            else
-              echo "Building and pushing ARM64 Docker image from the master branch (beta releases)"
-              rm -f ./.npmrc
-              # Set our version number using vars
-              export IMAGE_VERSION=$(cat version.txt)
-              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
-              echo $IMAGE_VERSION
-              echo $IMAGE_VERSION_FULL
-              # Build our arm64 image, auth, and push
-              docker build --platform linux/arm64 --tag ohif/app:$IMAGE_VERSION_FULL-arm64 --tag ohif/app:latest-beta-arm64 .
-              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL-arm64
-              docker push ohif/app:latest-beta-arm64
-            fi
-
-  CYPRESS:
-    <<: *defaults
+  # This is copied from the Cypress orb since the default for cypress/run is node 16 and
+  # we migrated to 18
+  CYPRESS_CUSTOM_RUN:
+    description: |
+      A single, complete job to run Cypress end-to-end tests in your application.
+    executor: cypress-custom
+    parallelism: << parameters.parallelism >>
+    parameters:
+      cypress-cache-key:
+        default: cypress-cache-{{ arch }}-{{ checksum "package.json" }}
+        description: Cache key used to cache the Cypress binary.
+        type: string
+      cypress-cache-path:
+        default: ~/.cache/Cypress
+        description: |
+          By default, this will cache the '~/.cache/Cypress' directory so that the Cypress binary is cached. You can override this by providing your own cache path.
+        type: string
+      cypress-command:
+        default: npx cypress run
+        description: Command used to run your Cypress tests
+        type: string
+      include-branch-in-node-cache-key:
+        default: false
+        description: |
+          If true, this cache will only apply to runs within the same branch. (Adds -{{ .Branch }}- to the node cache key)
+        type: boolean
+      install-browsers:
+        default: false
+        description: |
+          Cypress runs by default in the Electron browser. Use this flag to install additional browsers to run your tests in.
+          This is only needed if you are passing the `--browser` flag in your `cypress-command`.
+          This parameter leverages the `circleci/browser-tools` orb and includes Chrome and FireFox.
+          If you need additional browser support you can set this to false and use an executor with a docker image
+          that includes the browsers of your choosing. See https://hub.docker.com/r/cypress/browsers/tags
+        type: boolean
+      install-command:
+        default: ''
+        description: Overrides the default NPM command (npm ci)
+        type: string
+      node-cache-version:
+        default: v1
+        description:
+          Change the default node cache version if you need to clear the cache for any reason.
+        type: string
+      package-manager:
+        default: npm
+        description: Select the default node package manager to use. NPM v5+ Required.
+        enum:
+          - npm
+          - yarn
+          - yarn-berry
+        type: enum
+      parallelism:
+        default: 4
+        description: |
+          Number of Circle machines to use for load balancing, min 1
+          (requires `parallel` and `record` flags in your `cypress-command`)
+        type: integer
+      post-install:
+        default: ''
+        description: |
+          Additional commands to run after running install but before verifying Cypress and saving cache.
+        type: string
+      start-command:
+        default: ''
+        description: Command used to start your local dev server for Cypress to tests against
+        type: string
+      working-directory:
+        default: ''
+        description: Directory containing package.json
+        type: string
    resource_class: large
-    parallelism: 8
    steps:
-      - install_bun
-      - run:
-          name: Install System Dependencies
-          command: |
-            sudo apt-get update
-            sudo apt-get install -y xvfb libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6
-      - run:
-          name: Start Xvfb
-          command: Xvfb :99 -screen 0 1920x1080x24 &
-          background: true
-      - run:
-          name: Export Display Variable
-          command: export DISPLAY=:99
      - cypress/install:
-          install-command: bun install --no-save
-          package-manager: yarn
+          cypress-cache-key: << parameters.cypress-cache-key >>
+          cypress-cache-path: << parameters.cypress-cache-path >>
+          include-branch-in-node-cache-key: << parameters.include-branch-in-node-cache-key >>
+          install-browsers: << parameters.install-browsers >>
+          install-command: << parameters.install-command >>
+          node-cache-version: << parameters.node-cache-version >>
+          package-manager: << parameters.package-manager >>
+          post-install: << parameters.post-install >>
+          working-directory: << parameters.working-directory >>
      - cypress/run-tests:
-          cypress-command: |
-            npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
-          start-command: bun run test:data && bun run test:e2e:serve
-
-  DOCKER_MULTIARCH_MANIFEST:
-    <<: *defaults
-    resource_class: large
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: false
-      - run:
-          name: Create and push multi-architecture manifest
-          command: |
-            # This file will exist if a new version was published by
-            # our command in the previous job.
-            if [[ ! -e version.txt ]]; then
-              exit 0
-            else
-              echo "Building and pushing multi-architecture manifest from the master branch (release releases)"
-              rm -f ./.npmrc
-              # Set our version number using vars
-              export IMAGE_VERSION=$(cat version.txt)
-              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
-              echo $IMAGE_VERSION
-              echo $IMAGE_VERSION_FULL
-              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-
-              # Create and push manifest for specific version
-              docker manifest create ohif/app:$IMAGE_VERSION_FULL \
-                --amend ohif/app:$IMAGE_VERSION_FULL-amd64 \
-                --amend ohif/app:$IMAGE_VERSION_FULL-arm64
-              docker manifest push ohif/app:$IMAGE_VERSION_FULL
-
-              # Create and push manifest for "latest" tag
-              docker manifest create ohif/app:latest \
-                --amend ohif/app:latest-amd64 \
-                --amend ohif/app:latest-arm64
-              docker manifest push ohif/app:latest
-            fi
-
-  DOCKER_BETA_MULTIARCH_MANIFEST:
-    <<: *defaults
-    resource_class: large
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: false
-      - run:
-          name: Create and push multi-architecture manifest (Beta)
-          command: |
-            echo $(ls -l)
-
-            # This file will exist if a new version was published by
-            # our command in the previous job.
-            if [[ ! -e version.txt ]]; then
-              exit 0
-            else
-              echo "Building and pushing multi-architecture manifest from the master branch (beta releases)"
-              rm -f ./.npmrc
-              # Set our version number using vars
-              export IMAGE_VERSION=$(cat version.txt)
-              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
-              echo $IMAGE_VERSION
-              echo $IMAGE_VERSION_FULL
-              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-
-              # Create and push manifest for specific beta version
-              docker manifest create ohif/app:$IMAGE_VERSION_FULL \
-                --amend ohif/app:$IMAGE_VERSION_FULL-amd64 \
-                --amend ohif/app:$IMAGE_VERSION_FULL-arm64
-              docker manifest push ohif/app:$IMAGE_VERSION_FULL
-
-              # Create and push manifest for "latest-beta" tag
-              docker manifest create ohif/app:latest-beta \
-                --amend ohif/app:latest-beta-amd64 \
-                --amend ohif/app:latest-beta-arm64
-              docker manifest push ohif/app:latest-beta
-            fi
+          cypress-command: << parameters.cypress-command >>
+          start-command: << parameters.start-command >>
+          working-directory: << parameters.working-directory >>

 workflows:
  PR_CHECKS:
@@ -445,12 +419,61 @@ workflows:
          filters:
            branches:
              ignore: master
-      - UNIT_TESTS
-      - CYPRESS:
+      - UNIT_TESTS:
+          requires:
+            - BUILD_PACKAGES_QUICK
+      - CYPRESS_CUSTOM_RUN:
          name: 'Cypress Tests'
          context: cypress
+          matrix:
+            parameters:
+              start-command:
+                - yarn run test:data && yarn run test:e2e:serve
+              install-browsers:
+                - true
+              cypress-command:
+                - 'npx wait-on@latest http://localhost:3000 && cd platform/app &&  npx cypress run
+                  --record --browser chrome --parallel'
+              package-manager:
+                - 'yarn'
+              cypress-cache-key:
+                - 'yarn-packages-{{ checksum "yarn.lock" }}'
+              cypress-cache-path:
+                - '~/.cache/Cypress'
+          requires:
+            - BUILD_PACKAGES_QUICK

-  # viewer-dev.ohif.org
+  # PR_OPTIONAL_VISUAL_TESTS:
+  #   jobs:
+  #     - AWAIT_APPROVAL:
+  #         type: approval
+  #     # Update hub.docker.org
+  #     - cypress/run:
+  #         name: 'Generate Percy Snapshots'
+  #         executor: cypress/browsers-chrome76
+  #         browser: chrome
+  #         pre-steps:
+  #           - run: 'rm -rf ~/.yarn && yarn -v && yarn global add wait-on'
+  #         yarn: true
+  #         store_artifacts: false
+  #         working_directory: platform/app
+  #         build:
+  #           yarn test:data && npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js
+  #           yarn run build
+  #         # start server --> verify running --> percy + chrome + cypress
+  #         command: yarn run test:e2e:dist
+  #         cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+  #         no-workspace: true # Don't persist workspace
+  #         post-steps:
+  #           - store_artifacts:
+  #               path: platform/app/cypress/screenshots
+  #           - store_artifacts:
+  #               path: platform/app/cypress/videos
+  #         requires:
+  #           - AWAIT_APPROVAL
+
+  # Our master branch deploys to viewer-dev.ohif.org, the viewer.ohif.org is
+  # deployed from the release branch which is more stable and less frequently updated.
  DEPLOY_MASTER:
    jobs:
      - BUILD:
@@ -463,14 +486,9 @@ workflows:
      - DOCKER_BETA_PUBLISH:
          requires:
            - NPM_PUBLISH
-      - DOCKER_BETA_PUBLISH_ARM:
-          requires:
-            - DOCKER_BETA_PUBLISH
-      - DOCKER_BETA_MULTIARCH_MANIFEST:
-          requires:
-            - DOCKER_BETA_PUBLISH_ARM

-  # viewer.ohif.org
+  # Our release branch deploys to viewer.ohif.org and is more stable and less
+  # frequently updated after being tested in the staging environment.
  DEPLOY_RELEASE:
    jobs:
      - BUILD:
@@ -487,9 +505,50 @@ workflows:
      - DOCKER_RELEASE_PUBLISH:
          requires:
            - NPM_PUBLISH
-      - DOCKER_RELEASE_PUBLISH_ARM:
-          requires:
-            - DOCKER_RELEASE_PUBLISH
-      - DOCKER_MULTIARCH_MANIFEST:
-          requires:
-            - DOCKER_RELEASE_PUBLISH_ARM
+
+  ###
+  # Unit and E2E tests have already run for PR_CHECKS
+  # Re-running should not gain us any confidence here
+  ###
+  # RELEASE:
+  #   jobs:
+  #     - NPM_PUBLISH:
+  #         filters:
+  #           branches:
+  #             only: master
+  #     - DOCS_PUBLISH:
+  #         filters:
+  #           branches:
+  #             only: master
+  #     # Update base branch snapshots
+  #     # and record a Cypress dashboard test run
+  #     - cypress/run:
+  #         name: 'Generate Percy Snapshots'
+  #         executor: cypress/browsers-chrome76
+  #         browser: chrome
+  #         pre-steps:
+  #           - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+  #               add wait-on' # Use yarn latest
+  #         yarn: true
+  #         store_artifacts: false
+  #         working_directory: platform/app
+  #         build:
+  #           npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js yarn run
+  #           build
+  #         # start server --> verify running --> percy + chrome + cypress
+  #         command: yarn run test:e2e:dist
+  #         cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+  #         no-workspace: true # Don't persist workspace
+  #         post-steps:
+  #           - store_artifacts:
+  #               path: platform/app/cypress/screenshots
+  #           - store_artifacts:
+  #               path: platform/app/cypress/videos
+  #           - store_test_results:
+  #               path: platform/app/cypress/results
+  #         filters:
+  #           branches:
+  #             only: master
+  #     - DOCKER_MASTER_PUBLISH:
+  #         requires:
+  #           - NPM_PUBLISH
@@ -1,13 +1,12 @@
 server {
-  gzip_static  always;
-  gzip_proxied expired no-cache no-store private auth;
-  gunzip       on;
  listen ${PORT} default_server;
  listen [::]:${PORT} default_server;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
+    add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
    add_header Cross-Origin-Resource-Policy same-origin;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
@@ -7,6 +7,8 @@ server {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
+    add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
    add_header Cross-Origin-Resource-Policy same-origin;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
@@ -7,30 +7,11 @@ if [ -n "$SSL_PORT" ]
    envsubst '${PORT}' < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
 fi

-
-if [ -n "$APP_CONFIG" ]; then
-  echo "$APP_CONFIG" > /usr/share/nginx/html${PUBLIC_URL}app-config.js
-  echo "Using custom APP_CONFIG environment variable"
-else
-  echo "Not using custom APP_CONFIG"
+if [ -n "$APP_CONFIG" ]
+  then
+    echo "$APP_CONFIG" > /usr/share/nginx/html/app-config.js
 fi

-if [ -f /usr/share/nginx/html${PUBLIC_URL}app-config.js ]; then
-  if [ -s /usr/share/nginx/html${PUBLIC_URL}app-config.js ]; then
-    echo "Detected non-empty app-config.js. Ensuring .gz file is updated..."
-    rm -f /usr/share/nginx/html${PUBLIC_URL}app-config.js.gz
-    gzip /usr/share/nginx/html${PUBLIC_URL}app-config.js
-    touch /usr/share/nginx/html${PUBLIC_URL}app-config.js
-    echo "Compressed app-config.js to app-config.js.gz"
-  else
-    echo "app-config.js is empty. Skipping compression."
-  fi
-else
-  echo "No app-config.js file found. Skipping compression."
-fi
-
-
-
 if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
  then
    # If CLIENT_ID is specified, use the google.js configuration with the modified ID
@@ -59,6 +40,6 @@ if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
 	  cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
 fi

-echo "Starting Nginx to serve the OHIF Viewer on ${PUBLIC_URL}"
+echo "Starting Nginx to serve the OHIF Viewer..."

 exec "$@"
@@ -1,4 +0,0 @@
-find platform/app/dist -name "*.js" -exec gzip -9 "{}" \; -exec touch "{}" \;
-find platform/app/dist -name "*.map" -exec gzip -9 "{}" \; -exec touch "{}" \;
-find platform/app/dist -name "*.css" -exec gzip -9 "{}" \; -exec touch "{}" \;
-find platform/app/dist -name "*.svg" -exec gzip -9 "{}" \; -exec touch "{}" \;
@@ -8,11 +8,11 @@
 # have this file as their .dockerignore.

 # Output
-**/dist/
-**/build/
+dist/
+build/

 # Dependencies
-**/node_modules/
+node_modules/

 # Root
 README.md
@@ -33,5 +33,5 @@ dockerfile
 .scripts/
 .vscode/
 coverage/
-platform/docs/
+docs/
 testdata/
@@ -18,8 +18,7 @@
  },
  "rules": {
    // Enforce consistent brace style for all control statements for readability
-    "curly": "error",
-    "import/no-anonymous-default-export": "off"
+    "curly": "error"
  },
  "globals": {
    "cy": true,
@@ -1,7 +0,0 @@
-version: 2
-enable-beta-ecosystems: true
-updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'daily'
@@ -64,7 +64,7 @@ body:
    attributes:
      label: 'Node version'
      description: 'Your Node.js version.'
-      placeholder: 'e.g., 20.18.1'
+      placeholder: 'e.g., 18.16.1'
    validations:
      required: true
  - type: input
@@ -8,28 +8,23 @@ jobs:
  playwright-tests:
    timeout-minutes: 60
    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.50.0-noble
    strategy:
      fail-fast: false
      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-        shardTotal: [10]
+        shardIndex: [1, 2, 3, 4, 5]
+        shardTotal: [5]
    steps:
      - uses: actions/checkout@v4
-      - name: Install unzip
-        run: apt-get update && apt-get install -y unzip
-      - uses: oven-sh/setup-bun@v2
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 18
      - name: Install dependencies
-        run: bun install --frozen-lockfile
-      - name: Set up Git safe directory
-        run: git config --global --add safe.directory /__w/Viewers/Viewers
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run:
-          export NODE_OPTIONS="--max_old_space_size=8192" && bun x playwright test --shard=${{
+          export NODE_OPTIONS="--max_old_space_size=8192" && npx playwright test --shard=${{
          matrix.shardIndex }}/${{ matrix.shardTotal }}

      - name: Upload blob report to GitHub Actions Artifacts
@@ -44,20 +39,14 @@ jobs:
    if: ${{ !cancelled() }}
    needs: [playwright-tests]
    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.48.1-focal
    steps:
-      - name: Install unzip
-        run: apt-get update && apt-get install -y unzip
-      - uses: oven-sh/setup-bun@v2
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 18
      - name: Install dependencies
-        run: bun install --frozen-lockfile
-      - name: Set up Git safe directory
-        run: git config --global --add safe.directory /__w/Viewers/Viewers
+        run: yarn install --frozen-lockfile
+
      - name: Download blob reports from GitHub Actions Artifacts
        uses: actions/download-artifact@v4
        with:
@@ -66,7 +55,7 @@ jobs:
          merge-multiple: true

      - name: Merge into HTML Report
-        run: bun x playwright merge-reports --reporter html ./all-blob-reports
+        run: npx playwright merge-reports --reporter html ./all-blob-reports

      - name: Upload HTML report
        uses: actions/upload-artifact@v4
@@ -1,6 +1,5 @@
 # Packages
 node_modules
-.cursor/

 # Output
 build
@@ -1 +1 @@
-20.9.0
+18.16.1
@@ -57,6 +57,10 @@ if (!process.env.APP_CONFIG) {
 }

 module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
+  if (!process.env.NODE_ENV) {
+    throw new Error('process.env.NODE_ENV not set');
+  }
+
  const mode = NODE_ENV === 'production' ? 'production' : 'development';
  const isProdBuild = NODE_ENV === 'production';
  const isQuickBuild = QUICK_BUILD === 'true';
@@ -104,7 +108,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
-                  plugins: isProdBuild ? [] : ['react-refresh/babel'],
+                  plugins: ['react-refresh/babel'],
                },
              },
            ]),
@@ -168,10 +172,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
            },
          ],
        },
-        {
-          test: /\.(woff|woff2|eot|ttf|otf)$/i,
-          type: 'asset/resource',
-        },
      ], //.concat(vtkRules),
    },
    resolve: {
@@ -1,4 +1,3 @@
-# syntax=docker/dockerfile:1.7-labs
 # This dockerfile is used to publish the `ohif/app` image on dockerhub.
 #
 # It's a good example of how to build our static application and package it
@@ -20,84 +19,61 @@
 #


-# syntax=docker/dockerfile:1.7-labs
-# This dockerfile is used to publish the `ohif/app` image on dockerhub.
-#
-# It's a good example of how to build our static application and package it
-# with a web server capable of hosting it as static content.
-#
-# docker build
-# --------------
-# If you would like to use this dockerfile to build and tag an image, make sure
-# you set the context to the project's root directory:
-# https://docs.docker.com/engine/reference/commandline/build/
-#
-#
-# SUMMARY
-# --------------
-# This dockerfile is used as an input for a second stage to make things run faster.
-#
-
-
 # Stage 1: Build the application
 # docker build -t ohif/viewer:latest .
-# Copy Files
-FROM node:20.18.1-slim as builder
-
-RUN apt-get update && apt-get install -y build-essential python3
-
+FROM node:18.16.1-slim as json-copier

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

-# Do an initial install and then a final install
-COPY package.json yarn.lock preinstall.js lerna.json ./
-COPY --parents ./addOns/package.json ./addOns/*/*/package.json ./extensions/*/package.json ./modes/*/package.json ./platform/*/package.json ./
+COPY ["package.json", "yarn.lock", "preinstall.js", "./"]
+COPY extensions /usr/src/app/extensions
+COPY modes /usr/src/app/modes
+COPY platform /usr/src/app/platform
+
+# Find and remove non-package.json files
+#RUN find extensions \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
+#RUN find modes \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
+#RUN find platform \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
+
+# Copy Files
+FROM node:18.16.1-slim as builder
+RUN apt-get update && apt-get install -y build-essential python3
+RUN mkdir /usr/src/app
+WORKDIR /usr/src/app
+
+COPY --from=json-copier /usr/src/app .
+
 # Run the install before copying the rest of the files
+RUN yarn config set workspaces-experimental true
+RUN yarn install --frozen-lockfile --verbose

-RUN bun pm cache rm
-RUN bun install
-# Copy the local directory
-COPY --link --exclude=yarn.lock --exclude=package.json --exclude=Dockerfile . .
-# Do a second install to finalize things after the copy
-RUN bun run show:config
-RUN bun install
+COPY . .

-# Build here
-# After install it should hopefully be stable until the local directory changes
+# To restore workspaces symlinks
+RUN yarn install --frozen-lockfile --verbose
+
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
 ENV QUICK_BUILD true
 # ENV GENERATE_SOURCEMAP=false
-ARG APP_CONFIG=config/default.js
-ARG PUBLIC_URL=/
+# ENV REACT_APP_CONFIG=config/default.js

-RUN bun run show:config
-RUN bun run build
-
-# Precompress files
-RUN chmod u+x .docker/compressDist.sh
-RUN ./.docker/compressDist.sh
+RUN yarn run build

 # Stage 3: Bundle the built application into a Docker container
 # which runs Nginx using Alpine Linux
-FROM nginxinc/nginx-unprivileged:1.27-alpine as final
+FROM nginxinc/nginx-unprivileged:1.25-alpine as final
 #RUN apk add --no-cache bash
-ARG PORT=80
-ENV PORT=${PORT}
-ARG PUBLIC_URL=/
-ENV PUBLIC_URL=${PUBLIC_URL}
+ENV PORT=80
 RUN rm /etc/nginx/conf.d/default.conf
 USER nginx
 COPY --chown=nginx:nginx .docker/Viewer-v3.x /usr/src
 RUN chmod 777 /usr/src/entrypoint.sh
-COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html${PUBLIC_URL}
-COPY --from=builder /usr/src/app/platform/app/dist/index.html /usr/share/nginx/html
+COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html
 # In entrypoint.sh, app-config.js might be overwritten, so chmod it to be writeable.
 # The nginx user cannot chmod it, so change to root.
 USER root
-RUN chown -R nginx:nginx /usr/share/nginx/html
+RUN chmod 666 /usr/share/nginx/html/app-config.js
 USER nginx
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
@@ -135,20 +135,18 @@ Here is a schematic representation of our development workflow:

 ### Requirements

- [Yarn 1.20.0+](https://yarnpkg.com/en/docs/install)
+- [Yarn 1.17.3+](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`

 ### Getting Started

-1. [Fork this repository][how-to-fork]
-2. [Clone your forked repository][how-to-clone]
-   - `git clone https://github.com/YOUR-USERNAME/Viewers.git`
-3. Navigate to the cloned project's directory
-4. Add this repo as a `remote` named `upstream`
-   - `git remote add upstream https://github.com/OHIF/Viewers.git`
-5. `yarn install` to restore dependencies and link projects
+1. Clone the repository
+   - `git clone https://github.com/OHIF/Viewers.git`
+2. Navigate to the cloned project's directory
+3. `yarn install` to restore dependencies and link projects
+4. `yarn dev` to start the development server

 #### To Develop

@@ -168,16 +166,15 @@ These commands are available from the root directory. Each project directory
 also supports a number of commands that can be found in their respective
 `README.md` and `package.json` files.

-| Yarn Commands                | Description                                                   |
+| Commands                | Description                                                   |
 | ---------------------------- | ------------------------------------------------------------- |
 | **Develop**                  |                                                               |
-| `dev`              | Default development experience for Viewer                     |
-| `dev:fast`             | Our experimental fast dev mode that uses rsbuild instead of webpack                     |
+| `dev` or `start`             | Default development experience for Viewer                     |
 | `test:unit`                  | Jest multi-project test runner; overall coverage              |
 | **Deploy**                   |                                                               |
 | `build`\*                    | Builds production output for our PWA Viewer                   |  |

-\* - For more information on different builds, check out our [Deploy
+\* - For more information on our different builds, check out our [Deploy
 Docs][deployment-docs]

 ## Project
@@ -1,7 +1,7 @@
 {
  "name": "@externals/devDependencies",
  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "license": "MIT",
  "private": true,
  "engines": {
@@ -10,7 +10,7 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@kitware/vtk.js": "32.12.0",
+    "@kitware/vtk.js": "32.1.0",
    "clsx": "^2.1.1",
    "core-js": "^3.2.1",
    "moment": "^2.9.4"
@@ -21,11 +21,7 @@
  },
  "devDependencies": {
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@rsbuild/core": "^1.1.13",
-    "@rsbuild/plugin-node-polyfill": "1.2.0",
-    "@rsbuild/plugin-react": "^1.1.0",
    "@svgr/webpack": "^8.1.0",
-    "@swc/helpers": "^0.5.15",
    "@types/jest": "^27.5.0",
    "@typescript-eslint/eslint-plugin": "^6.3.0",
    "@typescript-eslint/parser": "^6.3.0",
@@ -72,7 +68,7 @@
    "prettier-plugin-tailwindcss": "^0.5.4",
    "react-refresh": "^0.14.2",
    "semver": "^7.5.1",
-    "serve": "^14.2.4",
+    "serve": "^14.2.0",
    "shader-loader": "^1.3.1",
    "shx": "^0.3.3",
    "source-map-loader": "^4.0.1",
@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-# [3.10.0-beta.124](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.123...v3.10.0-beta.124) (2025-03-17)
+## [3.9.1](https://github.com/OHIF/Viewers/compare/v3.9.0...v3.9.1) (2024-11-13)

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

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



-# [3.10.0-beta.123](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.122...v3.10.0-beta.123) (2025-03-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.122](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.121...v3.10.0-beta.122) (2025-03-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.121](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.120...v3.10.0-beta.121) (2025-03-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.120](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.119...v3.10.0-beta.120) (2025-03-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.119](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.118...v3.10.0-beta.119) (2025-03-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.118](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.117...v3.10.0-beta.118) (2025-03-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.117](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.116...v3.10.0-beta.117) (2025-03-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.116](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.115...v3.10.0-beta.116) (2025-03-06)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.115](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.114...v3.10.0-beta.115) (2025-02-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.114](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.113...v3.10.0-beta.114) (2025-02-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.113](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.112...v3.10.0-beta.113) (2025-02-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.112](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.111...v3.10.0-beta.112) (2025-02-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.111](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.110...v3.10.0-beta.111) (2025-02-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.110](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.109...v3.10.0-beta.110) (2025-02-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.109](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.108...v3.10.0-beta.109) (2025-02-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.108](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.107...v3.10.0-beta.108) (2025-02-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.107](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.106...v3.10.0-beta.107) (2025-02-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.106](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.105...v3.10.0-beta.106) (2025-02-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.105](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.104...v3.10.0-beta.105) (2025-02-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.104](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.103...v3.10.0-beta.104) (2025-02-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.103](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.102...v3.10.0-beta.103) (2025-02-23)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.102](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.101...v3.10.0-beta.102) (2025-02-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.101](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.100...v3.10.0-beta.101) (2025-02-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.100](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.99...v3.10.0-beta.100) (2025-02-19)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.99](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.98...v3.10.0-beta.99) (2025-02-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.98](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.97...v3.10.0-beta.98) (2025-02-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [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
-
-
-
-
-
-# [3.10.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.68...v3.10.0-beta.69) (2025-01-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.67...v3.10.0-beta.68) (2025-01-21)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.66...v3.10.0-beta.67) (2025-01-21)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.65...v3.10.0-beta.66) (2025-01-21)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.64...v3.10.0-beta.65) (2025-01-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.63...v3.10.0-beta.64) (2025-01-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.62...v3.10.0-beta.63) (2025-01-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.61...v3.10.0-beta.62) (2025-01-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.60...v3.10.0-beta.61) (2025-01-16)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.59...v3.10.0-beta.60) (2025-01-15)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.58...v3.10.0-beta.59) (2025-01-14)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.57...v3.10.0-beta.58) (2025-01-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.56...v3.10.0-beta.57) (2025-01-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.56](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.55...v3.10.0-beta.56) (2025-01-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.55](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.54...v3.10.0-beta.55) (2025-01-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.54](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.53...v3.10.0-beta.54) (2025-01-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.53](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.52...v3.10.0-beta.53) (2025-01-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.52](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.51...v3.10.0-beta.52) (2025-01-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.51](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.50...v3.10.0-beta.51) (2025-01-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.50](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.49...v3.10.0-beta.50) (2025-01-10)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.49](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.48...v3.10.0-beta.49) (2025-01-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.48](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.47...v3.10.0-beta.48) (2025-01-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.47](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.46...v3.10.0-beta.47) (2025-01-09)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.46](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.45...v3.10.0-beta.46) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.45](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.44...v3.10.0-beta.45) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.44](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.43...v3.10.0-beta.44) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.43](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.42...v3.10.0-beta.43) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.42](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.41...v3.10.0-beta.42) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.40...v3.10.0-beta.41) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.39...v3.10.0-beta.40) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.38...v3.10.0-beta.39) (2025-01-08)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.37...v3.10.0-beta.38) (2025-01-07)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.36...v3.10.0-beta.37) (2025-01-06)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.35...v3.10.0-beta.36) (2025-01-03)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.34...v3.10.0-beta.35) (2025-01-03)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.33...v3.10.0-beta.34) (2025-01-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.32...v3.10.0-beta.33) (2024-12-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.31...v3.10.0-beta.32) (2024-12-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.30...v3.10.0-beta.31) (2024-12-20)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.29...v3.10.0-beta.30) (2024-12-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.28...v3.10.0-beta.29) (2024-12-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.27...v3.10.0-beta.28) (2024-12-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.26...v3.10.0-beta.27) (2024-12-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.25...v3.10.0-beta.26) (2024-12-18)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.24...v3.10.0-beta.25) (2024-12-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.23...v3.10.0-beta.24) (2024-12-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.22...v3.10.0-beta.23) (2024-12-17)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.21...v3.10.0-beta.22) (2024-12-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.20...v3.10.0-beta.21) (2024-12-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.19...v3.10.0-beta.20) (2024-12-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.18...v3.10.0-beta.19) (2024-12-11)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.17...v3.10.0-beta.18) (2024-12-06)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.16...v3.10.0-beta.17) (2024-12-06)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.15...v3.10.0-beta.16) (2024-12-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.14...v3.10.0-beta.15) (2024-12-05)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.14](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.13...v3.10.0-beta.14) (2024-12-03)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.13](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.12...v3.10.0-beta.13) (2024-12-02)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.12](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.11...v3.10.0-beta.12) (2024-11-29)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.11](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.10...v3.10.0-beta.11) (2024-11-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.10](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.9...v3.10.0-beta.10) (2024-11-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.9](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.8...v3.10.0-beta.9) (2024-11-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.8](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.7...v3.10.0-beta.8) (2024-11-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.7](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.6...v3.10.0-beta.7) (2024-11-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.6](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.5...v3.10.0-beta.6) (2024-11-22)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.5](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.4...v3.10.0-beta.5) (2024-11-15)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.4](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.3...v3.10.0-beta.4) (2024-11-15)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.3](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.2...v3.10.0-beta.3) (2024-11-14)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.2](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.1...v3.10.0-beta.2) (2024-11-13)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.1](https://github.com/OHIF/Viewers/compare/v3.10.0-beta.0...v3.10.0-beta.1) (2024-11-12)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.10.0-beta.0](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.111...v3.10.0-beta.0) (2024-11-12)
+# [3.9.0](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.111...v3.9.0) (2024-11-12)

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

@@ -1,7 +1,7 @@
 {
  "name": "@externals/dicom-microscopy-viewer",
  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "license": "MIT",
  "dependencies": {
    "dicom-microscopy-viewer": "^0.46.1"
@@ -38,7 +38,7 @@
  "resolutions": {
    "**/@babel/runtime": "^7.20.13",
    "commander": "8.3.0",
-    "dcmjs": "0.38.0",
+    "dcmjs": ">=0.33.0",
    "dicomweb-client": ">=0.10.4",
    "nth-check": "^2.1.1",
    "trim-newlines": "^5.0.0",
@@ -1,4 +1,6 @@
 // https://babeljs.io/docs/en/options#babelrcroots
+const { extendDefaultPlugins } = require('svgo');
+
 module.exports = {
  babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
@@ -49,6 +51,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
+      plugins: ['react-refresh/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1 +1 @@
-951c21fda83f04d132ed671f06867e02bb5a6f08
+610faa5a2738da5eabc40e57e338c359f481e852
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "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.124",
-    "@ohif/extension-cornerstone": "3.10.0-beta.124",
-    "@ohif/extension-default": "3.10.0-beta.124",
-    "@ohif/i18n": "3.10.0-beta.124",
+    "@ohif/core": "3.9.1",
+    "@ohif/extension-cornerstone": "3.9.1",
+    "@ohif/extension-default": "3.9.1",
+    "@ohif/i18n": "3.9.1",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.5.0",
-    "@cornerstonejs/core": "^3.5.0",
-    "@kitware/vtk.js": "32.12.0",
+    "@cornerstonejs/adapters": "^2.2.4",
+    "@cornerstonejs/core": "^2.2.4",
+    "@kitware/vtk.js": "32.1.0",
    "react-color": "^2.19.3"
  }
 }
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useViewportGrid } from '@ohif/ui-next';
+import { useViewportGrid, LoadingIndicatorTotalPercent } from '@ohif/ui';

 function OHIFCornerstonePMAPViewport(props: withAppTypes) {
  const {
@@ -12,7 +12,7 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
    extensionManager,
  } = props;
  const viewportId = viewportOptions.viewportId;
-  const { displaySetService, segmentationService, uiNotificationService, customizationService } =
+  const { displaySetService, segmentationService, uiNotificationService } =
    servicesManager.services;

  // PMAP viewport will always have a single display set
@@ -20,10 +20,6 @@ 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);
@@ -101,7 +97,6 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
          viewportType: 'volume',
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
-          presentationIds: viewportOptions.presentationIds,
        }}
        displaySetOptions={[{}, pmapDisplaySetOptions]}
      ></Component>
@@ -37,6 +37,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
+      plugins: ['react-refresh/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.124",
-    "@ohif/extension-cornerstone": "3.10.0-beta.124",
-    "@ohif/extension-default": "3.10.0-beta.124",
-    "@ohif/i18n": "3.10.0-beta.124",
+    "@ohif/core": "3.9.1",
+    "@ohif/extension-cornerstone": "3.9.1",
+    "@ohif/extension-default": "3.9.1",
+    "@ohif/i18n": "3.9.1",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -126,7 +126,6 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
    SeriesInstanceUID: instance.SeriesInstanceUID,
    ROIContours: [],
    visible: true,
-    ReferencedSOPInstanceUIDsSet: new Set(),
  };

  for (let i = 0; i < ROIContourSequence.length; i++) {
@@ -143,8 +142,7 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,

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

      let isSupported = false;

@@ -174,12 +172,6 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
        type: ContourGeometricType,
        isSupported,
      });
-
-      if (ContourImageSequence?.ReferencedSOPInstanceUID) {
-        structureSet.ReferencedSOPInstanceUIDsSet.add(
-          ContourImageSequence?.ReferencedSOPInstanceUID
-        );
-      }
    }

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

  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
@@ -1,14 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ViewportActionArrows } from '@ohif/ui';
-import { useViewportGrid } from '@ohif/ui-next';
-import { utils } from '@ohif/extension-cornerstone';
+import { useViewportGrid, LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';

 import promptHydrateRT from '../utils/promptHydrateRT';
 import _getStatusComponent from './_getStatusComponent';

 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
-import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';

 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';

@@ -40,17 +38,13 @@ 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();

  // States
-  const selectedSegmentObjectIndex: number = 0;
-  const { setPositionPresentation } = usePositionPresentationStore();
+  const [isToolGroupCreated, setToolGroupCreated] = useState(false);
+  const [selectedSegment, setSelectedSegment] = useState(1);

  // Hydration means that the RT is opened and segments are loaded into the
  // segmentation panel, and RT is also rendered on any viewport that is in the
@@ -129,7 +123,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
          toolGroupId: toolGroupId,
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
-          presentationIds: viewportOptions.presentationIds,
        }}
        onElementEnabled={evt => {
          props.onElementEnabled?.(evt);
@@ -142,15 +135,26 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

  const onSegmentChange = useCallback(
    direction => {
-      utils.handleSegmentChange({
-        direction,
-        segDisplaySet: rtDisplaySet,
-        viewportId,
-        selectedSegmentObjectIndex,
-        segmentationService,
-      });
+      const segmentationId = rtDisplaySet.displaySetInstanceUID;
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      // Segment 0 is always background
+      if (newSelectedSegmentIndex >= numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, viewportId);
+      setSelectedSegment(newSelectedSegmentIndex);
    },
-    [selectedSegmentObjectIndex]
+    [selectedSegment, segmentationService]
  );

  useEffect(() => {
@@ -181,19 +185,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
          setRtIsLoading(false);
        }

-        if (rtDisplaySet?.firstSegmentedSliceImageId && viewportOptions?.presentationIds) {
-          const { firstSegmentedSliceImageId } = rtDisplaySet;
-          const { presentationIds } = viewportOptions;
-
-          setPositionPresentation(presentationIds.positionPresentationId, {
-            viewportType: 'stack',
-            viewReference: {
-              referencedImageId: firstSegmentedSliceImageId,
-            },
-            viewPresentation: {},
-          });
-        }
-
        if (evt.overlappingSegments) {
          uiNotificationService.show({
            title: 'Overlapping Segments',
@@ -256,6 +247,8 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

    toolGroup = createRTToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);

+    setToolGroupCreated(true);
+
    return () => {
      // remove the segmentation representations if seg displayset changed
      segmentationService.removeSegmentationRepresentations(viewportId);
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ViewportActionButton } from '@ohif/ui';
-import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+import { Icon, Tooltip } from '@ohif/ui';

 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  let ToolTipMessage = null;
@@ -9,16 +8,18 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {

  switch (isHydrated) {
    case true:
-      StatusIcon = () => <Icons.ByName name="status-alert" />;
+      StatusIcon = () => <Icon name="status-alert" />;
+
      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
      break;
    case false:
      StatusIcon = () => (
-        <Icons.ByName
+        <Icon
          className="text-aqua-pale"
          name="status-untracked"
        />
      );
+
      ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
  }

@@ -33,7 +34,13 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
          <span className="ml-1">RTSTRUCT</span>
        </div>
        {!isHydrated && (
-          <ViewportActionButton onInteraction={onStatusClick}>{loadStr}</ViewportActionButton>
+          <div
+            className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+            // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+            onMouseUp={onStatusClick}
+          >
+            {loadStr}
+          </div>
        )}
      </div>
    );
@@ -42,18 +49,14 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span>
-              <StatusArea />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            <ToolTipMessage />
-          </TooltipContent>
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
+          <StatusArea />
        </Tooltip>
      )}
      {!ToolTipMessage && <StatusArea />}
    </>
  );
-}
+}
@@ -37,6 +37,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
+      plugins: ['react-refresh/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.124",
-    "@ohif/extension-cornerstone": "3.10.0-beta.124",
-    "@ohif/extension-default": "3.10.0-beta.124",
-    "@ohif/i18n": "3.10.0-beta.124",
+    "@ohif/core": "3.9.1",
+    "@ohif/extension-cornerstone": "3.9.1",
+    "@ohif/extension-default": "3.9.1",
+    "@ohif/i18n": "3.9.1",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.5.0",
-    "@cornerstonejs/core": "^3.5.0",
-    "@kitware/vtk.js": "32.12.0",
+    "@cornerstonejs/adapters": "^2.2.4",
+    "@cornerstonejs/core": "^2.2.4",
+    "@kitware/vtk.js": "32.1.0",
    "react-color": "^2.19.3"
  }
 }
@@ -1,4 +1,5 @@
 import dcmjs from 'dcmjs';
+import { createReportDialogPrompt } from '@ohif/extension-default';
 import { Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
 import {
@@ -7,13 +8,11 @@ import {
  utilities,
 } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
-import { createReportDialogPrompt } from '@ohif/extension-default';
 import { classes, DicomMetadataStore } from '@ohif/core';

 import vtkImageMarchingSquares from '@kitware/vtk.js/Filters/General/ImageMarchingSquares';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';

 const { segmentation: segmentationUtils } = utilities;

@@ -52,7 +51,6 @@ const commandsModule = ({
    displaySetService,
    viewportGridService,
    toolGroupService,
-    customizationService,
  } = servicesManager.services as AppTypes.Services;

  const actions = {
@@ -228,6 +226,14 @@ const commandsModule = ({
     * otherwise throws an error.
     */
    storeSegmentation: async ({ segmentationId, dataSource }) => {
+      const promptResult = await createReportDialogPrompt(uiDialogService, {
+        extensionManager,
+      });
+
+      if (promptResult.action !== 1 && !promptResult.value) {
+        return;
+      }
+
      const segmentation = segmentationService.getSegmentation(segmentationId);

      if (!segmentation) {
@@ -235,50 +241,33 @@ const commandsModule = ({
      }

      const { label } = segmentation;
-      const defaultDataSource = dataSource ?? extensionManager.getActiveDataSource();
+      const SeriesDescription = promptResult.value || label || 'Research Derived Series';

-      const {
-        value: reportName,
-        dataSourceName: selectedDataSource,
-        action,
-      } = await createReportDialogPrompt({
-        servicesManager,
-        extensionManager,
-        title: 'Store Segmentation',
+      const generatedData = actions.generateSegmentation({
+        segmentationId,
+        options: {
+          SeriesDescription,
+        },
      });

-      if (action === PROMPT_RESPONSES.CREATE_REPORT) {
-        try {
-          const selectedDataSourceConfig = selectedDataSource
-            ? extensionManager.getDataSources(selectedDataSource)[0]
-            : defaultDataSource;
-
-          const generatedData = actions.generateSegmentation({
-            segmentationId,
-            options: {
-              SeriesDescription: reportName || label || 'Research Derived Series',
-            },
-          });
-
-          if (!generatedData || !generatedData.dataset) {
-            throw new Error('Error during segmentation generation');
-          }
-
-          const { dataset: naturalizedReport } = generatedData;
-
-          await selectedDataSourceConfig.store.dicom(naturalizedReport);
-
-          // add the information for where we stored it to the instance as well
-          naturalizedReport.wadoRoot = selectedDataSourceConfig.getConfig().wadoRoot;
-
-          DicomMetadataStore.addInstances([naturalizedReport], true);
-
-          return naturalizedReport;
-        } catch (error) {
-          console.debug('Error storing segmentation:', error);
-          throw error;
-        }
+      if (!generatedData || !generatedData.dataset) {
+        throw new Error('Error during segmentation generation');
      }
+
+      const { dataset: naturalizedReport } = generatedData;
+
+      await dataSource.store.dicom(naturalizedReport);
+
+      // The "Mode" route listens for DicomMetadataStore changes
+      // When a new instance is added, it listens and
+      // automatically calls makeDisplaySets
+
+      // add the information for where we stored it to the instance as well
+      naturalizedReport.wadoRoot = dataSource.getConfig().wadoRoot;
+
+      DicomMetadataStore.addInstances([naturalizedReport], true);
+
+      return naturalizedReport;
    },
    /**
     * Converts segmentations into RTSS for download.
@@ -329,28 +318,20 @@ const commandsModule = ({
    },
    setThresholdRange: ({
      value,
-      toolNames = [
-        'ThresholdCircularBrush',
-        'ThresholdSphereBrush',
-        'ThresholdCircularBrushDynamic',
-        'ThresholdSphereBrushDynamic',
-      ],
+      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
    }) => {
-      const toolGroupIds = toolGroupService.getToolGroupIds();
-      if (!toolGroupIds?.length) {
-        return;
-      }
-
-      for (const toolGroupId of toolGroupIds) {
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
        toolNames?.forEach(toolName => {
          toolGroup.setToolConfiguration(toolName, {
-            threshold: {
-              range: value,
+            strategySpecificConfiguration: {
+              THRESHOLD: {
+                threshold: value,
+              },
            },
          });
        });
-      }
+      });
    },
  };

@@ -1,15 +1,6 @@
 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 }) => {
@@ -21,23 +12,17 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        if (!segmentations?.length) {
          return {
            disabled: true,
+            className: '!text-common-bright !bg-black opacity-50',
            disabledText: disabledText ?? 'No segmentations available',
          };
        }

-        const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
-        if (!Object.keys(activeSegmentation.segments).length) {
-          return {
-            disabled: true,
-            disabledText: 'Add segment to enable this tool',
-          };
-        }
-
        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);

        if (!toolGroup) {
          return {
            disabled: true,
+            className: '!text-common-bright ohif-disabled',
            disabledText: disabledText ?? 'Not available on the current viewport',
          };
        }
@@ -47,6 +32,7 @@ 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',
          };
        }
@@ -57,6 +43,12 @@ 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,
        };
      },
@@ -1,5 +1,5 @@
 function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
-  const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');
+  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};

  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
@@ -1,13 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ViewportActionArrows } from '@ohif/ui';
-import { useViewportGrid } from '@ohif/ui-next';
+import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
 import _getStatusComponent from './_getStatusComponent';
-import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
 import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-import { utils } from '@ohif/extension-cornerstone';

 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';

@@ -32,10 +29,6 @@ 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
@@ -47,8 +40,7 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  const [viewportGrid, viewportGridService] = useViewportGrid();

  // States
-  let selectedSegmentObjectIndex: number = 0;
-  const { setPositionPresentation } = usePositionPresentationStore();
+  const [selectedSegment, setSelectedSegment] = useState(1);

  // Hydration means that the SEG is opened and segments are loaded into the
  // segmentation panel, and SEG is also rendered on any viewport that is in the
@@ -132,15 +124,27 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {

  const onSegmentChange = useCallback(
    direction => {
-      utils.handleSegmentChange({
-        direction,
-        segDisplaySet: segDisplaySet,
-        viewportId,
-        selectedSegmentObjectIndex,
-        segmentationService,
-      });
+      const segmentationId = segDisplaySet.displaySetInstanceUID;
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      // Segment 0 is always background
+
+      if (newSelectedSegmentIndex > numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, viewportId);
+      setSelectedSegment(newSelectedSegmentIndex);
    },
-    [selectedSegmentObjectIndex]
+    [selectedSegment]
  );

  const hydrateSEG = useCallback(() => {
@@ -194,17 +198,6 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
        if (evt.segDisplaySet.displaySetInstanceUID === segDisplaySet.displaySetInstanceUID) {
          setSegIsLoading(false);
        }
-
-        if (segDisplaySet?.firstSegmentedSliceImageId && viewportOptions?.presentationIds) {
-          const { firstSegmentedSliceImageId } = segDisplaySet;
-          const { presentationIds } = viewportOptions;
-
-          setPositionPresentation(presentationIds.positionPresentationId, {
-            viewReference: {
-              referencedImageId: firstSegmentedSliceImageId,
-            },
-          });
-        }
      }
    );

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ViewportActionButton } from '@ohif/ui';
-import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+import { Icon, Tooltip } from '@ohif/ui';

 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  let ToolTipMessage = null;
@@ -9,16 +8,18 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {

  switch (isHydrated) {
    case true:
-      StatusIcon = () => <Icons.ByName name="status-alert" />;
+      StatusIcon = () => <Icon name="status-alert" />;
+
      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
      break;
    case false:
      StatusIcon = () => (
-        <Icons.ByName
+        <Icon
          className="text-aqua-pale"
          name="status-untracked"
        />
      );
+
      ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
  }

@@ -33,7 +34,13 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
          <span className="ml-1">SEG</span>
        </div>
        {!isHydrated && (
-          <ViewportActionButton onInteraction={onStatusClick}>{loadStr}</ViewportActionButton>
+          <div
+            className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+            // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+            onMouseUp={onStatusClick}
+          >
+            {loadStr}
+          </div>
        )}
      </div>
    );
@@ -42,18 +49,14 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span>
-              <StatusArea />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            <ToolTipMessage />
-          </TooltipContent>
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
+          <StatusArea />
        </Tooltip>
      )}
      {!ToolTipMessage && <StatusArea />}
    </>
  );
-}
+}
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "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.124",
-    "@ohif/extension-cornerstone": "3.10.0-beta.124",
-    "@ohif/extension-measurement-tracking": "3.10.0-beta.124",
-    "@ohif/ui": "3.10.0-beta.124",
+    "@ohif/core": "3.9.1",
+    "@ohif/extension-cornerstone": "3.9.1",
+    "@ohif/extension-measurement-tracking": "3.9.1",
+    "@ohif/ui": "3.9.1",
    "dcmjs": "*",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.5.0",
-    "@cornerstonejs/core": "^3.5.0",
-    "@cornerstonejs/tools": "^3.5.0",
+    "@cornerstonejs/adapters": "^2.2.4",
+    "@cornerstonejs/core": "^2.2.4",
+    "@cornerstonejs/tools": "^2.2.4",
    "classnames": "^2.3.2"
  }
 }
@@ -5,12 +5,12 @@ import dcmjs from 'dcmjs';
 import { adaptersSR } from '@cornerstonejs/adapters';

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

 const { MeasurementReport } = adaptersSR.Cornerstone3D;
 const { log } = OHIF;

 /**
+ *
 * @param measurementData An array of measurements from the measurements service
 * that you wish to serialize.
 * @param additionalFindingTypes toolTypes that should be stored with labels as Findings
@@ -41,30 +41,9 @@ const _generateReport = (measurementData, additionalFindingTypes, options = {})
 };

 const commandsModule = (props: withAppTypes) => {
-  const { servicesManager, extensionManager } = props;
-  const { customizationService, viewportGridService, displaySetService } = servicesManager.services;
-
+  const { servicesManager } = props;
+  const { customizationService } = servicesManager.services;
  const actions = {
-    changeColorMeasurement: ({ uid }) => {
-      // When this gets supported, it probably belongs in cornerstone, not sr
-      throw new Error('Unsupported operation: changeColorMeasurement');
-      // const { color } = measurementService.getMeasurement(uid);
-      // const rgbaColor = {
-      //   r: color[0],
-      //   g: color[1],
-      //   b: color[2],
-      //   a: color[3] / 255.0,
-      // };
-      // colorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
-      //   if (actionId === 'cancel') {
-      //     return;
-      //   }
-
-      //   const color = [newRgbaColor.r, newRgbaColor.g, newRgbaColor.b, newRgbaColor.a * 255.0];
-      // segmentationService.setSegmentColor(viewportId, segmentationId, segmentIndex, color);
-      // });
-    },
-
    /**
     *
     * @param measurementData An array of measurements from the measurements service
@@ -74,7 +53,7 @@ const commandsModule = (props: withAppTypes) => {
     * that you wish to serialize.
     */
    downloadReport: ({ measurementData, additionalFindingTypes, options = {} }) => {
-      const srDataset = _generateReport(measurementData, additionalFindingTypes, options);
+      const srDataset = actions.generateReport(measurementData, additionalFindingTypes, options);
      const reportBlob = dcmjs.data.datasetToBlob(srDataset);

      //Create a URL for the binary.
@@ -118,11 +97,12 @@ const commandsModule = (props: withAppTypes) => {
          throw new Error('Invalid report, no content');
        }

-        const onBeforeDicomStore = customizationService.getCustomization('onBeforeDicomStore');
+        const onBeforeDicomStore =
+          customizationService.getModeCustomization('onBeforeDicomStore')?.value;

        let dicomDict;
        if (typeof onBeforeDicomStore === 'function') {
-          dicomDict = onBeforeDicomStore({ dicomDict, measurementData, naturalizedReport });
+          dicomDict = onBeforeDicomStore({ measurementData, naturalizedReport });
        }

        await dataSource.store.dicom(naturalizedReport, null, dicomDict);
@@ -143,27 +123,6 @@ const commandsModule = (props: withAppTypes) => {
        throw new Error(error.message || 'Error while saving the measurements.');
      }
    },
-
-    /**
-     * Loads measurements by hydrating and loading the SR for the given display set instance UID
-     * and displays it in the active viewport.
-     */
-    loadSRMeasurements: ({ displaySetInstanceUID }) => {
-      const { SeriesInstanceUIDs } = hydrateStructuredReport(
-        { servicesManager, extensionManager, commandsManager },
-        displaySetInstanceUID
-      );
-
-      const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUIDs[0]);
-      if (displaySets.length) {
-        viewportGridService.setDisplaySetsForViewports([
-          {
-            viewportId: viewportGridService.getActiveViewportId(),
-            displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
-          },
-        ]);
-      }
-    },
  };

  const definitions = {
@@ -173,9 +132,6 @@ const commandsModule = (props: withAppTypes) => {
    storeMeasurements: {
      commandFn: actions.storeMeasurements,
    },
-    loadSRMeasurements: {
-      commandFn: actions.loadSRMeasurements,
-    },
  };

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

 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';

-import { ViewportActionArrows } from '@ohif/ui';
+import { Icon, Tooltip, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
+import hydrateStructuredReport from '../utils/hydrateStructuredReport';
+import { useAppConfig } from '@state';
 import createReferencedImageDisplaySet from '../utils/createReferencedImageDisplaySet';
-import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
-import { useViewportGrid } from '@ohif/ui-next';
-import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';

 const MEASUREMENT_TRACKING_EXTENSION_ID = '@ohif/extension-measurement-tracking';

 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';

 function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
-  const { children, dataSource, displaySets, viewportOptions, servicesManager, extensionManager } =
-    props;
+  const {
+    commandsManager,
+    children,
+    dataSource,
+    displaySets,
+    viewportOptions,
+    servicesManager,
+    extensionManager,
+  } = props;

-  const { displaySetService, viewportActionCornersService } = servicesManager.services;
+  const [appConfig] = useAppConfig();
+
+  const {
+    displaySetService,
+    cornerstoneViewportService,
+    measurementService,
+    viewportActionCornersService,
+  } = servicesManager.services;

  const viewportId = viewportOptions.viewportId;

@@ -30,8 +43,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {

  const srDisplaySet = displaySets[0];

-  const { setPositionPresentation } = usePositionPresentationStore();
-
  const [viewportGrid, viewportGridService] = useViewportGrid();
  const [measurementSelected, setMeasurementSelected] = useState(0);
  const [measurementCount, setMeasurementCount] = useState(1);
@@ -44,6 +55,7 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {

  // Optional hook into tracking extension, if present.
  let trackedMeasurements;
+  let sendTrackedMeasurementsEvent;

  const hasMeasurementTrackingExtension = extensionManager.registeredExtensionIds.includes(
    MEASUREMENT_TRACKING_EXTENSION_ID
@@ -56,6 +68,29 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {

    const tracked = useContext(contextModule.context);
    trackedMeasurements = tracked?.[0];
+    sendTrackedMeasurementsEvent = tracked?.[1];
+  }
+
+  if (!sendTrackedMeasurementsEvent) {
+    // if no panels from measurement-tracking extension is used, this code will run
+    trackedMeasurements = null;
+    sendTrackedMeasurementsEvent = (eventName, { displaySetInstanceUID }) => {
+      measurementService.clearMeasurements();
+      const { SeriesInstanceUIDs } = hydrateStructuredReport(
+        { servicesManager, extensionManager, appConfig },
+        displaySetInstanceUID
+      );
+
+      const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUIDs[0]);
+      if (displaySets.length) {
+        viewportGridService.setDisplaySetsForViewports([
+          {
+            viewportId: activeViewportId,
+            displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
+          },
+        ]);
+      }
+    };
  }

  /**
@@ -119,17 +154,33 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
        }

        setMeasurementSelected(newMeasurementSelected);
-
        setActiveImageDisplaySetData(referencedDisplaySet);
        setReferencedDisplaySetMetadata(referencedDisplaySetMetadata);

-        const { presentationIds } = viewportOptions;
-        const measurement = srDisplaySet.measurements[newMeasurementSelected];
-        setPositionPresentation(presentationIds.positionPresentationId, {
-          viewReference: {
-            referencedImageId: measurement.imageId,
-          },
-        });
+        if (
+          referencedDisplaySet.displaySetInstanceUID ===
+          activeImageDisplaySetData?.displaySetInstanceUID
+        ) {
+          const { measurements } = srDisplaySet;
+
+          // it means that we have a new referenced display set, and the
+          // imageIdIndex will handle it by updating the viewport, but if they
+          // are the same we just need to use measurementService to jump to the
+          // new measurement
+          const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+          if (!csViewport) {
+            return;
+          }
+
+          const imageIds = csViewport.getImageIds();
+
+          const imageIdIndex = imageIds.indexOf(measurements[newMeasurementSelected].imageId);
+
+          if (imageIdIndex !== -1) {
+            csViewport.setImageIdIndex(imageIdIndex);
+          }
+        }
      });
    },
    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportId]
@@ -151,6 +202,10 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
      return null;
    }

+    const initialImageIndex = activeImageDisplaySetData.images.findIndex(
+      image => image.imageId === measurement.imageId
+    );
+
    return (
      <Component
        {...props}
@@ -175,6 +230,7 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          props.onElementEnabled?.(evt);
          onElementEnabled(evt);
        }}
+        initialImageIndex={initialImageIndex}
        isJumpToMeasurementDisabled={true}
      ></Component>
    );
@@ -269,8 +325,8 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          viewportId,
          isRehydratable: srDisplaySet.isRehydratable,
          isLocked,
+          sendTrackedMeasurementsEvent,
          t,
-          servicesManager,
        }),
        indexPriority: -100,
        location: viewportActionCornersService.LOCATIONS.topLeft,
@@ -289,7 +345,15 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
        location: viewportActionCornersService.LOCATIONS.topRight,
      },
    ]);
-  }, [isLocked, onMeasurementChange, srDisplaySet, t, viewportActionCornersService, viewportId]);
+  }, [
+    isLocked,
+    onMeasurementChange,
+    sendTrackedMeasurementsEvent,
+    srDisplaySet,
+    t,
+    viewportActionCornersService,
+    viewportId,
+  ]);

  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;
@@ -377,9 +441,16 @@ function _getStatusComponent({
  viewportId,
  isRehydratable,
  isLocked,
+  sendTrackedMeasurementsEvent,
  t,
-  servicesManager,
 }) {
+  const handleMouseUp = () => {
+    sendTrackedMeasurementsEvent('HYDRATE_SR', {
+      displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
+      viewportId,
+    });
+  };
+
  const loadStr = t('LOAD');

  // 1 - Incompatible
@@ -391,12 +462,7 @@ function _getStatusComponent({

  switch (state) {
    case 1:
-      StatusIcon = () => (
-        <Icons.ByName
-          name="status-alert"
-          className="h-4 w-4"
-        />
-      );
+      StatusIcon = () => <Icon name="status-alert" />;

      ToolTipMessage = () => (
        <div>
@@ -407,12 +473,7 @@ function _getStatusComponent({
      );
      break;
    case 2:
-      StatusIcon = () => (
-        <Icons.ByName
-          name="status-locked"
-          className="h-4 w-4"
-        />
-      );
+      StatusIcon = () => <Icon name="status-locked" />;

      ToolTipMessage = () => (
        <div>
@@ -426,8 +487,8 @@ function _getStatusComponent({
      break;
    case 3:
      StatusIcon = () => (
-        <Icons.ByName
-          className="text-aqua-pale h-4 w-4"
+        <Icon
+          className="text-aqua-pale"
          name="status-untracked"
        />
      );
@@ -435,62 +496,32 @@ function _getStatusComponent({
      ToolTipMessage = () => <div>{`Click ${loadStr} to restore measurements.`}</div>;
  }

-  const StatusArea = () => {
-    const { toolbarButtons: loadSRMeasurementsButtons, onInteraction } = useToolbar({
-      servicesManager,
-      buttonSection: 'loadSRMeasurements',
-    });
-
-    const commandOptions = {
-      displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
-      viewportId,
-    };
-
-    return (
-      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
-        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
-          <StatusIcon className="h-4 w-4" />
-          <span className="ml-1">SR</span>
-        </div>
-        {state === 3 && (
-          <>
-            {loadSRMeasurementsButtons.map(toolDef => {
-              if (!toolDef) {
-                return null;
-              }
-              const { id, Component, componentProps } = toolDef;
-              const tool = (
-                <Component
-                  key={id}
-                  id={id}
-                  onInteraction={args => onInteraction({ ...args, ...commandOptions })}
-                  {...componentProps}
-                />
-              );
-
-              return <div key={id}>{tool}</div>;
-            })}
-          </>
-        )}
+  const StatusArea = () => (
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+        <StatusIcon />
+        <span className="ml-1">SR</span>
      </div>
-    );
-  };
+      {state === 3 && (
+        <div
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={handleMouseUp}
+        >
+          {loadStr}
+        </div>
+      )}
+    </div>
+  );

  return (
    <>
      {ToolTipMessage && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span>
-              <StatusArea />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent
-            side="bottom"
-            align="start"
-          >
-            <ToolTipMessage />
-          </TooltipContent>
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
+          <StatusArea />
        </Tooltip>
      )}
      {!ToolTipMessage && <StatusArea />}
@@ -263,9 +263,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(
  for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
    let measurement = unloadedMeasurements[j];

-    const onBeforeSRAddMeasurement = customizationService.getCustomization(
+    const onBeforeSRAddMeasurement = customizationService.getModeCustomization(
      'onBeforeSRAddMeasurement'
-    );
+    )?.value;

    if (typeof onBeforeSRAddMeasurement === 'function') {
      measurement = onBeforeSRAddMeasurement({
@@ -30,7 +30,6 @@ const dicomSRExtension = {
   * Only required property. Should be a unique value across all extensions.
   */
  id,
-
  onModeEnter,

  preRegistration,
@@ -0,0 +1,15 @@
+import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
+
+export default function onModeEnter({ servicesManager }) {
+  const { displaySetService } = servicesManager.services;
+  const displaySetCache = displaySetService.getDisplaySetCache();
+
+  const srDisplaySets = [...displaySetCache.values()].filter(
+    ds => ds.SOPClassHandlerId === SOPClassHandlerId || ds.SOPClassHandlerId === SOPClassHandlerId3D
+  );
+
+  srDisplaySets.forEach(ds => {
+    // New mode route, allow SRs to be hydrated again
+    ds.isHydrated = false;
+  });
+}
@@ -1,39 +0,0 @@
-import React from 'react';
-
-import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
-import { ViewportActionButton } from '@ohif/ui';
-import i18n from '@ohif/i18n';
-
-export default function onModeEnter({ servicesManager }) {
-  const { displaySetService, toolbarService } = servicesManager.services;
-  const displaySetCache = displaySetService.getDisplaySetCache();
-
-  const srDisplaySets = [...displaySetCache.values()].filter(
-    ds => ds.SOPClassHandlerId === SOPClassHandlerId || ds.SOPClassHandlerId === SOPClassHandlerId3D
-  );
-
-  srDisplaySets.forEach(ds => {
-    // New mode route, allow SRs to be hydrated again
-    ds.isHydrated = false;
-  });
-
-  toolbarService.addButtons([
-    {
-      // A base/default button for loading measurements. It is added to the toolbar below.
-      // Customizations to this button can be made in the mode or by another extension.
-      // For example, the button label can be changed and/or the command to clear
-      // the measurements can be dropped.
-      id: 'loadSRMeasurements',
-      component: props => (
-        <ViewportActionButton {...props}>{i18n.t('Common:LOAD')}</ViewportActionButton>
-      ),
-      props: {
-        commands: ['clearMeasurements', 'loadSRMeasurements'],
-      },
-    },
-  ]);
-
-  // The toolbar used in the viewport's status bar. Modes and extensions can further customize
-  // it to optionally add other buttons.
-  toolbarService.createButtonSection('loadSRMeasurements', ['loadSRMeasurements']);
-}
@@ -25,7 +25,7 @@ const contentItemFormatters = {
    return `${NumericValue} ${CodeValue}`;
  },
  PNAME: contentItem => {
-    const personName = contentItem.PersonName?.[0];
+    const personName = contentItem.PersonName?.[0]?.Alphabetic;
    return personName ? utils.formatPN(personName) : undefined;
  },
  DATE: contentItem => {
@@ -41,14 +41,22 @@ const convertSites = (codingValues, sites) => {
 *
 */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager, commandsManager }: withAppTypes,
+  { servicesManager, extensionManager, appConfig }: 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');
+  const codingValues = customizationService.getCustomization('codingValues', {});
+
+  const { disableEditing } = customizationService.getCustomization(
+    'PanelMeasurement.disableEditing',
+    {
+      id: 'default.disableEditing',
+      disableEditing: false,
+    }
+  );

  const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

@@ -85,8 +93,7 @@ export default function hydrateStructuredReport(
    }
  });

-  // Mapping of legacy datasets is now directly handled by adapters module
-  const datasetToUse = instance;
+  const datasetToUse = _mapLegacyDataSet(instance);

  // Use dcmjs to generate toolState.
  let storedMeasurementByAnnotationType = MeasurementReport.generateToolState(
@@ -100,7 +107,8 @@ export default function hydrateStructuredReport(
    metaData
  );

-  const onBeforeSRHydration = customizationService.getCustomization('onBeforeSRHydration')?.value;
+  const onBeforeSRHydration =
+    customizationService.getModeCustomization('onBeforeSRHydration')?.value;

  if (typeof onBeforeSRHydration === 'function') {
    storedMeasurementByAnnotationType = onBeforeSRHydration({
@@ -200,11 +208,7 @@ export default function hydrateStructuredReport(
      annotation.data.label = getLabelFromDCMJSImportedToolData(toolData);
      annotation.data.finding = convertCode(codingValues, toolData.finding?.[0]);
      annotation.data.findingSites = convertSites(codingValues, toolData.findingSites);
-      annotation.data.findingSites?.forEach(site => {
-        if (site.type) {
-          annotation.data[site.type] = site;
-        }
-      });
+      annotation.data.site = annotation.data.findingSites?.[0];

      const matchingMapping = mappings.find(m => m.annotationType === annotationType);

@@ -216,13 +220,9 @@ export default function hydrateStructuredReport(
        dataSource
      );

-      commandsManager.runCommand('updateMeasurement', {
-        uid: newAnnotationUID,
-        code: annotation.data.finding,
-      });
-
      if (disableEditing) {
-        locking.setAnnotationLocked(newAnnotationUID, true);
+        const addedAnnotation = annotationManager.getAnnotation(newAnnotationUID);
+        locking.setAnnotationLocked(addedAnnotation, true);
      }

      if (!imageIds.includes(imageId)) {
@@ -238,3 +238,62 @@ export default function hydrateStructuredReport(
    SeriesInstanceUIDs,
  };
 }
+
+function _mapLegacyDataSet(dataset) {
+  const REPORT = 'Imaging Measurements';
+  const GROUP = 'Measurement Group';
+  const TRACKING_IDENTIFIER = 'Tracking Identifier';
+
+  // Identify the Imaging Measurements
+  const imagingMeasurementContent = toArray(dataset.ContentSequence).find(
+    codeMeaningEquals(REPORT)
+  );
+
+  // Retrieve the Measurements themselves
+  const measurementGroups = toArray(imagingMeasurementContent.ContentSequence).filter(
+    codeMeaningEquals(GROUP)
+  );
+
+  // For each of the supported measurement types, compute the measurement data
+  const measurementData = {};
+
+  const cornerstoneToolClasses = MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
+
+  const registeredToolClasses = [];
+
+  Object.keys(cornerstoneToolClasses).forEach(key => {
+    registeredToolClasses.push(cornerstoneToolClasses[key]);
+    measurementData[key] = [];
+  });
+
+  measurementGroups.forEach((measurementGroup, index) => {
+    const measurementGroupContentSequence = toArray(measurementGroup.ContentSequence);
+
+    const TrackingIdentifierGroup = measurementGroupContentSequence.find(
+      contentItem => contentItem.ConceptNameCodeSequence.CodeMeaning === TRACKING_IDENTIFIER
+    );
+
+    const TrackingIdentifier = TrackingIdentifierGroup.TextValue;
+
+    let [cornerstoneTag, toolName] = TrackingIdentifier.split(':');
+    if (supportedLegacyCornerstoneTags.includes(cornerstoneTag)) {
+      cornerstoneTag = CORNERSTONE_3D_TAG;
+    }
+
+    const mappedTrackingIdentifier = `${cornerstoneTag}:${toolName}`;
+
+    TrackingIdentifierGroup.TextValue = mappedTrackingIdentifier;
+  });
+
+  return dataset;
+}
+
+const toArray = function (x) {
+  return Array.isArray(x) ? x : [x];
+};
+
+const codeMeaningEquals = codeMeaningName => {
+  return contentItem => {
+    return contentItem.ConceptNameCodeSequence.CodeMeaning === codeMeaningName;
+  };
+};
@@ -0,0 +1,60 @@
+import { adaptersSR } from '@cornerstonejs/adapters';
+
+const cornerstoneAdapters =
+  adaptersSR.Cornerstone3D.MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
+
+const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
+const CORNERSTONE_3D_TAG = adaptersSR.Cornerstone3D.CORNERSTONE_3D_TAG;
+
+/**
+ * Checks if the given `displaySet`can be rehydrated into the `measurementService`.
+ *
+ * @param {object} displaySet The SR `displaySet` to check.
+ * @param {object[]} mappings The CornerstoneTools 4 mappings to the `measurementService`.
+ * @returns {boolean} True if the SR can be rehydrated into the `measurementService`.
+ */
+export default function isRehydratable(displaySet, mappings) {
+  if (!mappings || !mappings.length) {
+    return false;
+  }
+
+  const mappingDefinitions = mappings.map(m => m.annotationType);
+  const { measurements } = displaySet;
+
+  const adapterKeys = Object.keys(cornerstoneAdapters).filter(
+    adapterKey =>
+      typeof cornerstoneAdapters[adapterKey].isValidCornerstoneTrackingIdentifier === 'function'
+  );
+
+  const adapters = [];
+
+  adapterKeys.forEach(key => {
+    if (mappingDefinitions.includes(key)) {
+      // Must have both a dcmjs adapter and a measurementService
+      // Definition in order to be a candidate for import.
+      adapters.push(cornerstoneAdapters[key]);
+    }
+  });
+
+  for (let i = 0; i < measurements.length; i++) {
+    const { TrackingIdentifier } = measurements[i] || {};
+    const hydratable = adapters.some(adapter => {
+      let [cornerstoneTag, toolName] = TrackingIdentifier.split(':');
+      if (supportedLegacyCornerstoneTags.includes(cornerstoneTag)) {
+        cornerstoneTag = CORNERSTONE_3D_TAG;
+      }
+
+      const mappedTrackingIdentifier = `${cornerstoneTag}:${toolName}`;
+
+      return adapter.isValidCornerstoneTrackingIdentifier(mappedTrackingIdentifier);
+    });
+
+    if (hydratable) {
+      return true;
+    }
+    console.log('Measurement is not rehydratable', TrackingIdentifier, measurements[i]);
+  }
+
+  console.log('No measurements found which were rehydratable');
+  return false;
+}
@@ -1,41 +0,0 @@
-import { adaptersSR } from '@cornerstonejs/adapters';
-
-const { MeasurementReport } = adaptersSR.Cornerstone3D;
-
-/**
- * Checks if the given `displaySet`can be rehydrated into the `measurementService`.
- *
- * @param {object} displaySet The SR `displaySet` to check.
- * @param {object[]} mappings The CornerstoneTools 4 mappings to the `measurementService`.
- * @returns {boolean} True if the SR can be rehydrated into the `measurementService`.
- */
-export default function isRehydratable(displaySet, mappings) {
-  if (!mappings || !mappings.length) {
-    return false;
-  }
-
-  const mappingDefinitions = new Set<string>();
-  for (const m of mappings) {
-    mappingDefinitions.add(m.annotationType);
-  }
-
-  const { measurements } = displaySet;
-
-  for (let i = 0; i < measurements.length; i++) {
-    const { TrackingIdentifier } = measurements[i] || {};
-    if (!TrackingIdentifier) {
-      console.warn('No tracking identifier for measurement ', measurements[i]);
-      continue;
-    }
-    const adapter = MeasurementReport.getAdapterForTrackingIdentifier(TrackingIdentifier);
-    const hydratable = adapter && mappingDefinitions.has(adapter.toolType);
-
-    if (hydratable) {
-      return true;
-    }
-    console.log('Measurement is not rehydratable', TrackingIdentifier, measurements[i]);
-  }
-
-  console.log('No measurements found which were rehydratable');
-  return false;
-}
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "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.124",
-    "@ohif/extension-cornerstone": "3.10.0-beta.124",
-    "@ohif/extension-default": "3.10.0-beta.124",
-    "@ohif/i18n": "3.10.0-beta.124",
-    "@ohif/ui": "3.10.0-beta.124",
+    "@ohif/core": "3.9.1",
+    "@ohif/extension-cornerstone": "3.9.1",
+    "@ohif/extension-default": "3.9.1",
+    "@ohif/i18n": "3.9.1",
+    "@ohif/ui": "3.9.1",
    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -42,8 +42,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^3.5.0",
-    "@cornerstonejs/tools": "^3.5.0",
+    "@cornerstonejs/core": "^2.2.4",
+    "@cornerstonejs/tools": "^2.2.4",
    "classnames": "^2.3.2"
  }
 }
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/extension-default';
+import { Toolbox } from '@ohif/ui-next';
 import { PanelSegmentation } from '@ohif/extension-cornerstone';
 import DynamicExport from './panels/DynamicExport';

@@ -19,6 +19,9 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager, co
    return (
      <>
        <Toolbox
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
          buttonSectionId="dynamic-toolbox"
          title="Threshold Tools"
        />
@@ -1,6 +1,16 @@
-import React, { useState } from 'react';
-import { Button, PanelSection, ButtonGroup, IconButton, InputNumber } from '@ohif/ui';
-import { Icons, Tooltip, TooltipTrigger, TooltipContent, Numeric } from '@ohif/ui-next';
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  PanelSection,
+  ButtonGroup,
+  IconButton,
+  InputNumber,
+  Icon,
+  Tooltip,
+} from '@ohif/ui';
+
+import { DoubleSlider } from '@ohif/ui-next';
+
 import { Enums } from '@cornerstonejs/core';

 const controlClassNames = {
@@ -11,21 +21,16 @@ const controlClassNames = {

 const Header = ({ title, tooltip }) => (
  <div className="flex items-center space-x-1">
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <span>
-          <Icons.ByName
-            name="info-link"
-            className="text-primary-active h-[14px] w-[14px]"
-          />
-        </span>
-      </TooltipTrigger>
-      <TooltipContent
-        sideOffset={4}
-        className="bg-primary-dark max-w-xs p-2 text-white"
-      >
-        <div>{tooltip}</div>
-      </TooltipContent>
+    <Tooltip
+      content={<div className="text-white">{tooltip}</div>}
+      position="bottom-left"
+      tight={true}
+      tooltipBoxClassName="max-w-xs p-2"
+    >
+      <Icon
+        name="info-link"
+        className="text-primary-active h-[14px] w-[14px]"
+      />
    </Tooltip>
    <span className="text-aqua-pale text-[11px] uppercase">{title}</span>
  </div>
@@ -40,17 +45,26 @@ const DynamicVolumeControls = ({
  minFps,
  maxFps,
  // Frames
-  currentDimensionGroupNumber,
-  onDimensionGroupChange,
-  numDimensionGroups,
+  currentFrameIndex,
+  onFrameChange,
+  framesLength,
  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">
      <PanelSection
@@ -85,7 +99,7 @@ const DynamicVolumeControls = ({
          </ButtonGroup>
        </div>
        <div>
-          <DimensionGroupControls
+          <FrameControls
            onPlayPauseChange={onPlayPauseChange}
            isPlaying={isPlaying}
            computedView={computedView}
@@ -95,9 +109,9 @@ const DynamicVolumeControls = ({
            minFps={minFps}
            maxFps={maxFps}
            //
-            numDimensionGroups={numDimensionGroups}
-            onDimensionGroupChange={onDimensionGroupChange}
-            currentDimensionGroupNumber={currentDimensionGroupNumber}
+            framesLength={framesLength}
+            onFrameChange={onFrameChange}
+            currentFrameIndex={currentFrameIndex}
          />
        </div>
        <div className={`mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
@@ -107,15 +121,15 @@ 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 of dimension groups within which the
-                operation will be performed.
-                <br />
-                Generate Button: Execute the chosen operation on the specified range of data.
+                <br></br> Range Slider: Choose the numeric range within which the operation will be
+                performed.
+                <br></br>Generate Button: Execute the chosen operation on the specified range of
+                data.{' '}
              </div>
            }
          />
          <ButtonGroup
-            className="mt-2 w-full"
+            className={`mt-2 w-full`}
            separated={true}
          >
            <button
@@ -138,15 +152,15 @@ const DynamicVolumeControls = ({
            </button>
          </ButtonGroup>
          <div className="mt-2 w-full">
-            <Numeric.Container
-              mode="doubleRange"
-              min={1}
-              max={numDimensionGroups}
-              values={rangeValues}
-              onChange={onDoubleRangeChange}
-            >
-              <Numeric.DoubleRange showNumberInputs />
-            </Numeric.Container>
+            <DoubleSlider
+              min={0}
+              max={framesLength - 1}
+              step={1}
+              defaultValue={sliderRangeValues}
+              onValueChange={handleSliderChange}
+              formatLabel={formatLabel}
+              className="w-full"
+            />
          </div>
          <Button
            className="mt-2 !h-[26px] !w-[115px] self-start !p-0"
@@ -164,16 +178,16 @@ const DynamicVolumeControls = ({

 export default DynamicVolumeControls;

-function DimensionGroupControls({
+function FrameControls({
  isPlaying,
  onPlayPauseChange,
  fps,
  minFps,
  maxFps,
  onFpsChange,
-  numDimensionGroups,
-  onDimensionGroupChange,
-  currentDimensionGroupNumber,
+  framesLength,
+  onFrameChange,
+  currentFrameIndex,
  computedView,
 }) {
  const getPlayPauseIconName = () => (isPlaying ? 'icon-pause' : 'icon-play');
@@ -184,30 +198,28 @@ function DimensionGroupControls({
        title="4D Controls"
        tooltip={
          <div>
-            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.
+            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
+            Selector: Navigate through individual frames of the 4D data. <br></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)}
        >
-          <Icons.ByName
+          <Icon
            name={getPlayPauseIconName()}
            className="active:text-primary-light hover:bg-customblue-300 h-[24px] w-[24px] cursor-pointer text-white"
          />
        </IconButton>
        <InputNumber
-          value={currentDimensionGroupNumber}
-          onChange={onDimensionGroupChange}
-          minValue={1}
-          maxValue={numDimensionGroups}
-          label="Group"
+          value={currentFrameIndex}
+          onChange={onFrameChange}
+          minValue={0}
+          maxValue={framesLength - 1}
+          label="Frame"
          {...controlClassNames}
        />
        <InputNumber
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useCine } from '@ohif/ui';
-import { useViewportGrid } from '@ohif/ui-next';
+import { useCine, useViewportGrid } from '@ohif/ui';
 import { utilities as csUtils, volumeLoader, eventTarget, Enums, cache } from '@cornerstonejs/core';
 import { utilities as cstUtils } from '@cornerstonejs/tools';
 import DynamicVolumeControls from './DynamicVolumeControls';
@@ -15,12 +14,13 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
  const [{ activeViewportId }] = useViewportGrid();

  //
-  const [dimensionGroupRange, setDimensionGroupRange] = useState([1, 1]);
+  const [timePointsRange, setTimePointsRange] = useState([0, 0]);
+  const [timePointsRangeToUseForGenerate, setTimePointsRangeToUseForGenerate] = useState([0, 0]);
  const [computedDisplaySet, setComputedDisplaySet] = useState(null);
  const [dynamicVolume, setDynamicVolume] = useState(null);
  const [frameRate, setFrameRate] = useState(20);
  const [isPlaying, setIsPlaying] = useState(isCineEnabled);
-  const [dimensionGroupNumberRendered, setDimensionGroupNumberRendered] = useState(null);
+  const [timePointRendered, setTimePointRendered] = useState(null);
  const [displayingComputed, setDisplayingComputed] = useState(false);

  //
@@ -37,8 +37,9 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
        if (volumeData.volume?.isDynamicVolume()) {
          setDynamicVolume(volumeData.volume);
          uuidDynamicVolume.current = volumeData.displaySetInstanceUID;
-          const newRange = [1, volumeData.volume.numDimensionGroups];
-          setDimensionGroupRange(newRange);
+          const newRange = [1, volumeData.volume.numTimePoints];
+          setTimePointsRange(newRange);
+          setTimePointsRangeToUseForGenerate(newRange);
        }
      });
    };
@@ -63,10 +64,10 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
  }, [cornerstoneViewportService, cineService, servicesManager.services.cineService]);

  useEffect(() => {
-    const evt = Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED;
+    const evt = Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED;

    const callback = evt => {
-      setDimensionGroupNumberRendered(evt.detail.dimensionGroupNumber);
+      setTimePointRendered(evt.detail.timePointIndex);
    };

    eventTarget.addEventListener(evt, callback);
@@ -74,7 +75,7 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
    return () => {
      eventTarget.removeEventListener(evt, callback);
    };
-  }, []);
+  }, [cornerstoneViewportService]);

  useEffect(() => {
    const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(activeViewportId);
@@ -100,7 +101,9 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:

    setDynamicVolume(dynamicVolume);
    uuidDynamicVolume.current = dynamicVolumeDisplaySet.displaySetInstanceUID;
-    setDimensionGroupRange([1, dynamicVolume.numDimensionGroups]);
+    const newRange = [1, dynamicVolume.numTimePoints];
+    setTimePointsRange(newRange);
+    setTimePointsRangeToUseForGenerate(newRange);
  }, [
    activeViewportId,
    viewportGridService,
@@ -137,12 +140,11 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
        volumeId: computedVolumeId,
      });
    }
-    const [start, end] = dimensionGroupRange;
-    // from start to end, with steps of 1
-    const frameNumbers = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    const [start, end] = timePointsRangeToUseForGenerate;
+    const frameNumbers = Array.from({ length: end - start + 1 }, (_, i) => i + start - 1);

    const options = {
-      dimensionGroupNumbers: operationName === 'SUBTRACT' ? [start, end] : frameNumbers,
+      frameNumbers: operationName === 'SUBTRACT' ? [start, end - 1] : frameNumbers,
      targetVolume: computedVolume,
    };

@@ -204,6 +206,21 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
    handlePlay();
  };

+  function handleSliderChange(newValues) {
+    if (
+      newValues[0] === timePointsRangeToUseForGenerate[0] &&
+      newValues[1] === timePointsRangeToUseForGenerate[1]
+    ) {
+      return;
+    }
+
+    setTimePointsRangeToUseForGenerate(newValues);
+  }
+
+  if (!dynamicVolume || timePointsRange.length === 0) {
+    return null;
+  }
+
  return (
    <DynamicVolumeControls
      fps={frameRate}
@@ -211,16 +228,16 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
      onPlayPauseChange={onPlayPauseChange}
      minFps={1}
      maxFps={50}
+      currentFrameIndex={timePointRendered}
      onFpsChange={handleSetFrameRate}
-      currentDimensionGroupNumber={dimensionGroupNumberRendered}
-      numDimensionGroups={dynamicVolume?.numDimensionGroups || 1}
-      onDimensionGroupChange={dimensionGroupNumber => {
-        dynamicVolume.dimensionGroupNumber = dimensionGroupNumber;
+      framesLength={timePointsRange[1]}
+      onFrameChange={timePointIndex => {
+        dynamicVolume.timePointIndex = timePointIndex;
      }}
      onGenerate={onGenerateImage}
      onDynamicClick={displayingComputed ? () => renderDynamicImage(computedDisplaySet) : null}
-      onDoubleRangeChange={setDimensionGroupRange}
-      rangeValues={dimensionGroupRange}
+      onDoubleRangeChange={handleSliderChange}
+      initialRangeValues={timePointsRangeToUseForGenerate}
    />
  );
 }
@@ -5,7 +5,7 @@ function WorkflowPanel({ servicesManager }: { servicesManager: ServicesManager }
  const ProgressDropdownWithService =
    servicesManager.services.customizationService.getCustomization(
      'progressDropdownWithServiceComponent'
-    );
+    ).component;

  return (
    <div
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.10.0-beta.124",
+  "version": "3.9.1",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -38,9 +38,10 @@
    "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
    "@cornerstonejs/codec-openjpeg": "^1.2.4",
    "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^3.5.0",
-    "@ohif/core": "3.10.0-beta.124",
-    "@ohif/ui": "3.10.0-beta.124",
+    "@cornerstonejs/dicom-image-loader": "^2.2.4",
+    "@icr/polyseg-wasm": "^0.4.0",
+    "@ohif/core": "3.9.1",
+    "@ohif/ui": "3.9.1",
    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -49,20 +50,19 @@
    "react-dom": "^18.3.1",
    "react-resize-detector": "^10.0.1"
  },
+  "devDependencies": {
+    "lodash": "^4.17.21"
+  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.5.0",
-    "@cornerstonejs/core": "^3.5.0",
-    "@cornerstonejs/polymorphic-segmentation": "^3.5.0",
-    "@cornerstonejs/tools": "^3.5.0",
-    "@itk-wasm/morphological-contour-interpolation": "1.1.0",
-    "@kitware/vtk.js": "32.12.0",
+    "@cornerstonejs/adapters": "^2.2.4",
+    "@cornerstonejs/core": "^2.2.4",
+    "@cornerstonejs/tools": "^2.2.4",
+    "@icr/polyseg-wasm": "^0.4.0",
+    "@kitware/vtk.js": "32.1.0",
    "html2canvas": "^1.4.1",
-    "lodash.compact": "^3.0.1",
    "lodash.debounce": "^4.0.8",
-    "lodash.flatten": "^4.4.0",
    "lodash.merge": "^4.6.2",
-    "lodash.zip": "^4.2.0",
    "shader-loader": "^1.3.1",
    "worker-loader": "^3.0.8"
  }
@@ -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, useViewportDialog } from '@ohif/ui';
+import { AllInOneMenu, Notification, useViewportDialog } from '@ohif/ui';
 import type { Types as csTypes } from '@cornerstonejs/core';

 import { setEnabledElement } from '../state';
@@ -15,11 +15,11 @@ import type { Types } from '@ohif/core';

 import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
 import { getWindowLevelActionMenu } from '../components/WindowLevelActionMenu/getWindowLevelActionMenu';
+import { useAppConfig } from '@state';
 import { getViewportDataOverlaySettingsMenu } from '../components/ViewportDataOverlaySettingMenu';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
-import { WITH_NAVIGATION } from '../services/ViewportService/CornerstoneViewportService';

 const STACK = 'stack';

@@ -88,6 +88,7 @@ const OHIFCornerstoneViewport = React.memo(
    const [scrollbarHeight, setScrollbarHeight] = useState('100px');
    const [enabledVPElement, setEnabledVPElement] = useState(null);
    const elementRef = useRef() as React.MutableRefObject<HTMLDivElement>;
+    const [appConfig] = useAppConfig();

    const {
      displaySetService,
@@ -98,7 +99,6 @@ const OHIFCornerstoneViewport = React.memo(
      segmentationService,
      cornerstoneCacheService,
      viewportActionCornersService,
-      customizationService,
    } = servicesManager.services;

    const [viewportDialogState] = useViewportDialog();
@@ -146,11 +146,6 @@ const OHIFCornerstoneViewport = React.memo(

        const { viewportId, element } = evt.detail;
        const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-
-        if (!viewportInfo) {
-          return;
-        }
-
        setEnabledElement(viewportId, element);
        setEnabledVPElement(element);

@@ -327,54 +322,57 @@ const OHIFCornerstoneViewport = React.memo(

    // Set up the window level action menu in the viewport action corners.
    useEffect(() => {
-      const windowLevelActionMenu = customizationService.getCustomization(
-        'viewportActionMenu.windowLevelActionMenu'
-      );
-      const segmentationOverlay = customizationService.getCustomization(
-        'viewportActionMenu.segmentationOverlay'
-      );
-
-      if (windowLevelActionMenu?.enabled) {
-        viewportActionCornersService.addComponent({
-          viewportId,
-          id: 'windowLevelActionMenu',
-          component: getWindowLevelActionMenu({
-            viewportId,
-            element: elementRef.current,
-            displaySets,
-            servicesManager,
-            commandsManager,
-            location: windowLevelActionMenu.location,
-            verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
-            horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
-          }),
-          location: windowLevelActionMenu.location,
-        });
+      // Doing an === check here because the default config value when not set is true
+      if (appConfig.addWindowLevelActionMenu === false) {
+        return;
      }

-      if (segmentationOverlay?.enabled) {
-        viewportActionCornersService.addComponent({
+      const location = viewportActionCornersService.LOCATIONS.topRight;
+
+      // TODO: In the future we should consider using the customization service
+      // to determine if and in which corner various action components should go.
+      viewportActionCornersService.addComponent({
+        viewportId,
+        id: 'windowLevelActionMenu',
+        component: getWindowLevelActionMenu({
          viewportId,
-          id: 'segmentation',
-          component: getViewportDataOverlaySettingsMenu({
-            viewportId,
-            element: elementRef.current,
-            displaySets,
-            servicesManager,
-            commandsManager,
-            location: segmentationOverlay.location,
-          }),
-          location: segmentationOverlay.location,
-        });
-      }
-    }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
+          element: elementRef.current,
+          displaySets,
+          servicesManager,
+          commandsManager,
+          location,
+          verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
+          horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
+        }),
+        location,
+      });
+
+      viewportActionCornersService.addComponent({
+        viewportId,
+        id: 'segmentation',
+        component: getViewportDataOverlaySettingsMenu({
+          viewportId,
+          element: elementRef.current,
+          displaySets,
+          servicesManager,
+          commandsManager,
+          location,
+        }),
+        location,
+      });
+    }, [
+      displaySets,
+      viewportId,
+      viewportActionCornersService,
+      servicesManager,
+      commandsManager,
+      appConfig,
+    ]);

    const { ref: resizeRef } = useResizeDetector({
      onResize,
    });

-    const Notification = customizationService.getCustomization('ui.notificationComponent');
-
    return (
      <React.Fragment>
        <div className="viewport-wrapper">
@@ -504,16 +502,12 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportId, servicesM
    const viewport = enabledElement.viewport as csTypes.IStackViewport | csTypes.IVolumeViewport;

    const { metadata } = measurement;
-    if (!viewport.isReferenceViewable(metadata, WITH_NAVIGATION)) {
+    if (!viewport.isReferenceViewable(metadata, { withNavigation: true, withOrientation: true })) {
      console.log("Reference isn't viewable, postponing until updated");
      return;
    }

-    try {
-      viewport.setViewReference(metadata);
-    } catch (e) {
-      console.warn('Unable to apply', metadata, e);
-    }
+    viewport.setViewReference(metadata);

    cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
    // Jump to measurement consumed, remove.
@@ -5,14 +5,12 @@ import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import type { ImageSliceData } from '@cornerstonejs/core/types';
 import { ViewportOverlay } from '@ohif/ui';
 import type { InstanceMetadata } from '@ohif/core/src/types';
-import { formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
-import { utils } from '@ohif/core';
+import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';

 import './CustomizableViewportOverlay.css';

 const EPSILON = 1e-4;
-const { formatPN } = utils;

 type ViewportData = StackViewportData | VolumeViewportData;

@@ -47,6 +45,80 @@ 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
 */
@@ -69,18 +141,26 @@ 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('viewportOverlay.topLeft');
-  const topRightCustomization = customizationService.getCustomization('viewportOverlay.topRight');
-  const bottomLeftCustomization = customizationService.getCustomization(
-    'viewportOverlay.bottomLeft'
-  );
-  const bottomRightCustomization = customizationService.getCustomization(
-    'viewportOverlay.bottomRight'
-  );
+  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 instanceNumber = useMemo(
    () =>
@@ -182,8 +262,8 @@ function CustomizableViewportOverlay({
        return null;
      }

-      const { inheritsFrom } = item;
-      const OverlayItemComponent = OverlayItemComponents[inheritsFrom];
+      const { customizationType } = item;
+      const OverlayItemComponent = OverlayItemComponents[customizationType];

      if (OverlayItemComponent) {
        return <OverlayItemComponent {...overlayItemProps} />;
@@ -211,6 +291,10 @@ function CustomizableViewportOverlay({

  const getContent = useCallback(
    (customization, keyPrefix) => {
+      if (!customization?.items) {
+        return null;
+      }
+      const { items } = customization;
      const props = {
        ...displaySetProps,
        formatters: { formatDate: formatDICOMDate },
@@ -223,7 +307,7 @@ function CustomizableViewportOverlay({

      return (
        <>
-          {customization.map((item, index) => (
+          {items.map((item, index) => (
            <div key={`${keyPrefix}_${index}`}>
              {((!item?.condition || item.condition(props)) && _renderOverlayItem(item, props)) ||
                null}
@@ -447,4 +531,4 @@ CustomizableViewportOverlay.propTypes = {

 export default CustomizableViewportOverlay;

-export { CustomizableViewportOverlay };
+export { CustomizableViewportOverlay, CornerstoneOverlay };
@@ -44,17 +44,13 @@ function CornerstoneImageScrollbar({
      return;
    }

-    try {
-      const imageIndex = viewport.getCurrentImageIdIndex();
-      const numberOfSlices = viewport.getNumberOfSlices();
+    const imageIndex = viewport.getCurrentImageIdIndex();
+    const numberOfSlices = viewport.getNumberOfSlices();

-      setImageSliceData({
-        imageIndex: imageIndex,
-        numberOfSlices,
-      });
-    } catch (error) {
-      console.warn(error);
-    }
+    setImageSliceData({
+      imageIndex: imageIndex,
+      numberOfSlices,
+    });
  }, [viewportId, viewportData]);

  useEffect(() => {
@@ -52,6 +52,31 @@ export function formatDICOMTime(time, strFormat = 'HH:mm:ss') {
  return moment(time, 'HH:mm:ss').format(strFormat);
 }

+/**
+ * Formats a patient name for display purposes
+ *
+ * @param {string} name
+ * @returns {string} formatted name.
+ */
+export function formatPN(name) {
+  if (!name) {
+    return '';
+  }
+  if (typeof name === 'object') {
+    name = name.Alphabetic;
+    if (!name) {
+      return '';
+    }
+  }
+
+  const cleaned = name
+    .split('^')
+    .filter(s => !!s)
+    .join(', ')
+    .trim();
+  return cleaned === ',' || cleaned === '' ? '' : cleaned;
+}
+
 /**
 * Gets compression type
 *
@@ -11,27 +11,25 @@ import {
  Enums,
  utilities as cstUtils,
  ReferenceLinesTool,
-  annotation,
 } from '@cornerstonejs/tools';
-import * as cornerstoneTools from '@cornerstonejs/tools';

-import { Types as OhifTypes, utils } from '@ohif/core';
-import i18n from '@ohif/i18n';
+import { Types as OhifTypes } from '@ohif/core';
 import {
-  callInputDialogAutoComplete,
+  callLabelAutocompleteDialog,
+  showLabelAnnotationPopup,
  createReportAsync,
-  colorPickerDialog,
  callInputDialog,
+  colorPickerDialog,
 } from '@ohif/extension-default';
 import { vec3, mat4 } from 'gl-matrix';
+
+import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import toggleVOISliceSync from './utils/toggleVOISliceSync';
 import { usePositionPresentationStore, useSegmentationPresentationStore } from './stores';
-import { toolNames } from './initCornerstoneTools';
-import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
-const { DefaultHistoryMemo } = csUtils.HistoryMemo;
+
 const toggleSyncFunctions = {
  imageSlice: toggleImageSliceSync,
  voi: toggleVOISliceSync,
@@ -122,11 +120,7 @@ function commandsModule({
        type,
      });
    },
-    updateStoredPositionPresentation: ({
-      viewportId,
-      displaySetInstanceUID,
-      referencedImageId,
-    }) => {
+    updateStoredPositionPresentation: ({ viewportId, displaySetInstanceUID }) => {
      const presentations = cornerstoneViewportService.getPresentations(viewportId);
      const { positionPresentationStore, setPositionPresentation, getPositionPresentationId } =
        usePositionPresentationStore.getState();
@@ -138,16 +132,11 @@ function commandsModule({
      )?.[0];

      if (previousReferencedDisplaySetStoreKey) {
-        const presentationData = referencedImageId
-          ? {
-              ...presentations.positionPresentation,
-              viewReference: {
-                referencedImageId,
-              },
-            }
-          : presentations.positionPresentation;
+        setPositionPresentation(
+          previousReferencedDisplaySetStoreKey,
+          presentations.positionPresentation
+        );

-        setPositionPresentation(previousReferencedDisplaySetStoreKey, presentationData);
        return;
      }

@@ -197,56 +186,26 @@ function commandsModule({
        measurementServiceSource.remove(uid);
      }
    },
-    /**
-     * Common logic for handling measurement label updates through dialog
-     * @param uid - measurement uid
-     * @returns Promise that resolves when the label is updated
-     */
-    _handleMeasurementLabelDialog: async uid => {
-      const labelConfig = customizationService.getCustomization('measurementLabels');
-      const renderContent = customizationService.getCustomization('ui.labellingComponent');
-      const measurement = measurementService.getMeasurement(uid);
-
-      if (!measurement) {
-        console.debug('No measurement found for label editing');
-        return;
-      }
-
-      if (!labelConfig) {
-        const label = await callInputDialog({
-          uiDialogService,
-          title: 'Edit Measurement Label',
-          placeholder: measurement.label || 'Enter new label',
-          defaultValue: measurement.label,
-        });
-
-        if (label !== undefined && label !== null) {
-          measurementService.update(uid, { ...measurement, label }, true);
-        }
-        return;
-      }
-
-      const val = await callInputDialogAutoComplete({
-        measurement,
-        uiDialogService,
-        labelConfig,
-        renderContent,
-      });
-
-      if (val !== undefined && val !== null) {
-        measurementService.update(uid, { ...val }, true);
-      }
-    },
    /**
     * Show the measurement labelling input dialog and update the label
     * on the measurement with a response if not cancelled.
     */
-    setMeasurementLabel: async ({ uid }) => {
-      await actions._handleMeasurementLabelDialog(uid);
-    },
-    renameMeasurement: async ({ uid }) => {
-      await actions._handleMeasurementLabelDialog(uid);
+    setMeasurementLabel: ({ uid }) => {
+      const labelConfig = customizationService.get('measurementLabels');
+      const measurement = measurementService.getMeasurement(uid);
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
+        (val: Map<any, any>) => {
+          measurementService.update(
+            uid,
+            {
+              ...val,
+            },
+            true
+          );
+        }
+      );
    },
+
    /**
     *
     * @param props - containing the updates to apply
@@ -258,8 +217,6 @@ function commandsModule({
     *       * CodingSchemeDesignator - the issue of the code value
     *       * CodeMeaning - the text value shown to the user
     *       * ref - a string reference in the form `<designator>:<codeValue>`
-     *       * type - defaulting to 'finding'.  Will replace other codes of same type
-     *       * style - a styling object to use
     *       * Other fields
     *     Note it is a valid option to remove the finding or site values by
     *     supplying null for the code.
@@ -275,12 +232,7 @@ function commandsModule({
     */
    updateMeasurement: props => {
      const { code, uid, textLabel, label } = props;
-      let { style } = props;
      const measurement = measurementService.getMeasurement(uid);
-      if (!measurement) {
-        console.warn('No measurement found to update', uid);
-        return;
-      }
      const updatedMeasurement = {
        ...measurement,
      };
@@ -299,6 +251,7 @@ function commandsModule({
          code.CodingSchemeDesignator = code.ref.substring(0, split);
        }
        updatedMeasurement[measurementKey] = code;
+        // TODO - remove this line once the measurements table customizations are in
        if (measurementKey !== 'finding') {
          if (updatedMeasurement.findingSites) {
            updatedMeasurement.findingSites = updatedMeasurement.findingSites.filter(
@@ -310,69 +263,9 @@ function commandsModule({
          }
        }
      }
-
-      style ||= updatedMeasurement.finding?.style;
-      style ||= updatedMeasurement.findingSites?.find(site => site?.style)?.style;
-
-      if (style) {
-        // Reset the selected values to preserve appearance on selection
-        style.lineDashSelected ||= style.lineDash;
-        annotation.config.style.setAnnotationStyles(measurement.uid, style);
-
-        // this is a bit ugly, but given the underlying behavior, this is how it needs to work.
-        switch (measurement.toolName) {
-          case toolNames.PlanarFreehandROI: {
-            const targetAnnotation = annotation.state.getAnnotation(measurement.uid);
-            targetAnnotation.data.isOpenUShapeContour = !!style.isOpenUShapeContour;
-            break;
-          }
-          default:
-            break;
-        }
-      }
      measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
    },

-    /**
-     * Jumps to the specified (by uid) measurement in the active viewport.
-     * Also marks any provided display measurements isActive value
-     */
-    jumpToMeasurement: ({ uid, displayMeasurements = [] }) => {
-      measurementService.jumpToMeasurement(viewportGridService.getActiveViewportId(), uid);
-      for (const measurement of displayMeasurements) {
-        measurement.isActive = measurement.uid === uid;
-      }
-    },
-
-    removeMeasurement: ({ uid }) => {
-      measurementService.remove(uid);
-    },
-
-    toggleLockMeasurement: ({ uid }) => {
-      measurementService.toggleLockMeasurement(uid);
-    },
-
-    toggleVisibilityMeasurement: ({ uid }) => {
-      measurementService.toggleVisibilityMeasurement(uid);
-    },
-
-    /**
-     * Clear the measurements
-     */
-    clearMeasurements: options => {
-      const { measurementFilter } = options;
-      measurementService.clearMeasurements(
-        measurementFilter ? measurementFilter.bind(options) : null
-      );
-    },
-
-    /**
-     * Download the CSV report for the measurements.
-     */
-    downloadCSVMeasurementsReport: ({ measurementFilter }) => {
-      utils.downloadCSVReport(measurementService.getMeasurements(measurementFilter));
-    },
-
    // Retrieve value commands
    getActiveViewportEnabledElement: _getActiveViewportEnabledElement,

@@ -385,15 +278,9 @@ function commandsModule({

      viewportGridService.setActiveViewportId(viewportId);
    },
-    arrowTextCallback: ({ callback }) => {
-      const labelConfig = customizationService.getCustomization('measurementLabels');
-      const renderContent = customizationService.getCustomization('ui.labellingComponent');
-
-      callInputDialogAutoComplete({
-        uiDialogService,
-        labelConfig,
-        renderContent,
-      });
+    arrowTextCallback: ({ callback, data, uid }) => {
+      const labelConfig = customizationService.get('measurementLabels');
+      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig);
    },
    toggleCine: () => {
      const { viewports } = viewportGridService.getState();
@@ -442,37 +329,6 @@ function commandsModule({

      actions.setViewportWindowLevel({ ...props, viewportId });
    },
-    setWindowLevelPreset: ({ presetName, presetIndex }) => {
-      const windowLevelPresets = customizationService.getCustomization(
-        'cornerstone.windowLevelPresets'
-      );
-
-      const activeViewport = viewportGridService.getActiveViewportId();
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(activeViewport);
-      const metadata = viewport.getImageData().metadata;
-
-      const modality = metadata.Modality;
-
-      if (!modality) {
-        return;
-      }
-
-      const windowLevelPresetForModality = windowLevelPresets[modality];
-
-      if (!windowLevelPresetForModality) {
-        return;
-      }
-
-      const windowLevelPreset =
-        windowLevelPresetForModality[presetName] ??
-        Object.values(windowLevelPresetForModality)[presetIndex];
-
-      actions.setViewportWindowLevel({
-        viewportId: activeViewport,
-        window: windowLevelPreset.window,
-        level: windowLevelPreset.level,
-      });
-    },
    setToolEnabled: ({ toolName, toggle, toolGroupId }) => {
      const { viewports } = viewportGridService.getState();

@@ -583,7 +439,6 @@ function commandsModule({
        ],
      });
    },
-    // capture viewport
    showDownloadViewportModal: () => {
      const { activeViewportId } = viewportGridService.getState();

@@ -605,9 +460,10 @@ function commandsModule({
          title: 'Download High Quality Image',
          contentProps: {
            activeViewportId,
+            onClose: uiModalService.hide,
            cornerstoneViewportService,
          },
-          containerClassName: 'max-w-4xl p-4',
+          containerDimensions: 'w-[70%] max-w-[900px]',
        });
      }
    },
@@ -630,7 +486,7 @@ function commandsModule({
      } else if (viewport.getRotation !== undefined) {
        const presentation = viewport.getViewPresentation();
        const { rotation: currentRotation } = presentation;
-        const newRotation = (currentRotation + rotation + 360) % 360;
+        const newRotation = (currentRotation + rotation) % 360;
        viewport.setViewPresentation({ rotation: newRotation });
        viewport.render();
      }
@@ -799,12 +655,7 @@ function commandsModule({
          displaySetInstanceUID = viewports.get(viewportId)?.displaySetInstanceUIDs[0];
        }

-        // 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();
+        const volumeId = viewport.getVolumeId();
        viewport.setProperties({ colormap }, volumeId);
      }

@@ -1051,7 +902,7 @@ function commandsModule({
          segments: options.createInitialSegment
            ? {
                1: {
-                  label: `${i18n.t('Segment')} 1`,
+                  label: 'Segment 1',
                  active: true,
                },
              }
@@ -1153,12 +1004,14 @@ function commandsModule({
     */
    storeSegmentationCommand: async ({ segmentationId }) => {
      const { segmentationService, viewportGridService } = servicesManager.services;
+      const datasources = extensionManager.getActiveDataSource();

      const displaySetInstanceUIDs = await createReportAsync({
        servicesManager,
        getReport: () =>
          commandsManager.runCommand('storeSegmentation', {
            segmentationId,
+            dataSource: datasources[0],
          }),
        reportType: 'Segmentation',
      });
@@ -1284,7 +1137,7 @@ function commandsModule({
      segmentationService.setStyle({ type }, { fillAlphaInactive: value });
    },

-    editSegmentLabel: async ({ segmentationId, segmentIndex }) => {
+    editSegmentLabel: ({ segmentationId, segmentIndex }) => {
      const { segmentationService, uiDialogService } = servicesManager.services;
      const segmentation = segmentationService.getSegmentation(segmentationId);

@@ -1293,14 +1146,19 @@ function commandsModule({
      }

      const segment = segmentation.segments[segmentIndex];
+      const { label } = segment;
+
+      const callback = (label, actionId) => {
+        if (label === '') {
+          return;
+        }

-      callInputDialog({
-        uiDialogService,
-        title: 'Edit Segment Label',
-        placeholder: 'Enter new label',
-        defaultValue: segment.label,
-      }).then(label => {
        segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
+      };
+
+      callInputDialog(uiDialogService, label, callback, false, {
+        dialogTitle: 'Edit Segment Label',
+        inputLabel: 'Enter new label',
      });
    },

@@ -1314,13 +1172,17 @@ function commandsModule({

      const { label } = segmentation;

-      callInputDialog({
-        uiDialogService,
-        title: 'Edit Segmentation Label',
-        placeholder: 'Enter new label',
-        defaultValue: label,
-      }).then(label => {
+      const callback = (label, actionId) => {
+        if (label === '') {
+          return;
+        }
+
        segmentationService.addOrUpdateSegmentation({ segmentationId, label });
+      };
+
+      callInputDialog(uiDialogService, label, callback, false, {
+        dialogTitle: 'Edit Segmentation Label',
+        inputLabel: 'Enter new label',
      });
    },

@@ -1337,16 +1199,13 @@ function commandsModule({
        a: color[3] / 255.0,
      };

-      uiDialogService.show({
-        content: colorPickerDialog,
-        title: 'Segment Color',
-        contentProps: {
-          value: rgbaColor,
-          onSave: newRgbaColor => {
-            const color = [newRgbaColor.r, newRgbaColor.g, newRgbaColor.b, newRgbaColor.a * 255.0];
-            segmentationService.setSegmentColor(viewportId, segmentationId, segmentIndex, color);
-          },
-        },
+      colorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
+        if (actionId === 'cancel') {
+          return;
+        }
+
+        const color = [newRgbaColor.r, newRgbaColor.g, newRgbaColor.b, newRgbaColor.a * 255.0];
+        segmentationService.setSegmentColor(viewportId, segmentationId, segmentIndex, color);
      });
    },

@@ -1356,18 +1215,6 @@ function commandsModule({
        viewportGridService.getActiveViewportId()
      );
    },
-    deleteActiveAnnotation: () => {
-      const activeAnnotationsUID = cornerstoneTools.annotation.selection.getAnnotationsSelected();
-      activeAnnotationsUID.forEach(activeAnnotationUID => {
-        measurementService.remove(activeAnnotationUID);
-      });
-    },
-    undo: () => {
-      DefaultHistoryMemo.undo();
-    },
-    redo: () => {
-      DefaultHistoryMemo.redo();
-    },
  };

  const definitions = {
@@ -1402,39 +1249,15 @@ function commandsModule({
    setMeasurementLabel: {
      commandFn: actions.setMeasurementLabel,
    },
-    renameMeasurement: {
-      commandFn: actions.renameMeasurement,
-    },
    updateMeasurement: {
      commandFn: actions.updateMeasurement,
    },
-    clearMeasurements: {
-      commandFn: actions.clearMeasurements,
-    },
-    jumpToMeasurement: {
-      commandFn: actions.jumpToMeasurement,
-    },
-    removeMeasurement: {
-      commandFn: actions.removeMeasurement,
-    },
-    toggleLockMeasurement: {
-      commandFn: actions.toggleLockMeasurement,
-    },
-    toggleVisibilityMeasurement: {
-      commandFn: actions.toggleVisibilityMeasurement,
-    },
-    downloadCSVMeasurementsReport: {
-      commandFn: actions.downloadCSVMeasurementsReport,
-    },
    setViewportWindowLevel: {
      commandFn: actions.setViewportWindowLevel,
    },
    setWindowLevel: {
      commandFn: actions.setWindowLevel,
    },
-    setWindowLevelPreset: {
-      commandFn: actions.setWindowLevelPreset,
-    },
    setToolActive: {
      commandFn: actions.setToolActive,
    },
@@ -1631,11 +1454,6 @@ function commandsModule({
    getRenderInactiveSegmentations: {
      commandFn: actions.getRenderInactiveSegmentations,
    },
-    deleteActiveAnnotation: {
-      commandFn: actions.deleteActiveAnnotation,
-    },
-    undo: actions.undo,
-    redo: actions.redo,
  };

  return {
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { useViewportGrid } from '@ohif/ui-next';
+import { useViewportGrid } from '@ohif/ui';
 import ViewportWindowLevel from '../ViewportWindowLevel/ViewportWindowLevel';

 const ActiveViewportWindowLevel = ({ servicesManager }: withAppTypes): ReactElement => {
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { useCine } from '@ohif/ui';
+import { CinePlayer, 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 numDimensionGroups = dynamicVolumeInfo.timePoints.length;
+        const numTimePoints = dynamicVolumeInfo.timePoints.length;
        const label = dynamicVolumeInfo.splittingTag;
-        const dimensionGroupNumber = dynamicVolumeInfo.dimensionGroupNumber || 1;
+        const timePointIndex = dynamicVolumeInfo.timePointIndex || 0;
        setDynamicInfo({
          volumeId: displaySet.displaySetInstanceUID,
-          dimensionGroupNumber,
-          numDimensionGroups,
+          timePointIndex,
+          numTimePoints,
          label,
        });
      } else {
@@ -160,7 +160,8 @@ function RenderCinePlayer({
  dynamicInfo: dynamicInfoProp,
  customizationService,
 }) {
-  const CinePlayerComponent = customizationService.getCustomization('cinePlayer');
+  const { component: CinePlayerComponent = CinePlayer } =
+    customizationService.get('cinePlayer') ?? {};

  const [dynamicInfo, setDynamicInfo] = useState(dynamicInfoProp);

@@ -176,20 +177,20 @@ function RenderCinePlayer({
      return;
    }

-    const handleDimensionGroupChange = evt => {
-      const { volumeId, dimensionGroupNumber, numDimensionGroups, splittingTag } = evt.detail;
-      setDynamicInfo({ volumeId, dimensionGroupNumber, numDimensionGroups, label: splittingTag });
+    const handleTimePointIndexChange = evt => {
+      const { volumeId, timePointIndex, numTimePoints, splittingTag } = evt.detail;
+      setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
    };

    eventTarget.addEventListener(
-      Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED,
-      handleDimensionGroupChange
+      Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
+      handleTimePointIndexChange
    );

    return () => {
      eventTarget.removeEventListener(
-        Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED,
-        handleDimensionGroupChange
+        Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
+        handleTimePointIndexChange
      );
    };
  }, [dynamicInfo]);
@@ -199,17 +200,17 @@ function RenderCinePlayer({
      return;
    }

-    const { volumeId, dimensionGroupNumber, numDimensionGroups, splittingTag } = dynamicInfo || {};
+    const { volumeId, timePointIndex, numTimePoints, splittingTag } = dynamicInfo || {};
    const volume = cache.getVolume(volumeId, true);
-    volume.dimensionGroupNumber = dimensionGroupNumber;
+    volume.timePointIndex = timePointIndex;

-    setDynamicInfo({ volumeId, dimensionGroupNumber, numDimensionGroups, label: splittingTag });
+    setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
  }, []);

  const updateDynamicInfo = useCallback(props => {
-    const { volumeId, dimensionGroupNumber } = props;
+    const { volumeId, timePointIndex } = props;
    const volume = cache.getVolume(volumeId, true);
-    volume.dimensionGroupNumber = dimensionGroupNumber;
+    volume.timePointIndex = timePointIndex;
  }, []);

  return (
@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { useSystem } from '@ohif/core';
-import { Button } from '@ohif/ui';
-import { Icons } from '@ohif/ui-next';
+import { Button, Icon, ProgressLoadingBar } from '@ohif/ui';
 import DicomFileUploader, {
  EVENTS,
  UploadStatus,
@@ -41,11 +39,6 @@ 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)
  );
@@ -320,10 +313,10 @@ function DicomUploadProgress({
      <div className="ml-auto flex w-6 justify-center">
        {numFails > 0 && (
          <div onClick={() => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)}>
-            <Icons.ByName
+            <Icon
              className="cursor-pointer"
              name="icon-status-alert"
-            ></Icons.ByName>
+            ></Icon>
          </div>
        )}
      </div>
@@ -6,7 +6,7 @@ import DicomFileUploader, {
  UploadRejection,
  UploadStatus,
 } from '../../utils/DicomFileUploader';
-import { Icons } from '@ohif/ui-next';
+import { Icon } from '@ohif/ui';

 type DicomUploadProgressItemProps = {
  dicomFileUploader: DicomFileUploader;
@@ -54,17 +54,17 @@ const DicomUploadProgressItem = memo(
      switch (dicomFileUploader.getStatus()) {
        case UploadStatus.Success:
          return (
-            <Icons.ByName
+            <Icon
              name="status-tracked"
              className="text-primary-light"
-            />
+            ></Icon>
          );
        case UploadStatus.InProgress:
-          return <Icons.ByName name="icon-transferring" />;
+          return <Icon name="icon-transferring"></Icon>;
        case UploadStatus.Failed:
-          return <Icons.ByName name="icon-alert-small" />;
+          return <Icon name="icon-alert-small"></Icon>;
        case UploadStatus.Cancelled:
-          return <Icons.ByName name="icon-alert-outline" />;
+          return <Icon name="icon-alert-outline"></Icon>;
        default:
          return <></>;
      }
@@ -88,8 +88,9 @@ const DicomUploadProgressItem = memo(
                <div className="w-10 text-right">{percentComplete}%</div>
              )}
              <div className="ml-auto flex cursor-pointer">
-                <Icons.Close
+                <Icon
                  className="text-primary-active self-center"
+                  name="close"
                  onClick={cancelUpload}
                />
              </div>
@@ -1,16 +1,14 @@
 import React from 'react';
 import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { useSystem } from '@ohif/core';
+import { ViewportActionCorners } from '@ohif/ui';

 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;
  }
@@ -1,25 +0,0 @@
-import React from 'react';
-import { DicomMetadataStore, utils } from '@ohif/core';
-import { StudySummary } from '@ohif/ui-next';
-
-const { formatDate } = utils;
-
-export function StudySummaryFromMetadata({ StudyInstanceUID }) {
-  if (!StudyInstanceUID) {
-    return null;
-  }
-  const studyMeta = DicomMetadataStore.getStudy(StudyInstanceUID);
-  if (!studyMeta?.series?.length) {
-    return null;
-  }
-
-  const instanceMeta = studyMeta.series[0].instances[0];
-  const { StudyDate, StudyDescription } = instanceMeta;
-
-  return (
-    <StudySummary
-      date={formatDate(StudyDate)}
-      description={StudyDescription}
-    ></StudySummary>
-  );
-}
@@ -110,7 +110,7 @@ function ViewportSegmentationMenu({
          <Separator className="bg-input mb-3" />
          <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
          <ul className="space-y-1">
-            {availableSegmentations.map(({ segmentationId, label }) => (
+            {availableSegmentations.map(({segmentationId, label}) => (
              <li
                key={segmentationId}
                className="flex items-center text-sm"
@@ -5,7 +5,6 @@ export function VolumeLighting({
  servicesManager,
  commandsManager,
  viewportId,
-  hasShade,
 }: VolumeLightingProps): ReactElement {
  const { cornerstoneViewportService } = servicesManager.services;
  const [ambient, setAmbient] = useState(null);
@@ -39,15 +38,11 @@ export function VolumeLighting({
    setDiffuse(diffuse);
    setSpecular(specular);
  }, [viewportId, cornerstoneViewportService]);
-  const disableOption = hasShade ? '' : 'ohif-disabled !opacity-40';
-  const disableSlider = !hasShade;
  return (
    <>
-      <div
-        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
-      >
+      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
        <label
-          className="block text-white"
+          className="block  text-white"
          htmlFor="ambient"
        >
          Ambient
@@ -61,7 +56,6 @@ export function VolumeLighting({
              onAmbientChange();
            }}
            id="ambient"
-            disabled={disableSlider}
            max={1}
            min={0}
            type="range"
@@ -74,11 +68,9 @@ export function VolumeLighting({
          />
        )}
      </div>
-      <div
-        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
-      >
+      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
        <label
-          className="block text-white"
+          className="block  text-white"
          htmlFor="diffuse"
        >
          Diffuse
@@ -91,7 +83,6 @@ export function VolumeLighting({
              setDiffuse(e.target.value);
              onDiffuseChange();
            }}
-            disabled={disableSlider}
            id="diffuse"
            max={1}
            min={0}
@@ -106,11 +97,9 @@ export function VolumeLighting({
        )}
      </div>

-      <div
-        className={`all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`}
-      >
+      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
        <label
-          className="block text-white"
+          className="block  text-white"
          htmlFor="specular"
        >
          Specular
@@ -119,7 +108,6 @@ export function VolumeLighting({
          <input
            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
            value={specular}
-            disabled={disableSlider}
            onChange={e => {
              setSpecular(e.target.value);
              onSpecularChange();
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement } from 'react';
 import { AllInOneMenu } from '@ohif/ui';
 import { VolumeRenderingOptionsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingQuality } from './VolumeRenderingQuality';
@@ -11,7 +11,6 @@ export function VolumeRenderingOptions({
  volumeRenderingQualityRange,
  servicesManager,
 }: VolumeRenderingOptionsProps): ReactElement {
-  const [hasShade, setShade] = useState(false);
  return (
    <AllInOneMenu.ItemPanel>
      <VolumeRenderingQuality
@@ -35,14 +34,12 @@ export function VolumeRenderingOptions({
          commandsManager={commandsManager}
          servicesManager={servicesManager}
          viewportId={viewportId}
-          onClickShade={setShade}
        />
      </div>
      <VolumeLighting
        viewportId={viewportId}
        commandsManager={commandsManager}
        servicesManager={servicesManager}
-        hasShade={hasShade}
      />
    </AllInOneMenu.ItemPanel>
  );
@@ -1,5 +1,4 @@
-import { AllInOneMenu } from '@ohif/ui';
-import { Icons } from '@ohif/ui-next';
+import { AllInOneMenu, Icon } from '@ohif/ui';
 import React, { ReactElement } from 'react';
 import { VolumeRenderingPresetsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingPresetsContent } from './VolumeRenderingPresetsContent';
@@ -10,27 +9,29 @@ export function VolumeRenderingPresets({
  commandsManager,
  volumeRenderingPresets,
 }: VolumeRenderingPresetsProps): ReactElement {
-  const { uiDialogService } = servicesManager.services;
+  const { uiModalService } = servicesManager.services;

  const onClickPresets = () => {
-    uiDialogService.show({
-      id: 'volume-rendering-presets',
+    uiModalService.show({
      content: VolumeRenderingPresetsContent,
      title: 'Rendering Presets',
-      isDraggable: true,
+      movable: true,
      contentProps: {
+        onClose: uiModalService.hide,
        presets: volumeRenderingPresets,
        viewportId,
        commandsManager,
      },
+      containerDimensions: 'h-[543px] w-[460px]',
+      contentDimensions: 'h-[493px] w-[460px]  pl-[12px] pr-[12px]',
    });
  };

  return (
    <AllInOneMenu.Item
      label="Rendering Presets"
-      icon={<Icons.VolumeRendering />}
-      rightIcon={<Icons.ByName name="action-new-dialog" />}
+      icon={<Icon name="VolumeRendering" />}
+      rightIcon={<Icon name="action-new-dialog" />}
      onClick={onClickPresets}
    />
  );
@@ -1,24 +1,29 @@
-import { Icons, FooterAction } from '@ohif/ui-next';
+import { Icon } from '@ohif/ui';
+import { ButtonEnums } from '@ohif/ui';
 import React, { ReactElement, useState, useCallback } from 'react';
-import { PresetDialog } from '@ohif/ui-next';
+import { Button, InputFilterText } from '@ohif/ui';
 import { ViewportPreset, VolumeRenderingPresetsContentProps } from '../../types/ViewportPresets';

-interface Props extends VolumeRenderingPresetsContentProps {
-  hide: () => void;
-}
-
 export function VolumeRenderingPresetsContent({
  presets,
  viewportId,
  commandsManager,
-  hide,
-}: Props): ReactElement {
+  onClose,
+}: VolumeRenderingPresetsContentProps): ReactElement {
+  const [filteredPresets, setFilteredPresets] = useState(presets);
  const [searchValue, setSearchValue] = useState('');
  const [selectedPreset, setSelectedPreset] = useState<ViewportPreset | null>(null);

-  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(event.target.value);
-  }, []);
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      const filtered = value
+        ? presets.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase()))
+        : presets;
+      setFilteredPresets(filtered);
+    },
+    [presets]
+  );

  const handleApply = useCallback(
    props => {
@@ -29,54 +34,62 @@ export function VolumeRenderingPresetsContent({
    [commandsManager]
  );

-  const filteredPresets = searchValue
-    ? presets.filter(preset => preset.name.toLowerCase().includes(searchValue.toLowerCase()))
-    : presets;
-
  const formatLabel = (label: string, maxChars: number) => {
    return label.length > maxChars ? `${label.slice(0, maxChars)}...` : label;
  };

  return (
-    <PresetDialog className="h-[500px]">
-      <PresetDialog.PresetBody>
-        <PresetDialog.PresetFilter>
-          <PresetDialog.PresetSearch
-            value={searchValue}
-            onChange={handleSearchChange}
-            placeholder="Search all"
-          />
-        </PresetDialog.PresetFilter>
-        <PresetDialog.PresetGrid>
-          {filteredPresets.map((preset, index) => (
-            <div
-              key={index}
-              className="flex cursor-pointer flex-col items-start"
-              onClick={() => {
-                setSelectedPreset(preset);
-                handleApply({ preset: preset.name, viewportId });
-              }}
-            >
-              <Icons.ByName
-                name={preset.name}
-                className={
-                  selectedPreset?.name === preset.name
-                    ? 'border-highlight h-[75px] w-[95px] max-w-none rounded border-2'
-                    : 'hover:border-highlight h-[75px] w-[95px] max-w-none rounded border-2 border-black'
-                }
-              />
-              <label className="text-muted-foreground mt-1 text-left text-xs">
-                {formatLabel(preset.name, 11)}
-              </label>
-            </div>
-          ))}
-        </PresetDialog.PresetGrid>
-      </PresetDialog.PresetBody>
-      <FooterAction className="mt-4 flex-shrink-0">
-        <FooterAction.Right>
-          <FooterAction.Secondary onClick={hide}>Cancel</FooterAction.Secondary>
-        </FooterAction.Right>
-      </FooterAction>
-    </PresetDialog>
+    <div className="flex min-h-full w-full flex-col justify-between">
+      <div className="border-secondary-light h-[433px] w-full overflow-hidden rounded border bg-black px-2.5">
+        <div className="flex h-[46px] w-full items-center justify-start">
+          <div className="h-[26px] w-[200px]">
+            <InputFilterText
+              value={searchValue}
+              onDebounceChange={handleSearchChange}
+              placeholder={'Search all'}
+            />
+          </div>
+        </div>
+        <div className="ohif-scrollbar overflow h-[385px] w-full overflow-y-auto">
+          <div className="grid grid-cols-4 gap-3 pt-2 pr-3">
+            {filteredPresets.map((preset, index) => (
+              <div
+                key={index}
+                className="flex cursor-pointer flex-col items-start"
+                onClick={() => {
+                  setSelectedPreset(preset);
+                  handleApply({ preset: preset.name, viewportId });
+                }}
+              >
+                <Icon
+                  name={preset.name}
+                  className={
+                    selectedPreset?.name === preset.name
+                      ? 'border-primary-light h-[75px] w-[95px] max-w-none rounded border-2'
+                      : 'hover:border-primary-light h-[75px] w-[95px] max-w-none rounded border-2 border-black'
+                  }
+                />
+                <label className="text-aqua-pale mt-2 text-left text-xs">
+                  {formatLabel(preset.name, 11)}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <footer className="flex h-[60px] w-full items-center justify-end">
+        <div className="flex">
+          <Button
+            name="Cancel"
+            size={ButtonEnums.size.medium}
+            type={ButtonEnums.type.secondary}
+            onClick={onClose}
+          >
+            {' '}
+            Cancel{' '}
+          </Button>
+        </div>
+      </footer>
+    </div>
  );
 }
@@ -6,7 +6,6 @@ export function VolumeShade({
  commandsManager,
  viewportId,
  servicesManager,
-  onClickShade = bool => {},
 }: VolumeShadeProps): ReactElement {
  const { cornerstoneViewportService } = servicesManager.services;
  const [shade, setShade] = useState(true);
@@ -23,7 +22,6 @@ export function VolumeShade({
    const { actor } = viewport.getActors()[0];
    const shade = actor.getProperty().getShade();
    setShade(shade);
-    onClickShade(shade);
    setKey(key + 1);
  }, [viewportId, cornerstoneViewportService]);

@@ -34,7 +32,6 @@ export function VolumeShade({
      checked={shade}
      onChange={() => {
        setShade(!shade);
-        onClickShade(!shade);
        onShadeChange(!shade);
      }}
    />
@@ -1,8 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { AllInOneMenu } from '@ohif/ui';
-import { useViewportGrid } from '@ohif/ui-next';
+import { AllInOneMenu, useViewportGrid } from '@ohif/ui';
 import { Colormap } from './Colormap';
 import { Colorbar } from './Colorbar';
 import { setViewportColorbar } from './Colorbar';
@@ -51,7 +50,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');
@@ -2,21 +2,21 @@
 // configured via the customization service.
 const defaultWindowLevelPresets = {
  CT: [
-    { 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' },
+    { 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' },
  ],

  PT: [
-    { 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' },
+    { 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' },
  ],
 };

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { nonWLModalities } from './WindowLevelActionMenu';
+import { nonWLModalities, WindowLevelActionMenu } from './WindowLevelActionMenu';

 export function getWindowLevelActionMenu({
  viewportId,
@@ -16,13 +16,12 @@ export function getWindowLevelActionMenu({
 }>): ReactNode {
  const { customizationService } = servicesManager.services;

-  const presets = customizationService.getCustomization('cornerstone.windowLevelPresets');
-  const colorbarProperties = customizationService.getCustomization('cornerstone.colorbar');
-  const { volumeRenderingPresets, volumeRenderingQualityRange } =
-    customizationService.getCustomization('cornerstone.3dVolumeRendering');
-  const WindowLevelActionMenu = customizationService.getCustomization(
-    'viewportActionMenu.windowLevelActionMenu'
+  const { presets } = customizationService.get('cornerstone.windowLevelPresets');
+  const colorbarProperties = customizationService.get('cornerstone.colorbar');
+  const { volumeRenderingPresets, volumeRenderingQualityRange } = customizationService.get(
+    'cornerstone.3dVolumeRendering'
  );
+
  const displaySetPresets = displaySets
    .filter(displaySet => presets[displaySet.Modality])
    .map(displaySet => {
@@ -37,10 +36,8 @@ export function getWindowLevelActionMenu({
    return null;
  }

-  const WindowLevelActionMenuComponent = WindowLevelActionMenu?.component;
-
  return (
-    <WindowLevelActionMenuComponent
+    <WindowLevelActionMenu
      viewportId={viewportId}
      element={element}
      presets={displaySetPresets}
@@ -1,152 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ImageModal, FooterAction } from '@ohif/ui-next';
-
-const MAX_TEXTURE_SIZE = 10000;
-const DEFAULT_FILENAME = 'image';
-
-interface ViewportDownloadFormNewProps {
-  onClose: () => void;
-  defaultSize: number;
-  fileTypeOptions: Array<{ value: string; label: string }>;
-  viewportId: string;
-  showAnnotations: boolean;
-  onAnnotationsChange: (show: boolean) => void;
-  dimensions: { width: number; height: number };
-  onDimensionsChange: (dimensions: { width: number; height: number }) => void;
-  onEnableViewport: (element: HTMLElement) => void;
-  onDisableViewport: () => void;
-  onDownload: (filename: string, fileType: string) => void;
-  warningState: { enabled: boolean; value: string };
-}
-
-function ViewportDownloadFormNew({
-  onClose,
-  defaultSize,
-  fileTypeOptions,
-  viewportId,
-  showAnnotations,
-  onAnnotationsChange,
-  dimensions,
-  warningState,
-  onDimensionsChange,
-  onEnableViewport,
-  onDisableViewport,
-  onDownload,
-}: ViewportDownloadFormNewProps) {
-  const [viewportElement, setViewportElement] = useState<HTMLElement | null>(null);
-  const [showWarningMessage, setShowWarningMessage] = useState(true);
-  const [filename, setFilename] = useState(DEFAULT_FILENAME);
-  const [fileType, setFileType] = useState('jpg');
-
-  useEffect(() => {
-    if (!viewportElement) {
-      return;
-    }
-
-    onEnableViewport(viewportElement);
-
-    return () => {
-      onDisableViewport();
-    };
-  }, [onDisableViewport, onEnableViewport, viewportElement]);
-
-  return (
-    <ImageModal>
-      <ImageModal.Body>
-        <ImageModal.ImageVisual>
-          <div
-            style={{
-              height: dimensions.height,
-              width: dimensions.width,
-              position: 'relative',
-            }}
-            data-viewport-uid={viewportId}
-            ref={setViewportElement}
-          >
-            {warningState.enabled && showWarningMessage && (
-              <div
-                className="text-foreground absolute left-1/2 bottom-[5px] z-[1000] -translate-x-1/2 whitespace-nowrap rounded bg-black p-3 text-xs font-bold"
-                style={{
-                  fontSize: '12px',
-                }}
-              >
-                {warningState.value}
-              </div>
-            )}
-          </div>
-        </ImageModal.ImageVisual>
-
-        <ImageModal.ImageOptions>
-          <div className="flex items-end space-x-2">
-            <ImageModal.Filename
-              value={filename}
-              onChange={e => setFilename(e.target.value)}
-            >
-              File name
-            </ImageModal.Filename>
-            <ImageModal.Filetype
-              selected={fileType}
-              onSelect={setFileType}
-              options={fileTypeOptions}
-            />
-          </div>
-
-          <ImageModal.ImageSize
-            width={dimensions.width.toString()}
-            height={dimensions.height.toString()}
-            onWidthChange={e => {
-              onDimensionsChange({
-                ...dimensions,
-                width: parseInt(e.target.value) || defaultSize,
-              });
-            }}
-            onHeightChange={e => {
-              onDimensionsChange({
-                ...dimensions,
-                height: parseInt(e.target.value) || defaultSize,
-              });
-            }}
-            maxWidth={MAX_TEXTURE_SIZE.toString()}
-            maxHeight={MAX_TEXTURE_SIZE.toString()}
-          >
-            Image size <span className="text-muted-foreground">px</span>
-          </ImageModal.ImageSize>
-
-          <ImageModal.SwitchOption
-            defaultChecked={showAnnotations}
-            checked={showAnnotations}
-            onCheckedChange={onAnnotationsChange}
-          >
-            Include annotations
-          </ImageModal.SwitchOption>
-          {warningState.enabled && (
-            <ImageModal.SwitchOption
-              defaultChecked={showWarningMessage}
-              checked={showWarningMessage}
-              onCheckedChange={setShowWarningMessage}
-            >
-              Include warning message
-            </ImageModal.SwitchOption>
-          )}
-          <FooterAction className="mt-2">
-            <FooterAction.Right>
-              <FooterAction.Secondary onClick={onClose}>Cancel</FooterAction.Secondary>
-              <FooterAction.Primary
-                onClick={() => {
-                  onDownload(filename || DEFAULT_FILENAME, fileType);
-                  onClose();
-                }}
-              >
-                Save
-              </FooterAction.Primary>
-            </FooterAction.Right>
-          </FooterAction>
-        </ImageModal.ImageOptions>
-      </ImageModal.Body>
-    </ImageModal>
-  );
-}
-
-export default {
-  'ohif.captureViewportModal': ViewportDownloadFormNew,
-};
@@ -1,13 +0,0 @@
-import { colormaps } from '../utils/colormaps';
-
-const DefaultColormap = 'Grayscale';
-
-export default {
-  'cornerstone.colorbar': {
-    width: '16px',
-    colorbarTickPosition: 'left',
-    colormaps,
-    colorbarContainerPosition: 'right',
-    colorbarInitialColormap: DefaultColormap,
-  },
-};
@@ -1,99 +0,0 @@
-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,
-      },
-    },
-  ],
-};
@@ -1,124 +0,0 @@
-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',
-        },
-      ],
-    },
-  },
-};
@@ -1,16 +0,0 @@
-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: {},
-};
@@ -1,95 +0,0 @@
-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',
-    },
-  };
-}
@@ -1,14 +0,0 @@
-import viewportActionCornersService from '../services/ViewportActionCornersService/ViewportActionCornersService';
-import { WindowLevelActionMenu } from '../components/WindowLevelActionMenu/WindowLevelActionMenu';
-
-export default {
-  'viewportActionMenu.windowLevelActionMenu': {
-    enabled: true,
-    location: viewportActionCornersService.LOCATIONS.topRight,
-    component: WindowLevelActionMenu,
-  },
-  'viewportActionMenu.segmentationOverlay': {
-    enabled: true,
-    location: viewportActionCornersService.LOCATIONS.topRight,
-  },
-};
@@ -1,15 +0,0 @@
-export default {
-  cornerstoneViewportClickCommands: {
-    doubleClick: ['toggleOneUp'],
-    button1: ['closeContextMenu'],
-    button3: [
-      {
-        commandName: 'showCornerstoneContextMenu',
-        commandOptions: {
-          requireNearbyToolData: true,
-          menuId: 'measurementsContextMenu',
-        },
-      },
-    ],
-  },
-};
@@ -1,6 +0,0 @@
-export default {
-  'viewportDownload.warningMessage': {
-    enabled: true,
-    value: 'Not For Diagnostic Use',
-  },
-};
@@ -1,44 +0,0 @@
-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',
-    },
-  ],
-};
@@ -1,33 +0,0 @@
-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,
-        },
-      },
-    ],
-  },
-};
@@ -1,14 +0,0 @@
-import { CONSTANTS } from '@cornerstonejs/core';
-
-const { VIEWPORT_PRESETS } = CONSTANTS;
-
-export default {
-  'cornerstone.3dVolumeRendering': {
-    volumeRenderingPresets: VIEWPORT_PRESETS,
-    volumeRenderingQualityRange: {
-      min: 1,
-      max: 4,
-      step: 1,
-    },
-  },
-};
@@ -1,5 +0,0 @@
-import defaultWindowLevelPresets from '../components/WindowLevelActionMenu/defaultWindowLevelPresets';
-
-export default {
-  'cornerstone.windowLevelPresets': defaultWindowLevelPresets,
-};
@@ -0,0 +1,213 @@
+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;
@@ -1,38 +0,0 @@
-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 captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
-import viewportDownloadWarningCustomization from './customizations/viewportDownloadWarningCustomization';
-import viewportActionMenuCustomizations from './customizations/viewportActionMenuCustomizations';
-
-function getCustomizationModule({ commandsManager, servicesManager }) {
-  return [
-    {
-      name: 'default',
-      value: {
-        ...viewportOverlayCustomization,
-        ...getSegmentationPanelCustomization({ commandsManager, servicesManager }),
-        ...layoutSelectorCustomization,
-        ...viewportToolsCustomization,
-        ...viewportClickCommandsCustomization,
-        ...measurementsCustomization,
-        ...volumeRenderingCustomization,
-        ...colorbarCustomization,
-        ...windowLevelPresetsCustomization,
-        ...miscCustomization,
-        ...captureViewportModalCustomization,
-        ...viewportDownloadWarningCustomization,
-        ...viewportActionMenuCustomizations,
-      },
-    },
-  ];
-}
-
-export default getCustomizationModule;
@@ -1,9 +1,9 @@
 import React from 'react';

-import { Toolbox } from '@ohif/extension-default';
+import { Toolbox } from '@ohif/ui-next';
 import PanelSegmentation from './panels/PanelSegmentation';
 import ActiveViewportWindowLevel from './components/ActiveViewportWindowLevel';
-import PanelMeasurement from './panels/PanelMeasurement';
+import PanelMeasurementTable from './panels/PanelMeasurement';

 const getPanelModule = ({ commandsManager, servicesManager, extensionManager }: withAppTypes) => {
  const wrappedPanelSegmentation = ({ configuration }) => {
@@ -36,8 +36,14 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
    return (
      <>
        <Toolbox
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
          buttonSectionId="segmentationToolbox"
          title="Segmentation Tools"
+          configuration={{
+            ...configuration,
+          }}
        />
        <PanelSegmentation
          commandsManager={commandsManager}
@@ -53,7 +59,7 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:

  const wrappedPanelMeasurement = ({ configuration }) => {
    return (
-      <PanelMeasurement
+      <PanelMeasurementTable
        commandsManager={commandsManager}
        servicesManager={servicesManager}
        extensionManager={extensionManager}
@@ -1,8 +1,14 @@
 import { Enums } from '@cornerstonejs/tools';
-import { utils } from '@ohif/ui-next';
+
+const getToggledClassName = (isToggled: boolean) => {
+  return isToggled
+    ? '!text-primary-active'
+    : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
+};

 const getDisabledState = (disabledText?: string) => ({
  disabled: true,
+  className: '!text-common-bright ohif-disabled',
  disabledText: disabledText ?? 'Not available on the current viewport',
 });

@@ -87,15 +93,69 @@ 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
          isActive: isPrimaryActive,
        };
      },
    },
    {
-      name: 'evaluate.action',
-      evaluate: () => {
+      name: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+      evaluate: ({ viewportId, button, itemId }) => {
+        const { items } = button.props;
+
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+        if (!toolGroup) {
+          return {
+            primary: button.props.primary,
+            items,
+          };
+        }
+
+        const activeToolName = toolGroup.getActivePrimaryMouseButtonTool();
+
+        // check if the active toolName is part of the items then we need
+        // to move it to the primary button
+        const activeToolIndex = items.findIndex(item => {
+          const toolName = toolbarService.getToolNameForButton(item);
+          return toolName === activeToolName;
+        });
+
+        // if there is an active tool in the items dropdown bound to the primary mouse/touch
+        // we should show that no matter what
+        if (activeToolIndex > -1) {
+          return {
+            primary: items[activeToolIndex],
+            items,
+          };
+        }
+
+        if (!itemId) {
+          return {
+            primary: button.props.primary,
+            items,
+          };
+        }
+
+        // other wise we can move the clicked tool to the primary button
+        const clickedItemProps = items.find(item => item.id === itemId || item.itemId === itemId);
+
        return {
-          disabled: false,
+          primary: clickedItemProps,
+          items,
+        };
+      },
+    },
+    {
+      name: 'evaluate.action',
+      evaluate: ({ viewportId, button }) => {
+        return {
+          className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
        };
      },
    },
@@ -130,7 +190,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w

        if (!synchronizers?.length) {
          return {
-            className: utils.getToggledClassName(false),
+            className: getToggledClassName(false),
          };
        }

@@ -144,7 +204,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w

        if (!synchronizers?.length) {
          return {
-            className: utils.getToggledClassName(false),
+            className: getToggledClassName(false),
          };
        }

@@ -156,7 +216,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
        const isEnabled = synchronizer?._enabled;

        return {
-          className: utils.getToggledClassName(isEnabled),
+          className: getToggledClassName(isEnabled),
        };
      },
    },
@@ -179,13 +239,14 @@ 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: utils.getToggledClassName(isToggled),
+          className: getToggledClassName(isToggled),
        };
      },
    },
@@ -214,7 +275,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w

        return {
          disabled: false,
-          className: utils.getToggledClassName(isMpr),
+          className: getToggledClassName(isMpr),
        };
      },
    },
@@ -243,6 +304,6 @@ function _evaluateToggle({
  const isOff = offModes.includes(toolGroup.getToolOptions(toolName).mode);

  return {
-    className: utils.getToggledClassName(!isOff),
+    className: getToggledClassName(!isOff),
  };
 }
@@ -12,7 +12,10 @@ function mapSegmentationToDisplay(segmentation, customizationService) {
  const { label, segments } = segmentation;

  // Get the readable text mapping once
-  const readableTextMap = customizationService.getCustomization('panelSegmentation.readableText');
+  const { readableText: readableTextMap } = customizationService.getCustomization(
+    'PanelSegmentation.readableText',
+    {}
+  );

  // Helper function to recursively map cachedStats to readable display text
  function mapStatsToDisplay(stats, indent = 0) {
Author	SHA1	Message	Date
ohif-bot	3b66867508	chore(version): Update package versions [skip ci]	2024-11-13 04:21:28 +00:00
ohif-bot	1d267e5576	chore(version): version.json [skip ci]	2024-11-13 04:21:19 +00:00
Alireza	610faa5a27	fix: video playback (#4497 )	2024-11-12 21:18:06 -05:00
Dan Rukas	4f8281b04a	fix(ui): Scrolling and display fixes for study panel (#4494 )	2024-11-12 17:21:05 -05:00
Alireza	2f7bb02387	fix: publish version 3.9 (#4491 )	2024-11-12 14:45:02 -05:00
ohif-bot	54d4eabf03	chore(version): Update package versions [skip ci]	2024-11-12 19:13:32 +00:00
ohif-bot	5c20bf0faf	chore(version): version.json [skip ci]	2024-11-12 19:13:25 +00:00
Alireza	b417063200	fix version json	2024-11-12 13:53:36 -05:00
Alireza	4bd343ab3e	fix version json	2024-11-12 13:46:15 -05:00
Alireza	a6de628132	publish version 3.9	2024-11-12 13:34:08 -05:00
@@ -1 +1 @@
 .9.0
 .16.1