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

Co-authored-by: Dan Rukas <dan.rukas@gmail.com>
Co-authored-by: Tang Cheng <45505657+tctco@users.noreply.github.com>

.circleci/config.yml

@@ -2,11 +2,11 @@ version: 2.1
 
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@3.3.1
+  cypress: cypress-io/cypress@3.4.2
 
 defaults: &defaults
   docker:
-    - image: cimg/node:18.18
+    - image: cimg/node:20.18.1
       environment:
         TERM: xterm
         QUICK_BUILD: true
@@ -208,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.
@@ -222,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
@@ -238,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)
 
@@ -250,19 +288,50 @@ 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
+              docker push ohif/app:$IMAGE_VERSION_FULL-amd64
+              docker push ohif/app:latest-beta-amd64
+            fi
 
-              echo "starting docker push"
-              docker push ohif/app:$IMAGE_VERSION_FULL
+  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:
@@ -272,8 +341,10 @@ jobs:
     steps:
       - install_bun
       - run:
-          name: Install Xvfb
-          command: sudo apt-get update && sudo apt-get install -y xvfb
+          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 &
@@ -282,15 +353,91 @@ jobs:
           name: Export Display Variable
           command: export DISPLAY=:99
       - cypress/install:
-          install-browsers: true
           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
-            --browser chrome --parallel
+          cypress-command: |
+            npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
           start-command: bun run test:data && bun run test:e2e:serve
 
+  DOCKER_MULTIARCH_MANIFEST:
+    <<: *defaults
+    resource_class: large
+    steps:
+      - attach_workspace:
+          at: ~/repo
+      - setup_remote_docker:
+          docker_layer_caching: false
+      - run:
+          name: Create and push multi-architecture manifest (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:
     jobs:
@@ -316,6 +463,12 @@ workflows:
       - DOCKER_BETA_PUBLISH:
           requires:
             - NPM_PUBLISH
+      - DOCKER_BETA_PUBLISH_ARM:
+          requires:
+            - DOCKER_BETA_PUBLISH
+      - DOCKER_BETA_MULTIARCH_MANIFEST:
+          requires:
+            - DOCKER_BETA_PUBLISH_ARM
 
   # viewer.ohif.org
   DEPLOY_RELEASE:
@@ -334,3 +487,9 @@ workflows:
       - DOCKER_RELEASE_PUBLISH:
           requires:
             - NPM_PUBLISH
+      - DOCKER_RELEASE_PUBLISH_ARM:
+          requires:
+            - DOCKER_RELEASE_PUBLISH
+      - DOCKER_MULTIARCH_MANIFEST:
+          requires:
+            - DOCKER_RELEASE_PUBLISH_ARM

.docker/Viewer-v3.x/default.conf.template

@@ -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;

.docker/Viewer-v3.x/default.ssl.conf.template

@@ -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;

.docker/Viewer-v3.x/entrypoint.sh

@@ -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 "$@"

.docker/compressDist.sh

@@ -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 "{}" \;

.dockerignore

@@ -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/

.eslintrc.json

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

.github/.dependabot.yaml

@@ -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'

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -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

.github/workflows/playwright.yml

@@ -9,7 +9,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.48.1-focal
+      image: mcr.microsoft.com/playwright:v1.51.1-noble
     strategy:
       fail-fast: false
       matrix:
@@ -22,15 +22,14 @@ jobs:
       - uses: oven-sh/setup-bun@v2
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         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" && bun x 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() }}
@@ -53,7 +52,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: bun install --frozen-lockfile
       - name: Set up Git safe directory

.gitignore

@@ -1,5 +1,6 @@
 # Packages
 node_modules
+.cursor/
 
 # Output
 build

.node-version

@@ -1 +1 @@
-18.16.1
+20.9.0

.webpack/webpack.base.js

@@ -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';
@@ -108,7 +105,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 options: {
-                  plugins: ['react-refresh/babel'],
+                  plugins: isProdBuild ? [] : ['react-refresh/babel'],
                 },
               },
             ]),
@@ -172,6 +169,10 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
             },
           ],
         },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/i,
+          type: 'asset/resource',
+        },
       ], //.concat(vtkRules),
     },
     resolve: {

Dockerfile

@@ -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;"]

README.md

@@ -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,7 +170,8 @@ 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                   |  |

addOns/externals/devDependencies/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@externals/devDependencies",
   "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.10.0-beta.4",
+  "version": "3.10.4",
   "license": "MIT",
   "private": true,
   "engines": {
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@kitware/vtk.js": "32.1.0",
+    "@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",
@@ -35,14 +39,14 @@
     "css-loader": "^6.8.1",
     "dotenv": "^8.1.0",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "7.2.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-flowtype": "^7.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "5.5.1",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
@@ -64,18 +68,15 @@
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^7.4.3",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
+    "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "0.6.9",
     "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": "5.5.4",
     "unused-webpack-plugin": "2.4.0",

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

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

addOns/package.json

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

babel.config.js

@@ -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__'],
     },
   },

commit.txt

@@ -1 +1 @@
-d05db4cb61b9f0492fd2498990f2ef0309cfaaa3
+d383be7c720ec61f5bb1262ebe70893873718951

extensions/cornerstone-dicom-pmap/package.json

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

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

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

extensions/cornerstone-dicom-rt/babel.config.js

@@ -37,7 +37,6 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-rt/package.json

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

extensions/cornerstone-dicom-rt/src/loadRTStruct.js

@@ -126,6 +126,7 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
     SeriesInstanceUID: instance.SeriesInstanceUID,
     ROIContours: [],
     visible: true,
+    ReferencedSOPInstanceUIDsSet: new Set(),
   };
 
   for (let i = 0; i < ROIContourSequence.length; i++) {
@@ -142,7 +143,8 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
 
     const contourPoints = [];
     for (let c = 0; c < ContourSequenceArray.length; c++) {
-      const { ContourData, NumberOfContourPoints, ContourGeometricType } = ContourSequenceArray[c];
+      const { ContourData, NumberOfContourPoints, ContourGeometricType, ContourImageSequence } =
+        ContourSequenceArray[c];
 
       let isSupported = false;
 
@@ -172,6 +174,12 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
         type: ContourGeometricType,
         isSupported,
       });
+
+      if (ContourImageSequence?.ReferencedSOPInstanceUID) {
+        structureSet.ReferencedSOPInstanceUIDsSet.add(
+          ContourImageSequence?.ReferencedSOPInstanceUID
+        );
+      }
     }
 
     _setROIContourMetadata(

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

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

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

@@ -1,5 +1,3 @@
-import { ButtonEnums } from '@ohif/ui';
-
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -13,13 +11,13 @@ function promptHydrateRT({
   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 => {
@@ -37,19 +35,23 @@ function promptHydrateRT({
   });
 }
 
-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,
       },

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

@@ -1,12 +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 { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import { usePositionPresentationStore } from '@ohif/extension-cornerstone';
 
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
 
@@ -38,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
@@ -123,6 +129,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
           toolGroupId: toolGroupId,
           orientation: viewportOptions.orientation,
           viewportId: viewportOptions.viewportId,
+          presentationIds: viewportOptions.presentationIds,
         }}
         onElementEnabled={evt => {
           props.onElementEnabled?.(evt);
@@ -135,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, viewportId);
-      setSelectedSegment(newSelectedSegmentIndex);
+      utils.handleSegmentChange({
+        direction,
+        segDisplaySet: rtDisplaySet,
+        viewportId,
+        selectedSegmentObjectIndex,
+        segmentationService,
+      });
     },
-    [selectedSegment, segmentationService]
+    [selectedSegmentObjectIndex]
   );
 
   useEffect(() => {
@@ -185,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',
@@ -247,8 +256,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
 
     toolGroup = createRTToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);
 
-    setToolGroupCreated(true);
-
     return () => {
       // remove the segmentation representations if seg displayset changed
       segmentationService.removeSegmentationRepresentations(viewportId);

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

@@ -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 />}

extensions/cornerstone-dicom-seg/babel.config.js

@@ -37,7 +37,6 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
       ],
-      plugins: ['react-refresh/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
   },

extensions/cornerstone-dicom-seg/package.json

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

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

@@ -1,20 +1,12 @@
 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';
-
-const { segmentation: segmentationUtils } = utilities;
+import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';
 
 const { datasetToBlob } = dcmjs.data;
 
