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
2447 changed files with 164522 additions and 40967 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: 1
-        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,22 +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() }}
@@ -37,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:
@@ -53,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,26 +4,34 @@
 * 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>
+ * Usage: node dicom-json-generator.js <studyFolder> <urlPrefix> <outputJSONPath> <optional scheme>
 *
 * params:
- * - studyFolder: path to the study folder
+ * - studyFolder: path to the study folder which contains the DICOM files
 * - urlPrefix: prefix to the url that will be used to load the study into the viewer. For instance
 *   we use https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data as the urlPrefix for the
 *   example since the data is hosted on S3 and each study is in a folder. So the url in the generated
 *   json file for the first instance of the first series of the first study will be
 *   dicomweb:https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data/Series1/Instance1
+ *
+ *   as you see the dicomweb is a prefix that is used to load the data into the viewer, which is suited when
+ *   the .dcm file is hosted statically and can be accessed via a URL (like our example above)
+ *   However, you can specify a new scheme bellow.
+ *
 * - outputJSONPath: path to the output JSON file
+ * - scheme: default dicomweb if not provided
 */
 const dcmjs = require('dcmjs');
 const path = require('path');
 const fs = require('fs').promises;

 const args = process.argv.slice(2);
-const [studyDirectory, urlPrefix, outputPath] = args;
+const [studyDirectory, urlPrefix, outputPath, scheme = 'dicomweb'] = args;

-if (args.length !== 3) {
-  console.error('Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath>');
+if (args.length < 3 || args.length > 4) {
+  console.error(
+    'Usage: node dicom-json-generator.js <studyFolder> <urlPrefix> <outputJSONPath> [scheme]'
+  );
  process.exit(1);
 }

@@ -31,7 +39,7 @@ const model = {
  studies: [],
 };

-async function convertDICOMToJSON(studyDirectory, urlPrefix, outputPath) {
+async function convertDICOMToJSON(studyDirectory, urlPrefix, outputPath, scheme) {
  try {
    const files = await recursiveReadDir(studyDirectory);
    console.debug('Processing...');
@@ -42,7 +50,7 @@ async function convertDICOMToJSON(studyDirectory, urlPrefix, outputPath) {
        const dicomDict = dcmjs.data.DicomMessage.readFile(arrayBuffer.buffer);
        const instance = dcmjs.data.DicomMetaDictionary.naturalizeDataset(dicomDict.dict);

-        instance.fileLocation = createImageId(file, urlPrefix, studyDirectory);
+        instance.fileLocation = createImageId(file, urlPrefix, studyDirectory, scheme);
        processInstance(instance);
      }
    }
@@ -77,10 +85,10 @@ async function recursiveReadDir(dir) {
  return results;
 }

-function createImageId(fileLocation, urlPrefix, studyDirectory) {
+function createImageId(fileLocation, urlPrefix, studyDirectory, scheme) {
  const relativePath = path.relative(studyDirectory, fileLocation);
  const normalizedPath = path.normalize(relativePath).replace(/\\/g, '/');
-  return `dicomweb:${urlPrefix}${normalizedPath}`;
+  return `${scheme}:${urlPrefix}${normalizedPath}`;
 }

 function processInstance(instance) {
@@ -262,4 +270,4 @@ function createInstanceMetaDataMultiFrame(instance) {
  return instances;
 }

-convertDICOMToJSON(studyDirectory, urlPrefix, outputPath);
+convertDICOMToJSON(studyDirectory, urlPrefix, outputPath, scheme);
@@ -1,6 +1,7 @@
 {
  "recommendations": [
    "esbenp.prettier-vscode",
+    "streetsidesoftware.code-spell-checker",
    "dbaeumer.vscode-eslint",
    "mikestead.dotenv",
    "bungcip.better-toml",
@@ -1,4 +1,5 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.rulers": [80, 120],
  // ===
  // Spacing
@@ -14,23 +15,100 @@
  // Event Triggers
  // ===
  "editor.formatOnSave": true,
-  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
-  "eslint.validate": [
-    {
-      "language": "javascript",
-      "autoFix": true
-    },
-    {
-      "language": "javascriptreact",
-      "autoFix": true
-    }
-  ],
  "jest.autoRun": "off",
  "prettier.disableLanguages": ["html"],
  "prettier.endOfLine": "lf",
  "workbench.colorCustomizations": {},
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
-  }
+  },
+  "cSpell.userWords": [
+    "aabb",
+    "architectured",
+    "attrname",
+    "Barksy",
+    "browserslist",
+    "bulkdata",
+    "Cacheable",
+    "cfun",
+    "clonedeep",
+    "Colormap",
+    "Colormaps",
+    "Comlink",
+    "cornerstonejs",
+    "Crosshairs",
+    "datasource",
+    "dcmjs",
+    "decache",
+    "decached",
+    "decaching",
+    "deepmerge",
+    "Dicom",
+    "dicomweb",
+    "DISPLAYSETS",
+    "glwindow",
+    "grababble",
+    "grabbable",
+    "Hounsfield",
+    "Interactable",
+    "Interactor",
+    "istyle",
+    "kitware",
+    "labelmap",
+    "labelmaps",
+    "livewire",
+    "Mergeable",
+    "multiframe",
+    "nifti",
+    "ofun",
+    "OHIF",
+    "polylines",
+    "POLYSEG",
+    "prapogation",
+    "precisionmetrics",
+    "prefetch",
+    "Prescaled",
+    "pydicom",
+    "Radiopharmaceutical",
+    "rasterizing",
+    "reconstructable",
+    "Rehydratable",
+    "renderable",
+    "resampler",
+    "resemblejs",
+    "reslice",
+    "resliced",
+    "Reslices",
+    "roadmap",
+    "ROADMAPS",
+    "Segmentations",
+    "semibold",
+    "sitk",
+    "SUBRESOLUTION",
+    "suvbsa",
+    "suvbw",
+    "suvlbm",
+    "textbox",
+    "thresholded",
+    "thresholding",
+    "timepoint",
+    "timepoints",
+    "TMTV",
+    "TOOLGROUP",
+    "tqdm",
+    "transferables",
+    "typedoc",
+    "unsubscriptions",
+    "uuidv",
+    "viewplane",
+    "viewports",
+    "Voxel",
+    "Voxels",
+    "Vtkjs",
+    "wado",
+    "wadors",
+    "wadouri",
+    "workerpool"
+  ]
 }
@@ -14,14 +14,14 @@ const TerserJSPlugin = require('terser-webpack-plugin');
 // const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core
 //   .rules;
 // ~~ RULES
-const loadShadersRule = require('./rules/loadShaders.js');
+// const loadShadersRule = require('./rules/loadShaders.js');
 const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
-const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
+// Only uncomment for old v2 stylus
+// const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

-
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
 const QUICK_BUILD = process.env.QUICK_BUILD;
@@ -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,16 +95,20 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      type: 'filesystem',
    },
    module: {
-      noParse: [/(codec)/, /(dicomicc)/],
+      noParse: [/(dicomicc)/],
      rules: [
-        ...(isProdBuild ? [] : [{
-          test: /\.[jt]sx?$/,
-          exclude: /node_modules/,
-          loader: 'babel-loader',
-          options: {
-            plugins: ['react-refresh/babel'],
-          },
-        }]),
+        ...(isProdBuild
+          ? []
+          : [
+              {
+                test: /\.[jt]sx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                options: {
+                  plugins: isProdBuild ? [] : ['react-refresh/babel'],
+                },
+              },
+            ]),
        {
          test: /\.svg?$/,
          oneOf: [
@@ -122,11 +123,11 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
                          name: 'preset-default',
                          params: {
                            overrides: {
-                              removeViewBox: false
+                              removeViewBox: false,
                            },
                          },
                        },
-                      ]
+                      ],
                    },
                    prettier: false,
                    svgo: true,
@@ -140,11 +141,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
            },
          ],
        },
-        {
-          test: /\.js$/,
-          enforce: 'pre',
-          use: 'source-map-loader',
-        },
        transpileJavaScriptRule(mode),
        loadWebWorkersRule,
        // loadShadersRule,
@@ -173,6 +169,10 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
            },
          ],
        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/i,
