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

chore(version): version.json [skip ci]
chore: recovery 2 (#5014 )
2025-06-09 15:06:36 +00:00 · 2025-06-09 15:06:30 +00:00 · 2025-06-09 10:58:06 -04:00 · 2025-04-11 20:02:21 +00:00 · 2025-04-11 20:02:14 +00:00 · 2025-04-11 15:57:29 -04:00
2528 changed files with 148196 additions and 47965 deletions
@@ -1,72 +1,52 @@
 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.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
+  cypress: cypress-io/cypress@3.4.2

 defaults: &defaults
  docker:
-    - image: cimg/node:18.18
+    - image: cimg/node:20.18.1
      environment:
-        TERM: xterm # Enable colors in term
+        TERM: xterm
        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:
-      # Update yarn
-      - run: yarn -v
+      - install_bun
      - 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: yarn install --frozen-lockfile
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache ## Cache yarn and Cypress
-          key: yarn-packages-{{ checksum "yarn.lock" }}
+          command: bun install --no-save
      # RUN TESTS
      - run:
          name: 'JavaScript Test Suite'
-          command: yarn run test:unit:ci
+          command: bun run test:unit:ci
      # platform/app
      - run:
          name: 'VIEWER: Combine report output'
@@ -94,36 +74,23 @@ 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
-      - 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-
+      - install_bun
      - run:
          name: Install Dependencies
-          command: yarn install --frozen-lockfile
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache ## Cache yarn and Cypress
-          key: yarn-packages-{{ checksum "yarn.lock" }}
+          command: bun install --no-save
      # Build & Test
      - run:
          name: 'Perform the versioning before build'
-          command: node ./version.mjs
+          command: bun ./version.mjs
      - run:
          name: 'Build the OHIF Viewer'
-          command: yarn run build
+          command: bun run build
          no_output_timeout: 45m
      - run:
          name: 'Upload SourceMaps, Send Deploy Notification'
@@ -145,30 +112,18 @@ jobs:
            - commit.txt
            - version.json

-  # just to make sure later on we can publish them
  BUILD_PACKAGES_QUICK:
    <<: *defaults
    resource_class: large
    steps:
-      - run: yarn -v
+      - install_bun
      # 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: yarn install --frozen-lockfile
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache/yarn
-          key: yarn-packages-{{ checksum "yarn.lock" }}
+          command: bun install --frozen-lockfile
      - run:
          name: Avoid hosts unknown for github
          command: |
@@ -180,45 +135,27 @@ jobs:
      - run:
          name: Authenticate with NPM registry
          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
-      - run:
-          name: Increase the event emitter limit
-          command: |
-            node ./increaseEventEmitterLimit.mjs
      - run:
          name: build half of the packages (to avoid out of memory in circleci)
          command: |
-            yarn run build:package-all
+            bun run build:package-all
      - run:
          name: build the other half of the packages
          command: |
-            yarn run build:package-all-1
+            bun run build:package-all-1

-  ###
-  # Workflow: RELEASE
-  ###
  NPM_PUBLISH:
    <<: *defaults
    resource_class: large
    steps:
-      - run: yarn -v
+      - install_bun
      # 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: yarn install --frozen-lockfile
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache/yarn
-          key: yarn-packages-{{ checksum "yarn.lock" }}
+          command: bun install --no-save
      - run:
          name: Avoid hosts unknown for github
          command: |
@@ -230,18 +167,14 @@ jobs:
      - run:
          name: Authenticate with NPM registry
          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
-      - run:
-          name: Increase the event emitter limit
-          command: |
-            node ./increaseEventEmitterLimit.mjs
      - run:
          name: build half of the packages (to avoid out of memory in circleci)
          command: |
-            yarn run build:package-all
+            bun run build:package-all
      - run:
          name: build the other half of the packages
          command: |
-            yarn run build:package-all-1
+            bun run build:package-all-1
      - run:
          name: increase min time out
          command: |
@@ -253,14 +186,14 @@ jobs:
      - run:
          name: publish package versions
          command: |
-            node ./publish-version.mjs
+            bun ./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: |
-            node ./publish-package.mjs
+            bun ./publish-package.mjs
      - persist_to_workspace:
          root: ~/repo
          paths:
@@ -275,7 +208,7 @@ jobs:
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name: Build and push Docker image from the release branch
+          name: Build Docker image for amd64
          command: |
            # This file will exist if a new version was published by
            # our command in the previous job.
@@ -289,12 +222,50 @@ jobs:
              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
              echo $IMAGE_VERSION
              echo $IMAGE_VERSION_FULL
-              # Build our image, auth, and push
-              docker build --tag ohif/app:$IMAGE_VERSION_FULL --tag ohif/app:latest .
+              # Build our amd64 image, auth, and push
+              docker build --platform linux/amd64 --tag ohif/app:$IMAGE_VERSION_FULL-amd64 --tag ohif/app:latest-amd64 .
              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL
-              docker push ohif/app:latest
+              docker push ohif/app:$IMAGE_VERSION_FULL-amd64
+              docker push ohif/app:latest-amd64
            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 (Release)
+          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
@@ -305,7 +276,7 @@ jobs:
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name: Build and push Docker image from the master branch (beta releases)
+          name: Build Docker image for amd64 (Beta)
          command: |
            echo $(ls -l)

@@ -317,108 +288,155 @@ 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 image, auth, and push
-
-              echo "starting docker build"
-              docker build --tag ohif/app:$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 .
              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-
-              echo "starting docker push"
-              docker push ohif/app:$IMAGE_VERSION_FULL
+              docker push ohif/app:$IMAGE_VERSION_FULL-amd64
+              docker push ohif/app:latest-beta-amd64
            fi

-  # 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
+  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
+    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/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:
-      - cypress/install:
-          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: << parameters.cypress-command >>
-          start-command: << parameters.start-command >>
-          working-directory: << parameters.working-directory >>
+      - attach_workspace:
+          at: ~/repo
+      - setup_remote_docker:
+          docker_layer_caching: false
+      - run:
+          name: Create and push multi-architecture manifest (Release)
+          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

 workflows:
  PR_CHECKS:
@@ -427,61 +445,12 @@ workflows:
          filters:
            branches:
              ignore: master
-      - UNIT_TESTS:
-          requires:
-            - BUILD_PACKAGES_QUICK
-      - CYPRESS_CUSTOM_RUN:
+      - UNIT_TESTS
+      - CYPRESS:
          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

-  # 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.
+  # viewer-dev.ohif.org
  DEPLOY_MASTER:
    jobs:
      - BUILD:
@@ -494,9 +463,14 @@ workflows:
      - DOCKER_BETA_PUBLISH:
          requires:
            - NPM_PUBLISH
+      - DOCKER_BETA_PUBLISH_ARM:
+          requires:
+            - DOCKER_BETA_PUBLISH
+      - DOCKER_BETA_MULTIARCH_MANIFEST:
+          requires:
+            - DOCKER_BETA_PUBLISH_ARM

-  # Our release branch deploys to viewer.ohif.org and is more stable and less
-  # frequently updated after being tested in the staging environment.
+  # viewer.ohif.org
  DEPLOY_RELEASE:
    jobs:
      - BUILD:
@@ -513,50 +487,9 @@ workflows:
      - DOCKER_RELEASE_PUBLISH:
          requires:
            - NPM_PUBLISH
-
-  ###
-  # 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
+      - DOCKER_RELEASE_PUBLISH_ARM:
+          requires:
+            - DOCKER_RELEASE_PUBLISH
+      - DOCKER_MULTIARCH_MANIFEST:
+          requires:
+            - DOCKER_RELEASE_PUBLISH_ARM
@@ -1,12 +1,13 @@
 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;
+    try_files $uri $uri/ ${PUBLIC_URL}index.html;
    add_header Cross-Origin-Resource-Policy same-origin;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
@@ -7,8 +7,6 @@ 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;
@@ -2,16 +2,34 @@

 if [ -n "$SSL_PORT" ]
  then
-    envsubst '${SSL_PORT}:${PORT}' < /usr/src/default.ssl.conf.template > /etc/nginx/conf.d/default.conf
+    envsubst '${SSL_PORT}:${PORT}' < /usr/src/default.ssl.conf.template | envsubst '${PUBLIC_URL}' > /etc/nginx/conf.d/default.conf
  else
-    envsubst '${PORT}' < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
+    envsubst '${PORT}:${PUBLIC_URL}' < /usr/src/default.conf.template  > /etc/nginx/conf.d/default.conf
 fi

-if [ -n "$APP_CONFIG" ]
-  then
-    echo "$APP_CONFIG" > /usr/share/nginx/html/app-config.js
+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"
 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
@@ -40,6 +58,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..."
+echo "Starting Nginx to serve the OHIF Viewer on ${PUBLIC_URL}"

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

      - name: Upload blob report to GitHub Actions Artifacts
        if: ${{ !cancelled() }}
@@ -39,14 +43,20 @@ 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: 18
+          node-version: 20
      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
+        run: bun install --frozen-lockfile
+      - name: Set up Git safe directory
+        run: git config --global --add safe.directory /__w/Viewers/Viewers
      - name: Download blob reports from GitHub Actions Artifacts
        uses: actions/download-artifact@v4
        with:
@@ -55,7 +65,7 @@ jobs:
          merge-multiple: true

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

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

 # Output
 build
@@ -1 +1 @@
-18.16.1
+20.9.0
@@ -4,7 +4,7 @@
 * The JSON file can be used to load the study into the OHIF Viewer. You can get more detail
 * in the DICOM JSON Data source on docs.ohif.org
 *
- * Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath> <optional scheme>
+ * Usage: node dicom-json-generator.js <studyFolder> <urlPrefix> <outputJSONPath> <optional scheme>
 *
 * params:
 * - studyFolder: path to the study folder which contains the DICOM files
@@ -30,7 +30,7 @@ const [studyDirectory, urlPrefix, outputPath, scheme = 'dicomweb'] = args;

 if (args.length < 3 || args.length > 4) {
  console.error(
-    'Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath> [scheme]'
+    'Usage: node dicom-json-generator.js <studyFolder> <urlPrefix> <outputJSONPath> [scheme]'
  );
  process.exit(1);
 }
@@ -49,6 +49,7 @@ const defineValues = {
  'process.env.LOCIZE_PROJECTID': JSON.stringify(process.env.LOCIZE_PROJECTID || ''),
  'process.env.LOCIZE_API_KEY': JSON.stringify(process.env.LOCIZE_API_KEY || ''),
  'process.env.REACT_APP_I18N_DEBUG': JSON.stringify(process.env.REACT_APP_I18N_DEBUG || ''),
+  'process.env.TEST_ENV': JSON.stringify(process.env.TEST_ENV || ''),
 };

 // Only redefine updated values.  This avoids warning messages in the logs
@@ -57,10 +58,6 @@ 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';
@@ -98,7 +95,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      type: 'filesystem',
    },
    module: {
-      noParse: [/(codec)/, /(dicomicc)/],
+      noParse: [/(dicomicc)/],
      rules: [
        ...(isProdBuild
          ? []
@@ -108,7 +105,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
-                  plugins: ['react-refresh/babel'],
+                  plugins: isProdBuild ? [] : ['react-refresh/babel'],
                },
              },
            ]),
@@ -144,11 +141,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
            },
          ],
        },
-        {
-          test: /\.js$/,
-          enforce: 'pre',
-          use: 'source-map-loader',
-        },
        transpileJavaScriptRule(mode),
        loadWebWorkersRule,
        // loadShadersRule,
@@ -177,6 +169,10 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
            },
          ],
        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/i,
+          type: 'asset/resource',
+        },
      ], //.concat(vtkRules),
    },
    resolve: {
@@ -188,8 +184,8 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
        '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
        '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
        '@state': path.resolve(__dirname, '../platform/app/src/state'),
-        '@cornerstonejs/dicom-image-loader':
-          '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
+        'dicom-microscopy-viewer':
+          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
      },
      // Which directories to search when resolving modules
      modules: [
@@ -217,7 +213,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
-      ...(isProdBuild ? [] : [new ReactRefreshWebpackPlugin()]),
+      ...(isProdBuild ? [] : [new ReactRefreshWebpackPlugin({ overlay: false })]),
      // Uncomment to generate bundle analyzer
      // new BundleAnalyzerPlugin(),
    ],