@@ -45,13 +37,8 @@ const commandsModule = ({
   servicesManager,
   extensionManager,
 }: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
-  const {
-    segmentationService,
-    uiDialogService,
-    displaySetService,
-    viewportGridService,
-    toolGroupService,
-  } = servicesManager.services as AppTypes.Services;
+  const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
+    servicesManager.services as AppTypes.Services;
 
   const actions = {
     /**
@@ -226,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) {
@@ -241,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.
@@ -276,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 {
@@ -303,48 +302,9 @@ 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 = {
-    /**
-     * Obsolete?
-     */
-    loadSegmentationDisplaySetsForViewport: {
-      commandFn: actions.loadSegmentationDisplaySetsForViewport,
-    },
-    /**
-     * Obsolete?
-     */
     loadSegmentationsForViewport: {
       commandFn: actions.loadSegmentationsForViewport,
     },
@@ -361,12 +321,6 @@ const commandsModule = ({
     downloadRTSS: {
       commandFn: actions.downloadRTSS,
     },
-    setBrushSize: {
-      commandFn: actions.setBrushSize,
-    },
-    setThresholdRange: {
-      commandFn: actions.setThresholdRange,
-    },
   };
 
   return {

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

@@ -177,12 +177,16 @@ async function _loadSegments({
     throw new Error('referencedDisplaySet is missing for SEG');
   }
 
-  const { instances: images } = referencedDisplaySet;
-  const imageIds = images.map(({ imageId }) => imageId);
+  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, {
@@ -190,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;
@@ -211,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({

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

@@ -1,6 +1,15 @@
 export function getToolbarModule({ servicesManager }: withAppTypes) {
   const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
   return [
+    {
+      name: 'evaluate.cornerstone.hasSegmentation',
+      evaluate: ({ viewportId }) => {
+        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
+        return {
+          disabled: !segmentations?.length,
+        };
+      },
+    },
     {
       name: 'evaluate.cornerstone.segmentation',
       evaluate: ({ viewportId, button, toolNames, disabledText }) => {
@@ -12,27 +21,39 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
         if (!segmentations?.length) {
           return {
             disabled: true,
-            className: '!text-common-bright !bg-black opacity-50',
             disabledText: disabledText ?? 'No segmentations available',
           };
         }
 
+        const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+        if (!Object.keys(activeSegmentation.segments).length) {
+          return {
+            disabled: true,
+            disabledText: 'Add segment to enable this tool',
+          };
+        }
+
         const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
 
         if (!toolGroup) {
           return {
             disabled: true,
-            className: '!text-common-bright ohif-disabled',
             disabledText: disabledText ?? 'Not available on the current viewport',
           };
         }
 
+        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,
         };
       },

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

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

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

@@ -1,5 +1,3 @@
-import { ButtonEnums } from '@ohif/ui';
-
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -13,14 +11,14 @@ function promptHydrateSEG({
   preHydrateCallbacks,
   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 => {
@@ -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,
       },

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

@@ -1,10 +1,13 @@
 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
@@ -40,7 +47,8 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
   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
@@ -124,27 +132,15 @@ 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, viewportId);
-      setSelectedSegment(newSelectedSegmentIndex);
+      utils.handleSegmentChange({
+        direction,
+        segDisplaySet: segDisplaySet,
+        viewportId,
+        selectedSegmentObjectIndex,
+        segmentationService,
+      });
     },
-    [selectedSegment]
+    [selectedSegmentObjectIndex]
   );
 
   const hydrateSEG = useCallback(() => {
@@ -164,7 +160,7 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
       displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
     });
 
-    viewportGridService.setDisplaySetsForViewport({
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
       viewportId,
       displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
     });
@@ -198,6 +194,17 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
         if (evt.segDisplaySet.displaySetInstanceUID === segDisplaySet.displaySetInstanceUID) {
           setSegIsLoading(false);
         }
+
+        if (segDisplaySet?.firstSegmentedSliceImageId && viewportOptions?.presentationIds) {
+          const { firstSegmentedSliceImageId } = segDisplaySet;
+          const { presentationIds } = viewportOptions;
+
+          setPositionPresentation(presentationIds.positionPresentationId, {
+            viewReference: {
+              referencedImageId: firstSegmentedSliceImageId,
+            },
+          });
+        }
       }
     );
 

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

@@ -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 />}

extensions/cornerstone-dicom-sr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.10.0-beta.4",
+  "version": "3.10.4",
   "description": "OHIF extension for an SR Cornerstone Viewport",
   "author": "OHIF",
   "license": "MIT",
@@ -34,10 +34,10 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.4",
-    "@ohif/extension-cornerstone": "3.10.0-beta.4",
-    "@ohif/extension-measurement-tracking": "3.10.0-beta.4",
-    "@ohif/ui": "3.10.0-beta.4",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-measurement-tracking": "3.10.4",
+    "@ohif/ui": "3.10.4",
     "dcmjs": "*",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^2.2.3",
-    "@cornerstonejs/core": "^2.2.3",
-    "@cornerstonejs/tools": "^2.2.3",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
     "classnames": "^2.3.2"
   }
 }

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

@@ -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 {

extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx

@@ -1,38 +1,25 @@
 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';
 
 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';
 
 function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
-  const {
-    commandsManager,
-    children,
-    dataSource,
-    displaySets,
-    viewportOptions,
-    servicesManager,
-    extensionManager,
-  } = props;
+  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;
 
@@ -43,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);
@@ -55,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
@@ -68,29 +56,6 @@ 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],
-          },
-        ]);
-      }
-    };
   }
 
   /**
@@ -154,33 +119,17 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
         }
 
         setMeasurementSelected(newMeasurementSelected);
+
         setActiveImageDisplaySetData(referencedDisplaySet);
         setReferencedDisplaySetMetadata(referencedDisplaySetMetadata);
 
-        if (
-          referencedDisplaySet.displaySetInstanceUID ===
-          activeImageDisplaySetData?.displaySetInstanceUID
-        ) {
-          const { measurements } = srDisplaySet;
-
-          // it means that we have a new referenced display set, and the
-          // imageIdIndex will handle it by updating the viewport, but if they
-          // are the same we just need to use measurementService to jump to the
-          // new measurement
-          const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-          if (!csViewport) {
-            return;
-          }
-
-          const imageIds = csViewport.getImageIds();
-
-          const imageIdIndex = imageIds.indexOf(measurements[newMeasurementSelected].imageId);
-
-          if (imageIdIndex !== -1) {
-            csViewport.setImageIdIndex(imageIdIndex);
-          }
-        }
+        const { presentationIds } = viewportOptions;
+        const measurement = srDisplaySet.measurements[newMeasurementSelected];
+        setPositionPresentation(presentationIds.positionPresentationId, {
+          viewReference: {
+            referencedImageId: measurement.imageId,
+          },
+        });
       });
     },
     [dataSource, srDisplaySet, activeImageDisplaySetData, viewportId]
@@ -202,10 +151,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
       return null;
     }
 
-    const initialImageIndex = activeImageDisplaySetData.images.findIndex(
-      image => image.imageId === measurement.imageId
-    );
-
     return (
       <Component
         {...props}
@@ -230,7 +175,6 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
           props.onElementEnabled?.(evt);
           onElementEnabled(evt);
         }}
-        initialImageIndex={initialImageIndex}
         isJumpToMeasurementDisabled={true}
       ></Component>
     );
@@ -325,8 +269,8 @@ function OHIFCornerstoneSRMeasurementViewport(props: withAppTypes) {
           viewportId,
           isRehydratable: srDisplaySet.isRehydratable,
           isLocked,
-          sendTrackedMeasurementsEvent,
           t,
+          servicesManager,
         }),
         indexPriority: -100,
         location: viewportActionCornersService.LOCATIONS.topLeft,
@@ -345,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;
@@ -441,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
@@ -462,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>
@@ -473,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>
@@ -487,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"
         />
       );
@@ -496,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 />}

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

@@ -90,6 +90,7 @@ function _getDisplaySetsFromSeries(
     SeriesDescription,
     SeriesNumber,
     SeriesDate,
+    SeriesTime,
     ConceptNameCodeSequence,
     SOPClassUID,
   } = instance;
@@ -106,6 +107,7 @@ function _getDisplaySetsFromSeries(
     SeriesDescription,
     SeriesNumber,
     SeriesDate,
+    SeriesTime,
     SOPInstanceUID,
     SeriesInstanceUID,
     StudyInstanceUID,
@@ -263,9 +265,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(
   for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
     let measurement = unloadedMeasurements[j];
 
-    const onBeforeSRAddMeasurement = customizationService.getModeCustomization(
+    const onBeforeSRAddMeasurement = customizationService.getCustomization(
       'onBeforeSRAddMeasurement'
-    )?.value;
+    );
 
     if (typeof onBeforeSRAddMeasurement === 'function') {
       measurement = onBeforeSRAddMeasurement({

extensions/cornerstone-dicom-sr/src/index.tsx

@@ -30,6 +30,7 @@ const dicomSRExtension = {
    * Only required property. Should be a unique value across all extensions.
    */
   id,
+
   onModeEnter,
 
   preRegistration,

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

@@ -77,28 +77,4 @@ export default function init({
     SRRectangleROI: dashedLine,
     global: {},
   });
-
-  measurementService.subscribe(
-    MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_LAYOUT,
-    ({ viewportId, measurement, isConsumed }) => {
-      if (isConsumed) {
-        return;
-      }
-      try {
-        const currentViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-        const { viewPlaneNormal } = currentViewport.getCamera();
-        const referencedImageId = csToolsUtils.getClosestImageIdForStackViewport(
-          currentViewport as StackViewport,
-          measurement.points[0],
-          viewPlaneNormal
-        );
-        const imageIndex = (currentViewport as StackViewport)
-          .getImageIds()
-          .indexOf(referencedImageId);
-        csUtils.jumpToSlice(currentViewport.element, { imageIndex });
-      } catch (error) {
-        console.warn('Unable to jump to image based on measurement coordinate', error);
-      }
-    }
-  );
 }

extensions/cornerstone-dicom-sr/src/onModeEnter.js

@@ -1,15 +0,0 @@
-import { SOPClassHandlerId, SOPClassHandlerId3D } from './id';
-
-export default function onModeEnter({ servicesManager }) {
-  const { displaySetService } = servicesManager.services;
-  const displaySetCache = displaySetService.getDisplaySetCache();
-
-  const srDisplaySets = [...displaySetCache.values()].filter(
-    ds => ds.SOPClassHandlerId === SOPClassHandlerId || ds.SOPClassHandlerId === SOPClassHandlerId3D
-  );
-
-  srDisplaySets.forEach(ds => {
-    // New mode route, allow SRs to be hydrated again
-    ds.isHydrated = false;
-  });
-}

extensions/cornerstone-dicom-sr/src/onModeEnter.tsx

@@ -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']);
+}

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

@@ -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 => {

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

@@ -41,22 +41,14 @@ const convertSites = (codingValues, sites) => {
  *
  */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager, appConfig }: withAppTypes,
+  { servicesManager, extensionManager, commandsManager }: withAppTypes,
   displaySetInstanceUID
 ) {
-  const annotationManager = CsAnnotation.state.getAnnotationManager();
   const dataSource = extensionManager.getActiveDataSource()[0];
   const { measurementService, displaySetService, customizationService } = servicesManager.services;
 
-  const codingValues = customizationService.getCustomization('codingValues', {});
-
-  const { disableEditing } = customizationService.getCustomization(
-    'PanelMeasurement.disableEditing',
-    {
-      id: 'default.disableEditing',
-      disableEditing: false,
-    }
-  );
+  const codingValues = customizationService.getCustomization('codingValues');
+  const disableEditing = customizationService.getCustomization('panelMeasurement.disableEditing');
 
   const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
@@ -93,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(
@@ -107,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({
@@ -208,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);
 
@@ -220,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)) {
@@ -238,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;
-  };
-};

extensions/cornerstone-dicom-sr/src/utils/isRehydratable.js

