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

chore(version): version.json [skip ci]
feat(app): change ohif viewer to ohif app (#3451 )
2023-06-07 00:14:02 +00:00 · 2023-06-07 00:13:59 +00:00 · 2023-06-06 20:06:31 -04:00 · 2023-06-01 08:13:36 -04:00
3446 changed files with 93783 additions and 373564 deletions
@@ -1,43 +1,68 @@
 version: 2.1

+### ABOUT
+#
+# This configuration powers our Circleci.io integration
+#
+# Note:
+# Netlify works independently from this configuration to
+# create pull request previews and to update `https://docs.ohif.org`
+###
+
+## https://github.com/cypress-io/circleci-orb
+##
 orbs:
  codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@3.4.2
+  cypress: cypress-io/cypress@1.26.0
+executors:
+  # Custom executor to override Cypress config
+  deploy-to-prod-executor:
+    docker:
+      - image: cimg/node:16.14
+        environment:
+          CYPRESS_BASE_URL: https://ohif-staging.netlify.com/
+  chrome-and-pacs:
+    docker:
+      # Primary container image where all steps run.
+      - image: 'cypress/browsers:node16.14.2-slim-chrome103-ff102'

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

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

+  ###
+  # Workflow: PR_OPTIONAL_DOCKER_PUBLISH
+  ###
+  DOCKER_PR_PUBLISH:
+    <<: *defaults
+    steps:
+      # Enable yarn workspaces
+      - run: yarn config set workspaces-experimental true
+
+      # Checkout code and ALL Git Tags
+      - checkout
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            # when lock file changes, use increasingly general patterns to restore cache
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
+
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile
+
+      - setup_remote_docker:
+          docker_layer_caching: false
+
+      - run:
+          name: Build and push Docker image
+          command: |
+            # Remove npm config
+            rm -f ./.npmrc
+            # Set our version number using vars
+            echo $CIRCLE_BUILD_NUM
+            # Build our image, auth, and push
+            docker build --tag ohif/app:PR_BUILD-$CIRCLE_BUILD_NUM .
+            echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
+            docker push ohif/app:PR_BUILD-$CIRCLE_BUILD_NUM
+
+  ###
+  # Workflow: DEPLOY
+  ###
  BUILD:
    <<: *defaults
-    resource_class: large
    steps:
      # Checkout code and ALL Git Tags
      - checkout
-      - install_bun
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            # when lock file changes, use increasingly general patterns to restore cache
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
      - run:
          name: Install Dependencies
-          command: bun install --no-save
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache ## Cache yarn and Cypress
+          key: yarn-packages-{{ checksum "yarn.lock" }}
      # Build & Test
      - run:
          name: 'Perform the versioning before build'
-          command: bun ./version.mjs
+          command: node ./version.mjs
      - run:
          name: 'Build the OHIF Viewer'
-          command: bun run build
+          command: yarn run build
          no_output_timeout: 45m
      - run:
          name: 'Upload SourceMaps, Send Deploy Notification'
@@ -103,78 +177,88 @@ jobs:
            - commit.txt
            - version.json

-  BUILD_PACKAGES_QUICK:
-    <<: *defaults
-    resource_class: large
-    steps:
-      - install_bun
-      # Checkout code and ALL Git Tags
-      - checkout
-      - attach_workspace:
-          at: ~/repo
-      # SECURITY AUDIT
-      - run:
-          name: 'Security Audit - High Risk Vulnerabilities'
-          command: |
-            echo "🔍 Running bun audit for security vulnerabilities..."
-            echo "Checking for HIGH-RISK vulnerabilities..."
+  # DEPLOY_TO_DEV:
+  #   docker:
+  #     - image: circleci/node:16.14.0
+  #       environment:
+  #         TERM: xterm
+  #         NETLIFY_SITE_ID: 32708787-c9b0-4634-b50f-7ca41952da77
+  #   working_directory: ~/repo
+  #   steps:
+  #     - attach_workspace:
+  #         at: ~/repo
+  #     - run: cd .netlify && npm install
+  #     - run: cp .netlify/deploy-workflow/_redirects platform/app/dist/_redirects
+  #     - run: cd .netlify && npm run deploy

-            if bun audit --audit-level high; then
-              echo "✅ No high-risk vulnerabilities found"
-              echo "🎉 Security audit passed!"
-            else
-              echo ""
-              echo "❌ HIGH-RISK VULNERABILITIES DETECTED!"
-              echo "======================================"
-              echo ""
-              echo "🔧 To fix these issues:"
-              echo "  1. Run: bun audit"
-              echo "  2. Review the vulnerability details"
-              echo "  3. Update affected packages to secure versions"
-              echo "  4. Test your changes"
-              echo "  5. Re-run: bun audit --audit-level high"
-              echo ""
-              echo "📋 Full audit report:"
-              bun audit --audit-level low || true
-              echo ""
-              echo "❌ This build cannot proceed until high-risk vulnerabilities are resolved."
-              exit 1
-            fi
-      - run:
-          name: Install Dependencies
-          command: bun install --frozen-lockfile
-      - run:
-          name: Avoid hosts unknown for github
-          command: |
-            rm -rf ~/.ssh
-            mkdir ~/.ssh/
-            echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
-            git config --global user.email "danny.ri.brown+ohif-bot@gmail.com"
-            git config --global user.name "ohif-bot"
-      - run:
-          name: Authenticate with NPM registry
-          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
-      - run:
-          name: build half of the packages (to avoid out of memory in circleci)
-          command: |
-            bun run build:package-all
-      - run:
-          name: build the other half of the packages
-          command: |
-            bun run build:package-all-1
+  # DEPLOY_TO_STAGING:
+  #   docker:
+  #     - image: circleci/node:16.14.0
+  #       environment:
+  #         TERM: xterm
+  #         NETLIFY_SITE_ID: c7502ae3-b150-493c-8422-05701e44a969
+  #   working_directory: ~/repo
+  #   steps:
+  #     - attach_workspace:
+  #         at: ~/repo
+  #     - run: cd .netlify && npm install
+  #     - run: cp .netlify/deploy-workflow/_redirects platform/app/dist/_redirects
+  #     - run: cd .netlify && npm run deploy

+  # DEPLOY_TO_PRODUCTION:
+  #   docker:
+  #     - image: circleci/node:16.14.0
+  #       environment:
+  #         TERM: xterm
+  #         NETLIFY_SITE_ID: 79c4a5da-5c95-4dc9-84f7-45fd9dfe21b0
+  #   working_directory: ~/repo
+  #   steps:
+  #     - attach_workspace:
+  #         at: ~/repo
+  #     - run: cd .netlify && npm install
+  #     - run: cp .netlify/deploy-workflow/_redirects platform/app/dist/_redirects
+  #     - run: cd .netlify && npm run deploy
+
+  #   DEPLOY_TO_RELEASE_DEV:
+  #     docker:
+  #       - image: circleci/node:16.14.0
+  #         environment:
+  #           TERM: xterm
+  #           NETLIFY_SITE_ID: 3270878-22
+  #     working_directory: ~/repo
+  #     steps:
+  #       - attach_workspace:
+  #           at: ~/repo
+  #       - run: cd .netlify && npm install
+  #       - run:
+  #           cp .netlify/deploy-workflow/_redirects platform/app/dist/_redirects
+  #       - run: cd .netlify && npm run deploy
+
+  ###
+  # Workflow: RELEASE
+  ###
  NPM_PUBLISH:
    <<: *defaults
-    resource_class: large
    steps:
-      - install_bun
+      - run: yarn -v
      # Checkout code and ALL Git Tags
      - checkout
      - attach_workspace:
          at: ~/repo
+      # Use increasingly general patterns to restore cache
+      - restore_cache:
+          name: Restore Yarn and Cypress Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
+            - yarn-packages-
      - run:
          name: Install Dependencies
-          command: bun install --no-save
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache/yarn
+          key: yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Avoid hosts unknown for github
          command: |
@@ -185,34 +269,32 @@ jobs:
            git config --global user.name "ohif-bot"
      - run:
          name: Authenticate with NPM registry
-          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
+          command:
+            echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
+      - run:
+          name: Increase the event emitter limit
+          command: |
+            node ./increaseEventEmitterLimit.mjs
      - run:
          name: build half of the packages (to avoid out of memory in circleci)
          command: |
-            bun run build:package-all
+            yarn run build:package-all
      - run:
          name: build the other half of the packages
          command: |
-            bun run build:package-all-1
-      - run:
-          name: increase min time out
-          command: |
-            npm config set fetch-retry-mintimeout 20000
-      - run:
-          name: increase max time out
-          command: |
-            npm config set fetch-retry-maxtimeout 120000
+            yarn run build:package-all-1
      - run:
          name: publish package versions
          command: |
-            bun ./publish-version.mjs
+            node ./publish-version.mjs
      - run:
          name: Again set the NPM registry (was deleted in the version script)
-          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
+          command:
+            echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
      - run:
          name: publish package dist
          command: |
-            bun ./publish-package.mjs
+            node ./publish-package.mjs
      - persist_to_workspace:
          root: ~/repo
          paths:
@@ -220,14 +302,13 @@ jobs:

  DOCKER_RELEASE_PUBLISH:
    <<: *defaults
-    resource_class: large
    steps:
      - attach_workspace:
          at: ~/repo
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name: Build Docker image for amd64
+          name: Build and push Docker image from the release branch
          command: |
            # This file will exist if a new version was published by
            # our command in the previous job.
@@ -241,61 +322,23 @@ jobs:
              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
              echo $IMAGE_VERSION
              echo $IMAGE_VERSION_FULL
-              # Build our amd64 image, auth, and push
-              docker build --platform linux/amd64 --tag ohif/app:$IMAGE_VERSION_FULL-amd64 --tag ohif/app:latest-amd64 .
+              # Build our image, auth, and push
+              docker build --tag ohif/app:$IMAGE_VERSION_FULL --tag ohif/app:latest .
              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL-amd64
-              docker push ohif/app:latest-amd64
+              docker push ohif/app:$IMAGE_VERSION_FULL
+              docker push ohif/app:latest
            fi
-      - persist_to_workspace:
-          root: ~/repo
-          paths:
-            - .
-
-  DOCKER_RELEASE_PUBLISH_ARM:
-    <<: *defaults
-    resource_class: arm.large
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: false
-      - run:
-          name: Build Docker image for arm64 (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
-    resource_class: large
    steps:
      - attach_workspace:
          at: ~/repo
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name: Build Docker image for amd64 (Beta)
+          name:
+            Build and push Docker image from the master branch (beta releases)
          command: |
            echo $(ls -l)

@@ -307,211 +350,159 @@ jobs:
            else
              echo "Building and pushing Docker image from the master branch (beta releases)"
              rm -f ./.npmrc
-
              # Set our version number using vars
              export IMAGE_VERSION=$(cat version.txt)
              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
              echo $IMAGE_VERSION
              echo $IMAGE_VERSION_FULL
-              # Build our amd64 image, auth, and push
-              docker build --platform linux/amd64 --tag ohif/app:$IMAGE_VERSION_FULL-amd64 --tag ohif/app:latest-beta-amd64 .
-              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
+              # Build our image, auth, and push

-  DOCKER_BETA_PUBLISH_ARM:
-    <<: *defaults
-    resource_class: arm.large
-    steps:
-      - attach_workspace:
-          at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: false
-      - run:
-          name: Build Docker image for arm64 (Beta)
-          command: |
-            echo $(ls -l)
-
-            # This file will exist if a new version was published by
-            # our command in the previous job.
-            if [[ ! -e version.txt ]]; then
-              echo "don't have version txt"
-              exit 0
-            else
-              echo "Building and pushing ARM64 Docker image from the master branch (beta releases)"
-              rm -f ./.npmrc
-              # Set our version number using vars
-              export IMAGE_VERSION=$(cat version.txt)
-              export IMAGE_VERSION_FULL=v$IMAGE_VERSION
-              echo $IMAGE_VERSION
-              echo $IMAGE_VERSION_FULL
-              # Build our arm64 image, auth, and push
-              docker build --platform linux/arm64 --tag ohif/app:$IMAGE_VERSION_FULL-arm64 --tag ohif/app:latest-beta-arm64 .
-              echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
-              docker push ohif/app:$IMAGE_VERSION_FULL-arm64
-              docker push ohif/app:latest-beta-arm64
-            fi
-
-  CYPRESS:
-    <<: *defaults
-    resource_class: large
-    parallelism: 8
-    steps:
-      - run:
-          name: Install System Dependencies
-          command: |
-            sudo apt-get update
-            sudo apt-get install -y xvfb libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6
-      - run:
-          name: Start Xvfb
-          command: Xvfb :99 -screen 0 1920x1080x24 &
-          background: true
-      - run:
-          name: Export Display Variable
-          command: export DISPLAY=:99
-      - cypress/install:
-          install-command: yarn install --no-save
-      - cypress/run-tests:
-          cypress-command: |
-            npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
-          start-command: yarn run test:data && yarn 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 "starting docker build"
+              docker build --tag ohif/app:$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
+              echo "starting docker push"
+              docker push ohif/app:$IMAGE_VERSION_FULL
            fi

 workflows:
+  version: 2
+
  PR_CHECKS:
    jobs:
-      - BUILD_PACKAGES_QUICK:
-          filters:
-            branches:
-              ignore: master
      - UNIT_TESTS
-      - CYPRESS:
-          name: 'Cypress Tests'
-          context: cypress

-  # viewer-dev.ohif.org
+      # E2E: PWA
+      - cypress/run:
+          name: 'E2E: PWA'
+          executor: chrome-and-pacs
+          browser: chrome
+          pre-steps:
+            - run: |
+                # Clear yarn cache; use yarn from image (update image to update yarn)
+                rm -rf ~/.yarn
+                yarn -v
+          yarn: true
+          record: true
+          store_artifacts: true
+          working_directory: platform/app
+          build: yarn test:data
+          start: yarn run test:e2e:serve
+          spec: 'cypress/integration/**/*'
+          wait-on: 'http://localhost:3000'
+          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+          no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/app/cypress/screenshots
+            - store_artifacts:
+                path: platform/app/cypress/videos
+            - store_test_results:
+                path: platform/app/cypress/results
+          requires:
+            - UNIT_TESTS
+
+  PR_OPTIONAL_VISUAL_TESTS:
+    jobs:
+      - AWAIT_APPROVAL:
+          type: approval
+      # Update hub.docker.org
+      - cypress/run:
+          name: 'Generate Percy Snapshots'
+          executor: cypress/browsers-chrome76
+          browser: chrome
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && yarn -v && yarn global add wait-on'
+          yarn: true
+          store_artifacts: false
+          working_directory: platform/app
+          build:
+            yarn test:data && npx cross-env QUICK_BUILD=true
+            APP_CONFIG=config/dicomweb-server.js yarn run build
+          # start server --> verify running --> percy + chrome + cypress
+          command: yarn run test:e2e:dist
+          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+          no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/app/cypress/screenshots
+            - store_artifacts:
+                path: platform/app/cypress/videos
+          requires:
+            - AWAIT_APPROVAL
+
+  # Our master branch deploys to viewer-dev.ohif.org, the viewer.ohif.org is
+  # deployed from the release branch which is more stable and less frequently updated.
  DEPLOY_MASTER:
    jobs:
      - BUILD:
          filters:
            branches:
              only: master
-      # - HOLD_FOR_APPROVAL:
-      #     type: approval
-      #     requires:
-      #       - BUILD
      - NPM_PUBLISH:
          requires:
-            # - HOLD_FOR_APPROVAL
            - BUILD
      - DOCKER_BETA_PUBLISH:
          requires:
            - NPM_PUBLISH
-      - DOCKER_BETA_PUBLISH_ARM:
-          requires:
-            - DOCKER_BETA_PUBLISH
-      - DOCKER_BETA_MULTIARCH_MANIFEST:
-          requires:
-            - DOCKER_BETA_PUBLISH_ARM

-  # viewer.ohif.org
+  # Our release branch deploys to viewer.ohif.org and is more stable and less
+  # frequently updated after being tested in the staging environment.
  DEPLOY_RELEASE:
    jobs:
      - BUILD:
          filters:
            branches:
-              only: /^release\/.*/
-      - HOLD_FOR_APPROVAL:
-          type: approval
-          requires:
-            - BUILD
+              only: release
      - NPM_PUBLISH:
          requires:
-            - HOLD_FOR_APPROVAL
+            - BUILD
      - DOCKER_RELEASE_PUBLISH:
          requires:
            - NPM_PUBLISH
-      - DOCKER_RELEASE_PUBLISH_ARM:
-          requires:
-            - DOCKER_RELEASE_PUBLISH
-      - DOCKER_MULTIARCH_MANIFEST:
-          requires:
-            - DOCKER_RELEASE_PUBLISH_ARM
+  ###
+  # Unit and E2E tests have already run for PR_CHECKS
+  # Re-running should not gain us any confidence here
+  ###
+  # RELEASE:
+  #   jobs:
+  #     - NPM_PUBLISH:
+  #         filters:
+  #           branches:
+  #             only: master
+  #     - DOCS_PUBLISH:
+  #         filters:
+  #           branches:
+  #             only: master
+  #     # Update base branch snapshots
+  #     # and record a Cypress dashboard test run
+  #     - cypress/run:
+  #         name: 'Generate Percy Snapshots'
+  #         executor: cypress/browsers-chrome76
+  #         browser: chrome
+  #         pre-steps:
+  #           - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+  #               add wait-on' # Use yarn latest
+  #         yarn: true
+  #         store_artifacts: false
+  #         working_directory: platform/app
+  #         build:
+  #           npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js yarn run
+  #           build
+  #         # start server --> verify running --> percy + chrome + cypress
+  #         command: yarn run test:e2e:dist
+  #         cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+  #         no-workspace: true # Don't persist workspace
+  #         post-steps:
+  #           - store_artifacts:
+  #               path: platform/app/cypress/screenshots
+  #           - store_artifacts:
+  #               path: platform/app/cypress/videos
+  #           - store_test_results:
+  #               path: platform/app/cypress/results
+  #         filters:
+  #           branches:
+  #             only: master
+  #     - DOCKER_MASTER_PUBLISH:
+  #         requires:
+  #           - NPM_PUBLISH
@@ -0,0 +1,25 @@
+# ABOUT:
+# https://docs.codecov.io/docs/codecov-yaml
+#
+#
+# COMMIT STATUS:
+# https://docs.codecov.io/docs/commit-status
+coverage:
+  status:
+    project:
+      default:
+        threshold: 0.5%
+      core:
+        flags: core
+        threshold: 0.5%
+      viewer:
+        flags: viewer
+        threshold: 0.5%
+    patch: off
+flags:
+  core:
+    paths:
+      - platform/core
+  viewer:
+    paths:
+      - platform/app
@@ -1,6 +0,0 @@
-[codespell]
-skip = .git,*.pdf,*.svg,yarn.lock,*.min.js,locales
-# ignore words ending with … and some camelcased variables and names
-ignore-regex = \b\S+…\S*|\b(doubleClick|afterAll|PostgresSQL)\b|\bWee, L\.|.*te.*Telugu.*
-# some odd variables
-ignore-words-list = datea,ser,childrens
@@ -0,0 +1,48 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
+http {
+
+    upstream orthanc-server {
+        server orthanc:8042;
+    }
+
+    server {
+        listen [::]:80 default_server;
+        listen 80;
+
+        # CORS Magic
+        add_header 'Access-Control-Allow-Origin' '*';
+        add_header 'Access-Control-Allow_Credentials' 'true';
+        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
+        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
+
+        location / {
+
+            if ($request_method = 'OPTIONS') {
+                add_header 'Access-Control-Allow-Origin' '*';
+                add_header 'Access-Control-Allow_Credentials' 'true';
+                add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
+                add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
+                add_header 'Access-Control-Max-Age' 1728000;
+                add_header 'Content-Type' 'text/plain charset=UTF-8';
+                add_header 'Content-Length' 0;
+                return 204;
+            }
+
+            proxy_pass         http://orthanc:8042;
+            proxy_redirect     off;
+            proxy_set_header   Host $host;
+            proxy_set_header   X-Real-IP $remote_addr;
+            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header   X-Forwarded-Host $server_name;
+
+            # CORS Magic
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow_Credentials' 'true';
+            add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
+            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
+        }
+    }
+}
@@ -0,0 +1,23 @@
+version: '3.5'
+
+services:
+  orthanc:
+    image: jodogne/orthanc-plugins:1.11.0
+    hostname: orthanc
+    volumes:
+      # Config
+      - ./config/orthanc.json:/etc/orthanc/orthanc.json:ro
+      # Persist data
+      - ./volumes/orthanc-db/:/var/lib/orthanc/db/
+    ports:
+      - '4242:4242' # DICOM
+      - '8042:8042' # Web
+    restart: unless-stopped
+  nginx:
+    image: nginx:latest
+    volumes:
+      - ./config/nginx.conf:/etc/nginx/nginx.conf
+    ports:
+      - '80:80' #ngnix proxy
+    depends_on:
+      - orthanc
@@ -0,0 +1,2 @@
+*
+!.gitignore
@@ -1,13 +1,11 @@
 server {
-  gzip_static  always;
-  gzip_proxied expired no-cache no-store private auth;
-  gunzip       on;
-  listen ${PORT} default_server;
-  listen [::]:${PORT} default_server;
+  listen ${PORT};
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
-    try_files $uri $uri/ ${PUBLIC_URL}index.html;
+    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;
@@ -1,20 +0,0 @@
-server {
-  listen ${SSL_PORT} ssl http2 default_server;
-  listen [::]:${SSL_PORT} ssl http2 default_server;
-  ssl_certificate /etc/ssl/certs/ssl-certificate.crt;
-  ssl_certificate_key /etc/ssl/private/ssl-private-key.key;
-  location / {
-    root   /usr/share/nginx/html;
-    index  index.html index.htm;
-    try_files $uri $uri/ /index.html;
-    add_header Cross-Origin-Resource-Policy same-origin;
-    proxy_set_header Host $host;
-    proxy_set_header X-Real-IP $remote_addr;
-    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
-  }
-  error_page   500 502 503 504  /50x.html;
-  location = /50x.html {
-    root   /usr/share/nginx/html;
-  }
-}
@@ -1,34 +1,6 @@
 #!/bin/sh

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

 if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
  then
@@ -58,6 +30,6 @@ if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
 	  cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
 fi

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

 exec "$@"
@@ -1,4 +0,0 @@
-find platform/app/dist -name "*.js" -exec gzip -9 "{}" \; -exec touch "{}" \;
-find platform/app/dist -name "*.map" -exec gzip -9 "{}" \; -exec touch "{}" \;
-find platform/app/dist -name "*.css" -exec gzip -9 "{}" \; -exec touch "{}" \;
-find platform/app/dist -name "*.svg" -exec gzip -9 "{}" \; -exec touch "{}" \;
@@ -1,18 +1,12 @@
 # Reduces size of context and hides
 # files from Docker (can't COPY or ADD these)

-# Note that typically the Docker context for various OHIF containers is the
-# directory of this file (i.e. the root of the source). As such, this is
-# the .dockerignore file for ALL Docker containers that are built. For example,
-# the Docker containers built from the recipes in ./platform/app/.recipes will
-# have this file as their .dockerignore.
-
 # Output
-**/dist/
-**/build/
+dist/
+build/

 # Dependencies
-**/node_modules/
+node_modules/

 # Root
 README.md
@@ -33,5 +27,4 @@ dockerfile
 .scripts/
 .vscode/
 coverage/
-platform/docs/
-testdata/
+docs/
@@ -0,0 +1 @@
+PERCY_TOKEN=<your token here>
@@ -1,5 +1,10 @@
 {
-  "plugins": ["@typescript-eslint", "import", "eslint-plugin-tsdoc", "prettier"],
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "eslint-plugin-tsdoc",
+    "prettier"
+  ],
  "extends": [
    "react-app",
    "eslint:recommended",
@@ -16,11 +21,6 @@
      "version": "detect"
    }
  },
-  "rules": {
-    // Enforce consistent brace style for all control statements for readability
-    "curly": "error",
-    "import/no-anonymous-default-export": "off"
-  },
  "globals": {
    "cy": true,
    "before": true,
@@ -1,19 +0,0 @@
-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'
@@ -39,7 +39,8 @@ body:
    attributes:
      label: The current behavior
      description:
-        'A clear and concise description of what happens instead of the expected behavior.'
+        'A clear and concise description of what happens instead of the expected
+        behavior.'
    validations:
      required: true

@@ -47,39 +48,39 @@ body:
    id: expected_behavior
    attributes:
      label: The expected behavior
-      description: 'A clear and concise description of what you expected to happen.'
+      description:
+        'A clear and concise description of what you expected to happen.'
    validations:
      required: true

-  - type: textarea
-    id: system_info
+  - type: input
+    id: os
    attributes:
-      label: 'System Information'
-      description: 'Please run the following command in your terminal and paste the output:'
-      placeholder: |
-        Run: npx envinfo --system --binaries --browsers
-        
-        Then paste the output here. It should look something like:
-        
-        System:
-          OS: Windows 10 10.0.19042
-          CPU: (8) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
-          Memory: 15.89 GB / 31.74 GB
-          Shell: 1.0.0 - C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe
-        Binaries:
-          Node: 20.18.1 - C:\Program Files\nodejs\node.EXE
-          Yarn: 1.22.22 - C:\Users\user\AppData\Roaming\npm\yarn.CMD
-          npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
-        Browsers:
-          Chrome: 83.0.4103.116
-          Edge: Spartan (44.19041.1266.0), Chromium (83.0.478.58)
-          Firefox: 77.0.1
+      label: 'OS'
+      description: 'Your operating system.'
+      placeholder: 'e.g., Windows 10, macOS 10.15.4'
+    validations:
+      required: true
+  - type: input
+    id: node-version
+    attributes:
+      label: 'Node version'
+      description: 'Your Node.js version.'
+      placeholder: 'e.g., 16.14.0'
+    validations:
+      required: true
+  - type: input
+    id: browser
+    attributes:
+      label: 'Browser'
+      description: 'Your browser.'
+      placeholder: 'e.g., Chrome 83.0.4103.116, Firefox 77.0.1, Safari 13.1.1'
    validations:
      required: true

  - type: markdown
    attributes:
      value: >
-        > :warning: Reports we cannot reproduce are at risk of being marked stale and > closed. The
-        more information you can provide, the more likely we are to look > into and address your
-        issue.
+        > :warning: Reports we cannot reproduce are at risk of being marked
+        stale and > closed. The more information you can provide, the more
+        likely we are to look > into and address your issue.
@@ -20,15 +20,17 @@ body:
    attributes:
      label: 'What feature or change would you like to see made?'
      description:
-        'Please include as much detail as possible including possibly mock up screen shots, workflow
-        or logic flow diagrams etc.'
+        'Please include as much detail as possible including possibly mock up
+        screen shots, workflow or logic flow diagrams etc.'
      placeholder: '...'
    validations:
      required: true
  - type: textarea
    attributes:
      label: 'Why should we prioritize this feature?'
-      description: 'Discuss if and how the requested feature interacts with existing features.'
+      description:
+        'Discuss if and how the requested feature interacts with existing
+        features.'
      placeholder: '...'
    validations:
      required: true
@@ -83,7 +83,7 @@ after the commits are squashed.
 #### Tested Environment

 - [] OS: <!--[e.g. Windows 10, macOS 10.15.4]-->
- [] Node version: <!--[e.g. 18.16.1]-->
+- [] Node version: <!--[e.g. 16.14.0]-->
 - [] Browser:
  <!--[e.g. Chrome 83.0.4103.116, Firefox 77.0.1, Safari 13.1.1]-->

@@ -19,7 +19,8 @@ exemptLabels:
 staleLabel: 'Stale :baguette_bread:'
 # Comment to post when marking an issue as stale. Set to `false` to disable
 markComment: >
-  This issue has been automatically marked as stale because it has not had recent activity. It will
-  be closed if no further activity occurs. Thank you for your contributions.
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: false
@@ -1,110 +0,0 @@
-name: Build and Deploy Docs
-
-on:
-  push:
-    branches: [master]
-
-env:
-  ACTIONS_STEP_DEBUG: true
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build-and-deploy-docs:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    # Need permissions to read actions and pull requests
-    permissions:
-      actions: read
-      contents: read
-      pull-requests: read
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 1.2.23
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20 # Or your desired Node version
-
-      - name: Install root dependencies
-        run: bun install --frozen-lockfile
-
-      # Removed Playwright tests and coverage generation steps
-
-      - name: Find PR and associated workflow run
-        id: find_pr_run
-        env:
-          GH_TOKEN: ${{ github.token }}
-          MERGE_COMMIT_SHA: ${{ github.sha }}
-        run: |
-          # Find the PR associated with the merge commit SHA
-          # Note: This relies on the merge commit being directly pushed to main
-          PR_DATA=$(gh pr list --state merged --search "$MERGE_COMMIT_SHA" --json number,headRefOid --jq '.[0]')
-          if [ -z "$PR_DATA" ]; then
-            echo "Could not find merged PR for commit $MERGE_COMMIT_SHA."
-            # Decide how to handle - fail, or maybe generate coverage now?
-            # For now, let's fail.
-            exit 1
-          fi
-          PR_HEAD_SHA=$(echo "$PR_DATA" | jq -r '.headRefOid')
-          PR_NUMBER=$(echo "$PR_DATA" | jq -r '.number')
-          echo "Found PR Number: $PR_NUMBER"
-          echo "Found PR Head SHA: $PR_HEAD_SHA"
-
-          # Find the latest workflow run ID for the playwright workflow on the PR head commit
-          # Uses the workflow file name 'playwright.yml'
-          # Remove the --status success flag to find any run
-          RUN_ID=$(gh run list --workflow playwright.yml --commit "$PR_HEAD_SHA" --event pull_request --json databaseId --jq '.[0].databaseId')
-
-          if [ -z "$RUN_ID" ]; then
-            echo "Could not find any 'playwright.yml' run for PR $PR_NUMBER (Head SHA: $PR_HEAD_SHA)."
-            # Decide how to handle - maybe try finding the artifact from the merge commit run if that exists?
-            # For now, let's fail.
-            exit 1
-          fi
-          echo "Found Run ID: $RUN_ID"
-          echo "run_id=$RUN_ID" >> $GITHUB_OUTPUT
-
-      - name: Download coverage artifact from PR run
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          mkdir -p ./coverage-artifact
-          gh run download ${{ steps.find_pr_run.outputs.run_id }} -n coverage-report-pr --dir ./coverage-artifact
-          # Check if download was successful (e.g., check if files exist)
-          if [ ! -f ./coverage-artifact/base.css ]; then
-            echo "Failed to download or find expected files in artifact 'coverage-report-pr' from run ${{ steps.find_pr_run.outputs.run_id }}."
-            exit 1
-          fi
-          echo "Artifact downloaded successfully."
-
-      - name: Install docs dependencies
-        run: cd platform/docs && bun install
-
-      - name: Copy coverage to docs static directory
-        run: |
-          # Copy files from the downloaded artifact directory
-          mkdir -p platform/docs/static/coverage
-          cp -r ./coverage-artifact/* platform/docs/static/coverage/
-          # Copy specific asset files from the downloaded artifact root to static root
-          cp ./coverage-artifact/base.css platform/docs/static/
-          cp ./coverage-artifact/block-navigation.js platform/docs/static/
-          cp ./coverage-artifact/prettify.css platform/docs/static/
-          cp ./coverage-artifact/prettify.js platform/docs/static/
-          cp ./coverage-artifact/favicon.png platform/docs/static/
-          cp ./coverage-artifact/sort-arrow-sprite.png platform/docs/static/
-          cp ./coverage-artifact/sorter.js platform/docs/static/
-
-      - name: Build docs
-        run: cd platform/docs && bun run build
-
-      - name: Deploy to Netlify
-        run: |
-          cd platform/docs
-          npx netlify-cli deploy --dir=./build --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
@@ -1,98 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL Advanced"
-
-on:
-  pull_request:
-    branches: [ "main" ]
-  schedule:
-    - cron: '15 1 * * 5'
-
-jobs:
-  analyze:
-    name: Analyze (${{ matrix.language }})
-    # Runner size impacts CodeQL analysis time. To learn more, please see:
-    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
-    #   - https://gh.io/supported-runners-and-hardware-resources
-    #   - https://gh.io/using-larger-runners (GitHub.com only)
-    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      # required for all workflows
-      security-events: write
-
-      # required to fetch internal or private CodeQL packs
-      packages: read
-
-      # only required for workflows in private repositories
-      actions: read
-      contents: read
-
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-        - language: actions
-          build-mode: none
-        - language: javascript-typescript
-          build-mode: none
-        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
-        # Use `c-cpp` to analyze code written in C, C++ or both
-        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
-        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
-        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
-        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
-        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
-        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-
-    # Add any setup steps before running the `github/codeql-action/init` action.
-    # This includes steps like installing compilers or runtimes (`actions/setup-node`
-    # or others). This is typically only required for manual builds.
-    # - name: Setup runtime (example)
-    #   uses: actions/setup-example@v1
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"
@@ -1,56 +0,0 @@
-name: Playwright Tests
-on:
-  pull_request:
-    branches: [master, release/*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  playwright-tests:
-    timeout-minutes: 60
-    runs-on: self-hosted
-    strategy:
-      fail-fast: false
-      matrix:
-        node-version: [20]
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 1.2.23
-      - uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        run: bun install --frozen-lockfile
-      - name: Install Playwright browsers
-        run: npx playwright install
-      - name: Run Playwright tests
-        run: |
-          export NODE_OPTIONS="--max_old_space_size=10192"
-          bun run test:e2e:coverage
-      - name: Create directory of test results
-        if: ${{ !cancelled() }}
-        run: |
-          mkdir -p packaged-test-results
-          cp -r ./tests/test-results packaged-test-results/ || true
-          cp ./tests/playwright-report.json packaged-test-results/ || true
-      - name: Upload directory of test results artifact
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-results
-          path: packaged-test-results/
-          retention-days: 5
-      - name: create the coverage report
-        run: |
-          bun nyc report --reporter=lcov --reporter=text
-      - name: Upload the coverage report to GitHub Actions Artifacts
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: coverage-report-pr
-          path: coverage
-          retention-days: 3
@@ -1,7 +1,6 @@
 # Packages
 node_modules
-.cursor/
-.nyc_output/
+
 # Output
 build
 dist
@@ -11,9 +10,6 @@ junit.xml
 coverage/
 .docz/
 .yarn/
-.nx/
-addOns/yarn.lock
-playwright-report/

 # YALC (for Erik)
 .yalc
@@ -28,7 +24,6 @@ yarn-error.log
 .DS_Store
 .env
 *.code-workspace
-.directory

 # Common Example Data Directories
 sampledata/
@@ -37,7 +32,7 @@ docker/dcm4che/dcm4che-arc

 # Cypress test results
 videos/
-
+screenshots/

 # Locize settings
 .locize
@@ -45,21 +40,5 @@ videos/
 # autogenerated files
 platform/app/src/pluginImports.js
 /Viewers.iml
-platform/app/.recipes/Nginx-Dcm4Chee/logs/*
+platform/app/.recipes/Nginx-Dcm4Che/dcm4che/dcm4che-arc/*
 platform/app/.recipes/OpenResty-Orthanc/logs/*
-.vercel
-
-.vs
-
-# PlayWright
-
-node_modules/
-tests/test-results/
-tests/playwright-report/
-/blob-report/
-/playwright/.cache/
-
-**/.claude/settings.local.json
-
-# Backup files
-*~
@@ -1,4 +1,3 @@
 [submodule "testdata"]
 	path = testdata
 	url = https://github.com/OHIF/viewer-testdata-dicomweb.git
-	branch = main
@@ -10,6 +10,6 @@
    "deploy": "netlify deploy --prod --dir ./../platform/app/dist"
  },
  "devDependencies": {
-    "netlify-cli": "2.21.0"
+    "netlify-cli": "^2.21.0"
  }
 }
@@ -1,21 +1,23 @@
 <html>
-  <head>
-    <title>OHIF Viewer: Deploy Preview</title>
-  </head>

-  <body>
-    <h1>Index of Previews</h1>
+<head>
+  <title>OHIF Viewer: Deploy Preview</title>
+</head>
+
+<body>
+  <h1>Index of Previews</h1>
+
+  <ul>
+    <li>
+      <a href="/pwa">OHIF Viewer</a>
+    </li>
+    <li>
+      <a href="/docs">Documentation</a>
+    </li>
+    <li>
+      <a href="/ui">UI: Component Library</a>
+    </li>
+  </ul>
+</body>

-    <ul>
-      <li>
-        <a href="/pwa">OHIF Viewer</a>
-      </li>
-      <li>
-        <a href="/docs">Documentation</a>
-      </li>
-      <li>
-        <a href="/ui">UI: Component Library</a>
-      </li>
-    </ul>
-  </body>
 </html>
@@ -1 +1 @@
-20.9.0
+16.14.0
@@ -1,24 +0,0 @@
-{
-  "extends": "@istanbuljs/nyc-config-typescript",
-  "instrument": true,
-  "sourceMap": true,
-  "cache": false,
-  "all": true,
-  "include": [
-    "platform/*/src/**/*.ts",
-    "platform/*/src/**/*.js",
-    "extensions/*/src/**/*.ts",
-    "extensions/*/src/**/*.js",
-    "modes/*/src/**/*.ts",
-    "modes/*/src/**/*.js"
-  ],
-  "exclude": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/test/**",
-    "**/tests/**",
-    "**/examples/**",
-    "**/stories/**",
-    "platform/docs/**"
-  ]
-}
@@ -1,12 +1,9 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"],
  "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 80,
  "proseWrap": "always",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
-  "arrowParens": "avoid",
-  "singleAttributePerLine": true,
-  "endOfLine": "auto"
+  "arrowParens": "avoid"
 }
@@ -1,273 +0,0 @@
-/*
- * This script uses nodejs to generate a JSON file from a DICOM study folder.
- * You need to have dcmjs installed in your project.
- * The JSON file can be used to load the study into the OHIF Viewer. You can get more detail
- * in the DICOM JSON Data source on docs.ohif.org
- *
- * Usage: node dicom-json-generator.js <studyFolder> <urlPrefix> <outputJSONPath> <optional scheme>
- *
- * params:
- * - studyFolder: path to the study folder which contains the DICOM files
- * - urlPrefix: prefix to the url that will be used to load the study into the viewer. For instance
- *   we use https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data as the urlPrefix for the
- *   example since the data is hosted on S3 and each study is in a folder. So the url in the generated
- *   json file for the first instance of the first series of the first study will be
- *   dicomweb:https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data/Series1/Instance1
- *
- *   as you see the dicomweb is a prefix that is used to load the data into the viewer, which is suited when
- *   the .dcm file is hosted statically and can be accessed via a URL (like our example above)
- *   However, you can specify a new scheme bellow.
- *
- * - outputJSONPath: path to the output JSON file
- * - scheme: default dicomweb if not provided
- */
-const dcmjs = require('dcmjs');
-const path = require('path');
-const fs = require('fs').promises;
-
-const args = process.argv.slice(2);
-const [studyDirectory, urlPrefix, outputPath, scheme = 'dicomweb'] = args;
-
-if (args.length < 3 || args.length > 4) {
-  console.error(
-    'Usage: node dicom-json-generator.js <studyFolder> <urlPrefix> <outputJSONPath> [scheme]'
-  );
-  process.exit(1);
-}
-
-const model = {
-  studies: [],
-};
-
-async function convertDICOMToJSON(studyDirectory, urlPrefix, outputPath, scheme) {
-  try {
-    const files = await recursiveReadDir(studyDirectory);
-    console.debug('Processing...');
-
-    for (const file of files) {
-      if (!file.includes('.DS_Store') && !file.includes('.xml')) {
-        const arrayBuffer = await fs.readFile(file);
-        const dicomDict = dcmjs.data.DicomMessage.readFile(arrayBuffer.buffer);
-        const instance = dcmjs.data.DicomMetaDictionary.naturalizeDataset(dicomDict.dict);
-
-        instance.fileLocation = createImageId(file, urlPrefix, studyDirectory, scheme);
-        processInstance(instance);
-      }
-    }
-
-    console.log('Successfully loaded data');
-
-    model.studies.forEach(study => {
-      study.NumInstances = findInstancesNumber(study);
-      study.Modalities = findModalities(study).join('/');
-    });
-
-    await fs.writeFile(outputPath, JSON.stringify(model, null, 2));
-    console.log('JSON saved');
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-async function recursiveReadDir(dir) {
-  let results = [];
-  const list = await fs.readdir(dir);
-  for (const file of list) {
-    const filePath = path.resolve(dir, file);
-    const stat = await fs.stat(filePath);
-    if (stat.isDirectory()) {
-      const res = await recursiveReadDir(filePath);
-      results = results.concat(res);
-    } else {
-      results.push(filePath);
-    }
-  }
-  return results;
-}
-
-function createImageId(fileLocation, urlPrefix, studyDirectory, scheme) {
-  const relativePath = path.relative(studyDirectory, fileLocation);
-  const normalizedPath = path.normalize(relativePath).replace(/\\/g, '/');
-  return `${scheme}:${urlPrefix}${normalizedPath}`;
-}
-
-function processInstance(instance) {
-  const { StudyInstanceUID, SeriesInstanceUID } = instance;
-  let study = getStudy(StudyInstanceUID);
-
-  if (!study) {
-    study = createStudyMetadata(StudyInstanceUID, instance);
-    model.studies.push(study);
-  }
-
-  let series = getSeries(StudyInstanceUID, SeriesInstanceUID);
-
-  if (!series) {
-    series = createSeriesMetadata(instance);
-    study.series.push(series);
-  }
-
-  const instanceMetaData =
-    instance.NumberOfFrames > 1
-      ? createInstanceMetaDataMultiFrame(instance)
-      : createInstanceMetaData(instance);
-
-  series.instances.push(...[].concat(instanceMetaData));
-}
-
-function getStudy(StudyInstanceUID) {
-  return model.studies.find(study => study.StudyInstanceUID === StudyInstanceUID);
-}
-
-function getSeries(StudyInstanceUID, SeriesInstanceUID) {
-  const study = getStudy(StudyInstanceUID);
-  return study
-    ? study.series.find(series => series.SeriesInstanceUID === SeriesInstanceUID)
-    : undefined;
-}
-
-const findInstancesNumber = study => {
-  let numInstances = 0;
-  study.series.forEach(aSeries => {
-    numInstances = numInstances + aSeries.instances.length;
-  });
-  return numInstances;
-};
-
-const findModalities = study => {
-  let modalities = new Set();
-  study.series.forEach(aSeries => {
-    modalities.add(aSeries.Modality);
-  });
-  return Array.from(modalities);
-};
-
-function createStudyMetadata(StudyInstanceUID, instance) {
-  return {
-    StudyInstanceUID,
-    StudyDescription: instance.StudyDescription,
-    StudyDate: instance.StudyDate,
-    StudyTime: instance.StudyTime,
-    PatientName: instance.PatientName,
-    PatientID: instance.PatientID || '1234', // this is critical to have
-    AccessionNumber: instance.AccessionNumber,
-    PatientAge: instance.PatientAge,
-    PatientSex: instance.PatientSex,
-    PatientWeight: instance.PatientWeight,
-    series: [],
-  };
-}
-function createSeriesMetadata(instance) {
-  return {
-    SeriesInstanceUID: instance.SeriesInstanceUID,
-    SeriesDescription: instance.SeriesDescription,
-    SeriesNumber: instance.SeriesNumber,
-    SeriesTime: instance.SeriesTime,
-    Modality: instance.Modality,
-    SliceThickness: instance.SliceThickness,
-    instances: [],
-  };
-}
-function commonMetaData(instance) {
-  return {
-    Columns: instance.Columns,
-    Rows: instance.Rows,
-    InstanceNumber: instance.InstanceNumber,
-    SOPClassUID: instance.SOPClassUID,
-    AcquisitionNumber: instance.AcquisitionNumber,
-    PhotometricInterpretation: instance.PhotometricInterpretation,
-    BitsAllocated: instance.BitsAllocated,
-    BitsStored: instance.BitsStored,
-    PixelRepresentation: instance.PixelRepresentation,
-    SamplesPerPixel: instance.SamplesPerPixel,
-    PixelSpacing: instance.PixelSpacing,
-    HighBit: instance.HighBit,
-    ImageOrientationPatient: instance.ImageOrientationPatient,
-    ImagePositionPatient: instance.ImagePositionPatient,
-    FrameOfReferenceUID: instance.FrameOfReferenceUID,
-    ImageType: instance.ImageType,
-    Modality: instance.Modality,
-    SOPInstanceUID: instance.SOPInstanceUID,
-    SeriesInstanceUID: instance.SeriesInstanceUID,
-    StudyInstanceUID: instance.StudyInstanceUID,
-    WindowCenter: instance.WindowCenter,
-    WindowWidth: instance.WindowWidth,
-    RescaleIntercept: instance.RescaleIntercept,
-    RescaleSlope: instance.RescaleSlope,
-  };
-}
-
-function conditionalMetaData(instance) {
-  return {
-    ...(instance.ConceptNameCodeSequence && {
-      ConceptNameCodeSequence: instance.ConceptNameCodeSequence,
-    }),
-    ...(instance.SeriesDate && { SeriesDate: instance.SeriesDate }),
-    ...(instance.ReferencedSeriesSequence && {
-      ReferencedSeriesSequence: instance.ReferencedSeriesSequence,
-    }),
-    ...(instance.SharedFunctionalGroupsSequence && {
-      SharedFunctionalGroupsSequence: instance.SharedFunctionalGroupsSequence,
-    }),
-    ...(instance.PerFrameFunctionalGroupsSequence && {
-      PerFrameFunctionalGroupsSequence: instance.PerFrameFunctionalGroupsSequence,
-    }),
-    ...(instance.ContentSequence && { ContentSequence: instance.ContentSequence }),
-    ...(instance.ContentTemplateSequence && {
-      ContentTemplateSequence: instance.ContentTemplateSequence,
-    }),
-    ...(instance.CurrentRequestedProcedureEvidenceSequence && {
-      CurrentRequestedProcedureEvidenceSequence: instance.CurrentRequestedProcedureEvidenceSequence,
-    }),
-    ...(instance.CodingSchemeIdentificationSequence && {
-      CodingSchemeIdentificationSequence: instance.CodingSchemeIdentificationSequence,
-    }),
-    ...(instance.RadiopharmaceuticalInformationSequence && {
-      RadiopharmaceuticalInformationSequence: instance.RadiopharmaceuticalInformationSequence,
-    }),
-    ...(instance.ROIContourSequence && {
-      ROIContourSequence: instance.ROIContourSequence,
-    }),
-    ...(instance.StructureSetROISequence && {
-      StructureSetROISequence: instance.StructureSetROISequence,
-    }),
-    ...(instance.ReferencedFrameOfReferenceSequence && {
-      ReferencedFrameOfReferenceSequence: instance.ReferencedFrameOfReferenceSequence,
-    }),
-    ...(instance.CorrectedImage && { CorrectedImage: instance.CorrectedImage }),
-    ...(instance.Units && { Units: instance.Units }),
-    ...(instance.DecayCorrection && { DecayCorrection: instance.DecayCorrection }),
-    ...(instance.AcquisitionDate && { AcquisitionDate: instance.AcquisitionDate }),
-    ...(instance.AcquisitionTime && { AcquisitionTime: instance.AcquisitionTime }),
-    ...(instance.PatientWeight && { PatientWeight: instance.PatientWeight }),
-    ...(instance.NumberOfFrames && { NumberOfFrames: instance.NumberOfFrames }),
-    ...(instance.FrameTime && { FrameTime: instance.FrameTime }),
-    ...(instance.EncapsulatedDocument && { EncapsulatedDocument: instance.EncapsulatedDocument }),
-    ...(instance.SequenceOfUltrasoundRegions && {
-      SequenceOfUltrasoundRegions: instance.SequenceOfUltrasoundRegions,
-    }),
-  };
-}
-
-function createInstanceMetaData(instance) {
-  const metadata = {
-    ...commonMetaData(instance),
-    ...conditionalMetaData(instance),
-  };
-  return { metadata, url: instance.fileLocation };
-}
-
-function createInstanceMetaDataMultiFrame(instance) {
-  const instances = [];
-  const commonData = commonMetaData(instance);
-  const conditionalData = conditionalMetaData(instance);
-
-  for (let i = 1; i <= instance.NumberOfFrames; i++) {
-    const metadata = { ...commonData, ...conditionalData };
-    const result = { metadata, url: instance.fileLocation + `?frame=${i}` };
-    instances.push(result);
-  }
-  return instances;
-}
-
-convertDICOMToJSON(studyDirectory, urlPrefix, outputPath, scheme);
@@ -1,7 +1,6 @@
 {
  "recommendations": [
    "esbenp.prettier-vscode",
-    "streetsidesoftware.code-spell-checker",
    "dbaeumer.vscode-eslint",
    "mikestead.dotenv",
    "bungcip.better-toml",
@@ -1,5 +1,4 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.rulers": [80, 120],
  // ===
  // Spacing
@@ -15,103 +14,23 @@
  // Event Triggers
  // ===
  "editor.formatOnSave": true,
+  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
+  "eslint.validate": [
+    {
+      "language": "javascript",
+      "autoFix": true
+    },
+    {
+      "language": "javascriptreact",
+      "autoFix": true
+    }
+  ],
  "jest.autoRun": "off",
  "prettier.disableLanguages": ["html"],
  "prettier.endOfLine": "lf",
  "workbench.colorCustomizations": {},
  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "cSpell.userWords": [
-    "aabb",
-    "architectured",
-    "attrname",
-    "Barksy",
-    "browserslist",
-    "bulkdata",
-    "Cacheable",
-    "cfun",
-    "clonedeep",
-    "Colormap",
-    "Colormaps",
-    "Comlink",
-    "cornerstonejs",
-    "Crosshairs",
-    "datasource",
-    "dcmjs",
-    "decache",
-    "decached",
-    "decaching",
-    "deepmerge",
-    "Dicom",
-    "dicomweb",
-    "DISPLAYSETS",
-    "glwindow",
-    "grababble",
-    "grabbable",
-    "Hounsfield",
-    "Interactable",
-    "Interactor",
-    "istyle",
-    "kitware",
-    "labelmap",
-    "labelmaps",
-    "livewire",
-    "Mergeable",
-    "multiframe",
-    "nifti",
-    "ofun",
-    "OHIF",
-    "polylines",
-    "POLYSEG",
-    "prapogation",
-    "precisionmetrics",
-    "prefetch",
-    "Prescaled",
-    "pydicom",
-    "Radiopharmaceutical",
-    "rasterizing",
-    "reconstructable",
-    "Rehydratable",
-    "renderable",
-    "resampler",
-    "resemblejs",
-    "reslice",
-    "resliced",
-    "Reslices",
-    "roadmap",
-    "ROADMAPS",
-    "rtstruct",
-    "Segmentations",
-    "semibold",
-    "sitk",
-    "SUBRESOLUTION",
-    "suvbsa",
-    "suvbw",
-    "suvlbm",
-    "textbox",
-    "thresholded",
-    "thresholding",
-    "timepoint",
-    "timepoints",
-    "TMTV",
-    "TOOLGROUP",
-    "tqdm",
-    "transferables",
-    "typedoc",
-    "unsubscriptions",
-    "uuidv",
-    "viewplane",
-    "viewports",
-    "Voxel",
-    "Voxels",
-    "Vtkjs",
-    "wado",
-    "wadors",
-    "wadouri",
-    "workerpool",
-    "Colorbar",
-    "Colorbars"
-  ]
+    "source.fixAll.eslint": true
+  }
 }
@@ -5,11 +5,11 @@ function excludeNodeModulesExcept(modules) {
  if (pathSep == '\\')
    // must be quoted for use in a regexp:
    pathSep = '\\\\';
-  var moduleRegExps = modules.map(function (modName) {
+  var moduleRegExps = modules.map(function(modName) {
    return new RegExp('node_modules' + pathSep + modName);
  });

-  return function (modulePath) {
+  return function(modulePath) {
    if (/node_modules/.test(modulePath)) {
      for (var i = 0; i < moduleRegExps.length; i++)
        if (moduleRegExps[i].test(modulePath)) return false;
@@ -1,7 +1,9 @@
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const tailwindcss = require('tailwindcss');
-const tailwindConfigPath = path.resolve('../../platform/app/tailwind.config.js');
+const tailwindConfigPath = path.resolve(
+  '../../platform/app/tailwind.config.js'
+);
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const devMode = process.env.NODE_ENV !== 'production';

@@ -1,10 +0,0 @@
-const stylusToJavaScript = {
-  test: /\.styl$/,
-  use: [
-    { loader: 'style-loader' }, // 3. Style nodes from JS Strings
-    { loader: 'css-loader' }, // 2. CSS to CommonJS
-    { loader: 'stylus-loader' }, // 1. Stylus to CSS
-  ],
-};
-
-module.exports = stylusToJavaScript;
@@ -33,11 +33,7 @@ function transpileJavaScript(mode) {
      rootMode: 'upward',
      envName: mode,
      cacheCompression: false,
-      // Note: This was causing a lot of issues with yarn link of the cornerstone
-      // only set this to true if you don't have a yarn link to external libs
-      // otherwise expect the lib changes not to be reflected in the dev server
-      // as it will be cached
-      cacheDirectory: false,
+      cacheDirectory: true,
    },
  };
 }
@@ -7,58 +7,39 @@ const fs = require('fs');
 const webpack = require('webpack');

 // ~~ PLUGINS
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 const TerserJSPlugin = require('terser-webpack-plugin');

 // ~~ PackageJSON
 // const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core
 //   .rules;
 // ~~ RULES
-// const loadShadersRule = require('./rules/loadShaders.js');
+const loadShadersRule = require('./rules/loadShaders.js');
 const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
-// Only uncomment for old v2 stylus
-// const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
 const QUICK_BUILD = process.env.QUICK_BUILD;
 const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';
-const IS_COVERAGE = process.env.COVERAGE === 'true';

 // read from ../version.txt
-const VERSION_NUMBER = fs.readFileSync(path.join(__dirname, '../version.txt'), 'utf8') || '';
+const VERSION_NUMBER =
+  fs.readFileSync(path.join(__dirname, '../version.txt'), 'utf8') || '';

-const COMMIT_HASH = fs.readFileSync(path.join(__dirname, '../commit.txt'), 'utf8') || '';
+const COMMIT_HASH =
+  fs.readFileSync(path.join(__dirname, '../commit.txt'), 'utf8') || '';

 //
 dotenv.config();

-const defineValues = {
-  /* Application */
-  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-  'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG),
-  'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
-  'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
-  'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM),
-  'process.env.VERSION_NUMBER': JSON.stringify(VERSION_NUMBER),
-  'process.env.COMMIT_HASH': JSON.stringify(COMMIT_HASH),
-  /* i18n */
-  'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''),
-  '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
-if (!process.env.APP_CONFIG) {
-  defineValues['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';
@@ -92,72 +73,21 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      children: false,
      warnings: true,
    },
+    devServer: {
+      open: true,
+      port: 3000,
+      historyApiFallback: true,
+      headers: {
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+        'Cross-Origin-Opener-Policy': 'same-origin',
+      },
+    },
    cache: {
      type: 'filesystem',
    },
    module: {
-      noParse: [/(dicomicc)/],
+      noParse: [/(codec)/, /(dicomicc)/],
      rules: [
-        ...(isProdBuild
-          ? []
-          : [
-              ...(IS_COVERAGE
-                ? [
-                    {
-                      test: /\.[jt]sx?$/,
-                      exclude: /node_modules/,
-                      use: {
-                        loader: 'babel-loader',
-                        options: {
-                          presets: ['@babel/preset-typescript', '@babel/preset-react'],
-                          plugins: ['istanbul'],
-                        },
-                      },
-                    },
-                  ]
-                : [
-                    {
-                      test: /\.[jt]sx?$/,
-                      exclude: /node_modules/,
-                      loader: 'babel-loader',
-                      options: {
-                        plugins: isProdBuild ? [] : ['react-refresh/babel'],
-                      },
-                    },
-                  ]),
-            ]),
-        {
-          test: /\.svg?$/,
-          oneOf: [
-            {
-              use: [
-                {
-                  loader: '@svgr/webpack',
-                  options: {
-                    svgoConfig: {
-                      plugins: [
-                        {
-                          name: 'preset-default',
-                          params: {
-                            overrides: {
-                              removeViewBox: false,
-                            },
-                          },
-                        },
-                      ],
-                    },
-                    prettier: false,
-                    svgo: true,
-                    titleProp: true,
-                  },
-                },
-              ],
-              issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-              },
-            },
-          ],
-        },
        transpileJavaScriptRule(mode),
        loadWebWorkersRule,
        // loadShadersRule,
@@ -168,28 +98,10 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
          },
        },
        cssToJavaScript,
-        // Note: Only uncomment the following if you are using the old style of stylus in v2
-        // Also you need to uncomment this platform/app/.webpack/rules/extractStyleChunks.js
-        // stylusToJavaScript,
        {
          test: /\.wasm/,
          type: 'asset/resource',
        },
-        {
-          test: /\.(png|jpe?g|gif|svg)$/i,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: 'assets/images/[name].[ext]',
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(woff|woff2|eot|ttf|otf)$/i,
-          type: 'asset/resource',
-        },
      ], //.concat(vtkRules),
    },
    resolve: {
@@ -197,10 +109,17 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      alias: {
        // Viewer project
        '@': path.resolve(__dirname, '../platform/app/src'),
-        '@components': path.resolve(__dirname, '../platform/app/src/components'),
+        '@components': path.resolve(
+          __dirname,
+          '../platform/app/src/components'
+        ),
        '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
        '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
        '@state': path.resolve(__dirname, '../platform/app/src/state'),
+        'dicom-microscopy-viewer':
+          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
+        '@cornerstonejs/dicom-image-loader':
+          '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
      },
      // Which directories to search when resolving modules
      modules: [
@@ -216,19 +135,30 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '*'],
      // symlinked resources are resolved to their real path, not their symlinked location
      symlinks: true,
-      fallback: {
-        fs: false,
-        path: false,
-        zlib: false,
-        buffer: require.resolve('buffer'),
-      },
+      fallback: { fs: false, path: false, zlib: false },
    },
    plugins: [
-      new webpack.DefinePlugin(defineValues),
-      new webpack.ProvidePlugin({
-        Buffer: ['buffer', 'Buffer'],
+      new webpack.DefinePlugin({
+        /* Application */
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
+        'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''),
+        'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
+        'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM),
+        'process.env.VERSION_NUMBER': JSON.stringify(VERSION_NUMBER),
+        'process.env.COMMIT_HASH': JSON.stringify(COMMIT_HASH),
+        /* i18n */
+        'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''),
+        '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 || ''
+        ),
      }),
-      ...(isProdBuild ? [] : [new ReactRefreshWebpackPlugin({ overlay: false })]),
      // Uncomment to generate bundle analyzer
      // new BundleAnalyzerPlugin(),
    ],
@@ -10,7 +10,6 @@ Please find below the list of datasets used on the demo page, along with their r


 ## Platforms
-
 ### NIH NCI IDC

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

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


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

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

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

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

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

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

 # Stage 3: Bundle the built application into a Docker container
 # which runs Nginx using Alpine Linux
-FROM nginxinc/nginx-unprivileged:1.27-alpine as final
+FROM nginxinc/nginx-unprivileged:1.23.1-alpine as final
 #RUN apk add --no-cache bash
-ARG PUBLIC_URL=/
-ENV PUBLIC_URL=${PUBLIC_URL}
-ARG PORT=80
-ENV PORT=${PORT}
+ENV PORT=80
 RUN rm /etc/nginx/conf.d/default.conf
 USER nginx
 COPY --chown=nginx:nginx .docker/Viewer-v3.x /usr/src
 RUN chmod 777 /usr/src/entrypoint.sh
-COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html${PUBLIC_URL}
-# Copy 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 chown -R nginx:nginx /usr/share/nginx/html && chmod -R 777 /usr/share/nginx/html
-USER nginx
+COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
@@ -1,8 +1,9 @@
 <!-- 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
-provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF)</a>. It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support <a href="https://www.dicomstandard.org/using/dicomweb/">DICOMweb</a>.</p>
+provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF)</a>. It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support <a href="https://www.dicomstandard.org/dicomweb/">DICOMweb</a>.</p>
 </div>


@@ -16,19 +17,16 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
 <div align="center">
  📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
 </div>
-<div align="center">
-  📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
-</div>



 <hr />

 [![NPM version][npm-version-image]][npm-url]
+[![NPM downloads][npm-downloads-image]][npm-url]
+[![Pulls][docker-pulls-img]][docker-image-url]
 [![MIT License][license-image]][license-url]
 [![This project is using Percy.io for visual regression testing.][percy-image]](percy-url)
-<!-- [![NPM downloads][npm-downloads-image]][npm-url] -->
-<!-- [![Pulls][docker-pulls-img]][docker-image-url] -->
 <!-- [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_shield) -->

 <!-- [![Netlify Status][netlify-image]][netlify-url] -->
@@ -37,22 +35,9 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
 <!-- [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors) -->
 <!-- prettier-ignore-end -->

-
-|     |  | |
-| :-: | :---  | :--- |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-measurements.webp?raw=true" alt="Measurement tracking" width="350"/> | Measurement Tracking | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-segmentation.webp?raw=true" alt="Segmentations" width="350"/> | Labelmap Segmentations  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-ptct.webp?raw=true" alt="Hanging Protocols" width="350"/> | Fusion and Custom Hanging protocols  | [Demo](https://viewer.ohif.org/tmtv?StudyInstanceUIDs=1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-volume-rendering.webp?raw=true" alt="Volume Rendering" width="350"/> | Volume Rendering  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&hangingprotocolId=mprAnd3DVolumeViewport) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-pdf.webp?raw=true" alt="PDF" width="350"/> | PDF  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=2.25.317377619501274872606137091638706705333) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-rtstruct.webp?raw=true" alt="RTSTRUCT" width="350"/> | RT STRUCT  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.5962.99.1.2968617883.1314880426.1493322302363.3.0) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-4d.webp?raw=true" alt="4D" width="350"/> | 4D  | [Demo](https://viewer.ohif.org/dynamic-volume?StudyInstanceUIDs=2.25.232704420736447710317909004159492840763) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/demo-video.webp?raw=true" alt="VIDEO" width="350"/> | Video  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=2.25.96975534054447904995905761963464388233) |
-| <img src="https://github.com/OHIF/Viewers/blob/master/platform/docs/docs/assets/img/microscopy.webp?raw=true" alt="microscopy" width="350"/> | Slide Microscopy  | [Demo](https://viewer.ohif.org/microscopy?StudyInstanceUIDs=2.25.141277760791347900862109212450152067508) |
-
 ## About

-The OHIF Viewer can retrieve
+The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve
 and load images from most sources and formats; render sets in 2D, 3D, and
 reconstructed representations; allows for the manipulation, annotation, and
 serialization of observations; supports internationalization, OpenID Connect,
@@ -76,7 +61,7 @@ contributions of individuals, research groups, and commercial organizations.
 After more than 8-years of integrating with many companies and organizations,
 The OHIF Viewer has been rebuilt from the ground up to better address the
 varying workflow and configuration needs of its many users. All of the Viewer's
-core features are built using its own extension system. The same extensibility
+core features are built using it's own extension system. The same extensibility
 that allows us to offer:

 - 2D and 3D medical image viewing
@@ -95,47 +80,25 @@ forking).

 ### Support

+We offer support through
+[GitHub Issues](https://github.com/OHIF/Viewers/issues/new/choose). You can:
+
 - [Report a Bug 🐛](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Report+%3Abug%3A%2CAwaiting+Reproduction&projects=&template=bug-report.yml&title=%5BBug%5D+)
 - [Request a Feature 🚀](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Request+%3Ahand%3A&projects=&template=feature-request.yml&title=%5BFeature+Request%5D+)
 - [Ask a Question 🤗](community.ohif.org)
 - [Slack Channel](https://join.slack.com/t/cornerstonejs/shared_invite/zt-1r8xb2zau-dOxlD6jit3TN0Uwf928w9Q)

 For commercial support, academic collaborations, and answers to common
-questions; please use [Get Support](https://ohif.org/get-support/) to contact
-us.
+questions; please read our
+[documented FAQ](https://docs.ohif.org/faq/index.html#does-ohif-offer-commercial-support).


 ## Developing

-### Branches
-
-#### `master` branch - The latest dev (beta) release
-
- `master` - The latest dev release
-
-This is typically where the latest development happens. Code that is in the master branch has passed code reviews and automated tests, but it may not be deemed ready for production. This branch usually contains the most recent changes and features being worked on by the development team. It's often the starting point for creating feature branches (where new features are developed) and hotfix branches (for urgent fixes).
-
-Each package is tagged with beta version numbers, and published to npm such as `@ohif/ui@3.6.0-beta.1`
-
-### `release/*` branches - The latest stable releases
-Once the `master` branch code reaches a stable, release-ready state, we conduct a comprehensive code review and QA testing. Upon approval, we create a new release branch from `master`. These branches represent the latest stable version considered ready for production.
-
-For example, `release/3.5` is the branch for version 3.5.0, and `release/3.6` is for version 3.6.0. After each release, we wait a few days to ensure no critical bugs. If any are found, we fix them in the release branch and create a new release with a minor version bump, e.g., 3.5.1 in the `release/3.5` branch.
-
-Each package is tagged with version numbers and published to npm, such as `@ohif/ui@3.5.0`. Note that `master` is always ahead of the `release` branch. We publish docker builds for both beta and stable releases.
-
-Here is a schematic representation of our development workflow:
-
-![alt text](platform/docs/docs/assets/img/github-readme-branches-Jun2024.png)
-
-
-
-
-
 ### Requirements

- [Yarn 1.20.0+](https://yarnpkg.com/en/docs/install)
- [Node 18+](https://nodejs.org/en/)
+- [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install)
+- [Node 16+](https://nodejs.org/en/)
 - Yarn Workspaces should be enabled on your machine:
  - `yarn config set workspaces-experimental true`

@@ -165,18 +128,17 @@ yarn install

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

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

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

 ## Project
@@ -224,6 +186,15 @@ you'll see the following:
 └── README.md                # This file
 ```

+Want to better understand why and how we've structured this repository? Read
+more about it in our [Architecture Documentation][ohif-architecture].
+
+
+
+| Name                                                 | Description                                           | Links                  |
+| ---------------------------------------------------- | ----------------------------------------------------- | ---------------------- |
+| [@ohif/extension-cornerstone][extension-cornerstone] | 2D image viewing, annotation, and segementation tools | [NPM][cornerstone-npm] |
+
 ## Acknowledgments

 To acknowledge the OHIF Viewer in an academic publication, please cite
@@ -252,7 +223,7 @@ or, for v1, please cite:
 > [10.1158/0008-5472.CAN-17-0334](https://www.doi.org/10.1158/0008-5472.CAN-17-0334)

 **Note:** If you use or find this repository helpful, please take the time to
-star this repository on GitHub. This is an easy way for us to assess adoption
+star this repository on Github. This is an easy way for us to assess adoption
 and it can help us obtain future funding for the project.

 This work is supported primarily by the National Institutes of Health, National
@@ -260,11 +231,7 @@ Cancer Institute, Informatics Technology for Cancer Research (ITCR) program,
 under a
 [grant to Dr. Gordon Harris at Massachusetts General Hospital (U24 CA199460)](https://projectreporter.nih.gov/project_info_description.cfm?aid=8971104).

-[NCI Imaging Data Commons (IDC) project](https://imaging.datacommons.cancer.gov/) supported the development of new features and bug fixes marked with ["IDC:priority"](https://github.com/OHIF/Viewers/issues?q=is%3Aissue+is%3Aopen+label%3AIDC%3Apriority),
-["IDC:candidate"](https://github.com/OHIF/Viewers/issues?q=is%3Aissue+is%3Aopen+label%3AIDC%3Acandidate) or ["IDC:collaboration"](https://github.com/OHIF/Viewers/issues?q=is%3Aissue+is%3Aopen+label%3AIDC%3Acollaboration). NCI Imaging Data Commons is supported by contract number 19X037Q from
-Leidos Biomedical Research under Task Order HHSN26100071 from NCI. [IDC Viewer](https://learn.canceridc.dev/portal/visualization) is a customized version of the OHIF Viewer.
-
-This project is tested with BrowserStack. Thank you for supporting open-source!
+This project is tested with BrowserStack. Thank you for supporting open source

 ## License

@@ -294,7 +261,7 @@ MIT © [OHIF](https://github.com/OHIF)
 [npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/app.svg?style=flat-square
 [npm-version-image]: https://img.shields.io/npm/v/@ohif/app.svg?style=flat-square
 [docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square
-[docker-image-url]: https://hub.docker.com/r/ohif/app
+[docker-image-url]: https://hub.docker.com/r/ohif/viewer
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
 [percy-image]: https://percy.io/static/images/percy-badge.svg
@@ -333,4 +300,4 @@ MIT © [OHIF](https://github.com/OHIF)
 [vtk-npm]: https://www.npmjs.com/package/@ohif/extension-vtk
 <!-- prettier-ignore-end -->

-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large&issueType=license)
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_large)
@@ -1,3 +0,0 @@
-# External Dependencies
-
-This module contains optional dependencies and external dependencies for including in OHIF, such as the DICOM Microscopy Viewer component.  
@@ -1,95 +0,0 @@
-{
-  "name": "@externals/devDependencies",
-  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.12.0-beta.72",
-  "license": "MIT",
-  "private": true,
-  "engines": {
-    "node": ">=12",
-    "yarn": ">=1.19.1"
-  },
-  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@kitware/vtk.js": "32.12.0",
-    "clsx": "2.1.1",
-    "core-js": "3.45.1",
-    "moment": "2.30.1"
-  },
-  "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "devDependencies": {
-    "@babel/eslint-parser": "7.28.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
-    "@rsbuild/core": "1.5.1",
-    "@rsbuild/plugin-node-polyfill": "1.4.2",
-    "@rsbuild/plugin-react": "1.4.0",
-    "@svgr/webpack": "8.1.0",
-    "@swc/helpers": "0.5.17",
-    "@types/jest": "27.5.2",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
-    "autoprefixer": "10.4.21",
-    "babel-loader": "8.4.1",
-    "babel-plugin-module-resolver": "5.0.2",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "9.1.0",
-    "cross-env": "7.0.3",
-    "css-loader": "6.11.0",
-    "dotenv": "8.6.0",
-    "eslint": "8.57.1",
-    "eslint-config-prettier": "7.2.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-cypress": "2.15.2",
-    "eslint-plugin-flowtype": "7.0.0",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.5.1",
-    "eslint-plugin-promise": "5.2.0",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-tsdoc": "0.2.17",
-    "eslint-webpack-plugin": "2.7.0",
-    "execa": "8.0.1",
-    "extract-css-chunks-webpack-plugin": "4.10.0",
-    "html-webpack-plugin": "5.6.3",
-    "husky": "3.1.0",
-    "jest": "29.7.0",
-    "jest-canvas-mock": "2.5.2",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-junit": "6.4.0",
-    "lerna": "7.4.2",
-    "lint-staged": "9.5.0",
-    "mini-css-extract-plugin": "2.9.2",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
-    "postcss": "8.5.6",
-    "postcss-import": "14.1.0",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "7.8.3",
-    "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "0.6.9",
-    "react-refresh": "0.14.2",
-    "semver": "7.7.2",
-    "serve": "14.2.4",
-    "shader-loader": "1.3.1",
-    "shx": "0.3.4",
-    "source-map-loader": "4.0.2",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "5.3.14",
-    "typescript": "5.5.4",
-    "unused-webpack-plugin": "2.4.0",
-    "webpack": "5.95.0",
-    "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.2",
-    "webpack-hot-middleware": "2.26.1",
-    "webpack-merge": "5.10.0",
-    "workbox-webpack-plugin": "6.6.1",
-    "worker-loader": "3.0.8"
-  },
-  "scripts": {
-    "build": "Included as direct dependency"
-  }
-}
@@ -1,9 +0,0 @@
-{
-  "name": "@externals/dicom-microscopy-viewer",
-  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.12.0-beta.72",
-  "license": "MIT",
-  "dependencies": {
-    "dicom-microscopy-viewer": "0.48.6"
-  }
-}
@@ -1,50 +0,0 @@
-{
-  "name": "ohif-monorepo-root",
-  "private": true,
-  "packageManager": "yarn@1.22.22",
-  "workspaces": {
-    "packages": [
-      "../platform/i18n",
-      "../platform/core",
-      "../platform/ui",
-      "../platform/ui-next",
-      "../platform/app",
-      "../extensions/*",
-      "../modes/*",
-      "../addOns/externals/*"
-    ],
-    "nohoist": [
-      "**/html-minifier-terser"
-    ]
-  },
-  "scripts": {
-    "preinstall": "cd .. && node preinstall.js"
-  },
-  "devDependencies": {
-    "@babel/core": "7.28.0",
-    "@babel/plugin-transform-class-properties": "7.27.1",
-    "@babel/plugin-transform-object-rest-spread": "7.28.0",
-    "@babel/plugin-transform-private-methods": "7.27.1",
-    "@babel/plugin-transform-private-property-in-object": "7.27.1",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-arrow-functions": "7.27.1",
-    "@babel/plugin-transform-regenerator": "7.28.1",
-    "@babel/plugin-transform-runtime": "7.28.0",
-    "@babel/plugin-transform-typescript": "7.28.0",
-    "@babel/preset-env": "7.28.0",
-    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.27.1"
-  },
-  "resolutions": {
-    "**/@babel/runtime": "7.28.2",
-    "commander": "8.3.0",
-    "dcmjs": "0.43.1",
-    "dicomweb-client": ">=0.10.4",
-    "nth-check": "2.1.1",
-    "trim-newlines": "5.0.0",
-    "glob-parent": "6.0.2",
-    "trim": "1.0.1",
-    "package-json": "8.1.1",
-    "typescript": "5.5.4"
-  }
-}
@@ -1,13 +1,31 @@
 // 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'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
  plugins: [
-    ['@babel/plugin-transform-class-properties', { loose: true }],
+    [
+      'inline-react-svg',
+      {
+        svgo: {
+          plugins: extendDefaultPlugins([
+            {
+              name: 'removeViewBox',
+              active: false,
+            },
+          ]),
+        },
+      },
+    ],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-transform-typescript',
-    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
-    ['@babel/plugin-transform-private-methods', { loose: true }],
-    '@babel/plugin-transform-class-static-block',
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
  ],
  env: {
    test: {
@@ -18,24 +36,17 @@ module.exports = {
          {
            modules: 'commonjs',
            debug: false,
-            targets: { node: 'current' },
-            bugfixes: true,
          },
        ],
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
      plugins: [
-        'babel-plugin-istanbul',
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
-        '@babel/transform-destructuring',
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-typescript',
-        '@babel/plugin-transform-class-static-block',
-        '@babel/plugin-transform-for-of',
-        ['babel-plugin-transform-import-meta', { module: 'ES6' }],
      ],
    },
    production: {
@@ -54,6 +65,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
+      plugins: ['react-hot-loader/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1 +1 @@
-e07a87dcae7c92d9a0a60b23d5d30eca434d7662
+16afa740b60b31037100444ef9311b80ffea2f67
@@ -1,118 +0,0 @@
-diff --git a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
-index 6c1e4f8f6..56dac15b5 100644
--- a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
-+++ b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
-@@ -156,65 +156,65 @@ function ViewportOrientationMenu({
-       >
-         <Button
-           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
-+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
-           onClick={() => handleOrientationChange('axial')}
-         >
-          <span className="mr-0 flex w-4 items-center justify-center">
-+          <div className="mr-1 flex w-6 items-center justify-start">
-             {currentOrientation === 'axial' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
-+              <Icons.Checked className="text-primary h-6 w-6" />
-             ) : null}
-          </span>
-          <span className="flex-1 text-left">Axial</span>
-+          </div>
-+          <div className="flex-1 text-left">Axial</div>
-         </Button>
-         <Button
-           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
-+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
-           onClick={() => handleOrientationChange('sagittal')}
-         >
-          <span className="mr-0 flex w-4 items-center justify-center">
-+          <div className="mr-1 flex w-6 items-center justify-start">
-             {currentOrientation === 'sagittal' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
-+              <Icons.Checked className="text-primary h-6 w-6" />
-             ) : null}
-          </span>
-          <span className="flex-1 text-left">Sagittal</span>
-+          </div>
-+          <div className="flex-1 text-left">Sagittal</div>
-         </Button>
-         <Button
-           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
-+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
-           onClick={() => handleOrientationChange('coronal')}
-         >
-          <span className="mr-0 flex w-4 items-center justify-center">
-+          <div className="mr-1 flex w-6 items-center justify-start">
-             {currentOrientation === 'coronal' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
-+              <Icons.Checked className="text-primary h-6 w-6" />
-             ) : null}
-          </span>
-          <span className="flex-1 text-left">Coronal</span>
-+          </div>
-+          <div className="flex-1 text-left">Coronal</div>
-         </Button>
-         <Button
-           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
-+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
-           onClick={() => handleOrientationChange('acquisition')}
-         >
-          <span className="mr-0 flex w-4 items-center justify-center">
-+          <div className="mr-1 flex w-6 items-center justify-start">
-             {currentOrientation === 'acquisition' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
-+              <Icons.Checked className="text-primary h-6 w-6" />
-             ) : null}
-          </span>
-          <span className="flex-1 text-left">Acquisition</span>
-+          </div>
-+          <div className="flex-1 text-left">Acquisition</div>
-         </Button>
-         {/* Divider */}
-        <div className="my-2 border-t border-white/20" />
-+        <div className="mx-1 my-2 border-t border-white/20" />
-         <Button
-           variant="ghost"
-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
-+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
-           onClick={() => handleOrientationChange('reformat')}
-         >
-          <span className="mr-0 flex w-4 items-center justify-center">
-+          <div className="mr-1 flex w-6 items-center justify-start">
-             {currentOrientation === 'reformat' ? (
-              <Icons.Checked className="text-primary h-5 w-5" />
-+              <Icons.Checked className="text-primary h-6 w-6" />
-             ) : null}
-          </span>
-          <span className="flex-1 text-left">Reformat</span>
-+          </div>
-+          <div className="flex-1 text-left">Reformat</div>
-         </Button>
-       </PopoverContent>
-     </Popover>
-diff --git a/platform/ui-next/src/components/Icons/Sources/Checked.tsx b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
-index 83c8fc57e..c88b75e0d 100644
--- a/platform/ui-next/src/components/Icons/Sources/Checked.tsx
-+++ b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
-@@ -4,14 +4,14 @@ import type { IconProps } from '../types';
- export const Checked = (props: IconProps) => (
-   <svg
-     {...props}
-    width="24"
-+    width="20"
-     height="24"
-    viewBox="0 0 24 24"
-+    viewBox="0 0 20 24"
-     fill="none"
-     xmlns="http://www.w3.org/2000/svg"
-   >
-     <path
-      d="M16 9L11.3333 15L8 12.4737"
-+      d="M14 9L9.3333 15L6 12.4737"
-       stroke="currentColor"
-       strokeWidth="1.5"
-       strokeLinecap="round"
@@ -0,0 +1,138 @@
+import ImageSet from '@ohif/core/src/classes/ImageSet';
+import { IWebApiDataSource } from '@ohif/core';
+
+/**
+ *
+ */
+export default {
+  id: '@ohif/extension-*',
+
+  /**
+   * LIFECYCLE HOOKS
+   */
+  preRegistration() {},
+  beforeExtInit() {},
+  beforeExtDestroy() {},
+
+  /**
+   * MODULES
+   */
+  getCommandsModule,
+  getContextModule,
+  getDataSourcesModule,
+  getLayoutTemplateModule,
+  getPanelModule,
+  getSopClassHandlerModule,
+  getToolbarModule() {},
+  getViewportModule,
+};
+
+// appConfig,
+// extensionConfig,
+// dataSources,
+// servicesManager,
+// extensionManager,
+// commandsManager,
+
+/**
+ *
+ */
+const getCommandsModule = () => ({
+  definitions: {
+    exampleActionDef: {
+      commandFn: ({ param1 }) => {
+        console.log(`param1's value is: ${param1}`);
+      },
+      // storeContexts: ['viewports'],
+      options: { param1: 'hello world' },
+      context: 'VIEWER', // optional
+    },
+  },
+  defaultContext: 'ACTIVE_VIEWPORT::DICOMSR',
+});
+
+const ExampleContext = React.createContext();
+
+function ExampleContextProvider({ children }) {
+  return (
+    <ExampleContext.Provider value={{ example: 'value' }}>
+      {children}
+    </ExampleContext.Provider>
+  );
+}
+
+const getContextModule = () => [
+  {
+    name: 'ExampleContext',
+    context: ExampleContext,
+    provider: ExampleContextProvider,
+  },
+];
+
+const getDataSourcesModule = () => [
+  {
+    name: 'exampleDataSource',
+    type: 'webApi', // 'webApi' | 'local' | 'other'
+    createDataSource: dataSourceConfig => {
+      return IWebApiDataSource.create(/* */);
+    },
+  },
+];
+
+const getLayoutTemplateModule = (/* ... */) => [
+  {
+    id: 'exampleLayout',
+    name: 'exampleLayout',
+    component: ExampleLayoutComponent,
+  },
+];
+
+const getPanelModule = () => {
+  return [
+    {
+      name: 'exampleSidePanel',
+      iconName: 'info-circle-o',
+      iconLabel: 'Example',
+      label: 'Hello World',
+      isDisabled: studies => {}, // optional
+      component: ExamplePanelContentComponent,
+    },
+  ];
+};
+
+const getSopClassHandlerModule = (/* ... */) => {
+  const BASIC_TEXT_SR = '1.2.840.10008.5.1.4.1.1.88.11';
+
+  return [
+    {
+      name: 'ExampleSopClassHandle',
+      sopClassUids: [BASIC_TEXT_SR],
+      getDisplaySetsFromSeries: instances => {
+        const imageSet = new ImageSet(instances);
+
+        imageSet.setAttributes(/** */);
+        imageSet.sortBy((a, b) => 0);
+
+        return imageSet;
+      },
+    },
+  ];
+};
+
+const getToolbarModule = () => {};
+
+// displaySet, viewportIndex, dataSource
+const getViewportModule = () => {
+  const wrappedViewport = props => {
+    return (
+      <ExampleViewport
+        {...props}
+        onEvent={data => {
+          commandsManager.runCommand('commandName', data);
+        }}
+      />
+    );
+  };
+
+  return [{ name: 'example', component: wrappedViewport }];
+};
@@ -1,12 +0,0 @@
-const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.base.js');
-const SRC_DIR = path.join(__dirname, '../src');
-const DIST_DIR = path.join(__dirname, '../dist');
-
-const ENTRY = {
-  app: `${SRC_DIR}/index.tsx`,
-};
-
-module.exports = (env, argv) => {
-  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
-};
@@ -1,54 +0,0 @@
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
-const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.base.js');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const pkg = require('./../package.json');
-
-const ROOT_DIR = path.join(__dirname, '../');
-const SRC_DIR = path.join(__dirname, '../src');
-const DIST_DIR = path.join(__dirname, '../dist');
-const ENTRY = {
-  app: `${SRC_DIR}/index.tsx`,
-};
-
-const outputName = `ohif-${pkg.name.split('/').pop()}`;
-
-module.exports = (env, argv) => {
-  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
-
-  return merge(commonConfig, {
-    stats: {
-      colors: true,
-      hash: true,
-      timings: true,
-      assets: true,
-      chunks: false,
-      chunkModules: false,
-      modules: false,
-      children: false,
-      warnings: true,
-    },
-    optimization: {
-      minimize: true,
-      sideEffects: true,
-    },
-    output: {
-      path: ROOT_DIR,
-      library: 'ohif-extension-cornerstone-dicom-pmap',
-      libraryTarget: 'umd',
-      filename: pkg.main,
-    },
-    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
-    plugins: [
-      new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
-      new MiniCssExtractPlugin({
-        filename: `./dist/${outputName}.css`,
-        chunkFilename: `./dist/${outputName}.css`,
-      }),
-    ],
-  });
-};
@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Open Health Imaging Foundation
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,12 +0,0 @@
-# dicom-pmap
-## Description
-
-DICOM PMAP read workflow. This extension will allow you to load a DICOM Parametric
-Map image and display it on OHIF.
-
-## Author
-
-OHIF
-
-## License
-MIT
@@ -1,44 +0,0 @@
-module.exports = {
-  plugins: ['@babel/plugin-transform-class-properties'],
-  env: {
-    test: {
-      presets: [
-        [
-          // TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
-          '@babel/preset-env',
-          {
-            modules: 'commonjs',
-            debug: false,
-          },
-          '@babel/preset-typescript',
-        ],
-        '@babel/preset-react',
-      ],
-      plugins: [
-        '@babel/plugin-transform-object-rest-spread',
-        '@babel/plugin-syntax-dynamic-import',
-        '@babel/plugin-transform-regenerator',
-        '@babel/plugin-transform-runtime',
-      ],
-    },
-    production: {
-      presets: [
-        // WebPack handles ES6 --> Target Syntax
-        ['@babel/preset-env', { modules: false }],
-        '@babel/preset-react',
-        '@babel/preset-typescript',
-      ],
-      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
-    },
-    development: {
-      presets: [
-        // WebPack handles ES6 --> Target Syntax
-        ['@babel/preset-env', { modules: false }],
-        '@babel/preset-react',
-        '@babel/preset-typescript',
-      ],
-      plugins: ['react-hot-loader/babel'],
-      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
-    },
-  },
-};
@@ -1,54 +0,0 @@
-{
-  "name": "@ohif/extension-cornerstone-dicom-pmap",
-  "version": "3.12.0-beta.72",
-  "description": "DICOM Parametric Map read workflow",
-  "author": "OHIF",
-  "license": "MIT",
-  "main": "dist/ohif-extension-cornerstone-dicom-pmap.umd.js",
-  "module": "src/index.tsx",
-  "files": [
-    "dist/**",
-    "public/**",
-    "README.md"
-  ],
-  "repository": "OHIF/Viewers",
-  "keywords": [
-    "ohif-extension"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=14",
-    "npm": ">=6",
-    "yarn": ">=1.18.0"
-  },
-  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
-    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
-    "dev:dicom-pmap": "yarn run dev",
-    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
-    "build:package-1": "yarn run build",
-    "start": "yarn run dev"
-  },
-  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.72",
-    "@ohif/extension-cornerstone": "3.12.0-beta.72",
-    "@ohif/extension-default": "3.12.0-beta.72",
-    "@ohif/i18n": "3.12.0-beta.72",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1"
-  },
-  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.5.19",
-    "@cornerstonejs/core": "4.5.19",
-    "@kitware/vtk.js": "32.12.0",
-    "react-color": "2.19.3"
-  }
-}
@@ -1,245 +0,0 @@
-import { utils, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
-import { metaData, cache, utilities as csUtils, volumeLoader } from '@cornerstonejs/core';
-import { adaptersPMAP } from '@cornerstonejs/adapters';
-import { SOPClassHandlerId } from './id';
-import { dicomLoaderService, VOLUME_LOADER_SCHEME } from '@ohif/extension-cornerstone';
-const sopClassUids = ['1.2.840.10008.5.1.4.1.1.30'];
-
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager
-) {
-  const instance = instances[0];
-
-  const {
-    StudyInstanceUID,
-    SeriesInstanceUID,
-    SOPInstanceUID,
-    SeriesDescription,
-    SeriesNumber,
-    SeriesDate,
-    SOPClassUID,
-    wadoRoot,
-    wadoUri,
-    wadoUriRoot,
-  } = instance;
-
-  const displaySet = {
-    // Parametric map use to have the same modality as its referenced volume but
-    // "PMAP" is used in the viewer even though this is not a valid DICOM modality
-    Modality: 'PMAP',
-    isReconstructable: true, // by default for now
-    displaySetInstanceUID: `pmap.${utils.guid()}`,
-    SeriesDescription,
-    SeriesNumber,
-    SeriesDate,
-    SOPInstanceUID,
-    SeriesInstanceUID,
-    StudyInstanceUID,
-    SOPClassHandlerId,
-    SOPClassUID,
-    referencedImages: null,
-    referencedSeriesInstanceUID: null,
-    referencedDisplaySetInstanceUID: null,
-    referencedVolumeURI: null,
-    referencedVolumeId: null,
-    isDerivedDisplaySet: true,
-    loadStatus: {
-      loading: false,
-      loaded: false,
-    },
-    sopClassUids,
-    instance,
-    instances: [instance],
-    wadoRoot,
-    wadoUriRoot,
-    wadoUri,
-    supportsWindowLevel: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('PMAP')}`,
-  };
-
-  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
-
-  if (!referencedSeriesSequence) {
-    console.error('ReferencedSeriesSequence is missing for the parametric map');
-    return;
-  }
-
-  const referencedSeries = referencedSeriesSequence[0] || referencedSeriesSequence;
-
-  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
-  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
-
-  // Does not get the referenced displaySet during parametric displaySet creation
-  // because it is still not available (getDisplaySetByUID returns `undefined`).
-  displaySet.getReferenceDisplaySet = () => {
-    const { displaySetService } = servicesManager.services;
-
-    if (displaySet.referencedDisplaySetInstanceUID) {
-      return displaySetService.getDisplaySetByUID(displaySet.referencedDisplaySetInstanceUID);
-    }
-
-    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
-      displaySet.referencedSeriesInstanceUID
-    );
-
-    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
-      throw new Error('Referenced displaySet is missing for the parametric map');
-    }
-
-    const referencedDisplaySet = referencedDisplaySets[0];
-
-    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
-
-    return referencedDisplaySet;
-  };
-
-  // Does not get the referenced volumeId during parametric displaySet creation because the
-  // referenced displaySet is still not available  (getDisplaySetByUID returns `undefined`).
-  displaySet.getReferencedVolumeId = () => {
-    if (displaySet.referencedVolumeId) {
-      return displaySet.referencedVolumeId;
-    }
-
-    const referencedDisplaySet = displaySet.getReferenceDisplaySet();
-    const referencedVolumeURI = referencedDisplaySet.displaySetInstanceUID;
-    const referencedVolumeId = `${VOLUME_LOADER_SCHEME}:${referencedVolumeURI}`;
-
-    displaySet.referencedVolumeURI = referencedVolumeURI;
-    displaySet.referencedVolumeId = referencedVolumeId;
-
-    return referencedVolumeId;
-  };
-
-  displaySet.load = async ({ headers }) =>
-    await _load(displaySet, servicesManager, extensionManager, headers);
-
-  return [displaySet];
-}
-
-const getRangeFromPixelData = (pixelData: Float32Array) => {
-  let lowest = pixelData[0];
-  let highest = pixelData[0];
-
-  for (let i = 1; i < pixelData.length; i++) {
-    if (pixelData[i] < lowest) {
-      lowest = pixelData[i];
-    }
-    if (pixelData[i] > highest) {
-      highest = pixelData[i];
-    }
-  }
-
-  return [lowest, highest];
-};
-
-async function _load(
-  displaySet,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager,
-  headers
-) {
-  const volumeId = `${VOLUME_LOADER_SCHEME}:${displaySet.displaySetInstanceUID}`;
-  const volumeLoadObject = cache.getVolumeLoadObject(volumeId);
-
-  if (volumeLoadObject) {
-    return volumeLoadObject.promise;
-  }
-
-  displaySet.loading = true;
-  displaySet.isLoaded = false;
-
-  // We don't want to fire multiple loads, so we'll wait for the first to finish
-  // and also return the same promise to any other callers.
-  const promise = _loadParametricMap({
-    extensionManager,
-    displaySet,
-    headers,
-  });
-
-  cache.putVolumeLoadObject(volumeId, { promise }).catch(err => {
-    throw err;
-  });
-
-  promise
-    .then(() => {
-      displaySet.loading = false;
-      displaySet.isLoaded = true;
-      // Broadcast that loading is complete
-      servicesManager.services.segmentationService._broadcastEvent(
-        servicesManager.services.segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
-        {
-          pmapDisplaySet: displaySet,
-        }
-      );
-    })
-    .catch(err => {
-      displaySet.loading = false;
-      displaySet.isLoaded = false;
-      throw err;
-    });
-
-  return promise;
-}
-
-async function _loadParametricMap({ displaySet, headers }: withAppTypes) {
-  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(displaySet, null, headers);
-  const referencedVolumeId = displaySet.getReferencedVolumeId();
-  const cachedReferencedVolume = cache.getVolume(referencedVolumeId);
-
-  // Parametric map can be loaded only if its referenced volume exists otherwise it will fail
-  if (!cachedReferencedVolume) {
-    throw new Error(
-      'Referenced Volume is missing for the PMAP, and stack viewport PMAP is not supported yet'
-    );
-  }
-
-  const { imageIds } = cachedReferencedVolume;
-  const results = await adaptersPMAP.Cornerstone3D.ParametricMap.generateToolState(
-    imageIds,
-    arrayBuffer,
-    metaData
-  );
-  const { pixelData } = results;
-  const TypedArrayConstructor = pixelData.constructor;
-  const paramMapId = displaySet.displaySetInstanceUID;
-
-  const derivedVolume = await volumeLoader.createAndCacheDerivedVolume(referencedVolumeId, {
-    volumeId: paramMapId,
-    targetBuffer: {
-      type: TypedArrayConstructor.name,
-    },
-  });
-
-  const newPixelData = new TypedArrayConstructor(pixelData.length);
-  for (let i = 0; i < pixelData.length; i++) {
-    newPixelData[i] = pixelData[i] * 100;
-  }
-  derivedVolume.voxelManager.setCompleteScalarDataArray(newPixelData);
-  const range = getRangeFromPixelData(newPixelData);
-  const windowLevel = csUtils.windowLevel.toWindowLevel(range[0], range[1]);
-
-  derivedVolume.metadata.voiLut = [windowLevel];
-  derivedVolume.loadStatus = { loaded: true };
-
-  return derivedVolume;
-}
-
-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
-  const getDisplaySetsFromSeries = instances => {
-    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
-  };
-
-  return [
-    {
-      name: 'dicom-pmap',
-      sopClassUids,
-      getDisplaySetsFromSeries,
-    },
-  ];
-}
-
-export default getSopClassHandlerModule;
@@ -1,7 +0,0 @@
-import packageJson from '../package.json';
-
-const id = packageJson.name;
-const SOPClassHandlerName = 'dicom-pmap';
-const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
-
-export { id, SOPClassHandlerId, SOPClassHandlerName };
@@ -1,39 +0,0 @@
-import { id } from './id';
-import React from 'react';
-import getSopClassHandlerModule from './getSopClassHandlerModule';
-
-const Component = React.lazy(() => {
-  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstonePMAPViewport');
-});
-
-const OHIFCornerstonePMAPViewport = props => {
-  return (
-    <React.Suspense fallback={<div>Loading...</div>}>
-      <Component {...props} />
-    </React.Suspense>
-  );
-};
-
-/**
- * You can remove any of the following modules if you don't need them.
- */
-const extension = {
-  id,
-  getViewportModule({ servicesManager, extensionManager, commandsManager }) {
-    const ExtendedOHIFCornerstonePMAPViewport = props => {
-      return (
-        <OHIFCornerstonePMAPViewport
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
-          commandsManager={commandsManager}
-          {...props}
-        />
-      );
-    };
-
-    return [{ name: 'dicom-pmap', component: ExtendedOHIFCornerstonePMAPViewport }];
-  },
-  getSopClassHandlerModule,
-};
-
-export default extension;
@@ -1,202 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useViewportGrid } from '@ohif/ui-next';
-import { OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';
-
-function OHIFCornerstonePMAPViewport(props: withAppTypes) {
-  const { displaySets, children, viewportOptions, displaySetOptions, servicesManager } = props;
-  const viewportId = viewportOptions.viewportId;
-  const { displaySetService, segmentationService, uiNotificationService, customizationService } =
-    servicesManager.services;
-
-  // PMAP viewport will always have a single display set
-  if (displaySets.length !== 1) {
-    throw new Error('PMAP viewport must have a single display set');
-  }
-
-  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
-    'ui.loadingIndicatorTotalPercent'
-  );
-
-  const pmapDisplaySet = displaySets[0];
-  const [viewportGrid, viewportGridService] = useViewportGrid();
-  const referencedDisplaySetRef = useRef(null);
-  const { viewports, activeViewportId } = viewportGrid;
-  const referencedDisplaySet = pmapDisplaySet.getReferenceDisplaySet();
-  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
-    referencedDisplaySet,
-    pmapDisplaySet
-  );
-
-  referencedDisplaySetRef.current = {
-    displaySet: referencedDisplaySet,
-    metadata: referencedDisplaySetMetadata,
-  };
-
-  const [pmapIsLoading, setPmapIsLoading] = useState(!pmapDisplaySet.isLoaded);
-
-  // Add effect to listen for loading complete
-  useEffect(() => {
-    const { unsubscribe } = segmentationService.subscribe(
-      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
-      evt => {
-        if (evt.pmapDisplaySet?.displaySetInstanceUID === pmapDisplaySet.displaySetInstanceUID) {
-          setPmapIsLoading(false);
-        }
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [pmapDisplaySet]);
-
-  const getCornerstoneViewport = useCallback(() => {
-    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
-
-    displaySetOptions.unshift({});
-    const [pmapDisplaySetOptions] = displaySetOptions;
-
-    // Make sure `options` exists
-    pmapDisplaySetOptions.options = pmapDisplaySetOptions.options ?? {};
-
-    Object.assign(pmapDisplaySetOptions.options, {
-      colormap: {
-        name: 'rainbow_2',
-        opacity: [
-          { value: 0, opacity: 0 },
-          { value: 0.25, opacity: 0.25 },
-          { value: 0.5, opacity: 0.5 },
-          { value: 0.75, opacity: 0.75 },
-          { value: 0.9, opacity: 0.99 },
-        ],
-      },
-      voi: {
-        windowCenter: 50,
-        windowWidth: 100,
-      },
-    });
-
-    uiNotificationService.show({
-      title: 'Parametric Map',
-      type: 'warning',
-      message: 'The values are multiplied by 100 in the viewport for better visibility',
-    });
-
-    return (
-      <OHIFCornerstoneViewport
-        {...props}
-        // Referenced + PMAP displaySets must be passed as parameter in this order
-        displaySets={[referencedDisplaySet, pmapDisplaySet]}
-        viewportOptions={{
-          viewportType: 'volume',
-          orientation: viewportOptions.orientation,
-          viewportId: viewportOptions.viewportId,
-          presentationIds: viewportOptions.presentationIds,
-        }}
-        displaySetOptions={[{}, pmapDisplaySetOptions]}
-      />
-    );
-  }, [
-    displaySetOptions,
-    props,
-    pmapDisplaySet,
-    viewportOptions.orientation,
-    viewportOptions.viewportId,
-    viewportOptions.presentationIds,
-    uiNotificationService,
-  ]);
-
-  // Cleanup the PMAP viewport when the viewport is destroyed
-  useEffect(() => {
-    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
-      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
-      ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports.get(activeViewportId);
-        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
-          viewportGridService.setDisplaySetsForViewport({
-            viewportId: activeViewportId,
-            displaySetInstanceUIDs: [],
-          });
-        }
-      }
-    );
-
-    return () => {
-      onDisplaySetsRemovedSubscription.unsubscribe();
-    };
-  }, [activeViewportId, displaySetService, viewportGridService, viewports]);
-
-  let childrenWithProps = null;
-
-  if (children && children.length) {
-    childrenWithProps = children.map((child, index) => {
-      return (
-        child &&
-        React.cloneElement(child, {
-          viewportId,
-          key: index,
-        })
-      );
-    });
-  }
-
-  return (
-    <>
-      <div className="relative flex h-full w-full flex-row overflow-hidden">
-        {pmapIsLoading && (
-          <LoadingIndicatorTotalPercent
-            className="h-full w-full"
-            totalNumbers={null}
-            percentComplete={null}
-            loadingText="Loading Parametric Map..."
-          />
-        )}
-        {getCornerstoneViewport()}
-        {childrenWithProps}
-      </div>
-    </>
-  );
-}
-
-OHIFCornerstonePMAPViewport.propTypes = {
-  displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportId: PropTypes.string.isRequired,
-  dataSource: PropTypes.object,
-  children: PropTypes.node,
-};
-
-function _getReferencedDisplaySetMetadata(referencedDisplaySet, pmapDisplaySet) {
-  const { SharedFunctionalGroupsSequence } = pmapDisplaySet.instance;
-
-  const SharedFunctionalGroup = Array.isArray(SharedFunctionalGroupsSequence)
-    ? SharedFunctionalGroupsSequence[0]
-    : SharedFunctionalGroupsSequence;
-
-  const { PixelMeasuresSequence } = SharedFunctionalGroup;
-
-  const PixelMeasures = Array.isArray(PixelMeasuresSequence)
-    ? PixelMeasuresSequence[0]
-    : PixelMeasuresSequence;
-
-  const { SpacingBetweenSlices, SliceThickness } = PixelMeasures;
-
-  const image0 = referencedDisplaySet.images[0];
-  const referencedDisplaySetMetadata = {
-    PatientID: image0.PatientID,
-    PatientName: image0.PatientName,
-    PatientSex: image0.PatientSex,
-    PatientAge: image0.PatientAge,
-    SliceThickness: image0.SliceThickness || SliceThickness,
-    StudyDate: image0.StudyDate,
-    SeriesDescription: image0.SeriesDescription,
-    SeriesInstanceUID: image0.SeriesInstanceUID,
-    SeriesNumber: image0.SeriesNumber,
-    ManufacturerModelName: image0.ManufacturerModelName,
-    SpacingBetweenSlices: image0.SpacingBetweenSlices || SpacingBetweenSlices,
-  };
-
-  return referencedDisplaySetMetadata;
-}
-
-export default OHIFCornerstonePMAPViewport;
@@ -3,7 +3,8 @@ const { merge } = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.base.js');
 const pkg = require('./../package.json');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;

 const ROOT_DIR = path.join(__dirname, './..');
 const SRC_DIR = path.join(__dirname, '../src');
@@ -37,7 +38,13 @@ module.exports = (env, argv) => {
      libraryTarget: 'umd',
      filename: pkg.main,
    },
-    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
+    externals: [
+      /\b(vtk.js)/,
+      /\b(dcmjs)/,
+      /\b(gl-matrix)/,
+      /^@ohif/,
+      /^@cornerstonejs/,
+    ],
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-transform-class-properties'],
+  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -10,12 +10,12 @@ module.exports = {
            modules: 'commonjs',
            debug: false,
          },
-          '@babel/preset-typescript',
+          "@babel/preset-typescript",
        ],
        '@babel/preset-react',
      ],
      plugins: [
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-runtime',
@@ -26,7 +26,7 @@ module.exports = {
        // WebPack handles ES6 --> Target Syntax
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react',
-        '@babel/preset-typescript',
+        "@babel/preset-typescript",
      ],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
@@ -35,8 +35,9 @@ module.exports = {
        // WebPack handles ES6 --> Target Syntax
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react',
-        '@babel/preset-typescript',
+        "@babel/preset-typescript",
      ],
+      plugins: ['react-hot-loader/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.12.0-beta.72",
+  "version": "3.5.0",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -24,8 +24,6 @@
    "yarn": ">=1.18.0"
  },
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:dicom-seg": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
@@ -33,19 +31,44 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.72",
-    "@ohif/extension-cornerstone": "3.12.0-beta.72",
-    "@ohif/extension-default": "3.12.0-beta.72",
-    "@ohif/i18n": "3.12.0-beta.72",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1"
+    "@ohif/core": "3.5.0",
+    "@ohif/extension-cornerstone": "3.5.0",
+    "@ohif/extension-default": "3.5.0",
+    "@ohif/i18n": "3.5.0",
+    "prop-types": "^15.6.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^10.11.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "webpack": "^5.50.0",
+    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "react-color": "2.19.3"
+    "@babel/runtime": "^7.20.13",
+    "react-color": "^2.19.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-arrow-functions": "^7.2.0",
+    "@babel/plugin-transform-regenerator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.5.0",
+    "@babel/preset-react": "^7.16.7",
+    "babel-eslint": "^8.0.3",
+    "babel-loader": "^8.0.0-beta.4",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^14.1.0",
+    "eslint": "^5.0.1",
+    "eslint-loader": "^2.0.0",
+    "webpack": "^5.50.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-merge": "^5.7.3"
  }
 }
@@ -1,55 +0,0 @@
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-
-const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
-  const services = servicesManager.services;
-  const { displaySetService, viewportGridService } = services;
-
-  const actions = {
-    hydrateRTSDisplaySet: ({ displaySet, viewportId }) => {
-      if (displaySet.Modality !== 'RTSTRUCT') {
-        throw new Error('Display set is not an RTSTRUCT');
-      }
-
-      const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-        displaySet.referencedDisplaySetInstanceUID
-      );
-
-      // update the previously stored segmentationPresentation with the new viewportId
-      // presentation so that when we put the referencedDisplaySet back in the viewport
-      // it will have the correct segmentation representation hydrated
-      commandsManager.runCommand('updateStoredSegmentationPresentation', {
-        displaySet: displaySet,
-        type: SegmentationRepresentations.Contour,
-      });
-
-      // update the previously stored positionPresentation with the new viewportId
-      // presentation so that when we put the referencedDisplaySet back in the viewport
-      // it will be in the correct position zoom and pan
-      commandsManager.runCommand('updateStoredPositionPresentation', {
-        viewportId,
-        displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
-      });
-
-      viewportGridService.setDisplaySetsForViewport({
-        viewportId,
-        displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
-      });
-    },
-  };
-
-  const definitions = {
-    hydrateRTSDisplaySet: {
-      commandFn: actions.hydrateRTSDisplaySet,
-      storeContexts: [],
-      options: {},
-    },
-  };
-
-  return {
-    actions,
-    definitions,
-    defaultContext: 'cornerstone-dicom-rt',
-  };
-};
-
-export default commandsModule;
@@ -0,0 +1,207 @@
+import { utils } from '@ohif/core';
+
+import { SOPClassHandlerId } from './id';
+import loadRTStruct from './loadRTStruct';
+
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];
+
+let loadPromises = {};
+
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager,
+  extensionManager
+) {
+  const instance = instances[0];
+
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID,
+    wadoRoot,
+    wadoUri,
+    wadoUriRoot,
+  } = instance;
+
+  const displaySet = {
+    Modality: 'RTSTRUCT',
+    loading: false,
+    isReconstructable: false, // by default for now since it is a volumetric SEG currently
+    displaySetInstanceUID: utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPInstanceUID,
+    SeriesInstanceUID,
+    StudyInstanceUID,
+    SOPClassHandlerId,
+    SOPClassUID,
+    referencedImages: null,
+    referencedSeriesInstanceUID: null,
+    referencedDisplaySetInstanceUID: null,
+    isDerivedDisplaySet: true,
+    isLoaded: false,
+    isHydrated: false,
+    structureSet: null,
+    sopClassUids,
+    instance,
+    wadoRoot,
+    wadoUriRoot,
+    wadoUri,
+    isOverlayDisplaySet: true,
+  };
+
+  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
+  if (
+    instance.ReferencedFrameOfReferenceSequence &&
+    !instance.ReferencedSeriesSequence
+  ) {
+    instance.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
+      instance.ReferencedFrameOfReferenceSequence
+    );
+    referencedSeriesSequence = instance.ReferencedSeriesSequence;
+  }
+
+  if (!referencedSeriesSequence) {
+    throw new Error('ReferencedSeriesSequence is missing for the RTSTRUCT');
+  }
+
+  const referencedSeries = referencedSeriesSequence[0];
+
+  displaySet.referencedImages =
+    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
+
+  displaySet.getReferenceDisplaySet = () => {
+    const { DisplaySetService } = servicesManager.services;
+    const referencedDisplaySets = DisplaySetService.getDisplaySetsForSeries(
+      displaySet.referencedSeriesInstanceUID
+    );
+
+    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
+      throw new Error('Referenced DisplaySet is missing for the RT');
+    }
+
+    const referencedDisplaySet = referencedDisplaySets[0];
+
+    displaySet.referencedDisplaySetInstanceUID =
+      referencedDisplaySet.displaySetInstanceUID;
+
+    return referencedDisplaySet;
+  };
+
+  displaySet.load = ({ headers }) =>
+    _load(displaySet, servicesManager, extensionManager, headers);
+
+  return [displaySet];
+}
+
+function _load(rtDisplaySet, servicesManager, extensionManager, headers) {
+  const { SOPInstanceUID } = rtDisplaySet;
+  const { segmentationService } = servicesManager.services;
+  if (
+    (rtDisplaySet.loading || rtDisplaySet.isLoaded) &&
+    loadPromises[SOPInstanceUID] &&
+    _segmentationExistsInCache(rtDisplaySet, segmentationService)
+  ) {
+    return loadPromises[SOPInstanceUID];
+  }
+
+  rtDisplaySet.loading = true;
+
+  // We don't want to fire multiple loads, so we'll wait for the first to finish
+  // and also return the same promise to any other callers.
+  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
+    if (!rtDisplaySet.structureSet) {
+      const structureSet = await loadRTStruct(
+        extensionManager,
+        rtDisplaySet,
+        rtDisplaySet.getReferenceDisplaySet(),
+        headers
+      );
+
+      rtDisplaySet.structureSet = structureSet;
+    }
+
+    const suppressEvents = true;
+    segmentationService
+      .createSegmentationForRTDisplaySet(rtDisplaySet, null, suppressEvents)
+      .then(() => {
+        rtDisplaySet.loading = false;
+        resolve();
+      })
+      .catch(error => {
+        rtDisplaySet.loading = false;
+        reject(error);
+      });
+  });
+
+  return loadPromises[SOPInstanceUID];
+}
+
+function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
+  ReferencedFrameOfReferenceSequence
+) {
+  const ReferencedSeriesSequence = [];
+
+  ReferencedFrameOfReferenceSequence.forEach(referencedFrameOfReference => {
+    const { RTReferencedStudySequence } = referencedFrameOfReference;
+
+    RTReferencedStudySequence.forEach(rtReferencedStudy => {
+      const { RTReferencedSeriesSequence } = rtReferencedStudy;
+
+      RTReferencedSeriesSequence.forEach(rtReferencedSeries => {
+        const ReferencedInstanceSequence = [];
+        const { ContourImageSequence, SeriesInstanceUID } = rtReferencedSeries;
+
+        ContourImageSequence.forEach(contourImage => {
+          ReferencedInstanceSequence.push({
+            ReferencedSOPInstanceUID: contourImage.ReferencedSOPInstanceUID,
+            ReferencedSOPClassUID: contourImage.ReferencedSOPClassUID,
+          });
+        });
+
+        const referencedSeries = {
+          SeriesInstanceUID,
+          ReferencedInstanceSequence,
+        };
+
+        ReferencedSeriesSequence.push(referencedSeries);
+      });
+    });
+  });
+
+  return ReferencedSeriesSequence;
+}
+
+function _segmentationExistsInCache(rtDisplaySet, segmentationService) {
+  // Todo: fix this
+  return false;
+  // This should be abstracted with the CornerstoneCacheService
+  const rtContourId = rtDisplaySet.displaySetInstanceUID;
+  const contour = segmentationService.getContour(rtContourId);
+
+  return contour !== undefined;
+}
+
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+  return [
+    {
+      name: 'dicom-rt',
+      sopClassUids,
+      getDisplaySetsFromSeries: instances => {
+        return _getDisplaySetsFromSeries(
+          instances,
+          servicesManager,
+          extensionManager
+        );
+      },
+    },
+  ];
+}
+
+export default getSopClassHandlerModule;
@@ -1,214 +0,0 @@
-import { utils, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
-
-import { SOPClassHandlerId } from './id';
-import loadRTStruct from './loadRTStruct';
-
-const { sopClassDictionary } = utils;
-
-const sopClassUids = [sopClassDictionary.RTStructureSetStorage];
-
-const cachedRTStructsSEG = new Set<string>();
-
-const loadPromises = {};
-
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager
-) {
-  const instance = instances[0];
-
-  const {
-    StudyInstanceUID,
-    SeriesInstanceUID,
-    SOPInstanceUID,
-    SeriesDescription,
-    SeriesNumber,
-    SeriesDate,
-    SOPClassUID,
-    wadoRoot,
-    wadoUri,
-    wadoUriRoot,
-  } = instance;
-
-  const displaySet = {
-    Modality: 'RTSTRUCT',
-    loading: false,
-    isReconstructable: false,
-    displaySetInstanceUID: utils.guid(),
-    SeriesDescription,
-    SeriesNumber,
-    SeriesDate,
-    SOPInstanceUID,
-    SeriesInstanceUID,
-    StudyInstanceUID,
-    SOPClassHandlerId,
-    SOPClassUID,
-    referencedImages: null,
-    referencedSeriesInstanceUID: null,
-    referencedDisplaySetInstanceUID: null,
-    isDerivedDisplaySet: true,
-    isLoaded: false,
-    isHydrated: false,
-    structureSet: null,
-    sopClassUids,
-    instance,
-    wadoRoot,
-    wadoUriRoot,
-    wadoUri,
-    isOverlayDisplaySet: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('RTSTRUCT')}`,
-  };
-
-  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
-  if (instance.ReferencedFrameOfReferenceSequence && !instance.ReferencedSeriesSequence) {
-    instance.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
-      instance.ReferencedFrameOfReferenceSequence
-    );
-    referencedSeriesSequence = instance.ReferencedSeriesSequence;
-  }
-
-  if (!referencedSeriesSequence) {
-    throw new Error('ReferencedSeriesSequence is missing for the RTSTRUCT');
-  }
-
-  const referencedSeries = referencedSeriesSequence[0];
-
-  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
-  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
-
-  const { displaySetService } = servicesManager.services;
-  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
-    displaySet.referencedSeriesInstanceUID
-  );
-
-  if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
-    // Instead of throwing error, subscribe to display sets added
-    const { unsubscribe } = displaySetService.subscribe(
-      displaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      ({ displaySetsAdded }) => {
-        const addedDisplaySet = displaySetsAdded[0];
-        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
-          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
-          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
-          unsubscribe();
-        }
-      }
-    );
-  } else {
-    const referencedDisplaySet = referencedDisplaySets[0];
-    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
-    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
-  }
-
-  displaySet.load = ({ headers, createSegmentation = true }) =>
-    _load(displaySet, servicesManager, extensionManager, headers, createSegmentation);
-
-  return [displaySet];
-}
-
-function _load(
-  rtDisplaySet,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager,
-  headers,
-  createSegmentation = true
-) {
-  const { SOPInstanceUID } = rtDisplaySet;
-  const { segmentationService } = servicesManager.services;
-
-  if (
-    (rtDisplaySet.loading || rtDisplaySet.isLoaded) &&
-    loadPromises[SOPInstanceUID] &&
-    cachedRTStructsSEG.has(rtDisplaySet.displaySetInstanceUID)
-  ) {
-    return loadPromises[SOPInstanceUID];
-  }
-
-  rtDisplaySet.loading = true;
-
-  const { unsubscribe } = segmentationService.subscribe(
-    segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
-    (evt: { rtDisplaySet: { displaySetInstanceUID: string } }) => {
-      if (evt.rtDisplaySet?.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
-        cachedRTStructsSEG.add(rtDisplaySet.displaySetInstanceUID);
-        unsubscribe();
-      }
-    }
-  );
-
-  // We don't want to fire multiple loads, so we'll wait for the first to finish
-  // and also return the same promise to any other callers.
-  loadPromises[SOPInstanceUID] = new Promise<void>(async (resolve, reject) => {
-    try {
-      if (!rtDisplaySet.structureSet) {
-        const structureSet = await loadRTStruct(extensionManager, rtDisplaySet, headers);
-        rtDisplaySet.structureSet = structureSet;
-      }
-
-      if (createSegmentation) {
-        await segmentationService.createSegmentationForRTDisplaySet(rtDisplaySet);
-      }
-
-      resolve();
-    } catch (error) {
-      reject(error);
-    } finally {
-      rtDisplaySet.loading = false;
-    }
-  });
-
-  return loadPromises[SOPInstanceUID];
-}
-
-function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
-  ReferencedFrameOfReferenceSequence
-) {
-  const ReferencedSeriesSequence = [];
-
-  ReferencedFrameOfReferenceSequence.forEach(referencedFrameOfReference => {
-    const { RTReferencedStudySequence } = referencedFrameOfReference;
-
-    RTReferencedStudySequence.forEach(rtReferencedStudy => {
-      const { RTReferencedSeriesSequence } = rtReferencedStudy;
-
-      RTReferencedSeriesSequence.forEach(rtReferencedSeries => {
-        const ReferencedInstanceSequence = [];
-        const { ContourImageSequence, SeriesInstanceUID } = rtReferencedSeries;
-
-        ContourImageSequence.forEach(contourImage => {
-          ReferencedInstanceSequence.push({
-            ReferencedSOPInstanceUID: contourImage.ReferencedSOPInstanceUID,
-            ReferencedSOPClassUID: contourImage.ReferencedSOPClassUID,
-          });
-        });
-
-        const referencedSeries = {
-          SeriesInstanceUID,
-          ReferencedInstanceSequence,
-        };
-
-        ReferencedSeriesSequence.push(referencedSeries);
-      });
-    });
-  });
-
-  return ReferencedSeriesSequence;
-}
-
-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
-
-  return [
-    {
-      name: 'dicom-rt',
-      sopClassUids,
-      getDisplaySetsFromSeries: instances => {
-        return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
-      },
-    },
-  ];
-}
-
-export default getSopClassHandlerModule;
@@ -2,10 +2,11 @@ import { id } from './id';
 import React from 'react';
 import { Types } from '@ohif/core';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import getCommandsModule from './getCommandsModule';

 const Component = React.lazy(() => {
-  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport');
+  return import(
+    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport'
+  );
 });

 const OHIFCornerstoneRTViewport = props => {
@@ -25,7 +26,6 @@ const extension: Types.Extensions.Extension = {
   * You ID can be anything you want, but it should be unique.
   */
  id,
-  getCommandsModule,

  /**
   * PanelModule should provide a list of panels that will be available in OHIF
@@ -36,14 +36,12 @@ const extension: Types.Extensions.Extension = {
  getViewportModule({
    servicesManager,
    extensionManager,
-    commandsManager,
  }: Types.Extensions.ExtensionParams) {
    const ExtendedOHIFCornerstoneRTViewport = props => {
      return (
        <OHIFCornerstoneRTViewport
          servicesManager={servicesManager}
          extensionManager={extensionManager}
-          commandsManager={commandsManager}
          {...props}
        />
      );
@@ -2,34 +2,9 @@ import dcmjs from 'dcmjs';
 const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
 const dicomlab2RGB = dcmjs.data.Colors.dicomlab2RGB;

-/**
- * Checks and loads contour data for RT Structure Set, handling both inline and bulk data URIs.
- * Processes ROIContourSequence to extract contour data and resolve any bulk data references.
- *
- * @async
- * @function checkAndLoadContourData
- * @param {Object} params - Parameters object
- * @param {Object} params.instance - Initial RT Structure instance
- * @param {Object} params.dataSource - Data source for retrieving bulk data
- * @param {Object} params.extensionManager - OHIF extension manager
- * @param {Object} params.rtStructDisplaySet - RT Structure display set
- * @param {Object} params.headers - HTTP headers for requests
- * @returns {Promise<Object>} Promise that resolves to the processed RT Structure instance with loaded contour data
- * @throws {Promise<string>} Rejects with error message if instance is invalid or data retrieval fails
- */
-async function checkAndLoadContourData({
-  instance: initialInstance,
-  dataSource,
-  extensionManager,
-  rtStructDisplaySet,
-  headers,
-}) {
-  let instance = initialInstance;
+async function checkAndLoadContourData(instance, datasource) {
  if (!instance || !instance.ROIContourSequence) {
-    instance = await getRTStructInstance({ extensionManager, rtStructDisplaySet, headers });
-    if (!instance || !instance.ROIContourSequence) {
-      return Promise.reject('Invalid instance object or ROIContourSequence');
-    }
+    return Promise.reject('Invalid instance object or ROIContourSequence');
  }

  const promisesMap = new Map();
@@ -50,16 +25,26 @@ async function checkAndLoadContourData({

      if (Array.isArray(contourData)) {
        promisesMap.has(referencedROINumber)
-          ? promisesMap.get(referencedROINumber).push(Promise.resolve(contourData))
-          : promisesMap.set(referencedROINumber, [Promise.resolve(contourData)]);
+          ? promisesMap
+              .get(referencedROINumber)
+              .push(Promise.resolve(contourData))
+          : promisesMap.set(referencedROINumber, [
+              Promise.resolve(contourData),
+            ]);
      } else if (contourData && contourData.BulkDataURI) {
        const bulkDataURI = contourData.BulkDataURI;

-        if (!dataSource || !dataSource.retrieve || !dataSource.retrieve.bulkDataURI) {
-          return Promise.reject('Invalid dataSource object or retrieve function');
+        if (
+          !datasource ||
+          !datasource.retrieve ||
+          !datasource.retrieve.bulkDataURI
+        ) {
+          return Promise.reject(
+            'Invalid datasource object or retrieve function'
+          );
        }

-        const bulkDataPromise = dataSource.retrieve.bulkDataURI({
+        const bulkDataPromise = datasource.retrieve.bulkDataURI({
          BulkDataURI: bulkDataURI,
          StudyInstanceUID: instance.StudyInstanceUID,
          SeriesInstanceUID: instance.SeriesInstanceUID,
@@ -89,7 +74,10 @@ async function checkAndLoadContourData({
        ROIContour.ContourSequence.forEach((Contour, index) => {
          const promise = resolvedPromises[index];
          if (promise.status === 'fulfilled') {
-            if (Array.isArray(promise.value) && promise.value.every(Number.isFinite)) {
+            if (
+              Array.isArray(promise.value) &&
+              promise.value.every(Number.isFinite)
+            ) {
              // If promise.value is already an array of numbers, use it directly
              Contour.ContourData = promise.value;
            } else {
@@ -97,8 +85,13 @@ async function checkAndLoadContourData({
              const uint8Array = new Uint8Array(promise.value);
              const textDecoder = new TextDecoder();
              const dataUint8Array = textDecoder.decode(uint8Array);
-              if (typeof dataUint8Array === 'string' && dataUint8Array.includes('\\')) {
-                Contour.ContourData = dataUint8Array.split('\\').map(parseFloat);
+              if (
+                typeof dataUint8Array === 'string' &&
+                dataUint8Array.includes('\\')
+              ) {
+                Contour.ContourData = dataUint8Array
+                  .split('\\')
+                  .map(parseFloat);
              } else {
                Contour.ContourData = [];
              }
@@ -112,77 +105,52 @@ async function checkAndLoadContourData({
      console.error(error);
    }
  });
-
-  return instance;
 }

-/**
- * Retrieves and parses RT Structure Set instance from DICOM data.
- * Uses the cornerstone utility module to load DICOM data and converts it to a naturalized dataset.
- *
- * @async
- * @function getRTStructInstance
- * @param {Object} params - Parameters object
- * @param {Object} params.extensionManager - OHIF extension manager
- * @param {Object} params.rtStructDisplaySet - RT Structure display set
- * @param {Object} params.headers - HTTP headers for requests
- * @returns {Promise<Object>} Promise that resolves to the parsed RT Structure dataset
- */
-const getRTStructInstance = async ({ extensionManager, rtStructDisplaySet, headers }) => {
+export default async function loadRTStruct(
+  extensionManager,
+  rtStructDisplaySet,
+  referencedDisplaySet,
+  headers
+) {
  const utilityModule = extensionManager.getModuleEntry(
    '@ohif/extension-cornerstone.utilityModule.common'
  );
-  const { dicomLoaderService } = utilityModule.exports;
-  const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
-    rtStructDisplaySet,
-    null,
-    headers
-  );
-  const dicomData = DicomMessage.readFile(segArrayBuffer);
-  const rtStructDataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
-  rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
-  return rtStructDataset;
-};
-
-/**
- * Main function to load and process RT Structure Set data.
- * Creates a structure set object with ROI contours, metadata, and visualization properties.
- * Handles both bulk data URI and inline contour data scenarios.
- *
- * @async
- * @function loadRTStruct
- * @param {Object} extensionManager - OHIF extension manager
- * @param {Object} rtStructDisplaySet - RT Structure display set to process
- * @param {Object} headers - HTTP headers for data requests
- * @returns {Promise<Object>} Promise that resolves to a structure set object containing:
- *   - StructureSetLabel: Label of the structure set
- *   - SeriesInstanceUID: Series instance UID
- *   - ROIContours: Array of ROI contour data with points and metadata
- *   - visible: Visibility state
- *   - ReferencedSOPInstanceUIDsSet: Set of referenced SOP instance UIDs
- */
-export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
  const dataSource = extensionManager.getActiveDataSource()[0];
  const { bulkDataURI } = dataSource.getConfig?.() || {};

+  const { dicomLoaderService } = utilityModule.exports;
+  const imageIdSopInstanceUidPairs = _getImageIdSopInstanceUidPairsForDisplaySet(
+    referencedDisplaySet
+  );
+
  // Set here is loading is asynchronous.
  // If this function throws its set back to false.
  rtStructDisplaySet.isLoaded = true;
  let instance = rtStructDisplaySet.instance;

  if (!bulkDataURI || !bulkDataURI.enabled) {
-    instance = await getRTStructInstance({ extensionManager, rtStructDisplaySet, headers });
-  } else {
-    instance = await checkAndLoadContourData({
-      instance,
-      dataSource,
-      extensionManager,
+    const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
      rtStructDisplaySet,
-      headers,
-    });
+      null,
+      headers
+    );
+
+    const dicomData = DicomMessage.readFile(segArrayBuffer);
+    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(
+      dicomData.dict
+    );
+    rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+    instance = rtStructDataset;
+  } else {
+    await checkAndLoadContourData(instance, dataSource);
  }

-  const { StructureSetROISequence, ROIContourSequence, RTROIObservationsSequence } = instance;
+  const {
+    StructureSetROISequence,
+    ROIContourSequence,
+    RTROIObservationsSequence,
+  } = instance;

  // Define our structure set entry and add it to the rtstruct module state.
  const structureSet = {
@@ -190,22 +158,36 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
    SeriesInstanceUID: instance.SeriesInstanceUID,
    ROIContours: [],
    visible: true,
-    ReferencedSOPInstanceUIDsSet: new Set(),
  };

  for (let i = 0; i < ROIContourSequence.length; i++) {
    const ROIContour = ROIContourSequence[i];
    const { ContourSequence } = ROIContour;
+
    if (!ContourSequence) {
      continue;
    }

+    const isSupported = false;
+
    const ContourSequenceArray = _toArray(ContourSequence);

    const contourPoints = [];
-    for (const ContourSequenceItem of ContourSequenceArray) {
-      const { ContourData, NumberOfContourPoints, ContourGeometricType, ContourImageSequence } =
-        ContourSequenceItem;
+    for (let c = 0; c < ContourSequenceArray.length; c++) {
+      const {
+        ContourImageSequence,
+        ContourData,
+        NumberOfContourPoints,
+        ContourGeometricType,
+      } = ContourSequenceArray[c];
+
+      const sopInstanceUID = ContourImageSequence.ReferencedSOPInstanceUID;
+      const imageId = _getImageId(imageIdSopInstanceUidPairs, sopInstanceUID);
+
+      if (!imageId) {
+        continue;
+      }
+      let isSupported = false;

      const points = [];
      for (let p = 0; p < NumberOfContourPoints * 3; p += 3) {
@@ -216,25 +198,23 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
        });
      }

-      const supportedContourTypesMap = new Map([
-        ['CLOSED_PLANAR', false],
-        ['OPEN_NONPLANAR', false],
-        ['OPEN_PLANAR', false],
-        ['POINT', true],
-      ]);
+      switch (ContourGeometricType) {
+        case 'CLOSED_PLANAR':
+        case 'OPEN_PLANAR':
+        case 'POINT':
+          isSupported = true;
+
+          break;
+        default:
+          continue;
+      }

      contourPoints.push({
        numberOfPoints: NumberOfContourPoints,
        points,
        type: ContourGeometricType,
-        isSupported: supportedContourTypesMap.get(ContourGeometricType) ?? false,
+        isSupported,
      });
-
-      if (ContourImageSequence?.ReferencedSOPInstanceUID) {
-        structureSet.ReferencedSOPInstanceUIDsSet.add(
-          ContourImageSequence?.ReferencedSOPInstanceUID
-        );
-      }
    }

    _setROIContourMetadata(
@@ -242,33 +222,44 @@ export default async function loadRTStruct(extensionManager, rtStructDisplaySet,
      StructureSetROISequence,
      RTROIObservationsSequence,
      ROIContour,
-      contourPoints
+      contourPoints,
+      isSupported
    );
  }
  return structureSet;
 }

-/**
- * Sets metadata for ROI contour data and adds it to the structure set.
- * Extracts ROI information from StructureSetROISequence and RTROIObservationsSequence,
- * then creates a complete ROI contour data object with visualization properties.
- *
- * @function _setROIContourMetadata
- * @param {Object} structureSet - The structure set object to add ROI contour to
- * @param {Array} StructureSetROISequence - Array of structure set ROI definitions
- * @param {Array} RTROIObservationsSequence - Array of RT ROI observations
- * @param {Object} ROIContour - ROI contour object containing contour data
- * @param {Array} contourPoints - Array of processed contour points
- */
+const _getImageId = (imageIdSopInstanceUidPairs, sopInstanceUID) => {
+  const imageIdSopInstanceUidPairsEntry = imageIdSopInstanceUidPairs.find(
+    imageIdSopInstanceUidPairsEntry =>
+      imageIdSopInstanceUidPairsEntry.sopInstanceUID === sopInstanceUID
+  );
+
+  return imageIdSopInstanceUidPairsEntry
+    ? imageIdSopInstanceUidPairsEntry.imageId
+    : null;
+};
+
+function _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet) {
+  return referencedDisplaySet.images.map(image => {
+    return {
+      imageId: image.imageId,
+      sopInstanceUID: image.SOPInstanceUID,
+    };
+  });
+}
+
 function _setROIContourMetadata(
  structureSet,
  StructureSetROISequence,
  RTROIObservationsSequence,
  ROIContour,
-  contourPoints
+  contourPoints,
+  isSupported
 ) {
  const StructureSetROI = StructureSetROISequence.find(
-    structureSetROI => structureSetROI.ROINumber === ROIContour.ReferencedROINumber
+    structureSetROI =>
+      structureSetROI.ROINumber === ROIContour.ReferencedROINumber
  );

  const ROIContourData = {
@@ -276,9 +267,9 @@ function _setROIContourMetadata(
    ROIName: StructureSetROI.ROIName,
    ROIGenerationAlgorithm: StructureSetROI.ROIGenerationAlgorithm,
    ROIDescription: StructureSetROI.ROIDescription,
+    isSupported,
    contourPoints,
    visible: true,
-    colorArray: [],
  };

  _setROIContourDataColor(ROIContour, ROIContourData);
@@ -295,14 +286,6 @@ function _setROIContourMetadata(
  structureSet.ROIContours.push(ROIContourData);
 }

-/**
- * Sets the display color for ROI contour data.
- * Uses ROIDisplayColor if available, otherwise converts RecommendedDisplayCIELabValue to RGB.
- *
- * @function _setROIContourDataColor
- * @param {Object} ROIContour - ROI contour object containing color information
- * @param {Object} ROIContourData - ROI contour data object to set color on
- */
 function _setROIContourDataColor(ROIContour, ROIContourData) {
  let { ROIDisplayColor, RecommendedDisplayCIELabValue } = ROIContour;

@@ -316,24 +299,23 @@ function _setROIContourDataColor(ROIContour, ROIContourData) {
  }
 }

-/**
- * Sets RT ROI observations metadata for ROI contour data.
- * Finds matching RTROIObservations by ROINumber and adds observation details to contour data.
- *
- * @function _setROIContourRTROIObservations
- * @param {Object} ROIContourData - ROI contour data object to add observations to
- * @param {Array} RTROIObservationsSequence - Array of RT ROI observations
- * @param {number} ROINumber - ROI number to match observations
- */
-function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequence, ROINumber) {
+function _setROIContourRTROIObservations(
+  ROIContourData,
+  RTROIObservationsSequence,
+  ROINumber
+) {
  const RTROIObservations = RTROIObservationsSequence.find(
    RTROIObservations => RTROIObservations.ReferencedROINumber === ROINumber
  );

  if (RTROIObservations) {
    // Deep copy so we don't keep the reference to the dcmjs dataset entry.
-    const { ObservationNumber, ROIObservationDescription, RTROIInterpretedType, ROIInterpreter } =
-      RTROIObservations;
+    const {
+      ObservationNumber,
+      ROIObservationDescription,
+      RTROIInterpretedType,
+      ROIInterpreter,
+    } = RTROIObservations;

    ROIContourData.RTROIObservations = {
      ObservationNumber,
@@ -344,14 +326,6 @@ function _setROIContourRTROIObservations(ROIContourData, RTROIObservationsSequen
  }
 }

-/**
- * Converts a single object or array to an array.
- * Utility function to ensure consistent array handling for DICOM sequences.
- *
- * @function _toArray
- * @param {*} objOrArray - Object or array to convert
- * @returns {Array} Array containing the input (if already array) or wrapped in array
- */
 function _toArray(objOrArray) {
  return Array.isArray(objOrArray) ? objOrArray : [objOrArray];
 }
@@ -0,0 +1,70 @@
+async function _hydrateRTDisplaySet({
+  rtDisplaySet,
+  viewportIndex,
+  servicesManager,
+}) {
+  const {
+    segmentationService,
+    hangingProtocolService,
+    viewportGridService,
+  } = servicesManager.services;
+
+  const displaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
+
+  let segmentationId = null;
+
+  // We need the hydration to notify panels about the new segmentation added
+  const suppressEvents = false;
+
+  segmentationId = await segmentationService.createSegmentationForRTDisplaySet(
+    rtDisplaySet,
+    segmentationId,
+    suppressEvents
+  );
+
+  segmentationService.hydrateSegmentation(rtDisplaySet.displaySetInstanceUID);
+
+  const { viewports } = viewportGridService.getState();
+
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+    viewportIndex,
+    displaySetInstanceUID
+  );
+
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+
+  // Todo: fix this after we have a better way for stack viewport segmentations
+
+  // check every viewport in the viewports to see if the displaySetInstanceUID
+  // is being displayed, if so we need to update the viewport to use volume viewport
+  // (if already is not using it) since Cornerstone3D currently only supports
+  // volume viewport for segmentation
+  viewports.forEach((viewport, index) => {
+    if (index === viewportIndex) {
+      return;
+    }
+
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
+      viewport.displaySetInstanceUIDs,
+      rtDisplaySet.displaySetInstanceUID
+    );
+
+    if (shouldDisplaySeg) {
+      updatedViewports.push({
+        viewportIndex: index,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          initialImageOptions: {
+            preset: 'middle',
+          },
+        },
+      });
+    }
+  });
+
+  // Do the entire update at once
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+  return true;
+}
+
+export default _hydrateRTDisplaySet;
@@ -1,7 +1,12 @@
-function createRTToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
-  const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');
+function createRTToolGroupAndAddTools(
+  ToolGroupService,
+  customizationService,
+  toolGroupId
+) {
+  const { tools } =
+    customizationService.get('cornerstone.overlayViewportTools') ?? {};

-  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
+  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
 }

 export default createRTToolGroupAndAddTools;
@@ -1,25 +1,69 @@
-import { utils, Types } from '@ohif/extension-cornerstone';
+import hydrateRTDisplaySet from './_hydrateRT';
+
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};

 function promptHydrateRT({
  servicesManager,
  rtDisplaySet,
-  viewportId,
-  preHydrateCallbacks,
-  hydrateRTDisplaySet,
-}: {
-  servicesManager: AppTypes.ServicesManager;
-  rtDisplaySet: AppTypes.DisplaySet;
-  viewportId: string;
-  preHydrateCallbacks?: Types.HydrationCallback[];
-  hydrateRTDisplaySet: Types.HydrationCallback;
+  viewportIndex,
+  toolGroupId = 'default',
 }) {
-  return utils.promptHydrationDialog({
-    servicesManager,
-    viewportId,
-    displaySet: rtDisplaySet,
-    preHydrateCallbacks,
-    hydrateCallback: hydrateRTDisplaySet,
-    type: 'RTSTRUCT',
+  const { uiViewportDialogService } = servicesManager.services;
+
+  return new Promise(async function(resolve, reject) {
+    const promptResult = await _askHydrate(
+      uiViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      const isHydrated = await hydrateRTDisplaySet({
+        rtDisplaySet,
+        viewportIndex,
+        toolGroupId,
+        servicesManager,
+      });
+
+      resolve(isHydrated);
+    }
+  });
+}
+
+function _askHydrate(uiViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Do you want to open this Segmentation?';
+    const actions = [
+      {
+        type: 'secondary',
+        text: 'No',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.HYDRATE_SEG,
+      },
+    ];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+
+    uiViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
  });
 }

@@ -1,122 +1,184 @@
-import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useViewportGrid } from '@ohif/ui-next';
+import OHIF, { utils } from '@ohif/core';
 import {
-  utils,
-  usePositionPresentationStore,
-  OHIFCornerstoneViewport,
-} from '@ohif/extension-cornerstone';
+  ViewportActionBar,
+  useViewportGrid,
+  LoadingIndicatorTotalPercent,
+} from '@ohif/ui';

+import _hydrateRTdisplaySet from '../utils/_hydrateRT';
 import promptHydrateRT from '../utils/promptHydrateRT';
+import _getStatusComponent from './_getStatusComponent';
 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
-import { useSystem } from '@ohif/core/src';
+import _hydrateRTDisplaySet from '../utils/_hydrateRT';
+
+const { formatDate } = utils;
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';

-function OHIFCornerstoneRTViewport(props: withAppTypes) {
-  const { servicesManager, commandsManager } = useSystem();
-  const { children, displaySets, viewportOptions } = props as {
-    children: React.ReactNode;
-    displaySets: AppTypes.DisplaySet[];
-    viewportOptions: AppTypes.ViewportOptions;
-  };
+function OHIFCornerstoneRTViewport(props) {
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    viewportIndex,
+    viewportLabel,
+    servicesManager,
+    extensionManager,
+  } = props;

-  const { displaySetService, toolGroupService, segmentationService, customizationService } =
-    servicesManager.services;
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    uiNotificationService,
+    customizationService,
+  } = servicesManager.services;

-  const viewportId = viewportOptions.viewportId;
-
-  const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportId}`;
+  const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportIndex}`;

  // RT viewport will always have a single display set
  if (displaySets.length > 1) {
    throw new Error('RT viewport should only have a single display set');
  }

-  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
-    'ui.loadingIndicatorTotalPercent'
-  );
-
  const rtDisplaySet = displaySets[0];

-  const [{ viewports, activeViewportId }, viewportGridService] = useViewportGrid();
+  const [viewportGrid, viewportGridService] = useViewportGrid();

  // States
-  const { setPositionPresentation } = usePositionPresentationStore();
+  const [isToolGroupCreated, setToolGroupCreated] = useState(false);
+  const [selectedSegment, setSelectedSegment] = useState(1);
+
+  // Hydration means that the RT is opened and segments are loaded into the
+  // segmentation panel, and RT is also rendered on any viewport that is in the
+  // same frameOfReferenceUID as the referencedSeriesUID of the RT. However,
+  // loading basically means RT loading over network and bit unpacking of the
+  // RT data.
+  const [isHydrated, setIsHydrated] = useState(rtDisplaySet.isHydrated);
  const [rtIsLoading, setRtIsLoading] = useState(!rtDisplaySet.isLoaded);
+  const [element, setElement] = useState(null);
  const [processingProgress, setProcessingProgress] = useState({
    percentComplete: null,
    totalSegments: null,
  });

+  // refs
  const referencedDisplaySetRef = useRef(null);

-  const referencedDisplaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
-  // If the referencedDisplaySetInstanceUID is not found, it means the RTStruct series is being
-  // launched without its corresponding referenced display set (e.g., the RTStruct series is launched using
-  // series launch /mode?StudyInstanceUIDs=&SeriesInstanceUID).
-  // In such cases, we attempt to handle this scenario gracefully by
-  // invoking a custom handler. Ideally, if a user tries to launch a series that isn't viewable,
-  // (eg.: we can prompt them with an explanation and provide a link to the full study).
-  if (!referencedDisplaySetInstanceUID) {
-    const missingReferenceDisplaySetHandler = customizationService.getCustomization(
-      'missingReferenceDisplaySetHandler'
-    );
-    const { handled } = missingReferenceDisplaySetHandler();
-    if (handled) {
-      return;
-    }
-  }
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    referencedDisplaySetInstanceUID
+  const { viewports, activeViewportIndex } = viewportGrid;
+
+  const referencedDisplaySet = rtDisplaySet.getReferenceDisplaySet();
+  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
+    referencedDisplaySet
  );
-  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(referencedDisplaySet);

  referencedDisplaySetRef.current = {
    displaySet: referencedDisplaySet,
    metadata: referencedDisplaySetMetadata,
  };
+  /**
+   * OnElementEnabled callback which is called after the cornerstoneExtension
+   * has enabled the element. Note: we delegate all the image rendering to
+   * cornerstoneExtension, so we don't need to do anything here regarding
+   * the image rendering, element enabling etc.
+   */
+  const onElementEnabled = evt => {
+    setElement(evt.detail.element);
+  };
+
+  const onElementDisabled = () => {
+    setElement(null);
+  };
+
+  const getCornerstoneViewport = useCallback(() => {
+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );
+
+    const {
+      displaySet: referencedDisplaySet,
+    } = referencedDisplaySetRef.current;
+
+    // Todo: jump to the center of the first segment
+    return (
+      <Component
+        {...props}
+        displaySets={[referencedDisplaySet, rtDisplaySet]}
+        viewportOptions={{
+          viewportType: 'volume',
+          toolGroupId: toolGroupId,
+          orientation: viewportOptions.orientation,
+          viewportId: viewportOptions.viewportId,
+        }}
+        onElementEnabled={onElementEnabled}
+        onElementDisabled={onElementDisabled}
+      ></Component>
+    );
+  }, [viewportIndex, rtDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      direction = direction === 'left' ? -1 : 1;
+      const segmentationId = rtDisplaySet.displaySetInstanceUID;
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      // Segment 0 is always background
+      if (newSelectedSegmentIndex >= numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      segmentationService.jumpToSegmentCenter(
+        segmentationId,
+        newSelectedSegmentIndex,
+        toolGroupId
+      );
+      setSelectedSegment(newSelectedSegmentIndex);
+    },
+    [selectedSegment]
+  );

  useEffect(() => {
    if (rtIsLoading) {
      return;
    }

-    // if not active viewport, return
-    if (viewportId !== activeViewportId) {
-      return;
-    }
-
    promptHydrateRT({
      servicesManager,
-      viewportId,
+      viewportIndex,
      rtDisplaySet,
-      hydrateRTDisplaySet: async () => {
-        return commandsManager.runCommand('hydrateSecondaryDisplaySet', {
-          displaySet: rtDisplaySet,
-          viewportId,
-        });
-      },
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
    });
-  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading, commandsManager, activeViewportId]);
+  }, [servicesManager, viewportIndex, rtDisplaySet, rtIsLoading]);

  useEffect(() => {
    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
      evt => {
-        if (evt.rtDisplaySet.displaySetInstanceUID === rtDisplaySet.displaySetInstanceUID) {
+        if (
+          evt.rtDisplaySet.displaySetInstanceUID ===
+          rtDisplaySet.displaySetInstanceUID
+        ) {
          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',
+            message:
+              'Overlapping segments detected which is not currently supported',
+            type: 'warning',
          });
        }
      }
@@ -128,7 +190,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
  }, [rtDisplaySet]);

  useEffect(() => {
-    const segmentLoadingSubscription = segmentationService.subscribe(
+    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE,
      ({ percentComplete, numSegments }) => {
        setProcessingProgress({
@@ -138,13 +200,24 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
      }
    );

-    const displaySetsRemovedSubscription = displaySetService.subscribe(
+    return () => {
+      unsubscribe();
+    };
+  }, [rtDisplaySet]);
+
+  /**
+   Cleanup the SEG viewport when the viewport is destroyed
+   */
+  useEffect(() => {
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
      ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports.get(activeViewportId);
-        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
+        const activeViewport = viewports[activeViewportIndex];
+        if (
+          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
+        ) {
          viewportGridService.setDisplaySetsForViewport({
-            viewportId: activeViewportId,
+            viewportIndex: activeViewportIndex,
            displaySetInstanceUIDs: [],
          });
        }
@@ -152,10 +225,9 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    );

    return () => {
-      segmentLoadingSubscription.unsubscribe();
-      displaySetsRemovedSubscription.unsubscribe();
+      onDisplaySetsRemovedSubscription.unsubscribe();
    };
-  }, [rtDisplaySet, displaySetService, viewports, activeViewportId, viewportGridService]);
+  }, []);

  useEffect(() => {
    let toolGroup = toolGroupService.getToolGroup(toolGroupId);
@@ -164,38 +236,37 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
      return;
    }

-    toolGroup = createRTToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);
+    toolGroup = createRTToolGroupAndAddTools(
+      toolGroupService,
+      customizationService,
+      toolGroupId
+    );
+
+    setToolGroupCreated(true);

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

-  const getCornerstoneViewport = useCallback(() => {
-    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;
+  useEffect(() => {
+    setIsHydrated(rtDisplaySet.isHydrated);

-    // Todo: jump to the center of the first segment
-    return (
-      <OHIFCornerstoneViewport
-        {...props}
-        displaySets={[referencedDisplaySet, rtDisplaySet]}
-        viewportOptions={{
-          viewportType: viewportOptions.viewportType,
-          toolGroupId: toolGroupId,
-          orientation: viewportOptions.orientation,
-          viewportId: viewportOptions.viewportId,
-          presentationIds: viewportOptions.presentationIds,
-        }}
-        onElementEnabled={evt => {
-          props.onElementEnabled?.(evt);
-        }}
-      />
-    );
-  }, [viewportId, rtDisplaySet, toolGroupId]);
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentationFromToolGroup(
+        toolGroupId
+      );
+      referencedDisplaySetRef.current = null;
+    };
+  }, [rtDisplaySet]);

+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;

  if (
@@ -211,19 +282,77 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
      return (
        child &&
        React.cloneElement(child, {
-          viewportId,
+          viewportIndex,
          key: index,
        })
      );
    });
  }

+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+    ManufacturerModelName,
+    StudyDate,
+    SeriesDescription,
+    SpacingBetweenSlices,
+    SeriesNumber,
+  } = referencedDisplaySetRef.current.metadata;
+
+  const onStatusClick = async () => {
+    const isHydrated = await _hydrateRTDisplaySet({
+      rtDisplaySet,
+      viewportIndex,
+      servicesManager,
+    });
+
+    setIsHydrated(isHydrated);
+  };
+
  return (
    <>
-      <div className="relative flex h-full w-full flex-row overflow-hidden">
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onSegmentChange}
+        getStatusComponent={() => {
+          return _getStatusComponent({
+            isHydrated,
+            onStatusClick,
+          });
+        }}
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          currentSeries: SeriesNumber,
+          seriesDescription: `RT Viewport ${SeriesDescription}`,
+          patientInformation: {
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              SpacingBetweenSlices !== undefined
+                ? `${SpacingBetweenSlices.toFixed(2)}mm`
+                : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
+      <div className="relative flex flex-row w-full h-full overflow-hidden">
        {rtIsLoading && (
          <LoadingIndicatorTotalPercent
-            className="h-full w-full"
+            className="w-full h-full"
            totalNumbers={processingProgress.totalSegments}
            percentComplete={processingProgress.percentComplete}
            loadingText="Loading RTSTRUCT..."
@@ -238,9 +367,14 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

 OHIFCornerstoneRTViewport.propTypes = {
  displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportId: PropTypes.string.isRequired,
+  viewportIndex: PropTypes.number.isRequired,
  dataSource: PropTypes.object,
  children: PropTypes.node,
+  customProps: PropTypes.object,
+};
+
+OHIFCornerstoneRTViewport.defaultProps = {
+  customProps: {},
 };

 function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon, Tooltip } from '@ohif/ui';
+
+export default function _getStatusComponent({ isHydrated, onStatusClick }) {
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  const { t } = useTranslation('Common');
+  const loadStr = t('LOAD');
+
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => <Icon name="status-alert" />;
+
+      ToolTipMessage = () => (
+        <div>This Segmentation is loaded in the segmentation panel</div>
+      );
+      break;
+    case false:
+      StatusIcon = () => <Icon name="status-untracked" />;
+
+      ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
+  }
+
+  const StatusArea = () => (
+    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
+      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
+        <StatusIcon />
+        <span className="ml-1">RTSTRUCT</span>
+      </div>
+      {!isHydrated && (
+        <div
+          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={onStatusClick}
+        >
+          {loadStr}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+          <StatusArea />
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}
@@ -40,15 +40,21 @@ module.exports = (env, argv) => {
      libraryTarget: 'umd',
      filename: pkg.main,
    },
-    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
+    externals: [
+      /\b(vtk.js)/,
+      /\b(dcmjs)/,
+      /\b(gl-matrix)/,
+      /^@ohif/,
+      /^@cornerstonejs/,
+    ],
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
-      new MiniCssExtractPlugin({
-        filename: `./dist/${outputName}.css`,
-        chunkFilename: `./dist/${outputName}.css`,
-      }),
+      // new MiniCssExtractPlugin({
+      //   filename: `./dist/${outputName}.css`,
+      //   chunkFilename: `./dist/${outputName}.css`,
+      // }),
    ],
  });
 };
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-transform-class-properties'],
+  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -10,12 +10,12 @@ module.exports = {
            modules: 'commonjs',
            debug: false,
          },
-          '@babel/preset-typescript',
+          "@babel/preset-typescript",
        ],
        '@babel/preset-react',
      ],
      plugins: [
-        '@babel/plugin-transform-object-rest-spread',
+        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-runtime',
@@ -26,7 +26,7 @@ module.exports = {
        // WebPack handles ES6 --> Target Syntax
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react',
-        '@babel/preset-typescript',
+        "@babel/preset-typescript",
      ],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
@@ -35,8 +35,9 @@ module.exports = {
        // WebPack handles ES6 --> Target Syntax
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react',
-        '@babel/preset-typescript',
+        "@babel/preset-typescript",
      ],
+      plugins: ['react-hot-loader/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.12.0-beta.72",
+  "version": "3.5.0",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -24,8 +24,6 @@
    "yarn": ">=1.18.0"
  },
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:dicom-seg": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
@@ -33,22 +31,44 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.72",
-    "@ohif/extension-cornerstone": "3.12.0-beta.72",
-    "@ohif/extension-default": "3.12.0-beta.72",
-    "@ohif/i18n": "3.12.0-beta.72",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-i18next": "12.3.1",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1"
+    "@ohif/core": "3.5.0",
+    "@ohif/extension-cornerstone": "3.5.0",
+    "@ohif/extension-default": "3.5.0",
+    "@ohif/i18n": "3.5.0",
+    "prop-types": "^15.6.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^12.2.2",
+    "react-router": "^6.8.1",
+    "react-router-dom": "^6.8.1",
+    "webpack": "^5.50.0",
+    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.5.19",
-    "@cornerstonejs/core": "4.5.19",
-    "@kitware/vtk.js": "32.12.0",
-    "react-color": "2.19.3"
+    "@babel/runtime": "^7.20.13",
+    "react-color": "^2.19.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-arrow-functions": "^7.2.0",
+    "@babel/plugin-transform-regenerator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.5.0",
+    "@babel/preset-react": "^7.16.7",
+    "babel-eslint": "^8.0.3",
+    "babel-loader": "^8.0.0-beta.4",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^14.1.0",
+    "eslint": "^5.0.1",
+    "eslint-loader": "^2.0.0",
+    "webpack": "^5.50.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-merge": "^5.7.3"
  }
 }
@@ -1,338 +0,0 @@
-import dcmjs from 'dcmjs';
-import { classes, Types } from '@ohif/core';
-import { cache, metaData } from '@cornerstonejs/core';
-import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
-import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
-import { createReportDialogPrompt } from '@ohif/extension-default';
-import { DicomMetadataStore } from '@ohif/core';
-
-import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';
-
-const { datasetToBlob } = dcmjs.data;
-
-const getTargetViewport = ({ viewportId, viewportGridService }) => {
-  const { viewports, activeViewportId } = viewportGridService.getState();
-  const targetViewportId = viewportId || activeViewportId;
-
-  const viewport = viewports.get(targetViewportId);
-
-  return viewport;
-};
-
-const {
-  Cornerstone3D: {
-    Segmentation: { generateSegmentation },
-  },
-} = adaptersSEG;
-
-const {
-  Cornerstone3D: {
-    RTSS: { generateRTSSFromSegmentations },
-  },
-} = adaptersRT;
-
-const { downloadDICOMData } = helpers;
-
-const commandsModule = ({
-  servicesManager,
-  extensionManager,
-}: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
-  const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
-    servicesManager.services as AppTypes.Services;
-
-  const actions = {
-    /**
-     * Loads segmentations for a specified viewport.
-     * The function prepares the viewport for rendering, then loads the segmentation details.
-     * Additionally, if the segmentation has scalar data, it is set for the corresponding label map volume.
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.segmentations - Array of segmentations to be loaded.
-     * @param params.viewportId - the target viewport ID.
-     *
-     */
-    loadSegmentationsForViewport: async ({ segmentations, viewportId }) => {
-      // Todo: handle adding more than one segmentation
-      const viewport = getTargetViewport({ viewportId, viewportGridService });
-      const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
-
-      const segmentation = segmentations[0];
-      const segmentationId = segmentation.segmentationId;
-      const label = segmentation.config.label;
-      const segments = segmentation.config.segments;
-
-      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-
-      await segmentationService.createLabelmapForDisplaySet(displaySet, {
-        segmentationId,
-        segments,
-        label,
-      });
-
-      segmentationService.addOrUpdateSegmentation(segmentation);
-
-      await segmentationService.addSegmentationRepresentation(viewport.viewportId, {
-        segmentationId,
-      });
-
-      return segmentationId;
-    },
-    /**
-     * Generates a segmentation from a given segmentation ID.
-     * This function retrieves the associated segmentation and
-     * its referenced volume, extracts label maps from the
-     * segmentation volume, and produces segmentation data
-     * alongside associated metadata.
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.segmentationId - ID of the segmentation to be generated.
-     * @param params.options - Optional configuration for the generation process.
-     *
-     * @returns Returns the generated segmentation data.
-     */
-    generateSegmentation: ({ segmentationId, options = {} }) => {
-      const segmentation = cornerstoneToolsSegmentation.state.getSegmentation(segmentationId);
-
-      const { imageIds } = segmentation.representationData.Labelmap;
-
-      const segImages = imageIds.map(imageId => cache.getImage(imageId));
-      const referencedImages = segImages.map(image => cache.getImage(image.referencedImageId));
-
-      const labelmaps2D = [];
-
-      let z = 0;
-
-      for (const segImage of segImages) {
-        const segmentsOnLabelmap = new Set();
-        const pixelData = segImage.getPixelData();
-        const { rows, columns } = segImage;
-
-        // Use a single pass through the pixel data
-        for (let i = 0; i < pixelData.length; i++) {
-          const segment = pixelData[i];
-          if (segment !== 0) {
-            segmentsOnLabelmap.add(segment);
-          }
-        }
-
-        labelmaps2D[z++] = {
-          segmentsOnLabelmap: Array.from(segmentsOnLabelmap),
-          pixelData,
-          rows,
-          columns,
-        };
-      }
-
-      const allSegmentsOnLabelmap = labelmaps2D.map(labelmap => labelmap.segmentsOnLabelmap);
-
-      const labelmap3D = {
-        segmentsOnLabelmap: Array.from(new Set(allSegmentsOnLabelmap.flat())),
-        metadata: [],
-        labelmaps2D,
-      };
-
-      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
-      const representations = segmentationService.getRepresentationsForSegmentation(segmentationId);
-
-      Object.entries(segmentationInOHIF.segments).forEach(([segmentIndex, segment]) => {
-        // segmentation service already has a color for each segment
-        if (!segment) {
-          return;
-        }
-
-        const { label } = segment;
-
-        const firstRepresentation = representations[0];
-        const color = segmentationService.getSegmentColor(
-          firstRepresentation.viewportId,
-          segmentationId,
-          segment.segmentIndex
-        );
-
-        const RecommendedDisplayCIELabValue = dcmjs.data.Colors.rgb2DICOMLAB(
-          color.slice(0, 3).map(value => value / 255)
-        ).map(value => Math.round(value));
-
-        const segmentMetadata = {
-          SegmentNumber: segmentIndex.toString(),
-          SegmentLabel: label,
-          SegmentAlgorithmType: segment?.algorithmType || 'MANUAL',
-          SegmentAlgorithmName: segment?.algorithmName || 'OHIF Brush',
-          RecommendedDisplayCIELabValue,
-          SegmentedPropertyCategoryCodeSequence: {
-            CodeValue: 'T-D0050',
-            CodingSchemeDesignator: 'SRT',
-            CodeMeaning: 'Tissue',
-          },
-          SegmentedPropertyTypeCodeSequence: {
-            CodeValue: 'T-D0050',
-            CodingSchemeDesignator: 'SRT',
-            CodeMeaning: 'Tissue',
-          },
-        };
-        labelmap3D.metadata[segmentIndex] = segmentMetadata;
-      });
-
-      const generatedSegmentation = generateSegmentation(
-        referencedImages,
-        labelmap3D,
-        metaData,
-        options
-      );
-
-      return generatedSegmentation;
-    },
-    /**
-     * Downloads a segmentation based on the provided segmentation ID.
-     * This function retrieves the associated segmentation and
-     * uses it to generate the corresponding DICOM dataset, which
-     * is then downloaded with an appropriate filename.
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.segmentationId - ID of the segmentation to be downloaded.
-     *
-     */
-    downloadSegmentation: ({ segmentationId }) => {
-      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
-      const generatedSegmentation = actions.generateSegmentation({
-        segmentationId,
-      });
-
-      downloadDICOMData(generatedSegmentation.dataset, `${segmentationInOHIF.label}`);
-    },
-    /**
-     * Stores a segmentation based on the provided segmentationId into a specified data source.
-     * The SeriesDescription is derived from user input or defaults to the segmentation label,
-     * and in its absence, defaults to 'Research Derived Series'.
-     *
-     * @param {Object} params - Parameters for the function.
-     * @param params.segmentationId - ID of the segmentation to be stored.
-     * @param params.dataSource - Data source where the generated segmentation will be stored.
-     *
-     * @returns {Object|void} Returns the naturalized report if successfully stored,
-     * otherwise throws an error.
-     */
-    storeSegmentation: async ({ segmentationId, dataSource }) => {
-      const segmentation = segmentationService.getSegmentation(segmentationId);
-
-      if (!segmentation) {
-        throw new Error('No segmentation found');
-      }
-
-      const { label } = segmentation;
-      const defaultDataSource = dataSource ?? extensionManager.getActiveDataSource()[0];
-
-      const {
-        value: reportName,
-        dataSourceName: selectedDataSource,
-        action,
-      } = await createReportDialogPrompt({
-        servicesManager,
-        extensionManager,
-        title: 'Store Segmentation',
-      });
-
-      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;
-
-          // DCMJS assigns a dummy study id during creation, and this can cause problems, so clearing it out
-          if (naturalizedReport.StudyID === 'No Study ID') {
-            naturalizedReport.StudyID = '';
-          }
-
-          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;
-        }
-      }
-    },
-    /**
-     * Converts segmentations into RTSS for download.
-     * This sample function retrieves all segentations and passes to
-     * cornerstone tool adapter to convert to DICOM RTSS format. It then
-     * converts dataset to downloadable blob.
-     *
-     */
-    downloadRTSS: async ({ segmentationId }) => {
-      const segmentations = segmentationService.getSegmentation(segmentationId);
-
-      // 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
-      );
-
-      try {
-        const reportBlob = datasetToBlob(RTSS);
-
-        //Create a URL for the binary.
-        const objectUrl = URL.createObjectURL(reportBlob);
-        window.location.assign(objectUrl);
-      } catch (e) {
-        console.warn(e);
-      }
-    },
-  };
-
-  const definitions = {
-    loadSegmentationsForViewport: {
-      commandFn: actions.loadSegmentationsForViewport,
-    },
-
-    generateSegmentation: {
-      commandFn: actions.generateSegmentation,
-    },
-    downloadSegmentation: {
-      commandFn: actions.downloadSegmentation,
-    },
-    storeSegmentation: {
-      commandFn: actions.storeSegmentation,
-    },
-    downloadRTSS: {
-      commandFn: actions.downloadRTSS,
-    },
-  };
-
-  return {
-    actions,
-    definitions,
-    defaultContext: 'SEGMENTATION',
-  };
-};
-
-export default commandsModule;
@@ -5,6 +5,7 @@ const segProtocol: Types.HangingProtocol.Protocol = {
  // Don't store this hanging protocol as it applies to the currently active
  // display set by default
  // cacheId: null,
+  hasUpdatedPriorsInformation: false,
  name: 'Segmentations',
  // Just apply this one when specifically listed
  protocolMatchingRules: [],
@@ -20,17 +21,6 @@ const segProtocol: Types.HangingProtocol.Protocol = {
      viewportType: 'stack',
      toolGroupId: 'default',
      allowUnmatchedView: true,
-      syncGroups: [
-        {
-          type: 'hydrateseg',
-          id: 'sameFORId',
-          source: true,
-          target: true,
-          // options: {
-          //   matchingRules: ['sameFOR'],
-          // },
-        },
-      ],
    },
    displaySets: [
      {
@@ -63,20 +53,7 @@ const segProtocol: Types.HangingProtocol.Protocol = {
      },
      viewports: [
        {
-          viewportOptions: {
-            allowUnmatchedView: true,
-            syncGroups: [
-              {
-                type: 'hydrateseg',
-                id: 'sameFORId',
-                source: true,
-                target: true,
-                // options: {
-                //   matchingRules: ['sameFOR'],
-                // },
-              },
-            ],
-          },
+          viewportOptions: { allowUnmatchedView: true },
          displaySets: [
            {
              id: 'segDisplaySetId',
@@ -0,0 +1,307 @@
+import vtkMath from '@kitware/vtk.js/Common/Core/Math';
+
+import { utils } from '@ohif/core';
+
+import { SOPClassHandlerId } from './id';
+import dcmjs from 'dcmjs';
+
+const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
+
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
+
+let loadPromises = {};
+
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager,
+  extensionManager
+) {
+  const instance = instances[0];
+
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID,
+    wadoRoot,
+    wadoUri,
+    wadoUriRoot,
+  } = instance;
+
+  const displaySet = {
+    Modality: 'SEG',
+    loading: false,
+    isReconstructable: true, // by default for now since it is a volumetric SEG currently
+    displaySetInstanceUID: utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPInstanceUID,
+    SeriesInstanceUID,
+    StudyInstanceUID,
+    SOPClassHandlerId,
+    SOPClassUID,
+    referencedImages: null,
+    referencedSeriesInstanceUID: null,
+    referencedDisplaySetInstanceUID: null,
+    isDerivedDisplaySet: true,
+    isLoaded: false,
+    isHydrated: false,
+    segments: {},
+    sopClassUids,
+    instance,
+    instances: [instance],
+    wadoRoot,
+    wadoUriRoot,
+    wadoUri,
+    isOverlayDisplaySet: true,
+  };
+
+  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
+
+  if (!referencedSeriesSequence) {
+    throw new Error('ReferencedSeriesSequence is missing for the SEG');
+  }
+
+  const referencedSeries = referencedSeriesSequence[0];
+
+  displaySet.referencedImages =
+    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
+
+  displaySet.getReferenceDisplaySet = () => {
+    const { displaySetService } = servicesManager.services;
+    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+      displaySet.referencedSeriesInstanceUID
+    );
+
+    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
+      throw new Error('Referenced DisplaySet is missing for the SEG');
+    }
+
+    const referencedDisplaySet = referencedDisplaySets[0];
+
+    displaySet.referencedDisplaySetInstanceUID =
+      referencedDisplaySet.displaySetInstanceUID;
+
+    // Todo: this needs to be able to work with other reference volumes (other than streaming) such as nifti, etc.
+    displaySet.referencedVolumeURI = referencedDisplaySet.displaySetInstanceUID;
+    const referencedVolumeId = `cornerstoneStreamingImageVolume:${displaySet.referencedVolumeURI}`;
+    displaySet.referencedVolumeId = referencedVolumeId;
+
+    return referencedDisplaySet;
+  };
+
+  displaySet.load = async ({ headers }) =>
+    await _load(displaySet, servicesManager, extensionManager, headers);
+
+  return [displaySet];
+}
+
+function _load(segDisplaySet, servicesManager, extensionManager, headers) {
+  const { SOPInstanceUID } = segDisplaySet;
+  const { segmentationService } = servicesManager.services;
+
+  if (
+    (segDisplaySet.loading || segDisplaySet.isLoaded) &&
+    loadPromises[SOPInstanceUID] &&
+    _segmentationExists(segDisplaySet, segmentationService)
+  ) {
+    return loadPromises[SOPInstanceUID];
+  }
+
+  segDisplaySet.loading = true;
+
+  // We don't want to fire multiple loads, so we'll wait for the first to finish
+  // and also return the same promise to any other callers.
+  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
+    if (
+      !segDisplaySet.segments ||
+      Object.keys(segDisplaySet.segments).length === 0
+    ) {
+      const segments = await _loadSegments(
+        extensionManager,
+        segDisplaySet,
+        headers
+      );
+
+      segDisplaySet.segments = segments;
+    }
+
+    const suppressEvents = true;
+    segmentationService
+      .createSegmentationForSEGDisplaySet(segDisplaySet, null, suppressEvents)
+      .then(() => {
+        segDisplaySet.loading = false;
+        resolve();
+      })
+      .catch(error => {
+        segDisplaySet.loading = false;
+        reject(error);
+      });
+  });
+
+  return loadPromises[SOPInstanceUID];
+}
+
+async function _loadSegments(extensionManager, segDisplaySet, headers) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.common'
+  );
+
+  const { dicomLoaderService } = utilityModule.exports;
+  const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
+    segDisplaySet,
+    null,
+    headers
+  );
+
+  const dicomData = DicomMessage.readFile(segArrayBuffer);
+  const dataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
+  dataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+
+  if (!Array.isArray(dataset.SegmentSequence)) {
+    dataset.SegmentSequence = [dataset.SegmentSequence];
+  }
+
+  const segments = _getSegments(dataset);
+  return segments;
+}
+
+function _segmentationExists(segDisplaySet, segmentationService) {
+  // This should be abstracted with the CornerstoneCacheService
+  return segmentationService.getSegmentation(
+    segDisplaySet.displaySetInstanceUID
+  );
+}
+
+function _getPixelData(dataset, segments) {
+  let frameSize = Math.ceil((dataset.Rows * dataset.Columns) / 8);
+  let nextOffset = 0;
+
+  Object.keys(segments).forEach(segmentKey => {
+    const segment = segments[segmentKey];
+    segment.numberOfFrames = segment.functionalGroups.length;
+    segment.size = segment.numberOfFrames * frameSize;
+    segment.offset = nextOffset;
+    nextOffset = segment.offset + segment.size;
+    const packedSegment = dataset.PixelData[0].slice(
+      segment.offset,
+      nextOffset
+    );
+
+    segment.pixelData = dcmjs.data.BitArray.unpack(packedSegment);
+    segment.geometry = geometryFromFunctionalGroups(
+      dataset,
+      segment.functionalGroups
+    );
+  });
+
+  return segments;
+}
+
+function geometryFromFunctionalGroups(dataset, perFrame) {
+  let pixelMeasures =
+    dataset.SharedFunctionalGroupsSequence.PixelMeasuresSequence;
+  let planeOrientation =
+    dataset.SharedFunctionalGroupsSequence.PlaneOrientationSequence;
+  let planePosition = perFrame[0].PlanePositionSequence; // TODO: assume sorted frames!
+
+  const geometry = {};
+
+  // NB: DICOM PixelSpacing is defined as Row then Column,
+  // unlike ImageOrientationPatient
+  let spacingBetweenSlices = pixelMeasures.SpacingBetweenSlices;
+  if (!spacingBetweenSlices) {
+    if (pixelMeasures.SliceThickness) {
+      console.log('Using SliceThickness as SpacingBetweenSlices');
+      spacingBetweenSlices = pixelMeasures.SliceThickness;
+    }
+  }
+  geometry.spacing = [
+    pixelMeasures.PixelSpacing[1],
+    pixelMeasures.PixelSpacing[0],
+    spacingBetweenSlices,
+  ].map(Number);
+
+  geometry.dimensions = [dataset.Columns, dataset.Rows, perFrame.length].map(
+    Number
+  );
+
+  let orientation = planeOrientation.ImageOrientationPatient.map(Number);
+  const columnStepToPatient = orientation.slice(0, 3);
+  const rowStepToPatient = orientation.slice(3, 6);
+  geometry.planeNormal = [];
+  vtkMath.cross(columnStepToPatient, rowStepToPatient, geometry.planeNormal);
+
+  let firstPosition = perFrame[0].PlanePositionSequence.ImagePositionPatient.map(
+    Number
+  );
+  let lastPosition = perFrame[
+    perFrame.length - 1
+  ].PlanePositionSequence.ImagePositionPatient.map(Number);
+  geometry.sliceStep = [];
+  vtkMath.subtract(lastPosition, firstPosition, geometry.sliceStep);
+  vtkMath.normalize(geometry.sliceStep);
+  geometry.direction = columnStepToPatient
+    .concat(rowStepToPatient)
+    .concat(geometry.sliceStep);
+  geometry.origin = planePosition.ImagePositionPatient.map(Number);
+
+  return geometry;
+}
+
+function _getSegments(dataset) {
+  const segments = {};
+
+  dataset.SegmentSequence.forEach(segment => {
+    const cielab = segment.RecommendedDisplayCIELabValue;
+    const rgba = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x =>
+      Math.round(x * 255)
+    );
+
+    rgba.push(255);
+    const segmentNumber = segment.SegmentNumber;
+
+    segments[segmentNumber] = {
+      color: rgba,
+      functionalGroups: [],
+      offset: null,
+      size: null,
+      pixelData: null,
+      label: segment.SegmentLabel,
+    };
+  });
+
+  // make a list of functional groups per segment
+  dataset.PerFrameFunctionalGroupsSequence.forEach(functionalGroup => {
+    const segmentNumber =
+      functionalGroup.SegmentIdentificationSequence.ReferencedSegmentNumber;
+    segments[segmentNumber].functionalGroups.push(functionalGroup);
+  });
+
+  return _getPixelData(dataset, segments);
+}
+
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+  const getDisplaySetsFromSeries = instances => {
+    return _getDisplaySetsFromSeries(
+      instances,
+      servicesManager,
+      extensionManager
+    );
+  };
+
+  return [
+    {
+      name: 'dicom-seg',
+      sopClassUids,
+      getDisplaySetsFromSeries,
+    },
+  ];
+}
+
+export default getSopClassHandlerModule;
@@ -1,254 +0,0 @@
-import { utils, Types as OhifTypes } from '@ohif/core';
-import i18n from '@ohif/i18n';
-import { metaData, eventTarget } from '@cornerstonejs/core';
-import { CONSTANTS, segmentation as cstSegmentation } from '@cornerstonejs/tools';
-import { adaptersSEG, Enums } from '@cornerstonejs/adapters';
-
-import { SOPClassHandlerId } from './id';
-import { dicomlabToRGB } from './utils/dicomlabToRGB';
-
-const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4', '1.2.840.10008.5.1.4.1.1.66.7'];
-
-const loadPromises = {};
-
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager
-) {
-  const instance = instances[0];
-
-  const {
-    StudyInstanceUID,
-    SeriesInstanceUID,
-    SOPInstanceUID,
-    SeriesDescription,
-    SeriesNumber,
-    SeriesDate,
-    SOPClassUID,
-    wadoRoot,
-    wadoUri,
-    wadoUriRoot,
-  } = instance;
-
-  const displaySet = {
-    Modality: 'SEG',
-    loading: false,
-    isReconstructable: false,
-    displaySetInstanceUID: utils.guid(),
-    SeriesDescription,
-    SeriesNumber,
-    SeriesDate,
-    SOPInstanceUID,
-    SeriesInstanceUID,
-    StudyInstanceUID,
-    SOPClassHandlerId,
-    SOPClassUID,
-    referencedImages: null,
-    referencedSeriesInstanceUID: null,
-    referencedDisplaySetInstanceUID: null,
-    isDerivedDisplaySet: true,
-    isLoaded: false,
-    isHydrated: false,
-    segments: {},
-    sopClassUids,
-    instance,
-    instances: [instance],
-    wadoRoot,
-    wadoUriRoot,
-    wadoUri,
-    isOverlayDisplaySet: true,
-    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SEG')}`,
-  };
-
-  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
-
-  if (!referencedSeriesSequence) {
-    console.error('ReferencedSeriesSequence is missing for the SEG');
-    return;
-  }
-
-  const referencedSeries = referencedSeriesSequence[0] || referencedSeriesSequence;
-
-  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
-  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
-  const { displaySetService } = servicesManager.services;
-  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
-    displaySet.referencedSeriesInstanceUID
-  );
-
-  const referencedDisplaySet = referencedDisplaySets[0];
-
-  if (!referencedDisplaySet) {
-    // subscribe to display sets added which means at some point it will be available
-    const { unsubscribe } = displaySetService.subscribe(
-      displaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      ({ displaySetsAdded }) => {
-        // here we can also do a little bit of search, since sometimes DICOM SEG
-        // does not contain the referenced display set uid , and we can just
-        // see which of the display sets added is more similar and assign it
-        // to the referencedDisplaySet
-        const addedDisplaySet = displaySetsAdded[0];
-        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
-          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
-          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
-          unsubscribe();
-        }
-      }
-    );
-  } else {
-    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
-    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
-  }
-
-  displaySet.load = async ({ headers }) =>
-    await _load(displaySet, servicesManager, extensionManager, headers);
-
-  return [displaySet];
-}
-
-function _load(
-  segDisplaySet,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager,
-  headers
-) {
-  const { SOPInstanceUID } = segDisplaySet;
-  const { segmentationService } = servicesManager.services;
-
-  if (
-    (segDisplaySet.loading || segDisplaySet.isLoaded) &&
-    loadPromises[SOPInstanceUID] &&
-    _segmentationExists(segDisplaySet)
-  ) {
-    return loadPromises[SOPInstanceUID];
-  }
-
-  segDisplaySet.loading = true;
-
-  // We don't want to fire multiple loads, so we'll wait for the first to finish
-  // and also return the same promise to any other callers.
-  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
-    if (!segDisplaySet.segments || Object.keys(segDisplaySet.segments).length === 0) {
-      try {
-        await _loadSegments({
-          extensionManager,
-          servicesManager,
-          segDisplaySet,
-          headers,
-        });
-      } catch (e) {
-        segDisplaySet.loading = false;
-        return reject(e);
-      }
-    }
-
-    segmentationService
-      .createSegmentationForSEGDisplaySet(segDisplaySet)
-      .then(() => {
-        segDisplaySet.loading = false;
-        resolve();
-      })
-      .catch(error => {
-        segDisplaySet.loading = false;
-        reject(error);
-      });
-  });
-
-  return loadPromises[SOPInstanceUID];
-}
-
-async function _loadSegments({
-  extensionManager,
-  servicesManager,
-  segDisplaySet,
-  headers,
-}: withAppTypes) {
-  const utilityModule = extensionManager.getModuleEntry(
-    '@ohif/extension-cornerstone.utilityModule.common'
-  );
-
-  const { segmentationService, uiNotificationService } = servicesManager.services;
-
-  const { dicomLoaderService } = utilityModule.exports;
-  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(segDisplaySet, null, headers);
-
-  const referencedDisplaySet = servicesManager.services.displaySetService.getDisplaySetByUID(
-    segDisplaySet.referencedDisplaySetInstanceUID
-  );
-
-  if (!referencedDisplaySet) {
-    throw new Error('referencedDisplaySet is missing for SEG');
-  }
-
-  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;
-  eventTarget.addEventListener(Enums.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
-    const { percentComplete } = evt.detail;
-    segmentationService._broadcastEvent(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, {
-      percentComplete,
-    });
-  });
-
-  const results = await adaptersSEG.Cornerstone3D.Segmentation.createFromDICOMSegBuffer(
-    imageIds,
-    arrayBuffer,
-    { metadataProvider: metaData, tolerance }
-  );
-
-  let usedRecommendedDisplayCIELabValue = true;
-  results.segMetadata.data.forEach((data, i) => {
-    if (i > 0) {
-      data.rgba = data.RecommendedDisplayCIELabValue;
-
-      if (data.rgba) {
-        data.rgba = dicomlabToRGB(data.rgba);
-      } else {
-        usedRecommendedDisplayCIELabValue = false;
-        data.rgba = CONSTANTS.COLOR_LUT[i % CONSTANTS.COLOR_LUT.length];
-      }
-    }
-  });
-
-  if (!usedRecommendedDisplayCIELabValue) {
-    // Display a notification about the non-utilization of RecommendedDisplayCIELabValue
-    uiNotificationService.show({
-      title: 'DICOM SEG import',
-      message:
-        'RecommendedDisplayCIELabValue not found for one or more segments. The default color was used instead.',
-      type: 'warning',
-      duration: 5000,
-    });
-  }
-
-  Object.assign(segDisplaySet, results);
-}
-
-function _segmentationExists(segDisplaySet) {
-  return cstSegmentation.state.getSegmentation(segDisplaySet.displaySetInstanceUID);
-}
-
-function getSopClassHandlerModule(params: OhifTypes.Extensions.ExtensionParams) {
-  const { servicesManager, extensionManager } = params;
-  const getDisplaySetsFromSeries = instances => {
-    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
-  };
-
-  return [
-    {
-      name: 'dicom-seg',
-      sopClassUids,
-      getDisplaySetsFromSeries,
-    },
-  ];
-}
-
-export default getSopClassHandlerModule;
@@ -1,72 +0,0 @@
-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 }) => {
-        // Todo: we need to pass in the button section Id since we are kind of
-        // forcing the button to have black background since initially
-        // it is designed for the toolbox not the toolbar on top
-        // we should then branch the buttonSectionId to have different styles
-        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
-        if (!segmentations?.length) {
-          return {
-            disabled: true,
-            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,
-            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,
-            disabledText: disabledText ?? 'Not available on the current viewport',
-          };
-        }
-
-        const isPrimaryActive = toolNames
-          ? toolNames.includes(toolGroup.getActivePrimaryMouseButtonTool())
-          : toolGroup.getActivePrimaryMouseButtonTool() === toolName;
-
-        return {
-          disabled: false,
-          isActive: isPrimaryActive,
-        };
-      },
-    },
-  ];
-}
@@ -1,13 +1,16 @@
 import { id } from './id';
 import React from 'react';