+          type: 'asset/resource',
+        },
      ], //.concat(vtkRules),
    },
    resolve: {
@@ -184,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: [
@@ -213,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(),
    ],
@@ -10,6 +10,7 @@ Please find below the list of datasets used on the demo page, along with their r


 ## Platforms
+
 ### NIH NCI IDC

 - Fedorov, A., Longabaugh, W.J., Pot, D., Clunie, D.A., Pieper, S., Aerts, H.J., Homeyer, A., Lewis, R., Akbarzadeh, A., Bontempi, D. and Clifford, W., 2021. NCI imaging data commons. Cancer research, 81(16), p.4188.
@@ -147,3 +148,150 @@ Stony Brook University COVID-19 Positive Cases (COVID-19-NY-SBU)
 ### 2.16.840.1.114362.1.11972228.22789312658.616067305.306.2

 https://data.kitware.com/
+
+
+### 1.2.276.0.7230010.3.1.2.296485376.1.1665793212.499772
+### 2.25.269859997690759739055099378767846712697
+### 1.3.6.1.4.1.14519.5.2.1.5099.8010.217836670708542506360829799868
+### 1.3.6.1.4.1.14519.5.2.1.4792.2001.232252967813565730694525674696
+### 1.3.6.1.4.1.14519.5.2.1.4792.2001.105216574054253895819671475627
+### 1.3.6.1.4.1.5962.99.1.1117.5035.1620319789811.1.2.1
+### 1.3.6.1.4.1.5962.99.1.1123.9231.1620326176300.1.2.1
+### 1.3.6.1.4.1.5962.99.1.1126.3483.1620329455972.1.2.1
+
+https://github.com/ImagingInformatics/hackathon-images
+
+### 2.16.124.113543.6004.101.103.20021117.162333.1
+### 2.16.124.113543.6004.101.103.20021117.190619.1
+### 2.16.124.113543.6004.101.103.20021117.123455.1
+### 2.16.124.113543.6004.101.103.20021117.061159.1
+
+https://www.aapm.org/
+
+
+### 1.2.840.113619.2.30.1.1762295590.1623.978668949.886
+
+
+### 1.2.276.0.7230010.3.1.2.447481088.1.1669202398.851612
+
+Custom data SPECT, specifically I123-FP-CIT (DaTSCAN) SPECT, evaluates the dopaminergic system to diagnose Parkinson's disease, especially when tremor symptoms are unclear. It helps distinguish Parkinson's disease from treatment-related tremor.
+
+
+
+### 1.3.6.1.4.1.9328.50.1.54652
+
+https://www.cancerimagingarchive.net/collection/rider-pilot/
+
+Lung Image Database Consortium (LIDC). (2023) RIDER Pilot [Data set]. The Cancer Imaging Archive (TCIA). https://doi.org/10.7937/m87f-mz83
+
+### 1.3.6.1.4.1.14519.5.2.1.331759366792756327296606233801322964986
+
+Mayr, N., Yuh, W. T. C., Bowen, S., Harkenrider, M., Knopp, M. V., Lee, E. Y.-P., Leung, E., Lo, S. S., Small Jr., W., & Wolfson, A. H. (2023). Cervical Cancer – Tumor Heterogeneity: Serial Functional and Molecular Imaging Across the Radiation Therapy Course in Advanced Cervical Cancer (Version 1) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/ERZ5-QZ59
+
+https://www.cancerimagingarchive.net/collection/cc-tumor-heterogeneity/
+
+### 1.3.6.1.4.1.14519.5.2.1.297577087050970310787702792940607009472
+
+Eslick, E. M., Kipritidis, J., Gradinscak, D., Stevens, M. J., Bailey, D. L., Harris, B., Booth, J. T., & Keall, P. J. (2022). CT Ventilation as a functional imaging modality for lung cancer radiotherapy (CT-vs-PET-Ventilation-Imaging) (Version 1) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/3ppx-7s22
+
+https://www.cancerimagingarchive.net/collection/ct-vs-pet-ventilation-imaging/
+
+
+### 1.3.6.1.4.1.14519.5.2.1.2103.7010.634114621738943599785009586807
+### 1.3.6.1.4.1.14519.5.2.1.2103.7010.135953723682765205394176991681
+
+Huang, W., Tudorica, A., Chui, S., Kemmer, K., Naik, A., Troxell, M., Oh, K., Roy, N., Afzal, A., & Holtorf, M. (2014). Variations of dynamic contrast-enhanced magnetic resonance imaging in evaluation of breast cancer therapy response: a multicenter data analysis challenge (QIN Breast DCE-MRI) (Version 2) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/k9/tcia.2014.a2n1ixox
+
+https://www.cancerimagingarchive.net/collection/qin-breast-dce-mri/
+
+
+### 1.3.6.1.4.1.14519.5.2.1.1.24766180081901755714059656629507905556
+
+
+Cancer Moonshot Biobank. (2023). Cancer Moonshoot Biobank – Acute Myeloid Leukemia (CMB-AML) (Version 4) [Dataset]. The Cancer Imaging Archive. https://doi.org/10.7937/PCTE-6M66
+
+https://www.cancerimagingarchive.net/collection/cmb-aml/
+
+### 1.3.6.1.4.1.14519.5.2.1.3098.5025.285242291560760827564488897577
+
+https://www.cancerimagingarchive.net/collection/anti-pd-1_lung/
+
+Madhavi, P., Patel, S., & Tsao, A. S. (2019). Data from Anti-PD-1 Immunotherapy Lung [Data set]. The Cancer Imaging Archive. DOI:  10.7937/tcia.2019.zjjwb9ip
+
+### 1.3.6.1.4.1.14519.5.2.1.1.84416332615988066829602832830236187384
+
+https://www.cancerimagingarchive.net/collection/cmb-pca/
+
+Cancer Moonshot Biobank. (2022). Cancer Moonshot Biobank – Prostate Cancer Collection (CMB-PCA) (Version 7) [Dataset]. The Cancer Imaging Archive. https://doi.org/10.7937/25T7-6Y12
+
+### 1.3.6.1.4.1.32722.99.99.239341353911714368772597187099978969331
+
+Aerts, H. J. W. L., Wee, L., Rios Velazquez, E., Leijenaar, R. T. H., Parmar, C., Grossmann, P., Carvalho, S., Bussink, J., Monshouwer, R., Haibe-Kains, B., Rietveld, D., Hoebers, F., Rietbergen, M. M., Leemans, C. R., Dekker, A., Quackenbush, J., Gillies, R. J., Lambin, P. (2014). Data From NSCLC-Radiomics (version 4) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/K9/TCIA.2015.PF0M9REI
+
+https://www.cancerimagingarchive.net/collection/nsclc-radiomics/
+
+### 1.3.6.1.4.1.14519.5.2.1.7085.2626.494695569589117268722281491772
+
+https://www.cancerimagingarchive.net/collection/cptac-ucec/
+
+
+National Cancer Institute Clinical Proteomic Tumor Analysis Consortium (CPTAC). (2019). The Clinical Proteomic Tumor Analysis Consortium Uterine Corpus Endometrial Carcinoma Collection (CPTAC-UCEC) (Version 12) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/K9/TCIA.2018.3R3JUISW
+
+### 1.3.6.1.4.1.14519.5.2.1.207544490797667703011829289839681390478
+
+https://www.cancerimagingarchive.net/collection/remind/
+
+Juvekar, P., Dorent, R., Kögl, F., Torio, E., Barr, C., Rigolo, L., Galvin, C., Jowkar, N., Kazi, A., Haouchine, N., Cheema, H., Navab, N., Pieper, S., Wells, W. M., Bi, W. L., Golby, A., Frisken, S., & Kapur, T. (2023). The Brain Resection Multimodal Imaging Database (ReMIND) (Version 1) [dataset]. The Cancer Imaging Archive. https://doi.org/10.7937/3RAG-D070
+
+### 1.3.12.2.1107.5.1.4.60175.30000008042114404745300000010
+
+Gavrielides, M. A., Kinnard, L. M., Myers, K. J., Peregoy, J., Pritchard, W. F., Zeng, R., Esparza, J., Karanian, J., & Petrick, N. (2015). Data From Phantom FDA [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/k9/TCIA.2015.orbjkmux
+
+https://www.cancerimagingarchive.net/collection/phantom-fda/
+
+
+### 1.3.6.1.4.1.14519.5.2.1.6834.5010.992793141464713669479982159310
+
+https://www.cancerimagingarchive.net/collection/4d-lung/
+
+
+Hugo, G. D., Weiss, E., Sleeman, W. C., Balik, S., Keall, P. J., Lu, J., & Williamson, J. F. (2016). Data from 4D Lung Imaging of NSCLC Patients (Version 2) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/K9/TCIA.2016.ELN8YGLE
+
+
+### 1.3.6.1.4.1.9328.50.17.15423521354819720574322014551955370036
+
+https://www.cancerimagingarchive.net/collection/rider-lung-pet-ct/
+
+Muzi P, Wanner M, & Kinahan P. (2015). Data From RIDER Lung PET-CT. The Cancer Imaging Archive. https://doi.org/10.7937/k9/tcia.2015.ofip7tvm
+
+### 1.3.6.1.4.1.14519.5.2.1.9823.1001.134394060407147891170882809392
+
+https://www.cancerimagingarchive.net/collection/prostate-mri/
+
+Choyke P, Turkbey B, Pinto P, Merino M, Wood B. (2016). Data From PROSTATE-MRI. The Cancer Imaging Archive. http://doi.org/10.7937/K9/TCIA.2016.6046GUDv
+
+### 1.3.6.1.4.1.14519.5.2.1.191696062987463500085282581898315738844
+
+https://www.cancerimagingarchive.net/collection/upenn-gbm/
+
+Bakas, S., Sako, C., Akbari, H., Bilello, M., Sotiras, A., Shukla, G., Rudie, J. D., Flores Santamaria, N., Fathi Kazerooni, A., Pati, S., Rathore, S., Mamourian, E., Ha, S. M., Parker, W., Doshi, J., Baid, U., Bergman, M., Binder, Z. A., Verma, R., … Davatzikos, C. (2021). Multi-parametric magnetic resonance imaging (mpMRI) scans for de novo Glioblastoma (GBM) patients from the University of Pennsylvania Health System (UPENN-GBM) (Version 2) [Data set]. The Cancer Imaging Archive. https://doi.org/10.7937/TCIA.709X-DN49
+
+### 1.3.6.1.4.1.14519.5.2.1.4792.2001.921758700577562664959693695481
+
+https://www.cancerimagingarchive.net/collection/breast-diagnosis/
+
+Bloch, B. Nicolas, Jain, Ashali, & Jaffe, C. Carl. (2015). BREAST-DIAGNOSIS [Data set]. The Cancer Imaging Archive. http://doi.org/10.7937/K9/TCIA.2015.SDNRQXXR
+
+
+### 1.3.6.1.4.1.14519.5.2.1.1620.1225.189514895974227080410265976065
+
+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
@@ -333,4 +333,4 @@ MIT © [OHIF](https://github.com/OHIF)
 [vtk-npm]: https://www.npmjs.com/package/@ohif/extension-vtk
 <!-- prettier-ignore-end -->

-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large&issueType=license)
@@ -1,7 +1,7 @@
 {
  "name": "@externals/devDependencies",
  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.9.0-beta.66",
+  "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,18 +72,17 @@
    "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.89.0",
+    "webpack": "5.94.0",
    "webpack-bundle-analyzer": "^4.8.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "4.7.3",
@@ -1,7 +1,7 @@
 {
  "name": "@externals/dicom-microscopy-viewer",
  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.9.0-beta.66",
+  "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 @@
-fc0064fd9d8cdc8fde81b81f0e71fd5d077ca22b
+36813e0c2f1ea48953714e8e48aff6e9d4516449
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.9.0-beta.66",
+  "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.66",
-    "@ohif/extension-cornerstone": "3.9.0-beta.66",
-    "@ohif/extension-default": "3.9.0-beta.66",
-    "@ohif/i18n": "3.9.0-beta.66",
+    "@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.77.6",
-    "@cornerstonejs/core": "^1.77.6",
-    "@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.66",
+  "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.66",
-    "@ohif/extension-cornerstone": "3.9.0-beta.66",
-    "@ohif/extension-default": "3.9.0-beta.66",
-    "@ohif/i18n": "3.9.0-beta.66",
+    "@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.66",
+  "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.66",
-    "@ohif/extension-cornerstone": "3.9.0-beta.66",
-    "@ohif/extension-default": "3.9.0-beta.66",
-    "@ohif/i18n": "3.9.0-beta.66",
+    "@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.81.6",
-    "@cornerstonejs/core": "^1.81.6",
-    "@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,80 +0,0 @@
-import React from 'react';
-
-import { useAppConfig } from '@state';
-import { Toolbox } from '@ohif/ui';
-import PanelSegmentation from './panels/PanelSegmentation';
-
-const getPanelModule = ({
-  commandsManager,
-  servicesManager,
-  extensionManager,
-  configuration,
-  title,
-}: withAppTypes) => {
-  const { customizationService } = servicesManager.services;
-
-  const wrappedPanelSegmentation = configuration => {
-    const [appConfig] = useAppConfig();
-
-    return (
-      <PanelSegmentation
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-        extensionManager={extensionManager}
-        configuration={{
-          ...configuration,
-          disableEditing: appConfig.disableEditing,
-          ...customizationService.get('segmentation.panel'),
-        }}
-      />
-    );
-  };
-
-  const wrappedPanelSegmentationWithTools = configuration => {
-    const [appConfig] = useAppConfig();
-
-    return (
-      <>
-        <Toolbox
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
-          buttonSectionId="segmentationToolbox"
-          title="Segmentation Tools"
-          configuration={{
-            ...configuration,
-          }}
-        />
-        <PanelSegmentation
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
-          configuration={{
-            ...configuration,
-            disableEditing: appConfig.disableEditing,
-            ...customizationService.get('segmentation.panel'),
-          }}
-        />
-      </>
-    );
-  };
-
-  return [
-    {
-      name: 'panelSegmentation',
-      iconName: 'tab-segmentation',
-      iconLabel: 'Segmentation',
-      label: 'Segmentation',
-      component: wrappedPanelSegmentation,
-    },
-    {
-      name: 'panelSegmentationWithTools',
-      iconName: 'tab-segmentation',
-      iconLabel: 'Segmentation',
-      label: 'Segmentation',
-      component: wrappedPanelSegmentationWithTools,
-    },
-  ];
-};
-
-export default getPanelModule;
@@ -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,386 +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';
-
-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.66",
+  "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.66",
-    "@ohif/extension-cornerstone": "3.9.0-beta.66",
-    "@ohif/extension-measurement-tracking": "3.9.0-beta.66",
-    "@ohif/ui": "3.9.0-beta.66",
+    "@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.82.0",
-    "@cornerstonejs/core": "^1.82.0",
-    "@cornerstonejs/tools": "^1.82.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,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import CodeNameCodeSequenceValues from '../constants/CodeNameCodeSequenceValues';
+import { CodeNameCodeSequenceValues } from '../enums';
 import formatContentItemValue from '../utils/formatContentItem';

 const EMPTY_TAG_VALUE = '[empty]';
@@ -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,
@@ -135,30 +114,22 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
        newMeasurementSelected,
        displaySetService
      ).then(({ referencedDisplaySet, referencedDisplaySetMetadata }) => {
+        if (!referencedDisplaySet || !referencedDisplaySetMetadata) {
+          return;
+        }
+
        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);
-
-          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]
@@ -180,10 +151,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
      return null;
    }

-    const initialImageIndex = activeImageDisplaySetData.images.findIndex(
-      image => image.imageId === measurement.imageId
-    );
-
    return (
      <Component
        {...props}
@@ -208,7 +175,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          props.onElementEnabled?.(evt);
          onElementEnabled(evt);
        }}
-        initialImageIndex={initialImageIndex}
        isJumpToMeasurementDisabled={true}
      ></Component>
    );