@@ -1,60 +0,0 @@
-import { adaptersSR } from '@cornerstonejs/adapters';
-
-const cornerstoneAdapters =
-  adaptersSR.Cornerstone3D.MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
-
-const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
-const CORNERSTONE_3D_TAG = adaptersSR.Cornerstone3D.CORNERSTONE_3D_TAG;
-
-/**
- * Checks if the given `displaySet`can be rehydrated into the `measurementService`.
- *
- * @param {object} displaySet The SR `displaySet` to check.
- * @param {object[]} mappings The CornerstoneTools 4 mappings to the `measurementService`.
- * @returns {boolean} True if the SR can be rehydrated into the `measurementService`.
- */
-export default function isRehydratable(displaySet, mappings) {
-  if (!mappings || !mappings.length) {
-    return false;
-  }
-
-  const mappingDefinitions = mappings.map(m => m.annotationType);
-  const { measurements } = displaySet;
-
-  const adapterKeys = Object.keys(cornerstoneAdapters).filter(
-    adapterKey =>
-      typeof cornerstoneAdapters[adapterKey].isValidCornerstoneTrackingIdentifier === 'function'
-  );
-
-  const adapters = [];
-
-  adapterKeys.forEach(key => {
-    if (mappingDefinitions.includes(key)) {
-      // Must have both a dcmjs adapter and a measurementService
-      // Definition in order to be a candidate for import.
-      adapters.push(cornerstoneAdapters[key]);
-    }
-  });
-
-  for (let i = 0; i < measurements.length; i++) {
-    const { TrackingIdentifier } = measurements[i] || {};
-    const hydratable = adapters.some(adapter => {
-      let [cornerstoneTag, toolName] = TrackingIdentifier.split(':');
-      if (supportedLegacyCornerstoneTags.includes(cornerstoneTag)) {
-        cornerstoneTag = CORNERSTONE_3D_TAG;
-      }
-
-      const mappedTrackingIdentifier = `${cornerstoneTag}:${toolName}`;
-
-      return adapter.isValidCornerstoneTrackingIdentifier(mappedTrackingIdentifier);
-    });
-
-    if (hydratable) {
-      return true;
-    }
-    console.log('Measurement is not rehydratable', TrackingIdentifier, measurements[i]);
-  }
-
-  console.log('No measurements found which were rehydratable');
-  return false;
-}

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

@@ -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;
+}

extensions/cornerstone-dynamic-volume/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.10.0-beta.4",
+  "version": "3.10.4",
   "description": "OHIF extension for 4D volumes data",
   "author": "OHIF",
   "license": "MIT",
@@ -29,11 +29,11 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.10.0-beta.4",
-    "@ohif/extension-cornerstone": "3.10.0-beta.4",
-    "@ohif/extension-default": "3.10.0-beta.4",
-    "@ohif/i18n": "3.10.0-beta.4",
-    "@ohif/ui": "3.10.0-beta.4",
+    "@ohif/core": "3.10.4",
+    "@ohif/extension-cornerstone": "3.10.4",
+    "@ohif/extension-default": "3.10.4",
+    "@ohif/i18n": "3.10.4",
+    "@ohif/ui": "3.10.4",
     "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^2.2.3",
-    "@cornerstonejs/tools": "^2.2.3",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone-dynamic-volume/src/actions/updateSegmentationsChartDisplaySet.ts

@@ -262,7 +262,6 @@ function _getInstanceFromSegmentations(segmentations, { servicesManager }) {
 }
 
 function updateSegmentationsChartDisplaySet({ servicesManager }: withAppTypes): void {
-  debugger;
   const { segmentationService } = servicesManager.services;
   const segmentations = segmentationService.getSegmentations();
   const { seriesMetadata, instance } =

extensions/cornerstone-dynamic-volume/src/commandsModule.ts

@@ -263,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
@@ -313,7 +313,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
         }
       }
 
-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate });
     },
     createNewLabelMapForDynamicVolume: async ({ label }) => {
       const { viewports, activeViewportId } = viewportGridService.getState();

extensions/cornerstone-dynamic-volume/src/getPanelModule.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/ui-next';
+import { Toolbox } from '@ohif/extension-default';
 import { PanelSegmentation } from '@ohif/extension-cornerstone';
 import DynamicExport from './panels/DynamicExport';
 
@@ -19,9 +19,6 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager, co
     return (
       <>
         <Toolbox
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
           buttonSectionId="dynamic-toolbox"
           title="Threshold Tools"
         />

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

@@ -1,38 +1,45 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
   Button,
   PanelSection,
-  ButtonGroup,
-  IconButton,
-  InputNumber,
-  Icon,
+  Icons,
   Tooltip,
-} from '@ohif/ui';
-
-import { DoubleSlider } from '@ohif/ui-next';
-
+  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>
 );
 
@@ -45,132 +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([0, framesLength - 1]);
-
-  const handleSliderChange = newValues => {
-    onDoubleRangeChange(newValues);
-    setSliderRangeValues(newValues);
+  // 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);
+    }
   };
 
-  const formatLabel = value => Math.round(value);
-
   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="mt-2 w-full">
-            <DoubleSlider
-              min={0}
-              max={framesLength - 1}
-              step={1}
-              defaultValue={sliderRangeValues}
-              onValueChange={handleSliderChange}
-              formatLabel={formatLabel}
-              className="w-full"
+              <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>
   );
@@ -178,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 - 1}
-          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>
   );

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

@@ -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;

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

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

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

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

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "3.10.0-beta.4",
+  "version": "3.10.4",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -38,10 +38,9 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^2.2.3",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@ohif/core": "3.10.0-beta.4",
-    "@ohif/ui": "3.10.0-beta.4",
+    "@cornerstonejs/dicom-image-loader": "^3.11.6",
+    "@ohif/core": "3.10.4",
+    "@ohif/ui": "3.10.4",
     "dcmjs": "*",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
@@ -50,19 +49,22 @@
     "react-dom": "^18.3.1",
     "react-resize-detector": "^10.0.1"
   },
-  "devDependencies": {
-    "lodash": "^4.17.21"
-  },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^2.2.3",
-    "@cornerstonejs/core": "^2.2.3",
-    "@cornerstonejs/tools": "^2.2.3",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@kitware/vtk.js": "32.1.0",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/ai": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/labelmap-interpolation": "^3.11.6",
+    "@cornerstonejs/polymorphic-segmentation": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
+    "@itk-wasm/morphological-contour-interpolation": "1.1.0",
+    "@kitware/vtk.js": "32.12.0",
     "html2canvas": "^1.4.1",
+    "lodash.compact": "^3.0.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.flatten": "^4.4.0",
     "lodash.merge": "^4.6.2",
+    "lodash.zip": "^4.2.0",
     "shader-loader": "^1.3.1",
     "worker-loader": "^3.0.8"
   }

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -3,7 +3,8 @@ import { useResizeDetector } from 'react-resize-detector';
 import * as cs3DTools from '@cornerstonejs/tools';
 import { Enums, eventTarget, getEnabledElement } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
-import { AllInOneMenu, Notification, useViewportDialog } from '@ohif/ui';
+import { AllInOneMenu } from '@ohif/ui-next';
+import { useViewportDialog } from '@ohif/ui-next';
 import type { Types as csTypes } from '@cornerstonejs/core';
 
 import { setEnabledElement } from '../state';
@@ -15,20 +16,14 @@ import type { Types } from '@ohif/core';
 
 import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
 import { getWindowLevelActionMenu } from '../components/WindowLevelActionMenu/getWindowLevelActionMenu';
-import { useAppConfig } from '@state';
 import { getViewportDataOverlaySettingsMenu } from '../components/ViewportDataOverlaySettingMenu';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
+import { WITH_NAVIGATION } from '../services/ViewportService/CornerstoneViewportService';
 
 const STACK = 'stack';
 