+import { Types } from '@ohif/core';
+
 import getSopClassHandlerModule from './getSopClassHandlerModule';
+import PanelSegmentation from './panels/PanelSegmentation';
 import getHangingProtocolModule from './getHangingProtocolModule';
-import getCommandsModule from './commandsModule';
-import { getToolbarModule } from './getToolbarModule';

 const Component = React.lazy(() => {
-  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport');
+  return import(
+    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport'
+  );
 });

 const OHIFCornerstoneSEGViewport = props => {
@@ -27,21 +30,53 @@ const extension = {
   * You ID can be anything you want, but it should be unique.
   */
  id,
-  getCommandsModule,
-  getToolbarModule,
-  getViewportModule({ servicesManager, extensionManager, commandsManager }) {
+
+  /**
+   * PanelModule should provide a list of panels that will be available in OHIF
+   * for Modes to consume and render. Each panel is defined by a {name,
+   * iconName, iconLabel, label, component} object. Example of a panel module
+   * is the StudyBrowserPanel that is provided by the default extension in OHIF.
+   */
+  getPanelModule: ({
+    servicesManager,
+    commandsManager,
+    extensionManager,
+  }): Types.Panel[] => {
+    const wrappedPanelSegmentation = () => {
+      return (
+        <PanelSegmentation
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+        />
+      );
+    };
+
+    return [
+      {
+        name: 'panelSegmentation',
+        iconName: 'tab-segmentation',
+        iconLabel: 'Segmentation',
+        label: 'Segmentation',
+        component: wrappedPanelSegmentation,
+      },
+    ];
+  },
+
+  getViewportModule({ servicesManager, extensionManager }) {
    const ExtendedOHIFCornerstoneSEGViewport = props => {
      return (
        <OHIFCornerstoneSEGViewport
          servicesManager={servicesManager}
          extensionManager={extensionManager}
-          commandsManager={commandsManager}
          {...props}
        />
      );
    };

-    return [{ name: 'dicom-seg', component: ExtendedOHIFCornerstoneSEGViewport }];
+    return [
+      { name: 'dicom-seg', component: ExtendedOHIFCornerstoneSEGViewport },
+    ];
  },
  /**
   * SopClassHandlerModule should provide a list of sop class handlers that will be
@@ -53,4 +88,4 @@ const extension = {
  getHangingProtocolModule,
 };

-export default extension;
+export default extension;
@@ -0,0 +1,282 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { SegmentationGroupTable } from '@ohif/ui';
+import callInputDialog from './callInputDialog';
+
+import { useTranslation } from 'react-i18next';
+
+export default function PanelSegmentation({
+  servicesManager,
+  commandsManager,
+}) {
+  const { segmentationService, uiDialogService } = servicesManager.services;
+
+  const { t } = useTranslation('PanelSegmentation');
+  const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
+  const [segmentationConfiguration, setSegmentationConfiguration] = useState(
+    segmentationService.getConfiguration()
+  );
+
+  const [segmentations, setSegmentations] = useState(() =>
+    segmentationService.getSegmentations()
+  );
+
+  const [isMinimized, setIsMinimized] = useState({});
+
+  const onToggleMinimizeSegmentation = useCallback(
+    id => {
+      setIsMinimized(prevState => ({
+        ...prevState,
+        [id]: !prevState[id],
+      }));
+    },
+    [setIsMinimized]
+  );
+
+  // Only expand the last segmentation added to the list and collapse the rest
+  useEffect(() => {
+    const lastSegmentationId = segmentations[segmentations.length - 1]?.id;
+    if (lastSegmentationId) {
+      setIsMinimized(prevState => ({
+        ...prevState,
+        [lastSegmentationId]: false,
+      }));
+    }
+  }, [segmentations, setIsMinimized]);
+
+  useEffect(() => {
+    // ~~ Subscription
+    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
+    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
+    const removed = segmentationService.EVENTS.SEGMENTATION_REMOVED;
+    const subscriptions = [];
+
+    [added, updated, removed].forEach(evt => {
+      const { unsubscribe } = segmentationService.subscribe(evt, () => {
+        const segmentations = segmentationService.getSegmentations();
+        setSegmentations(segmentations);
+        setSegmentationConfiguration(segmentationService.getConfiguration());
+      });
+      subscriptions.push(unsubscribe);
+    });
+
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, []);
+
+  const onSegmentationClick = (segmentationId: string) => {
+    segmentationService.setActiveSegmentationForToolGroup(segmentationId);
+  };
+
+  const onSegmentationDelete = (segmentationId: string) => {
+    segmentationService.remove(segmentationId);
+  };
+
+  const getToolGroupIds = segmentationId => {
+    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(
+      segmentationId
+    );
+
+    return toolGroupIds;
+  };
+
+  const onSegmentClick = (segmentationId, segmentIndex) => {
+    segmentationService.setActiveSegmentForSegmentation(
+      segmentationId,
+      segmentIndex
+    );
+
+    const toolGroupIds = getToolGroupIds(segmentationId);
+
+    toolGroupIds.forEach(toolGroupId => {
+      // const toolGroupId =
+      segmentationService.setActiveSegmentationForToolGroup(
+        segmentationId,
+        toolGroupId
+      );
+      segmentationService.jumpToSegmentCenter(
+        segmentationId,
+        segmentIndex,
+        toolGroupId
+      );
+    });
+  };
+
+  const onSegmentEdit = (segmentationId, segmentIndex) => {
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+
+    const segment = segmentation.segments[segmentIndex];
+    const { label } = segment;
+
+    callInputDialog(uiDialogService, label, (label, actionId) => {
+      if (label === '') {
+        return;
+      }
+
+      segmentationService.setSegmentLabelForSegmentation(
+        segmentationId,
+        segmentIndex,
+        label
+      );
+    });
+  };
+
+  const onSegmentationEdit = segmentationId => {
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const { label } = segmentation;
+
+    callInputDialog(uiDialogService, label, (label, actionId) => {
+      if (label === '') {
+        return;
+      }
+
+      segmentationService.addOrUpdateSegmentation(
+        {
+          id: segmentationId,
+          label,
+        },
+        false, // suppress event
+        true // notYetUpdatedAtSource
+      );
+    });
+  };
+
+  const onSegmentColorClick = (segmentationId, segmentIndex) => {
+    // Todo: Implement color picker later
+    return;
+  };
+
+  const onSegmentDelete = (segmentationId, segmentIndex) => {
+    // segmentationService.removeSegmentFromSegmentation(
+    //   segmentationId,
+    //   segmentIndex
+    // );
+    console.warn('not implemented yet');
+  };
+
+  const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const segmentInfo = segmentation.segments[segmentIndex];
+    const isVisible = !segmentInfo.isVisible;
+    const toolGroupIds = getToolGroupIds(segmentationId);
+
+    // Todo: right now we apply the visibility to all tool groups
+    toolGroupIds.forEach(toolGroupId => {
+      segmentationService.setSegmentVisibility(
+        segmentationId,
+        segmentIndex,
+        isVisible,
+        toolGroupId
+      );
+    });
+  };
+
+  const onToggleSegmentationVisibility = segmentationId => {
+    segmentationService.toggleSegmentationVisibility(segmentationId);
+  };
+
+  const _setSegmentationConfiguration = useCallback(
+    (segmentationId, key, value) => {
+      segmentationService.setConfiguration({
+        segmentationId,
+        [key]: value,
+      });
+    },
+    [segmentationService]
+  );
+
+  return (
+    <div className="flex flex-col flex-auto min-h-0 justify-between mt-1">
+      {/* show segmentation table */}
+      {segmentations?.length ? (
+        <SegmentationGroupTable
+          title={t('Segmentations')}
+          showAddSegmentation={false}
+          segmentations={segmentations}
+          isMinimized={isMinimized}
+          activeSegmentationId={selectedSegmentationId || ''}
+          onSegmentationClick={onSegmentationClick}
+          onSegmentationDelete={onSegmentationDelete}
+          onSegmentationEdit={onSegmentationEdit}
+          onSegmentClick={onSegmentClick}
+          onSegmentEdit={onSegmentEdit}
+          onSegmentColorClick={onSegmentColorClick}
+          onSegmentDelete={onSegmentDelete}
+          onToggleSegmentVisibility={onToggleSegmentVisibility}
+          onToggleSegmentationVisibility={onToggleSegmentationVisibility}
+          onToggleMinimizeSegmentation={onToggleMinimizeSegmentation}
+          segmentationConfig={{ initialConfig: segmentationConfiguration }}
+          setRenderOutline={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderOutline',
+              value
+            )
+          }
+          setOutlineOpacityActive={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'outlineOpacity',
+              value
+            )
+          }
+          setRenderFill={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderFill',
+              value
+            )
+          }
+          setRenderInactiveSegmentations={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderInactiveSegmentations',
+              value
+            )
+          }
+          setOutlineWidthActive={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'outlineWidthActive',
+              value
+            )
+          }
+          setFillAlpha={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'fillAlpha',
+              value
+            )
+          }
+          setFillAlphaInactive={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'fillAlphaInactive',
+              value
+            )
+          }
+        />
+      ) : null}
+    </div>
+  );
+}
+
+PanelSegmentation.propTypes = {
+  commandsManager: PropTypes.shape({
+    runCommand: PropTypes.func.isRequired,
+  }),
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      segmentationService: PropTypes.shape({
+        getSegmentation: PropTypes.func.isRequired,
+        getSegmentations: PropTypes.func.isRequired,
+        toggleSegmentationVisibility: PropTypes.func.isRequired,
+        subscribe: PropTypes.func.isRequired,
+        EVENTS: PropTypes.object.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Input, Dialog } from '@ohif/ui';
+
+function callInputDialog(uiDialogService, label, callback) {
+  const dialogId = 'enter-segment-label';
+
+  const onSubmitHandler = ({ action, value }) => {
+    switch (action.id) {
+      case 'save':
+        callback(value.label, action.id);
+        break;
+      case 'cancel':
+        callback('', action.id);
+        break;
+    }
+    uiDialogService.dismiss({ id: dialogId });
+  };
+
+  if (uiDialogService) {
+    uiDialogService.create({
+      id: dialogId,
+      centralize: true,
+      isDraggable: false,
+      showOverlay: true,
+      content: Dialog,
+      contentProps: {
+        title: 'Enter Segment Label',
+        value: { label },
+        noCloseButton: true,
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'primary' },
+          { id: 'save', text: 'Confirm', type: 'secondary' },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          return (
+            <div className="p-4 bg-primary-dark">
+              <Input
+                autoFocus
+                className="mt-2 bg-black border-primary-main"
+                type="text"
+                containerClassName="mr-2"
+                value={value.label}
+                onChange={event => {
+                  event.persist();
+                  setValue(value => ({ ...value, label: event.target.value }));
+                }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    onSubmitHandler({ value, action: { id: 'save' } });
+                  }
+                }}
+              />
+            </div>
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callInputDialog;
@@ -0,0 +1,33 @@
+// Todo: use defaults in cs3d
+const initialState = {
+  renderOutline: true,
+  renderFill: true,
+  outlineOpacity: 0.9,
+  outlineWidth: 3,
+  fillOpacity: 0.9,
+  fillOpacityInactive: 0.8,
+  renderInactiveSegmentations: true,
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'RENDER_OUTLINE':
+      return { ...state, renderOutline: action.payload.value };
+    case 'RENDER_FILL':
+      return { ...state, renderFill: action.payload.value };
+    case 'SET_OUTLINE_OPACITY':
+      return { ...state, outlineOpacity: action.payload.value };
+    case 'SET_OUTLINE_WIDTH':
+      return { ...state, outlineWidth: action.payload.value };
+    case 'SET_FILL_OPACITY':
+      return { ...state, fillOpacity: action.payload.value };
+    case 'SET_FILL_OPACITY_INACTIVE':
+      return { ...state, fillOpacityInactive: action.payload.value };
+    case 'RENDER_INACTIVE_SEGMENTATIONS':
+      return { ...state, renderInactiveSegmentations: action.payload.value };
+    default:
+      return state;
+  }
+};
+
+export { initialState, reducer };
@@ -1,4 +0,0 @@
-export enum SegmentationPanelMode {
-  Expanded = 'expanded',
-  Dropdown = 'dropdown',
-}
@@ -0,0 +1,69 @@
+async function _hydrateSEGDisplaySet({
+  segDisplaySet,
+  viewportIndex,
+  servicesManager,
+}) {
+  const {
+    segmentationService,
+    hangingProtocolService,
+    viewportGridService,
+  } = servicesManager.services;
+
+  const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
+
+  let segmentationId = null;
+
+  // We need the hydration to notify panels about the new segmentation added
+  const suppressEvents = false;
+
+  segmentationId = await segmentationService.createSegmentationForSEGDisplaySet(
+    segDisplaySet,
+    segmentationId,
+    suppressEvents
+  );
+
+  segmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
+
+  const { viewports } = viewportGridService.getState();
+
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+    viewportIndex,
+    displaySetInstanceUID
+  );
+
+  // Todo: fix this after we have a better way for stack viewport segmentations
+
+  // check every viewport in the viewports to see if the displaySetInstanceUID
+  // is being displayed, if so we need to update the viewport to use volume viewport
+  // (if already is not using it) since Cornerstone3D currently only supports
+  // volume viewport for segmentation
+  viewports.forEach((viewport, index) => {
+    if (index === viewportIndex) {
+      return;
+    }
+
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
+      viewport.displaySetInstanceUIDs,
+      segDisplaySet.displaySetInstanceUID
+    );
+
+    if (shouldDisplaySeg) {
+      updatedViewports.push({
+        viewportIndex: index,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          initialImageOptions: {
+            preset: 'middle',
+          },
+        },
+      });
+    }
+  });
+
+  // Do the entire update at once
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+
+  return true;
+}
+
+export default _hydrateSEGDisplaySet;
@@ -1,14 +0,0 @@
-import dcmjs from 'dcmjs';
-
-/**
- * Converts a CIELAB color to an RGB color using the dcmjs library.
- * @param cielab - The CIELAB color to convert.
- * @returns The RGB color as an array of three integers between 0 and 255.
- */
-function dicomlabToRGB(cielab: number[]): number[] {
-  const rgb = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x => Math.round(x * 255));
-
-  return rgb;
-}
-
-export { dicomlabToRGB };
@@ -1,14 +1,12 @@
-function createSEGToolGroupAndAddTools({
-  commandsManager,
-  toolGroupService,
+function createSEGToolGroupAndAddTools(
+  ToolGroupService,
  customizationService,
-  toolGroupId,
-}) {
-  const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');
+  toolGroupId
+) {
+  const { tools } =
+    customizationService.get('cornerstone.overlayViewportTools') ?? {};

-  const updatedTools = commandsManager.run('initializeSegmentLabelTool', { tools });
-
-  return toolGroupService.createToolGroupAndAddTools(toolGroupId, updatedTools);
+  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
 }

 export default createSEGToolGroupAndAddTools;
@@ -1,25 +1,67 @@
-import { utils, Types } from '@ohif/extension-cornerstone';
+import hydrateSEGDisplaySet from './_hydrateSEG';
+
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};

 function promptHydrateSEG({
  servicesManager,
  segDisplaySet,
-  viewportId,
-  preHydrateCallbacks,
-  hydrateCallback,
-}: {
-  servicesManager: AppTypes.ServicesManager;
-  segDisplaySet: AppTypes.DisplaySet;
-  viewportId: string;
-  preHydrateCallbacks?: Types.HydrationCallback[];
-  hydrateCallback: Types.HydrationCallback;
+  viewportIndex,
 }) {
-  return utils.promptHydrationDialog({
-    servicesManager,
-    viewportId,
-    displaySet: segDisplaySet as AppTypes.DisplaySet,
-    preHydrateCallbacks,
-    hydrateCallback,
-    type: 'SEG',
+  const { uiViewportDialogService } = servicesManager.services;
+
+  return new Promise(async function(resolve, reject) {
+    const promptResult = await _askHydrate(
+      uiViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      const isHydrated = await hydrateSEGDisplaySet({
+        segDisplaySet,
+        viewportIndex,
+        servicesManager,
+      });
+
+      resolve(isHydrated);
+    }
+  });
+}
+
+function _askHydrate(uiViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Do you want to open this Segmentation?';
+    const actions = [
+      {
+        type: 'secondary',
+        text: 'No',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.HYDRATE_SEG,
+      },
+    ];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+
+    uiViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
  });
 }