@@ -289,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',
@@ -308,8 +269,8 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
          viewportId,
          isRehydratable: srDisplaySet.isRehydratable,
          isLocked,
-          sendTrackedMeasurementsEvent,
          t,
+          servicesManager,
        }),
        indexPriority: -100,
        location: viewportActionCornersService.LOCATIONS.topLeft,
@@ -328,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;
@@ -395,6 +348,10 @@ async function _getViewportReferencedDisplaySetData(
    displaySet.keyImageDisplaySet = createReferencedImageDisplaySet(displaySetService, displaySet);
  }

+  if (!displaySetInstanceUID) {
+    return { referencedDisplaySetMetadata: null, referencedDisplaySet: null };
+  }
+
  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

  const image0 = referencedDisplaySet.images[0];
@@ -420,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
@@ -441,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>
@@ -452,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>
@@ -466,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"
        />
      );
@@ -475,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 />}
@@ -1,18 +0,0 @@
-import { adaptersSR } from '@cornerstonejs/adapters';
-
-const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
-
-const CodeNameCodeSequenceValues = {
-  ImagingMeasurementReport: '126000',
-  ImageLibrary: '111028',
-  ImagingMeasurements: '126010',
-  MeasurementGroup: '125007',
-  ImageLibraryGroup: '126200',
-  TrackingUniqueIdentifier: '112040',
-  TrackingIdentifier: '112039',
-  Finding: '121071',
-  FindingSite: 'G-C0E3', // SRT
-  CornerstoneFreeText: Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT,
-};
-
-export { CodeNameCodeSequenceValues as default };
@@ -1,7 +0,0 @@
-export default {
-  POINT: 'POINT',
-  MULTIPOINT: 'MULTIPOINT',
-  POLYLINE: 'POLYLINE',
-  CIRCLE: 'CIRCLE',
-  ELLIPSE: 'ELLIPSE',
-};
@@ -0,0 +1,44 @@
+import { adaptersSR } from '@cornerstonejs/adapters';
+
+const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
+
+export const SCOORDTypes = {
+  POINT: 'POINT',
+  MULTIPOINT: 'MULTIPOINT',
+  POLYLINE: 'POLYLINE',
+  CIRCLE: 'CIRCLE',
+  ELLIPSE: 'ELLIPSE',
+};
+
+export const CodeNameCodeSequenceValues = {
+  ImagingMeasurementReport: '126000',
+  ImageLibrary: '111028',
+  ImagingMeasurements: '126010',
+  MeasurementGroup: '125007',
+  ImageLibraryGroup: '126200',
+  TrackingUniqueIdentifier: '112040',
+  TrackingIdentifier: '112039',
+  Finding: '121071',
+  FindingSite: 'G-C0E3', // SRT
+  FindingSiteSCT: '363698007', // SCT
+};
+
+export const CodingSchemeDesignators = {
+  SRT: 'SRT',
+  SCT: 'SCT',
+  CornerstoneCodeSchemes: [Cornerstone3DCodeScheme.CodingSchemeDesignator, 'CST4'],
+};
+
+export const RelationshipType = {
+  INFERRED_FROM: 'INFERRED FROM',
+  CONTAINS: 'CONTAINS',
+};
+
+const enums = {
+  CodeNameCodeSequenceValues,
+  CodingSchemeDesignators,
+  RelationshipType,
+  SCOORDTypes,
+};
+
+export default enums;
@@ -1,32 +1,37 @@
-import { SOPClassHandlerName, SOPClassHandlerId } from './id';
 import { utils, classes, DisplaySetService, Types } from '@ohif/core';
-import addDICOMSRDisplayAnnotation from './utils/addDICOMSRDisplayAnnotation';
-import isRehydratable from './utils/isRehydratable';
+import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
 import { adaptersSR } from '@cornerstonejs/adapters';
-import CodeNameCodeSequenceValues from './constants/CodeNameCodeSequenceValues';
+
+import addSRAnnotation from './utils/addSRAnnotation';
+import isRehydratable from './utils/isRehydratable';
+import {
+  SOPClassHandlerName,
+  SOPClassHandlerId,
+  SOPClassHandlerId3D,
+  SOPClassHandlerName3D,
+} from './id';
+import { CodeNameCodeSequenceValues, CodingSchemeDesignators } from './enums';
+
+const { sopClassDictionary } = utils;
+const { CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION } = CSExtensionEnums;
+const { ImageSet, MetadataProvider: metadataProvider } = classes;
+const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;

 type InstanceMetadata = Types.InstanceMetadata;