-/**
- * Caches the jump to measurement operation, so that if display set is shown,
- * it can jump to the measurement.
- */
-let cacheJumpToMeasurementEvent;
-
 // Todo: This should be done with expose of internal API similar to react-vtkjs-viewport
 // Then we don't need to worry about the re-renders if the props change.
 const OHIFCornerstoneViewport = React.memo(
@@ -88,7 +83,6 @@ const OHIFCornerstoneViewport = React.memo(
     const [scrollbarHeight, setScrollbarHeight] = useState('100px');
     const [enabledVPElement, setEnabledVPElement] = useState(null);
     const elementRef = useRef() as React.MutableRefObject<HTMLDivElement>;
-    const [appConfig] = useAppConfig();
 
     const {
       displaySetService,
@@ -99,12 +93,14 @@ const OHIFCornerstoneViewport = React.memo(
       segmentationService,
       cornerstoneCacheService,
       viewportActionCornersService,
+      customizationService,
+      measurementService,
     } = servicesManager.services;
 
     const [viewportDialogState] = useViewportDialog();
     // useCallback for scroll bar height calculation
     const setImageScrollBarHeight = useCallback(() => {
-      const scrollbarHeight = `${elementRef.current.clientHeight - 40}px`;
+      const scrollbarHeight = `${elementRef.current.clientHeight - 10}px`;
       setScrollbarHeight(scrollbarHeight);
     }, [elementRef]);
 
@@ -146,6 +142,11 @@ const OHIFCornerstoneViewport = React.memo(
 
         const { viewportId, element } = evt.detail;
         const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+
+        if (!viewportInfo) {
+          return;
+        }
+
         setEnabledElement(viewportId, element);
         setEnabledVPElement(element);
 
@@ -258,14 +259,6 @@ const OHIFCornerstoneViewport = React.memo(
 
         const presentations = getViewportPresentations(viewportId, viewportOptions);
 
-        let measurement;
-        if (cacheJumpToMeasurementEvent?.viewportId === viewportId) {
-          measurement = cacheJumpToMeasurementEvent.measurement;
-          // Delete the position presentation so that viewport navigates direct
-          presentations.positionPresentation = null;
-          cacheJumpToMeasurementEvent = null;
-        }
-
         // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
         // Used for segmentation hydration right now, since the logic to decide whether
         // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
@@ -283,10 +276,6 @@ const OHIFCornerstoneViewport = React.memo(
           displaySetOptions,
           presentations
         );
-
-        if (measurement) {
-          cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
-        }
       };
 
       loadViewportData();
@@ -307,72 +296,66 @@ const OHIFCornerstoneViewport = React.memo(
         return;
       }
 
-      const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
-        elementRef,
-        viewportId,
-        servicesManager
+      const { unsubscribe } = measurementService.subscribe(
+        MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT,
+        event => handleJumpToMeasurement(event, elementRef, viewportId, cornerstoneViewportService)
       );
 
-      _checkForCachedJumpToMeasurementEvents(elementRef, viewportId, displaySets, servicesManager);
-
       return () => {
-        unsubscribeFromJumpToMeasurementEvents();
+        unsubscribe();
       };
     }, [displaySets, elementRef, viewportId, isJumpToMeasurementDisabled, servicesManager]);
 
     // Set up the window level action menu in the viewport action corners.
     useEffect(() => {
-      // Doing an === check here because the default config value when not set is true
-      if (appConfig.addWindowLevelActionMenu === false) {
-        return;
+      const windowLevelActionMenu = customizationService.getCustomization(
+        'viewportActionMenu.windowLevelActionMenu'
+      );
+      const segmentationOverlay = customizationService.getCustomization(
+        'viewportActionMenu.segmentationOverlay'
+      );
+
+      if (windowLevelActionMenu?.enabled) {
+        viewportActionCornersService.addComponent({
+          viewportId,
+          id: 'windowLevelActionMenu',
+          component: getWindowLevelActionMenu({
+            viewportId,
+            element: elementRef.current,
+            displaySets,
+            servicesManager,
+            commandsManager,
+            location: windowLevelActionMenu.location,
+            verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
+            horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
+          }),
+          location: windowLevelActionMenu.location,
+        });
       }
 
-      const location = viewportActionCornersService.LOCATIONS.topRight;
-
-      // TODO: In the future we should consider using the customization service
-      // to determine if and in which corner various action components should go.
-      viewportActionCornersService.addComponent({
-        viewportId,
-        id: 'windowLevelActionMenu',
-        component: getWindowLevelActionMenu({
+      if (segmentationOverlay?.enabled) {
+        viewportActionCornersService.addComponent({
           viewportId,
-          element: elementRef.current,
-          displaySets,
-          servicesManager,
-          commandsManager,
-          location,
-          verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
-          horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
-        }),
-        location,
-      });
-
-      viewportActionCornersService.addComponent({
-        viewportId,
-        id: 'segmentation',
-        component: getViewportDataOverlaySettingsMenu({
-          viewportId,
-          element: elementRef.current,
-          displaySets,
-          servicesManager,
-          commandsManager,
-          location,
-        }),
-        location,
-      });
-    }, [
-      displaySets,
-      viewportId,
-      viewportActionCornersService,
-      servicesManager,
-      commandsManager,
-      appConfig,
-    ]);
+          id: 'segmentation',
+          component: getViewportDataOverlaySettingsMenu({
+            viewportId,
+            element: elementRef.current,
+            displaySets,
+            servicesManager,
+            commandsManager,
+            location: segmentationOverlay.location,
+          }),
+          location: segmentationOverlay.location,
+        });
+      }
+    }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
 
     const { ref: resizeRef } = useResizeDetector({
       onResize,
     });
 
+    const Notification = customizationService.getCustomization('ui.notificationComponent');
+
     return (
       <React.Fragment>
         <div className="viewport-wrapper">
@@ -425,95 +408,52 @@ const OHIFCornerstoneViewport = React.memo(
   areEqual
 );
 
-function _subscribeToJumpToMeasurementEvents(elementRef, viewportId, servicesManager) {
-  const { measurementService, cornerstoneViewportService } = servicesManager.services;
+// Helper function to handle jumping to measurements
+function handleJumpToMeasurement(event, elementRef, viewportId, cornerstoneViewportService) {
+  const { measurement, isConsumed } = event;
+  if (!measurement || isConsumed) {
+    return;
+  }
 
-  const { unsubscribe } = measurementService.subscribe(
-    MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT,
-    props => {
-      cacheJumpToMeasurementEvent = props;
-      const { viewportId: jumpId, measurement, isConsumed } = props;
-      if (!measurement || isConsumed) {
-        return;
-      }
-      if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
-        // Decide on which viewport should handle this
-        cacheJumpToMeasurementEvent.cornerstoneViewport =
-          cornerstoneViewportService.getViewportIdToJump(jumpId, {
-            displaySetInstanceUID: measurement.displaySetInstanceUID,
-            ...measurement.metadata,
-            referencedImageId:
-              measurement.referencedImageId || measurement.metadata?.referencedImageId,
-          });
-      }
-      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportId) {
-        return;
-      }
-      _jumpToMeasurement(measurement, elementRef, viewportId, servicesManager);
-    }
+  const enabledElement = getEnabledElement(elementRef.current);
+
+  if (!enabledElement) {
+    return;
+  }
+
+  const viewport = enabledElement.viewport as csTypes.IStackViewport | csTypes.IVolumeViewport;
+
+  const { metadata, displaySetInstanceUID } = measurement;
+
+  const viewportDisplaySets = cornerstoneViewportService.getViewportDisplaySets(viewportId);
+
+  const showingDisplaySet = viewportDisplaySets.find(
+    ds => ds.displaySetInstanceUID === displaySetInstanceUID
   );
 
-  return unsubscribe;
-}
+  let metadataToUse = metadata;
+  // if it is not showing the displaySet we need to remove the FOR from the metadata
+  if (!showingDisplaySet) {
+    metadataToUse = {
+      ...metadata,
+      FrameOfReferenceUID: undefined,
+    };
+  }
 
-// Check if there is a queued jumpToMeasurement event
-function _checkForCachedJumpToMeasurementEvents(
-  elementRef,
-  viewportId,
-  displaySets,
-  servicesManager
-) {
-  if (!cacheJumpToMeasurementEvent) {
-    return;
-  }
-  if (cacheJumpToMeasurementEvent.isConsumed) {
-    cacheJumpToMeasurementEvent = null;
-    return;
-  }
-  const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
-  if (!displaysUIDs?.length) {
+  // Todo: make it work with cases where we want to define FOR based measurements too
+  if (!viewport.isReferenceViewable(metadataToUse, WITH_NAVIGATION)) {
     return;
   }
 
-  // Jump to measurement if the measurement exists
-  const { measurement } = cacheJumpToMeasurementEvent;
-  if (measurement && elementRef) {
-    if (displaysUIDs.includes(measurement?.displaySetInstanceUID)) {
-      _jumpToMeasurement(measurement, elementRef, viewportId, servicesManager);
-    }
-  }
-}
-
-function _jumpToMeasurement(measurement, targetElementRef, viewportId, servicesManager) {
-  const { viewportGridService } = servicesManager.services;
-
-  const targetElement = targetElementRef.current;
-
-  // Todo: setCornerstoneMeasurementActive should be handled by the toolGroupManager
-  //  to set it properly
-  // setCornerstoneMeasurementActive(measurement);
-
-  viewportGridService.setActiveViewportId(viewportId);
-
-  const enabledElement = getEnabledElement(targetElement);
-
-  if (enabledElement) {
-    // See how the jumpToSlice() of Cornerstone3D deals with imageIdx param.
-    const viewport = enabledElement.viewport as csTypes.IStackViewport | csTypes.IVolumeViewport;
-
-    const { metadata } = measurement;
-    if (!viewport.isReferenceViewable(metadata, { withNavigation: true, withOrientation: true })) {
-      console.log("Reference isn't viewable, postponing until updated");
-      return;
-    }
-
+  try {
     viewport.setViewReference(metadata);
-
-    cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
-    // Jump to measurement consumed, remove.
-    cacheJumpToMeasurementEvent?.consume?.();
-    cacheJumpToMeasurementEvent = null;
+    viewport.render();
+  } catch (e) {
+    console.warn('Unable to apply', metadata, e);
   }
+
+  cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
+  event?.consume?.();
 }
 
 function _rehydrateSynchronizers(viewportId: string, syncGroupService: any) {

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

@@ -3,14 +3,16 @@ import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import type { ImageSliceData } from '@cornerstonejs/core/types';
-import { ViewportOverlay } from '@ohif/ui';
+import { ViewportOverlay } from '@ohif/ui-next';
 import type { InstanceMetadata } from '@ohif/core/src/types';
-import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
+import { formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
+import { utils } from '@ohif/core';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 
 import './CustomizableViewportOverlay.css';
 
 const EPSILON = 1e-4;
+const { formatPN } = utils;
 
 type ViewportData = StackViewportData | VolumeViewportData;
 
@@ -45,80 +47,6 @@ const OverlayItemComponents = {
   'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem,
 };
 
-const studyDateItem = {
-  id: 'StudyDate',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Study date',
-  condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
-  contentF: ({ referenceInstance, formatters: { formatDate } }) =>
-    formatDate(referenceInstance.StudyDate),
-};
-
-const seriesDescriptionItem = {
-  id: 'SeriesDescription',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Series description',
-  condition: ({ referenceInstance }) => {
-    return referenceInstance && referenceInstance.SeriesDescription;
-  },
-  contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription,
-};
-
-const topLeftItems = {
-  id: 'cornerstoneOverlayTopLeft',
-  items: [studyDateItem, seriesDescriptionItem],
-};
-
-const topRightItems = { id: 'cornerstoneOverlayTopRight', items: [] };
-
-const bottomLeftItems = {
-  id: 'cornerstoneOverlayBottomLeft',
-  items: [
-    {
-      id: 'WindowLevel',
-      customizationType: 'ohif.overlayItem.windowLevel',
-    },
-    {
-      id: 'ZoomLevel',
-      customizationType: 'ohif.overlayItem.zoomLevel',
-      condition: props => {
-        const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
-        return activeToolName === 'Zoom';
-      },
-    },
-  ],
-};
-
-const bottomRightItems = {
-  id: 'cornerstoneOverlayBottomRight',
-  items: [
-    {
-      id: 'InstanceNumber',
-      customizationType: 'ohif.overlayItem.instanceNumber',
-    },
-  ],
-};
-
-/**
- * The @ohif/cornerstoneOverlay is a default value for a customization
- * for the cornerstone overlays.  The intent is to allow it to be extended
- * without needing to re-write the individual overlays by using the append
- * mechanism.  Individual attributes can be modified individually without
- * affecting the other items by using the append as well, with position
- * based replacement.
- * This is used as a default in the getCustomizationModule so that it
- * is available early for additional customization extensions.
- */
-const CornerstoneOverlay = {
-  id: '@ohif/cornerstoneOverlay',
-  topLeftItems,
-  topRightItems,
-  bottomLeftItems,
-  bottomRightItems,
-};
-
 /**
  * Customizable Viewport Overlay
  */
@@ -141,26 +69,18 @@ function CustomizableViewportOverlay({
   const [scale, setScale] = useState(1);
   const { imageIndex } = imageSliceData;
 
-  // The new customization is 'cornerstoneOverlay', with an append or replace
-  // on the individual items rather than defining individual items.
-  const cornerstoneOverlay = customizationService.getCustomization('@ohif/cornerstoneOverlay');
-
   // Historical usage defined the overlays as separate items due to lack of
   // append functionality.  This code enables the historical usage, but
   // the recommended functionality is to append to the default values in
   // cornerstoneOverlay rather than defining individual items.
-  const topLeftCustomization =
-    customizationService.getCustomization('cornerstoneOverlayTopLeft') ||
-    cornerstoneOverlay?.topLeftItems;
-  const topRightCustomization =
-    customizationService.getCustomization('cornerstoneOverlayTopRight') ||
-    cornerstoneOverlay?.topRightItems;
-  const bottomLeftCustomization =
-    customizationService.getCustomization('cornerstoneOverlayBottomLeft') ||
-    cornerstoneOverlay?.bottomLeftItems;
-  const bottomRightCustomization =
-    customizationService.getCustomization('cornerstoneOverlayBottomRight') ||
-    cornerstoneOverlay?.bottomRightItems;
+  const topLeftCustomization = customizationService.getCustomization('viewportOverlay.topLeft');
+  const topRightCustomization = customizationService.getCustomization('viewportOverlay.topRight');
+  const bottomLeftCustomization = customizationService.getCustomization(
+    'viewportOverlay.bottomLeft'
+  );
+  const bottomRightCustomization = customizationService.getCustomization(
+    'viewportOverlay.bottomRight'
+  );
 
   const instanceNumber = useMemo(
     () =>
@@ -262,8 +182,8 @@ function CustomizableViewportOverlay({
         return null;
       }
 
-      const { customizationType } = item;
-      const OverlayItemComponent = OverlayItemComponents[customizationType];
+      const { inheritsFrom } = item;
+      const OverlayItemComponent = OverlayItemComponents[inheritsFrom];
 
       if (OverlayItemComponent) {
         return <OverlayItemComponent {...overlayItemProps} />;
@@ -291,10 +211,6 @@ function CustomizableViewportOverlay({
 
   const getContent = useCallback(
     (customization, keyPrefix) => {
-      if (!customization?.items) {
-        return null;
-      }
-      const { items } = customization;
       const props = {
         ...displaySetProps,
         formatters: { formatDate: formatDICOMDate },
@@ -307,7 +223,7 @@ function CustomizableViewportOverlay({
 
       return (
         <>
-          {items.map((item, index) => (
+          {customization.map((item, index) => (
             <div key={`${keyPrefix}_${index}`}>
               {((!item?.condition || item.condition(props)) && _renderOverlayItem(item, props)) ||
                 null}
@@ -452,7 +368,7 @@ function OverlayItem(props) {
       title={title}
     >
       {label ? <span className="mr-1 shrink-0">{label}</span> : null}
-      <span className="ml-1 mr-2 shrink-0">{value}</span>
+      <span className="ml-0 mr-2 shrink-0">{value}</span>
     </div>
   );
 }
@@ -471,10 +387,10 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
       className="overlay-item flex flex-row"
       style={{ color: customization?.color }}
     >
-      <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 shrink-0">{windowCenter.toFixed(0)}</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">W:</span>
+      <span className="mr-2.5 shrink-0">{windowWidth.toFixed(0)}</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">L:</span>
+      <span className="shrink-0">{windowCenter.toFixed(0)}</span>
     </div>
   );
 }
@@ -488,7 +404,7 @@ function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
       className="overlay-item flex flex-row"
       style={{ color: (customization && customization.color) || undefined }}
     >
-      <span className="mr-1 shrink-0">Zoom:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.67]">Zoom:</span>
       <span>{scale.toFixed(2)}x</span>
     </div>
   );
@@ -512,7 +428,7 @@ function InstanceNumberOverlayItem({
       <span>
         {instanceNumber !== undefined && instanceNumber !== null ? (
           <>
-            <span className="mr-1 shrink-0">I:</span>
+            <span className="mr-0.5 shrink-0 opacity-[0.67]">I:</span>
             <span>{`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`}</span>
           </>
         ) : (
@@ -531,4 +447,4 @@ CustomizableViewportOverlay.propTypes = {
 
 export default CustomizableViewportOverlay;
 
-export { CustomizableViewportOverlay, CornerstoneOverlay };
+export { CustomizableViewportOverlay };

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Enums, VolumeViewport3D, utilities as csUtils } from '@cornerstonejs/core';
-import { ImageScrollbar } from '@ohif/ui';
+import { ImageScrollbar } from '@ohif/ui-next';
 
 function CornerstoneImageScrollbar({
   viewportData,
@@ -44,13 +44,17 @@ function CornerstoneImageScrollbar({
       return;
     }
 
-    const imageIndex = viewport.getCurrentImageIdIndex();
-    const numberOfSlices = viewport.getNumberOfSlices();
+    try {
+      const imageIndex = viewport.getCurrentImageIdIndex();
+      const numberOfSlices = viewport.getNumberOfSlices();
 
-    setImageSliceData({
-      imageIndex: imageIndex,
-      numberOfSlices,
-    });
+      setImageSliceData({
+        imageIndex: imageIndex,
+        numberOfSlices,
+      });
+    } catch (error) {
+      console.warn(error);
+    }
   }, [viewportId, viewportData]);
 
   useEffect(() => {

extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css

@@ -3,19 +3,18 @@
   --marker-height: 100px;
   --scrollbar-width: 20px;
   pointer-events: none;
-  font-size: 15px;
   line-height: 18px;
 }
 .ViewportOrientationMarkers .orientation-marker {
   position: absolute;
 }
 .ViewportOrientationMarkers .top-mid {
-  top: 0.6rem;
+  top: 0.38rem;
   left: 50%;
 }
 .ViewportOrientationMarkers .left-mid {
   top: 47%;
-  left: 5px;
+  left: 0.38rem;
 }
 .ViewportOrientationMarkers .right-mid {
   top: 47%;

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

@@ -119,8 +119,8 @@ function ViewportOrientationMarkers({
         className={classNames(
           'overlay-text',
           `${m}-mid orientation-marker`,
-          'text-aqua-pale',
-          'text-[13px]',
+          'text-highlight/65',
+          'text-base',
           'leading-5'
         )}
         key={`${m}-mid orientation-marker`}

extensions/cornerstone/src/Viewport/Overlays/utils.ts

@@ -52,31 +52,6 @@ export function formatDICOMTime(time, strFormat = 'HH:mm:ss') {
   return moment(time, 'HH:mm:ss').format(strFormat);
 }
 
-/**
- * Formats a patient name for display purposes
- *
- * @param {string} name
- * @returns {string} formatted name.
- */
-export function formatPN(name) {
-  if (!name) {
-    return '';
-  }
-  if (typeof name === 'object') {
-    name = name.Alphabetic;
-    if (!name) {
-      return '';
-    }
-  }
-
-  const cleaned = name
-    .split('^')
-    .filter(s => !!s)
-    .join(', ')
-    .trim();
-  return cleaned === ',' || cleaned === '' ? '' : cleaned;
-}
-
 /**
  * Gets compression type
  *

extensions/cornerstone/src/components/AccordionGroup/AccordionGroup.tsx

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

extensions/cornerstone/src/components/AccordionGroup/index.ts

@@ -0,0 +1,4 @@
+export * from './AccordionGroup';
+import AccordionGroup from './AccordionGroup';
+
+export default AccordionGroup;

extensions/cornerstone/src/components/ActiveViewportWindowLevel/ActiveViewportWindowLevel.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { useViewportGrid } from '@ohif/ui';
+import { useViewportGrid } from '@ohif/ui-next';
 import ViewportWindowLevel from '../ViewportWindowLevel/ViewportWindowLevel';
 
 const ActiveViewportWindowLevel = ({ servicesManager }: withAppTypes): ReactElement => {

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

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

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

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

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

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

extensions/cornerstone/src/components/MeasurementItems.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Accordion, AccordionContent, AccordionItem } from '@ohif/ui-next';
+
+import PanelAccordionTrigger from './PanelAccordionTrigger';
+import MeasurementsMenu from './MeasurementsMenu';
+import { useSystem } from '@ohif/core';
+
+export function MeasurementItem(props) {
+  const { index, item } = props;
+  return (
+    <PanelAccordionTrigger
+      count={index + 1}
+      text={item.toolName || item.label || item.title}
+      colorHex="#f00"
+      isActive={item.isSelected}
+      menu={MeasurementsMenu}
+      group={{ items: [item], onClick: props.onClick }}
+    />
+  );
+}
+
+export default function MeasurementAccordion(props) {
+  const { items } = props;
+  const system = useSystem();
+
+  const onClick = (e, group) => {
+    const { items } = group;
+    // Just jump to the first measurement in the set, and mark that one as active
+    // with the set of items.
+    system.commandsManager.run('jumpToMeasurement', {
+      uid: items[0].uid,
+      displayMeasurements: items,
+      group,
+    });
+  };
+
+  return (
+    <Accordion
+      type="multiple"
+      className="flex-shrink-0 overflow-hidden"
+    >
+      {items.map((item, index) => {
+        const { displayText: details = {} } = item;
+        return (
+          <AccordionItem
+            key={`measurementAccordion:${item.uid}`}
+            value={item.uid}
+          >
+            <MeasurementItem
+              item={item}
+              key={`measurementItem:${item.uid}`}
+              index={index}
+              onClick={onClick}
+            />
+            <AccordionContent key={`measurementContent:${item.uid}`}>
+              <div className="ml-7 px-2 py-2">
+                <div className="text-secondary-foreground flex items-center gap-1 text-base leading-normal">
+                  {details.primary?.length > 0 &&
+                    details.primary.map((detail, index) => (
+                      <span key={`details:${item.uid}:${index}`}>{detail}</span>
+                    ))}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}

extensions/cornerstone/src/components/MeasurementTableNested.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MeasurementTable } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+/**
+ * This is a measurement table that is designed to be nested inside
+ * the accordion groups.
+ */
+export default function MeasurementTableNested(props) {
+  const { title, items, group, customHeader } = props;
+  const { commandsManager } = useSystem();
+  const onAction = (e, command, uid) => {
+    commandsManager.run(command, { uid, annotationUID: uid, displayMeasurements: items });
+  };
+
+  return (
+    <MeasurementTable
+      title={title ? title : `Measurements`}
+      data={items}
+      onAction={onAction}
+      {...group}
+      key={group.key}
+    >
+      <MeasurementTable.Header key="measurementTableHeader">
+        {customHeader && group.isFirst && customHeader({ ...props, items: props.allItems })}
+      </MeasurementTable.Header>
+      <MeasurementTable.Body key="measurementTableBody" />
+    </MeasurementTable>
+  );
+}

extensions/cornerstone/src/components/MeasurementsMenu.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icons,
+} from '@ohif/ui-next';
+
+export function MeasumentsMenu(props) {
+  const { group, classNames } = props;
+  if (!group.items?.length) {
+    console.log('No items to iterate', group.items);
+    return null;
+  }
+  const { items } = group;
+  const [item] = items;
+  const { isSelected, isVisible } = item;
+
+  const system = useSystem();
+
+  const onAction = (event, command, args?) => {
+    const uid = items.map(item => item.uid);
+    // Some commands use displayMeasurements and some use items
+    system.commandsManager.run(command, {
+      ...args,
+      uid,
+      displayMeasurements: items,
+      items,
+      event,
+    });
+  };
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  return (
+    <div className={`relative ml-2 inline-flex items-center space-x-1 ${classNames}`}>
+      {/* Visibility Toggle Icon */}
+      <Button
+        size="icon"
+        variant="ghost"
+        className={`h-6 w-6 transition-opacity ${
+          isSelected || !isVisible ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'
+        }`}
+        aria-label={isVisible ? 'Hide' : 'Show'}
+        onClick={e => {
+          e.stopPropagation();
+          onAction(e, ['jumpToMeasurement', 'toggleVisibilityMeasurement']);
+        }}
+      >
+        {isVisible ? <Icons.Hide className="h-6 w-6" /> : <Icons.Show className="h-6 w-6" />}
+      </Button>
+      {/* Actions Dropdown Menu */}
+      <DropdownMenu onOpenChange={open => setIsDropdownOpen(open)}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            className={`h-6 w-6 transition-opacity ${
+              isSelected || isDropdownOpen ? 'opacity-100' : 'opacity-50 group-hover:opacity-100'
+            }`}
+            aria-label="Actions"
+            onClick={e => e.stopPropagation()} // Prevent row selection on button click
+          >
+            <Icons.More className="h-6 w-6" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={e => onAction(e, 'removeMeasurement')}>
+            <Icons.Delete className="text-foreground" />
+            <span className="pl-2">Delete</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export default MeasumentsMenu;

extensions/cornerstone/src/components/MeasurementsOrAdditionalFindings.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import AccordionGroup from './AccordionGroup';
+import { utils } from '@ohif/core';
+import MeasurementTableNested from './MeasurementTableNested';
+
+const { filterNot, filterAdditionalFindings } = utils.MeasurementFilters;
+
+export const MeasurementOrAdditionalFindingSets = [
+  {
+    title: 'Measurements',
+    filter: filterNot(filterAdditionalFindings),
+  },
+  {
+    title: 'Additional Findings',
+    filter: filterAdditionalFindings,
+  },
+];
+
+/**
+ * Groups measurements by study in order to allow display and saving by study
+ * @param {Object} servicesManager
+ */
+export const groupByNamedSets = (items, grouping) => {
+  const groups = new Map();
+  const { namedSets } = grouping;
+
+  for (const namedSet of namedSets) {
+    const name = namedSet.id || namedSet.title;
+    groups.set(name, {
+      ...grouping,
+      ...namedSet,
+      items: [],
+      isFirst: groups.size === 0,
+      title: name,
+      key: name,
+    });
+  }
+  items.forEach(item => {
+    for (const namedSet of namedSets) {
+      if (namedSet.filter(item)) {
+        const name = namedSet.id || namedSet.title;
+        groups.get(name).items.push(item);
+        return;
+      }
+    }
+  });
+  for (const namedSet of namedSets) {
+    const name = namedSet.id || namedSet.title;
+    if (!groups.get(name).items.length) {
+      groups.delete(name);
+    }
+  }
+  return groups;
+};
+
+export function MeasurementsOrAdditionalFindings(props): React.ReactNode {
+  const { items, children, grouping = {}, customHeader, group, actions } = props;
+
+  return (
+    <AccordionGroup
+      grouping={{
+        groupingFunction: groupByNamedSets,
+        name: 'measurementsOrAdditional',
+        namedSets: MeasurementOrAdditionalFindingSets,
+        StudyInstanceUID: group?.StudyInstanceUID,
+        ...grouping,
+      }}
+      items={items}
+      sourceChildren={children}
+    >
+      <AccordionGroup.Accordion noWrapper="true">
+        <MeasurementTableNested
+          customHeader={customHeader}
+          allItems={items}
+          actions={actions}
+        />
+      </AccordionGroup.Accordion>
+    </AccordionGroup>
+  );
+}
+
+export default MeasurementsOrAdditionalFindings;

extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { ViewportActionCorners } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
 
 export type OHIFViewportActionCornersProps = {
   viewportId: string;
 };
 
 function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
+  const { servicesManager } = useSystem();
   const [viewportActionCornersState] = useViewportActionCornersContext();
-
+  const ViewportActionCorners =
+    servicesManager.services.customizationService.getCustomization('ui.viewportActionCorner');
   if (!viewportActionCornersState[viewportId]) {
     return null;
   }

extensions/cornerstone/src/components/PanelAccordionTrigger.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { AccordionTrigger, ColorCircle } from '@ohif/ui-next';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+function onClickDefault(e) {
+  const { group, onClick = group?.onClick } = this;
+  if (!onClick) {
+    console.log('No onClick function', group);
+    return;
+  }
+  console.log('onClickDefault');
+  e.preventDefault();
+  e.stopPropagation();
+
+  onClick(e, group);
+
+  return false;
+}
+
+export default function PanelAccordionTrigger(props) {
+  const { marginLeft = 8, isActive = false, colorHex, count, text, menu: Menu = null } = props;
+
+  return (
+    <AccordionTrigger
+      style={{ marginLeft: `${marginLeft}px`, padding: 0 }}
+      asChild={true}
+    >
+      <div className={`inline-flex text-base ${isActive ? 'bg-popover' : 'bg-muted'} flex-grow`}>
+        <button onClick={onClickDefault.bind(props)}>
+          <span
+            className={`inline-flex rounded-l border-r border-black ${isActive ? 'bg-highlight' : 'bg-muted'}`}
+          >
+            {count !== undefined ? <span className="px-2">{count}</span> : null}
+            {colorHex && <ColorCircle colorHex={colorHex} />}
+          </span>
+          <span>{text}</span>
+        </button>
+        {Menu && (
+          <Menu
+            {...props}
+            classNames="justify-end flex-grow"
+          />
+        )}
+        <ChevronDownIcon className="text-primary h-4 w-4 shrink-0 transition-transform duration-200" />
+      </div>
+    </AccordionTrigger>
+  );
+}

extensions/cornerstone/src/components/SeriesMeasurements.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { useActiveViewportDisplaySets, useSystem } from '@ohif/core';
+
+import AccordionGroup from './AccordionGroup';
+import PanelAccordionTrigger from './PanelAccordionTrigger';
+import MeasurementItems from './MeasurementItems';
+import MeasurementsMenu from './MeasurementsMenu';
+
+/**
+ * Groups measurements by study in order to allow display and saving by study
+ * @param {Object} servicesManager
+ */
+export const groupByDisplaySet = (items, grouping, childProps) => {
+  const groups = new Map();
+  const { displaySetService } = childProps.servicesManager.services;
+  const { activeDisplaySetInstanceUID } = grouping;
+
+  items.forEach(item => {
+    const { displaySetInstanceUID } = item;
+
+    if (!groups.has(displaySetInstanceUID)) {
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      groups.set(displaySetInstanceUID, {
+        header: null,
+        isSelected: displaySetInstanceUID == activeDisplaySetInstanceUID,
+        ...grouping,
+        items: [],
+        key: displaySetInstanceUID,
+        title: 'Series Measurements',
+        displaySet,
+      });
+    }
+    groups.get(displaySetInstanceUID).items.push(item);
+  });
+
+  return groups;
+};
+
+export function SeriesMeasurementTrigger(props) {
+  const { group, isSelected, displaySet, menu } = props;
+  const { SeriesNumber = 1, SeriesDescription } = displaySet;
+
+  return (
+    <PanelAccordionTrigger
+      text={`Series #${SeriesNumber} ${SeriesDescription}`}
+      count={group.items.length}
+      isActive={isSelected}
+      group={group}
+      menu={menu}
+      marginLeft="0"
+    />
+  );
+}
+
+export function SeriesMeasurements(props): React.ReactNode {
+  const { items, grouping = {}, children } = props;
+  const system = useSystem();
+  const activeDisplaySets = useActiveViewportDisplaySets(system);
+  const activeDisplaySetInstanceUID = activeDisplaySets?.[0]?.displaySetInstanceUID;
+  const onClick = (_e, group) => {
+    const { items } = group;
+    system.commandsManager.run('jumpToMeasurement', {
+      uid: items[0].uid,
+      displayMeasurements: items,
+      group,
+    });
+  };
+
+  // The content of the accordion group will default to the children of the
+  // parent declaration if present, otherwise to MeasurementItems
+  return (
+    <AccordionGroup
+      grouping={{
+        groupingFunction: groupByDisplaySet,
+        activeDisplaySetInstanceUID,
+        ...grouping,
+        onClick,
+      }}
+      items={items}
+      sourceChildren={children}
+    >
+      <AccordionGroup.Trigger asChild={true}>
+        <SeriesMeasurementTrigger menu={MeasurementsMenu} />
+      </AccordionGroup.Trigger>
+      <MeasurementItems />
+    </AccordionGroup>
+  );
+}
+
+export default SeriesMeasurements;

extensions/cornerstone/src/components/SeriesSummaryFromDisplaySet.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { utils } from '@ohif/core';
+
+const { formatDate } = utils;
+
+export function SeriesSummaryFromDisplaySet({ displaySet }) {
+  if (!displaySet) {
+    return null;
+  }
+
+  const { SeriesDate, SeriesDescription, SeriesNumber = 1 } = displaySet;
+
+  return (
+    <div className="mx-2 my-0">
+      <div className="text-foreground pb-1 text-sm">
+        Series #{SeriesNumber} {SeriesDescription}
+      </div>
+      <div className="text-muted-foreground text-sm">{formatDate(SeriesDate)}</div>
+    </div>
+  );
+}

extensions/cornerstone/src/components/StudyMeasurements.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useActiveViewportDisplaySets, useSystem, utils } from '@ohif/core';
+// import { AccordionContent, AccordionItem, AccordionTrigger } from '@ohif/ui-next';
+
+import { AccordionGroup } from './AccordionGroup';
+import MeasurementsOrAdditionalFindings from './MeasurementsOrAdditionalFindings';
+import StudySummaryWithActions from './StudySummaryWithActions';
+
+const { MeasurementFilters } = utils;
+
+/**
+ * Groups measurements by study in order to allow display and saving by study
+ * @param {Object} servicesManager
+ */
+export const groupByStudy = (items, grouping, childProps) => {
+  const groups = new Map();
+  const { activeStudyUID } = grouping;
+  const { displaySetService } = childProps.servicesManager.services;
+
+  const getItemStudyInstanceUID = item => {
+    const displaySet = displaySetService.getDisplaySetByUID(item.displaySetInstanceUID);
+    return displaySet.instances[0].StudyInstanceUID;
+  };
+
+  let firstSelected, firstGroup;
+
+  items.forEach(item => {
+    const studyUID = getItemStudyInstanceUID(item);
+    if (!groups.has(studyUID)) {
+      const items = [];
+      const filter = MeasurementFilters.filterAnd(
+        MeasurementFilters.filterMeasurementsByStudyUID(activeStudyUID),
+        grouping.filter
+      );
+      const group = {
+        ...grouping,
+        items,
+        displayMeasurements: items,
+        key: studyUID,
+        isSelected: studyUID === activeStudyUID,
+        StudyInstanceUID: activeStudyUID,
+        filter,
+        measurementFilter: filter,
+      };
+      if (group.isSelected && !firstSelected) {
+        firstSelected = group;
+      }
+      firstGroup ||= group;
+      groups.set(studyUID, group);
+    }
+    if (!firstSelected && firstGroup) {
+      firstGroup.isSelected = true;
+    }
+    const group = groups.get(studyUID);
+    group.items.push(item);
+  });
+
+  return groups;
+};
+
+export function StudyMeasurements(props): React.ReactNode {
+  const { items, grouping = {}, children } = props;
+
+  const system = useSystem();
+  const activeDisplaySets = useActiveViewportDisplaySets(system);
+  const activeStudyUID = activeDisplaySets?.[0]?.StudyInstanceUID;
+
+  return (
+    <AccordionGroup
+      grouping={{
+        name: 'groupByStudy',
+        groupingFunction: groupByStudy,
+        activeStudyUID,
+        ...grouping,
+      }}
+      items={items}
+      value={[activeStudyUID]}
+      sourceChildren={children}
+    >
+      <AccordionGroup.Trigger>
+        <StudySummaryWithActions />
+      </AccordionGroup.Trigger>
+      <MeasurementsOrAdditionalFindings activeStudyUID={activeStudyUID} />
+    </AccordionGroup>
+  );
+}
+
+export default StudyMeasurements;

extensions/cornerstone/src/components/StudyMeasurementsActions.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, Icons } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+export function StudyMeasurementsActions({ items, StudyInstanceUID, measurementFilter, actions }) {
+  const { commandsManager } = useSystem();
+  const disabled = !items?.length;
+
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <div className="bg-background flex h-9 w-full items-center rounded pr-0.5">
+      <div className="flex space-x-1">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="pl-1.5"
+          onClick={() => {
+            commandsManager.runCommand('downloadCSVMeasurementsReport', {
+              StudyInstanceUID,
+              measurementFilter,
+            });
+          }}
+        >
+          <Icons.Download className="h-5 w-5" />
+          <span className="pl-1">CSV</span>
+        </Button>
+
+        <Button
+          size="sm"
+          variant="ghost"
+          className="pl-0.5"
+          onClick={e => {
+            e.stopPropagation();
+            if (actions?.createSR) {
+              actions.createSR({ StudyInstanceUID, measurementFilter });
+              return;
+            }
+            commandsManager.run('promptSaveReport', {
+              StudyInstanceUID,
+              measurementFilter,
+            });
+          }}
+        >
+          <Icons.Add />
+          Create SR
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="pl-0.5"
+          onClick={e => {
+            e.stopPropagation();
+            if (actions?.onDelete) {
+              actions.onDelete();
+              return;
+            }
+            commandsManager.runCommand('clearMeasurements', {
+              measurementFilter,
+            });
+          }}
+        >
+          <Icons.Delete />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default StudyMeasurementsActions;

extensions/cornerstone/src/components/StudySummaryFromMetadata.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DicomMetadataStore, utils } from '@ohif/core';
+import { StudySummary } from '@ohif/ui-next';
+
+const { formatDate } = utils;
+
+export function StudySummaryFromMetadata(props) {
+  const { StudyInstanceUID } = props;
+  if (!StudyInstanceUID) {
+    return null;
+  }
+  const studyMeta = DicomMetadataStore.getStudy(StudyInstanceUID);
+  if (!studyMeta?.series?.length) {
+    return null;
+  }
+
+  const instanceMeta = studyMeta.series[0].instances[0];
+  const { StudyDate, StudyDescription } = instanceMeta;
+
+  return (
+    <StudySummary
+      date={formatDate(StudyDate)}
+      description={StudyDescription}
+    />
+  );
+}

extensions/cornerstone/src/components/StudySummaryWithActions.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StudySummaryFromMetadata } from './StudySummaryFromMetadata';
+import StudyMeasurementsActions from './StudyMeasurementsActions';
+
+export function StudySummaryWithActions(props) {
+  return (
+    <div>
+      <StudySummaryFromMetadata {...props} />
+      <StudyMeasurementsActions {...props} />
+    </div>
+  );
+}
+
+export default StudySummaryWithActions;

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportSegmentationMenu.tsx

@@ -110,7 +110,7 @@ function ViewportSegmentationMenu({
           <Separator className="bg-input mb-3" />
           <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
           <ul className="space-y-1">
-            {availableSegmentations.map(({segmentationId, label}) => (
+            {availableSegmentations.map(({ segmentationId, label }) => (
               <li
                 key={segmentationId}
                 className="flex items-center text-sm"

extensions/cornerstone/src/components/ViewportWindowLevel/ViewportWindowLevel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useState, ReactElement, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { PanelSection, WindowLevel } from '@ohif/ui';
+import { PanelSection, WindowLevel } from '@ohif/ui-next';
 import { Enums, eventTarget } from '@cornerstonejs/core';
 import { useActiveViewportDisplaySets } from '@ohif/core';
 import {
@@ -20,7 +20,7 @@ const ViewportWindowLevel = ({
   viewportId: string;
 }>): ReactElement => {
   const { cornerstoneViewportService } = servicesManager.services;
-  const [windowLevels, setWindowLevels] = useState([]);
+  const [windowLevels, setWindowLevels] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const displaySets = useActiveViewportDisplaySets({ servicesManager });
 
@@ -200,29 +200,36 @@ const ViewportWindowLevel = ({
   }, [viewportId, cornerstoneViewportService, updateViewportHistograms, displaySetIds, isLoading]);
 
   return (
-    <PanelSection title="Window Level">
-      {windowLevels.map((windowLevel, i) => {
-        if (!windowLevel.histogram) {
-          return null;
-        }
+    <PanelSection defaultOpen={true}>
+      <PanelSection.Header>Window Level</PanelSection.Header>
+      <PanelSection.Content className="bg-muted py-1">
+        {windowLevels.map((windowLevel, i) => {
+          if (!windowLevel.histogram) {
+            return null;
+          }
 
-        return (
-          <WindowLevel
-            key={windowLevel.volumeId}
-            title={`${windowLevel.modality}`}
-            histogram={windowLevel.histogram}
-            voi={windowLevel.voi}
-            step={windowLevel.step}
-            showOpacitySlider={windowLevel.showOpacitySlider}
-            colormap={windowLevel.colormap}
-            onVOIChange={voi => handleVOIChange(windowLevel.volumeId, voi)}
-            opacity={windowLevel.opacity}
-            onOpacityChange={opacity =>
-              handleOpacityChange(windowLevel.viewportId, i, windowLevel.volumeId, opacity)
-            }
-          />
-        );
-      })}
+          return (
+            <WindowLevel
+              key={windowLevel.volumeId}
+              histogram={windowLevel.histogram}
+              voi={windowLevel.voi}
+              step={windowLevel.step}
+              showOpacitySlider={windowLevel.showOpacitySlider}
+              colormap={windowLevel.colormap}
+              onVOIChange={voi => handleVOIChange(windowLevel.volumeId, voi)}
+              opacity={windowLevel.opacity}
+              onOpacityChange={opacity =>
+                handleOpacityChange(windowLevel.viewportId, i, windowLevel.volumeId, opacity)
+              }
+            />
+          );
+        })}
+        {windowLevels.length === 0 && !isLoading && (
+          <div className="text-muted-foreground py-2 text-center text-sm">
+            No window level data available
+          </div>
+        )}
+      </PanelSection.Content>
     </PanelSection>
   );
 };

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

@@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import { SwitchButton } from '@ohif/ui';
+import { Switch } from '@ohif/ui-next';
 import { StackViewport, VolumeViewport } from '@cornerstonejs/core';
 import { ColorbarProps } from '../../types/Colorbar';
 import { utilities } from '@cornerstonejs/core';
@@ -22,7 +22,7 @@ export function setViewportColorbar(
     colorbarOptions.ticks = {
       position: 'left',
       style: {
-        font: '12px Arial',
+        font: '13px Inter',
         color: '#000000',
         maxNumTicks: 8,
         tickSize: 5,
@@ -101,12 +101,20 @@ export function Colorbar({
   }, [viewportId]);
 
   return (
-    <div className="all-in-one-menu-item flex w-full justify-center">
-      <div className="mr-2 w-[28px]"></div>
-      <SwitchButton
-        label="Display Color bar"
+    <div
+      className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
+      onClick={e => {
+        e.stopPropagation();
+        onSetColorbar();
+      }}
+    >
+      <div className="flex w-7 flex-shrink-0 items-center justify-center"></div>
+      <span className="flex-grow">Display Color bar</span>
+      <Switch
+        className="ml-2 flex-shrink-0"
         checked={showColorbar}
-        onChange={() => {
+        onClick={e => {
+          e.stopPropagation();
           onSetColorbar();
         }}
       />

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

@@ -1,5 +1,6 @@
-import React, { ReactElement, useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { AllInOneMenu, ButtonGroup, SwitchButton } from '@ohif/ui';
+import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
+import { AllInOneMenu, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
+
 import { StackViewport, Types } from '@cornerstonejs/core';
 import { ColormapProps } from '../../types/Colormap';
 
@@ -64,20 +65,9 @@ export function Colormap({
     return colormap;
   };
 
-  const buttons = useMemo(() => {
-    return displaySets.map((displaySet, index) => ({
-      children: displaySet.Modality,
-      key: index,
-      style: {
-        minWidth: `calc(100% / ${displaySets.length})`,
-        fontSize: '0.8rem',
-        textAlign: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-    }));
-  }, [displaySets]);
+  const activeIndex = displaySets.findIndex(
+    ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID
+  );
 
   useEffect(() => {
     setActiveDisplaySet(displaySets[displaySets.length - 1]);
@@ -85,46 +75,52 @@ export function Colormap({
 
   return (
     <>
-      {buttons.length > 1 && (
-        <div className="all-in-one-menu-item flex w-full justify-center">
-          <ButtonGroup
-            onActiveIndexChange={index => {
+      {displaySets.length > 1 && (
+        <div className="flex h-8 w-full flex-shrink-0 items-center justify-center px-2 text-base">
+          <Tabs
+            value={String(activeIndex)}
+            onValueChange={val => {
+              const index = parseInt(val, 10);
               setActiveDisplaySet(displaySets[index]);
               setPrePreviewColormap(null);
             }}
-            activeIndex={
-              displaySets.findIndex(
-                ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID
-              ) || 1
-            }
-            className="w-[70%] text-[10px]"
           >
-            {buttons.map(({ children, key, style }) => (
-              <div
-                key={key}
-                style={style}
-              >
-                {children}
-              </div>
-            ))}
-          </ButtonGroup>
+            <TabsList>
+              {displaySets.map((ds, i) => (
+                <TabsTrigger
+                  key={i}
+                  value={String(i)}
+                >
+                  {ds.Modality}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
         </div>
       )}
-      <div className="all-in-one-menu-item flex w-full justify-center">
-        <SwitchButton
-          label="Preview in viewport"
+      <div
+        className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
+        onClick={() => setShowPreview(!showPreview)}
+      >
+        <span className="flex-shrink-0">Preview in viewport</span>
+        <Switch
+          className="ml-auto flex-shrink-0"
           checked={showPreview}
-          onChange={checked => {
+          onCheckedChange={checked => {
             setShowPreview(checked);
           }}
         />
       </div>
       <AllInOneMenu.DividerItem />
-      <AllInOneMenu.ItemPanel>
+      <AllInOneMenu.ItemPanel
+        maxHeight="calc(100vh - 250px)"
+        className="min-h-[200px] flex-grow"
+      >
         {colormaps.map((colormap, index) => (
           <AllInOneMenu.Item
             key={index}
             label={colormap.description}
+            useIconSpace={false}
             onClick={() => {
               onSetColorLUT({
                 viewportId,

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

@@ -1,130 +1,83 @@
 import React, { ReactElement, useState, useEffect, useCallback } from 'react';
 import { VolumeLightingProps } from '../../types/ViewportPresets';
+import { Numeric } from '@ohif/ui-next';
 
 export function VolumeLighting({
   servicesManager,
   commandsManager,
   viewportId,
+  hasShade,
 }: VolumeLightingProps): ReactElement {
   const { cornerstoneViewportService } = servicesManager.services;
-  const [ambient, setAmbient] = useState(null);
-  const [diffuse, setDiffuse] = useState(null);
-  const [specular, setSpecular] = useState(null);
+  const [lightingValues, setLightingValues] = useState({
+    ambient: null,
+    diffuse: null,
+    specular: null,
+  });
 
-  const onAmbientChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { ambient } });
-  }, [ambient, commandsManager, viewportId]);
-
-  const onDiffuseChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { diffuse } });
-  }, [diffuse, commandsManager, viewportId]);
-
-  const onSpecularChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { specular } });
-  }, [specular, commandsManager, viewportId]);
-
-  const calculateBackground = value => {
-    const percentage = ((value - 0) / (1 - 0)) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
+  // Single callback to handle all lighting property changes
+  const onLightingChange = useCallback(
+    (property, value) => {
+      commandsManager.runCommand('setVolumeLighting', {
+        viewportId,
+        options: { [property]: value },
+      });
+      setLightingValues(prev => ({
+        ...prev,
+        [property]: value,
+      }));
+    },
+    [commandsManager, viewportId]
+  );
 
   useEffect(() => {
     const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
     const { actor } = viewport.getActors()[0];
-    const ambient = actor.getProperty().getAmbient();
-    const diffuse = actor.getProperty().getDiffuse();
-    const specular = actor.getProperty().getSpecular();
-    setAmbient(ambient);
-    setDiffuse(diffuse);
-    setSpecular(specular);
-  }, [viewportId, cornerstoneViewportService]);
-  return (
-    <>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="ambient"
-        >
-          Ambient
-        </label>
-        {ambient !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={ambient}
-            onChange={e => {
-              setAmbient(e.target.value);
-              onAmbientChange();
-            }}
-            id="ambient"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(ambient),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="diffuse"
-        >
-          Diffuse
-        </label>
-        {diffuse !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={diffuse}
-            onChange={e => {
-              setDiffuse(e.target.value);
-              onDiffuseChange();
-            }}
-            id="diffuse"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(diffuse),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
+    const property = actor.getProperty();
 
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="specular"
-        >
-          Specular
-        </label>
-        {specular !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={specular}
-            onChange={e => {
-              setSpecular(e.target.value);
-              onSpecularChange();
-            }}
-            id="specular"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(specular),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-    </>
+    const values = {
+      ambient: property.getAmbient(),
+      diffuse: property.getDiffuse(),
+      specular: property.getSpecular(),
+    };
+
+    setLightingValues(values);
+  }, [viewportId, cornerstoneViewportService]);
+
+  const disableOption = hasShade ? '' : 'ohif-disabled !opacity-40';
+
+  // Configuration for our lighting properties
+  const lightingProperties = [
+    { key: 'ambient', label: 'Ambient' },
+    { key: 'diffuse', label: 'Diffuse' },
+    { key: 'specular', label: 'Specular' },
+  ];
+
+  return (
+    <div className="my-1 mt-2 flex flex-col space-y-2">
+      {lightingProperties.map(
+        ({ key, label }) =>
+          lightingValues[key] !== null && (
+            <div
+              key={key}
+              className={`w-full pl-2 pr-1 ${disableOption}`}
+            >
+              <Numeric.Container
+                mode="singleRange"
+                min={0}
+                max={1}
+                step={0.1}
+                value={lightingValues[key]}
+                onChange={value => onLightingChange(key, value)}
+              >
+                <div className="flex flex-row items-center">
+                  <Numeric.Label className="w-16">{label}</Numeric.Label>
+                  <Numeric.SingleRange sliderClassName="mx-2 flex-grow" />
+                </div>
+              </Numeric.Container>
+            </div>
+          )
+      )}
+    </div>
   );
 }

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

@@ -1,5 +1,5 @@
-import React, { ReactElement } from 'react';
-import { AllInOneMenu } from '@ohif/ui';
+import React, { ReactElement, useState } from 'react';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { VolumeRenderingOptionsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingQuality } from './VolumeRenderingQuality';
 import { VolumeShift } from './VolumeShift';
@@ -11,6 +11,7 @@ export function VolumeRenderingOptions({
   volumeRenderingQualityRange,
   servicesManager,
 }: VolumeRenderingOptionsProps): ReactElement {
+  const [hasShade, setShade] = useState(false);
   return (
     <AllInOneMenu.ItemPanel>
       <VolumeRenderingQuality
@@ -25,21 +26,23 @@ export function VolumeRenderingOptions({
         commandsManager={commandsManager}
         servicesManager={servicesManager}
       />
-      <div className="all-in-one-menu-item mt-2 flex !h-[20px] w-full justify-start">
-        <div className="text-aqua-pale text-[13px]">LIGHTING</div>
+      <div className="mt-2 flex h-8 !h-[20px] w-full flex-shrink-0 items-center justify-start px-2 text-base">
+        <div className="text-muted-foreground text-sm">Lighting</div>
       </div>
-      <div className="bg-primary-dark mt-1 mb-1 h-[2px] w-full"></div>
-      <div className="all-in-one-menu-item flex w-full justify-center">
+      <div className="bg-background mt-1 mb-1 h-px w-full"></div>
+      <div className="hover:bg-accent flex h-8 w-full flex-shrink-0 items-center px-2 text-base hover:rounded">
         <VolumeShade
           commandsManager={commandsManager}
           servicesManager={servicesManager}
           viewportId={viewportId}
+          onClickShade={setShade}
         />
       </div>
       <VolumeLighting
         viewportId={viewportId}
         commandsManager={commandsManager}
         servicesManager={servicesManager}
+        hasShade={hasShade}
       />
     </AllInOneMenu.ItemPanel>
   );