@@ -1,30 +1,42 @@
+import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useViewportGrid } from '@ohif/ui-next';
+import { useTranslation } from 'react-i18next';
+import OHIF, { utils } from '@ohif/core';
+import {
+  LoadingIndicatorTotalPercent,
+  useViewportGrid,
+  ViewportActionBar,
+} from '@ohif/ui';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
-import { usePositionPresentationStore, OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-import { useSystem } from '@ohif/core/src/contextProviders/SystemProvider';
+import hydrateSEGDisplaySet from '../utils/_hydrateSEG';
+import _getStatusComponent from './_getStatusComponent';

+const { formatDate } = utils;
 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';

-function OHIFCornerstoneSEGViewport(props: withAppTypes) {
-  const { servicesManager, commandsManager } = useSystem();
-  const { children, displaySets, viewportOptions } = props as {
-    children: React.ReactNode;
-    displaySets: AppTypes.DisplaySet[];
-    viewportOptions: AppTypes.ViewportOptions;
-  };
-  const viewportId = viewportOptions.viewportId;
+function OHIFCornerstoneSEGViewport(props) {
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    viewportIndex,
+    viewportLabel,
+    servicesManager,
+    extensionManager,
+  } = props;

-  const { displaySetService, toolGroupService, segmentationService, customizationService } =
-    servicesManager.services;
+  const { t } = useTranslation('SEGViewport');

-  const LoadingIndicatorTotalPercent = customizationService.getCustomization(
-    'ui.loadingIndicatorTotalPercent'
-  );
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    uiNotificationService,
+    customizationService,
+  } = servicesManager.services;

-  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;
+  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportIndex}`;

  // SEG viewport will always have a single display set
  if (displaySets.length > 1) {
@@ -32,17 +44,21 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  }

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

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

  // Hydration means that the SEG is opened and segments are loaded into the
  // segmentation panel, and SEG is also rendered on any viewport that is in the
  // same frameOfReferenceUID as the referencedSeriesUID of the SEG. However,
  // loading basically means SEG loading over network and bit unpacking of the
  // SEG data.
+  const [isHydrated, setIsHydrated] = useState(segDisplaySet.isHydrated);
  const [segIsLoading, setSegIsLoading] = useState(!segDisplaySet.isLoaded);
+  const [element, setElement] = useState(null);
  const [processingProgress, setProcessingProgress] = useState({
    percentComplete: null,
    totalSegments: null,
@@ -51,101 +67,121 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  // refs
  const referencedDisplaySetRef = useRef(null);

-  const { viewports, activeViewportId } = viewportGrid;
-
-  const referencedDisplaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
-  // If the referencedDisplaySetInstanceUID is not found, it means the SEG series is being
-  // launched without its corresponding referenced display set (e.g., the SEG series is launched using
-  // series launch /mode?StudyInstanceUIDs=&SeriesInstanceUID).
-  // In such cases, we attempt to handle this scenario gracefully by
-  // invoking a custom handler. Ideally, if a user tries to launch a series that isn't viewable,
-  // (eg.: we can prompt them with an explanation and provide a link to the full study).
-  if (!referencedDisplaySetInstanceUID) {
-    const missingReferenceDisplaySetHandler = customizationService.getCustomization(
-      'missingReferenceDisplaySetHandler'
-    );
-    const { handled } = missingReferenceDisplaySetHandler();
-    if (handled) {
-      return;
-    }
-  }
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    referencedDisplaySetInstanceUID
-  );
+  const { viewports, activeViewportIndex } = viewportGrid;

+  const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
-    referencedDisplaySet,
-    segDisplaySet
+    referencedDisplaySet
  );

  referencedDisplaySetRef.current = {
    displaySet: referencedDisplaySet,
    metadata: referencedDisplaySetMetadata,
  };
+  /**
+   * OnElementEnabled callback which is called after the cornerstoneExtension
+   * has enabled the element. Note: we delegate all the image rendering to
+   * cornerstoneExtension, so we don't need to do anything here regarding
+   * the image rendering, element enabling etc.
+   */
+  const onElementEnabled = evt => {
+    setElement(evt.detail.element);
+  };
+
+  const onElementDisabled = () => {
+    setElement(null);
+  };

  const getCornerstoneViewport = useCallback(() => {
+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );
+
+    const {
+      displaySet: referencedDisplaySet,
+    } = referencedDisplaySetRef.current;
+
+    // Todo: jump to the center of the first segment
    return (
-      <OHIFCornerstoneViewport
+      <Component
        {...props}
-        displaySets={[segDisplaySet]}
+        displaySets={[referencedDisplaySet, segDisplaySet]}
        viewportOptions={{
-          viewportType: viewportOptions.viewportType,
+          viewportType: 'volume',
          toolGroupId: toolGroupId,
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
-          presentationIds: viewportOptions.presentationIds,
        }}
-        onElementEnabled={evt => {
-          props.onElementEnabled?.(evt);
-        }}
-      />
+        onElementEnabled={onElementEnabled}
+        onElementDisabled={onElementDisabled}
+        // initialImageIndex={initialImageIndex}
+      ></Component>
    );
-  }, [viewportId, segDisplaySet, toolGroupId, props, viewportOptions]);
+  }, [viewportIndex, segDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      direction = direction === 'left' ? -1 : 1;
+      const segmentationId = segDisplaySet.displaySetInstanceUID;
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      // Segment 0 is always background
+
+      if (newSelectedSegmentIndex > numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      segmentationService.jumpToSegmentCenter(
+        segmentationId,
+        newSelectedSegmentIndex,
+        toolGroupId
+      );
+      setSelectedSegment(newSelectedSegmentIndex);
+    },
+    [selectedSegment]
+  );

  useEffect(() => {
    if (segIsLoading) {
      return;
    }

-    // if not active viewport, return
-    if (viewportId !== activeViewportId) {
-      return;
-    }
-
    promptHydrateSEG({
      servicesManager,
-      viewportId,
+      viewportIndex,
      segDisplaySet,
-      hydrateCallback: async () => {
-        await commandsManager.runCommand('hydrateSecondaryDisplaySet', {
-          displaySet: segDisplaySet,
-          viewportId,
-        });
-
-        return true;
-      },
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
    });
-  }, [servicesManager, viewportId, segDisplaySet, segIsLoading, commandsManager, activeViewportId]);
+  }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);

  useEffect(() => {
-    // on new seg display set, remove all segmentations from all viewports
-    segmentationService.clearSegmentationRepresentations(viewportId);
-
    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
      evt => {
-        if (evt.segDisplaySet.displaySetInstanceUID === segDisplaySet.displaySetInstanceUID) {
+        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,
-            },
+        if (evt.overlappingSegments) {
+          uiNotificationService.show({
+            title: 'Overlapping Segments',
+            message:
+              'Overlapping segments detected which is not currently supported',
+            type: 'warning',
          });
        }
      }
@@ -179,10 +215,12 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
      ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports.get(activeViewportId);
-        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
+        const activeViewport = viewports[activeViewportIndex];
+        if (
+          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
+        ) {
          viewportGridService.setDisplaySetsForViewport({
-            viewportId: activeViewportId,
+            viewportIndex: activeViewportIndex,
            displaySetInstanceUIDs: [],
          });
        }
@@ -201,36 +239,39 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
      return;
    }

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

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

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

+  useEffect(() => {
+    setIsHydrated(segDisplaySet.isHydrated);
+
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentationFromToolGroup(
+        toolGroupId
+      );
+      referencedDisplaySetRef.current = null;
+    };
+  }, [segDisplaySet]);
+
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;

@@ -247,19 +288,75 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
      return (
        child &&
        React.cloneElement(child, {
-          viewportId,
+          viewportIndex,
          key: index,
        })
      );
    });
  }

+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+    ManufacturerModelName,
+    StudyDate,
+    SeriesDescription,
+    SpacingBetweenSlices,
+  } = referencedDisplaySetRef.current.metadata;
+
+  const onStatusClick = async () => {
+    const isHydrated = await hydrateSEGDisplaySet({
+      segDisplaySet,
+      viewportIndex,
+      servicesManager,
+    });
+
+    setIsHydrated(isHydrated);
+  };
+
  return (
    <>
-      <div className="relative flex h-full w-full flex-row overflow-hidden">
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onSegmentChange}
+        getStatusComponent={() => {
+          return _getStatusComponent({
+            isHydrated,
+            onStatusClick,
+          });
+        }}
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          seriesDescription: `SEG Viewport ${SeriesDescription}`,
+          patientInformation: {
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              SpacingBetweenSlices !== undefined
+                ? `${SpacingBetweenSlices.toFixed(2)}mm`
+                : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
+      <div className="relative flex flex-row w-full h-full overflow-hidden">
        {segIsLoading && (
          <LoadingIndicatorTotalPercent
-            className="h-full w-full"
+            className="w-full h-full"
            totalNumbers={processingProgress.totalSegments}
            percentComplete={processingProgress.percentComplete}
            loadingText="Loading SEG..."
@@ -272,34 +369,32 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
  );
 }

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

-  const SharedFunctionalGroup = Array.isArray(SharedFunctionalGroupsSequence)
-    ? SharedFunctionalGroupsSequence[0]
-    : SharedFunctionalGroupsSequence;
-
-  const { PixelMeasuresSequence } = SharedFunctionalGroup;
-
-  const PixelMeasures = Array.isArray(PixelMeasuresSequence)
-    ? PixelMeasuresSequence[0]
-    : PixelMeasuresSequence;
-
-  const { SpacingBetweenSlices, SliceThickness } = PixelMeasures;
+OHIFCornerstoneSEGViewport.defaultProps = {
+  customProps: {},
+};

+function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
  const image0 = referencedDisplaySet.images[0];
  const referencedDisplaySetMetadata = {
    PatientID: image0.PatientID,
    PatientName: image0.PatientName,
    PatientSex: image0.PatientSex,
    PatientAge: image0.PatientAge,
-    SliceThickness: image0.SliceThickness || SliceThickness,
+    SliceThickness: image0.SliceThickness,
    StudyDate: image0.StudyDate,
    SeriesDescription: image0.SeriesDescription,
    SeriesInstanceUID: image0.SeriesInstanceUID,
    SeriesNumber: image0.SeriesNumber,
    ManufacturerModelName: image0.ManufacturerModelName,
-    SpacingBetweenSlices: image0.SpacingBetweenSlices || SpacingBetweenSlices,
+    SpacingBetweenSlices: image0.SpacingBetweenSlices,
  };

  return referencedDisplaySetMetadata;
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon, Tooltip } from '@ohif/ui';
+
+
+export default function _getStatusComponent({ isHydrated, onStatusClick }) {
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  const {t} = useTranslation("Common");
+  const loadStr = t("LOAD");
+
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => <Icon name="status-alert" />;
+
+      ToolTipMessage = () => (
+        <div>This Segmentation is loaded in the segmentation panel</div>
+      );
+      break;
+  case false:
+      StatusIcon = () => <Icon name="status-untracked" />;
+
+      ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
+  }
+
+  const StatusArea = () => (
+    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
+      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
+        <StatusIcon />
+        <span className="ml-1">SEG</span>
+      </div>
+      {!isHydrated && (
+        <div
+          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={onStatusClick}
+        >
+          {loadStr}
+        </div>
+      )}
+    </div>
+  );
+
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+          <StatusArea />
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}
@@ -41,7 +41,13 @@ module.exports = (env, argv) => {
      libraryTarget: 'umd',
      filename: pkg.main,
    },
-    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
+    externals: [
+      /\b(vtk.js)/,
+      /\b(dcmjs)/,
+      /\b(gl-matrix)/,
+      /^@ohif/,
+      /^@cornerstonejs/,
+    ],
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.12.0-beta.72",
+  "version": "3.5.0",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -23,8 +23,6 @@
    "ohif-extension"
  ],
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:cornerstone": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
@@ -34,21 +32,21 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.12.0-beta.72",
-    "@ohif/extension-cornerstone": "3.12.0-beta.72",
-    "@ohif/extension-measurement-tracking": "3.12.0-beta.72",
-    "@ohif/ui": "3.12.0-beta.72",
-    "dcmjs": "0.43.1",
-    "dicom-parser": "1.8.21",
-    "hammerjs": "2.0.8",
-    "prop-types": "15.8.1",
-    "react": "18.3.1"
+    "@ohif/core": "3.5.0",
+    "@ohif/extension-cornerstone": "3.5.0",
+    "@ohif/extension-measurement-tracking": "3.5.0",
+    "@ohif/ui": "3.5.0",
+    "dcmjs": "^0.29.5",
+    "dicom-parser": "^1.8.9",
+    "hammerjs": "^2.0.8",
+    "prop-types": "^15.6.2",
+    "react": "^17.0.2"
  },
  "dependencies": {
-    "@babel/runtime": "7.28.2",
-    "@cornerstonejs/adapters": "4.5.19",
-    "@cornerstonejs/core": "4.5.19",
-    "@cornerstonejs/tools": "4.5.19",
-    "classnames": "2.5.1"
+    "@babel/runtime": "^7.20.13",
+    "@cornerstonejs/adapters": "^1.1.0",
+    "@cornerstonejs/core": "^1.1.0",
+    "@cornerstonejs/tools": "^1.1.0",
+    "classnames": "^2.3.2"
  }
 }
Author	SHA1	Message	Date
ohif-bot	fa4ee5c559	chore(version): Update package versions [skip ci]	2023-06-07 00:14:02 +00:00
ohif-bot	cd58560e9c	chore(version): version.json [skip ci]	2023-06-07 00:13:59 +00:00
Alireza	16afa740b6	feat(app): change ohif viewer to ohif app (#3451 )	2023-06-06 20:06:31 -04:00
Alireza	6715ad9bd6	chore(build): try to build demo and docs	2023-06-01 08:13:36 -04:00
@@ -1 +1 @@
 .9.0
 .14.0