@@ -288,3 +288,10 @@ Bloch, B. Nicolas, Jain, Ashali, & Jaffe, C. Carl. (2015). BREAST-DIAGNOSIS [Dat
 Comstock, C. E., Gatsonis, C., Newstead, G. M., Snyder, B. S., Gareen, I. F., Bergin, J. T., Rahbar, H., Sung, J. S., Jacobs, C., Harvey, J. A., Nicholson, M. H., Ward, R. C., Holt, J., Prather, A., Miller, K. D., Schnall, M. D., & Kuhl, C. K. (2023). Abbreviated Breast MRI and Digital Tomosynthesis Mammography in Screening Women With Dense Breasts (EA1141) (Version 1) [dataset]. The Cancer Imaging Archive. https://doi.org/10.7937/2BAS-HR33

 https://www.cancerimagingarchive.net/collection/ea1141/
+
+### 1.2.276.0.7230010.3.1.2.2155604110.4180.1021041295.21
+
+From OFFIS DICOM-Team
+
+https://www.offis.de/
+OFFIS DICOM-Team
@@ -1,3 +1,4 @@
+# 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
@@ -19,61 +20,85 @@
 #


+# 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 .
-FROM node:18.16.1-slim as json-copier
-
-RUN mkdir /usr/src/app
-WORKDIR /usr/src/app
-
-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
+FROM node:20.18.1-slim as builder
+
 RUN apt-get update && apt-get install -y build-essential python3
+
+
 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
+RUN npm install -g bun
+# RUN npm install -g lerna@7.4.2
+ENV PATH=/usr/src/app/node_modules/.bin:$PATH

-COPY --from=json-copier /usr/src/app .
-
+# 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 ./
 # Run the install before copying the rest of the files
-RUN yarn config set workspaces-experimental true
-RUN yarn install --frozen-lockfile --verbose

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

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

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

 # Stage 3: Bundle the built application into a Docker container
 # which runs Nginx using Alpine Linux
-FROM nginxinc/nginx-unprivileged:1.25-alpine as final
+FROM nginxinc/nginx-unprivileged:1.27-alpine as final
 #RUN apk add --no-cache bash
-ENV PORT=80
+ARG PUBLIC_URL=/
+ENV PUBLIC_URL=${PUBLIC_URL}
+ARG PORT=80
+ENV PORT=${PORT}
 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
+COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html${PUBLIC_URL}
+# Copy paths that are renamed/redirected generally
+# Microscopy libraries depend on root level include, so must be copied
+COPY --from=builder /usr/src/app/platform/app/dist/dicom-microscopy-viewer /usr/share/nginx/html/dicom-microscopy-viewer
+
 # 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 chmod 666 /usr/share/nginx/html/app-config.js
+RUN chown -R nginx:nginx /usr/share/nginx/html
 USER nginx
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
@@ -1,5 +1,4 @@
 <!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
 <div align="center">
  <h1>OHIF Medical Imaging Viewer</h1>
  <p><strong>The OHIF Viewer</strong> is a zero-footprint medical image viewer
@@ -135,7 +134,7 @@ Here is a schematic representation of our development workflow:

 ### Requirements

- [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install)
+- [Yarn 1.20.0+](https://yarnpkg.com/en/docs/install)
 - [Node 18+](https://nodejs.org/en/)
 - Yarn Workspaces should be enabled on your machine:
  - `yarn config set workspaces-experimental true`
@@ -171,12 +170,13 @@ also supports a number of commands that can be found in their respective
 | Yarn Commands                | Description                                                   |
 | ---------------------------- | ------------------------------------------------------------- |
 | **Develop**                  |                                                               |
-| `dev` or `start`             | Default development experience for Viewer                     |
+| `dev`              | Default development experience for Viewer                     |
+| `dev:fast`             | Our experimental fast dev mode that uses rsbuild instead of webpack                     |
 | `test:unit`                  | Jest multi-project test runner; overall coverage              |
 | **Deploy**                   |                                                               |
 | `build`\*                    | Builds production output for our PWA Viewer                   |  |

-\* - For more information on our different builds, check out our [Deploy
+\* - For more information on 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.9.0-beta.102",
+  "version": "3.10.2",
  "license": "MIT",
  "private": true,
  "engines": {
@@ -10,10 +10,10 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@kitware/vtk.js": "30.4.1",
+    "@kitware/vtk.js": "32.12.0",
    "clsx": "^2.1.1",
    "core-js": "^3.2.1",
-    "moment": "^2.9.4"
+    "moment": "^2.30.1"
  },
  "peerDependencies": {
    "react": "^18.3.1",
@@ -21,7 +21,11 @@
  },
  "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",
@@ -68,16 +72,15 @@
    "prettier-plugin-tailwindcss": "^0.5.4",
    "react-refresh": "^0.14.2",
    "semver": "^7.5.1",
-    "serve": "^14.2.0",
+    "serve": "^14.2.4",
    "shader-loader": "^1.3.1",
    "shx": "^0.3.3",
    "source-map-loader": "^4.0.1",
-    "start-server-and-test": "^1.10.0",
    "style-loader": "^1.0.0",
    "stylus": "^0.59.0",
    "stylus-loader": "^7.1.3",
    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "4.6.4",
+    "typescript": "5.5.4",
    "unused-webpack-plugin": "2.4.0",
    "webpack": "5.94.0",
    "webpack-bundle-analyzer": "^4.8.0",
@@ -1,7 +1,7 @@
 {
  "name": "@externals/dicom-microscopy-viewer",
  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.9.0-beta.102",
+  "version": "3.10.2",
  "license": "MIT",
  "dependencies": {
    "dicom-microscopy-viewer": "^0.46.1"
@@ -38,14 +38,14 @@
  "resolutions": {
    "**/@babel/runtime": "^7.20.13",
    "commander": "8.3.0",
-    "dcmjs": ">=0.33.0",
+    "dcmjs": "0.38.0",
    "dicomweb-client": ">=0.10.4",
    "nth-check": "^2.1.1",
    "trim-newlines": "^5.0.0",
    "glob-parent": "^6.0.2",
    "trim": "^1.0.0",
    "package-json": "^8.1.0",
-    "typescript": "4.6.4",
+    "typescript": "5.5.4",
    "sharp": "^0.32.6"
  }
 }
@@ -1,6 +1,4 @@
 // 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'],
@@ -51,7 +49,6 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
-      plugins: ['react-refresh/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1 +1 @@
-06104257402e872d447e59cb166184d9a3548f8b
+36813e0c2f1ea48953714e8e48aff6e9d4516449
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.9.0-beta.102",
+  "version": "3.10.2",
  "description": "DICOM Parametric Map read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.102",
-    "@ohif/extension-cornerstone": "3.9.0-beta.102",
-    "@ohif/extension-default": "3.9.0-beta.102",
-    "@ohif/i18n": "3.9.0-beta.102",
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.86.0",
-    "@cornerstonejs/core": "^1.86.0",
-    "@kitware/vtk.js": "30.4.1",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@kitware/vtk.js": "32.12.0",
    "react-color": "^2.19.3"
  }
 }
@@ -97,7 +97,7 @@ function _getDisplaySetsFromSeries(
  };

  // Does not get the referenced volumeId during parametric displaySet creation because the
-  // referenced displaySet is still not avaialble  (getDisplaySetByUID returns `undefined`).
+  // referenced displaySet is still not available  (getDisplaySetByUID returns `undefined`).
  displaySet.getReferencedVolumeId = () => {
    if (displaySet.referencedVolumeId) {
      return displaySet.referencedVolumeId;
@@ -119,6 +119,22 @@ function _getDisplaySetsFromSeries(
  return [displaySet];
 }

+const getRangeFromPixelData = (pixelData: Float32Array) => {
+  let lowest = pixelData[0];
+  let highest = pixelData[0];
+
+  for (let i = 1; i < pixelData.length; i++) {
+    if (pixelData[i] < lowest) {
+      lowest = pixelData[i];
+    }
+    if (pixelData[i] > highest) {
+      highest = pixelData[i];
+    }
+  }
+
+  return [lowest, highest];
+};
+
 async function _load(
  displaySet,
  servicesManager: AppTypes.ServicesManager,
@@ -132,11 +148,11 @@ async function _load(
    return volumeLoadObject.promise;
  }

-  displaySet.loadStatus.loading = true;
+  displaySet.loading = true;
+  displaySet.isLoaded = false;

  // We don't want to fire multiple loads, so we'll wait for the first to finish
  // and also return the same promise to any other callers.
-  // loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
  const promise = _loadParametricMap({
    extensionManager,
    displaySet,
@@ -149,18 +165,26 @@ async function _load(

  promise
    .then(() => {
-      displaySet.loadStatus.loading = false;
-      displaySet.loadStatus.loaded = true;
+      displaySet.loading = false;
+      displaySet.isLoaded = true;
+      // Broadcast that loading is complete
+      servicesManager.services.segmentationService._broadcastEvent(
+        servicesManager.services.segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
+        {
+          pmapDisplaySet: displaySet,
+        }
+      );
    })
    .catch(err => {
-      displaySet.loadStatus.loading = false;
+      displaySet.loading = false;
+      displaySet.isLoaded = false;
      throw err;
    });

  return promise;
 }

-async function _loadParametricMap({ extensionManager, displaySet, headers }: withAppTypes) {
+async function _loadParametricMap({ displaySet, headers }: withAppTypes) {
  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(displaySet, null, headers);
  const referencedVolumeId = displaySet.getReferencedVolumeId();
  const cachedReferencedVolume = cache.getVolume(referencedVolumeId);
@@ -189,9 +213,12 @@ async function _loadParametricMap({ extensionManager, displaySet, headers }: wit
    },
  });

-  derivedVolume.getScalarData().set(pixelData);
-
-  const range = derivedVolume.imageData.getPointData().getScalars().getRange();
+  const newPixelData = new TypedArrayConstructor(pixelData.length);
+  for (let i = 0; i < pixelData.length; i++) {
+    newPixelData[i] = pixelData[i] * 100;
+  }
+  derivedVolume.voxelManager.setCompleteScalarDataArray(newPixelData);
+  const range = getRangeFromPixelData(newPixelData);
  const windowLevel = csUtils.windowLevel.toWindowLevel(range[0], range[1]);

  derivedVolume.metadata.voiLut = [windowLevel];
@@ -1,6 +0,0 @@
-function createPMAPToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
-  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
-  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
-}
-
-export default createPMAPToolGroupAndAddTools;
@@ -1,22 +1,29 @@
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef } from 'react';
-import { useViewportGrid } from '@ohif/ui';
-import createPMAPToolGroupAndAddTools from '../utils/initPMAPToolGroup';
-
-const PMAP_TOOLGROUP_BASE_NAME = 'PMAPToolGroup';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useViewportGrid } from '@ohif/ui-next';

 function OHIFCornerstonePMAPViewport(props: withAppTypes) {
-  const { displaySets, viewportOptions, displaySetOptions, servicesManager, extensionManager } =
-    props;
+  const {
+    displaySets,
+    children,
+    viewportOptions,
+    displaySetOptions,
+    servicesManager,
+    extensionManager,
+  } = props;
  const viewportId = viewportOptions.viewportId;
-  const { displaySetService, toolGroupService, customizationService } = servicesManager.services;
-  const toolGroupId = `${PMAP_TOOLGROUP_BASE_NAME}-${viewportId}`;
+  const { displaySetService, segmentationService, uiNotificationService, customizationService } =
+    servicesManager.services;

  // PMAP viewport will always have a single display set
  if (displaySets.length !== 1) {
    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);
@@ -32,6 +39,24 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
    metadata: referencedDisplaySetMetadata,
  };

+  const [pmapIsLoading, setPmapIsLoading] = useState(!pmapDisplaySet.isLoaded);
+
+  // Add effect to listen for loading complete
+  useEffect(() => {
+    const { unsubscribe } = segmentationService.subscribe(
+      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
+      evt => {
+        if (evt.pmapDisplaySet?.displaySetInstanceUID === pmapDisplaySet.displaySetInstanceUID) {
+          setPmapIsLoading(false);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [pmapDisplaySet]);
+
  const getCornerstoneViewport = useCallback(() => {
    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
    const { component: Component } = extensionManager.getModuleEntry(
@@ -46,12 +71,25 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {

    Object.assign(pmapDisplaySetOptions.options, {
      colormap: {
-        name: 'rainbow',
+        name: 'rainbow_2',
        opacity: [
-          { value: 0, opacity: 0.5 },
-          { value: 1, opacity: 1 },
+          { value: 0, opacity: 0 },
+          { value: 0.25, opacity: 0.25 },
+          { value: 0.5, opacity: 0.5 },
+          { value: 0.75, opacity: 0.75 },
+          { value: 0.9, opacity: 0.99 },
        ],
      },
+      voi: {
+        windowCenter: 50,
+        windowWidth: 100,
+      },
+    });
+
+    uiNotificationService.show({
+      title: 'Parametric Map',
+      type: 'warning',
+      message: 'The values are multiplied by 100 in the viewport for better visibility',
    });

    return (
@@ -61,9 +99,9 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
        displaySets={[referencedDisplaySet, pmapDisplaySet]}
        viewportOptions={{
          viewportType: 'volume',
-          toolGroupId: toolGroupId,
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
+          presentationIds: viewportOptions.presentationIds,
        }}
        displaySetOptions={[{}, pmapDisplaySetOptions]}
      ></Component>
@@ -73,7 +111,6 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
    displaySetOptions,
    props,
    pmapDisplaySet,
-    toolGroupId,
    viewportOptions.orientation,
    viewportOptions.viewportId,
  ]);
@@ -98,23 +135,33 @@ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
    };
  }, [activeViewportId, displaySetService, viewportGridService, viewports]);

-  useEffect(() => {
-    let toolGroup = toolGroupService.getToolGroup(toolGroupId);
+  let childrenWithProps = null;

-    if (toolGroup) {
-      return;
-    }
-
-    // This creates a custom tool group which has the lifetime of this view only
-    toolGroup = createPMAPToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);
-
-    return () => toolGroupService.destroyToolGroup(toolGroupId);
-  }, [customizationService, toolGroupId, toolGroupService]);
+  if (children && children.length) {
+    childrenWithProps = children.map((child, index) => {
+      return (
+        child &&
+        React.cloneElement(child, {
+          viewportId,
+          key: index,
+        })
+      );
+    });
+  }

  return (
    <>
      <div className="relative flex h-full w-full flex-row overflow-hidden">
+        {pmapIsLoading && (
+          <LoadingIndicatorTotalPercent
+            className="h-full w-full"
+            totalNumbers={null}
+            percentComplete={null}
+            loadingText="Loading Parametric Map..."
+          />
+        )}
        {getCornerstoneViewport()}
+        {childrenWithProps}
      </div>
    </>
  );
@@ -37,7 +37,6 @@ 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.9.0-beta.102",
+  "version": "3.10.2",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.102",
-    "@ohif/extension-cornerstone": "3.9.0-beta.102",
-    "@ohif/extension-default": "3.9.0-beta.102",
-    "@ohif/i18n": "3.9.0-beta.102",
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -0,0 +1,55 @@
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
+  const services = servicesManager.services;
+  const { displaySetService, viewportGridService } = services;
+
+  const actions = {
+    hydrateRTSDisplaySet: ({ displaySet, viewportId }) => {
+      if (displaySet.Modality !== 'RTSTRUCT') {
+        throw new Error('Display set is not an RTSTRUCT');
+      }
+
+      const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+        displaySet.referencedDisplaySetInstanceUID
+      );
+
+      // update the previously stored segmentationPresentation with the new viewportId
+      // presentation so that when we put the referencedDisplaySet back in the viewport
+      // it will have the correct segmentation representation hydrated
+      commandsManager.runCommand('updateStoredSegmentationPresentation', {
+        displaySet: displaySet,
+        type: SegmentationRepresentations.Contour,
+      });
+
+      // update the previously stored positionPresentation with the new viewportId
+      // presentation so that when we put the referencedDisplaySet back in the viewport
+      // it will be in the correct position zoom and pan
+      commandsManager.runCommand('updateStoredPositionPresentation', {
+        viewportId,
+        displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
+      });
+
+      viewportGridService.setDisplaySetsForViewport({
+        viewportId,
+        displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
+      });
+    },
+  };
+
+  const definitions = {
+    hydrateRTSDisplaySet: {
+      commandFn: actions.hydrateRTSDisplaySet,
+      storeContexts: [],
+      options: {},
+    },
+  };
+
+  return {
+    actions,
+    definitions,
+    defaultContext: 'cornerstone-dicom-rt',
+  };
+};
+
+export default commandsModule;
@@ -72,22 +72,27 @@ function _getDisplaySetsFromSeries(
  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;

-  displaySet.getReferenceDisplaySet = () => {
-    const { displaySetService } = servicesManager.services;
-    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
-      displaySet.referencedSeriesInstanceUID
+  const { displaySetService } = servicesManager.services;
+  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+    displaySet.referencedSeriesInstanceUID
+  );
+
+  if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
+    // Instead of throwing error, subscribe to display sets added
+    const { unsubscribe } = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SETS_ADDED,
+      ({ displaySetsAdded }) => {
+        const addedDisplaySet = displaySetsAdded[0];
+        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
+          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          unsubscribe();
+        }
+      }
    );
-
-    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
-      throw new Error('Referenced DisplaySet is missing for the RT');
-    }
-
+  } else {
    const referencedDisplaySet = referencedDisplaySets[0];
-
    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
-
-    return referencedDisplaySet;
-  };
+  }

  displaySet.load = ({ headers }) => _load(displaySet, servicesManager, extensionManager, headers);

@@ -111,19 +116,13 @@ function _load(rtDisplaySet, servicesManager: AppTypes.ServicesManager, extensio
  // and also return the same promise to any other callers.
  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
    if (!rtDisplaySet.structureSet) {
-      const structureSet = await loadRTStruct(
-        extensionManager,
-        rtDisplaySet,
-        rtDisplaySet.getReferenceDisplaySet(),
-        headers
-      );
+      const structureSet = await loadRTStruct(extensionManager, rtDisplaySet, headers);

      rtDisplaySet.structureSet = structureSet;
    }

-    const suppressEvents = true;
    segmentationService
-      .createSegmentationForRTDisplaySet(rtDisplaySet, null, suppressEvents)
+      .createSegmentationForRTDisplaySet(rtDisplaySet)
      .then(() => {
        rtDisplaySet.loading = false;
        resolve();
@@ -2,6 +2,7 @@ import { id } from './id';
 import React from 'react';
 import { Types } from '@ohif/core';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
+import getCommandsModule from './getCommandsModule';

 const Component = React.lazy(() => {
  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport');
@@ -24,6 +25,7 @@ const extension: Types.Extensions.Extension = {
   * You ID can be anything you want, but it should be unique.
   */
  id,
+  getCommandsModule,

  /**
   * PanelModule should provide a list of panels that will be available in OHIF
@@ -89,12 +89,7 @@ async function checkAndLoadContourData(instance, datasource) {
  });
 }

-export default async function loadRTStruct(
-  extensionManager,
-  rtStructDisplaySet,
-  referencedDisplaySet,
-  headers
-) {
+export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
  const utilityModule = extensionManager.getModuleEntry(
    '@ohif/extension-cornerstone.utilityModule.common'
  );
@@ -102,8 +97,6 @@ export default async function loadRTStruct(
  const { bulkDataURI } = dataSource.getConfig?.() || {};

  const { dicomLoaderService } = utilityModule.exports;
-  const imageIdSopInstanceUidPairs =
-    _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet);

  // Set here is loading is asynchronous.
  // If this function throws its set back to false.
@@ -133,6 +126,7 @@ export default async function loadRTStruct(
    SeriesInstanceUID: instance.SeriesInstanceUID,
    ROIContours: [],
    visible: true,
+    ReferencedSOPInstanceUIDsSet: new Set(),
  };

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

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

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

    _setROIContourMetadata(
@@ -194,24 +194,6 @@ export default async function loadRTStruct(
  return structureSet;
 }

-const _getImageId = (imageIdSopInstanceUidPairs, sopInstanceUID) => {
-  const imageIdSopInstanceUidPairsEntry = imageIdSopInstanceUidPairs.find(
-    imageIdSopInstanceUidPairsEntry =>
-      imageIdSopInstanceUidPairsEntry.sopInstanceUID === sopInstanceUID
-  );
-
-  return imageIdSopInstanceUidPairsEntry ? imageIdSopInstanceUidPairsEntry.imageId : null;
-};
-
-function _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet) {
-  return referencedDisplaySet.images.map(image => {
-    return {
-      imageId: image.imageId,
-      sopInstanceUID: image.SOPInstanceUID,
-    };
-  });
-}
-
 function _setROIContourMetadata(
  structureSet,
  StructureSetROISequence,
@@ -1,5 +1,5 @@
 function createRTToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
-  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
+  const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');

  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
@@ -1,5 +1,3 @@
-import { ButtonEnums } from '@ohif/ui';
-
 const RESPONSE = {
  NO_NEVER: -1,
  CANCEL: 0,
@@ -10,50 +8,50 @@ function promptHydrateRT({
  servicesManager,
  rtDisplaySet,
  viewportId,
-  toolGroupId = 'default',
  preHydrateCallbacks,
  hydrateRTDisplaySet,
 }: withAppTypes) {
-  const { uiViewportDialogService } = servicesManager.services;
+  const { uiViewportDialogService, customizationService } = servicesManager.services;
  const extensionManager = servicesManager._extensionManager;
  const appConfig = extensionManager._appConfig;
  return new Promise(async function (resolve, reject) {
    const promptResult = appConfig?.disableConfirmationPrompts
      ? RESPONSE.HYDRATE_SEG
-      : await _askHydrate(uiViewportDialogService, viewportId);
+      : await _askHydrate(uiViewportDialogService, customizationService, viewportId);

    if (promptResult === RESPONSE.HYDRATE_SEG) {
      preHydrateCallbacks?.forEach(callback => {
        callback();
      });

-      window.setTimeout(async () => {
-        const isHydrated = await hydrateRTDisplaySet({
-          rtDisplaySet,
-          viewportId,
-          toolGroupId,
-          servicesManager,
-        });
+      const isHydrated = await hydrateRTDisplaySet({
+        rtDisplaySet,
+        viewportId,
+        servicesManager,
+      });

-        resolve(isHydrated);
-      }, 0);
+      resolve(isHydrated);
    }
  });
 }

-function _askHydrate(uiViewportDialogService: AppTypes.UIViewportDialogService, viewportId) {
+function _askHydrate(
+  uiViewportDialogService: AppTypes.UIViewportDialogService,
+  customizationService: AppTypes.CustomizationService,
+  viewportId
+) {
  return new Promise(function (resolve, reject) {
-    const message = 'Do you want to open this Segmentation?';
+    const message = customizationService.getCustomization('viewportNotification.hydrateRTMessage');
    const actions = [
      {
        id: 'no-hydrate',
-        type: ButtonEnums.type.secondary,
+        type: 'secondary',
        text: 'No',
        value: RESPONSE.CANCEL,
      },
      {
        id: 'yes-hydrate',
-        type: ButtonEnums.type.primary,
+        type: 'primary',
        text: 'Yes',
        value: RESPONSE.HYDRATE_SEG,
      },
@@ -1,10 +1,14 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useViewportGrid, LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui-next';
+import { useViewportGrid } from '@ohif/ui-next';
+import { utils } from '@ohif/extension-cornerstone';

 import promptHydrateRT from '../utils/promptHydrateRT';
 import _getStatusComponent from './_getStatusComponent';
+
 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
+import { usePositionPresentationStore } from '@ohif/extension-cornerstone';

 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';

@@ -36,13 +40,17 @@ 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 [isToolGroupCreated, setToolGroupCreated] = useState(false);
-  const [selectedSegment, setSelectedSegment] = useState(1);
+  const selectedSegmentObjectIndex: number = 0;
+  const { setPositionPresentation } = usePositionPresentationStore();

  // Hydration means that the RT is opened and segments are loaded into the
  // segmentation panel, and RT is also rendered on any viewport that is in the
@@ -62,7 +70,10 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

  const { viewports, activeViewportId } = viewportGrid;

-  const referencedDisplaySet = rtDisplaySet.getReferenceDisplaySet();
+  const referencedDisplaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+    referencedDisplaySetInstanceUID
+  );
  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(referencedDisplaySet);

  referencedDisplaySetRef.current = {
@@ -91,12 +102,15 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    });
  }, [viewportGrid]);

-  const hydrateRTDisplaySet = ({ rtDisplaySet, viewportId }) => {
-    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
-      displaySets: [rtDisplaySet],
-      viewportId,
-    });
-  };
+  const hydrateRTDisplaySet = useCallback(
+    ({ rtDisplaySet, viewportId }) => {
+      commandsManager.runCommand('hydrateRTSDisplaySet', {
+        displaySet: rtDisplaySet,
+        viewportId,
+      });
+    },
+    [commandsManager]
+  );

  const getCornerstoneViewport = useCallback(() => {
    const { component: Component } = extensionManager.getModuleEntry(
@@ -115,6 +129,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
          toolGroupId: toolGroupId,
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
+          presentationIds: viewportOptions.presentationIds,
        }}
        onElementEnabled={evt => {
          props.onElementEnabled?.(evt);
@@ -127,26 +142,15 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

  const onSegmentChange = useCallback(
    direction => {
-      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, toolGroupId);
-      setSelectedSegment(newSelectedSegmentIndex);
+      utils.handleSegmentChange({
+        direction,
+        segDisplaySet: rtDisplaySet,
+        viewportId,
+        selectedSegmentObjectIndex,
+        segmentationService,
+      });
    },
-    [selectedSegment]
+    [selectedSegmentObjectIndex]
  );

  useEffect(() => {
@@ -177,6 +181,19 @@ 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',
@@ -239,11 +256,9 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

    toolGroup = createRTToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);

-    setToolGroupCreated(true);
-
    return () => {
      // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
+      segmentationService.removeSegmentationRepresentations(viewportId);

      toolGroupService.destroyToolGroup(toolGroupId);
    };
@@ -254,11 +269,27 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

    return () => {
      // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
+      segmentationService.removeSegmentationRepresentations(viewportId);
      referencedDisplaySetRef.current = null;
    };
  }, [rtDisplaySet]);

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

@@ -282,24 +313,8 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    });
  }

-  const onStatusClick = useCallback(async () => {
-    // Before hydrating a RT and make it added to all viewports in the grid
-    // that share the same frameOfReferenceUID, we need to store the viewport grid
-    // presentation state, so that we can restore it after hydrating the RT. This is
-    // required if the user has changed the viewport (other viewport than RT viewport)
-    // presentation state (w/l and invert) and then opens the RT. If we don't store
-    // the presentation state, the viewport will be reset to the default presentation
-    storePresentationState();
-    const isHydrated = await hydrateRTDisplaySet({
-      rtDisplaySet,
-      viewportId,
-    });
-
-    setIsHydrated(isHydrated);
-  }, [hydrateRTDisplaySet, rtDisplaySet, storePresentationState, viewportId]);
-
  useEffect(() => {
-    viewportActionCornersService.setComponents([
+    viewportActionCornersService.addComponents([
      {
        viewportId,
        id: 'viewportStatusComponent',
@@ -318,7 +333,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
            key="actionArrows"
            onArrowsClick={onSegmentChange}
            className={
-              viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
+              viewportId === activeViewportId ? 'visible' : 'invisible group-hover/pane:visible'
            }
          ></ViewportActionArrows>
        ),
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, Tooltip } from '@ohif/ui';
+import { ViewportActionButton } from '@ohif/ui-next';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';

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

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

@@ -34,13 +33,7 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
          <span className="ml-1">RTSTRUCT</span>
        </div>
        {!isHydrated && (
-          <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>
+          <ViewportActionButton onInteraction={onStatusClick}>{loadStr}</ViewportActionButton>
        )}
      </div>
    );
@@ -49,11 +42,15 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip
-          content={<ToolTipMessage />}
-          position="bottom-left"
-        >
-          <StatusArea />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <ToolTipMessage />
+          </TooltipContent>
        </Tooltip>
      )}
      {!ToolTipMessage && <StatusArea />}
@@ -37,7 +37,6 @@ 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.9.0-beta.102",
+  "version": "3.10.2",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -33,10 +33,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.102",
-    "@ohif/extension-cornerstone": "3.9.0-beta.102",
-    "@ohif/extension-default": "3.9.0-beta.102",
-    "@ohif/i18n": "3.9.0-beta.102",
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
    "prop-types": "^15.6.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.86.0",
-    "@cornerstonejs/core": "^1.86.0",
-    "@kitware/vtk.js": "30.4.1",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@kitware/vtk.js": "32.12.0",
    "react-color": "^2.19.3"
  }
 }
@@ -1,31 +1,27 @@
 import dcmjs from 'dcmjs';
-import { createReportDialogPrompt } from '@ohif/extension-default';
-import { Types } from '@ohif/core';
+import { classes, Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
-import {
-  segmentation as cornerstoneToolsSegmentation,
-  Enums as cornerstoneToolsEnums,
-  utilities,
-} from '@cornerstonejs/tools';
+import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
-import { classes, DicomMetadataStore } from '@ohif/core';
+import { createReportDialogPrompt } from '@ohif/extension-default';
+import { 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 {
-  updateViewportsForSegmentationRendering,
-  getUpdatedViewportsForSegmentation,
-  getTargetViewport,
-} from './utils/hydrationUtils';
-const { segmentation: segmentationUtils } = utilities;
+import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';

 const { datasetToBlob } = dcmjs.data;

+const getTargetViewport = ({ viewportId, viewportGridService }) => {
+  const { viewports, activeViewportId } = viewportGridService.getState();
+  const targetViewportId = viewportId || activeViewportId;
+
+  const viewport = viewports.get(targetViewportId);
+
+  return viewport;
+};
+
 const {
  Cornerstone3D: {
-    Segmentation: { generateLabelMaps2DFrom3D, generateSegmentation },
+    Segmentation: { generateSegmentation },
  },
 } = adaptersSEG;

@@ -41,88 +37,10 @@ const commandsModule = ({
  servicesManager,
  extensionManager,
 }: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
-  const {
-    uiNotificationService,
-    segmentationService,
-    uiDialogService,
-    displaySetService,
-    viewportGridService,
-    toolGroupService,
-    cornerstoneViewportService,
-  } = servicesManager.services;
+  const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
+    servicesManager.services as AppTypes.Services;

  const actions = {
-    /**
-     * Retrieves a list of viewports that require updates in preparation for segmentation rendering.
-     * This function evaluates viewports based on their compatibility with the provided segmentation's
-     * frame of reference UID and appends them to the updated list if they should render the segmentation.
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.viewportId - the ID of the viewport to be updated.
-     * @param params.servicesManager - The services manager
-     * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
-     *
-     * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
-     */
-    getUpdatedViewportsForSegmentation,
-    /**
-     * Creates an empty segmentation for a specified viewport.
-     * It first checks if the display set associated with the viewport is reconstructable.
-     * If not, it raises a notification error. Otherwise, it creates a new segmentation
-     * for the display set after handling the necessary steps for making the viewport
-     * a volume viewport first
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.viewportId - the target viewport ID.
-     *
-     */
-    createEmptySegmentationForViewport: async ({ viewportId }) => {
-      const viewport = getTargetViewport({ viewportId, viewportGridService });
-      // Todo: add support for multiple display sets
-      const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
-
-      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-
-      if (!displaySet.isReconstructable) {
-        uiNotificationService.show({
-          title: 'Segmentation',
-          message: 'Segmentation is not supported for non-reconstructible displaysets yet',
-          type: 'error',
-        });
-        return;
-      }
-
-      updateViewportsForSegmentationRendering({
-        viewportId,
-        servicesManager,
-        displaySet,
-        loadFn: async () => {
-          const currentSegmentations = segmentationService.getSegmentations();
-          const segmentationId = await segmentationService.createSegmentationForDisplaySet(
-            displaySetInstanceUID,
-            { label: `Segmentation ${currentSegmentations.length + 1}` }
-          );
-
-          const toolGroupId = viewport.viewportOptions.toolGroupId;
-
-          await segmentationService.addSegmentationRepresentationToToolGroup(
-            toolGroupId,
-            segmentationId
-          );
-
-          // Add only one segment for now
-          segmentationService.addSegment(segmentationId, {
-            toolGroupId,
-            segmentIndex: 1,
-            properties: {
-              label: 'Segment 1',
-            },
-          });
-
-          return segmentationId;
-        },
-      });
-    },
    /**
     * Loads segmentations for a specified viewport.
     * The function prepares the viewport for rendering, then loads the segmentation details.
@@ -134,106 +52,30 @@ const commandsModule = ({
     *
     */
    loadSegmentationsForViewport: async ({ segmentations, viewportId }) => {
-      updateViewportsForSegmentationRendering({
-        viewportId,
-        servicesManager,
-        loadFn: async () => {
-          // Todo: handle adding more than one segmentation
-          const viewport = getTargetViewport({ viewportId, viewportGridService });
-          const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
-
-          const segmentation = segmentations[0];
-          const segmentationId = segmentation.id;
-          const label = segmentation.label;
-          const segments = segmentation.segments;
-
-          delete segmentation.segments;
-
-          await segmentationService.createSegmentationForDisplaySet(displaySetInstanceUID, {
-            segmentationId,
-            label,
-          });
-
-          if (segmentation.scalarData) {
-            const labelmapVolume = segmentationService.getLabelmapVolume(segmentationId);
-            labelmapVolume.scalarData.set(segmentation.scalarData);
-          }
-
-          segmentationService.addOrUpdateSegmentation(segmentation);
-
-          const toolGroupId = viewport.viewportOptions.toolGroupId;
-          await segmentationService.addSegmentationRepresentationToToolGroup(
-            toolGroupId,
-            segmentationId
-          );
-
-          segments.forEach(segment => {
-            if (segment === null) {
-              return;
-            }
-            segmentationService.addSegment(segmentationId, {
-              segmentIndex: segment.segmentIndex,
-              toolGroupId,
-              properties: {
-                color: segment.color,
-                label: segment.label,
-                opacity: segment.opacity,
-                isLocked: segment.isLocked,
-                visibility: segment.isVisible,
-                active: segmentation.activeSegmentIndex === segment.segmentIndex,
-              },
-            });
-          });
-
-          if (segmentation.centroidsIJK) {
-            segmentationService.setCentroids(segmentation.id, segmentation.centroidsIJK);
-          }
-
-          return segmentationId;
-        },
-      });
-    },
-    /**
-     * Loads segmentation display sets for a specified viewport.
-     * Depending on the modality of the display set (SEG or RTSTRUCT),
-     * it chooses the appropriate service function to create
-     * the segmentation for the display set.
-     * The function then prepares the viewport for rendering segmentation.
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.viewportId - ID of the viewport where the segmentation display sets should be loaded.
-     * @param params.displaySets - Array of display sets to be loaded for segmentation.
-     *
-     */
-    loadSegmentationDisplaySetsForViewport: async ({ viewportId, displaySets }) => {
      // Todo: handle adding more than one segmentation
-      const displaySet = displaySets[0];
-      const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-        displaySet.referencedDisplaySetInstanceUID
-      );
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      const initialSliceIndex = viewport.getSliceIndex();
+      const viewport = getTargetViewport({ viewportId, viewportGridService });
+      const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];

-      updateViewportsForSegmentationRendering({
-        viewportId,
-        servicesManager,
-        displaySet,
-        loadFn: async () => {
-          const segDisplaySet = displaySet;
-          const suppressEvents = false;
-          const serviceFunction =
-            segDisplaySet.Modality === 'SEG'
-              ? 'createSegmentationForSEGDisplaySet'
-              : 'createSegmentationForRTDisplaySet';
+      const segmentation = segmentations[0];
+      const segmentationId = segmentation.segmentationId;
+      const label = segmentation.config.label;
+      const segments = segmentation.config.segments;

-          const boundFn = segmentationService[serviceFunction].bind(segmentationService);
-          const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
-          const segmentation = segmentationService.getSegmentation(segmentationId);
-          segmentation.description = `S${referencedDisplaySet.SeriesNumber}: ${referencedDisplaySet.SeriesDescription}`;
-          return segmentationId;
-        },
-        initialSliceIndex,
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+      await segmentationService.createLabelmapForDisplaySet(displaySet, {
+        segmentationId,
+        segments,
+        label,
      });
+
+      segmentationService.addOrUpdateSegmentation(segmentation);
+
+      await segmentationService.addSegmentationRepresentation(viewport.viewportId, {
+        segmentationId,
+      });
+
+      return segmentationId;
    },
    /**
     * Generates a segmentation from a given segmentation ID.
@@ -251,25 +93,61 @@ const commandsModule = ({
    generateSegmentation: ({ segmentationId, options = {} }) => {
      const segmentation = cornerstoneToolsSegmentation.state.getSegmentation(segmentationId);

-      const { referencedVolumeId } = segmentation.representationData.LABELMAP;
+      const { imageIds } = segmentation.representationData.Labelmap;

-      const segmentationVolume = cache.getVolume(segmentationId);
-      const referencedVolume = cache.getVolume(referencedVolumeId);
-      const referencedImages = referencedVolume.getCornerstoneImages();
+      const segImages = imageIds.map(imageId => cache.getImage(imageId));
+      const referencedImages = segImages.map(image => cache.getImage(image.referencedImageId));

-      const labelmapObj = generateLabelMaps2DFrom3D(segmentationVolume);
+      const labelmaps2D = [];

-      // Generate fake metadata as an example
-      labelmapObj.metadata = [];
+      let z = 0;
+
+      for (const segImage of segImages) {
+        const segmentsOnLabelmap = new Set();
+        const pixelData = segImage.getPixelData();
+        const { rows, columns } = segImage;
+
+        // Use a single pass through the pixel data
+        for (let i = 0; i < pixelData.length; i++) {
+          const segment = pixelData[i];
+          if (segment !== 0) {
+            segmentsOnLabelmap.add(segment);
+          }
+        }
+
+        labelmaps2D[z++] = {
+          segmentsOnLabelmap: Array.from(segmentsOnLabelmap),
+          pixelData,
+          rows,
+          columns,
+        };
+      }
+
+      const allSegmentsOnLabelmap = labelmaps2D.map(labelmap => labelmap.segmentsOnLabelmap);
+
+      const labelmap3D = {
+        segmentsOnLabelmap: Array.from(new Set(allSegmentsOnLabelmap.flat())),
+        metadata: [],
+        labelmaps2D,
+      };

      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
-      segmentationInOHIF.segments.forEach(segment => {
+      const representations = segmentationService.getRepresentationsForSegmentation(segmentationId);
+
+      Object.entries(segmentationInOHIF.segments).forEach(([segmentIndex, segment]) => {
        // segmentation service already has a color for each segment
        if (!segment) {
          return;
        }
-        const segmentIndex = segment.segmentIndex;
-        const { label, color } = segment;
+
+        const { label } = segment;
+
+        const firstRepresentation = representations[0];
+        const color = segmentationService.getSegmentColor(
+          firstRepresentation.viewportId,
+          segmentationId,
+          segment.segmentIndex
+        );

        const RecommendedDisplayCIELabValue = dcmjs.data.Colors.rgb2DICOMLAB(
          color.slice(0, 3).map(value => value / 255)
@@ -292,12 +170,12 @@ const commandsModule = ({
            CodeMeaning: 'Tissue',
          },
        };
-        labelmapObj.metadata[segmentIndex] = segmentMetadata;
+        labelmap3D.metadata[segmentIndex] = segmentMetadata;
      });

      const generatedSegmentation = generateSegmentation(
        referencedImages,
-        labelmapObj,
+        labelmap3D,
        metaData,
        options
      );
@@ -335,14 +213,6 @@ 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) {
@@ -350,33 +220,50 @@ const commandsModule = ({
      }

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

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

-      if (!generatedData || !generatedData.dataset) {
-        throw new Error('Error during segmentation generation');
+      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;
+        }
      }
-
-      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.
@@ -385,21 +272,24 @@ const commandsModule = ({
     * converts dataset to downloadable blob.
     *
     */
-    downloadRTSS: ({ segmentationId }) => {
+    downloadRTSS: async ({ segmentationId }) => {
      const segmentations = segmentationService.getSegmentation(segmentationId);
-      const vtkUtils = {
-        vtkImageMarchingSquares,
-        vtkDataArray,
-        vtkImageData,
-      };

-      const RTSS = generateRTSSFromSegmentations(
+      // inject colors to the segmentIndex
+      const firstRepresentation =
+        segmentationService.getRepresentationsForSegmentation(segmentationId)[0];
+      Object.entries(segmentations.segments).forEach(([segmentIndex, segment]) => {
+        segment.color = segmentationService.getSegmentColor(
+          firstRepresentation.viewportId,
+          segmentationId,
+          segmentIndex
+        );
+      });
+
+      const RTSS = await generateRTSSFromSegmentations(
        segmentations,
        classes.MetadataProvider,
-        DicomMetadataStore,
-        cache,
-        cornerstoneToolsEnums,
-        vtkUtils
+        DicomMetadataStore
      );

      try {
@@ -412,51 +302,13 @@ const commandsModule = ({
        console.warn(e);
      }
    },
-    setBrushSize: ({ value, toolNames }) => {
-      const brushSize = Number(value);
-
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        if (toolNames?.length === 0) {
-          segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize);
-        } else {
-          toolNames?.forEach(toolName => {
-            segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
-          });
-        }
-      });
-    },
-    setThresholdRange: ({
-      value,
-      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
-    }) => {
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-        toolNames?.forEach(toolName => {
-          toolGroup.setToolConfiguration(toolName, {
-            strategySpecificConfiguration: {
-              THRESHOLD: {
-                threshold: value,
-              },
-            },
-          });
-        });
-      });
-    },
  };

  const definitions = {
-    getUpdatedViewportsForSegmentation: {
-      commandFn: actions.getUpdatedViewportsForSegmentation,
-    },
-    loadSegmentationDisplaySetsForViewport: {
-      commandFn: actions.loadSegmentationDisplaySetsForViewport,
-    },
    loadSegmentationsForViewport: {
      commandFn: actions.loadSegmentationsForViewport,
    },
-    createEmptySegmentationForViewport: {
-      commandFn: actions.createEmptySegmentationForViewport,
-    },
+
    generateSegmentation: {
      commandFn: actions.generateSegmentation,
    },
@@ -469,12 +321,6 @@ const commandsModule = ({
    downloadRTSS: {
      commandFn: actions.downloadRTSS,
    },
-    setBrushSize: {
-      commandFn: actions.setBrushSize,
-    },
-    setThresholdRange: {
-      commandFn: actions.setThresholdRange,
-    },
  };

  return {
@@ -20,6 +20,17 @@ const segProtocol: Types.HangingProtocol.Protocol = {
      viewportType: 'stack',
      toolGroupId: 'default',
      allowUnmatchedView: true,
+      syncGroups: [
+        {
+          type: 'hydrateseg',
+          id: 'sameFORId',
+          source: true,
+          target: true,
+          // options: {
+          //   matchingRules: ['sameFOR'],
+          // },
+        },
+      ],
    },
    displaySets: [
      {
@@ -52,7 +63,20 @@ const segProtocol: Types.HangingProtocol.Protocol = {
      },
      viewports: [
        {
-          viewportOptions: { allowUnmatchedView: true },
+          viewportOptions: {
+            allowUnmatchedView: true,
+            syncGroups: [
+              {
+                type: 'hydrateseg',
+                id: 'sameFORId',
+                source: true,
+                target: true,
+                // options: {
+                //   matchingRules: ['sameFOR'],
+                // },
+              },
+            ],
+          },
          displaySets: [
            {
              id: 'segDisplaySetId',
@@ -1,6 +1,6 @@
 import { utils } from '@ohif/core';
-import { metaData, cache, triggerEvent, eventTarget } from '@cornerstonejs/core';
-import { CONSTANTS } from '@cornerstonejs/tools';
+import { metaData, triggerEvent, eventTarget } from '@cornerstonejs/core';
+import { CONSTANTS, segmentation as cstSegmentation } from '@cornerstonejs/tools';
 import { adaptersSEG, Enums } from '@cornerstonejs/adapters';

 import { SOPClassHandlerId } from './id';
@@ -70,28 +70,32 @@ function _getDisplaySetsFromSeries(

  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
+  const { displaySetService } = servicesManager.services;
+  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+    displaySet.referencedSeriesInstanceUID
+  );

-  displaySet.getReferenceDisplaySet = () => {
-    const { displaySetService } = servicesManager.services;
-    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
-      displaySet.referencedSeriesInstanceUID
+  const referencedDisplaySet = referencedDisplaySets[0];
+
+  if (!referencedDisplaySet) {
+    // subscribe to display sets added which means at some point it will be available
+    const { unsubscribe } = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SETS_ADDED,
+      ({ displaySetsAdded }) => {
+        // here we can also do a little bit of search, since sometimes DICOM SEG
+        // does not contain the referenced display set uid , and we can just
+        // see which of the display sets added is more similar and assign it
+        // to the referencedDisplaySet
+        const addedDisplaySet = displaySetsAdded[0];
+        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
+          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          unsubscribe();
+        }
+      }
    );
-
-    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
-      throw new Error('Referenced DisplaySet is missing for the SEG');
-    }
-
-    const referencedDisplaySet = referencedDisplaySets[0];
-
+  } else {
    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
-
-    // Todo: this needs to be able to work with other reference volumes (other than streaming) such as nifti, etc.
-    displaySet.referencedVolumeURI = referencedDisplaySet.displaySetInstanceUID;
-    const referencedVolumeId = `cornerstoneStreamingImageVolume:${displaySet.referencedVolumeURI}`;
-    displaySet.referencedVolumeId = referencedVolumeId;
-
-    return referencedDisplaySet;
-  };
+  }

  displaySet.load = async ({ headers }) =>
    await _load(displaySet, servicesManager, extensionManager, headers);
@@ -111,7 +115,7 @@ function _load(
  if (
    (segDisplaySet.loading || segDisplaySet.isLoaded) &&
    loadPromises[SOPInstanceUID] &&
-    _segmentationExists(segDisplaySet, segmentationService)
+    _segmentationExists(segDisplaySet)
  ) {
    return loadPromises[SOPInstanceUID];
  }
@@ -122,17 +126,21 @@ function _load(
  // and also return the same promise to any other callers.
  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
    if (!segDisplaySet.segments || Object.keys(segDisplaySet.segments).length === 0) {
-      await _loadSegments({
-        extensionManager,
-        servicesManager,
-        segDisplaySet,
-        headers,
-      });
+      try {
+        await _loadSegments({
+          extensionManager,
+          servicesManager,
+          segDisplaySet,
+          headers,
+        });
+      } catch (e) {
+        segDisplaySet.loading = false;
+        return reject(e);
+      }
    }

-    const suppressEvents = true;
    segmentationService
-      .createSegmentationForSEGDisplaySet(segDisplaySet, null, suppressEvents)
+      .createSegmentationForSEGDisplaySet(segDisplaySet)
      .then(() => {
        segDisplaySet.loading = false;
        resolve();
@@ -161,20 +169,24 @@ async function _loadSegments({
  const { dicomLoaderService } = utilityModule.exports;
  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(segDisplaySet, null, headers);

-  const cachedReferencedVolume = cache.getVolume(segDisplaySet.referencedVolumeId);
+  const referencedDisplaySet = servicesManager.services.displaySetService.getDisplaySetByUID(
+    segDisplaySet.referencedDisplaySetInstanceUID
+  );

-  if (!cachedReferencedVolume) {
-    throw new Error(
-      'Referenced Volume is missing for the SEG, and stack viewport SEG is not supported yet'
-    );
+  if (!referencedDisplaySet) {
+    throw new Error('referencedDisplaySet is missing for SEG');
  }

-  const { imageIds } = cachedReferencedVolume;
+  let { imageIds } = referencedDisplaySet;
+
+  if (!imageIds) {
+    // try images
+    const { images } = referencedDisplaySet;
+    imageIds = images.map(image => image.imageId);
+  }

  // Todo: what should be defaults here
  const tolerance = 0.001;
-  const skipOverlapping = true;
-
  eventTarget.addEventListener(Enums.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
    const { percentComplete } = evt.detail;
    segmentationService._broadcastEvent(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, {
@@ -182,11 +194,10 @@ async function _loadSegments({
    });
  });

-  const results = await adaptersSEG.Cornerstone3D.Segmentation.generateToolState(
+  const results = await adaptersSEG.Cornerstone3D.Segmentation.createFromDICOMSegBuffer(
    imageIds,
    arrayBuffer,
-    metaData,
-    { skipOverlapping, tolerance, eventTarget, triggerEvent }
+    { metadataProvider: metaData, tolerance }
  );

  let usedRecommendedDisplayCIELabValue = true;
@@ -203,15 +214,6 @@ async function _loadSegments({
    }
  });

-  if (results.overlappingSegments) {
-    uiNotificationService.show({
-      title: 'Overlapping Segments',
-      message:
-        'Unsupported overlapping segments detected, segmentation rendering results may be incorrect.',
-      type: 'warning',
-    });
-  }
-
  if (!usedRecommendedDisplayCIELabValue) {
    // Display a notification about the non-utilization of RecommendedDisplayCIELabValue
    uiNotificationService.show({
@@ -226,9 +228,8 @@ async function _loadSegments({
  Object.assign(segDisplaySet, results);
 }

-function _segmentationExists(segDisplaySet, segmentationService: AppTypes.SegmentationService) {
-  // This should be abstracted with the CornerstoneCacheService
-  return segmentationService.getSegmentation(segDisplaySet.displaySetInstanceUID);
+function _segmentationExists(segDisplaySet) {
+  return cstSegmentation.state.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }

 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
@@ -1,6 +1,15 @@
 export function getToolbarModule({ servicesManager }: withAppTypes) {
  const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
  return [
+    {
+      name: 'evaluate.cornerstone.hasSegmentation',
+      evaluate: ({ viewportId }) => {
+        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
+        return {
+          disabled: !segmentations?.length,
+        };
+      },
+    },
    {
      name: 'evaluate.cornerstone.segmentation',
      evaluate: ({ viewportId, button, toolNames, disabledText }) => {
@@ -8,31 +17,43 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
        // forcing the button to have black background since initially
        // it is designed for the toolbox not the toolbar on top
        // we should then branch the buttonSectionId to have different styles
-        const segmentations = segmentationService.getSegmentations();
+        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
        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',
          };
        }

+        if (!toolNames) {
+          return {
+            disabled: false,
+            // isActive: false,
+          };
+        }
+
        const toolName = toolbarService.getToolNameForButton(button);

        if (!toolGroup.hasTool(toolName) && !toolNames) {
          return {
            disabled: true,
-            className: '!text-common-bright ohif-disabled',
            disabledText: disabledText ?? 'Not available on the current viewport',
          };
        }
@@ -43,12 +64,6 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {

        return {
          disabled: false,
-          className: isPrimaryActive
-            ? '!text-black !bg-primary-light hover:bg-primary-light hover-text-black hover:cursor-pointer'
-            : '!text-common-bright !bg-black hover:bg-primary-light hover:cursor-pointer hover:text-black',
-          // Todo: isActive right now is used for nested buttons where the primary
-          // button needs to be fully rounded (vs partial rounded) when active
-          // otherwise it does not have any other use
          isActive: isPrimaryActive,
        };
      },
@@ -3,7 +3,6 @@ import React from 'react';

 import getSopClassHandlerModule from './getSopClassHandlerModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
-import getPanelModule from './getPanelModule';
 import getCommandsModule from './commandsModule';
 import { getToolbarModule } from './getToolbarModule';

@@ -28,13 +27,6 @@ const extension = {
   * You ID can be anything you want, but it should be unique.
   */
  id,
-  /**
-   * PanelModule should provide a list of panels that will be available in OHIF
-   * for Modes to consume and render. Each panel is defined by a {name,
-   * iconName, iconLabel, label, component} object. Example of a panel module
-   * is the StudyBrowserPanel that is provided by the default extension in OHIF.
-   */
-  getPanelModule,
  getCommandsModule,
  getToolbarModule,
  getViewportModule({ servicesManager, extensionManager, commandsManager }) {
@@ -1,393 +0,0 @@
-import { createReportAsync } from '@ohif/extension-default';
-import React, { useEffect, useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { SegmentationGroupTable, SegmentationGroupTableExpanded } from '@ohif/ui';
-import { SegmentationPanelMode } from '../types/segmentation';
-import callInputDialog from './callInputDialog';
-import callColorPickerDialog from './colorPickerDialog';
-import { useTranslation } from 'react-i18next';
-import { Separator } from '@ohif/ui-next';
-
-const components = {
-  [SegmentationPanelMode.Expanded]: SegmentationGroupTableExpanded,
-  [SegmentationPanelMode.Dropdown]: SegmentationGroupTable,
-};
-
-export default function PanelSegmentation({
-  servicesManager,
-  commandsManager,
-  extensionManager,
-  configuration,
-}: withAppTypes) {
-  const {
-    segmentationService,
-    viewportGridService,
-    uiDialogService,
-    displaySetService,
-    cornerstoneViewportService,
-  } = servicesManager.services;
-
-  const { t } = useTranslation('PanelSegmentation');
-
-  const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
-  const [addSegmentationClassName, setAddSegmentationClassName] = useState('');
-  const [segmentationConfiguration, setSegmentationConfiguration] = useState(
-    segmentationService.getConfiguration()
-  );
-
-  const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
-
-  useEffect(() => {
-    // ~~ Subscription
-    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
-    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
-    const removed = segmentationService.EVENTS.SEGMENTATION_REMOVED;
-    const subscriptions = [];
-
-    [added, updated, removed].forEach(evt => {
-      const { unsubscribe } = segmentationService.subscribe(evt, () => {
-        const segmentations = segmentationService.getSegmentations();
-        setSegmentations(segmentations);
-        setSegmentationConfiguration(segmentationService.getConfiguration());
-      });
-      subscriptions.push(unsubscribe);
-    });
-
-    return () => {
-      subscriptions.forEach(unsub => {
-        unsub();
-      });
-    };
-  }, []);
-
-  // temporary measure to not allow add segmentation when the selected viewport
-  // is stack viewport
-  useEffect(() => {
-    const handleActiveViewportChange = viewportId => {
-      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(
-        viewportId || viewportGridService.getActiveViewportId()
-      );
-
-      if (!displaySetUIDs) {
-        return;
-      }
-
-      const isReconstructable =
-        displaySetUIDs?.some(displaySetUID => {
-          const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
-          return displaySet?.isReconstructable;
-        }) || false;
-
-      if (isReconstructable) {
-        setAddSegmentationClassName('');
-      } else {
-        setAddSegmentationClassName('ohif-disabled');
-      }
-    };
-
-    // Handle initial state
-    handleActiveViewportChange();
-
-    const changedGrid = viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED;
-    const ready = viewportGridService.EVENTS.VIEWPORTS_READY;
-
-    const subsGrid = [];
-    [ready, changedGrid].forEach(evt => {
-      const { unsubscribe } = viewportGridService.subscribe(evt, ({ viewportId }) => {
-        handleActiveViewportChange(viewportId);
-      });
-
-      subsGrid.push(unsubscribe);
-    });
-
-    const changedData = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
-
-    const subsData = [];
-    [changedData].forEach(evt => {
-      const { unsubscribe } = cornerstoneViewportService.subscribe(evt, () => {
-        handleActiveViewportChange();
-      });
-
-      subsData.push(unsubscribe);
-    });
-
-    // Clean up
-    return () => {
-      subsGrid.forEach(unsub => unsub());
-      subsData.forEach(unsub => unsub());
-    };
-  }, []);
-
-  const getToolGroupIds = segmentationId => {
-    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
-
-    return toolGroupIds;
-  };
-
-  const onSegmentationAdd = async () => {
-    commandsManager.runCommand('createEmptySegmentationForViewport', {
-      viewportId: viewportGridService.getActiveViewportId(),
-    });
-  };
-
-  const onSegmentationClick = (segmentationId: string) => {
-    segmentationService.setActiveSegmentationForToolGroup(segmentationId);
-  };
-
-  const onSegmentationDelete = (segmentationId: string) => {
-    segmentationService.remove(segmentationId);
-  };
-
-  const onSegmentAdd = segmentationId => {
-    segmentationService.addSegment(segmentationId);
-  };
-
-  const onSegmentClick = (segmentationId, segmentIndex) => {
-    segmentationService.setActiveSegment(segmentationId, segmentIndex);
-
-    const toolGroupIds = getToolGroupIds(segmentationId);
-
-    toolGroupIds.forEach(toolGroupId => {
-      // const toolGroupId =
-      segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
-      segmentationService.jumpToSegmentCenter(segmentationId, segmentIndex, toolGroupId);
-    });
-  };
-
-  const onSegmentEdit = (segmentationId, segmentIndex) => {
-    const segmentation = segmentationService.getSegmentation(segmentationId);
-
-    const segment = segmentation.segments[segmentIndex];
-    const { label } = segment;
-
-    callInputDialog(uiDialogService, label, (label, actionId) => {
-      if (label === '') {
-        return;
-      }
-
-      segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
-    });
-  };
-
-  const onSegmentationEdit = segmentationId => {
-    const segmentation = segmentationService.getSegmentation(segmentationId);
-    const { label } = segmentation;
-
-    callInputDialog(uiDialogService, label, (label, actionId) => {
-      if (label === '') {
-        return;
-      }
-
-      segmentationService.addOrUpdateSegmentation(
-        {
-          id: segmentationId,
-          label,
-        },
-        false, // suppress event
-        true // notYetUpdatedAtSource
-      );
-    });
-  };
-
-  const onSegmentColorClick = (segmentationId, segmentIndex) => {
-    const segmentation = segmentationService.getSegmentation(segmentationId);
-
-    const segment = segmentation.segments[segmentIndex];
-    const { color, opacity } = segment;
-
-    const rgbaColor = {
-      r: color[0],
-      g: color[1],
-      b: color[2],
-      a: opacity / 255.0,
-    };
-
-    callColorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
-      if (actionId === 'cancel') {
-        return;
-      }
-
-      segmentationService.setSegmentRGBAColor(segmentationId, segmentIndex, [
-        newRgbaColor.r,
-        newRgbaColor.g,
-        newRgbaColor.b,
-        newRgbaColor.a * 255.0,
-      ]);
-    });
-  };
-
-  const onSegmentDelete = (segmentationId, segmentIndex) => {
-    segmentationService.removeSegment(segmentationId, segmentIndex);
-  };
-
-  // segment hide
-  const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
-    const segmentation = segmentationService.getSegmentation(segmentationId);
-    const segmentInfo = segmentation.segments[segmentIndex];
-    const isVisible = !segmentInfo.isVisible;
-    const toolGroupIds = getToolGroupIds(segmentationId);
-
-    // Todo: right now we apply the visibility to all tool groups
-    toolGroupIds.forEach(toolGroupId => {
-      segmentationService.setSegmentVisibility(
-        segmentationId,
-        segmentIndex,
-        isVisible,
-        toolGroupId
-      );
-    });
-  };
-
-  const onToggleSegmentLock = (segmentationId, segmentIndex) => {
-    segmentationService.toggleSegmentLocked(segmentationId, segmentIndex);
-  };
-
-  const onToggleSegmentationVisibility = segmentationId => {
-    segmentationService.toggleSegmentationVisibility(segmentationId);
-    const segmentation = segmentationService.getSegmentation(segmentationId);
-    const isVisible = segmentation.isVisible;
-    const segments = segmentation.segments;
-
-    const toolGroupIds = getToolGroupIds(segmentationId);
-
-    toolGroupIds.forEach(toolGroupId => {
-      segments.forEach((segment, segmentIndex) => {
-        segmentationService.setSegmentVisibility(
-          segmentationId,
-          segmentIndex,
-          isVisible,
-          toolGroupId
-        );
-      });
-    });
-  };
-
-  const _setSegmentationConfiguration = useCallback(
-    (segmentationId, key, value) => {
-      segmentationService.setConfiguration({
-        segmentationId,
-        [key]: value,
-      });
-    },
-    [segmentationService]
-  );
-
-  const onSegmentationDownload = segmentationId => {
-    commandsManager.runCommand('downloadSegmentation', {
-      segmentationId,
-    });
-  };
-
-  const storeSegmentation = async segmentationId => {
-    const datasources = extensionManager.getActiveDataSource();
-
-    const displaySetInstanceUIDs = await createReportAsync({
-      servicesManager,
-      getReport: () =>
-        commandsManager.runCommand('storeSegmentation', {
-          segmentationId,
-          dataSource: datasources[0],
-        }),
-      reportType: 'Segmentation',
-    });
-
-    // Show the exported report in the active viewport as read only (similar to SR)
-    if (displaySetInstanceUIDs) {
-      // clear the segmentation that we exported, similar to the storeMeasurement
-      // where we remove the measurements and prompt again the user if they would like
-      // to re-read the measurements in a SR read only viewport
-      segmentationService.remove(segmentationId);
-
-      viewportGridService.setDisplaySetsForViewport({
-        viewportId: viewportGridService.getActiveViewportId(),
-        displaySetInstanceUIDs,
-      });
-    }
-  };
-
-  const onSegmentationDownloadRTSS = segmentationId => {
-    commandsManager.runCommand('downloadRTSS', {
-      segmentationId,
-    });
-  };
-
-  const SegmentationGroupTableComponent =
-    components[configuration?.segmentationPanelMode] || SegmentationGroupTable;
-  const allowAddSegment = configuration?.addSegment;
-  const onSegmentationAddWrapper =
-    configuration?.onSegmentationAdd && typeof configuration?.onSegmentationAdd === 'function'
-      ? configuration?.onSegmentationAdd
-      : onSegmentationAdd;
-
-  return (
-    <>
-      <SegmentationGroupTableComponent
-        title={t('Segmentations')}
-        segmentations={segmentations}
-        disableEditing={configuration.disableEditing}
-        activeSegmentationId={selectedSegmentationId || ''}
-        onSegmentationAdd={onSegmentationAddWrapper}
-        addSegmentationClassName={addSegmentationClassName}
-        showAddSegment={allowAddSegment}
-        onSegmentationClick={onSegmentationClick}
-        onSegmentationDelete={onSegmentationDelete}
-        onSegmentationDownload={onSegmentationDownload}
-        onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
-        storeSegmentation={storeSegmentation}
-        onSegmentationEdit={onSegmentationEdit}
-        onSegmentClick={onSegmentClick}
-        onSegmentEdit={onSegmentEdit}
-        onSegmentAdd={onSegmentAdd}
-        onSegmentColorClick={onSegmentColorClick}
-        onSegmentDelete={onSegmentDelete}
-        onToggleSegmentVisibility={onToggleSegmentVisibility}
-        onToggleSegmentLock={onToggleSegmentLock}
-        onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-        showDeleteSegment={true}
-        segmentationConfig={{ initialConfig: segmentationConfiguration }}
-        setRenderOutline={value =>
-          _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
-        }
-        setOutlineOpacityActive={value =>
-          _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
-        }
-        setRenderFill={value =>
-          _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
-        }
-        setRenderInactiveSegmentations={value =>
-          _setSegmentationConfiguration(
-            selectedSegmentationId,
-            'renderInactiveSegmentations',
-            value
-          )
-        }
-        setOutlineWidthActive={value =>
-          _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
-        }
-        setFillAlpha={value =>
-          _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
-        }
-        setFillAlphaInactive={value =>
-          _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
-        }
-      />
-    </>
-  );
-}
-
-PanelSegmentation.propTypes = {
-  commandsManager: PropTypes.shape({
-    runCommand: PropTypes.func.isRequired,
-  }),
-  servicesManager: PropTypes.shape({
-    services: PropTypes.shape({
-      segmentationService: PropTypes.shape({
-        getSegmentation: PropTypes.func.isRequired,
-        getSegmentations: PropTypes.func.isRequired,
-        toggleSegmentationVisibility: PropTypes.func.isRequired,
-        subscribe: PropTypes.func.isRequired,
-        EVENTS: PropTypes.object.isRequired,
-      }).isRequired,
-    }).isRequired,
-  }).isRequired,
-};
@@ -1,62 +0,0 @@
-import React from 'react';
-import { Input, Dialog, ButtonEnums } from '@ohif/ui';
-
-function callInputDialog(uiDialogService, label, callback) {
-  const dialogId = 'enter-segment-label';
-
-  const onSubmitHandler = ({ action, value }) => {
-    switch (action.id) {
-      case 'save':
-        callback(value.label, action.id);
-        break;
-      case 'cancel':
-        callback('', action.id);
-        break;
-    }
-    uiDialogService.dismiss({ id: dialogId });
-  };
-
-  if (uiDialogService) {
-    uiDialogService.create({
-      id: dialogId,
-      centralize: true,
-      isDraggable: false,
-      showOverlay: true,
-      content: Dialog,
-      contentProps: {
-        title: 'Segment',
-        value: { label },
-        noCloseButton: true,
-        onClose: () => uiDialogService.dismiss({ id: dialogId }),
-        actions: [
-          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
-          { id: 'save', text: 'Confirm', type: ButtonEnums.type.primary },
-        ],
-        onSubmit: onSubmitHandler,
-        body: ({ value, setValue }) => {
-          return (
-            <Input
-              label="Enter the segment label"
-              labelClassName="text-white text-[14px] leading-[1.2]"
-              autoFocus
-              className="border-primary-main bg-black"
-              type="text"
-              value={value.label}
-              onChange={event => {
-                event.persist();
-                setValue(value => ({ ...value, label: event.target.value }));
-              }}
-              onKeyPress={event => {
-                if (event.key === 'Enter') {
-                  onSubmitHandler({ value, action: { id: 'save' } });
-                }
-              }}
-            />
-          );
-        },
-      },
-    });
-  }
-}
-
-export default callInputDialog;
@@ -1,58 +0,0 @@
-import React from 'react';
-import { Dialog } from '@ohif/ui';
-import { ChromePicker } from 'react-color';
-
-import './colorPickerDialog.css';
-
-function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
-  const dialogId = 'pick-color';
-
-  const onSubmitHandler = ({ action, value }) => {
-    switch (action.id) {
-      case 'save':
-        callback(value.rgbaColor, action.id);
-        break;
-      case 'cancel':
-        callback('', action.id);
-        break;
-    }
-    uiDialogService.dismiss({ id: dialogId });
-  };
-
-  if (uiDialogService) {
-    uiDialogService.create({
-      id: dialogId,
-      centralize: true,
-      isDraggable: false,
-      showOverlay: true,
-      content: Dialog,
-      contentProps: {
-        title: 'Segment Color',
-        value: { rgbaColor },
-        noCloseButton: true,
-        onClose: () => uiDialogService.dismiss({ id: dialogId }),
-        actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
-        ],
-        onSubmit: onSubmitHandler,
-        body: ({ value, setValue }) => {
-          const handleChange = color => {
-            setValue({ rgbaColor: color.rgb });
-          };
-
-          return (
-            <ChromePicker
-              color={value.rgbaColor}
-              onChange={handleChange}
-              presetColors={[]}
-              width={300}
-            />
-          );
-        },
-      },
-    });
-  }
-}
-
-export default callColorPickerDialog;
@@ -1,33 +0,0 @@
-// Todo: use defaults in cs3d
-const initialState = {
-  renderOutline: true,
-  renderFill: true,
-  outlineOpacity: 0.9,
-  outlineWidth: 3,
-  fillOpacity: 0.9,
-  fillOpacityInactive: 0.8,
-  renderInactiveSegmentations: true,
-};
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'RENDER_OUTLINE':
-      return { ...state, renderOutline: action.payload.value };
-    case 'RENDER_FILL':
-      return { ...state, renderFill: action.payload.value };
-    case 'SET_OUTLINE_OPACITY':
-      return { ...state, outlineOpacity: action.payload.value };
-    case 'SET_OUTLINE_WIDTH':
-      return { ...state, outlineWidth: action.payload.value };
-    case 'SET_FILL_OPACITY':
-      return { ...state, fillOpacity: action.payload.value };
-    case 'SET_FILL_OPACITY_INACTIVE':
-      return { ...state, fillOpacityInactive: action.payload.value };
-    case 'RENDER_INACTIVE_SEGMENTATIONS':
-      return { ...state, renderInactiveSegmentations: action.payload.value };
-    default:
-      return state;
-  }
-};
-
-export { initialState, reducer };
@@ -1,203 +0,0 @@
-import { Enums, cache } from '@cornerstonejs/core';
-
-/**
- * Updates the viewports in preparation for rendering segmentations.
- * Evaluates each viewport to determine which need modifications,
- * then for those viewports, changes them to a volume type and ensures
- * they are ready for segmentation rendering.
- *
- * @param {Object} params - Parameters for the function.
- * @param params.viewportId - ID of the viewport to be updated.
- * @param params.loadFn - Function to load the segmentation data.
- * @param params.servicesManager - The services manager.
- * @param params.displaySet -  the display set.
- * @param params.initialSliceIndex - The initial slice index.
- *
- * @returns Returns true upon successful update of viewports for segmentation rendering.
- */
-async function updateViewportsForSegmentationRendering({
-  viewportId,
-  loadFn,
-  servicesManager,
-  displaySet,
-  initialSliceIndex = null,
-}: {
-  viewportId: string;
-  loadFn: () => Promise<string>;
-  servicesManager: AppTypes.ServicesManager;
-  displaySet?: any;
-  initialSliceIndex?: number;
-}) {
-  const { cornerstoneViewportService, segmentationService, viewportGridService } =
-    servicesManager.services;
-
-  const viewport = getTargetViewport({ viewportId, viewportGridService });
-  const targetViewportId = viewport.viewportOptions.viewportId;
-
-  const referencedDisplaySetInstanceUID =
-    displaySet?.referencedDisplaySetInstanceUID || viewport?.displaySetInstanceUIDs[0];
-
-  const updatedViewports = getUpdatedViewportsForSegmentation({
-    viewportId,
-    servicesManager,
-    displaySet,
-  });
-
-  // create Segmentation callback which needs to be waited until
-  // the volume is created (if coming from stack)
-  const createSegmentationForVolume = async () => {
-    const segmentationId = await loadFn();
-    segmentationService.hydrateSegmentation(segmentationId);
-  };
-
-  // the reference volume that is used to draw the segmentation. so check if the
-  // volume exists in the cache (the target Viewport is already a volume viewport)
-  const volumeExists = Array.from(cache._volumeCache.keys()).some(volumeId =>
-    volumeId.includes(referencedDisplaySetInstanceUID)
-  );
-
-  updatedViewports.forEach(async viewport => {
-    viewport.viewportOptions = {
-      ...viewport.viewportOptions,
-      viewportType: displaySet?.Modality === 'RTSTRUCT' ? 'stack' : 'volume',
-      needsRerendering: true,
-    };
-    const viewportId = viewport.viewportId;
-
-    // maintain the prehydration slice on the target viewport only
-    if (viewportId === targetViewportId) {
-      viewport.viewportOptions.initialImageOptions = {
-        index: initialSliceIndex,
-        useOnce: true,
-      };
-    }
-
-    const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    const prevCamera = csViewport.getCamera();
-
-    // only run the createSegmentationForVolume for the targetViewportId
-    // since the rest will get handled by cornerstoneViewportService
-    if ((volumeExists || displaySet.Modality === 'RTSTRUCT') && viewportId === targetViewportId) {
-      await createSegmentationForVolume();
-      return;
-    }
-
-    const createNewSegmentationWhenVolumeMounts = async evt => {
-      const isTheActiveViewportVolumeMounted = evt.detail.volumeActors?.find(ac =>
-        ac.uid.includes(referencedDisplaySetInstanceUID)
-      );
-
-      // Note: make sure to re-grab the viewport since it might have changed
-      // during the time it took for the volume to be mounted, for instance
-      // the stack viewport has been changed to a volume viewport
-      const volumeViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      volumeViewport.setCamera(prevCamera);
-
-      volumeViewport.element.removeEventListener(
-        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
-        createNewSegmentationWhenVolumeMounts
-      );
-
-      if (!isTheActiveViewportVolumeMounted) {
-        // it means it is one of those other updated viewports so just update the camera
-        return;
-      }
-
-      if (viewportId === targetViewportId) {
-        await createSegmentationForVolume();
-      }
-    };
-
-    csViewport.element.addEventListener(
-      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
-      createNewSegmentationWhenVolumeMounts
-    );
-  });
-
-  // Set the displaySets for the viewports that require to be updated
-  viewportGridService.setDisplaySetsForViewports(updatedViewports);
-
-  return true;
-}
-
-const getTargetViewport = ({ viewportId, viewportGridService }) => {
-  const { viewports, activeViewportId } = viewportGridService.getState();
-  const targetViewportId = viewportId || activeViewportId;
-
-  const viewport = viewports.get(targetViewportId);
-
-  return viewport;
-};
-
-/**
- * Retrieves a list of viewports that require updates in preparation for segmentation rendering.
- * This function evaluates viewports based on their compatibility with the provided segmentation's
- * frame of reference UID and appends them to the updated list if they should render the segmentation.
- *
- * @param {Object} params - Parameters for the function.
- * @param params.viewportId - the ID of the viewport to be updated.
- * @param params.servicesManager - The services manager
- * @param params.displaySet -  the display set.
- *
- * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
- */
-function getUpdatedViewportsForSegmentation({
-  viewportId,
-  servicesManager,
-  displaySet,
-}: withAppTypes) {
-  const { hangingProtocolService, displaySetService, segmentationService, viewportGridService } =
-    servicesManager.services;
-
-  const { viewports, isHangingProtocolLayout } = viewportGridService.getState();
-
-  const viewport = getTargetViewport({ viewportId, viewportGridService });
-  const targetViewportId = viewport.viewportOptions.viewportId;
-
-  const displaySetInstanceUIDs = viewports.get(targetViewportId).displaySetInstanceUIDs;
-
-  const referenceDisplaySetInstanceUID =
-    displaySet?.referencedDisplaySetInstanceUID || displaySetInstanceUIDs[0];
-
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(referenceDisplaySetInstanceUID);
-  const segmentationFrameOfReferenceUID = referencedDisplaySet.instances[0].FrameOfReferenceUID;
-
-  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-    targetViewportId,
-    referenceDisplaySetInstanceUID,
-    isHangingProtocolLayout
-  );
-
-  viewports.forEach((viewport, viewportId) => {
-    if (
-      targetViewportId === viewportId ||
-      updatedViewports.find(v => v.viewportId === viewportId)
-    ) {
-      return;
-    }
-
-    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
-      viewport.displaySetInstanceUIDs,
-      segmentationFrameOfReferenceUID
-    );
-
-    if (shouldDisplaySeg) {
-      updatedViewports.push({
-        viewportId,
-        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
-        viewportOptions: {
-          viewportType: displaySet?.Modality === 'RTSTRUCT' ? 'stack' : 'volume',
-          needsRerendering: true,
-        },
-      });
-    }
-  });
-
-  return updatedViewports.filter(v => v.viewportOptions?.viewportType !== 'volume3d');
-}
-
-export {
-  updateViewportsForSegmentationRendering,
-  getUpdatedViewportsForSegmentation,
-  getTargetViewport,
-};
@@ -1,5 +1,5 @@
 function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
-  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
+  const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');

  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
@@ -1,5 +1,3 @@
-import { ButtonEnums } from '@ohif/ui';
-
 const RESPONSE = {
  NO_NEVER: -1,
  CANCEL: 0,
@@ -11,16 +9,16 @@ function promptHydrateSEG({
  segDisplaySet,
  viewportId,
  preHydrateCallbacks,
-  hydrateSEGDisplaySet,
+  hydrateCallback,
 }: withAppTypes) {
-  const { uiViewportDialogService } = servicesManager.services;
+  const { uiViewportDialogService, customizationService } = servicesManager.services;
  const extensionManager = servicesManager._extensionManager;
  const appConfig = extensionManager._appConfig;

  return new Promise(async function (resolve, reject) {
    const promptResult = appConfig?.disableConfirmationPrompts
      ? RESPONSE.HYDRATE_SEG
-      : await _askHydrate(uiViewportDialogService, viewportId);
+      : await _askHydrate(uiViewportDialogService, customizationService, viewportId);

    if (promptResult === RESPONSE.HYDRATE_SEG) {
      preHydrateCallbacks?.forEach(callback => {
@@ -28,7 +26,7 @@ function promptHydrateSEG({
      });

      window.setTimeout(async () => {
-        const isHydrated = await hydrateSEGDisplaySet({
+        const isHydrated = await hydrateCallback({
          segDisplaySet,
          viewportId,
        });
@@ -39,19 +37,23 @@ function promptHydrateSEG({
  });
 }

-function _askHydrate(uiViewportDialogService, viewportId) {
+function _askHydrate(
+  uiViewportDialogService: AppTypes.UIViewportDialogService,
+  customizationService: AppTypes.CustomizationService,
+  viewportId
+) {
  return new Promise(function (resolve, reject) {
-    const message = 'Do you want to open this Segmentation?';
+    const message = customizationService.getCustomization('viewportNotification.hydrateSEGMessage');
    const actions = [
      {
        id: 'no-hydrate',
-        type: ButtonEnums.type.secondary,
+        type: 'secondary',
        text: 'No',
        value: RESPONSE.CANCEL,
      },
      {
        id: 'yes-hydrate',
-        type: ButtonEnums.type.primary,
+        type: 'primary',
        text: 'Yes',
        value: RESPONSE.HYDRATE_SEG,
      },
@@ -1,10 +1,13 @@
-import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
+import { ViewportActionArrows } from '@ohif/ui-next';
+import { useViewportGrid } from '@ohif/ui-next';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
 import _getStatusComponent from './_getStatusComponent';
+import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import { utils } from '@ohif/extension-cornerstone';

 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';

@@ -29,6 +32,10 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    viewportActionCornersService,
  } = servicesManager.services;

+  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
+    'ui.loadingIndicatorTotalPercent'
+  );
+
  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;

  // SEG viewport will always have a single display set
@@ -37,11 +44,11 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  }

  const segDisplaySet = displaySets[0];
-
  const [viewportGrid, viewportGridService] = useViewportGrid();

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

  // 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
@@ -61,7 +68,11 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {

  const { viewports, activeViewportId } = viewportGrid;

-  const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
+  const referencedDisplaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+    referencedDisplaySetInstanceUID
+  );
+
  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
    referencedDisplaySet,
    segDisplaySet
@@ -98,18 +109,17 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
      '@ohif/extension-cornerstone.viewportModule.cornerstone'
    );

-    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
-
    // Todo: jump to the center of the first segment
    return (
      <Component
        {...props}
-        displaySets={[referencedDisplaySet, segDisplaySet]}
+        displaySets={[segDisplaySet]}
        viewportOptions={{
-          viewportType: 'volume',
+          viewportType: viewportOptions.viewportType,
          toolGroupId: toolGroupId,
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
+          presentationIds: viewportOptions.presentationIds,
        }}
        onElementEnabled={evt => {
          props.onElementEnabled?.(evt);
@@ -122,29 +132,40 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {

  const onSegmentChange = useCallback(
    direction => {
-      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, toolGroupId);
-      setSelectedSegment(newSelectedSegmentIndex);
+      utils.handleSegmentChange({
+        direction,
+        segDisplaySet: segDisplaySet,
+        viewportId,
+        selectedSegmentObjectIndex,
+        segmentationService,
+      });
    },
-    [selectedSegment]
+    [selectedSegmentObjectIndex]
  );

+  const hydrateSEG = useCallback(() => {
+    // update the previously stored segmentationPresentation with the new viewportId
+    // presentation so that when we put the referencedDisplaySet back in the viewport
+    // it will have the correct segmentation representation hydrated
+    commandsManager.runCommand('updateStoredSegmentationPresentation', {
+      displaySet: segDisplaySet,
+      type: SegmentationRepresentations.Labelmap,
+    });
+
+    // update the previously stored positionPresentation with the new viewportId
+    // presentation so that when we put the referencedDisplaySet back in the viewport
+    // it will be in the correct position zoom and pan
+    commandsManager.runCommand('updateStoredPositionPresentation', {
+      viewportId,
+      displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
+    });
+
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      viewportId,
+      displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
+    });
+  }, [commandsManager, viewportId, referencedDisplaySet, segDisplaySet]);
+
  useEffect(() => {
    if (segIsLoading) {
      return;
@@ -155,21 +176,35 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
      viewportId,
      segDisplaySet,
      preHydrateCallbacks: [storePresentationState],
-      hydrateSEGDisplaySet,
+      hydrateCallback: hydrateSEG,
    }).then(isHydrated => {
      if (isHydrated) {
        setIsHydrated(true);
      }
    });
-  }, [servicesManager, viewportId, segDisplaySet, segIsLoading]);
+  }, [servicesManager, viewportId, segDisplaySet, segIsLoading, hydrateSEG]);

  useEffect(() => {
+    // on new seg display set, remove all segmentations from all viewports
+    segmentationService.clearSegmentationRepresentations(viewportId);
+
    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
      evt => {
        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,
+            },
+          });
+        }
      }
    );

@@ -223,39 +258,31 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
      return;
    }

+    // keep the already stored segmentationPresentation for this viewport in memory
+    // so that we can restore it after hydrating the SEG
+    commandsManager.runCommand('updateStoredSegmentationPresentation', {
+      displaySet: segDisplaySet,
+      type: SegmentationRepresentations.Labelmap,
+    });
+
+    // always start fresh for this viewport since it is special type of viewport
+    // that should only show one segmentation at a time.
+    segmentationService.clearSegmentationRepresentations(viewportId);
+
    // This creates a custom tool group which has the lifetime of this view
    // only, and does NOT interfere with currently displayed segmentations.
    toolGroup = createSEGToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);

    return () => {
      // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
+      // e.g., another seg displayset is dragged into the viewport
+      segmentationService.clearSegmentationRepresentations(viewportId);

      // Only destroy the viewport specific implementation
      toolGroupService.destroyToolGroup(toolGroupId);
    };
  }, []);

-  useEffect(() => {
-    setIsHydrated(segDisplaySet.isHydrated);
-
-    return () => {
-      // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
-      referencedDisplaySetRef.current = null;
-    };
-  }, [segDisplaySet]);
-
-  const hydrateSEGDisplaySet = useCallback(
-    ({ segDisplaySet, viewportId }) => {
-      commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
-        displaySets: [segDisplaySet],
-        viewportId,
-      });
-    },
-    [commandsManager]
-  );
-
  const onStatusClick = useCallback(async () => {
    // Before hydrating a SEG and make it added to all viewports in the grid
    // that share the same frameOfReferenceUID, we need to store the viewport grid
@@ -264,16 +291,11 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    // presentation state (w/l and invert) and then opens the SEG. If we don't store
    // the presentation state, the viewport will be reset to the default presentation
    storePresentationState();
-    const isHydrated = await hydrateSEGDisplaySet({
-      segDisplaySet,
-      viewportId,
-    });
-
-    setIsHydrated(isHydrated);
-  }, [hydrateSEGDisplaySet, segDisplaySet, storePresentationState, viewportId]);
+    hydrateSEG();
+  }, [storePresentationState, hydrateSEG]);

  useEffect(() => {
-    viewportActionCornersService.setComponents([
+    viewportActionCornersService.addComponents([
      {
        viewportId,
        id: 'viewportStatusComponent',
@@ -292,7 +314,7 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
            key="actionArrows"
            onArrowsClick={onSegmentChange}
            className={
-              viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
+              viewportId === activeViewportId ? 'visible' : 'invisible group-hover/pane:visible'
            }
          ></ViewportActionArrows>
        ),
@@ -332,18 +354,6 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    });
  }

-  const {
-    PatientID,
-    PatientName,
-    PatientSex,
-    PatientAge,
-    SliceThickness,
-    ManufacturerModelName,
-    StudyDate,
-    SeriesDescription,
-    SpacingBetweenSlices,
-  } = referencedDisplaySetRef.current.metadata;
-
  return (
    <>
      <div className="relative flex h-full w-full flex-row overflow-hidden">
@@ -362,13 +372,6 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  );
 }

-OHIFCornerstoneSEGViewport.propTypes = {
-  displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportId: PropTypes.string.isRequired,
-  dataSource: PropTypes.object,
-  children: PropTypes.node,
-};
-
 function _getReferencedDisplaySetMetadata(referencedDisplaySet, segDisplaySet) {
  const { SharedFunctionalGroupsSequence } = segDisplaySet.instance;

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

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

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

@@ -34,13 +33,7 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
          <span className="ml-1">SEG</span>
        </div>
        {!isHydrated && (
-          <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>
+          <ViewportActionButton onInteraction={onStatusClick}>{loadStr}</ViewportActionButton>
        )}
      </div>
    );
@@ -49,11 +42,15 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip
-          content={<ToolTipMessage />}
-          position="bottom-left"
-        >
-          <StatusArea />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <ToolTipMessage />
+          </TooltipContent>
        </Tooltip>
      )}
      {!ToolTipMessage && <StatusArea />}
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.9.0-beta.102",
+  "version": "3.10.2",
  "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.9.0-beta.102",
-    "@ohif/extension-cornerstone": "3.9.0-beta.102",
-    "@ohif/extension-measurement-tracking": "3.9.0-beta.102",
-    "@ohif/ui": "3.9.0-beta.102",
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-measurement-tracking": "3.10.2",
+    "@ohif/ui": "3.10.2",
    "dcmjs": "*",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -46,9 +46,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.86.0",
-    "@cornerstonejs/core": "^1.86.0",
-    "@cornerstonejs/tools": "^1.86.0",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
    "classnames": "^2.3.2"
  }
 }
@@ -5,19 +5,28 @@ 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;

+interface Options {
+  SeriesDescription?: string;
+  SeriesInstanceUID?: string;
+  SeriesNumber?: number;
+  InstanceNumber?: number;
+  SeriesDate?: string;
+  SeriesTime?: string;
+}
+
 /**
- *
 * @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
 * @param options Naturalized DICOM JSON headers to merge into the displaySet.
 *
 */
-const _generateReport = (measurementData, additionalFindingTypes, options = {}) => {
+const _generateReport = (measurementData, additionalFindingTypes, options: Options = {}) => {
  const filteredToolState = getFilteredCornerstoneToolState(
    measurementData,
    additionalFindingTypes
@@ -37,13 +46,37 @@ const _generateReport = (measurementData, additionalFindingTypes, options = {})
  if (typeof dataset.SpecificCharacterSet === 'undefined') {
    dataset.SpecificCharacterSet = 'ISO_IR 192';
  }
+
+  dataset.InstanceNumber = options.InstanceNumber ?? 1;
+
  return dataset;
 };

 const commandsModule = (props: withAppTypes) => {
-  const { servicesManager } = props;
-  const { customizationService } = servicesManager.services;
+  const { servicesManager, extensionManager, commandsManager } = props;
+  const { customizationService, viewportGridService, displaySetService } = 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
@@ -53,7 +86,7 @@ const commandsModule = (props: withAppTypes) => {
     * that you wish to serialize.
     */
    downloadReport: ({ measurementData, additionalFindingTypes, options = {} }) => {
-      const srDataset = actions.generateReport(measurementData, additionalFindingTypes, options);
+      const srDataset = _generateReport(measurementData, additionalFindingTypes, options);
      const reportBlob = dcmjs.data.datasetToBlob(srDataset);

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

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

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

        await dataSource.store.dicom(naturalizedReport, null, dicomDict);
@@ -123,6 +155,29 @@ 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) {
+        commandsManager.run('setDisplaySetsForViewports', {
+          viewportsToUpdate: [
+            {
+              viewportId: viewportGridService.getActiveViewportId(),
+              displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
+            },
+          ],
+        });
+      }
+    },
  };

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

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

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

-import { Icon, Tooltip, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
-import hydrateStructuredReport from '../utils/hydrateStructuredReport';
-import { useAppConfig } from '@state';
+import { ViewportActionArrows } from '@ohif/ui-next';
 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';

@@ -18,14 +19,7 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
  const { children, dataSource, displaySets, viewportOptions, servicesManager, extensionManager } =
    props;

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

  const viewportId = viewportOptions.viewportId;

@@ -36,6 +30,8 @@ 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);
@@ -48,7 +44,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {

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

  const hasMeasurementTrackingExtension = extensionManager.registeredExtensionIds.includes(
    MEASUREMENT_TRACKING_EXTENSION_ID
@@ -61,29 +56,13 @@ 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],
-          },
-        ]);
-      }
-    };
  }

+  /**
+   * Todo: what is this, not sure what it does regarding the react aspect,
+   * it is updating a local variable? which is not state.
+   */
+  const [isLocked, setIsLocked] = useState(trackedMeasurements?.context?.trackedSeries?.length > 0);
  /**
   * Store the tracking identifiers per viewport in order to be able to
   * show the SR measurements on the referenced image on the correct viewport,
@@ -140,33 +119,17 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
        }

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

-        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);
-          }
-        }
+        const { presentationIds } = viewportOptions;
+        const measurement = srDisplaySet.measurements[newMeasurementSelected];
+        setPositionPresentation(presentationIds.positionPresentationId, {
+          viewReference: {
+            referencedImageId: measurement.imageId,
+          },
+        });
      });
    },
    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportId]
@@ -188,10 +151,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
      return null;
    }

-    const initialImageIndex = activeImageDisplaySetData.images.findIndex(
-      image => image.imageId === measurement.imageId
-    );
-
    return (
      <Component
        {...props}
@@ -216,7 +175,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          props.onElementEnabled?.(evt);
          onElementEnabled(evt);
        }}
-        initialImageIndex={initialImageIndex}
        isJumpToMeasurementDisabled={true}
      ></Component>
    );
@@ -297,17 +255,12 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
    updateSR();
  }, [measurementSelected, element, setTrackingIdentifiers, srDisplaySet]);

-  /**
-   * Todo: what is this, not sure what it does regarding the react aspect,
-   * it is updating a local variable? which is not state.
-   */
-  const [isLocked, setIsLocked] = useState(trackedMeasurements?.context?.trackedSeries?.length > 0);
  useEffect(() => {
    setIsLocked(trackedMeasurements?.context?.trackedSeries?.length > 0);
  }, [trackedMeasurements]);

  useEffect(() => {
-    viewportActionCornersService.setComponents([
+    viewportActionCornersService.addComponents([
      {
        viewportId,
        id: 'viewportStatusComponent',
@@ -316,8 +269,8 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          viewportId,
          isRehydratable: srDisplaySet.isRehydratable,
          isLocked,
-          sendTrackedMeasurementsEvent,
          t,
+          servicesManager,
        }),
        indexPriority: -100,
        location: viewportActionCornersService.LOCATIONS.topLeft,
@@ -336,15 +289,7 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
        location: viewportActionCornersService.LOCATIONS.topRight,
      },
    ]);
-  }, [
-    isLocked,
-    onMeasurementChange,
-    sendTrackedMeasurementsEvent,
-    srDisplaySet,
-    t,
-    viewportActionCornersService,
-    viewportId,
-  ]);
+  }, [isLocked, onMeasurementChange, srDisplaySet, t, viewportActionCornersService, viewportId]);

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

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

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

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

      ToolTipMessage = () => (
        <div>
@@ -478,8 +426,8 @@ function _getStatusComponent({
      break;
    case 3:
      StatusIcon = () => (
-        <Icon
-          className="text-aqua-pale"
+        <Icons.ByName
+          className="text-muted-foreground h-4 w-4"
          name="status-untracked"
        />
      );
@@ -487,32 +435,62 @@ function _getStatusComponent({
      ToolTipMessage = () => <div>{`Click ${loadStr} to restore measurements.`}</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}
+  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>
-      )}
-    </div>
-  );
+        {state === 3 && (
+          <>
+            {loadSRMeasurementsButtons.map(toolDef => {
+              if (!toolDef) {
+                return null;
+              }
+              const { id, Component, componentProps } = toolDef;
+              const tool = (
+                <Component
+                  key={id}
+                  id={id}
+                  onInteraction={args => onInteraction({ ...args, ...commandOptions })}
+                  {...componentProps}
+                />
+              );
+
+              return <div key={id}>{tool}</div>;
+            })}
+          </>
+        )}
+      </div>
+    );
+  };

  return (
    <>
      {ToolTipMessage && (
-        <Tooltip
-          content={<ToolTipMessage />}
-          position="bottom-left"
-        >
-          <StatusArea />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <StatusArea />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent
+            side="bottom"
+            align="start"
+          >
+            <ToolTipMessage />
+          </TooltipContent>
        </Tooltip>
      )}
      {!ToolTipMessage && <StatusArea />}
@@ -90,6 +90,7 @@ function _getDisplaySetsFromSeries(
    SeriesDescription,
    SeriesNumber,
    SeriesDate,
+    SeriesTime,
    ConceptNameCodeSequence,
    SOPClassUID,
  } = instance;
@@ -106,6 +107,7 @@ function _getDisplaySetsFromSeries(
    SeriesDescription,
    SeriesNumber,
    SeriesDate,
+    SeriesTime,
    SOPInstanceUID,
    SeriesInstanceUID,
    StudyInstanceUID,
@@ -263,9 +265,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(
  for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
    let measurement = unloadedMeasurements[j];

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

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

  preRegistration,
@@ -12,7 +12,7 @@ import {
  utilities as csToolsUtils,
 } from '@cornerstonejs/tools';
 import { Types, MeasurementService } from '@ohif/core';
-import { StackViewport } from '@cornerstonejs/core';
+import { StackViewport, utilities as csUtils } from '@cornerstonejs/core';
 import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
 import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
 import SCOORD3DPointTool from './tools/SCOORD3DPointTool';
@@ -77,28 +77,4 @@ export default function init({
    SRRectangleROI: dashedLine,
    global: {},
  });
-
-  measurementService.subscribe(
-    MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_LAYOUT,
-    ({ viewportId, measurement, isConsumed }) => {
-      if (isConsumed) {
-        return;
-      }
-      try {
-        const currentViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-        const { viewPlaneNormal } = currentViewport.getCamera();
-        const referencedImageId = csToolsUtils.getClosestImageIdForStackViewport(
-          currentViewport as StackViewport,
-          measurement.points[0],
-          viewPlaneNormal
-        );
-        const imageIndex = (currentViewport as StackViewport)
-          .getImageIds()
-          .indexOf(referencedImageId);
-        csToolsUtils.jumpToSlice(currentViewport.element, { imageIndex });
-      } catch (error) {
-        console.warn('Unable to jump to image based on measurement coordinate', error);
-      }
-    }
-  );
 }
@@ -1,15 +0,0 @@
-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;
-  });
-}
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
+import { ViewportActionButton } from '@ohif/ui-next';
+import i18n from '@ohif/i18n';
+
+export default function onModeEnter({ servicesManager }) {
+  const { displaySetService, toolbarService } = servicesManager.services;
+  const 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]?.Alphabetic;
+    const personName = contentItem.PersonName?.[0];
    return personName ? utils.formatPN(personName) : undefined;
  },
  DATE: contentItem => {
@@ -41,15 +41,15 @@ const convertSites = (codingValues, sites) => {
 *
 */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager, appConfig }: withAppTypes,
+  { servicesManager, extensionManager, commandsManager }: withAppTypes,
  displaySetInstanceUID
 ) {
-  const annotationManager = CsAnnotation.state.getAnnotationManager();
-  const disableEditing = appConfig?.disableEditing;
  const dataSource = extensionManager.getActiveDataSource()[0];
  const { measurementService, displaySetService, customizationService } = servicesManager.services;

-  const codingValues = customizationService.getCustomization('codingValues', {});
+  const codingValues = customizationService.getCustomization('codingValues');
+  const disableEditing = customizationService.getCustomization('panelMeasurement.disableEditing');
+
  const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

  // TODO -> We should define a strict versioning somewhere.
@@ -85,7 +85,8 @@ export default function hydrateStructuredReport(
    }
  });

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

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

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

  if (typeof onBeforeSRHydration === 'function') {
    storedMeasurementByAnnotationType = onBeforeSRHydration({
@@ -200,7 +200,11 @@ 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.site = annotation.data.findingSites?.[0];
+      annotation.data.findingSites?.forEach(site => {
+        if (site.type) {
+          annotation.data[site.type] = site;
+        }
+      });

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

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

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

      if (!imageIds.includes(imageId)) {
@@ -230,62 +238,3 @@ 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;
-  };
-};
@@ -1,60 +0,0 @@
-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;
-}
@@ -0,0 +1,41 @@
+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.9.0-beta.102",
+  "version": "3.10.2",
  "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.9.0-beta.102",
-    "@ohif/extension-cornerstone": "3.9.0-beta.102",
-    "@ohif/extension-default": "3.9.0-beta.102",
-    "@ohif/i18n": "3.9.0-beta.102",
-    "@ohif/ui": "3.9.0-beta.102",
+    "@ohif/core": "3.10.2",
+    "@ohif/extension-cornerstone": "3.10.2",
+    "@ohif/extension-default": "3.10.2",
+    "@ohif/i18n": "3.10.2",
+    "@ohif/ui": "3.10.2",
    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -42,9 +42,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^1.86.0",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.82.4",
-    "@cornerstonejs/tools": "^1.86.0",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
    "classnames": "^2.3.2"
  }
 }
@@ -110,7 +110,12 @@ function _getTimePointsData(volume) {
  return { timePoints, timePointsUnit };
 }

-function _getSegmentationData(segmentation, volumesTimePointsCache, displaySetService) {
+function _getSegmentationData(
+  segmentation,
+  volumesTimePointsCache,
+  { servicesManager }: { servicesManager: AppTypes.ServicesManager }
+) {
+  const { displaySetService, segmentationService, viewportGridService } = servicesManager.services;
  const displaySets = displaySetService.getActiveDisplaySets();

  const dynamic4DDisplaySet = displaySets.find(displaySet => {
@@ -145,8 +150,11 @@ function _getSegmentationData(segmentation, volumesTimePointsCache, displaySetSe
    referencedDynamicVolume.imageIds[0]
  );

+  const segmentationVolume = segmentationService.getLabelmapVolume(segmentation.segmentationId);
+  const maskVolumeId = segmentationVolume?.volumeId;
+
  const [timeData, _] = csToolsUtils.dynamicVolume.getDataInTime(referencedDynamicVolume, {
-    maskVolumeId: segmentation.id,
+    maskVolumeId,
  }) as number[][];

  const pixelCount = timeData.length;
@@ -155,27 +163,15 @@ function _getSegmentationData(segmentation, volumesTimePointsCache, displaySetSe
    return [];
  }

-  // since we only use one segmentation representation per segmentationId
-  // it is fine to pick the first one
-  const segmentationRepresentations = csTools.segmentation.state.getSegmentationIdRepresentations(
-    segmentation.id
-  );
-
-  const segmentationRepresentationUID =
-    segmentationRepresentations[0].segmentationRepresentationUID;
-
-  const toolGroupId = csTools.segmentation.state.getToolGroupIdFromSegmentationRepresentationUID(
-    segmentationRepresentationUID
-  );
-
  // Todo: this is useless we should be able to grab color with just segRepUID and segmentIndex
-  const color = csTools.segmentation.config.color.getColorForSegmentIndex(
-    toolGroupId,
-    segmentationRepresentationUID,
-    1 // segmentIndex
-  );
+  // const color = csTools.segmentation.config.color.getSegmentIndexColor(
+  //   segmentationRepresentationUID,
+  //   1 // segmentIndex
+  // );
+  const viewportId = viewportGridService.getActiveViewportId();
+  const color = segmentationService.getSegmentColor(viewportId, segmentation.segmentationId, 1);

-  const hexColor = cs.utilities.color.rgbToHex(...color);
+  const hexColor = cs.utilities.color.rgbToHex(color[0], color[1], color[2]);
  let timePointsData = volumesTimePointsCache.get(referencedDynamicVolume);

  if (!timePointsData) {
@@ -219,14 +215,14 @@ function _getSegmentationData(segmentation, volumesTimePointsCache, displaySetSe
  };
 }

-function _getInstanceFromSegmentations(segmentations, displaySetService) {
+function _getInstanceFromSegmentations(segmentations, { servicesManager }) {
  if (!segmentations.length) {
    return;
  }

  const volumesTimePointsCache = new WeakMap();
  const segmentationsData = segmentations.map(segmentation =>
-    _getSegmentationData(segmentation, volumesTimePointsCache, displaySetService)
+    _getSegmentationData(segmentation, volumesTimePointsCache, { servicesManager })
  );

  const { date: seriesDate, time: seriesTime } = _getDateTimeStr();
@@ -266,10 +262,10 @@ function _getInstanceFromSegmentations(segmentations, displaySetService) {
 }

 function updateSegmentationsChartDisplaySet({ servicesManager }: withAppTypes): void {
-  const { segmentationService, displaySetService } = servicesManager.services;
+  const { segmentationService } = servicesManager.services;
  const segmentations = segmentationService.getSegmentations();
  const { seriesMetadata, instance } =
-    _getInstanceFromSegmentations(segmentations, displaySetService) ?? {};
+    _getInstanceFromSegmentations(segmentations, { servicesManager }) ?? {};

  if (seriesMetadata && instance) {
    // An event is triggered after adding the instance and the displaySet is created
@@ -84,11 +84,11 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
        const stdDeviation = Math.sqrt(variance);
        return stdDeviation;
      }
-
      // Iterate through each segmentation to get the timeData and ijkCoords
-      segmentations.forEach((segmentation, segmentationIndex) => {
+      segmentations.forEach(segmentation => {
+        const volume = segmentationService.getLabelmapVolume(segmentation.segmentationId);
        const [timeData, ijkCoords] = utilities.dynamicVolume.getDataInTime(dynamicVolume, {
-          maskVolumeId: segmentation.id,
+          maskVolumeId: volume.volumeId,
        }) as number[][];

        if (summaryStats) {
@@ -113,17 +113,33 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
          for (let timeIndex = 0; timeIndex < maxLength; timeIndex++) {
            // for each voxel in the ROI, get the value at the current time point
            const voxelValues = [];
+            let sum = 0;
+            let minValue = Infinity;
+            let maxValue = -Infinity;
+            let minIndex = 0;
+            let maxIndex = 0;
+
+            // Single pass through the data to collect all needed values
            for (let voxelIndex = 0; voxelIndex < numVoxels; voxelIndex++) {
-              voxelValues.push(timeData[voxelIndex][timeIndex]);
+              const value = timeData[voxelIndex][timeIndex];
+              voxelValues.push(value);
+              sum += value;
+
+              if (value < minValue) {
+                minValue = value;
+                minIndex = voxelIndex;
+              }
+              if (value > maxValue) {
+                maxValue = value;
+                maxIndex = voxelIndex;
+              }
            }

-            mean.push(voxelValues.reduce((acc, value) => acc + value, 0) / numVoxels);
-            const minimum = Math.min(...voxelValues);
-            min.push(minimum);
-            minIJK.push(ijkCoords[voxelValues.indexOf(minimum)]);
-            const maximum = Math.max(...voxelValues);
-            max.push(maximum);
-            maxIJK.push(ijkCoords[voxelValues.indexOf(maximum)]);
+            mean.push(sum / numVoxels);
+            min.push(minValue);
+            minIJK.push(ijkCoords[minIndex]);
+            max.push(maxValue);
+            maxIJK.push(ijkCoords[maxIndex]);
            std.push(calculateStandardDeviation(voxelValues));
          }

@@ -247,7 +263,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
        }
      }

-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate });
    },
    swapComputedWithDynamicDisplaySet: () => {
      // Todo: this assumes there is only one dynamic display set in the viewer
@@ -297,7 +313,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
        }
      }

-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate });
    },
    createNewLabelMapForDynamicVolume: async ({ label }) => {
      const { viewports, activeViewportId } = viewportGridService.getState();
@@ -340,30 +356,19 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
        throw new Error('No reference display set found based on the dynamic data');
      }

-      const segmentationId = await segmentationService.createSegmentationForDisplaySet(
-        referenceDisplaySet.displaySetInstanceUID,
-        { label }
+      const displaySet = displaySetService.getDisplaySetByUID(
+        referenceDisplaySet.displaySetInstanceUID
      );

-      // Add Segmentation to all toolGroupIds in the viewer
-      const toolGroupIds = Array.from(
-        viewports.values(),
-        viewport => viewport.viewportOptions.toolGroupId
-      );
+      const segmentationId = await segmentationService.createLabelmapForDisplaySet(displaySet, {
+        label,
+      });

-      const representationType = LABELMAP;
+      const firstViewport = viewports.values().next().value;

-      for (const toolGroupId of toolGroupIds) {
-        const hydrateSegmentation = true;
-        await segmentationService.addSegmentationRepresentationToToolGroup(
-          toolGroupId,
-          segmentationId,
-          hydrateSegmentation,
-          representationType
-        );
-
-        segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
-      }
+      await segmentationService.addSegmentationRepresentation(firstViewport.viewportId, {
+        segmentationId,
+      });

      return segmentationId;
    },
@@ -147,8 +147,8 @@ function getFusionViewports() {
      name: DEFAULT_COLORMAP,
      opacity: [
        { value: 0, opacity: 0 },
-        { value: 0.1, opacity: 0.3 },
-        { value: 1, opacity: 0.3 },
+        { value: 0.1, opacity: 0.8 },
+        { value: 1, opacity: 0.8 },
      ],
    },
  };
@@ -191,6 +191,15 @@ function getFusionViewports() {
              syncInvertState: false,
            },
          },
+          {
+            type: 'hydrateseg',
+            id: 'sameFORId',
+            source: true,
+            target: true,
+            options: {
+              matchingRules: ['sameFOR'],
+            },
+          },
        ],
      },
      displaySets: [
@@ -240,6 +249,15 @@ function getFusionViewports() {
              syncInvertState: false,
            },
          },
+          {
+            type: 'hydrateseg',
+            id: 'sameFORId',
+            source: true,
+            target: true,
+            options: {
+              matchingRules: ['sameFOR'],
+            },
+          },
        ],
      },
      displaySets: [
@@ -289,6 +307,15 @@ function getFusionViewports() {
              syncInvertState: false,
            },
          },
+          {
+            type: 'hydrateseg',
+            id: 'sameFORId',
+            source: true,
+            target: true,
+            options: {
+              matchingRules: ['sameFOR'],
+            },
+          },
        ],
      },
      displaySets: [
@@ -1,10 +1,11 @@
 import React from 'react';
 import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/ui-next';
+import { Toolbox } from '@ohif/extension-default';
+import { PanelSegmentation } from '@ohif/extension-cornerstone';
 import DynamicExport from './panels/DynamicExport';

-function getPanelModule({ commandsManager, extensionManager, servicesManager }) {
-  const wrappedDynamicDataPanel = ({}) => {
+function getPanelModule({ commandsManager, extensionManager, servicesManager, configuration }) {
+  const wrappedDynamicDataPanel = () => {
    return (
      <DynamicDataPanel
        commandsManager={commandsManager}
@@ -14,28 +15,24 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
    );
  };

-  const wrappedDynamicToolbox = ({}) => {
+  const wrappedDynamicSegmentation = () => {
    return (
      <>
        <Toolbox
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
          buttonSectionId="dynamic-toolbox"
          title="Threshold Tools"
        />
-      </>
-    );
-  };
-
-  const wrappedDynamicExport = () => {
-    return (
-      <>
-        <DynamicExport
-          commandsManager={commandsManager}
+        <PanelSegmentation
          servicesManager={servicesManager}
+          commandsManager={commandsManager}
          extensionManager={extensionManager}
-        />
+          configuration={configuration}
+        >
+          <DynamicExport
+            servicesManager={servicesManager}
+            commandsManager={commandsManager}
+          />
+        </PanelSegmentation>
      </>
    );
  };
@@ -49,18 +46,11 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
      component: wrappedDynamicDataPanel,
    },
    {
-      name: 'dynamic-toolbox',
-      iconName: 'tab-4d',
-      iconLabel: '4D Workflow',
-      label: 'Dynamic Toolbox',
-      component: wrappedDynamicToolbox,
-    },
-    {
-      name: 'dynamic-export',
-      iconName: 'tab-4d',
-      iconLabel: '4D Workflow',
-      label: '4D Workflow',
-      component: wrappedDynamicExport,
+      name: 'dynamic-segmentation',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
+      component: wrappedDynamicSegmentation,
    },
  ];
 }
@@ -1,6 +1,5 @@
 import React from 'react';
 import PanelGenerateImage from './PanelGenerateImage';
-import { Separator } from '@ohif/ui-next';

 function DynamicDataPanel({ servicesManager, commandsManager, tab }: withAppTypes) {
  return (
@@ -1,73 +1,52 @@
-import React, { useState, useEffect } from 'react';
-import { ActionButtons } from '@ohif/ui';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
+import { Button, Icons } from '@ohif/ui-next';
+import { useSegmentations } from '@ohif/extension-cornerstone';

-function DynamicExport({ commandsManager, servicesManager, extensionManager }: withAppTypes) {
-  const { segmentationService } = servicesManager.services;
-  const { t } = useTranslation('dynamicExport');
+function DynamicExport({ commandsManager, servicesManager }: withAppTypes) {
+  const segmentations = useSegmentations({ servicesManager });

-  const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
-
-  const actions = [
-    {
-      label: 'Export Time Data',
-      onClick: () => {
-        commandsManager.runCommand('exportTimeReportCSV', {
-          segmentations,
-          options: {
-            filename: 'TimeData.csv',
-          },
-        });
-      },
-      disabled: !segmentations?.length,
-    },
-    {
-      label: 'Export ROI Stats',
-      onClick: () => {
-        commandsManager.runCommand('exportTimeReportCSV', {
-          segmentations,
-          summaryStats: true,
-          options: {
-            filename: 'ROIStats.csv',
-          },
-        });
-      },
-      disabled: !segmentations?.length,
-    },
-  ];
-
-  /**
-   * Update UI based on segmentation changes (added, removed, updated)
-   */
-  useEffect(() => {
-    // ~~ Subscription
-    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
-    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
-    const removed = segmentationService.EVENTS.SEGMENTATION_REMOVED;
-    const subscriptions = [];
-
-    [added, updated, removed].forEach(evt => {
-      const { unsubscribe } = segmentationService.subscribe(evt, () => {
-        const segmentations = segmentationService.getSegmentations();
-        setSegmentations(segmentations);
-      });
-      subscriptions.push(unsubscribe);
-    });
-
-    return () => {
-      subscriptions.forEach(unsub => {
-        unsub();
-      });
-    };
-  }, []);
+  if (!segmentations?.length) {
+    return null;
+  }

  return (
-    <div>
-      <div className="mt-3 flex justify-center px-2">
-        <ActionButtons
-          actions={actions}
-          t={t}
-        />
+    <div className="flex gap-2">
+      <div className="flex h-8 w-full items-center rounded pr-0.5">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="pl-1.5"
+          onClick={() => {
+            commandsManager.runCommand('exportTimeReportCSV', {
+              segmentations,
+              options: {
+                filename: 'TimeData.csv',
+              },
+            });
+          }}
+        >
+          <Icons.Export />
+          <span className="pl-1">Time Data</span>
+        </Button>
+      </div>
+      <div className="flex h-8 w-full items-center rounded pr-0.5">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="pl-1.5"
+          onClick={() => {
+            commandsManager.runCommand('exportTimeReportCSV', {
+              segmentations,
+              summaryStats: true,
+              options: {
+                filename: 'ROIStats.csv',
+              },
+            });
+          }}
+        >
+          <Icons.Export />
+          <span className="pl-1">ROI Stats</span>
+        </Button>
      </div>
    </div>
  );
@@ -1,37 +1,45 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
-  InputDoubleRange,
+  Tabs,
+  TabsList,
+  TabsTrigger,
  Button,
  PanelSection,
-  ButtonGroup,
-  IconButton,
-  InputNumber,
-  Icon,
+  Icons,
  Tooltip,
-} from '@ohif/ui';
-
+  TooltipTrigger,
+  TooltipContent,
+  Numeric,
+} from '@ohif/ui-next';
 import { Enums } from '@cornerstonejs/core';

-const controlClassNames = {
-  sizeClassName: 'w-[58px] h-[28px]',
-  arrowsDirection: 'horizontal',
-  labelPosition: 'bottom',
+// Helper function to safely convert any value to uppercase string
+const toUpperCaseString = value => {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  return String(value).toUpperCase();
 };

 const Header = ({ title, tooltip }) => (
  <div className="flex items-center space-x-1">
-    <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>
+      <TooltipTrigger asChild>
+        <span>
+          <Icons.ByName
+            name="info-link"
+            className="text-primary h-3 w-3"
+          />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        sideOffset={4}
+        className="max-w-xs"
+      >
+        <div>{tooltip}</div>
+      </TooltipContent>
    </Tooltip>
-    <span className="text-aqua-pale text-[11px] uppercase">{title}</span>
+    <span className="text-muted-foreground text-xs uppercase tracking-wide">{title}</span>
  </div>
 );

@@ -44,138 +52,149 @@ const DynamicVolumeControls = ({
  minFps,
  maxFps,
  // Frames
-  currentFrameIndex,
-  onFrameChange,
-  framesLength,
+  currentDimensionGroupNumber,
+  onDimensionGroupChange,
+  numDimensionGroups,
  onGenerate,
  onDoubleRangeChange,
+  rangeValues,
  onDynamicClick,
 }) => {
  const [computedView, setComputedView] = useState(false);
-
  const [computeViewMode, setComputeViewMode] = useState(Enums.DynamicOperatorType.SUM);

-  const [sliderRangeValues, setSliderRangeValues] = useState([framesLength / 4, framesLength / 2]);
-
-  useEffect(() => {
-    setSliderRangeValues([framesLength / 4, framesLength / 2]);
-  }, [framesLength]);
-
-  const handleSliderChange = newValues => {
-    onDoubleRangeChange(newValues);
-
-    if (newValues[0] === sliderRangeValues[0] && newValues[1] === sliderRangeValues[1]) {
-      return;
+  // Wrapper for onGenerate to handle potential errors
+  const handleGenerate = () => {
+    try {
+      if (typeof onGenerate === 'function') {
+        onGenerate(computeViewMode);
+      } else {
+        console.error('onGenerate is not a function', onGenerate);
+      }
+    } catch (error) {
+      console.error('Error in onGenerate:', error);
    }
-    setSliderRangeValues(newValues);
  };

  return (
    <div className="flex select-none flex-col">
-      <PanelSection
-        title="Controls"
-        childrenClassName="space-y-4 pb-5 px-5"
-      >
-        <div className="mt-2">
-          <Header
-            title="View"
-            tooltip={
-              'Select the view mode, 4D to view the dynamic volume or Computed to view the computed volume'
-            }
-          />
-          <ButtonGroup className="mt-2 w-full">
-            <button
-              className="w-1/2"
-              onClick={() => {
-                setComputedView(false);
-                onDynamicClick?.();
+      <PanelSection defaultOpen={true}>
+        <PanelSection.Header>Controls</PanelSection.Header>
+        <PanelSection.Content className="bg-muted space-y-4 px-5 pt-2 pb-4">
+          <div className="mb-4">
+            <Header
+              title="View"
+              tooltip={
+                'Select the view mode, 4D to view the dynamic volume or Computed to view the computed volume'
+              }
+            />
+            <Tabs
+              value={computedView ? 'computed' : '4d'}
+              onValueChange={value => {
+                const isComputed = value === 'computed';
+                setComputedView(isComputed);
+                if (!isComputed && typeof onDynamicClick === 'function') {
+                  onDynamicClick();
+                }
              }}
+              className="my-2 w-full"
            >
-              4D
-            </button>
-            <button
-              className="w-1/2"
-              onClick={() => {
-                setComputedView(true);
-              }}
-            >
-              Computed
-            </button>
-          </ButtonGroup>
-        </div>
-        <div>
-          <FrameControls
-            onPlayPauseChange={onPlayPauseChange}
-            isPlaying={isPlaying}
-            computedView={computedView}
-            // fps
-            fps={fps}
-            onFpsChange={onFpsChange}
-            minFps={minFps}
-            maxFps={maxFps}
-            //
-            framesLength={framesLength}
-            onFrameChange={onFrameChange}
-            currentFrameIndex={currentFrameIndex}
-          />
-        </div>
-        <div className={`mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
-          <Header
-            title="Computed Operation"
-            tooltip={
-              <div>
-                Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
-                applied to the data set.
-                <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 `}
-            separated={true}
-          >
-            <button
-              className="w-1/2"
-              onClick={() => setComputeViewMode(Enums.DynamicOperatorType.SUM)}
-            >
-              {Enums.DynamicOperatorType.SUM.toString().toUpperCase()}
-            </button>
-            <button
-              className="w-1/2"
-              onClick={() => setComputeViewMode(Enums.DynamicOperatorType.AVERAGE)}
-            >
-              {Enums.DynamicOperatorType.AVERAGE.toString().toUpperCase()}
-            </button>
-            <button
-              className="w-1/2"
-              onClick={() => setComputeViewMode(Enums.DynamicOperatorType.SUBTRACT)}
-            >
-              {Enums.DynamicOperatorType.SUBTRACT.toString().toUpperCase()}
-            </button>
-          </ButtonGroup>
-          <div className="w-ful mt-2">
-            <InputDoubleRange
-              values={sliderRangeValues}
-              onChange={handleSliderChange}
-              minValue={0}
-              showLabel={true}
-              allowNumberEdit={true}
-              maxValue={framesLength}
-              step={1}
+              <TabsList className="w-full">
+                <TabsTrigger
+                  value="4d"
+                  className="w-1/2"
+                >
+                  4D
+                </TabsTrigger>
+                <TabsTrigger
+                  value="computed"
+                  className="w-1/2"
+                >
+                  Computed
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+          <div>
+            <DimensionGroupControls
+              onPlayPauseChange={onPlayPauseChange}
+              isPlaying={isPlaying}
+              computedView={computedView}
+              // fps
+              fps={fps}
+              onFpsChange={onFpsChange}
+              minFps={minFps}
+              maxFps={maxFps}
+              //
+              numDimensionGroups={numDimensionGroups}
+              onDimensionGroupChange={onDimensionGroupChange}
+              currentDimensionGroupNumber={currentDimensionGroupNumber}
            />
          </div>
-          <Button
-            className="mt-2 !h-[26px] !w-[115px] self-start !p-0"
-            onClick={() => {
-              onGenerate(computeViewMode);
-            }}
-          >
-            Generate
-          </Button>
-        </div>
+          <div className={`mt-3 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
+            <Header
+              title="Computed Operation"
+              tooltip={
+                <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.
+                </div>
+              }
+            />
+            <Tabs
+              value={String(computeViewMode)}
+              onValueChange={value => {
+                setComputeViewMode(value);
+              }}
+              className="mt-2 w-full"
+            >
+              <TabsList className="w-full gap-1">
+                {' '}
+                <TabsTrigger
+                  value={String(Enums.DynamicOperatorType.SUM)}
+                  className="w-1/3"
+                >
+                  {toUpperCaseString(Enums.DynamicOperatorType.SUM)}
+                </TabsTrigger>
+                <TabsTrigger
+                  value={String(Enums.DynamicOperatorType.AVERAGE)}
+                  className="w-1/3"
+                >
+                  {toUpperCaseString(Enums.DynamicOperatorType.AVERAGE)}
+                </TabsTrigger>
+                <TabsTrigger
+                  value={String(Enums.DynamicOperatorType.SUBTRACT)}
+                  className="w-1/3"
+                >
+                  {toUpperCaseString(Enums.DynamicOperatorType.SUBTRACT)}
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="mt-2 w-full">
+              <Numeric.Container
+                mode="doubleRange"
+                min={1}
+                max={numDimensionGroups || 1}
+                values={rangeValues || [1, numDimensionGroups || 1]}
+                onChange={onDoubleRangeChange || (() => {})}
+              >
+                <Numeric.DoubleRange showNumberInputs />
+              </Numeric.Container>
+            </div>
+            <Button
+              variant="default"
+              size="sm"
+              className="mt-2 h-[26px] w-[115px] self-start p-0"
+              onClick={handleGenerate}
+            >
+              Generate
+            </Button>
+          </div>
+        </PanelSection.Content>
      </PanelSection>
    </div>
  );
@@ -183,58 +202,84 @@ const DynamicVolumeControls = ({

 export default DynamicVolumeControls;

-function FrameControls({
+function DimensionGroupControls({
  isPlaying,
  onPlayPauseChange,
  fps,
  minFps,
  maxFps,
  onFpsChange,
-  framesLength,
-  onFrameChange,
-  currentFrameIndex,
+  numDimensionGroups,
+  onDimensionGroupChange,
+  currentDimensionGroupNumber,
  computedView,
 }) {
  const getPlayPauseIconName = () => (isPlaying ? 'icon-pause' : 'icon-play');

  return (
-    <div className={computedView && 'ohif-disabled'}>
+    <div className={computedView ? 'ohif-disabled' : ''}>
      <Header
        title="4D Controls"
        tooltip={
          <div>
-            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.
+            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br />
+            Dimension Group Selector: Navigate through individual dimension groups of the 4D data.{' '}
+            <br />
+            FPS (Frames Per Second) Selector: Adjust the playback speed of the animation.
          </div>
        }
      />
      <div className="mt-3 flex justify-between">
-        <IconButton
-          className="bg-customblue-30 h-[26px] w-[58px] rounded-[4px]"
-          onClick={() => onPlayPauseChange(!isPlaying)}
+        <Button
+          id="play-pause-button"
+          variant="secondary"
+          size="default"
+          className="w-[58px]"
+          onClick={() => {
+            if (typeof onPlayPauseChange === 'function') {
+              onPlayPauseChange(!isPlaying);
+            }
+          }}
        >
-          <Icon
+          <Icons.ByName
            name={getPlayPauseIconName()}
-            className=" active:text-primary-light hover:bg-customblue-300 h-[24px] w-[24px] cursor-pointer text-white"
+            className="text-foreground h-[24px] w-[24px]"
          />
-        </IconButton>
-        <InputNumber
-          value={currentFrameIndex}
-          onChange={onFrameChange}
-          minValue={0}
-          maxValue={framesLength}
-          label="Frame"
-          {...controlClassNames}
-        />
-        <InputNumber
-          value={fps}
-          onChange={onFpsChange}
-          minValue={minFps}
-          maxValue={maxFps}
-          {...controlClassNames}
-          label="FPS"
-        />
+        </Button>
+
+        <Numeric.Container
+          mode="stepper"
+          value={currentDimensionGroupNumber || 1}
+          onChange={onDimensionGroupChange || (() => {})}
+          min={1}
+          max={numDimensionGroups || 1}
+          step={1}
+        >
+          <div className="flex flex-col items-center">
+            <Numeric.NumberStepper
+              className="h-[28px] w-[58px]"
+              direction="horizontal"
+            />
+            <Numeric.Label className="text-muted-foreground mt-1 text-sm">Frame</Numeric.Label>
+          </div>
+        </Numeric.Container>
+
+        <Numeric.Container
+          mode="stepper"
+          value={fps || 1}
+          onChange={onFpsChange || (() => {})}
+          min={minFps || 1}
+          max={maxFps || 30}
+          step={1}
+        >
+          <div className="flex flex-col items-center">
+            <Numeric.NumberStepper
+              className="h-[28px] w-[58px]"
+              direction="horizontal"
+            />
+            <Numeric.Label className="text-muted-foreground mt-1 text-sm">FPS</Numeric.Label>
+          </div>
+        </Numeric.Container>
      </div>
    </div>
  );
@@ -1,71 +0,0 @@
-import React from 'react';
-import { InputDoubleRange } from '@ohif/ui';
-import { Select } from '@ohif/ui';
-import { Button } from '@ohif/ui';
-import PropTypes from 'prop-types';
-
-const GenerateVolume = ({
-  rangeValues,
-  handleSliderChange,
-  operationsUI,
-  options,
-  handleGenerateOptionsChange,
-  onGenerateImage,
-  returnTo4D,
-  displayingComputedVolume,
-}) => {
-  return (
-    <>
-      <div>
-        <div className="mb-2 text-white">Computed Image</div>
-        <Select
-          closeMenuOnSelect={true}
-          className="border-primary-main mr-2 bg-black text-white "
-          options={operationsUI}
-          placeholder={operationsUI.find(option => option.value === options.Operation).placeHolder}
-          value={options.Operation}
-          onChange={({ value }) => {
-            handleGenerateOptionsChange({
-              Operation: value,
-            });
-          }}
-        />
-        <InputDoubleRange
-          values={rangeValues}
-          onChange={handleSliderChange}
-          minValue={rangeValues[0] || 1}
-          maxValue={rangeValues[1] || 2}
-          showLabel={true}
-          step={1}
-        />
-        <div className="flex space-x-2">
-          <Button
-            onClick={onGenerateImage}
-            className="w-1/2"
-          >
-            Generate
-          </Button>
-          <Button
-            onClick={returnTo4D}
-            disabled={!displayingComputedVolume}
-            className="w-1/2"
-          >
-            Return To 4D
-          </Button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-GenerateVolume.propTypes = {
-  rangeValues: PropTypes.array.isRequired,
-  handleSliderChange: PropTypes.func.isRequired,
-  operationsUI: PropTypes.array.isRequired,
-  options: PropTypes.object.isRequired,
-  handleGenerateOptionsChange: PropTypes.func.isRequired,
-  onGenerateImage: PropTypes.func.isRequired,
-  returnTo4D: PropTypes.func.isRequired,
-};
-
-export default GenerateVolume;
@@ -1,8 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useCine, useViewportGrid } from '@ohif/ui';
-import { cache, utilities as csUtils, volumeLoader, eventTarget } from '@cornerstonejs/core';
-import { Enums } from '@cornerstonejs/streaming-image-volume-loader';
+import { useCine } from '@ohif/ui-next';
+import { useViewportGrid } from '@ohif/ui-next';
+import { utilities as csUtils, volumeLoader, eventTarget, Enums, cache } from '@cornerstonejs/core';
 import { utilities as cstUtils } from '@cornerstonejs/tools';
 import DynamicVolumeControls from './DynamicVolumeControls';

@@ -16,13 +15,12 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
  const [{ activeViewportId }] = useViewportGrid();

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

  //
@@ -31,47 +29,61 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
  const computedVolumeId = `cornerstoneStreamingImageVolume:${uuidComputedVolume.current}`;

  useEffect(() => {
-    const evt = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
+    const viewportDataChangedEvt = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
+    const cineStateChangedEvt = servicesManager.services.cineService.EVENTS.CINE_STATE_CHANGED;

-    const { unsubscribe } = cornerstoneViewportService.subscribe(evt, evtDetails => {
+    const viewportDataChangedCallback = evtDetails => {
      evtDetails.viewportData.data.forEach(volumeData => {
-        if (volumeData.volume.isDynamicVolume()) {
+        if (volumeData.volume?.isDynamicVolume()) {
          setDynamicVolume(volumeData.volume);
          uuidDynamicVolume.current = volumeData.displaySetInstanceUID;
-          setTimePointsRange([1, volumeData.volume.numTimePoints]);
+          const newRange = [1, volumeData.volume.numDimensionGroups];
+          setDimensionGroupRange(newRange);
        }
      });
-    });
-
-    return () => {
-      unsubscribe();
    };
-  }, [cornerstoneViewportService]);

-  useEffect(() => {
-    const { unsubscribe } = servicesManager.services.cineService.subscribe(
-      servicesManager.services.cineService.EVENTS.CINE_STATE_CHANGED,
-      evt => {
-        setIsPlaying(evt.isPlaying);
-      }
+    const cineStateChangedCallback = evt => {
+      setIsPlaying(evt.isPlaying);
+    };
+
+    const { unsubscribe: unsubscribeViewportData } = cornerstoneViewportService.subscribe(
+      viewportDataChangedEvt,
+      viewportDataChangedCallback
+    );
+    const { unsubscribe: unsubscribeCineState } = servicesManager.services.cineService.subscribe(
+      cineStateChangedEvt,
+      cineStateChangedCallback
    );

    return () => {
-      unsubscribe();
+      unsubscribeViewportData();
+      unsubscribeCineState();
    };
-  }, [cineService]);
+  }, [cornerstoneViewportService, cineService, servicesManager.services.cineService]);
+
+  useEffect(() => {
+    const evt = Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED;
+
+    const callback = evt => {
+      setDimensionGroupNumberRendered(evt.detail.dimensionGroupNumber);
+    };
+
+    eventTarget.addEventListener(evt, callback);
+
+    return () => {
+      eventTarget.removeEventListener(evt, callback);
+    };
+  }, []);

  useEffect(() => {
    const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(activeViewportId);

-    if (!displaySetUIDs || displaySetUIDs.length === 0) {
+    if (!displaySetUIDs?.length) {
      return;
    }

-    const displaySets = displaySetUIDs.map(displaySetUID =>
-      displaySetService.getDisplaySetByUID(displaySetUID)
-    );
-
+    const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID);
    const dynamicVolumeDisplaySet = displaySets.find(displaySet => displaySet.isDynamicVolume);

    if (!dynamicVolumeDisplaySet) {
@@ -88,23 +100,14 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:

    setDynamicVolume(dynamicVolume);
    uuidDynamicVolume.current = dynamicVolumeDisplaySet.displaySetInstanceUID;
-    setTimePointsRange([1, dynamicVolume.numTimePoints]);
-  }, [activeViewportId, cornerstoneViewportService]);
-
-  useEffect(() => {
-    // ~~ Subscription
-    const evt = Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED;
-
-    const callback = evt => {
-      setTimePointRendered(evt.detail.timePointIndex);
-    };
-
-    eventTarget.addEventListener(evt, callback);
-
-    return () => {
-      eventTarget.removeEventListener(evt, callback);
-    };
-  }, [cornerstoneViewportService]);
+    setDimensionGroupRange([1, dynamicVolume.numDimensionGroups]);
+  }, [
+    activeViewportId,
+    viewportGridService,
+    displaySetService,
+    cornerstoneViewportService,
+    cineService,
+  ]);

  function renderGeneratedImage(displaySet) {
    commandsManager.runCommand('swapDynamicWithComputedDisplaySet', {
@@ -130,26 +133,20 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
    let computedVolume = cache.getVolume(computedVolumeId);

    if (!computedVolume) {
-      await createComputedVolume(dynamicVolumeId, computedVolumeId);
-      computedVolume = cache.getVolume(computedVolumeId);
+      computedVolume = await volumeLoader.createAndCacheDerivedVolume(dynamicVolumeId, {
+        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 vals = timePointsRangeToUseForGenerate;
+    const options = {
+      dimensionGroupNumbers: operationName === 'SUBTRACT' ? [start, end] : frameNumbers,
+      targetVolume: computedVolume,
+    };

-    const targets = Array.from({ length: vals[1] - vals[0] + 1 }, (_, i) => i + vals[0]);
-
-    const dataInTime = cstUtils.dynamicVolume.generateImageFromTimeData(
-      dynamicVolume,
-      operationName,
-      operationName === 'SUBTRACT' ? vals : targets
-    );
-
-    // Add loadStatus.loaded to computed volume and set to true
-    computedVolume.loadStatus = {};
-    computedVolume.loadStatus.loaded = true;
-    // Set computed scalar data to volume
-    const scalarData = computedVolume.getScalarData();
-    scalarData.set(dataInTime);
+    cstUtils.dynamicVolume.updateVolumeFromTimeData(dynamicVolume, operationName, options);

    // If computed display set does not exist, create an object to be used as
    // the displaySet. If it does exist, update the image data and vtkTexture
@@ -166,6 +163,7 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
        madeInClient: true,
        FrameOfReferenceUID: dynamicVolume.metadata.FrameOfReferenceUID,
        isDerived: true,
+        imageIds: computedVolume.imageIds,
      };
      setComputedDisplaySet(displaySet);
      renderGeneratedImage(displaySet);
@@ -173,19 +171,8 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
      commandsManager.runCommand('updateVolumeData', {
        volume: computedVolume,
      });
-      // Check if viewport is currently displaying the computed volume, if so,
-      // call render on the viewports to update the image, if not, call
-      // renderGeneratedImage
-      // if (!cache.getVolume(dynamicVolumeId)) {
-      //   for (const viewportId of viewports.keys()) {
-      //     const viewportForRendering =
-      //       cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      //     viewportForRendering.render();
-      //   }
-      // } else {
      cornerstoneViewportService.getRenderingEngine().render();
      renderGeneratedImage(computedDisplaySet);
-      // }
    }
  }

@@ -217,21 +204,6 @@ 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}
@@ -239,37 +211,16 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
      onPlayPauseChange={onPlayPauseChange}
      minFps={1}
      maxFps={50}
-      currentFrameIndex={timePointRendered}
      onFpsChange={handleSetFrameRate}
-      framesLength={timePointsRange[1]}
-      onFrameChange={timePointIndex => {
-        dynamicVolume.timePointIndex = timePointIndex;
+      currentDimensionGroupNumber={dimensionGroupNumberRendered}
+      numDimensionGroups={dynamicVolume?.numDimensionGroups || 1}
+      onDimensionGroupChange={dimensionGroupNumber => {
+        dynamicVolume.dimensionGroupNumber = dimensionGroupNumber;
      }}
      onGenerate={onGenerateImage}
      onDynamicClick={displayingComputed ? () => renderDynamicImage(computedDisplaySet) : null}
-      onDoubleRangeChange={handleSliderChange}
+      onDoubleRangeChange={setDimensionGroupRange}
+      rangeValues={dimensionGroupRange}
    />
  );
 }
-
-async function createComputedVolume(dynamicVolumeId, computedVolumeId) {
-  if (!cache.getVolume(computedVolumeId)) {
-    const computedVolume = await volumeLoader.createAndCacheDerivedVolume(dynamicVolumeId, {
-      volumeId: computedVolumeId,
-    });
-    return computedVolume;
-  }
-}
-
-PanelGenerateImage.propTypes = {
-  servicesManager: PropTypes.shape({
-    services: PropTypes.shape({
-      measurementService: PropTypes.shape({
-        getMeasurements: PropTypes.func.isRequired,
-        subscribe: PropTypes.func.isRequired,
-        EVENTS: PropTypes.object.isRequired,
-        VALUE_TYPES: PropTypes.object.isRequired,
-      }).isRequired,
-    }).isRequired,
-  }).isRequired,
-};
@@ -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.9.0-beta.102",
+  "version": "3.10.2",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -38,10 +38,9 @@
    "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
    "@cornerstonejs/codec-openjpeg": "^1.2.4",
    "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^1.86.0",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@ohif/core": "3.9.0-beta.102",
-    "@ohif/ui": "3.9.0-beta.102",
+    "@cornerstonejs/dicom-image-loader": "^3.11.6",
+    "@ohif/core": "3.10.2",
+    "@ohif/ui": "3.10.2",
    "dcmjs": "*",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -50,20 +49,22 @@
    "react-dom": "^18.3.1",
    "react-resize-detector": "^10.0.1"
  },
-  "devDependencies": {
-    "lodash": "^4.17.21"
-  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.86.0",
-    "@cornerstonejs/core": "^1.86.0",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.82.4",
-    "@cornerstonejs/tools": "^1.86.0",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@kitware/vtk.js": "30.4.1",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/ai": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/labelmap-interpolation": "^3.11.6",
+    "@cornerstonejs/polymorphic-segmentation": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
+    "@itk-wasm/morphological-contour-interpolation": "1.1.0",
+    "@kitware/vtk.js": "32.12.0",
    "html2canvas": "^1.4.1",
+    "lodash.compact": "^3.0.1",
    "lodash.debounce": "^4.0.8",
+    "lodash.flatten": "^4.4.0",
    "lodash.merge": "^4.6.2",
+    "lodash.zip": "^4.2.0",
    "shader-loader": "^1.3.1",
    "worker-loader": "^3.0.8"
  }
@@ -2,15 +2,17 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
-import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';
-import { ViewportOverlay } from '@ohif/ui';
-import { InstanceMetadata } from '@ohif/core/src/types';
-import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
+import type { ImageSliceData } from '@cornerstonejs/core/types';
+import { ViewportOverlay } from '@ohif/ui-next';
+import type { InstanceMetadata } from '@ohif/core/src/types';
+import { formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
+import { utils } from '@ohif/core';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';

 import './CustomizableViewportOverlay.css';

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

 type ViewportData = StackViewportData | VolumeViewportData;

@@ -45,76 +47,6 @@ const OverlayItemComponents = {
  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem,
 };

-
-const studyDateItem = {
-  id: 'StudyDate',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Study date',
-  condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
-  contentF: ({ referenceInstance, formatters: { formatDate } }) => formatDate(referenceInstance.StudyDate),
-};
-
-const seriesDescriptionItem = {
-  id: 'SeriesDescription',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Series description',
-  condition: ({ referenceInstance }) => {
-    return referenceInstance && referenceInstance.SeriesDescription;
-  },
-  contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription
-};
-
-const topLeftItems = { id: 'cornerstoneOverlayTopLeft', items: [studyDateItem, seriesDescriptionItem] };
-
-const topRightItems = { id: 'cornerstoneOverlayTopRight', items: [] };
-
-const bottomLeftItems = {
-  id: 'cornerstoneOverlayBottomLeft', items: [
-    {
-      id: 'WindowLevel',
-      customizationType: 'ohif.overlayItem.windowLevel',
-    },
-    {
-      id: 'ZoomLevel',
-      customizationType: 'ohif.overlayItem.zoomLevel',
-      condition: (props) => {
-        const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
-        return activeToolName === 'Zoom';
-      },
-    },
-  ]
-};
-
-const bottomRightItems = {
-  id: 'cornerstoneOverlayBottomRight',
-  items: [
-    {
-      id: 'InstanceNumber',
-      customizationType: 'ohif.overlayItem.instanceNumber',
-    },
-  ]
-};
-
-/**
- * The @ohif/cornerstoneOverlay is a default value for a customization
- * for the cornerstone overlays.  The intent is to allow it to be extended
- * without needing to re-write the individual overlays by using the append
- * mechanism.  Individual attributes can be modified individually without
- * affecting the other items by using the append as well, with position
- * based replacement.
- * This is used as a default in the getCustomizationModule so that it
- * is available early for additional customization extensions.
- */
-const CornerstoneOverlay = {
-  id: '@ohif/cornerstoneOverlay',
-  topLeftItems,
-  topRightItems,
-  bottomLeftItems,
-  bottomRightItems,
-};
-
 /**
 * Customizable Viewport Overlay
 */
@@ -137,27 +69,18 @@ function CustomizableViewportOverlay({
  const [scale, setScale] = useState(1);
  const { imageIndex } = imageSliceData;

-  // The new customization is 'cornerstoneOverlay', with an append or replace
-  // on the individual items rather than defining individual items.
-  const cornerstoneOverlay = customizationService.getCustomization('@ohif/cornerstoneOverlay');
-
  // Historical usage defined the overlays as separate items due to lack of
  // append functionality.  This code enables the historical usage, but
  // the recommended functionality is to append to the default values in
  // cornerstoneOverlay rather than defining individual items.
-  const topLeftCustomization = customizationService.getCustomization(
-    'cornerstoneOverlayTopLeft'
-  ) || cornerstoneOverlay?.topLeftItems;
-  const topRightCustomization = customizationService.getCustomization(
-    'cornerstoneOverlayTopRight'
-  ) || cornerstoneOverlay?.topRightItems;
+  const topLeftCustomization = customizationService.getCustomization('viewportOverlay.topLeft');
+  const topRightCustomization = customizationService.getCustomization('viewportOverlay.topRight');
  const bottomLeftCustomization = customizationService.getCustomization(
-    'cornerstoneOverlayBottomLeft'
-  ) || cornerstoneOverlay?.bottomLeftItems;
+    'viewportOverlay.bottomLeft'
+  );
  const bottomRightCustomization = customizationService.getCustomization(
-    'cornerstoneOverlayBottomRight'
-  ) || cornerstoneOverlay?.bottomRightItems;
-
+    'viewportOverlay.bottomRight'
+  );

  const instanceNumber = useMemo(
    () =>
@@ -177,13 +100,12 @@ function CustomizableViewportOverlay({
    return {
      displaySets,
      displaySet,
-      instance: instances[imageIndex],
+      instance: instances?.[imageIndex],
      instances,
      referenceInstance,
    };
  }, [viewportData, viewportId, instanceNumber, cornerstoneViewportService]);

-
  /**
   * Updating the VOI when the viewport changes its voi
   */
@@ -260,8 +182,8 @@ function CustomizableViewportOverlay({
        return null;
      }

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

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

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

      return (
        <>
-          {items.map((item, index) => (
+          {customization.map((item, index) => (
            <div key={`${keyPrefix}_${index}`}>
-              {(!item?.condition || item.condition(props)) && _renderOverlayItem(item, props) || null}
+              {((!item?.condition || item.condition(props)) && _renderOverlayItem(item, props)) ||
+                null}
            </div>
          ))}
        </>
@@ -316,7 +235,6 @@ function CustomizableViewportOverlay({
    [_renderOverlayItem]
  );

-
  return (
    <ViewportOverlay
      topLeft={getContent(topLeftCustomization, 'topLeftOverlayItem')}
@@ -335,7 +253,9 @@ function getDisplaySets(viewportData, displaySetService) {
  if (!viewportData?.data?.length) {
    return null;
  }
-  const displaySets = viewportData.data.map(datum => displaySetService.getDisplaySetByUID(datum.displaySetInstanceUID)).filter(it => !!it);
+  const displaySets = viewportData.data
+    .map(datum => displaySetService.getDisplaySetByUID(datum.displaySetInstanceUID))
+    .filter(it => !!it);
  if (!displaySets.length) {
    return null;
  }
@@ -382,7 +302,6 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
  return parseInt(instanceNumber);
 }

-
 // Since volume viewports can be in any view direction, they can render
 // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
 // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
@@ -400,6 +319,11 @@ function _getInstanceNumberFromVolume(

  // Todo: support fusion of acquisition plane which has instanceNumber
  const { volume } = volumes[0];
+
+  if (!volume) {
+    return;
+  }
+
  const { direction, imageIds } = volume;

  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
@@ -443,9 +367,10 @@ function OverlayItem(props) {
      style={{ color, background }}
      title={title}
    >
-      {label ? (<span className="mr-1 shrink-0">{label}</span>) : null}
-      <span className="ml-1 mr-2 shrink-0">{value}</span>
-    </div>);
+      {label ? <span className="mr-1 shrink-0">{label}</span> : null}
+      <span className="ml-0 mr-2 shrink-0">{value}</span>
+    </div>
+  );
 }

 /**
@@ -462,10 +387,10 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
      className="overlay-item flex flex-row"
      style={{ color: customization?.color }}
    >
-      <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 shrink-0">{windowCenter.toFixed(0)}</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">W:</span>
+      <span className="mr-2.5 shrink-0">{windowWidth.toFixed(0)}</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">L:</span>
+      <span className="shrink-0">{windowCenter.toFixed(0)}</span>
    </div>
  );
 }
@@ -479,7 +404,7 @@ function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
      className="overlay-item flex flex-row"
      style={{ color: (customization && customization.color) || undefined }}
    >
-      <span className="mr-1 shrink-0">Zoom:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">Zoom:</span>
      <span>{scale.toFixed(2)}x</span>
    </div>
  );
@@ -503,7 +428,7 @@ function InstanceNumberOverlayItem({
      <span>
        {instanceNumber !== undefined && instanceNumber !== null ? (
          <>
-            <span className="mr-1 shrink-0">I:</span>
+            <span className="mr-0.5 shrink-0 opacity-[0.67]">I:</span>
            <span>{`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`}</span>
          </>
        ) : (
@@ -522,4 +447,4 @@ CustomizableViewportOverlay.propTypes = {

 export default CustomizableViewportOverlay;

-export { CustomizableViewportOverlay, CornerstoneOverlay };
+export { CustomizableViewportOverlay };
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Enums, VolumeViewport3D } from '@cornerstonejs/core';
-import { utilities as csToolsUtils } from '@cornerstonejs/tools';
-import { ImageScrollbar } from '@ohif/ui';
+import { Enums, VolumeViewport3D, utilities as csUtils } from '@cornerstonejs/core';
+import { ImageScrollbar } from '@ohif/ui-next';

 function CornerstoneImageScrollbar({
  viewportData,
@@ -12,7 +11,9 @@ function CornerstoneImageScrollbar({
  setImageSliceData,
  scrollbarHeight,
  servicesManager,
-}: withAppTypes) {
+}: withAppTypes<{
+  element: HTMLElement;
+}>) {
  const { cineService, cornerstoneViewportService } = servicesManager.services;

  const onImageScrollbarChange = (imageIndex, viewportId) => {
@@ -26,7 +27,7 @@ function CornerstoneImageScrollbar({
      cineService.setCine({ id: viewportId, isPlaying: false });
    }

-    csToolsUtils.jumpToSlice(viewport.element, {
+    csUtils.jumpToSlice(viewport.element, {
      imageIndex,
      debounceLoading: true,
    });
@@ -43,13 +44,17 @@ function CornerstoneImageScrollbar({
      return;
    }

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

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

  useEffect(() => {
@@ -64,7 +69,9 @@ function CornerstoneImageScrollbar({

    const updateIndex = event => {
      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      if(!viewport || viewport instanceof VolumeViewport3D) return
+      if (!viewport || viewport instanceof VolumeViewport3D) {
+        return;
+      }
      const { imageIndex, newImageIdIndex = imageIndex } = event.detail;
      const numberOfSlices = viewport.getNumberOfSlices();
      // find the index of imageId in the imageIds
@@ -3,19 +3,18 @@
  --marker-height: 100px;
  --scrollbar-width: 20px;
  pointer-events: none;
-  font-size: 15px;
  line-height: 18px;
 }
 .ViewportOrientationMarkers .orientation-marker {
  position: absolute;
 }
 .ViewportOrientationMarkers .top-mid {
-  top: 0.6rem;
+  top: 0.38rem;
  left: 50%;
 }
 .ViewportOrientationMarkers .left-mid {
  top: 47%;
-  left: 5px;
+  left: 0.38rem;
 }
 .ViewportOrientationMarkers .right-mid {
  top: 47%;
@@ -1,14 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import classNames from 'classnames';
-import {
-  metaData,
-  Enums,
-  Types,
-  getEnabledElement,
-  utilities as csUtils,
-} from '@cornerstonejs/core';
+import { metaData, Enums, Types, getEnabledElement } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/tools';
-import PropTypes from 'prop-types';
 import { vec3 } from 'gl-matrix';

 import './ViewportOrientationMarkers.css';
@@ -31,8 +24,9 @@ function ViewportOrientationMarkers({

  useEffect(() => {
    const cameraModifiedListener = (evt: Types.EventTypes.CameraModifiedEvent) => {
-      const { rotation, previousCamera, camera } = evt.detail;
+      const { previousCamera, camera } = evt.detail;

+      const { rotation } = camera;
      if (rotation !== undefined) {
        setRotation(rotation);
      }
@@ -74,7 +68,12 @@ function ViewportOrientationMarkers({
        return false;
      }

-      ({ rowCosines, columnCosines, isDefaultValueSetForColumnCosine, isDefaultValueSetForColumnCosine } = metaData.get('imagePlaneModule', imageId) || {});
+      ({
+        rowCosines,
+        columnCosines,
+        isDefaultValueSetForColumnCosine,
+        isDefaultValueSetForColumnCosine,
+      } = metaData.get('imagePlaneModule', imageId) || {});
    } else {
      if (!element || !getEnabledElement(element)) {
        return '';
@@ -90,7 +89,13 @@ function ViewportOrientationMarkers({
      rowCosines = viewRight;
    }

-    if (!rowCosines || !columnCosines || rotation === undefined || isDefaultValueSetForRowCosine || isDefaultValueSetForColumnCosine) {
+    if (
+      !rowCosines ||
+      !columnCosines ||
+      rotation === undefined ||
+      isDefaultValueSetForRowCosine ||
+      isDefaultValueSetForColumnCosine
+    ) {
      return '';
    }

@@ -114,8 +119,8 @@ function ViewportOrientationMarkers({
        className={classNames(
          'overlay-text',
          `${m}-mid orientation-marker`,
-          'text-aqua-pale',
-          'text-[13px]',
+          'text-highlight/65',
+          'text-base',
          'leading-5'
        )}
        key={`${m}-mid orientation-marker`}
@@ -52,31 +52,6 @@ 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
 *
@@ -0,0 +1,195 @@
+import React from 'react';
+import { useSystem } from '@ohif/core';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@ohif/ui-next';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+export type AccordionGrouping = {
+  [name: string]: unknown;
+};
+
+export type AccordionGroupProps = {
+  grouping: AccordionGrouping;
+};
+
+/**
+ * Searches for the required type from the provided allChildren list and
+ * renders them.
+ */
+export const CloneChildren = props => {
+  const { group, allChildren, children, childType, defaultTypes } = props;
+
+  const subType = group?.subType;
+
+  for (const child of allChildren) {
+    if (subType && child.props?.subType !== subType) {
+      continue;
+    }
+    if (childType && child.type === childType) {
+      return React.cloneElement(child, { ...props, children: child.props.children });
+    }
+    if (defaultTypes?.indexOf(child.type) === -1) {
+      return childType({ ...props, children: child });
+    }
+  }
+
+  if (!children) {
+    throw new Error(`No children defined for ${props.name} CloneChildren in group ${group?.name}`);
+  }
+  return React.cloneElement(children, props);
+};
+
+/** Used to exclude defaults */
+const DEFAULT_TYPES = [GroupAccordion, Content, Trigger];
+
+/**
+ * An AccordionGroup is a component that splits a set of items into different
+ * groups according to a set of grouping rules.  It then puts the groups
+ * into a set of accordion folds selected from the body of the accordion group,
+ * looking for matching trigger/content sections according to the type definition
+ * in the group with first one found being used.
+ *
+ * This design allows for easy customization of the component by declaring grouping
+ * functions with default grouping setups and then only overriding the specific
+ * children needing to be changed.  See the PanelMeasurement for some example
+ * possibilities of how to modify the default grouping, or the test-extension
+ * measurements panel for a practical, working example.
+ */
+export function AccordionGroup(props) {
+  const { grouping, items, children, sourceChildren, type } = props;
+  const childProps = useSystem();
+  let defaultValue = props.defaultValue;
+  const groups = grouping.groupingFunction(items, grouping, childProps);
+
+  if (!defaultValue) {
+    const defaultGroup = groups.values().find(group => group.isSelected);
+    defaultValue = defaultGroup?.key || defaultGroup?.title;
+  }
+
+  const valueArr =
+    (Array.isArray(defaultValue) && defaultValue) || (defaultValue && [defaultValue]) || [];
+  const sourceChildrenArr = sourceChildren ? React.Children.toArray(sourceChildren) : [];
+  const childrenArr = children ? React.Children.toArray(children) : [];
+  const allChildren = sourceChildrenArr.concat(childrenArr);
+
+  return (
+    <CloneChildren
+      allChildren={allChildren}
+      groups={groups}
+      childType={GroupAccordion}
+      grouping={grouping}
+      defaultValue={valueArr}
+      name={'grouping ' + grouping.name}
+    >
+      <DefaultAccordion name="DefaultAccordion" />
+    </CloneChildren>
+  );
+}
+
+function DefaultAccordion(props) {
+  const { groups, defaultValue, grouping, allChildren, asChild } = props;
+  if (!allChildren || !groups) {
+    return null;
+  }
+
+  if (Boolean(asChild)) {
+    return React.cloneElement(props.children, props);
+  }
+
+  return (
+    <Accordion
+      type={grouping.type || 'multiple'}
+      className="text-white"
+      defaultValue={defaultValue}
+    >
+      {[...groups.entries()].map(([key, group]) => {
+        return (
+          <AccordionItem
+            key={group.key + '-i'}
+            value={group.key}
+          >
+            <CloneChildren
+              allChildren={allChildren}
+              group={group}
+              childType={Trigger}
+              name="AccordionGroup.Trigger"
+            />
+            <CloneChildren
+              allChildren={allChildren}
+              group={group}
+              childType={Content}
+              defaultTypes={DEFAULT_TYPES}
+              name="AccordionGroup.Content"
+            />
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}
+
+function GroupAccordion(props) {
+  const { groups, children } = props;
+  if (!groups) {
+    return null;
+  }
+  return [...groups.values()].map(group =>
+    React.cloneElement(children, {
+      ...props,
+      children: children.props.children,
+      group,
+      ...group,
+      key: group.title,
+    })
+  );
+}
+
+function Content(props) {
+  const { children, asChild, ...childProps } = props;
+  const { group } = props;
+  Object.assign(childProps, group);
+
+  if (!group) {
+    return null;
+  }
+  if (asChild) {
+    return React.cloneElement(children, { ...group, ...props, children: children.props.children });
+  }
+  return (
+    <AccordionContent>
+      {React.cloneElement(children, { ...group, ...props, children: children.props.children })}
+    </AccordionContent>
+  );
+}
+
+function Trigger(props) {
+  const { children, asChild, ...childProps } = props;
+  const { group } = props;
+  Object.assign(childProps, group);
+
+  if (!group) {
+    return null;
+  }
+  if (asChild) {
+    return React.cloneElement(children, childProps);
+  }
+  return (
+    <AccordionTrigger
+      value={group.value}
+      asChild={true}
+    >
+      <div>
+        {React.cloneElement(children, childProps)}
+        <ChevronDownIcon
+          key="chevronDown"
+          className="text-primary h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </div>
+    </AccordionTrigger>
+  );
+}
+
+AccordionGroup.Content = Content;
+AccordionGroup.Trigger = Trigger;
+AccordionGroup.Accordion = GroupAccordion;
+
+export default AccordionGroup;
@@ -0,0 +1,4 @@
+export * from './AccordionGroup';
+import AccordionGroup from './AccordionGroup';
+
+export default AccordionGroup;
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { useViewportGrid } from '@ohif/ui';
+import { useViewportGrid } from '@ohif/ui-next';
 import ViewportWindowLevel from '../ViewportWindowLevel/ViewportWindowLevel';

 const ActiveViewportWindowLevel = ({ servicesManager }: withAppTypes): ReactElement => {
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { CinePlayer, useCine } from '@ohif/ui';
+import { useCine } from '@ohif/ui-next';
 import { Enums, eventTarget, cache } from '@cornerstonejs/core';
-import { Enums as StreamingEnums } from '@cornerstonejs/streaming-image-volume-loader';
 import { useAppConfig } from '@state';

 function WrappedCinePlayer({
@@ -54,13 +53,13 @@ function WrappedCinePlayer({
      // check if the displaySet is dynamic and set the dynamic info
      if (displaySet.isDynamicVolume) {
        const { dynamicVolumeInfo } = displaySet;
-        const numTimePoints = dynamicVolumeInfo.timePoints.length;
+        const numDimensionGroups = dynamicVolumeInfo.timePoints.length;
        const label = dynamicVolumeInfo.splittingTag;
-        const timePointIndex = dynamicVolumeInfo.timePointIndex || 0;
+        const dimensionGroupNumber = dynamicVolumeInfo.dimensionGroupNumber || 1;
        setDynamicInfo({
          volumeId: displaySet.displaySetInstanceUID,
-          timePointIndex,
-          numTimePoints,
+          dimensionGroupNumber,
+          numDimensionGroups,
          label,
        });
      } else {
@@ -101,7 +100,7 @@ function WrappedCinePlayer({
      return;
    }

-    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+    enabledVPElement.addEventListener(Enums.Events.VIEWPORT_NEW_IMAGE_SET, newDisplaySetHandler);
    // this doesn't makes sense that we are listening to this event on viewport element
    enabledVPElement.addEventListener(
      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
@@ -111,7 +110,10 @@ function WrappedCinePlayer({
    return () => {
      cineService.setCine({ id: viewportId, isPlaying: false });

-      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+      enabledVPElement.removeEventListener(
+        Enums.Events.VIEWPORT_NEW_IMAGE_SET,
+        newDisplaySetHandler
+      );
      enabledVPElement.removeEventListener(
        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
        newDisplaySetHandler
@@ -158,8 +160,7 @@ function RenderCinePlayer({
  dynamicInfo: dynamicInfoProp,
  customizationService,
 }) {
-  const { component: CinePlayerComponent = CinePlayer } =
-    customizationService.get('cinePlayer') ?? {};
+  const CinePlayerComponent = customizationService.getCustomization('cinePlayer');

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

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

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

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

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

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

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

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

  return (
@@ -223,6 +224,7 @@ function RenderCinePlayer({
          isPlaying: false,
        });
        cineService.setIsCineEnabled(false);
+        cineService.setViewportCineClosed(viewportId);
      }}
      onPlayPauseChange={isPlaying => {
        cineService.setCine({
@@ -242,4 +244,4 @@ function RenderCinePlayer({
  );
 }

-export default WrappedCinePlayer;
+export default WrappedCinePlayer;
@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon, ProgressLoadingBar } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
+import { Button } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
 import DicomFileUploader, {
  EVENTS,
  UploadStatus,
@@ -39,6 +41,11 @@ function DicomUploadProgress({
  dicomFileUploaderArr,
  onComplete,
 }: DicomUploadProgressProps): ReactElement {
+  const { servicesManager } = useSystem();
+
+  const ProgressLoadingBar =
+    servicesManager.services.customizationService.getCustomization('ui.progressLoadingBar');
+
  const [totalUploadSize] = useState(
    dicomFileUploaderArr.reduce((acc, fileUploader) => acc + fileUploader.getFileSize(), 0)
  );
@@ -296,7 +303,7 @@ function DicomUploadProgress({
            <span
              className={classNames(
                NO_WRAP_ELLIPSIS_CLASS_NAMES,
-                'text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'
+                'text-primary hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'
              )}
              onClick={cancelAllUploads}
            >
@@ -313,10 +320,10 @@ function DicomUploadProgress({
      <div className="ml-auto flex w-6 justify-center">
        {numFails > 0 && (
          <div onClick={() => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)}>
-            <Icon
+            <Icons.ByName
              className="cursor-pointer"
              name="icon-status-alert"
-            ></Icon>
+            ></Icons.ByName>
          </div>
        )}
      </div>
@@ -6,7 +6,7 @@ import DicomFileUploader, {
  UploadRejection,
  UploadStatus,
 } from '../../utils/DicomFileUploader';
-import { Icon } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';

 type DicomUploadProgressItemProps = {
  dicomFileUploader: DicomFileUploader;
@@ -54,17 +54,17 @@ const DicomUploadProgressItem = memo(
      switch (dicomFileUploader.getStatus()) {
        case UploadStatus.Success:
          return (
-            <Icon
+            <Icons.ByName
              name="status-tracked"
              className="text-primary-light"
-            ></Icon>
+            />
          );
        case UploadStatus.InProgress:
-          return <Icon name="icon-transferring"></Icon>;
+          return <Icons.ByName name="icon-transferring" />;
        case UploadStatus.Failed:
-          return <Icon name="icon-alert-small"></Icon>;
+          return <Icons.ByName name="icon-alert-small" />;
        case UploadStatus.Cancelled:
-          return <Icon name="icon-alert-outline"></Icon>;
+          return <Icons.ByName name="icon-alert-outline" />;
        default:
          return <></>;
      }
@@ -88,9 +88,8 @@ const DicomUploadProgressItem = memo(
                <div className="w-10 text-right">{percentComplete}%</div>
              )}
              <div className="ml-auto flex cursor-pointer">
-                <Icon
-                  className="text-primary-active self-center"
-                  name="close"
+                <Icons.Close
+                  className="text-primary self-center"
                  onClick={cancelUpload}
                />
              </div>
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Accordion, AccordionContent, AccordionItem } from '@ohif/ui-next';
+
+import PanelAccordionTrigger from './PanelAccordionTrigger';
+import MeasurementsMenu from './MeasurementsMenu';
+import { useSystem } from '@ohif/core';
+
+export function MeasurementItem(props) {
+  const { index, item } = props;
+  return (
+    <PanelAccordionTrigger
+      count={index + 1}
+      text={item.toolName || item.label || item.title}
+      colorHex="#f00"
+      isActive={item.isSelected}
+      menu={MeasurementsMenu}
+      group={{ items: [item], onClick: props.onClick }}
+    />
+  );
+}
+
+export default function MeasurementAccordion(props) {
+  const { items } = props;
+  const system = useSystem();
+
+  const onClick = (e, group) => {
+    const { items } = group;
+    // Just jump to the first measurement in the set, and mark that one as active
+    // with the set of items.
+    system.commandsManager.run('jumpToMeasurement', {
+      uid: items[0].uid,
+      displayMeasurements: items,
+      group,
+    });
+  };
+
+  return (
+    <Accordion
+      type="multiple"
+      className="flex-shrink-0 overflow-hidden"
+    >
+      {items.map((item, index) => {
+        const { displayText: details = {} } = item;
+        return (
+          <AccordionItem
+            key={`measurementAccordion:${item.uid}`}
+            value={item.uid}
+          >
+            <MeasurementItem
+              item={item}
+              key={`measurementItem:${item.uid}`}
+              index={index}
+              onClick={onClick}
+            />
+            <AccordionContent key={`measurementContent:${item.uid}`}>
+              <div className="ml-7 px-2 py-2">
+                <div className="text-secondary-foreground flex items-center gap-1 text-base leading-normal">
+                  {details.primary?.length > 0 &&
+                    details.primary.map((detail, index) => (
+                      <span key={`details:${item.uid}:${index}`}>{detail}</span>
+                    ))}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}
@@ -1 +1 @@
 .16.1
 .9.0