-const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
-
-const { ImageSet, MetadataProvider: metadataProvider } = classes;
-
-// TODO ->
-// Add SR thumbnail
-// Make viewport
-// Get stacks from referenced displayInstanceUID and load into wrapped CornerStone viewport.
+/**
+ * TODO
+ * - [ ] Add SR thumbnail
+ * - [ ] Make viewport
+ * - [ ] Get stacks from referenced displayInstanceUID and load into wrapped CornerStone viewport
+ */

 const sopClassUids = [
-  '1.2.840.10008.5.1.4.1.1.88.11', // BASIC TEXT SR
-  '1.2.840.10008.5.1.4.1.1.88.22', // ENHANCED SR
-  '1.2.840.10008.5.1.4.1.1.88.33', // COMPREHENSIVE SR
-  '1.2.840.10008.5.1.4.1.1.88.34', // Comprehensive 3D SR
-  // '1.2.840.10008.5.1.4.1.1.88.50', // Mammography CAD SR
+  sopClassDictionary.BasicTextSR,
+  sopClassDictionary.EnhancedSR,
+  sopClassDictionary.ComprehensiveSR,
 ];

-const CORNERSTONE_3D_TOOLS_SOURCE_NAME = 'Cornerstone3DTools';
-const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
-
 const validateSameStudyUID = (uid: string, instances): void => {
  instances.forEach(it => {
    if (it.StudyInstanceUID !== uid) {
@@ -36,18 +41,6 @@ const validateSameStudyUID = (uid: string, instances): void => {
  });
 };

-const CodingSchemeDesignators = {
-  SRT: 'SRT',
-  CornerstoneCodeSchemes: [Cornerstone3DCodeScheme.CodingSchemeDesignator, 'CST4'],
-};
-
-const RELATIONSHIP_TYPE = {
-  INFERRED_FROM: 'INFERRED FROM',
-  CONTAINS: 'CONTAINS',
-};
-
-const CORNERSTONE_FREETEXT_CODE_VALUE = 'CORNERSTONEFREETEXT';
-
 /**
 * Adds instances to the DICOM SR series, rather than creating a new
 * series, so that as SR's are saved, they append to the series, and the
@@ -97,11 +90,14 @@ function _getDisplaySetsFromSeries(
    SeriesDescription,
    SeriesNumber,
    SeriesDate,
+    SeriesTime,
    ConceptNameCodeSequence,
    SOPClassUID,
  } = instance;
  validateSameStudyUID(instance.StudyInstanceUID, instances);

+  const is3DSR = SOPClassUID === sopClassDictionary.Comprehensive3DSR;
+
  const isImagingMeasurementReport =
    ConceptNameCodeSequence?.CodeValue === CodeNameCodeSequenceValues.ImagingMeasurementReport;

@@ -111,10 +107,11 @@ function _getDisplaySetsFromSeries(
    SeriesDescription,
    SeriesNumber,
    SeriesDate,
+    SeriesTime,
    SOPInstanceUID,
    SeriesInstanceUID,
    StudyInstanceUID,
-    SOPClassHandlerId,
+    SOPClassHandlerId: is3DSR ? SOPClassHandlerId3D : SOPClassHandlerId,
    SOPClassUID,
    instances,
    referencedImages: null,
@@ -132,11 +129,21 @@ function _getDisplaySetsFromSeries(
  return [displaySet];
 }

-async function _load(displaySet, servicesManager: AppTypes.ServicesManager, extensionManager) {
+/**
+ * Loads the display set with the given services and extension manager.
+ * @param srDisplaySet - The display set to load.
+ * @param servicesManager - The services manager containing displaySetService and measurementService.
+ * @param extensionManager - The extension manager containing data sources.
+ */
+async function _load(
+  srDisplaySet: Types.DisplaySet,
+  servicesManager: AppTypes.ServicesManager,
+  extensionManager: AppTypes.ExtensionManager
+) {
  const { displaySetService, measurementService } = servicesManager.services;
  const dataSources = extensionManager.getDataSources();
  const dataSource = dataSources[0];
-  const { ContentSequence } = displaySet.instance;
+  const { ContentSequence } = srDisplaySet.instance;

  async function retrieveBulkData(obj, parentObj = null, key = null) {
    for (const prop in obj) {
@@ -147,9 +154,9 @@ async function _load(displaySet, servicesManager: AppTypes.ServicesManager, exte
      } else if (prop === 'BulkDataURI') {
        const value = await dataSource.retrieve.bulkDataURI({
          BulkDataURI: obj[prop],
-          StudyInstanceUID: displaySet.instance.StudyInstanceUID,
-          SeriesInstanceUID: displaySet.instance.SeriesInstanceUID,
-          SOPInstanceUID: displaySet.instance.SOPInstanceUID,
+          StudyInstanceUID: srDisplaySet.instance.StudyInstanceUID,
+          SeriesInstanceUID: srDisplaySet.instance.SeriesInstanceUID,
+          SOPInstanceUID: srDisplaySet.instance.SOPInstanceUID,
        });
        if (parentObj && key) {
          parentObj[key] = new Float32Array(value);
@@ -158,16 +165,16 @@ async function _load(displaySet, servicesManager: AppTypes.ServicesManager, exte
    }
  }

-  if (displaySet.isLoaded !== true) {
+  if (srDisplaySet.isLoaded !== true) {
    await retrieveBulkData(ContentSequence);
  }

-  if (displaySet.isImagingMeasurementReport) {
-    displaySet.referencedImages = _getReferencedImagesList(ContentSequence);
-    displaySet.measurements = _getMeasurements(ContentSequence);
+  if (srDisplaySet.isImagingMeasurementReport) {
+    srDisplaySet.referencedImages = _getReferencedImagesList(ContentSequence);
+    srDisplaySet.measurements = _getMeasurements(ContentSequence);
  } else {
-    displaySet.referencedImages = [];
-    displaySet.measurements = [];
+    srDisplaySet.referencedImages = [];
+    srDisplaySet.measurements = [];
  }

  const mappings = measurementService.getSourceMappings(
@@ -175,28 +182,30 @@ async function _load(displaySet, servicesManager: AppTypes.ServicesManager, exte
    CORNERSTONE_3D_TOOLS_SOURCE_VERSION
  );

-  displaySet.isHydrated = false;
-  displaySet.isRehydratable = isRehydratable(displaySet, mappings);
-  displaySet.isLoaded = true;
+  srDisplaySet.isHydrated = false;
+  srDisplaySet.isRehydratable = isRehydratable(srDisplaySet, mappings);
+  srDisplaySet.isLoaded = true;

-  // Check currently added displaySets and add measurements if the sources exist.
+  /** Check currently added displaySets and add measurements if the sources exist */
  displaySetService.activeDisplaySets.forEach(activeDisplaySet => {
    _checkIfCanAddMeasurementsToDisplaySet(
-      displaySet,
+      srDisplaySet,
      activeDisplaySet,
      dataSource,
      servicesManager
    );
  });

-  // Subscribe to new displaySets as the source may come in after.
+  /** Subscribe to new displaySets as the source may come in after */
  displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, data => {
    const { displaySetsAdded } = data;
-    // If there are still some measurements that have not yet been loaded into cornerstone,
-    // See if we can load them onto any of the new displaySets.
+    /**
+     * If there are still some measurements that have not yet been loaded into cornerstone,
+     * See if we can load them onto any of the new displaySets.
+     */
    displaySetsAdded.forEach(newDisplaySet => {
      _checkIfCanAddMeasurementsToDisplaySet(
-        displaySet,
+        srDisplaySet,
        newDisplaySet,
        dataSource,
        servicesManager
@@ -205,6 +214,14 @@ async function _load(displaySet, servicesManager: AppTypes.ServicesManager, exte
  });
 }

+/**
+ * Checks if measurements can be added to a display set.
+ *
+ * @param srDisplaySet - The source display set containing measurements.
+ * @param newDisplaySet - The new display set to check if measurements can be added.
+ * @param dataSource - The data source used to retrieve image IDs.
+ * @param servicesManager - The services manager.
+ */
 function _checkIfCanAddMeasurementsToDisplaySet(
  srDisplaySet,
  newDisplaySet,
@@ -212,108 +229,103 @@ function _checkIfCanAddMeasurementsToDisplaySet(
  servicesManager: AppTypes.ServicesManager
 ) {
  const { customizationService } = servicesManager.services;
-  let unloadedMeasurements = srDisplaySet.measurements.filter(
+
+  const unloadedMeasurements = srDisplaySet.measurements.filter(
    measurement => measurement.loaded === false
  );

-  if (unloadedMeasurements.length === 0) {
-    // All already loaded!
+  if (
+    unloadedMeasurements.length === 0 ||
+    !(newDisplaySet instanceof ImageSet) ||
+    newDisplaySet.unsupported
+  ) {
    return;
  }

-  if ((!newDisplaySet) instanceof ImageSet) {
-    // This also filters out _this_ displaySet, as it is not an ImageSet.
+  // const { sopClassUids } = newDisplaySet;
+  // Create a Set for faster lookups
+  // const sopClassUidSet = new Set(sopClassUids);
+
+  // Create a Map to efficiently look up ImageIds by SOPInstanceUID and frame number
+  const imageIdMap = new Map<string, string>();
+  const imageIds = dataSource.getImageIdsForDisplaySet(newDisplaySet);
+
+  for (const imageId of imageIds) {
+    const { SOPInstanceUID, frameNumber } = metadataProvider.getUIDsFromImageID(imageId);
+    const key = `${SOPInstanceUID}:${frameNumber || 1}`;
+    imageIdMap.set(key, imageId);
+  }
+
+  if (!unloadedMeasurements?.length) {
    return;
  }

-  if (newDisplaySet.unsupported) {
-    return;
-  }
+  const is3DSR = srDisplaySet.SOPClassUID === sopClassDictionary.Comprehensive3DSR;

-  const { sopClassUids } = newDisplaySet;
+  for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
+    let measurement = unloadedMeasurements[j];

-  // Check if any have the newDisplaySet is the correct SOPClass.
-  unloadedMeasurements = unloadedMeasurements.filter(measurement =>
-    measurement.coords.some(coord =>
-      sopClassUids.includes(coord.ReferencedSOPSequence.ReferencedSOPClassUID)
-    )
-  );
+    const onBeforeSRAddMeasurement = customizationService.getCustomization(
+      'onBeforeSRAddMeasurement'
+    );

-  if (unloadedMeasurements.length === 0) {
-    // New displaySet isn't the correct SOPClass, so can't contain the referenced images.
-    return;
-  }
-
-  const SOPInstanceUIDs = [];
-
-  unloadedMeasurements.forEach(measurement => {
-    const { coords } = measurement;
-
-    coords.forEach(coord => {
-      const SOPInstanceUID = coord.ReferencedSOPSequence.ReferencedSOPInstanceUID;
-
-      if (!SOPInstanceUIDs.includes(SOPInstanceUID)) {
-        SOPInstanceUIDs.push(SOPInstanceUID);
-      }
-    });
-  });
-
-  const imageIdsForDisplaySet = dataSource.getImageIdsForDisplaySet(newDisplaySet);
-
-  for (const imageId of imageIdsForDisplaySet) {
-    if (!unloadedMeasurements.length) {
-      // All measurements loaded.
-      return;
+    if (typeof onBeforeSRAddMeasurement === 'function') {
+      measurement = onBeforeSRAddMeasurement({
+        measurement,
+        StudyInstanceUID: srDisplaySet.StudyInstanceUID,
+        SeriesInstanceUID: srDisplaySet.SeriesInstanceUID,
+      });
    }

-    const { SOPInstanceUID, frameNumber } = metadataProvider.getUIDsFromImageID(imageId);
+    // if it is 3d SR we can just add the SR annotation
+    if (is3DSR) {
+      addSRAnnotation(measurement, null, null);
+      measurement.loaded = true;
+      continue;
+    }

-    if (SOPInstanceUIDs.includes(SOPInstanceUID)) {
-      for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
-        let measurement = unloadedMeasurements[j];
+    const referencedSOPSequence = measurement.coords[0].ReferencedSOPSequence;
+    if (!referencedSOPSequence) {
+      continue;
+    }

-        const onBeforeSRAddMeasurement = customizationService.getModeCustomization(
-          'onBeforeSRAddMeasurement'
-        )?.value;
+    const { ReferencedSOPInstanceUID } = referencedSOPSequence;
+    const frame = referencedSOPSequence.ReferencedFrameNumber || 1;
+    const key = `${ReferencedSOPInstanceUID}:${frame}`;
+    const imageId = imageIdMap.get(key);

-        if (typeof onBeforeSRAddMeasurement === 'function') {
-          measurement = onBeforeSRAddMeasurement({
-            measurement,
-            StudyInstanceUID: srDisplaySet.StudyInstanceUID,
-            SeriesInstanceUID: srDisplaySet.SeriesInstanceUID,
-          });
-        }
+    if (
+      imageId &&
+      _measurementReferencesSOPInstanceUID(measurement, ReferencedSOPInstanceUID, frame)
+    ) {
+      addSRAnnotation(measurement, imageId, frame);

-        if (_measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber)) {
-          const frame =
-            (measurement.coords[0].ReferencedSOPSequence &&
-              measurement.coords[0].ReferencedSOPSequence?.ReferencedFrameNumber) ||
-            1;
+      // Update measurement properties
+      measurement.loaded = true;
+      measurement.imageId = imageId;
+      measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
+      measurement.ReferencedSOPInstanceUID = ReferencedSOPInstanceUID;
+      measurement.frameNumber = frame;

-          /** Add DICOMSRDisplay annotation for the SR viewport (only) */
-          addDICOMSRDisplayAnnotation(measurement, imageId, frame);
-
-          /** Update measurement properties */
-          measurement.loaded = true;
-          measurement.imageId = imageId;
-          measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
-          measurement.ReferencedSOPInstanceUID =
-            measurement.coords[0].ReferencedSOPSequence.ReferencedSOPInstanceUID;
-          measurement.frameNumber = frame;
-          delete measurement.coords;
-
-          unloadedMeasurements.splice(j, 1);
-        }
-      }
+      unloadedMeasurements.splice(j, 1);
    }
  }
 }

+/**
+ * Checks if a measurement references a specific SOP Instance UID.
+ * @param measurement - The measurement object.
+ * @param SOPInstanceUID - The SOP Instance UID to check against.
+ * @param frameNumber - The frame number to check against (optional).
+ * @returns True if the measurement references the specified SOP Instance UID, false otherwise.
+ */
 function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber) {
  const { coords } = measurement;

-  // NOTE: The ReferencedFrameNumber can be multiple values according to the DICOM
-  //  Standard. But for now, we will support only one ReferenceFrameNumber.
+  /**
+   * NOTE: The ReferencedFrameNumber can be multiple values according to the DICOM
+   * Standard. But for now, we will support only one ReferenceFrameNumber.
+   */
  const ReferencedFrameNumber =
    (measurement.coords[0].ReferencedSOPSequence &&
      measurement.coords[0].ReferencedSOPSequence?.ReferencedFrameNumber) ||
@@ -326,27 +338,46 @@ function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frame
  for (let j = 0; j < coords.length; j++) {
    const coord = coords[j];
    const { ReferencedSOPInstanceUID } = coord.ReferencedSOPSequence;
-
    if (ReferencedSOPInstanceUID === SOPInstanceUID) {
      return true;
    }
  }
+
+  return false;
 }

+/**
+ * Retrieves the SOP class handler module.
+ *
+ * @param {Object} options - The options for retrieving the SOP class handler module.
+ * @param {Object} options.servicesManager - The services manager.
+ * @param {Object} options.extensionManager - The extension manager.
+ * @returns {Array} An array containing the SOP class handler module.
+ */
 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };
-
  return [
    {
      name: SOPClassHandlerName,
      sopClassUids,
      getDisplaySetsFromSeries,
    },
+    {
+      name: SOPClassHandlerName3D,
+      sopClassUids: [sopClassDictionary.Comprehensive3DSR],
+      getDisplaySetsFromSeries,
+    },
  ];
 }

+/**
+ * Retrieves the measurements from the ImagingMeasurementReportContentSequence.
+ *
+ * @param {Array} ImagingMeasurementReportContentSequence - The ImagingMeasurementReportContentSequence array.
+ * @returns {Array} - The array of measurements.
+ */
 function _getMeasurements(ImagingMeasurementReportContentSequence) {
  const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
    item =>
@@ -363,7 +394,6 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {

  const mergedContentSequencesByTrackingUniqueIdentifiers =
    _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups);
-
  const measurements = [];

  Object.keys(mergedContentSequencesByTrackingUniqueIdentifiers).forEach(
@@ -372,7 +402,6 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
        mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier];

      const measurement = _processMeasurement(mergedContentSequence);
-
      if (measurement) {
        measurements.push(measurement);
      }
@@ -382,6 +411,12 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
  return measurements;
 }

+/**
+ * Retrieves merged content sequences by tracking unique identifiers.
+ *
+ * @param {Array} MeasurementGroups - The measurement groups.
+ * @returns {Object} - The merged content sequences by tracking unique identifiers.
+ */
 function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups) {
  const mergedContentSequencesByTrackingUniqueIdentifiers = {};

@@ -393,7 +428,6 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups
        item.ConceptNameCodeSequence.CodeValue ===
        CodeNameCodeSequenceValues.TrackingUniqueIdentifier
    );
-
    if (!TrackingUniqueIdentifierItem) {
      console.warn('No Tracking Unique Identifier, skipping ambiguous measurement.');
    }
@@ -422,6 +456,15 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups
  return mergedContentSequencesByTrackingUniqueIdentifiers;
 }

+/**
+ * Processes the measurement based on the merged content sequence.
+ * If the merged content sequence contains SCOORD or SCOORD3D value types,
+ * it calls the _processTID1410Measurement function.
+ * Otherwise, it calls the _processNonGeometricallyDefinedMeasurement function.
+ *
+ * @param {Array<Object>} mergedContentSequence - The merged content sequence to process.
+ * @returns {any} - The processed measurement result.
+ */
 function _processMeasurement(mergedContentSequence) {
  if (
    mergedContentSequence.some(
@@ -434,11 +477,21 @@ function _processMeasurement(mergedContentSequence) {
  return _processNonGeometricallyDefinedMeasurement(mergedContentSequence);
 }

+/**
+ * Processes TID 1410 style measurements from the mergedContentSequence.
+ * TID 1410 style measurements have a SCOORD or SCOORD3D at the top level,
+ * and non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D.
+ *
+ * @param mergedContentSequence - The merged content sequence containing the measurements.
+ * @returns The measurement object containing the loaded status, labels, coordinates, tracking unique identifier, and tracking identifier.
+ */
 function _processTID1410Measurement(mergedContentSequence) {
  // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
  // And non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D

-  const graphicItem = mergedContentSequence.find(group => group.ValueType === 'SCOORD');
+  const graphicItem = mergedContentSequence.find(
+    group => group.ValueType === 'SCOORD' || group.ValueType === 'SCOORD3D'
+  );

  const UIDREFContentItem = mergedContentSequence.find(group => group.ValueType === 'UIDREF');

@@ -465,7 +518,6 @@ function _processTID1410Measurement(mergedContentSequence) {

  NUMContentItems.forEach(item => {
    const { ConceptNameCodeSequence, MeasuredValueSequence } = item;
-
    if (MeasuredValueSequence) {
      measurement.labels.push(
        _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence)
@@ -473,12 +525,29 @@ function _processTID1410Measurement(mergedContentSequence) {
    }
  });

+  const findingSites = mergedContentSequence.filter(
+    item =>
+      item.ConceptNameCodeSequence.CodingSchemeDesignator === CodingSchemeDesignators.SCT &&
+      item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.FindingSiteSCT
+  );
+  if (findingSites.length) {
+    measurement.labels.push({
+      label: CodeNameCodeSequenceValues.FindingSiteSCT,
+      value: findingSites[0].ConceptCodeSequence.CodeMeaning,
+    });
+  }
+
  return measurement;
 }

+/**
+ * Processes the non-geometrically defined measurement from the merged content sequence.
+ *
+ * @param mergedContentSequence The merged content sequence containing the measurement data.
+ * @returns The processed measurement object.
+ */
 function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
  const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');
-
  const UIDREFContentItem = mergedContentSequence.find(group => group.ValueType === 'UIDREF');

  const TrackingIdentifierContentItem = mergedContentSequence.find(
@@ -508,10 +577,10 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
    CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
      finding.ConceptCodeSequence.CodingSchemeDesignator
    ) &&
-    finding.ConceptCodeSequence.CodeValue === CodeNameCodeSequenceValues.CornerstoneFreeText
+    finding.ConceptCodeSequence.CodeValue === Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT
  ) {
    measurement.labels.push({
-      label: CORNERSTONE_FREETEXT_CODE_VALUE,
+      label: Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT,
      value: finding.ConceptCodeSequence.CodeMeaning,
    });
  }
@@ -523,12 +592,13 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
        CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
          FindingSite.ConceptCodeSequence.CodingSchemeDesignator
        ) &&
-        FindingSite.ConceptCodeSequence.CodeValue === CodeNameCodeSequenceValues.CornerstoneFreeText
+        FindingSite.ConceptCodeSequence.CodeValue ===
+          Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT
    );

    if (cornerstoneFreeTextFindingSite) {
      measurement.labels.push({
-        label: CORNERSTONE_FREETEXT_CODE_VALUE,
+        label: Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT,
        value: cornerstoneFreeTextFindingSite.ConceptCodeSequence.CodeMeaning,
      });
    }
@@ -538,15 +608,12 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
    const { ConceptNameCodeSequence, ContentSequence, MeasuredValueSequence } = item;

    const { ValueType } = ContentSequence;
-
    if (!ValueType === 'SCOORD') {
      console.warn(`Graphic ${ValueType} not currently supported, skipping annotation.`);
-
      return;
    }

    const coords = _getCoordsFromSCOORDOrSCOORD3D(ContentSequence);
-
    if (coords) {
      measurement.coords.push(coords);
    }
@@ -561,51 +628,47 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
  return measurement;
 }

-function _getCoordsFromSCOORDOrSCOORD3D(item) {
-  const { ValueType, RelationshipType, GraphicType, GraphicData } = item;
-
-  if (
-    !(
-      RelationshipType == RELATIONSHIP_TYPE.INFERRED_FROM ||
-      RelationshipType == RELATIONSHIP_TYPE.CONTAINS
-    )
-  ) {
-    console.warn(
-      `Relationshiptype === ${RelationshipType}. Cannot deal with NON TID-1400 SCOORD group with RelationshipType !== "INFERRED FROM" or "CONTAINS"`
-    );
-
-    return;
-  }
-
+/**
+ * Extracts coordinates from a graphic item of type SCOORD or SCOORD3D.
+ * @param {object} graphicItem - The graphic item containing the coordinates.
+ * @returns {object} - The extracted coordinates.
+ */
+const _getCoordsFromSCOORDOrSCOORD3D = graphicItem => {
+  const { ValueType, GraphicType, GraphicData } = graphicItem;
  const coords = { ValueType, GraphicType, GraphicData };
-
-  // ContentSequence has length of 1 as RelationshipType === 'INFERRED FROM'
-  if (ValueType === 'SCOORD') {
-    const { ReferencedSOPSequence } = item.ContentSequence;
-
-    coords.ReferencedSOPSequence = ReferencedSOPSequence;
-  } else if (ValueType === 'SCOORD3D') {
-    const { ReferencedFrameOfReferenceSequence } = item.ContentSequence;
-
-    coords.ReferencedFrameOfReferenceSequence = ReferencedFrameOfReferenceSequence;
-  }
-
+  coords.ReferencedSOPSequence = graphicItem.ContentSequence?.ReferencedSOPSequence;
+  coords.ReferencedFrameOfReferenceSequence =
+    graphicItem.ReferencedFrameOfReferenceUID ||
+    graphicItem.ContentSequence?.ReferencedFrameOfReferenceSequence;
  return coords;
-}
+};

+/**
+ * Retrieves the label and value from the provided ConceptNameCodeSequence and MeasuredValueSequence.
+ * @param {Object} ConceptNameCodeSequence - The ConceptNameCodeSequence object.
+ * @param {Object} MeasuredValueSequence - The MeasuredValueSequence object.
+ * @returns {Object} - An object containing the label and value.
+ *                    The label represents the CodeMeaning from the ConceptNameCodeSequence.
+ *                    The value represents the formatted NumericValue and CodeValue from the MeasuredValueSequence.
+ *                    Example: { label: 'Long Axis', value: '31.00 mm' }
+ */
 function _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence) {
  const { CodeMeaning } = ConceptNameCodeSequence;
  const { NumericValue, MeasurementUnitsCodeSequence } = MeasuredValueSequence;
  const { CodeValue } = MeasurementUnitsCodeSequence;
-
  const formatedNumericValue = NumericValue ? Number(NumericValue).toFixed(2) : '';
-
  return {
    label: CodeMeaning,
    value: `${formatedNumericValue} ${CodeValue}`,
  }; // E.g. Long Axis: 31.0 mm
 }

+/**
+ * Retrieves a list of referenced images from the Imaging Measurement Report Content Sequence.
+ *
+ * @param {Array} ImagingMeasurementReportContentSequence - The Imaging Measurement Report Content Sequence.
+ * @returns {Array} - The list of referenced images.
+ */
 function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
  const ImageLibrary = ImagingMeasurementReportContentSequence.find(
    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImageLibrary
@@ -618,6 +681,9 @@ function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
  const ImageLibraryGroup = _getSequenceAsArray(ImageLibrary.ContentSequence).find(
    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImageLibraryGroup
  );
+  if (!ImageLibraryGroup) {
+    return [];
+  }

  const referencedImages = [];

@@ -641,6 +707,15 @@ function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
  return referencedImages;
 }

+/**
+ * Converts a DICOM sequence to an array.
+ * If the sequence is null or undefined, an empty array is returned.
+ * If the sequence is already an array, it is returned as is.
+ * Otherwise, the sequence is wrapped in an array and returned.
+ *
+ * @param {any} sequence - The DICOM sequence to convert.
+ * @returns {any[]} - The converted array.
+ */
 function _getSequenceAsArray(sequence) {
  if (!sequence) {
    return [];
@@ -5,4 +5,7 @@ const id = packageJson.name;
 const SOPClassHandlerName = 'dicom-sr';
 const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;

-export { SOPClassHandlerName, SOPClassHandlerId, id };
+const SOPClassHandlerName3D = 'dicom-sr-3d';
+const SOPClassHandlerId3D = `${id}.sopClassHandlerModule.${SOPClassHandlerName3D}`;
+
+export { SOPClassHandlerName, SOPClassHandlerId, SOPClassHandlerName3D, SOPClassHandlerId3D, id };
@@ -8,6 +8,7 @@ import { id } from './id.js';
 import toolNames from './tools/toolNames';
 import hydrateStructuredReport from './utils/hydrateStructuredReport';
 import createReferencedImageDisplaySet from './utils/createReferencedImageDisplaySet';
+import Enums from './enums';

 const Component = React.lazy(() => {
  return import(/* webpackPrefetch: true */ './components/OHIFCornerstoneSRViewport');
@@ -29,6 +30,7 @@ const dicomSRExtension = {
   * Only required property. Should be a unique value across all extensions.
   */
  id,
+
  onModeEnter,

  preRegistration,
@@ -70,4 +72,4 @@ const dicomSRExtension = {
 export default dicomSRExtension;

 // Put static exports here so they can be type checked
-export { hydrateStructuredReport, createReferencedImageDisplaySet, srProtocol };
+export { hydrateStructuredReport, createReferencedImageDisplaySet, srProtocol, Enums, toolNames };
@@ -9,16 +9,28 @@ import {
  LengthTool,
  PlanarFreehandROITool,
  RectangleROITool,
+  utilities as csToolsUtils,
 } from '@cornerstonejs/tools';
+import { Types, MeasurementService } from '@ohif/core';
+import { StackViewport, utilities as csUtils } from '@cornerstonejs/core';
+import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';
 import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
+import SCOORD3DPointTool from './tools/SCOORD3DPointTool';
+import SRSCOOR3DProbeMapper from './utils/SRSCOOR3DProbeMapper';
 import addToolInstance from './utils/addToolInstance';
-import { Types } from '@ohif/core';
 import toolNames from './tools/toolNames';

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

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

+  const csTools3DVer1MeasurementSource = measurementService.getSource(
+    CORNERSTONE_3D_TOOLS_SOURCE_NAME,
+    CORNERSTONE_3D_TOOLS_SOURCE_VERSION
+  );
+
+  const { POINT } = measurementService.VALUE_TYPES;
+
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'SRSCOORD3DPoint',
+    POINT,
+    SRSCOOR3DProbeMapper.toAnnotation,
+    SRSCOOR3DProbeMapper.toMeasurement
+  );
+
  // Modify annotation tools to use dashed lines on SR
  const dashedLine = {
    lineDash: '4,4',
@@ -1,15 +0,0 @@
-import { SOPClassHandlerId } from './id';
-
-export default function onModeEnter({ servicesManager }) {
-  const { displaySetService } = servicesManager.services;
-  const displaySetCache = displaySetService.getDisplaySetCache();
-
-  const srDisplaySets = [...displaySetCache.values()].filter(
-    ds => ds.SOPClassHandlerId === SOPClassHandlerId
-  );
-
-  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']);
+}
@@ -7,10 +7,11 @@ import {
  Types as cs3DToolsTypes,
 } from '@cornerstonejs/tools';
 import { getTrackingUniqueIdentifiersForElement } from './modules/dicomSRModule';
-import SCOORD_TYPES from '../constants/scoordTypes';
+import { SCOORDTypes } from '../enums';
+import toolNames from './toolNames';

 export default class DICOMSRDisplayTool extends AnnotationTool {
-  static toolName = 'DICOMSRDisplay';
+  static toolName = toolNames.DICOMSRDisplay;

  constructor(
    toolProps = {},
@@ -112,19 +113,19 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
        let canvasCoordinatesAdapter;

        switch (GraphicType) {
-          case SCOORD_TYPES.POINT:
+          case SCOORDTypes.POINT:
            renderMethod = this.renderPoint;
            break;
-          case SCOORD_TYPES.MULTIPOINT:
+          case SCOORDTypes.MULTIPOINT:
            renderMethod = this.renderMultipoint;
            break;
-          case SCOORD_TYPES.POLYLINE:
+          case SCOORDTypes.POLYLINE:
            renderMethod = this.renderPolyLine;
            break;
-          case SCOORD_TYPES.CIRCLE:
+          case SCOORDTypes.CIRCLE:
            renderMethod = this.renderEllipse;
            break;
-          case SCOORD_TYPES.ELLIPSE:
+          case SCOORDTypes.ELLIPSE:
            renderMethod = this.renderEllipse;
            canvasCoordinatesAdapter = utilities.math.ellipse.getCanvasEllipseCorners;
            break;
@@ -229,7 +230,11 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
      // This gives us one point for arrow
      canvasCoordinates.push(viewport.worldToCanvas(point));

-      // We get the other point for the arrow by using the image size
+      if (data[1] !== undefined) {
+        canvasCoordinates.push(viewport.worldToCanvas(data[1]));
+      }
+      else{
+         // We get the other point for the arrow by using the image size
      const imagePixelModule = metaData.get('imagePixelModule', referencedImageId);

      let xOffset = 10;
@@ -248,6 +253,9 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
      ]);

      canvasCoordinates.push(viewport.worldToCanvas(arrowEnd));
+        
+      }
+     

      const arrowUID = `${index}`;

@@ -335,7 +343,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
    }

    const { annotationUID, data = {} } = annotation;
-    const { label } = data;
+    const { labels } = data;
    const { color } = options;

    let adaptedCanvasCoordinates = canvasCoordinates;
@@ -343,7 +351,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
    if (typeof canvasCoordinatesAdapter === 'function') {
      adaptedCanvasCoordinates = canvasCoordinatesAdapter(canvasCoordinates);
    }
-    const textLines = this._getTextBoxLinesFromLabels(label);
+    const textLines = this._getTextBoxLinesFromLabels(labels);
    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(adaptedCanvasCoordinates);

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

 export default toolNames;
@@ -0,0 +1,62 @@
+const SRSCOOR3DProbe = {
+  toAnnotation: measurement => {},
+
+  /**
+   * Maps cornerstone annotation event data to measurement service format.
+   *
+   * @param {Object} cornerstone Cornerstone event data
+   * @return {Measurement} Measurement instance
+   */
+  toMeasurement: (
+    csToolsEventDetail,
+    displaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType,
+    customizationService
+  ) => {
+    const { annotation } = csToolsEventDetail;
+    const { metadata, data, annotationUID } = annotation;
+
+    if (!metadata || !data) {
+      console.warn('Probe tool: Missing metadata or data');
+      return null;
+    }
+
+    const { toolName } = metadata;
+    const { points } = data.handles;
+
+    const displayText = getDisplayText(annotation);
+    return {
+      uid: annotationUID,
+      points,
+      metadata,
+      toolName: metadata.toolName,
+      label: data.label,
+      displayText: displayText,
+      data: data.cachedStats,
+      type: getValueTypeFromToolType?.(toolName) ?? null,
+    };
+  },
+};
+
+function getDisplayText(annotation) {
+  const { data } = annotation;
+
+  if (!data) {
+    return [''];
+  }
+  const { labels } = data;
+
+  const displayText = [];
+
+  for (const label of labels) {
+    // make this generic
+    if (label.label === '33636980076') {
+      displayText.push(`Finding Site: ${label.value}`);
+    }
+  }
+
+  return displayText;
+}
+
+export default SRSCOOR3DProbe;
@@ -0,0 +1,67 @@
+import { Types, annotation } from '@cornerstonejs/tools';
+import { metaData } from '@cornerstonejs/core';
+
+import getRenderableData from './getRenderableData';
+import toolNames from '../tools/toolNames';
+
+export default function addSRAnnotation(measurement, imageId, frameNumber) {
+  let toolName = toolNames.DICOMSRDisplay;
+  const renderableData = measurement.coords.reduce((acc, coordProps) => {
+    acc[coordProps.GraphicType] = acc[coordProps.GraphicType] || [];
+    acc[coordProps.GraphicType].push(getRenderableData({ ...coordProps, imageId }));
+    return acc;
+  }, {});
+
+  const { TrackingUniqueIdentifier } = measurement;
+  const { ValueType: valueType, GraphicType: graphicType } = measurement.coords[0];
+  const graphicTypePoints = renderableData[graphicType];
+
+  /** TODO: Read the tool name from the DICOM SR identification type in the future. */
+  let frameOfReferenceUID = null;
+
+  if (imageId) {
+    const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
+    frameOfReferenceUID = imagePlaneModule?.frameOfReferenceUID;
+  }
+
+  if (valueType === 'SCOORD3D') {
+    toolName = toolNames.SRSCOORD3DPoint;
+
+    // get the ReferencedFrameOfReferenceUID from the measurement
+    frameOfReferenceUID = measurement.coords[0].ReferencedFrameOfReferenceSequence;
+  }
+
+  const SRAnnotation: Types.Annotation = {
+    annotationUID: TrackingUniqueIdentifier,
+    highlighted: false,
+    isLocked: false,
+    invalidated: false,
+    metadata: {
+      toolName,
+      valueType,
+      graphicType,
+      FrameOfReferenceUID: frameOfReferenceUID,
+      referencedImageId: imageId,
+    },
+    data: {
+      label: measurement.labels?.[0]?.value || undefined,
+      displayText: measurement.displayText || undefined,
+      handles: {
+        textBox: measurement.textBox ?? {},
+        points: graphicTypePoints[0],
+      },
+      cachedStats: {},
+      frameNumber,
+      renderableData,
+      TrackingUniqueIdentifier,
+      labels: measurement.labels,
+    },
+  };
+
+  /**
+   * const annotationManager = annotation.annotationState.getAnnotationManager();
+   * was not triggering annotation_added events.
+   */
+  annotation.state.addAnnotation(SRAnnotation);
+  console.debug('Adding SR annotation:', SRAnnotation);
+}
@@ -1,8 +1,14 @@
 import { addTool } from '@cornerstonejs/tools';

-export default function addToolInstance(name: string, toolClass, configuration?): void {
+export default function addToolInstance(name: string, toolClass, configuration = {}): void {
  class InstanceClass extends toolClass {
    static toolName = name;
+    constructor(toolProps, defaultToolProps) {
+      toolProps.configuration = toolProps.configuration
+        ? { ...toolProps.configuration, ...configuration }
+        : configuration;
+      super(toolProps, defaultToolProps);
+    }
  }
  addTool(InstanceClass);
 }
@@ -61,6 +61,11 @@ const createReferencedImageDisplaySet = (displaySetService, displaySet) => {

  const imageSet = new ImageSet(instances);
  const instance = instances[0];
+
+  if (!instance) {
+    return;
+  }
+
  imageSet.setAttributes({
    displaySetInstanceUID: imageSet.uid, // create a local alias for the imageSet UID
    SeriesDate: instance.SeriesDate,
@@ -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 => {
@@ -1,3 +1,7 @@
+import { adaptersSR } from '@cornerstonejs/adapters';
+
+const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
+
 /**
 * Extracts the label from the toolData imported from dcmjs. We need to do this
 * as dcmjs does not depeend on OHIF/the measurementService, it just produces data for cornestoneTools.
@@ -9,13 +13,15 @@
 export default function getLabelFromDCMJSImportedToolData(toolData) {
  const { findingSites = [], finding } = toolData;

-  let freeTextLabel = findingSites.find(fs => fs.CodeValue === 'CORNERSTONEFREETEXT');
+  let freeTextLabel = findingSites.find(
+    fs => fs.CodeValue === Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT
+  );

  if (freeTextLabel) {
    return freeTextLabel.CodeMeaning;
  }

-  if (finding && finding.CodeValue === 'CORNERSTONEFREETEXT') {
+  if (finding && finding.CodeValue === Cornerstone3DCodeScheme.codeValues.CORNERSTONEFREETEXT) {
    return finding.CodeMeaning;
  }
 }
@@ -1,106 +1,49 @@
 import { vec3 } from 'gl-matrix';
-import { Types, annotation } from '@cornerstonejs/tools';
 import { metaData, utilities, Types as csTypes } from '@cornerstonejs/core';

-import toolNames from '../tools/toolNames';
-import SCOORD_TYPES from '../constants/scoordTypes';
+import { SCOORDTypes } from '../enums';

 const EPSILON = 1e-4;

-export default function addDICOMSRDisplayAnnotation(measurement, imageId, frameNumber) {
-  const toolName = toolNames.DICOMSRDisplay;
-
-  const measurementData = {
-    TrackingUniqueIdentifier: measurement.TrackingUniqueIdentifier,
-    renderableData: {},
-    labels: measurement.labels,
-    imageId,
-  };
-
-  measurement.coords.forEach(coord => {
-    const { GraphicType, GraphicData } = coord;
-
-    if (measurementData.renderableData[GraphicType] === undefined) {
-      measurementData.renderableData[GraphicType] = [];
+const getRenderableCoords = ({ GraphicData, ValueType, imageId }) => {
+  const renderableData = [];
+  if (ValueType === 'SCOORD3D') {
+    for (let i = 0; i < GraphicData.length; i += 3) {
+      renderableData.push([GraphicData[i], GraphicData[i + 1], GraphicData[i + 2]]);
    }
+  } else {
+    for (let i = 0; i < GraphicData.length; i += 2) {
+      const worldPos = utilities.imageToWorldCoords(imageId, [GraphicData[i], GraphicData[i + 1]]);
+      renderableData.push(worldPos);
+    }
+  }
+  return renderableData;
+};

-    measurementData.renderableData[GraphicType].push(
-      _getRenderableData(GraphicType, GraphicData, imageId)
-    );
-  });
-
-  const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
-
-  /**
-   * This annotation (DICOMSRDisplay) is only used by the SR viewport.
-   * This is used before the annotation is hydrated. If hydrated the measurement will be added
-   * to the measurement service and will be available for the other viewports.
-   */
-  const SRAnnotation: Types.Annotation = {
-    annotationUID: measurement.TrackingUniqueIdentifier,
-    highlighted: false,
-    isLocked: false,
-    invalidated: false,
-    metadata: {
-      toolName: toolName,
-      FrameOfReferenceUID: imagePlaneModule.frameOfReferenceUID,
-      referencedImageId: imageId,
-    },
-    data: {
-      label: measurement.labels,
-      handles: {
-        textBox: measurement.textBox ?? {},
-      },
-      cachedStats: {},
-      TrackingUniqueIdentifier: measurementData.TrackingUniqueIdentifier,
-      renderableData: measurementData.renderableData,
-      frameNumber,
-    },
-  };
-  const annotationManager = annotation.state.getAnnotationManager();
-  annotationManager.addAnnotation(SRAnnotation);
-}
-
-function _getRenderableData(GraphicType, GraphicData, imageId) {
-  let renderableData: csTypes.Point3[];
+function getRenderableData({ GraphicType, GraphicData, ValueType, imageId }) {
+  let renderableData = [];

  switch (GraphicType) {
-    case SCOORD_TYPES.POINT:
-    case SCOORD_TYPES.MULTIPOINT:
-    case SCOORD_TYPES.POLYLINE:
-      renderableData = [];
-
-      for (let i = 0; i < GraphicData.length; i += 2) {
-        const worldPos = utilities.imageToWorldCoords(imageId, [
-          GraphicData[i],
-          GraphicData[i + 1],
-        ]);
-
-        renderableData.push(worldPos);
-      }
-
+    case SCOORDTypes.POINT:
+    case SCOORDTypes.MULTIPOINT:
+    case SCOORDTypes.POLYLINE: {
+      renderableData = getRenderableCoords({ GraphicData, ValueType, imageId });
      break;
-    case SCOORD_TYPES.CIRCLE: {
-      const pointsWorld = [];
-      for (let i = 0; i < GraphicData.length; i += 2) {
-        const worldPos = utilities.imageToWorldCoords(imageId, [
-          GraphicData[i],
-          GraphicData[i + 1],
-        ]);
-
-        pointsWorld.push(worldPos);
-      }
-
+    }
+    case SCOORDTypes.CIRCLE: {
+      const pointsWorld: csTypes.Point3[] = getRenderableCoords({
+        GraphicData,
+        ValueType,
+        imageId,
+      });
      // We do not have an explicit draw circle svg helper in Cornerstone3D at
      // this time, but we can use the ellipse svg helper to draw a circle, so
      // here we reshape the data for that purpose.
      const center = pointsWorld[0];
      const onPerimeter = pointsWorld[1];
-
      const radius = vec3.distance(center, onPerimeter);

      const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
-
      if (!imagePlaneModule) {
        throw new Error('No imagePlaneModule found');
      }
@@ -115,14 +58,12 @@ function _getRenderableData(GraphicType, GraphicData, imageId) {

      // we need to get major/minor axis (which are both the same size major = minor)

-      // first axisStart
      const firstAxisStart = vec3.create();
      vec3.scaleAndAdd(firstAxisStart, center, columnCosines, radius);

      const firstAxisEnd = vec3.create();
      vec3.scaleAndAdd(firstAxisEnd, center, columnCosines, -radius);

-      // second axisStart
      const secondAxisStart = vec3.create();
      vec3.scaleAndAdd(secondAxisStart, center, rowCosines, radius);

@@ -138,21 +79,16 @@ function _getRenderableData(GraphicType, GraphicData, imageId) {

      break;
    }
-    case SCOORD_TYPES.ELLIPSE: {
+    case SCOORDTypes.ELLIPSE: {
      // GraphicData is ordered as [majorAxisStartX, majorAxisStartY, majorAxisEndX, majorAxisEndY, minorAxisStartX, minorAxisStartY, minorAxisEndX, minorAxisEndY]
      // But Cornerstone3D points are ordered as top, bottom, left, right for the
      // ellipse so we need to identify if the majorAxis is horizontal or vertical
      // and then choose the correct points to use for the ellipse.
-
-      const pointsWorld: csTypes.Point3[] = [];
-      for (let i = 0; i < GraphicData.length; i += 2) {
-        const worldPos = utilities.imageToWorldCoords(imageId, [
-          GraphicData[i],
-          GraphicData[i + 1],
-        ]);
-
-        pointsWorld.push(worldPos);
-      }
+      const pointsWorld: csTypes.Point3[] = getRenderableCoords({
+        GraphicData,
+        ValueType,
+        imageId,
+      });

      const majorAxisStart = vec3.fromValues(...pointsWorld[0]);
      const majorAxisEnd = vec3.fromValues(...pointsWorld[1]);
@@ -202,3 +138,5 @@ function _getRenderableData(GraphicType, GraphicData, imageId) {

  return renderableData;
 }
+
+export default getRenderableData;
@@ -3,14 +3,12 @@ import OHIF, { DicomMetadataStore } from '@ohif/core';
 import getLabelFromDCMJSImportedToolData from './getLabelFromDCMJSImportedToolData';
 import { adaptersSR } from '@cornerstonejs/adapters';
 import { annotation as CsAnnotation } from '@cornerstonejs/tools';
-const { locking } = CsAnnotation;
+import { Enums as CSExtensionEnums } from '@ohif/extension-cornerstone';

+const { locking } = CsAnnotation;
 const { guid } = OHIF.utils;
 const { MeasurementReport, CORNERSTONE_3D_TAG } = adaptersSR.Cornerstone3D;
-
-const CORNERSTONE_3D_TOOLS_SOURCE_NAME = 'Cornerstone3DTools';
-const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
-
+const { CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION } = CSExtensionEnums;
 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];

 const convertCode = (codingValues, code) => {
@@ -43,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.
@@ -87,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(
@@ -101,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({
@@ -202,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);

@@ -214,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)) {
@@ -232,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 = cornerstoneAdapters.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.66",
+  "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.66",
-    "@ohif/extension-cornerstone": "3.9.0-beta.66",
-    "@ohif/extension-default": "3.9.0-beta.66",
-    "@ohif/i18n": "3.9.0-beta.66",
-    "@ohif/ui": "3.9.0-beta.66",
+    "@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.82.0",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.82.0",
-    "@cornerstonejs/tools": "^1.82.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,9 +1,10 @@
 import React from 'react';
 import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/ui';
+import { Toolbox } from '@ohif/extension-default';
+import { PanelSegmentation } from '@ohif/extension-cornerstone';
 import DynamicExport from './panels/DynamicExport';

-function getPanelModule({ commandsManager, extensionManager, servicesManager }) {
+function getPanelModule({ commandsManager, extensionManager, servicesManager, configuration }) {
  const wrappedDynamicDataPanel = () => {
    return (
      <DynamicDataPanel
@@ -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,17 +1,19 @@
 import React from 'react';
 import PanelGenerateImage from './PanelGenerateImage';

-function DynamicDataPanel({ servicesManager, commandsManager }) {
+function DynamicDataPanel({ servicesManager, commandsManager, tab }: withAppTypes) {
  return (
-    <div
-      className="flex flex-col text-white"
-      data-cy={'dynamic-volume-panel'}
-    >
-      <PanelGenerateImage
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      ></PanelGenerateImage>
-    </div>
+    <>
+      <div
+        className="flex flex-col text-white"
+        data-cy={'dynamic-volume-panel'}
+      >
+        <PanelGenerateImage
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+        ></PanelGenerateImage>
+      </div>
+    </>
  );
 }

@@ -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,
-};
@@ -1 +1 @@
 .16.1
 .9.0