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

chore(version): version.json [skip ci]
feat(displayArea): add display area to hanging protocol (#3691 )
2023-10-03 19:28:23 +00:00 · 2023-10-03 19:28:14 +00:00 · 2023-10-03 15:18:15 -04:00 · 2023-10-03 18:36:48 +00:00 · 2023-10-03 18:36:39 +00:00 · 2023-10-03 14:26:31 -04:00
920 changed files with 41366 additions and 25877 deletions
@@ -13,22 +13,24 @@ version: 2.1
 ##
 orbs:
  codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@1.26.0
+  cypress: cypress-io/cypress@3.1.4
+
 executors:
-  # Custom executor to override Cypress config
-  deploy-to-prod-executor:
+  cypress-custom:
+    description: |
+      Single Docker container used to run Cypress Tests
    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'
+      - image: cimg/node:<< parameters.node-version >>-browsers
+    parameters:
+      node-version:
+        default: '18.16.1'
+        description: |
+          The version of Node to run your tests with.
+        type: string

 defaults: &defaults
  docker:
-    - image: cimg/node:16.14-browsers
+    - image: cimg/node:18.18
      environment:
        TERM: xterm # Enable colors in term
        QUICK_BUILD: true
@@ -43,6 +45,7 @@ jobs:
    steps:
      # Update yarn
      - run: yarn -v
+      - run: node --version
      # Checkout code and ALL Git Tags
      - checkout
      - restore_cache:
@@ -90,43 +93,6 @@ 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
  ###
@@ -177,62 +143,52 @@ jobs:
            - commit.txt
            - version.json

-  # 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
-
-  # 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
+  # just to make sure later on we can publish them
+  BUILD_PACKAGES_QUICK:
+    <<: *defaults
+    steps:
+      - 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: 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: |
+            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: Increase the event emitter limit
+          command: |
+            node ./increaseEventEmitterLimit.mjs
+      - run:
+          name: build half of the packages (to avoid out of memory in circleci)
+          command: |
+            yarn run build:package-all
+      - run:
+          name: build the other half of the packages
+          command: |
+            yarn run build:package-all-1

  ###
  # Workflow: RELEASE
@@ -269,8 +225,7 @@ 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: |
@@ -283,14 +238,21 @@ jobs:
          name: build the other half of the packages
          command: |
            yarn 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
      - run:
          name: publish package versions
          command: |
            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: |
@@ -337,8 +299,7 @@ jobs:
      - setup_remote_docker:
          docker_layer_caching: false
      - run:
-          name:
-            Build and push Docker image from the master branch (beta releases)
+          name: Build and push Docker image from the master branch (beta releases)
          command: |
            echo $(ls -l)

@@ -365,71 +326,152 @@ jobs:
              docker push ohif/app:$IMAGE_VERSION_FULL
            fi

-workflows:
-  version: 2
+  # This is copied from the Cypress orb since the default for cypress/run is node 16 and
+  # we migrated to 18
+  CYPRESS_CUSTOM_RUN:
+    description: |
+      A single, complete job to run Cypress end-to-end tests in your application.
+    executor: cypress-custom
+    parallelism: << parameters.parallelism >>
+    parameters:
+      cypress-cache-key:
+        default: cypress-cache-{{ arch }}-{{ checksum "package.json" }}
+        description: Cache key used to cache the Cypress binary.
+        type: string
+      cypress-cache-path:
+        default: ~/.cache/Cypress
+        description: |
+          By default, this will cache the '~/.cache/Cypress' directory so that the Cypress binary is cached. You can override this by providing your own cache path.
+        type: string
+      cypress-command:
+        default: npx cypress run
+        description: Command used to run your Cypress tests
+        type: string
+      include-branch-in-node-cache-key:
+        default: false
+        description: |
+          If true, this cache will only apply to runs within the same branch. (Adds -{{ .Branch }}- to the node cache key)
+        type: boolean
+      install-browsers:
+        default: false
+        description: |
+          Cypress runs by default in the Electron browser. Use this flag to install additional browsers to run your tests in.
+          This is only needed if you are passing the `--browser` flag in your `cypress-command`.
+          This parameter leverages the `circleci/browser-tools` orb and includes Chrome and FireFox.
+          If you need additional browser support you can set this to false and use an executor with a docker image
+          that includes the browsers of your choosing. See https://hub.docker.com/r/cypress/browsers/tags
+        type: boolean
+      install-command:
+        default: ''
+        description: Overrides the default NPM command (npm ci)
+        type: string
+      node-cache-version:
+        default: v1
+        description:
+          Change the default node cache version if you need to clear the cache for any reason.
+        type: string
+      package-manager:
+        default: npm
+        description: Select the default node package manager to use. NPM v5+ Required.
+        enum:
+          - npm
+          - yarn
+          - yarn-berry
+        type: enum
+      parallelism:
+        default: 1
+        description: |
+          Number of Circle machines to use for load balancing, min 1
+          (requires `parallel` and `record` flags in your `cypress-command`)
+        type: integer
+      post-install:
+        default: ''
+        description: |
+          Additional commands to run after running install but before verifying Cypress and saving cache.
+        type: string
+      start-command:
+        default: ''
+        description: Command used to start your local dev server for Cypress to tests against
+        type: string
+      working-directory:
+        default: ''
+        description: Directory containing package.json
+        type: string
+    steps:
+      - cypress/install:
+          cypress-cache-key: << parameters.cypress-cache-key >>
+          cypress-cache-path: << parameters.cypress-cache-path >>
+          include-branch-in-node-cache-key: << parameters.include-branch-in-node-cache-key >>
+          install-browsers: << parameters.install-browsers >>
+          install-command: << parameters.install-command >>
+          node-cache-version: << parameters.node-cache-version >>
+          package-manager: << parameters.package-manager >>
+          post-install: << parameters.post-install >>
+          working-directory: << parameters.working-directory >>
+      - cypress/run-tests:
+          cypress-command: << parameters.cypress-command >>
+          start-command: << parameters.start-command >>
+          working-directory: << parameters.working-directory >>

+workflows:
  PR_CHECKS:
    jobs:
-      - UNIT_TESTS
-
-      # 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
+      - BUILD_PACKAGES_QUICK:
+          filters:
+            branches:
+              ignore: master
+      - UNIT_TESTS:
          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
+            - BUILD_PACKAGES_QUICK
+      - CYPRESS_CUSTOM_RUN:
+          name: 'Cypress Tests'
+          context: cypress
+          matrix:
+            parameters:
+              start-command:
+                - yarn run test:data && yarn run test:e2e:serve
+              install-browsers:
+                - true
+              cypress-command:
+                - 'npx wait-on@latest http://localhost:3000 && cd platform/app &&  npx cypress run
+                  --record --browser chrome --parallel'
+              package-manager:
+                - 'yarn'
+              cypress-cache-key:
+                - 'yarn-packages-{{ checksum "yarn.lock" }}'
+              cypress-cache-path:
+                - '~/.cache/Cypress'
          requires:
-            - AWAIT_APPROVAL
+            - BUILD_PACKAGES_QUICK
+
+  # PR_OPTIONAL_VISUAL_TESTS:
+  #   jobs:
+  #     - AWAIT_APPROVAL:
+  #         type: approval
+  #     # Update hub.docker.org
+  #     - cypress/run:
+  #         name: 'Generate Percy Snapshots'
+  #         executor: cypress/browsers-chrome76
+  #         browser: chrome
+  #         pre-steps:
+  #           - run: 'rm -rf ~/.yarn && yarn -v && yarn global add wait-on'
+  #         yarn: true
+  #         store_artifacts: false
+  #         working_directory: platform/app
+  #         build:
+  #           yarn test:data && npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js
+  #           yarn run build
+  #         # start server --> verify running --> percy + chrome + cypress
+  #         command: yarn run test:e2e:dist
+  #         cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+  #         no-workspace: true # Don't persist workspace
+  #         post-steps:
+  #           - store_artifacts:
+  #               path: platform/app/cypress/screenshots
+  #           - store_artifacts:
+  #               path: platform/app/cypress/videos
+  #         requires:
+  #           - AWAIT_APPROVAL

  # Our master branch deploys to viewer-dev.ohif.org, the viewer.ohif.org is
  # deployed from the release branch which is more stable and less frequently updated.
@@ -0,0 +1,6 @@
+[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
@@ -1,48 +0,0 @@
-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';
-        }
-    }
-}
@@ -1,89 +0,0 @@
-{
-  "Name": "Orthanc inside Docker",
-  "StorageDirectory": "/var/lib/orthanc/db",
-  "IndexDirectory": "/var/lib/orthanc/db",
-  "StorageCompression": false,
-  "MaximumStorageSize": 0,
-  "MaximumPatientCount": 0,
-  "LuaScripts": [],
-  "Plugins": ["/usr/share/orthanc/plugins", "/usr/local/share/orthanc/plugins"],
-  "ConcurrentJobs": 2,
-  "HttpServerEnabled": true,
-  "HttpPort": 8042,
-  "HttpDescribeErrors": true,
-  "HttpCompressionEnabled": true,
-  "DicomServerEnabled": true,
-  "DicomAet": "ORTHANC",
-  "DicomCheckCalledAet": false,
-  "DicomPort": 4242,
-  "DefaultEncoding": "Latin1",
-  "DeflatedTransferSyntaxAccepted": true,
-  "JpegTransferSyntaxAccepted": true,
-  "Jpeg2000TransferSyntaxAccepted": true,
-  "JpegLosslessTransferSyntaxAccepted": true,
-  "JpipTransferSyntaxAccepted": true,
-  "Mpeg2TransferSyntaxAccepted": true,
-  "RleTransferSyntaxAccepted": true,
-  "UnknownSopClassAccepted": false,
-  "DicomScpTimeout": 30,
-
-  "RemoteAccessAllowed": true,
-  "SslEnabled": false,
-  "SslCertificate": "certificate.pem",
-  "AuthenticationEnabled": false,
-  "RegisteredUsers": {
-    "test": "test"
-  },
-  "DicomModalities": {},
-  "DicomModalitiesInDatabase": false,
-  "DicomAlwaysAllowEcho": true,
-  "DicomAlwaysAllowStore": true,
-  "DicomCheckModalityHost": false,
-  "DicomScuTimeout": 10,
-  "OrthancPeers": {},
-  "OrthancPeersInDatabase": false,
-  "HttpProxy": "",
-
-  "HttpVerbose": true,
-
-  "HttpTimeout": 10,
-  "HttpsVerifyPeers": true,
-  "HttpsCACertificates": "",
-  "UserMetadata": {},
-  "UserContentType": {},
-  "StableAge": 60,
-  "StrictAetComparison": false,
-  "StoreMD5ForAttachments": true,
-  "LimitFindResults": 0,
-  "LimitFindInstances": 0,
-  "LimitJobs": 10,
-  "LogExportedResources": false,
-  "KeepAlive": true,
-  "TcpNoDelay": true,
-  "HttpThreadsCount": 50,
-  "StoreDicom": true,
-  "DicomAssociationCloseDelay": 5,
-  "QueryRetrieveSize": 10,
-  "CaseSensitivePN": false,
-  "LoadPrivateDictionary": true,
-  "Dictionary": {},
-  "SynchronousCMove": true,
-  "JobsHistorySize": 10,
-  "SaveJobs": true,
-  "OverwriteInstances": false,
-  "MediaArchiveSize": 1,
-  "StorageAccessOnFind": "Always",
-  "MetricsEnabled": true,
-
-  "DicomWeb": {
-    "Enable": true,
-    "Root": "/dicom-web/",
-    "EnableWado": true,
-    "WadoRoot": "/wado",
-    "Host": "127.0.0.1",
-    "Ssl": false,
-    "StowMaxInstances": 10,
-    "StowMaxSize": 10,
-    "QidoCaseSensitive": false
-  }
-}
@@ -1,23 +0,0 @@
-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
@@ -1,2 +0,0 @@
-*
-!.gitignore
@@ -1,6 +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/
@@ -28,3 +34,4 @@ dockerfile
 .vscode/
 coverage/
 docs/
+testdata/
@@ -1,10 +1,5 @@
 {
-  "plugins": [
-    "@typescript-eslint",
-    "import",
-    "eslint-plugin-tsdoc",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "import", "eslint-plugin-tsdoc", "prettier"],
  "extends": [
    "react-app",
    "eslint:recommended",
@@ -39,8 +39,7 @@ 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

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

@@ -66,7 +64,7 @@ body:
    attributes:
      label: 'Node version'
      description: 'Your Node.js version.'
-      placeholder: 'e.g., 16.14.0'
+      placeholder: 'e.g., 18.16.1'
    validations:
      required: true
  - type: input
@@ -81,6 +79,6 @@ body:
  - 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,17 +20,15 @@ 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. 16.14.0]-->
+- [] Node version: <!--[e.g. 18.16.1]-->
 - [] Browser:
  <!--[e.g. Chrome 83.0.4103.116, Firefox 77.0.1, Safari 13.1.1]-->

@@ -19,8 +19,7 @@ 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
@@ -0,0 +1,22 @@
+---
+name: Codespell
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+permissions:
+  contents: read
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2
@@ -42,3 +42,4 @@ platform/app/src/pluginImports.js
 /Viewers.iml
 platform/app/.recipes/Nginx-Dcm4Che/dcm4che/dcm4che-arc/*
 platform/app/.recipes/OpenResty-Orthanc/logs/*
+.vercel
@@ -1,23 +1,21 @@
 <html>
+  <head>
+    <title>OHIF Viewer: Deploy Preview</title>
+  </head>

-<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>
+  <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>
 </html>
@@ -1 +1 @@
-16.14.0
+18.16.1
@@ -1,9 +1,12 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
  "trailingComma": "es5",
-  "printWidth": 80,
+  "printWidth": 100,
  "proseWrap": "always",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "singleAttributePerLine": true,
+  "endOfLine": "auto"
 }
@@ -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,9 +1,7 @@
 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';

@@ -7,8 +7,7 @@ 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
@@ -26,15 +25,33 @@ const QUICK_BUILD = process.env.QUICK_BUILD;
 const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';

 // 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.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 || ''),
+};
+
+// 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');
@@ -105,10 +122,7 @@ 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'),
@@ -131,29 +145,17 @@ 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 },
+      fallback: {
+        fs: false,
+        path: false,
+        zlib: false,
+        buffer: require.resolve('buffer'),
+      },
    },
    plugins: [
-      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 || ''
-        ),
+      new webpack.DefinePlugin(defineValues),
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
      }),
      // Uncomment to generate bundle analyzer
      // new BundleAnalyzerPlugin(),
@@ -0,0 +1,378 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [3.7.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.92...v3.7.0-beta.93) (2023-10-03)
+
+
+### Features
+
+* **displayArea:** add display area to hanging protocol ([#3691](https://github.com/OHIF/Viewers/issues/3691)) ([5e7fe91](https://github.com/OHIF/Viewers/commit/5e7fe91617d7399f85702d82e7bfa028b8010a89))
+
+
+
+
+
+# [3.7.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.91...v3.7.0-beta.92) (2023-10-03)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.90...v3.7.0-beta.91) (2023-10-03)
+
+
+### Bug Fixes
+
+* **editing:** regression bug in disable editing ([#3687](https://github.com/OHIF/Viewers/issues/3687)) ([4dc2acd](https://github.com/OHIF/Viewers/commit/4dc2acdefa872dd1d8df47f465e9e9656f95f67f))
+
+
+
+
+
+# [3.7.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.89...v3.7.0-beta.90) (2023-10-03)
+
+
+### Bug Fixes
+
+* **typescript error:** Change pubSubServiceInterface file type to typescript ([#3546](https://github.com/OHIF/Viewers/issues/3546)) ([eb22328](https://github.com/OHIF/Viewers/commit/eb22328fc05d06fc4411805e7a30f826659d796a))
+
+
+
+
+
+# [3.7.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.88...v3.7.0-beta.89) (2023-10-03)
+
+
+### Bug Fixes
+
+* **dicom overlay:** Handle special cases of ArrayBuffer for various DICOM overlay attributes. ([#3684](https://github.com/OHIF/Viewers/issues/3684)) ([e36a604](https://github.com/OHIF/Viewers/commit/e36a6043315e900eeb6ce183772c7f852f478e96))
+* **StackSync:** Miscellaneous fixes for stack image sync ([#3663](https://github.com/OHIF/Viewers/issues/3663)) ([8a335bd](https://github.com/OHIF/Viewers/commit/8a335bd03d14ba87d65d7468d93f74040aa828d9))
+
+
+
+
+
+# [3.7.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.87...v3.7.0-beta.88) (2023-10-03)
+
+
+### Bug Fixes
+
+* **config:** support more values for the useSharedArrayBuffer ([#3688](https://github.com/OHIF/Viewers/issues/3688)) ([1129c15](https://github.com/OHIF/Viewers/commit/1129c155d2c7d46c98a5df7c09879aa3d459fa7e))
+
+
+
+
+
+# [3.7.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.86...v3.7.0-beta.87) (2023-09-29)
+
+
+### Bug Fixes
+
+* **no sab:** should work when shared array buffer is not required ([#3686](https://github.com/OHIF/Viewers/issues/3686)) ([a67d72d](https://github.com/OHIF/Viewers/commit/a67d72de85238b369a18c010bf6d147daefc6df5))
+
+
+
+
+
+# [3.7.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.85...v3.7.0-beta.86) (2023-09-29)
+
+
+### Bug Fixes
+
+* **cli:** various fixes for adding custom modes and extensions ([#3683](https://github.com/OHIF/Viewers/issues/3683)) ([dc73b18](https://github.com/OHIF/Viewers/commit/dc73b187484da029a2664bb1302f30137c973b8c))
+
+
+
+
+
+# [3.7.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.84...v3.7.0-beta.85) (2023-09-26)
+
+
+### Bug Fixes
+
+* **toggleOneUp:** fixed one up for main tmtv layout ([#3677](https://github.com/OHIF/Viewers/issues/3677)) ([86f54d0](https://github.com/OHIF/Viewers/commit/86f54d0d07042750a863ae876aa8dd5fb16029a5))
+
+
+
+
+
+# [3.7.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.83...v3.7.0-beta.84) (2023-09-26)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.82...v3.7.0-beta.83) (2023-09-26)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.81...v3.7.0-beta.82) (2023-09-26)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.80...v3.7.0-beta.81) (2023-09-26)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.79...v3.7.0-beta.80) (2023-09-22)
+
+
+### Bug Fixes
+
+* **react-select:** update react select package ([#3622](https://github.com/OHIF/Viewers/issues/3622)) ([04ca10d](https://github.com/OHIF/Viewers/commit/04ca10d8779dd15454920002f3d48afa8830de8a))
+
+
+### Features
+
+* **segmentation mode:** Add create, and export SEG with Brushes ([#3632](https://github.com/OHIF/Viewers/issues/3632)) ([48bbd62](https://github.com/OHIF/Viewers/commit/48bbd6281a497ea68670239f5426a10ee6c56dc1))
+* **SidePanel:** new side panel tab look-and-feel ([#3657](https://github.com/OHIF/Viewers/issues/3657)) ([85c899b](https://github.com/OHIF/Viewers/commit/85c899b399e2521480724be145538993721b9378))
+
+
+
+
+
+# [3.7.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.78...v3.7.0-beta.79) (2023-09-22)
+
+
+### Performance Improvements
+
+* **memory:** add 16 bit texture via configuration - reduces memory by half ([#3662](https://github.com/OHIF/Viewers/issues/3662)) ([2bd3b26](https://github.com/OHIF/Viewers/commit/2bd3b26a6aa54b211ef988f3ad64ef1fe5648bab))
+
+
+
+
+
+# [3.7.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.77...v3.7.0-beta.78) (2023-09-21)
+
+
+### Bug Fixes
+
+* **mpr:** Return the original/raw hanging protocol when fetching and preserving the current active protocol. ([#3670](https://github.com/OHIF/Viewers/issues/3670)) ([221dedd](https://github.com/OHIF/Viewers/commit/221dedde5dd4df086276406a9fa2da1cc23b4eb1))
+
+
+
+
+
+# [3.7.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.76...v3.7.0-beta.77) (2023-09-21)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.75...v3.7.0-beta.76) (2023-09-19)
+
+
+### Bug Fixes
+
+* **keyCloak:** fix openresty keycloak deployment recipe ([#3655](https://github.com/OHIF/Viewers/issues/3655)) ([2d7721c](https://github.com/OHIF/Viewers/commit/2d7721cb581f55dc49e3baeca2411b18dd78ad74))
+
+
+
+
+
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+
+### Bug Fixes
+
+* **DicomJson:** retrieve.series.metadata method should be async ([#3659](https://github.com/OHIF/Viewers/issues/3659)) ([2737903](https://github.com/OHIF/Viewers/commit/2737903386cf97399473e0fa64fe53ad14da155a))
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+
+### Bug Fixes
+
+* **measurements:** Update the calibration tool to match changes in CS3D ([#3505](https://github.com/OHIF/Viewers/issues/3505)) ([38af311](https://github.com/OHIF/Viewers/commit/38af3112ec1f94f36c0ef64ff1cf9d21c0981c81))
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+
+### Bug Fixes
+
+* **health imaging:** studies not loading from healthimaging if imagepositionpatient is missing ([#3646](https://github.com/OHIF/Viewers/issues/3646)) ([74e62a1](https://github.com/OHIF/Viewers/commit/74e62a176374f720080d4e777972f70e7f2d8b2b))
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+
+### Bug Fixes
+
+* **suv:** import calculate-suv library version that prevents SUV calculation for a zero PatientWeight ([#3638](https://github.com/OHIF/Viewers/issues/3638)) ([0d10f46](https://github.com/OHIF/Viewers/commit/0d10f46b885fe54ec3dae1848134da658eb6280a))
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+
+### Bug Fixes
+
+* **hotkeys:** preserve hotkeys if changed, and reduce re-rendering ([#3635](https://github.com/OHIF/Viewers/issues/3635)) ([94f7cfb](https://github.com/OHIF/Viewers/commit/94f7cfb08e3490488394efc42ef089ebe55e86be))
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+
+### Features
+
+* **ImageOverlayViewerTool:** add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images ([#3163](https://github.com/OHIF/Viewers/issues/3163)) ([69115da](https://github.com/OHIF/Viewers/commit/69115da06d2d437b57e66608b435bb0bc919a90f))
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+
+### Bug Fixes
+
+* **nginx archive recipe:** Fixes to various configuration files. ([#3624](https://github.com/OHIF/Viewers/issues/3624)) ([3ce7225](https://github.com/OHIF/Viewers/commit/3ce72254b390f32c9aa207a0589e688805e2659d))
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
+# [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
+
+
+### Features
+
+* **data source UI config:** Popup the configuration dialogue whenever a data source is not fully configured ([#3620](https://github.com/OHIF/Viewers/issues/3620)) ([adedc8c](https://github.com/OHIF/Viewers/commit/adedc8c382e18a2e86a569e3d023cc55a157363f))
+
+
+
+
+
+# [3.7.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.60...v3.7.0-beta.61) (2023-08-29)
+
+
+### Bug Fixes
+
+* **OpenIdConnectRoutes:** fix handleUnauthenticated ([#3617](https://github.com/OHIF/Viewers/issues/3617)) ([35fc30c](https://github.com/OHIF/Viewers/commit/35fc30c5359d8199cc38ffa670c08687d2672f11))
+
+
+
+
+
+# [3.7.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.59...v3.7.0-beta.60) (2023-08-29)
+
+
+### Bug Fixes
+
+* **PT Metadata:** Allow for PatientWeight to be missing from the metadata ([#3621](https://github.com/OHIF/Viewers/issues/3621)) ([44f101d](https://github.com/OHIF/Viewers/commit/44f101d3f2b3204b67e31f4e4939062e65a246ee))
+
+
+
+
+
+# [3.7.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.58...v3.7.0-beta.59) (2023-08-29)
+
+**Note:** Version bump only for package ohif-monorepo-root
+
+
+
+
+
+# [3.7.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.57...v3.7.0-beta.58) (2023-08-25)
+
+
+### Features
+
+* **cloud data source config:** GUI and API for configuring a cloud data source with Google cloud healthcare implementation ([#3589](https://github.com/OHIF/Viewers/issues/3589)) ([a336992](https://github.com/OHIF/Viewers/commit/a336992971c07552c9dbb6e1de43169d37762ef1))
+
+
+
+
+
+# [3.7.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.56...v3.7.0-beta.57) (2023-08-23)
+
+
+### Bug Fixes
+
+* **memory leak:** array buffer was sticking around in volume viewports ([#3611](https://github.com/OHIF/Viewers/issues/3611)) ([65b49ae](https://github.com/OHIF/Viewers/commit/65b49aeb1b5f38224e4892bdf32453500ee351f8))
@@ -21,7 +21,7 @@

 # Stage 1: Build the application
 # docker build -t ohif/viewer:latest .
-FROM node:16.15.0-slim as json-copier
+FROM node:18.16.1-slim as json-copier

 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
@@ -37,7 +37,7 @@ COPY platform /usr/src/app/platform
 #RUN find platform \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf

 # Copy Files
-FROM node:16.15.0-slim as builder
+FROM node:18.16.1-slim as builder
 RUN apt-get update && apt-get install -y build-essential python3
 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
@@ -3,11 +3,7 @@ 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: [
    [
      'inline-react-svg',
@@ -1 +1 @@
-b117a54aa10ee09e72e7675c6fb83cd8f49c26f7
+5e7fe91617d7399f85702d82e7bfa028b8010a89
@@ -1,138 +0,0 @@
-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 }];
-};
@@ -3,8 +3,7 @@ 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');
@@ -38,13 +37,7 @@ 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,
@@ -0,0 +1,305 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [3.7.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.92...v3.7.0-beta.93) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.91...v3.7.0-beta.92) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.90...v3.7.0-beta.91) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.89...v3.7.0-beta.90) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.88...v3.7.0-beta.89) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.87...v3.7.0-beta.88) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.86...v3.7.0-beta.87) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.85...v3.7.0-beta.86) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.84...v3.7.0-beta.85) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.83...v3.7.0-beta.84) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.82...v3.7.0-beta.83) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.81...v3.7.0-beta.82) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.80...v3.7.0-beta.81) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.79...v3.7.0-beta.80) (2023-09-22)
+
+
+### Features
+
+* **segmentation mode:** Add create, and export SEG with Brushes ([#3632](https://github.com/OHIF/Viewers/issues/3632)) ([48bbd62](https://github.com/OHIF/Viewers/commit/48bbd6281a497ea68670239f5426a10ee6c56dc1))
+
+
+
+
+
+# [3.7.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.78...v3.7.0-beta.79) (2023-09-22)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.77...v3.7.0-beta.78) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.76...v3.7.0-beta.77) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.75...v3.7.0-beta.76) (2023-09-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
+# [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.60...v3.7.0-beta.61) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.59...v3.7.0-beta.60) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.58...v3.7.0-beta.59) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
+
+
+
+
+
+# [3.7.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.57...v3.7.0-beta.58) (2023-08-25)
+
+
+### Features
+
+* **cloud data source config:** GUI and API for configuring a cloud data source with Google cloud healthcare implementation ([#3589](https://github.com/OHIF/Viewers/issues/3589)) ([a336992](https://github.com/OHIF/Viewers/commit/a336992971c07552c9dbb6e1de43169d37762ef1))
+
+
+
+
+
+# [3.7.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.56...v3.7.0-beta.57) (2023-08-23)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-rt
@@ -10,7 +10,7 @@ module.exports = {
            modules: 'commonjs',
            debug: false,
          },
-          "@babel/preset-typescript",
+          '@babel/preset-typescript',
        ],
        '@babel/preset-react',
      ],
@@ -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,7 +35,7 @@ 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.7.0-beta.56",
+  "version": "3.7.0-beta.93",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -31,10 +31,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.56",
-    "@ohif/extension-cornerstone": "3.7.0-beta.56",
-    "@ohif/extension-default": "3.7.0-beta.56",
-    "@ohif/i18n": "3.7.0-beta.56",
+    "@ohif/core": "3.7.0-beta.93",
+    "@ohif/extension-cornerstone": "3.7.0-beta.93",
+    "@ohif/extension-default": "3.7.0-beta.93",
+    "@ohif/i18n": "3.7.0-beta.93",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
@@ -7,11 +7,7 @@ const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];

 let loadPromises = {};

-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager,
-  extensionManager
-) {
+function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
  const instance = instances[0];

  const {
@@ -56,10 +52,7 @@ function _getDisplaySetsFromSeries(
  };

  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
-  if (
-    instance.ReferencedFrameOfReferenceSequence &&
-    !instance.ReferencedSeriesSequence
-  ) {
+  if (instance.ReferencedFrameOfReferenceSequence && !instance.ReferencedSeriesSequence) {
    instance.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
      instance.ReferencedFrameOfReferenceSequence
    );
@@ -72,8 +65,7 @@ function _getDisplaySetsFromSeries(

  const referencedSeries = referencedSeriesSequence[0];

-  displaySet.referencedImages =
-    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;

  displaySet.getReferenceDisplaySet = () => {
@@ -88,14 +80,12 @@ function _getDisplaySetsFromSeries(

    const referencedDisplaySet = referencedDisplaySets[0];

-    displaySet.referencedDisplaySetInstanceUID =
-      referencedDisplaySet.displaySetInstanceUID;
+    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;

    return referencedDisplaySet;
  };

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

  return [displaySet];
 }
@@ -194,11 +184,7 @@ function getSopClassHandlerModule({ servicesManager, extensionManager }) {
      name: 'dicom-rt',
      sopClassUids,
      getDisplaySetsFromSeries: instances => {
-        return _getDisplaySetsFromSeries(
-          instances,
-          servicesManager,
-          extensionManager
-        );
+        return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
      },
    },
  ];
@@ -2,12 +2,9 @@ import { id } from './id';
 import React from 'react';
 import { Types } from '@ohif/core';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import hydrateRTDisplaySet from './utils/_hydrateRT';

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

 const OHIFCornerstoneRTViewport = props => {
@@ -62,4 +59,3 @@ const extension: Types.Extensions.Extension = {
 };

 export default extension;
-export { hydrateRTDisplaySet };
@@ -25,23 +25,13 @@ async function checkAndLoadContourData(instance, datasource) {

      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({
@@ -74,10 +64,7 @@ async function checkAndLoadContourData(instance, datasource) {
        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 {
@@ -85,13 +72,8 @@ async function checkAndLoadContourData(instance, datasource) {
              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 = [];
              }
@@ -120,9 +102,8 @@ export default async function loadRTStruct(
  const { bulkDataURI } = dataSource.getConfig?.() || {};

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

  // Set here is loading is asynchronous.
  // If this function throws its set back to false.
@@ -137,20 +118,14 @@ export default async function loadRTStruct(
    );

    const dicomData = DicomMessage.readFile(segArrayBuffer);
-    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(
-      dicomData.dict
-    );
+    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 = {
@@ -174,12 +149,8 @@ export default async function loadRTStruct(

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

      let isSupported = false;

@@ -229,9 +200,7 @@ const _getImageId = (imageIdSopInstanceUidPairs, sopInstanceUID) => {
      imageIdSopInstanceUidPairsEntry.sopInstanceUID === sopInstanceUID
  );

-  return imageIdSopInstanceUidPairsEntry
-    ? imageIdSopInstanceUidPairsEntry.imageId
-    : null;
+  return imageIdSopInstanceUidPairsEntry ? imageIdSopInstanceUidPairsEntry.imageId : null;
 };

 function _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet) {
@@ -252,8 +221,7 @@ function _setROIContourMetadata(
  isSupported
 ) {
  const StructureSetROI = StructureSetROISequence.find(
-    structureSetROI =>
-      structureSetROI.ROINumber === ROIContour.ReferencedROINumber
+    structureSetROI => structureSetROI.ROINumber === ROIContour.ReferencedROINumber
  );

  const ROIContourData = {
@@ -293,23 +261,15 @@ function _setROIContourDataColor(ROIContour, ROIContourData) {
  }
 }

-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,
@@ -1,70 +0,0 @@
-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,12 +1,7 @@
-function createRTToolGroupAndAddTools(
-  ToolGroupService,
-  customizationService,
-  toolGroupId
-) {
-  const { tools } =
-    customizationService.get('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,5 +1,4 @@
 import { ButtonEnums } from '@ohif/ui';
-import hydrateRTDisplaySet from './_hydrateRT';

 const RESPONSE = {
  NO_NEVER: -1,
@@ -10,17 +9,15 @@ const RESPONSE = {
 function promptHydrateRT({
  servicesManager,
  rtDisplaySet,
-  viewportIndex,
+  viewportId,
  toolGroupId = 'default',
  preHydrateCallbacks,
+  hydrateRTDisplaySet,
 }) {
  const { uiViewportDialogService } = servicesManager.services;

-  return new Promise(async function(resolve, reject) {
-    const promptResult = await _askHydrate(
-      uiViewportDialogService,
-      viewportIndex
-    );
+  return new Promise(async function (resolve, reject) {
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportId);

    if (promptResult === RESPONSE.HYDRATE_SEG) {
      preHydrateCallbacks?.forEach(callback => {
@@ -29,7 +26,7 @@ function promptHydrateRT({

      const isHydrated = await hydrateRTDisplaySet({
        rtDisplaySet,
-        viewportIndex,
+        viewportId,
        toolGroupId,
        servicesManager,
      });
@@ -39,8 +36,8 @@ function promptHydrateRT({
  });
 }

-function _askHydrate(uiViewportDialogService, viewportIndex) {
-  return new Promise(function(resolve, reject) {
+function _askHydrate(uiViewportDialogService, viewportId) {
+  return new Promise(function (resolve, reject) {
    const message = 'Do you want to open this Segmentation?';
    const actions = [
      {
@@ -60,7 +57,7 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
    };

    uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
      type: 'info',
      message,
      actions,
@@ -1,17 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import OHIF, { utils } from '@ohif/core';
-import {
-  ViewportActionBar,
-  useViewportGrid,
-  LoadingIndicatorTotalPercent,
-} from '@ohif/ui';
+import { 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 _hydrateRTDisplaySet from '../utils/_hydrateRT';

 const { formatDate } = utils;
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
@@ -21,7 +15,6 @@ function OHIFCornerstoneRTViewport(props) {
    children,
    displaySets,
    viewportOptions,
-    viewportIndex,
    viewportLabel,
    servicesManager,
    extensionManager,
@@ -36,7 +29,9 @@ function OHIFCornerstoneRTViewport(props) {
    customizationService,
  } = servicesManager.services;

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

  // RT viewport will always have a single display set
  if (displaySets.length > 1) {
@@ -67,12 +62,10 @@ function OHIFCornerstoneRTViewport(props) {
  // refs
  const referencedDisplaySetRef = useRef(null);

-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;

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

  referencedDisplaySetRef.current = {
    displaySet: referencedDisplaySet,
@@ -93,21 +86,26 @@ function OHIFCornerstoneRTViewport(props) {
  };

  const storePresentationState = useCallback(() => {
-    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
      commandsManager.runCommand('storePresentation', {
-        viewportIndex,
+        viewportId,
      });
    });
  }, [viewportGrid]);

+  const hydrateRTDisplaySet = ({ rtDisplaySet, viewportId }) => {
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      displaySets: [rtDisplaySet],
+      viewportId,
+    });
+  };
+
  const getCornerstoneViewport = useCallback(() => {
    const { component: Component } = extensionManager.getModuleEntry(
      '@ohif/extension-cornerstone.viewportModule.cornerstone'
    );

-    const {
-      displaySet: referencedDisplaySet,
-    } = referencedDisplaySetRef.current;
+    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;

    // Todo: jump to the center of the first segment
    return (
@@ -124,7 +122,7 @@ function OHIFCornerstoneRTViewport(props) {
        onElementDisabled={onElementDisabled}
      ></Component>
    );
-  }, [viewportIndex, rtDisplaySet, toolGroupId]);
+  }, [viewportId, rtDisplaySet, toolGroupId]);

  const onSegmentChange = useCallback(
    direction => {
@@ -145,11 +143,7 @@ function OHIFCornerstoneRTViewport(props) {
        newSelectedSegmentIndex = numberOfSegments - 1;
      }

-      segmentationService.jumpToSegmentCenter(
-        segmentationId,
-        newSelectedSegmentIndex,
-        toolGroupId
-      );
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, toolGroupId);
      setSelectedSegment(newSelectedSegmentIndex);
    },
    [selectedSegment]
@@ -162,32 +156,29 @@ function OHIFCornerstoneRTViewport(props) {

    promptHydrateRT({
      servicesManager,
-      viewportIndex,
+      viewportId,
      rtDisplaySet,
      preHydrateCallbacks: [storePresentationState],
+      hydrateRTDisplaySet,
    }).then(isHydrated => {
      if (isHydrated) {
        setIsHydrated(true);
      }
    });
-  }, [servicesManager, viewportIndex, rtDisplaySet, rtIsLoading]);
+  }, [servicesManager, viewportId, 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 (evt.overlappingSegments) {
          uiNotificationService.show({
            title: 'Overlapping Segments',
-            message:
-              'Overlapping segments detected which is not currently supported',
+            message: 'Overlapping segments detected which is not currently supported',
            type: 'warning',
          });
        }
@@ -222,12 +213,10 @@ function OHIFCornerstoneRTViewport(props) {
    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
      ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
-        if (
-          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
-        ) {
+        const activeViewport = viewports.get(activeViewportId);
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
          viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
            displaySetInstanceUIDs: [],
          });
        }
@@ -246,19 +235,13 @@ function OHIFCornerstoneRTViewport(props) {
      return;
    }

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

    setToolGroupCreated(true);

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

      toolGroupService.destroyToolGroup(toolGroupId);
    };
@@ -269,9 +252,7 @@ function OHIFCornerstoneRTViewport(props) {

    return () => {
      // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(
-        toolGroupId
-      );
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
      referencedDisplaySetRef.current = null;
    };
  }, [rtDisplaySet]);
@@ -292,7 +273,7 @@ function OHIFCornerstoneRTViewport(props) {
      return (
        child &&
        React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
          key: index,
        })
      );
@@ -320,10 +301,9 @@ function OHIFCornerstoneRTViewport(props) {
    // presentation state (w/l and invert) and then opens the RT. If we don't store
    // the presentation state, the viewport will be reset to the default presentation
    storePresentationState();
-    const isHydrated = await _hydrateRTDisplaySet({
+    const isHydrated = await hydrateRTDisplaySet({
      rtDisplaySet,
-      viewportIndex,
-      servicesManager,
+      viewportId,
    });

    setIsHydrated(isHydrated);
@@ -350,26 +330,22 @@ function OHIFCornerstoneRTViewport(props) {
          currentSeries: SeriesNumber,
          seriesDescription: `RT Viewport ${SeriesDescription}`,
          patientInformation: {
-            patientName: PatientName
-              ? OHIF.utils.formatPN(PatientName.Alphabetic)
-              : '',
+            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`
-                : '',
+              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
            scanner: ManufacturerModelName || '',
          },
        }}
      />

-      <div className="relative flex flex-row w-full h-full overflow-hidden">
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
        {rtIsLoading && (
          <LoadingIndicatorTotalPercent
-            className="w-full h-full"
+            className="h-full w-full"
            totalNumbers={processingProgress.totalSegments}
            percentComplete={processingProgress.percentComplete}
            loadingText="Loading RTSTRUCT..."
@@ -384,7 +360,7 @@ function OHIFCornerstoneRTViewport(props) {

 OHIFCornerstoneRTViewport.propTypes = {
  displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
  dataSource: PropTypes.object,
  children: PropTypes.node,
  customProps: PropTypes.object,
@@ -13,25 +13,28 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
    case true:
      StatusIcon = () => <Icon name="status-alert" />;

-      ToolTipMessage = () => (
-        <div>This Segmentation is loaded in the segmentation panel</div>
-      );
+      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
      break;
    case false:
-      StatusIcon = () => <Icon name="status-untracked" />;
+      StatusIcon = () => (
+        <Icon
+          className="text-aqua-pale"
+          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">
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
        <StatusIcon />
        <span className="ml-1">RTSTRUCT</span>
      </div>
      {!isHydrated && (
        <div
-          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
          onMouseUp={onStatusClick}
        >
@@ -44,7 +47,10 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
          <StatusArea />
        </Tooltip>
      )}
@@ -40,21 +40,15 @@ 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`,
+      }),
    ],
  });
 };
@@ -0,0 +1,309 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [3.7.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.92...v3.7.0-beta.93) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.91...v3.7.0-beta.92) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.90...v3.7.0-beta.91) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.89...v3.7.0-beta.90) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.88...v3.7.0-beta.89) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.87...v3.7.0-beta.88) (2023-10-03)
+
+
+### Bug Fixes
+
+* **config:** support more values for the useSharedArrayBuffer ([#3688](https://github.com/OHIF/Viewers/issues/3688)) ([1129c15](https://github.com/OHIF/Viewers/commit/1129c155d2c7d46c98a5df7c09879aa3d459fa7e))
+
+
+
+
+
+# [3.7.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.86...v3.7.0-beta.87) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.85...v3.7.0-beta.86) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.84...v3.7.0-beta.85) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.83...v3.7.0-beta.84) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.82...v3.7.0-beta.83) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.81...v3.7.0-beta.82) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.80...v3.7.0-beta.81) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.79...v3.7.0-beta.80) (2023-09-22)
+
+
+### Features
+
+* **segmentation mode:** Add create, and export SEG with Brushes ([#3632](https://github.com/OHIF/Viewers/issues/3632)) ([48bbd62](https://github.com/OHIF/Viewers/commit/48bbd6281a497ea68670239f5426a10ee6c56dc1))
+* **SidePanel:** new side panel tab look-and-feel ([#3657](https://github.com/OHIF/Viewers/issues/3657)) ([85c899b](https://github.com/OHIF/Viewers/commit/85c899b399e2521480724be145538993721b9378))
+
+
+
+
+
+# [3.7.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.78...v3.7.0-beta.79) (2023-09-22)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.77...v3.7.0-beta.78) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.76...v3.7.0-beta.77) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.75...v3.7.0-beta.76) (2023-09-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
+# [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.60...v3.7.0-beta.61) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.59...v3.7.0-beta.60) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.58...v3.7.0-beta.59) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
+
+
+
+
+
+# [3.7.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.57...v3.7.0-beta.58) (2023-08-25)
+
+
+### Features
+
+* **cloud data source config:** GUI and API for configuring a cloud data source with Google cloud healthcare implementation ([#3589](https://github.com/OHIF/Viewers/issues/3589)) ([a336992](https://github.com/OHIF/Viewers/commit/a336992971c07552c9dbb6e1de43169d37762ef1))
+
+
+
+
+
+# [3.7.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.56...v3.7.0-beta.57) (2023-08-23)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-seg
@@ -10,7 +10,7 @@ module.exports = {
            modules: 'commonjs',
            debug: false,
          },
-          "@babel/preset-typescript",
+          '@babel/preset-typescript',
        ],
        '@babel/preset-react',
      ],
@@ -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,7 +35,7 @@ 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.7.0-beta.56",
+  "version": "3.7.0-beta.93",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -31,10 +31,10 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.56",
-    "@ohif/extension-cornerstone": "3.7.0-beta.56",
-    "@ohif/extension-default": "3.7.0-beta.56",
-    "@ohif/i18n": "3.7.0-beta.56",
+    "@ohif/core": "3.7.0-beta.93",
+    "@ohif/extension-cornerstone": "3.7.0-beta.93",
+    "@ohif/extension-default": "3.7.0-beta.93",
+    "@ohif/i18n": "3.7.0-beta.93",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
@@ -44,6 +44,7 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
+    "@cornerstonejs/tools": "^1.19.3",
    "react-color": "^2.19.3"
  }
 }
@@ -0,0 +1,383 @@
+import dcmjs from 'dcmjs';
+import { createReportDialogPrompt } from '@ohif/extension-default';
+import { ServicesManager, Types } from '@ohif/core';
+import { cache, metaData } from '@cornerstonejs/core';
+import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
+import { adaptersSEG, helpers } from '@cornerstonejs/adapters';
+import { DicomMetadataStore } from '@ohif/core';
+
+import {
+  updateViewportsForSegmentationRendering,
+  getUpdatedViewportsForSegmentation,
+  getTargetViewport,
+} from './utils/hydrationUtils';
+
+const {
+  Cornerstone3D: {
+    Segmentation: { generateLabelMaps2DFrom3D, generateSegmentation },
+  },
+} = adaptersSEG;
+
+const { downloadDICOMData } = helpers;
+
+const commandsModule = ({
+  servicesManager,
+  extensionManager,
+}: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
+  const {
+    uiNotificationService,
+    segmentationService,
+    uiDialogService,
+    displaySetService,
+    viewportGridService,
+  } = (servicesManager as ServicesManager).services;
+
+  const actions = {
+    /**
+     * Retrieves a list of viewports that require updates in preparation for segmentation rendering.
+     * This function evaluates viewports based on their compatibility with the provided segmentation's
+     * frame of reference UID and appends them to the updated list if they should render the segmentation.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.viewportId - the ID of the viewport to be updated.
+     * @param params.servicesManager - The services manager
+     * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
+     *
+     * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
+     */
+    getUpdatedViewportsForSegmentation,
+    /**
+     * Creates an empty segmentation for a specified viewport.
+     * It first checks if the display set associated with the viewport is reconstructable.
+     * If not, it raises a notification error. Otherwise, it creates a new segmentation
+     * for the display set after handling the necessary steps for making the viewport
+     * a volume viewport first
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.viewportId - the target viewport ID.
+     *
+     */
+    createEmptySegmentationForViewport: async ({ viewportId }) => {
+      const viewport = getTargetViewport({ viewportId, viewportGridService });
+      // Todo: add support for multiple display sets
+      const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
+
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+      if (!displaySet.isReconstructable) {
+        uiNotificationService.show({
+          title: 'Segmentation',
+          message: 'Segmentation is not supported for non-reconstructible displaysets yet',
+          type: 'error',
+        });
+        return;
+      }
+
+      updateViewportsForSegmentationRendering({
+        viewportId,
+        servicesManager,
+        loadFn: async () => {
+          const currentSegmentations = segmentationService.getSegmentations();
+          const segmentationId = await segmentationService.createSegmentationForDisplaySet(
+            displaySetInstanceUID,
+            { label: `Segmentation ${currentSegmentations.length + 1}` }
+          );
+
+          const toolGroupId = viewport.viewportOptions.toolGroupId;
+
+          await segmentationService.addSegmentationRepresentationToToolGroup(
+            toolGroupId,
+            segmentationId
+          );
+
+          // Add only one segment for now
+          segmentationService.addSegment(segmentationId, {
+            toolGroupId,
+            segmentIndex: 1,
+            properties: {
+              label: 'Segment 1',
+            },
+          });
+
+          return segmentationId;
+        },
+      });
+    },
+    /**
+     * Loads segmentations for a specified viewport.
+     * The function prepares the viewport for rendering, then loads the segmentation details.
+     * 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 }) => {
+      updateViewportsForSegmentationRendering({
+        viewportId,
+        servicesManager,
+        loadFn: async () => {
+          // Todo: handle adding more than one segmentation
+          const viewport = getTargetViewport({ viewportId, viewportGridService });
+          const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
+
+          const segmentation = segmentations[0];
+          const segmentationId = segmentation.id;
+          const label = segmentation.label;
+          const segments = segmentation.segments;
+
+          delete segmentation.segments;
+
+          await segmentationService.createSegmentationForDisplaySet(displaySetInstanceUID, {
+            segmentationId,
+            label,
+          });
+
+          if (segmentation.scalarData) {
+            const labelmapVolume = segmentationService.getLabelmapVolume(segmentationId);
+            labelmapVolume.scalarData.set(segmentation.scalarData);
+          }
+
+          segmentationService.addOrUpdateSegmentation(segmentation);
+
+          const toolGroupId = viewport.viewportOptions.toolGroupId;
+          await segmentationService.addSegmentationRepresentationToToolGroup(
+            toolGroupId,
+            segmentationId
+          );
+
+          segments.forEach(segment => {
+            if (segment === null) {
+              return;
+            }
+            segmentationService.addSegment(segmentationId, {
+              segmentIndex: segment.segmentIndex,
+              toolGroupId,
+              properties: {
+                color: segment.color,
+                label: segment.label,
+                opacity: segment.opacity,
+                isLocked: segment.isLocked,
+                visibility: segment.isVisible,
+                active: segmentation.activeSegmentIndex === segment.segmentIndex,
+              },
+            });
+          });
+
+          if (segmentation.centroidsIJK) {
+            segmentationService.setCentroids(segmentation.id, segmentation.centroidsIJK);
+          }
+
+          return segmentationId;
+        },
+      });
+    },
+    /**
+     * Loads segmentation display sets for a specified viewport.
+     * Depending on the modality of the display set (SEG or RTSTRUCT),
+     * it chooses the appropriate service function to create
+     * the segmentation for the display set.
+     * The function then prepares the viewport for rendering segmentation.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.viewportId - ID of the viewport where the segmentation display sets should be loaded.
+     * @param params.displaySets - Array of display sets to be loaded for segmentation.
+     *
+     */
+    loadSegmentationDisplaySetsForViewport: async ({ viewportId, displaySets }) => {
+      // Todo: handle adding more than one segmentation
+      const displaySet = displaySets[0];
+
+      updateViewportsForSegmentationRendering({
+        viewportId,
+        servicesManager,
+        referencedDisplaySetInstanceUID: displaySet.referencedDisplaySetInstanceUID,
+        loadFn: async () => {
+          const segDisplaySet = displaySet;
+          const suppressEvents = false;
+          const serviceFunction =
+            segDisplaySet.Modality === 'SEG'
+              ? 'createSegmentationForSEGDisplaySet'
+              : 'createSegmentationForRTDisplaySet';
+
+          const boundFn = segmentationService[serviceFunction].bind(segmentationService);
+          const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
+
+          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 { referencedVolumeId } = segmentation.representationData.LABELMAP;
+
+      const segmentationVolume = cache.getVolume(segmentationId);
+      const referencedVolume = cache.getVolume(referencedVolumeId);
+      const referencedImages = referencedVolume.getCornerstoneImages();
+
+      const labelmapObj = generateLabelMaps2DFrom3D(segmentationVolume);
+
+      // Generate fake metadata as an example
+      labelmapObj.metadata = [];
+
+      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
+      labelmapObj.segmentsOnLabelmap.forEach(segmentIndex => {
+        // segmentation service already has a color for each segment
+        const segment = segmentationInOHIF?.segments[segmentIndex];
+        const { label, color } = segment;
+
+        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: 'MANUAL',
+          SegmentAlgorithmName: 'OHIF Brush',
+          RecommendedDisplayCIELabValue,
+          SegmentedPropertyCategoryCodeSequence: {
+            CodeValue: 'T-D0050',
+            CodingSchemeDesignator: 'SRT',
+            CodeMeaning: 'Tissue',
+          },
+          SegmentedPropertyTypeCodeSequence: {
+            CodeValue: 'T-D0050',
+            CodingSchemeDesignator: 'SRT',
+            CodeMeaning: 'Tissue',
+          },
+        };
+        labelmapObj.metadata[segmentIndex] = segmentMetadata;
+      });
+
+      const generatedSegmentation = generateSegmentation(
+        referencedImages,
+        labelmapObj,
+        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 promptResult = await createReportDialogPrompt(uiDialogService, {
+        extensionManager,
+      });
+
+      if (promptResult.action !== 1 && promptResult.value) {
+        return;
+      }
+
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      if (!segmentation) {
+        throw new Error('No segmentation found');
+      }
+
+      const { label } = segmentation;
+      const SeriesDescription = promptResult.value || label || 'Research Derived Series';
+
+      const generatedData = actions.generateSegmentation({
+        segmentationId,
+        options: {
+          SeriesDescription,
+        },
+      });
+
+      if (!generatedData || !generatedData.dataset) {
+        throw new Error('Error during segmentation generation');
+      }
+
+      const { dataset: naturalizedReport } = generatedData;
+
+      await dataSource.store.dicom(naturalizedReport);
+
+      // The "Mode" route listens for DicomMetadataStore changes
+      // When a new instance is added, it listens and
+      // automatically calls makeDisplaySets
+
+      // add the information for where we stored it to the instance as well
+      naturalizedReport.wadoRoot = dataSource.getConfig().wadoRoot;
+
+      DicomMetadataStore.addInstances([naturalizedReport], true);
+
+      return naturalizedReport;
+    },
+  };
+
+  const definitions = {
+    getUpdatedViewportsForSegmentation: {
+      commandFn: actions.getUpdatedViewportsForSegmentation,
+    },
+    loadSegmentationDisplaySetsForViewport: {
+      commandFn: actions.loadSegmentationDisplaySetsForViewport,
+    },
+    loadSegmentationsForViewport: {
+      commandFn: actions.loadSegmentationsForViewport,
+    },
+    createEmptySegmentationForViewport: {
+      commandFn: actions.createEmptySegmentationForViewport,
+    },
+    generateSegmentation: {
+      commandFn: actions.generateSegmentation,
+    },
+    downloadSegmentation: {
+      commandFn: actions.downloadSegmentation,
+    },
+    storeSegmentation: {
+      commandFn: actions.storeSegmentation,
+    },
+  };
+
+  return {
+    actions,
+    definitions,
+  };
+};
+
+export default commandsModule;
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { useAppConfig } from '@state';
+import PanelSegmentation from './panels/PanelSegmentation';
+import SegmentationToolbox from './panels/SegmentationToolbox';
+
+const getPanelModule = ({ commandsManager, servicesManager, extensionManager, configuration }) => {
+  const { customizationService } = servicesManager.services;
+
+  const wrappedPanelSegmentation = configuration => {
+    const [appConfig] = useAppConfig();
+
+    const disableEditingForMode = customizationService.get('segmentation.disableEditing');
+
+    return (
+      <PanelSegmentation
+        commandsManager={commandsManager}
+        servicesManager={servicesManager}
+        extensionManager={extensionManager}
+        configuration={{
+          ...configuration,
+          disableEditing: appConfig.disableEditing || disableEditingForMode?.value,
+        }}
+      />
+    );
+  };
+
+  const wrappedPanelSegmentationWithTools = configuration => {
+    const [appConfig] = useAppConfig();
+    return (
+      <>
+        <SegmentationToolbox
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          configuration={{
+            ...configuration,
+          }}
+        />
+        <PanelSegmentation
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          configuration={{
+            ...configuration,
+          }}
+        />
+      </>
+    );
+  };
+
+  return [
+    {
+      name: 'panelSegmentation',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
+      component: wrappedPanelSegmentation,
+    },
+    {
+      name: 'panelSegmentationWithTools',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
+      component: wrappedPanelSegmentationWithTools,
+    },
+  ];
+};
+
+export default getPanelModule;
@@ -1,10 +1,5 @@
 import { utils } from '@ohif/core';
-import {
-  metaData,
-  cache,
-  triggerEvent,
-  eventTarget,
-} from '@cornerstonejs/core';
+import { metaData, cache, triggerEvent, eventTarget } from '@cornerstonejs/core';
 import { adaptersSEG, Enums } from '@cornerstonejs/adapters';

 import { SOPClassHandlerId } from './id';
@@ -14,11 +9,7 @@ const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];

 let loadPromises = {};

-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager,
-  extensionManager
-) {
+function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
  const instance = instances[0];

  const {
@@ -66,13 +57,13 @@ function _getDisplaySetsFromSeries(
  const referencedSeriesSequence = instance.ReferencedSeriesSequence;

  if (!referencedSeriesSequence) {
-    throw new Error('ReferencedSeriesSequence is missing for the SEG');
+    console.error('ReferencedSeriesSequence is missing for the SEG');
+    return;
  }

-  const referencedSeries = referencedSeriesSequence[0];
+  const referencedSeries = referencedSeriesSequence[0] || referencedSeriesSequence;

-  displaySet.referencedImages =
-    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;

  displaySet.getReferenceDisplaySet = () => {
@@ -87,8 +78,7 @@ function _getDisplaySetsFromSeries(

    const referencedDisplaySet = referencedDisplaySets[0];

-    displaySet.referencedDisplaySetInstanceUID =
-      referencedDisplaySet.displaySetInstanceUID;
+    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;
@@ -121,10 +111,7 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
  // 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
-    ) {
+    if (!segDisplaySet.segments || Object.keys(segDisplaySet.segments).length === 0) {
      await _loadSegments({
        extensionManager,
        servicesManager,
@@ -149,12 +136,7 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
  return loadPromises[SOPInstanceUID];
 }

-async function _loadSegments({
-  extensionManager,
-  servicesManager,
-  segDisplaySet,
-  headers,
-}) {
+async function _loadSegments({ extensionManager, servicesManager, segDisplaySet, headers }) {
  const utilityModule = extensionManager.getModuleEntry(
    '@ohif/extension-cornerstone.utilityModule.common'
  );
@@ -162,15 +144,9 @@ async function _loadSegments({
  const { segmentationService } = servicesManager.services;

  const { dicomLoaderService } = utilityModule.exports;
-  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(
-    segDisplaySet,
-    null,
-    headers
-  );
+  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(segDisplaySet, null, headers);

-  const cachedReferencedVolume = cache.getVolume(
-    segDisplaySet.referencedVolumeId
-  );
+  const cachedReferencedVolume = cache.getVolume(segDisplaySet.referencedVolumeId);

  if (!cachedReferencedVolume) {
    throw new Error(
@@ -186,12 +162,9 @@ async function _loadSegments({

  eventTarget.addEventListener(Enums.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
    const { percentComplete } = evt.detail;
-    segmentationService._broadcastEvent(
-      segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE,
-      {
-        percentComplete,
-      }
-    );
+    segmentationService._broadcastEvent(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, {
+      percentComplete,
+    });
  });

  const results = await adaptersSEG.Cornerstone3D.Segmentation.generateToolState(
@@ -212,18 +185,12 @@ async function _loadSegments({

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

 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
-    return _getDisplaySetsFromSeries(
-      instances,
-      servicesManager,
-      extensionManager
-    );
+    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };

  return [
@@ -1,17 +1,14 @@
 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 hydrateSEGDisplaySet from './utils/_hydrateSEG';
+import getPanelModule from './getPanelModule';
+import getCommandsModule from './commandsModule';
+import preRegistration from './init';

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

 const OHIFCornerstoneSEGViewport = props => {
@@ -31,6 +28,7 @@ const extension = {
   * You ID can be anything you want, but it should be unique.
   */
  id,
+  preRegistration,

  /**
   * PanelModule should provide a list of panels that will be available in OHIF
@@ -38,31 +36,8 @@ const extension = {
   * 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,
-      },
-    ];
-  },
+  getPanelModule,
+  getCommandsModule,

  getViewportModule({ servicesManager, extensionManager }) {
    const ExtendedOHIFCornerstoneSEGViewport = props => {
@@ -76,9 +51,7 @@ const extension = {
      );
    };

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

 export default extension;
-export { hydrateSEGDisplaySet };
@@ -0,0 +1,5 @@
+import { addTool, BrushTool } from '@cornerstonejs/tools';
+
+export default function init({ configuration = {} }): void {
+  addTool(BrushTool);
+}
@@ -1,50 +1,28 @@
+import { createReportAsync } from '@ohif/extension-default';
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SegmentationGroupTable } from '@ohif/ui';
+
 import callInputDialog from './callInputDialog';
-import { useAppConfig } from '@state';
+import callColorPickerDialog from './colorPickerDialog';
 import { useTranslation } from 'react-i18next';

 export default function PanelSegmentation({
  servicesManager,
  commandsManager,
+  extensionManager,
+  configuration,
 }) {
-  const { segmentationService, uiDialogService } = servicesManager.services;
-  const [appConfig] = useAppConfig();
-  const disableEditing = appConfig?.disableEditing;
+  const { segmentationService, viewportGridService, 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]);
+  const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());

  useEffect(() => {
    // ~~ Subscription
@@ -69,6 +47,16 @@ export default function PanelSegmentation({
    };
  }, []);

+  const getToolGroupIds = segmentationId => {
+    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
+
+    return toolGroupIds;
+  };
+
+  const onSegmentationAdd = async () => {
+    commandsManager.runCommand('createEmptySegmentationForViewport');
+  };
+
  const onSegmentationClick = (segmentationId: string) => {
    segmentationService.setActiveSegmentationForToolGroup(segmentationId);
  };
@@ -77,33 +65,19 @@ export default function PanelSegmentation({
    segmentationService.remove(segmentationId);
  };

-  const getToolGroupIds = segmentationId => {
-    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(
-      segmentationId
-    );
-
-    return toolGroupIds;
+  const onSegmentAdd = segmentationId => {
+    segmentationService.addSegment(segmentationId);
  };

  const onSegmentClick = (segmentationId, segmentIndex) => {
-    segmentationService.setActiveSegmentForSegmentation(
-      segmentationId,
-      segmentIndex
-    );
+    segmentationService.setActiveSegment(segmentationId, segmentIndex);

    const toolGroupIds = getToolGroupIds(segmentationId);

    toolGroupIds.forEach(toolGroupId => {
      // const toolGroupId =
-      segmentationService.setActiveSegmentationForToolGroup(
-        segmentationId,
-        toolGroupId
-      );
-      segmentationService.jumpToSegmentCenter(
-        segmentationId,
-        segmentIndex,
-        toolGroupId
-      );
+      segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
+      segmentationService.jumpToSegmentCenter(segmentationId, segmentIndex, toolGroupId);
    });
  };

@@ -118,11 +92,7 @@ export default function PanelSegmentation({
        return;
      }

-      segmentationService.setSegmentLabelForSegmentation(
-        segmentationId,
-        segmentIndex,
-        label
-      );
+      segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
    });
  };

@@ -147,16 +117,34 @@ export default function PanelSegmentation({
  };

  const onSegmentColorClick = (segmentationId, segmentIndex) => {
-    // Todo: Implement color picker later
-    return;
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+
+    const segment = segmentation.segments[segmentIndex];
+    const { color, opacity } = segment;
+
+    const rgbaColor = {
+      r: color[0],
+      g: color[1],
+      b: color[2],
+      a: opacity / 255.0,
+    };
+
+    callColorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
+      if (actionId === 'cancel') {
+        return;
+      }
+
+      segmentationService.setSegmentRGBAColor(segmentationId, segmentIndex, [
+        newRgbaColor.r,
+        newRgbaColor.g,
+        newRgbaColor.b,
+        newRgbaColor.a * 255.0,
+      ]);
+    });
  };

  const onSegmentDelete = (segmentationId, segmentIndex) => {
-    // segmentationService.removeSegmentFromSegmentation(
-    //   segmentationId,
-    //   segmentIndex
-    // );
-    console.warn('not implemented yet');
+    segmentationService.removeSegment(segmentationId, segmentIndex);
  };

  const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
@@ -176,6 +164,10 @@ export default function PanelSegmentation({
    });
  };

+  const onToggleSegmentLock = (segmentationId, segmentIndex) => {
+    segmentationService.toggleSegmentLocked(segmentationId, segmentIndex);
+  };
+
  const onToggleSegmentationVisibility = segmentationId => {
    segmentationService.toggleSegmentationVisibility(segmentationId);
  };
@@ -190,48 +182,71 @@ export default function PanelSegmentation({
    [segmentationService]
  );

+  const onSegmentationDownload = segmentationId => {
+    commandsManager.runCommand('downloadSegmentation', {
+      segmentationId,
+    });
+  };
+
+  const storeSegmentation = async segmentationId => {
+    const datasources = extensionManager.getActiveDataSource();
+
+    const displaySetInstanceUIDs = await createReportAsync({
+      servicesManager,
+      getReport: () =>
+        commandsManager.runCommand('storeSegmentation', {
+          segmentationId,
+          dataSource: datasources[0],
+        }),
+      reportType: 'Segmentation',
+    });
+
+    // Show the exported report in the active viewport as read only (similar to SR)
+    if (displaySetInstanceUIDs) {
+      // clear the segmentation that we exported, similar to the storeMeasurement
+      // where we remove the measurements and prompt again the user if they would like
+      // to re-read the measurements in a SR read only viewport
+      segmentationService.remove(segmentationId);
+
+      viewportGridService.setDisplaySetsForViewport({
+        viewportId: viewportGridService.getActiveViewportId(),
+        displaySetInstanceUIDs,
+      });
+    }
+  };
+
  return (
-    <div className="flex flex-col flex-auto min-h-0 justify-between mt-1">
-      {/* show segmentation table */}
-      {segmentations?.length ? (
+    <>
+      <div className="flex min-h-0 flex-auto select-none flex-col justify-between">
        <SegmentationGroupTable
          title={t('Segmentations')}
-          showAddSegmentation={false}
          segmentations={segmentations}
-          isMinimized={isMinimized}
+          disableEditing={configuration.disableEditing}
          activeSegmentationId={selectedSegmentationId || ''}
+          onSegmentationAdd={onSegmentationAdd}
          onSegmentationClick={onSegmentationClick}
          onSegmentationDelete={onSegmentationDelete}
+          onSegmentationDownload={onSegmentationDownload}
+          storeSegmentation={storeSegmentation}
          onSegmentationEdit={onSegmentationEdit}
          onSegmentClick={onSegmentClick}
          onSegmentEdit={onSegmentEdit}
-          disableEditing={disableEditing}
+          onSegmentAdd={onSegmentAdd}
          onSegmentColorClick={onSegmentColorClick}
          onSegmentDelete={onSegmentDelete}
          onToggleSegmentVisibility={onToggleSegmentVisibility}
+          onToggleSegmentLock={onToggleSegmentLock}
          onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-          onToggleMinimizeSegmentation={onToggleMinimizeSegmentation}
+          showDeleteSegment={true}
          segmentationConfig={{ initialConfig: segmentationConfiguration }}
          setRenderOutline={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'renderOutline',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
          }
          setOutlineOpacityActive={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'outlineOpacity',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
          }
          setRenderFill={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'renderFill',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
          }
          setRenderInactiveSegmentations={value =>
            _setSegmentationConfiguration(
@@ -241,29 +256,17 @@ export default function PanelSegmentation({
            )
          }
          setOutlineWidthActive={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'outlineWidthActive',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
          }
          setFillAlpha={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'fillAlpha',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
          }
          setFillAlphaInactive={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'fillAlphaInactive',
-              value
-            )
+            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
          }
        />
-      ) : null}
-    </div>
+      </div>
+    </>
  );
 }

@@ -271,7 +274,6 @@ PanelSegmentation.propTypes = {
  commandsManager: PropTypes.shape({
    runCommand: PropTypes.func.isRequired,
  }),
-  appConfig: PropTypes.object.isRequired,
  servicesManager: PropTypes.shape({
    services: PropTypes.shape({
      segmentationService: PropTypes.shape({
@@ -0,0 +1,405 @@
+import React, { useCallback, useEffect, useState, useReducer } from 'react';
+import { AdvancedToolbox, InputDoubleRange, useViewportGrid } from '@ohif/ui';
+import { Types } from '@ohif/extension-cornerstone';
+import { utilities } from '@cornerstonejs/tools';
+
+const { segmentation: segmentationUtils } = utilities;
+
+const TOOL_TYPES = {
+  CIRCULAR_BRUSH: 'CircularBrush',
+  SPHERE_BRUSH: 'SphereBrush',
+  CIRCULAR_ERASER: 'CircularEraser',
+  SPHERE_ERASER: 'SphereEraser',
+  CIRCLE_SCISSOR: 'CircleScissor',
+  RECTANGLE_SCISSOR: 'RectangleScissor',
+  SPHERE_SCISSOR: 'SphereScissor',
+  THRESHOLD_CIRCULAR_BRUSH: 'ThresholdCircularBrush',
+  THRESHOLD_SPHERE_BRUSH: 'ThresholdSphereBrush',
+};
+
+const ACTIONS = {
+  SET_TOOL_CONFIG: 'SET_TOOL_CONFIG',
+  SET_ACTIVE_TOOL: 'SET_ACTIVE_TOOL',
+};
+
+const initialState = {
+  Brush: {
+    brushSize: 15,
+    mode: 'CircularBrush', // Can be 'CircularBrush' or 'SphereBrush'
+  },
+  Eraser: {
+    brushSize: 15,
+    mode: 'CircularEraser', // Can be 'CircularEraser' or 'SphereEraser'
+  },
+  Scissors: {
+    brushSize: 15,
+    mode: 'CircleScissor', // E.g., 'CircleScissor', 'RectangleScissor', or 'SphereScissor'
+  },
+  ThresholdBrush: {
+    brushSize: 15,
+    thresholdRange: [-500, 500],
+  },
+  activeTool: null,
+};
+
+function toolboxReducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.SET_TOOL_CONFIG:
+      const { tool, config } = action.payload;
+      return {
+        ...state,
+        [tool]: {
+          ...state[tool],
+          ...config,
+        },
+      };
+    case ACTIONS.SET_ACTIVE_TOOL:
+      return { ...state, activeTool: action.payload };
+    default:
+      return state;
+  }
+}
+
+function SegmentationToolbox({ servicesManager, extensionManager }) {
+  const { toolbarService, segmentationService, toolGroupService } =
+    servicesManager.services as Types.CornerstoneServices;
+
+  const [viewportGrid] = useViewportGrid();
+  const { viewports, activeViewportId } = viewportGrid;
+
+  const [toolsEnabled, setToolsEnabled] = useState(false);
+  const [state, dispatch] = useReducer(toolboxReducer, initialState);
+
+  const updateActiveTool = useCallback(() => {
+    if (!viewports?.size || activeViewportId === undefined) {
+      return;
+    }
+    const viewport = viewports.get(activeViewportId);
+
+    if (!viewport) {
+      return;
+    }
+
+    dispatch({
+      type: ACTIONS.SET_ACTIVE_TOOL,
+      payload: toolGroupService.getActiveToolForViewport(viewport.viewportId),
+    });
+  }, [activeViewportId, viewports, toolGroupService, dispatch]);
+
+  const setToolActive = useCallback(
+    toolName => {
+      toolbarService.recordInteraction({
+        interactionType: 'tool',
+        commands: [
+          {
+            commandName: 'setToolActive',
+            commandOptions: {
+              toolName,
+            },
+          },
+        ],
+      });
+
+      dispatch({ type: ACTIONS.SET_ACTIVE_TOOL, payload: toolName });
+    },
+    [toolbarService, dispatch]
+  );
+
+  /**
+   * sets the tools enabled IF there are segmentations
+   */
+  useEffect(() => {
+    const events = [
+      segmentationService.EVENTS.SEGMENTATION_ADDED,
+      segmentationService.EVENTS.SEGMENTATION_UPDATED,
+      segmentationService.EVENTS.SEGMENTATION_REMOVED,
+    ];
+
+    const unsubscriptions = [];
+
+    events.forEach(event => {
+      const { unsubscribe } = segmentationService.subscribe(event, () => {
+        const segmentations = segmentationService.getSegmentations();
+
+        const activeSegmentation = segmentations?.find(seg => seg.isActive);
+
+        setToolsEnabled(activeSegmentation?.segmentCount > 0);
+      });
+
+      unsubscriptions.push(unsubscribe);
+    });
+
+    updateActiveTool();
+
+    return () => {
+      unsubscriptions.forEach(unsubscribe => unsubscribe());
+    };
+  }, [activeViewportId, viewports, segmentationService, updateActiveTool]);
+
+  /**
+   * Update the active tool when the toolbar state changes
+   */
+  useEffect(() => {
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => {
+        updateActiveTool();
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService, updateActiveTool]);
+
+  useEffect(() => {
+    // if the active tool is not a brush tool then do nothing
+    if (!Object.values(TOOL_TYPES).includes(state.activeTool)) {
+      return;
+    }
+
+    // if the tool is Segmentation and it is enabled then do nothing
+    if (toolsEnabled) {
+      return;
+    }
+
+    // if the tool is Segmentation and it is disabled, then switch
+    // back to the window level tool to not confuse the user when no
+    // segmentation is active or when there is no segment in the segmentation
+    setToolActive('WindowLevel');
+  }, [toolsEnabled, state.activeTool, setToolActive]);
+
+  const updateBrushSize = useCallback(
+    (toolName, brushSize) => {
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+        segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
+      });
+    },
+    [toolGroupService]
+  );
+
+  const onBrushSizeChange = useCallback(
+    (valueAsStringOrNumber, toolCategory) => {
+      const value = Number(valueAsStringOrNumber);
+
+      _getToolNamesFromCategory(toolCategory).forEach(toolName => {
+        updateBrushSize(toolName, value);
+      });
+
+      dispatch({
+        type: ACTIONS.SET_TOOL_CONFIG,
+        payload: {
+          tool: toolCategory,
+          config: { brushSize: value },
+        },
+      });
+    },
+    [toolGroupService, dispatch]
+  );
+
+  const handleRangeChange = useCallback(
+    newRange => {
+      if (
+        newRange[0] === state.ThresholdBrush.thresholdRange[0] &&
+        newRange[1] === state.ThresholdBrush.thresholdRange[1]
+      ) {
+        return;
+      }
+
+      const toolNames = _getToolNamesFromCategory('ThresholdBrush');
+
+      toolNames.forEach(toolName => {
+        toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+          const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+          toolGroup.setToolConfiguration(toolName, {
+            strategySpecificConfiguration: {
+              THRESHOLD_INSIDE_CIRCLE: {
+                threshold: newRange,
+              },
+            },
+          });
+        });
+      });
+
+      dispatch({
+        type: ACTIONS.SET_TOOL_CONFIG,
+        payload: {
+          tool: 'ThresholdBrush',
+          config: { thresholdRange: newRange },
+        },
+      });
+    },
+    [toolGroupService, dispatch, state.ThresholdBrush.thresholdRange]
+  );
+
+  return (
+    <AdvancedToolbox
+      title="Segmentation Tools"
+      items={[
+        {
+          name: 'Brush',
+          icon: 'icon-tool-brush',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCULAR_BRUSH ||
+            state.activeTool === TOOL_TYPES.SPHERE_BRUSH,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_BRUSH),
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'brush-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              value: state.Brush.brushSize,
+              step: 0.5,
+              onChange: value => onBrushSizeChange(value, 'Brush'),
+            },
+            {
+              name: 'Mode',
+              type: 'radio',
+              id: 'brush-mode',
+              value: state.Brush.mode,
+              values: [
+                { value: TOOL_TYPES.CIRCULAR_BRUSH, label: 'Circle' },
+                { value: TOOL_TYPES.SPHERE_BRUSH, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+          ],
+        },
+        {
+          name: 'Eraser',
+          icon: 'icon-tool-eraser',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCULAR_ERASER ||
+            state.activeTool === TOOL_TYPES.SPHERE_ERASER,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_ERASER),
+          options: [
+            {
+              name: 'Radius (mm)',
+              type: 'range',
+              id: 'eraser-radius',
+              min: 0.5,
+              max: 99.5,
+              value: state.Eraser.brushSize,
+              step: 0.5,
+              onChange: value => onBrushSizeChange(value, 'Eraser'),
+            },
+            {
+              name: 'Mode',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: state.Eraser.mode,
+              values: [
+                { value: TOOL_TYPES.CIRCULAR_ERASER, label: 'Circle' },
+                { value: TOOL_TYPES.SPHERE_ERASER, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+          ],
+        },
+        {
+          name: 'Scissor',
+          icon: 'icon-tool-scissor',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCLE_SCISSOR ||
+            state.activeTool === TOOL_TYPES.RECTANGLE_SCISSOR ||
+            state.activeTool === TOOL_TYPES.SPHERE_SCISSOR,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCLE_SCISSOR),
+          options: [
+            {
+              name: 'Mode',
+              type: 'radio',
+              value: state.Scissors.mode,
+              id: 'scissor-mode',
+              values: [
+                { value: TOOL_TYPES.CIRCLE_SCISSOR, label: 'Circle' },
+                { value: TOOL_TYPES.RECTANGLE_SCISSOR, label: 'Rectangle' },
+                { value: TOOL_TYPES.SPHERE_SCISSOR, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+          ],
+        },
+        {
+          name: 'Threshold Tool',
+          icon: 'icon-tool-threshold',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH ||
+            state.activeTool === TOOL_TYPES.THRESHOLD_SPHERE_BRUSH,
+          onClick: () => setToolActive(TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH),
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'threshold-radius',
+              type: 'range',
+              min: 0.5,
+              max: 99.5,
+              value: state.ThresholdBrush.brushSize,
+              step: 0.5,
+              onChange: value => onBrushSizeChange(value, 'ThresholdBrush'),
+            },
+            {
+              name: 'Mode',
+              type: 'radio',
+              id: 'threshold-mode',
+              value: state.activeTool,
+              values: [
+                { value: TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH, label: 'Circle' },
+                { value: TOOL_TYPES.THRESHOLD_SPHERE_BRUSH, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+            {
+              type: 'custom',
+              id: 'segmentation-threshold-range',
+              children: () => {
+                return (
+                  <div>
+                    <div className="bg-secondary-light h-[1px]"></div>
+                    <div className="mt-1 text-[13px] text-white">Threshold</div>
+                    <InputDoubleRange
+                      values={state.ThresholdBrush.thresholdRange}
+                      onChange={handleRangeChange}
+                      minValue={-1000}
+                      maxValue={1000}
+                      step={1}
+                      showLabel={true}
+                      allowNumberEdit={true}
+                      showAdjustmentArrows={false}
+                    />
+                  </div>
+                );
+              },
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+function _getToolNamesFromCategory(category) {
+  let toolNames = [];
+  switch (category) {
+    case 'Brush':
+      toolNames = ['CircularBrush', 'SphereBrush'];
+      break;
+    case 'Eraser':
+      toolNames = ['CircularEraser', 'SphereEraser'];
+      break;
+    case 'ThresholdBrush':
+      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'];
+      break;
+    default:
+      break;
+  }
+
+  return toolNames;
+}
+
+export default SegmentationToolbox;
@@ -39,7 +39,7 @@ function callInputDialog(uiDialogService, label, callback) {
              label="Enter the segment label"
              labelClassName="text-white text-[14px] leading-[1.2]"
              autoFocus
-              className="bg-black border-primary-main"
+              className="border-primary-main bg-black"
              type="text"
              value={value.label}
              onChange={event => {
@@ -0,0 +1,3 @@
+.chrome-picker {
+  background: #090c29 !important;
+}
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dialog } from '@ohif/ui';
+import { ChromePicker } from 'react-color';
+
+import './colorPickerDialog.css';
+
+function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
+  const dialogId = 'pick-color';
+
+  const onSubmitHandler = ({ action, value }) => {
+    switch (action.id) {
+      case 'save':
+        callback(value.rgbaColor, action.id);
+        break;
+      case 'cancel':
+        callback('', action.id);
+        break;
+    }
+    uiDialogService.dismiss({ id: dialogId });
+  };
+
+  if (uiDialogService) {
+    uiDialogService.create({
+      id: dialogId,
+      centralize: true,
+      isDraggable: false,
+      showOverlay: true,
+      content: Dialog,
+      contentProps: {
+        title: 'Segment Color',
+        value: { rgbaColor },
+        noCloseButton: true,
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'primary' },
+          { id: 'save', text: 'Save', type: 'secondary' },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          const handleChange = color => {
+            setValue({ rgbaColor: color.rgb });
+          };
+
+          return (
+            <ChromePicker
+              color={value.rgbaColor}
+              onChange={handleChange}
+              presetColors={[]}
+              width={300}
+            />
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callColorPickerDialog;
@@ -1,69 +0,0 @@
-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;
@@ -6,9 +6,7 @@ import dcmjs from 'dcmjs';
 * @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)
-  );
+  const rgb = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x => Math.round(x * 255));

  return rgb;
 }
@@ -0,0 +1,190 @@
+import { Enums, cache } from '@cornerstonejs/core';
+
+/**
+ * Updates the viewports in preparation for rendering segmentations.
+ * Evaluates each viewport to determine which need modifications,
+ * then for those viewports, changes them to a volume type and ensures
+ * they are ready for segmentation rendering.
+ *
+ * @param {Object} params - Parameters for the function.
+ * @param params.viewportId - ID of the viewport to be updated.
+ * @param params.loadFn - Function to load the segmentation data.
+ * @param params.servicesManager - The services manager.
+ * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
+ *
+ * @returns Returns true upon successful update of viewports for segmentation rendering.
+ */
+async function updateViewportsForSegmentationRendering({
+  viewportId,
+  loadFn,
+  servicesManager,
+  referencedDisplaySetInstanceUID,
+}: {
+  viewportId: string;
+  loadFn: () => Promise<string>;
+  servicesManager: any;
+  referencedDisplaySetInstanceUID?: string;
+}) {
+  const { cornerstoneViewportService, segmentationService, viewportGridService } =
+    servicesManager.services;
+
+  const viewport = getTargetViewport({ viewportId, viewportGridService });
+  const targetViewportId = viewport.viewportOptions.viewportId;
+
+  referencedDisplaySetInstanceUID =
+    referencedDisplaySetInstanceUID || viewport?.displaySetInstanceUIDs[0];
+
+  const updatedViewports = getUpdatedViewportsForSegmentation({
+    servicesManager,
+    viewportId,
+    referencedDisplaySetInstanceUID,
+  });
+
+  // create Segmentation callback which needs to be waited until
+  // the volume is created (if coming from stack)
+  const createSegmentationForVolume = async () => {
+    const segmentationId = await loadFn();
+    segmentationService.hydrateSegmentation(segmentationId);
+  };
+
+  // the reference volume that is used to draw the segmentation. so check if the
+  // volume exists in the cache (the target Viewport is already a volume viewport)
+  const volumeExists = Array.from(cache._volumeCache.keys()).some(volumeId =>
+    volumeId.includes(referencedDisplaySetInstanceUID)
+  );
+
+  updatedViewports.forEach(async viewport => {
+    viewport.viewportOptions = {
+      ...viewport.viewportOptions,
+      viewportType: 'volume',
+      needsRerendering: true,
+    };
+    const viewportId = viewport.viewportId;
+
+    const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const prevCamera = csViewport.getCamera();
+
+    // only run the createSegmentationForVolume for the targetViewportId
+    // since the rest will get handled by cornerstoneViewportService
+    if (volumeExists && viewportId === targetViewportId) {
+      await createSegmentationForVolume();
+      return;
+    }
+
+    const createNewSegmentationWhenVolumeMounts = async evt => {
+      const isTheActiveViewportVolumeMounted = evt.detail.volumeActors?.find(ac =>
+        ac.uid.includes(referencedDisplaySetInstanceUID)
+      );
+
+      // Note: make sure to re-grab the viewport since it might have changed
+      // during the time it took for the volume to be mounted, for instance
+      // the stack viewport has been changed to a volume viewport
+      const volumeViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      volumeViewport.setCamera(prevCamera);
+
+      volumeViewport.element.removeEventListener(
+        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+        createNewSegmentationWhenVolumeMounts
+      );
+
+      if (!isTheActiveViewportVolumeMounted) {
+        // it means it is one of those other updated viewports so just update the camera
+        return;
+      }
+
+      if (viewportId === targetViewportId) {
+        await createSegmentationForVolume();
+      }
+    };
+
+    csViewport.element.addEventListener(
+      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      createNewSegmentationWhenVolumeMounts
+    );
+  });
+
+  // Set the displaySets for the viewports that require to be updated
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+
+  return true;
+}
+
+const getTargetViewport = ({ viewportId, viewportGridService }) => {
+  const { viewports, activeViewportId } = viewportGridService.getState();
+  const targetViewportId = viewportId || activeViewportId;
+
+  const viewport = viewports.get(targetViewportId);
+
+  return viewport;
+};
+
+/**
+ * Retrieves a list of viewports that require updates in preparation for segmentation rendering.
+ * This function evaluates viewports based on their compatibility with the provided segmentation's
+ * frame of reference UID and appends them to the updated list if they should render the segmentation.
+ *
+ * @param {Object} params - Parameters for the function.
+ * @param params.viewportId - the ID of the viewport to be updated.
+ * @param params.servicesManager - The services manager
+ * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
+ *
+ * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
+ */
+function getUpdatedViewportsForSegmentation({
+  viewportId,
+  servicesManager,
+  referencedDisplaySetInstanceUID,
+}) {
+  const { hangingProtocolService, displaySetService, segmentationService, viewportGridService } =
+    servicesManager.services;
+
+  const { viewports } = viewportGridService.getState();
+
+  const viewport = getTargetViewport({ viewportId, viewportGridService });
+  const targetViewportId = viewport.viewportOptions.viewportId;
+
+  const displaySetInstanceUIDs = viewports.get(targetViewportId).displaySetInstanceUIDs;
+
+  const referenceDisplaySetInstanceUID =
+    referencedDisplaySetInstanceUID || displaySetInstanceUIDs[0];
+
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(referenceDisplaySetInstanceUID);
+  const segmentationFrameOfReferenceUID = referencedDisplaySet.instances[0].FrameOfReferenceUID;
+
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+    targetViewportId,
+    referenceDisplaySetInstanceUID
+  );
+
+  viewports.forEach((viewport, viewportId) => {
+    if (
+      targetViewportId === viewportId ||
+      updatedViewports.find(v => v.viewportId === viewportId)
+    ) {
+      return;
+    }
+
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
+      viewport.displaySetInstanceUIDs,
+      segmentationFrameOfReferenceUID
+    );
+
+    if (shouldDisplaySeg) {
+      updatedViewports.push({
+        viewportId,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          viewportType: 'volume',
+          needsRerendering: true,
+        },
+      });
+    }
+  });
+  return updatedViewports;
+}
+
+export {
+  updateViewportsForSegmentationRendering,
+  getUpdatedViewportsForSegmentation,
+  getTargetViewport,
+};
@@ -1,12 +1,7 @@
-function createSEGToolGroupAndAddTools(
-  ToolGroupService,
-  customizationService,
-  toolGroupId
-) {
-  const { tools } =
-    customizationService.get('cornerstone.overlayViewportTools') ?? {};
+function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
+  const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};

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

 export default createSEGToolGroupAndAddTools;
@@ -1,5 +1,4 @@
 import { ButtonEnums } from '@ohif/ui';
-import hydrateSEGDisplaySet from './_hydrateSEG';

 const RESPONSE = {
  NO_NEVER: -1,
@@ -10,16 +9,14 @@ const RESPONSE = {
 function promptHydrateSEG({
  servicesManager,
  segDisplaySet,
-  viewportIndex,
+  viewportId,
  preHydrateCallbacks,
+  hydrateSEGDisplaySet,
 }) {
  const { uiViewportDialogService } = servicesManager.services;

-  return new Promise(async function(resolve, reject) {
-    const promptResult = await _askHydrate(
-      uiViewportDialogService,
-      viewportIndex
-    );
+  return new Promise(async function (resolve, reject) {
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportId);

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

      const isHydrated = await hydrateSEGDisplaySet({
        segDisplaySet,
-        viewportIndex,
-        servicesManager,
+        viewportId,
      });

      resolve(isHydrated);
@@ -37,8 +33,8 @@ function promptHydrateSEG({
  });
 }

-function _askHydrate(uiViewportDialogService, viewportIndex) {
-  return new Promise(function(resolve, reject) {
+function _askHydrate(uiViewportDialogService, viewportId) {
+  return new Promise(function (resolve, reject) {
    const message = 'Do you want to open this Segmentation?';
    const actions = [
      {
@@ -58,7 +54,7 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
    };

    uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
      type: 'info',
      message,
      actions,
@@ -2,14 +2,9 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import OHIF, { utils } from '@ohif/core';
-import {
-  LoadingIndicatorTotalPercent,
-  useViewportGrid,
-  ViewportActionBar,
-} from '@ohif/ui';
+import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionBar } from '@ohif/ui';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
-import hydrateSEGDisplaySet from '../utils/_hydrateSEG';
 import _getStatusComponent from './_getStatusComponent';

 const { formatDate } = utils;
@@ -20,7 +15,6 @@ function OHIFCornerstoneSEGViewport(props) {
    children,
    displaySets,
    viewportOptions,
-    viewportIndex,
    viewportLabel,
    servicesManager,
    extensionManager,
@@ -28,6 +22,7 @@ function OHIFCornerstoneSEGViewport(props) {
  } = props;

  const { t } = useTranslation('SEGViewport');
+  const viewportId = viewportOptions.viewportId;

  const {
    displaySetService,
@@ -37,7 +32,7 @@ function OHIFCornerstoneSEGViewport(props) {
    customizationService,
  } = servicesManager.services;

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

  // SEG viewport will always have a single display set
  if (displaySets.length > 1) {
@@ -67,7 +62,7 @@ function OHIFCornerstoneSEGViewport(props) {
  // refs
  const referencedDisplaySetRef = useRef(null);

-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;

  const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
@@ -94,9 +89,9 @@ function OHIFCornerstoneSEGViewport(props) {
  };

  const storePresentationState = useCallback(() => {
-    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
      commandsManager.runCommand('storePresentation', {
-        viewportIndex,
+        viewportId,
      });
    });
  }, [viewportGrid]);
@@ -106,9 +101,7 @@ function OHIFCornerstoneSEGViewport(props) {
      '@ohif/extension-cornerstone.viewportModule.cornerstone'
    );

-    const {
-      displaySet: referencedDisplaySet,
-    } = referencedDisplaySetRef.current;
+    const { displaySet: referencedDisplaySet } = referencedDisplaySetRef.current;

    // Todo: jump to the center of the first segment
    return (
@@ -126,7 +119,7 @@ function OHIFCornerstoneSEGViewport(props) {
        // initialImageIndex={initialImageIndex}
      ></Component>
    );
-  }, [viewportIndex, segDisplaySet, toolGroupId]);
+  }, [viewportId, segDisplaySet, toolGroupId]);

  const onSegmentChange = useCallback(
    direction => {
@@ -148,11 +141,7 @@ function OHIFCornerstoneSEGViewport(props) {
        newSelectedSegmentIndex = numberOfSegments - 1;
      }

-      segmentationService.jumpToSegmentCenter(
-        segmentationId,
-        newSelectedSegmentIndex,
-        toolGroupId
-      );
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, toolGroupId);
      setSelectedSegment(newSelectedSegmentIndex);
    },
    [selectedSegment]
@@ -165,32 +154,29 @@ function OHIFCornerstoneSEGViewport(props) {

    promptHydrateSEG({
      servicesManager,
-      viewportIndex,
+      viewportId,
      segDisplaySet,
      preHydrateCallbacks: [storePresentationState],
+      hydrateSEGDisplaySet,
    }).then(isHydrated => {
      if (isHydrated) {
        setIsHydrated(true);
      }
    });
-  }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);
+  }, [servicesManager, viewportId, segDisplaySet, segIsLoading]);

  useEffect(() => {
    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 (evt.overlappingSegments) {
          uiNotificationService.show({
            title: 'Overlapping Segments',
-            message:
-              'Overlapping segments detected which is not currently supported',
+            message: 'Overlapping segments detected which is not currently supported',
            type: 'warning',
          });
        }
@@ -225,12 +211,10 @@ function OHIFCornerstoneSEGViewport(props) {
    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
      ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
-        if (
-          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
-        ) {
+        const activeViewport = viewports.get(activeViewportId);
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
          viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
            displaySetInstanceUIDs: [],
          });
        }
@@ -251,17 +235,11 @@ function OHIFCornerstoneSEGViewport(props) {

    // This creates a custom tool group which has the lifetime of this view
    // only, and does NOT interfere with currently displayed segmentations.
-    toolGroup = createSEGToolGroupAndAddTools(
-      toolGroupService,
-      customizationService,
-      toolGroupId
-    );
+    toolGroup = createSEGToolGroupAndAddTools(toolGroupService, customizationService, toolGroupId);

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

      // Only destroy the viewport specific implementation
      toolGroupService.destroyToolGroup(toolGroupId);
@@ -273,9 +251,7 @@ function OHIFCornerstoneSEGViewport(props) {

    return () => {
      // remove the segmentation representations if seg displayset changed
-      segmentationService.removeSegmentationRepresentationFromToolGroup(
-        toolGroupId
-      );
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
      referencedDisplaySetRef.current = null;
    };
  }, [segDisplaySet]);
@@ -296,7 +272,7 @@ function OHIFCornerstoneSEGViewport(props) {
      return (
        child &&
        React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
          key: index,
        })
      );
@@ -315,6 +291,13 @@ function OHIFCornerstoneSEGViewport(props) {
    SpacingBetweenSlices,
  } = referencedDisplaySetRef.current.metadata;

+  const hydrateSEGDisplaySet = ({ segDisplaySet, viewportId }) => {
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      displaySets: [segDisplaySet],
+      viewportId,
+    });
+  };
+
  const onStatusClick = async () => {
    // Before hydrating a SEG and make it added to all viewports in the grid
    // that share the same frameOfReferenceUID, we need to store the viewport grid
@@ -325,8 +308,7 @@ function OHIFCornerstoneSEGViewport(props) {
    storePresentationState();
    const isHydrated = await hydrateSEGDisplaySet({
      segDisplaySet,
-      viewportIndex,
-      servicesManager,
+      viewportId,
    });

    setIsHydrated(isHydrated);
@@ -351,29 +333,23 @@ function OHIFCornerstoneSEGViewport(props) {
          studyDate: formatDate(StudyDate),
          seriesDescription: `SEG Viewport ${SeriesDescription}`,
          patientInformation: {
-            patientName: PatientName
-              ? OHIF.utils.formatPN(PatientName.Alphabetic)
-              : '',
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
            patientSex: PatientSex || '',
            patientAge: PatientAge || '',
            MRN: PatientID || '',
-            thickness: SliceThickness
-              ? utils.roundNumber(SliceThickness, 2)
-              : '',
+            thickness: SliceThickness ? utils.roundNumber(SliceThickness, 2) : '',
            thicknessUnits: SliceThickness !== undefined ? 'mm' : '',
            spacing:
-              SpacingBetweenSlices !== undefined
-                ? utils.roundNumber(SpacingBetweenSlices, 2)
-                : '',
+              SpacingBetweenSlices !== undefined ? utils.roundNumber(SpacingBetweenSlices, 2) : '',
            scanner: ManufacturerModelName || '',
          },
        }}
      />

-      <div className="relative flex flex-row w-full h-full overflow-hidden">
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
        {segIsLoading && (
          <LoadingIndicatorTotalPercent
-            className="w-full h-full"
+            className="h-full w-full"
            totalNumbers={processingProgress.totalSegments}
            percentComplete={processingProgress.percentComplete}
            loadingText="Loading SEG..."
@@ -388,7 +364,7 @@ function OHIFCornerstoneSEGViewport(props) {

 OHIFCornerstoneSEGViewport.propTypes = {
  displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
  dataSource: PropTypes.object,
  children: PropTypes.node,
  customProps: PropTypes.object,
@@ -399,12 +375,18 @@ OHIFCornerstoneSEGViewport.defaultProps = {
 };

 function _getReferencedDisplaySetMetadata(referencedDisplaySet, segDisplaySet) {
-  const {
-    SharedFunctionalGroupsSequence: [SharedFunctionalGroup],
-  } = segDisplaySet.instance;
-  const {
-    PixelMeasuresSequence: [PixelMeasures],
-  } = SharedFunctionalGroup;
+  const { SharedFunctionalGroupsSequence } = segDisplaySet.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];
@@ -13,25 +13,28 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
    case true:
      StatusIcon = () => <Icon name="status-alert" />;

-      ToolTipMessage = () => (
-        <div>This Segmentation is loaded in the segmentation panel</div>
-      );
+      ToolTipMessage = () => <div>This Segmentation is loaded in the segmentation panel</div>;
      break;
    case false:
-      StatusIcon = () => <Icon name="status-untracked" />;
+      StatusIcon = () => (
+        <Icon
+          className="text-aqua-pale"
+          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">
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
        <StatusIcon />
        <span className="ml-1">SEG</span>
      </div>
      {!isHydrated && (
        <div
-          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
          onMouseUp={onStatusClick}
        >
@@ -44,7 +47,10 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
          <StatusArea />
        </Tooltip>
      )}
@@ -41,13 +41,7 @@ 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,
@@ -0,0 +1,320 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [3.7.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.92...v3.7.0-beta.93) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.91...v3.7.0-beta.92) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.90...v3.7.0-beta.91) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.89...v3.7.0-beta.90) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.88...v3.7.0-beta.89) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.87...v3.7.0-beta.88) (2023-10-03)
+
+
+### Bug Fixes
+
+* **config:** support more values for the useSharedArrayBuffer ([#3688](https://github.com/OHIF/Viewers/issues/3688)) ([1129c15](https://github.com/OHIF/Viewers/commit/1129c155d2c7d46c98a5df7c09879aa3d459fa7e))
+
+
+
+
+
+# [3.7.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.86...v3.7.0-beta.87) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.85...v3.7.0-beta.86) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.84...v3.7.0-beta.85) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.83...v3.7.0-beta.84) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.82...v3.7.0-beta.83) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.81...v3.7.0-beta.82) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.80...v3.7.0-beta.81) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.79...v3.7.0-beta.80) (2023-09-22)
+
+
+### Features
+
+* **segmentation mode:** Add create, and export SEG with Brushes ([#3632](https://github.com/OHIF/Viewers/issues/3632)) ([48bbd62](https://github.com/OHIF/Viewers/commit/48bbd6281a497ea68670239f5426a10ee6c56dc1))
+
+
+
+
+
+# [3.7.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.78...v3.7.0-beta.79) (2023-09-22)
+
+
+### Performance Improvements
+
+* **memory:** add 16 bit texture via configuration - reduces memory by half ([#3662](https://github.com/OHIF/Viewers/issues/3662)) ([2bd3b26](https://github.com/OHIF/Viewers/commit/2bd3b26a6aa54b211ef988f3ad64ef1fe5648bab))
+
+
+
+
+
+# [3.7.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.77...v3.7.0-beta.78) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.76...v3.7.0-beta.77) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.75...v3.7.0-beta.76) (2023-09-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+
+### Features
+
+* **ImageOverlayViewerTool:** add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images ([#3163](https://github.com/OHIF/Viewers/issues/3163)) ([69115da](https://github.com/OHIF/Viewers/commit/69115da06d2d437b57e66608b435bb0bc919a90f))
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
+# [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
+
+
+### Features
+
+* **data source UI config:** Popup the configuration dialogue whenever a data source is not fully configured ([#3620](https://github.com/OHIF/Viewers/issues/3620)) ([adedc8c](https://github.com/OHIF/Viewers/commit/adedc8c382e18a2e86a569e3d023cc55a157363f))
+
+
+
+
+
+# [3.7.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.60...v3.7.0-beta.61) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.59...v3.7.0-beta.60) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.58...v3.7.0-beta.59) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone-dicom-sr
+
+
+
+
+
+# [3.7.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.57...v3.7.0-beta.58) (2023-08-25)
+
+
+### Features
+
+* **cloud data source config:** GUI and API for configuring a cloud data source with Google cloud healthcare implementation ([#3589](https://github.com/OHIF/Viewers/issues/3589)) ([a336992](https://github.com/OHIF/Viewers/commit/a336992971c07552c9dbb6e1de43169d37762ef1))
+
+
+
+
+
+# [3.7.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.56...v3.7.0-beta.57) (2023-08-23)
+
+
+### Bug Fixes
+
+* **memory leak:** array buffer was sticking around in volume viewports ([#3611](https://github.com/OHIF/Viewers/issues/3611)) ([65b49ae](https://github.com/OHIF/Viewers/commit/65b49aeb1b5f38224e4892bdf32453500ee351f8))
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.7.0-beta.56",
+  "version": "3.7.0-beta.93",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -32,10 +32,10 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.56",
-    "@ohif/extension-cornerstone": "3.7.0-beta.56",
-    "@ohif/extension-measurement-tracking": "3.7.0-beta.56",
-    "@ohif/ui": "3.7.0-beta.56",
+    "@ohif/core": "3.7.0-beta.93",
+    "@ohif/extension-cornerstone": "3.7.0-beta.93",
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.93",
+    "@ohif/ui": "3.7.0-beta.93",
    "dcmjs": "^0.29.5",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
@@ -44,9 +44,9 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.10.3",
-    "@cornerstonejs/core": "^1.10.3",
-    "@cornerstonejs/tools": "^1.10.3",
+    "@cornerstonejs/adapters": "^1.19.3",
+    "@cornerstonejs/core": "^1.19.3",
+    "@cornerstonejs/tools": "^1.19.3",
    "classnames": "^2.3.2"
  }
 }
@@ -17,11 +17,7 @@ const { log } = OHIF;
 * @param options Naturalized DICOM JSON headers to merge into the displaySet.
 *
 */
-const _generateReport = (
-  measurementData,
-  additionalFindingTypes,
-  options = {}
-) => {
+const _generateReport = (measurementData, additionalFindingTypes, options = {}) => {
  const filteredToolState = getFilteredCornerstoneToolState(
    measurementData,
    additionalFindingTypes
@@ -54,16 +50,8 @@ const commandsModule = ({}) => {
     * as opposed to Finding Sites.
     * that you wish to serialize.
     */
-    downloadReport: ({
-      measurementData,
-      additionalFindingTypes,
-      options = {},
-    }) => {
-      const srDataset = actions.generateReport(
-        measurementData,
-        additionalFindingTypes,
-        options
-      );
+    downloadReport: ({ measurementData, additionalFindingTypes, options = {} }) => {
+      const srDataset = actions.generateReport(measurementData, additionalFindingTypes, options);
      const reportBlob = dcmjs.data.datasetToBlob(srDataset);

      //Create a URL for the binary.
@@ -91,28 +79,19 @@ const commandsModule = ({}) => {
      log.info('[DICOMSR] storeMeasurements');

      if (!dataSource || !dataSource.store || !dataSource.store.dicom) {
-        log.error(
-          '[DICOMSR] datasource has no dataSource.store.dicom endpoint!'
-        );
+        log.error('[DICOMSR] datasource has no dataSource.store.dicom endpoint!');
        return Promise.reject({});
      }

      try {
-        const naturalizedReport = _generateReport(
-          measurementData,
-          additionalFindingTypes,
-          options
-        );
+        const naturalizedReport = _generateReport(measurementData, additionalFindingTypes, options);

        const { StudyInstanceUID, ContentSequence } = naturalizedReport;
        // The content sequence has 5 or more elements, of which
        // the `[4]` element contains the annotation data, so this is
        // checking that there is some annotation data present.
        if (!ContentSequence?.[4].ContentSequence?.length) {
-          console.log(
-            'naturalizedReport missing imaging content',
-            naturalizedReport
-          );
+          console.log('naturalizedReport missing imaging content', naturalizedReport);
          throw new Error('Invalid report, no content');
        }

@@ -130,12 +109,8 @@ const commandsModule = ({}) => {
        return naturalizedReport;
      } catch (error) {
        console.warn(error);
-        log.error(
-          `[DICOMSR] Error while saving the measurements: ${error.message}`
-        );
-        throw new Error(
-          error.message || 'Error while saving the measurements.'
-        );
+        log.error(`[DICOMSR] Error while saving the measurements: ${error.message}`);
+        throw new Error(error.message || 'Error while saving the measurements.');
      }
    },
  };
@@ -29,9 +29,7 @@ const validateSameStudyUID = (uid: string, instances): void => {
  instances.forEach(it => {
    if (it.StudyInstanceUID !== uid) {
      console.warn('Not all instances have the same UID', uid, it);
-      throw new Error(
-        `Instances ${it.SOPInstanceUID} does not belong to ${uid}`
-      );
+      throw new Error(`Instances ${it.SOPInstanceUID} does not belong to ${uid}`);
    }
  });
 };
@@ -51,10 +49,7 @@ const CodeNameCodeSequenceValues = {

 const CodingSchemeDesignators = {
  SRT: 'SRT',
-  CornerstoneCodeSchemes: [
-    Cornerstone3DCodeScheme.CodingSchemeDesignator,
-    'CST4',
-  ],
+  CornerstoneCodeSchemes: [Cornerstone3DCodeScheme.CodingSchemeDesignator, 'CST4'],
 };

 const RELATIONSHIP_TYPE = {
@@ -71,10 +66,7 @@ const CORNERSTONE_FREETEXT_CODE_VALUE = 'CORNERSTONEFREETEXT';
 * @param instances is a list of instances from THIS series that are not
 *     in this DICOM SR Display Set already.
 */
-function addInstances(
-  instances: InstanceMetadata[],
-  displaySetService: DisplaySetService
-) {
+function addInstances(instances: InstanceMetadata[], displaySetService: DisplaySetService) {
  this.instances.push(...instances);
  utils.sortStudyInstances(this.instances);
  // The last instance is the newest one, so is the one most interesting.
@@ -93,11 +85,7 @@ function addInstances(
 * @param servicesManager is the services that can be used for creating
 * @returns The list of display sets created for the given instances object
 */
-function _getDisplaySetsFromSeries(
-  instances,
-  servicesManager,
-  extensionManager
-) {
+function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
  // If the series has no instances, stop here
  if (!instances || !instances.length) {
    throw new Error('No instances were provided');
@@ -123,8 +111,7 @@ function _getDisplaySetsFromSeries(

  if (
    !ConceptNameCodeSequence ||
-    ConceptNameCodeSequence.CodeValue !==
-      CodeNameCodeSequenceValues.ImagingMeasurementReport
+    ConceptNameCodeSequence.CodeValue !== CodeNameCodeSequenceValues.ImagingMeasurementReport
  ) {
    servicesManager.services.uiNotificationService.show({
      title: 'DICOM SR',
@@ -184,36 +171,21 @@ function _load(displaySet, servicesManager, extensionManager) {

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

  // Subscribe to new displaySets as the source may come in after.
-  displaySetService.subscribe(
-    displaySetService.EVENTS.DISPLAY_SETS_ADDED,
-    data => {
-      const { displaySetsAdded } = data;
-      // If there are still some measurements that have not yet been loaded into cornerstone,
-      // See if we can load them onto any of the new displaySets.
-      displaySetsAdded.forEach(newDisplaySet => {
-        _checkIfCanAddMeasurementsToDisplaySet(
-          displaySet,
-          newDisplaySet,
-          dataSource
-        );
-      });
-    }
-  );
+  displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, data => {
+    const { displaySetsAdded } = data;
+    // If there are still some measurements that have not yet been loaded into cornerstone,
+    // See if we can load them onto any of the new displaySets.
+    displaySetsAdded.forEach(newDisplaySet => {
+      _checkIfCanAddMeasurementsToDisplaySet(displaySet, newDisplaySet, dataSource);
+    });
+  });
 }

-function _checkIfCanAddMeasurementsToDisplaySet(
-  srDisplaySet,
-  newDisplaySet,
-  dataSource
-) {
+function _checkIfCanAddMeasurementsToDisplaySet(srDisplaySet, newDisplaySet, dataSource) {
  let unloadedMeasurements = srDisplaySet.measurements.filter(
    measurement => measurement.loaded === false
  );
@@ -248,8 +220,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
    const { coords } = measurement;

    coords.forEach(coord => {
-      const SOPInstanceUID =
-        coord.ReferencedSOPSequence.ReferencedSOPInstanceUID;
+      const SOPInstanceUID = coord.ReferencedSOPSequence.ReferencedSOPInstanceUID;

      if (!SOPInstanceUIDs.includes(SOPInstanceUID)) {
        SOPInstanceUIDs.push(SOPInstanceUID);
@@ -257,9 +228,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
    });
  });

-  const imageIdsForDisplaySet = dataSource.getImageIdsForDisplaySet(
-    newDisplaySet
-  );
+  const imageIdsForDisplaySet = dataSource.getImageIdsForDisplaySet(newDisplaySet);

  for (const imageId of imageIdsForDisplaySet) {
    if (!unloadedMeasurements.length) {
@@ -267,25 +236,13 @@ function _checkIfCanAddMeasurementsToDisplaySet(
      return;
    }

-    const { SOPInstanceUID, frameNumber } = metadataProvider.getUIDsFromImageID(
-      imageId
-    );
+    const { SOPInstanceUID, frameNumber } = metadataProvider.getUIDsFromImageID(imageId);

    if (SOPInstanceUIDs.includes(SOPInstanceUID)) {
      for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
        const measurement = unloadedMeasurements[j];
-        if (
-          _measurementReferencesSOPInstanceUID(
-            measurement,
-            SOPInstanceUID,
-            frameNumber
-          )
-        ) {
-          addMeasurement(
-            measurement,
-            imageId,
-            newDisplaySet.displaySetInstanceUID
-          );
+        if (_measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber)) {
+          addMeasurement(measurement, imageId, newDisplaySet.displaySetInstanceUID);

          unloadedMeasurements.splice(j, 1);
        }
@@ -294,11 +251,7 @@ function _checkIfCanAddMeasurementsToDisplaySet(
  }
 }

-function _measurementReferencesSOPInstanceUID(
-  measurement,
-  SOPInstanceUID,
-  frameNumber
-) {
+function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber) {
  const { coords } = measurement;

  // NOTE: The ReferencedFrameNumber can be multiple values according to the DICOM
@@ -324,11 +277,7 @@ function _measurementReferencesSOPInstanceUID(

 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
  const getDisplaySetsFromSeries = instances => {
-    return _getDisplaySetsFromSeries(
-      instances,
-      servicesManager,
-      extensionManager
-    );
+    return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
  };

  return [
@@ -343,30 +292,22 @@ function getSopClassHandlerModule({ servicesManager, extensionManager }) {
 function _getMeasurements(ImagingMeasurementReportContentSequence) {
  const ImagingMeasurements = ImagingMeasurementReportContentSequence.find(
    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.ImagingMeasurements
+      item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImagingMeasurements
  );

-  const MeasurementGroups = _getSequenceAsArray(
-    ImagingMeasurements.ContentSequence
-  ).filter(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.MeasurementGroup
+  const MeasurementGroups = _getSequenceAsArray(ImagingMeasurements.ContentSequence).filter(
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.MeasurementGroup
  );

-  const mergedContentSequencesByTrackingUniqueIdentifiers = _getMergedContentSequencesByTrackingUniqueIdentifiers(
-    MeasurementGroups
-  );
+  const mergedContentSequencesByTrackingUniqueIdentifiers =
+    _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups);

  const measurements = [];

  Object.keys(mergedContentSequencesByTrackingUniqueIdentifiers).forEach(
    trackingUniqueIdentifier => {
      const mergedContentSequence =
-        mergedContentSequencesByTrackingUniqueIdentifiers[
-          trackingUniqueIdentifier
-        ];
+        mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier];

      const measurement = _processMeasurement(mergedContentSequence);

@@ -379,15 +320,11 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
  return measurements;
 }

-function _getMergedContentSequencesByTrackingUniqueIdentifiers(
-  MeasurementGroups
-) {
+function _getMergedContentSequencesByTrackingUniqueIdentifiers(MeasurementGroups) {
  const mergedContentSequencesByTrackingUniqueIdentifiers = {};

  MeasurementGroups.forEach(MeasurementGroup => {
-    const ContentSequence = _getSequenceAsArray(
-      MeasurementGroup.ContentSequence
-    );
+    const ContentSequence = _getSequenceAsArray(MeasurementGroup.ContentSequence);

    const TrackingUniqueIdentifierItem = ContentSequence.find(
      item =>
@@ -396,22 +333,16 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(
    );

    if (!TrackingUniqueIdentifierItem) {
-      console.warn(
-        'No Tracking Unique Identifier, skipping ambiguous measurement.'
-      );
+      console.warn('No Tracking Unique Identifier, skipping ambiguous measurement.');
    }

    const trackingUniqueIdentifier = TrackingUniqueIdentifierItem.UID;

-    if (
-      mergedContentSequencesByTrackingUniqueIdentifiers[
-        trackingUniqueIdentifier
-      ] === undefined
-    ) {
+    if (mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier] === undefined) {
      // Add the full ContentSequence
-      mergedContentSequencesByTrackingUniqueIdentifiers[
-        trackingUniqueIdentifier
-      ] = [...ContentSequence];
+      mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier] = [
+        ...ContentSequence,
+      ];
    } else {
      // Add the ContentSequence minus the tracking identifier, as we have this
      // Information in the merged ContentSequence anyway.
@@ -420,9 +351,7 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(
          item.ConceptNameCodeSequence.CodeValue !==
          CodeNameCodeSequenceValues.TrackingUniqueIdentifier
        ) {
-          mergedContentSequencesByTrackingUniqueIdentifiers[
-            trackingUniqueIdentifier
-          ].push(item);
+          mergedContentSequencesByTrackingUniqueIdentifiers[trackingUniqueIdentifier].push(item);
        }
      });
    }
@@ -447,18 +376,12 @@ function _processTID1410Measurement(mergedContentSequence) {
  // Need to deal with TID 1410 style measurements, which will have a SCOORD or SCOORD3D at the top level,
  // And non-geometric representations where each NUM has "INFERRED FROM" SCOORD/SCOORD3D

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

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

  const TrackingIdentifierContentItem = mergedContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.TrackingIdentifier
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.TrackingIdentifier
  );

  if (!graphicItem) {
@@ -468,9 +391,7 @@ function _processTID1410Measurement(mergedContentSequence) {
    return;
  }

-  const NUMContentItems = mergedContentSequence.filter(
-    group => group.ValueType === 'NUM'
-  );
+  const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');

  const measurement = {
    loaded: false,
@@ -485,10 +406,7 @@ function _processTID1410Measurement(mergedContentSequence) {

    if (MeasuredValueSequence) {
      measurement.labels.push(
-        _getLabelFromMeasuredValueSequence(
-          ConceptNameCodeSequence,
-          MeasuredValueSequence
-        )
+        _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence)
      );
    }
  });
@@ -497,32 +415,22 @@ function _processTID1410Measurement(mergedContentSequence) {
 }

 function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
-  const NUMContentItems = mergedContentSequence.filter(
-    group => group.ValueType === 'NUM'
-  );
+  const NUMContentItems = mergedContentSequence.filter(group => group.ValueType === 'NUM');

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

  const TrackingIdentifierContentItem = mergedContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.TrackingIdentifier
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.TrackingIdentifier
  );

  const finding = mergedContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.Finding
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.Finding
  );

  const findingSites = mergedContentSequence.filter(
    item =>
-      item.ConceptNameCodeSequence.CodingSchemeDesignator ===
-        CodingSchemeDesignators.SRT &&
-      item.ConceptNameCodeSequence.CodeValue ===
-        CodeNameCodeSequenceValues.FindingSite
+      item.ConceptNameCodeSequence.CodingSchemeDesignator === CodingSchemeDesignators.SRT &&
+      item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.FindingSite
  );

  const measurement = {
@@ -538,8 +446,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
    CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
      finding.ConceptCodeSequence.CodingSchemeDesignator
    ) &&
-    finding.ConceptCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.CornerstoneFreeText
+    finding.ConceptCodeSequence.CodeValue === CodeNameCodeSequenceValues.CornerstoneFreeText
  ) {
    measurement.labels.push({
      label: CORNERSTONE_FREETEXT_CODE_VALUE,
@@ -554,8 +461,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
        CodingSchemeDesignators.CornerstoneCodeSchemes.includes(
          FindingSite.ConceptCodeSequence.CodingSchemeDesignator
        ) &&
-        FindingSite.ConceptCodeSequence.CodeValue ===
-          CodeNameCodeSequenceValues.CornerstoneFreeText
+        FindingSite.ConceptCodeSequence.CodeValue === CodeNameCodeSequenceValues.CornerstoneFreeText
    );

    if (cornerstoneFreeTextFindingSite) {
@@ -567,18 +473,12 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
  }

  NUMContentItems.forEach(item => {
-    const {
-      ConceptNameCodeSequence,
-      ContentSequence,
-      MeasuredValueSequence,
-    } = item;
+    const { ConceptNameCodeSequence, ContentSequence, MeasuredValueSequence } = item;

    const { ValueType } = ContentSequence;

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

      return;
    }
@@ -591,10 +491,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {

    if (MeasuredValueSequence) {
      measurement.labels.push(
-        _getLabelFromMeasuredValueSequence(
-          ConceptNameCodeSequence,
-          MeasuredValueSequence
-        )
+        _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence)
      );
    }
  });
@@ -634,17 +531,12 @@ function _getCoordsFromSCOORDOrSCOORD3D(item) {
  return coords;
 }

-function _getLabelFromMeasuredValueSequence(
-  ConceptNameCodeSequence,
-  MeasuredValueSequence
-) {
+function _getLabelFromMeasuredValueSequence(ConceptNameCodeSequence, MeasuredValueSequence) {
  const { CodeMeaning } = ConceptNameCodeSequence;
  const { NumericValue, MeasurementUnitsCodeSequence } = MeasuredValueSequence;
  const { CodeValue } = MeasurementUnitsCodeSequence;

-  const formatedNumericValue = NumericValue
-    ? Number(NumericValue).toFixed(2)
-    : '';
+  const formatedNumericValue = NumericValue ? Number(NumericValue).toFixed(2) : '';

  return {
    label: CodeMeaning,
@@ -654,17 +546,11 @@ function _getLabelFromMeasuredValueSequence(

 function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
  const ImageLibrary = ImagingMeasurementReportContentSequence.find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.ImageLibrary
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImageLibrary
  );

-  const ImageLibraryGroup = _getSequenceAsArray(
-    ImageLibrary.ContentSequence
-  ).find(
-    item =>
-      item.ConceptNameCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.ImageLibraryGroup
+  const ImageLibraryGroup = _getSequenceAsArray(ImageLibrary.ContentSequence).find(
+    item => item.ConceptNameCodeSequence.CodeValue === CodeNameCodeSequenceValues.ImageLibraryGroup
  );

  const referencedImages = [];
@@ -1,8 +1,6 @@
 import React from 'react';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import getHangingProtocolModule, {
-  srProtocol,
-} from './getHangingProtocolModule';
+import getHangingProtocolModule, { srProtocol } from './getHangingProtocolModule';
 import onModeEnter from './onModeEnter';
 import getCommandsModule from './commandsModule';
 import preRegistration from './init';
@@ -12,9 +10,7 @@ import hydrateStructuredReport from './utils/hydrateStructuredReport';
 import createReferencedImageDisplaySet from './utils/createReferencedImageDisplaySet';

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

 const OHIFCornerstoneSRViewport = props => {
@@ -58,7 +54,7 @@ const dicomSRExtension = {
  },
  getCommandsModule,
  getSopClassHandlerModule,
-  // Include dynmically computed values such as toolNames not known till instantiation
+  // Include dynamically computed values such as toolNames not known till instantiation
  getUtilityModule({ servicesManager }) {
    return [
      {
@@ -18,9 +18,7 @@ import toolNames from './tools/toolNames';
 /**
 * @param {object} configuration
 */
-export default function init({
-  configuration = {},
-}: Types.Extensions.ExtensionParams): void {
+export default function init({ configuration = {} }: Types.Extensions.ExtensionParams): void {
  addTool(DICOMSRDisplayTool);
  addToolInstance(toolNames.SRLength, LengthTool, {});
  addToolInstance(toolNames.SRBidirectional, BidirectionalTool);
@@ -40,49 +40,32 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
  isPointNearTool = () => null;
  getHandleNearImagePoint = () => null;

-  renderAnnotation = (
-    enabledElement: Types.IEnabledElement,
-    svgDrawingHelper: any
-  ): void => {
+  renderAnnotation = (enabledElement: Types.IEnabledElement, svgDrawingHelper: any): void => {
    const { viewport } = enabledElement;
    const { element } = viewport;

-    let annotations = annotation.state.getAnnotations(
-      this.getToolName(),
-      element
-    );
+    let annotations = annotation.state.getAnnotations(this.getToolName(), element);

    // Todo: We don't need this anymore, filtering happens in triggerAnnotationRender
    if (!annotations?.length) {
      return;
    }

-    annotations = this.filterInteractableAnnotationsForElement(
-      element,
-      annotations
-    );
+    annotations = this.filterInteractableAnnotationsForElement(element, annotations);

    if (!annotations?.length) {
      return;
    }

-    const trackingUniqueIdentifiersForElement = getTrackingUniqueIdentifiersForElement(
-      element
-    );
+    const trackingUniqueIdentifiersForElement = getTrackingUniqueIdentifiersForElement(element);

-    const {
-      activeIndex,
-      trackingUniqueIdentifiers,
-    } = trackingUniqueIdentifiersForElement;
+    const { activeIndex, trackingUniqueIdentifiers } = trackingUniqueIdentifiersForElement;

-    const activeTrackingUniqueIdentifier =
-      trackingUniqueIdentifiers[activeIndex];
+    const activeTrackingUniqueIdentifier = trackingUniqueIdentifiers[activeIndex];

    // Filter toolData to only render the data for the active SR.
    const filteredAnnotations = annotations.filter(annotation =>
-      trackingUniqueIdentifiers.includes(
-        annotation.data?.cachedStats?.TrackingUniqueIdentifier
-      )
+      trackingUniqueIdentifiers.includes(annotation.data?.cachedStats?.TrackingUniqueIdentifier)
    );

    if (!viewport._actors?.size) {
@@ -138,8 +121,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
            break;
          case SCOORD_TYPES.ELLIPSE:
            renderMethod = this.renderEllipse;
-            canvasCoordinatesAdapter =
-              utilities.math.ellipse.getCanvasEllipseCorners;
+            canvasCoordinatesAdapter = utilities.math.ellipse.getCanvasEllipseCorners;
            break;
          default:
            throw new Error(`Unsupported GraphicType: ${GraphicType}`);
@@ -221,15 +203,9 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
    renderableData.map((data, index) => {
      canvasCoordinates = data.map(p => viewport.worldToCanvas(p));
      const handleGroupUID = '0';
-      drawing.drawHandles(
-        svgDrawingHelper,
-        annotationUID,
-        handleGroupUID,
-        canvasCoordinates,
-        {
-          color: options.color,
-        }
-      );
+      drawing.drawHandles(svgDrawingHelper, annotationUID, handleGroupUID, canvasCoordinates, {
+        color: options.color,
+      });
    });
  }

@@ -248,10 +224,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
      canvasCoordinates.push(viewport.worldToCanvas(point));

      // We get the other point for the arrow by using the image size
-      const imagePixelModule = metaData.get(
-        'imagePixelModule',
-        referencedImageId
-      );
+      const imagePixelModule = metaData.get('imagePixelModule', referencedImageId);

      let xOffset = 10;
      let yOffset = 10;
@@ -309,9 +282,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {

      const rotation = viewport.getRotation();

-      canvasCoordinates = ellipsePointsWorld.map(p =>
-        viewport.worldToCanvas(p)
-      );
+      canvasCoordinates = ellipsePointsWorld.map(p => viewport.worldToCanvas(p));
      let canvasCorners;
      if (rotation == 90 || rotation == 270) {
        canvasCorners = utilities.math.ellipse.getCanvasEllipseCorners([
@@ -366,23 +337,14 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
      adaptedCanvasCoordinates = canvasCoordinatesAdapter(canvasCoordinates);
    }
    const textLines = this._getTextBoxLinesFromLabels(label);
-    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(
-      adaptedCanvasCoordinates
-    );
+    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(adaptedCanvasCoordinates);

-    annotation.data.handles.textBox.worldPosition = viewport.canvasToWorld(
-      canvasTextBoxCoords
-    );
+    annotation.data.handles.textBox.worldPosition = viewport.canvasToWorld(canvasTextBoxCoords);

-    const textBoxPosition = viewport.worldToCanvas(
-      annotation.data.handles.textBox.worldPosition
-    );
+    const textBoxPosition = viewport.worldToCanvas(annotation.data.handles.textBox.worldPosition);

    const textBoxUID = '1';
-    const textBoxOptions = this.getLinkedTextBoxStyle(
-      styleSpecifier,
-      annotation
-    );
+    const textBoxOptions = this.getLinkedTextBoxStyle(styleSpecifier, annotation);

    const boundingBox = drawing.drawLinkedTextBox(
      svgDrawingHelper,
@@ -27,15 +27,11 @@ function setTrackingUniqueIdentifiersForElement(
  };
 }

-function setActiveTrackingUniqueIdentifierForElement(
-  element,
-  TrackingUniqueIdentifier
-) {
+function setActiveTrackingUniqueIdentifierForElement(element, TrackingUniqueIdentifier) {
  const enabledElement = getEnabledElement(element);
  const { viewport } = enabledElement;

-  const trackingIdentifiersForElement =
-    state.trackingIdentifiersByViewportId[viewport.id];
+  const trackingIdentifiersForElement = state.trackingIdentifiersByViewportId[viewport.id];

  if (trackingIdentifiersForElement) {
    const activeIndex = trackingIdentifiersForElement.trackingUniqueIdentifiers.findIndex(
@@ -8,11 +8,7 @@ const EPSILON = 1e-4;

 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];

-export default function addMeasurement(
-  measurement,
-  imageId,
-  displaySetInstanceUID
-) {
+export default function addMeasurement(measurement, imageId, displaySetInstanceUID) {
  // TODO -> Render rotated ellipse .
  const toolName = toolNames.DICOMSRDisplay;

@@ -31,12 +27,7 @@ export default function addMeasurement(
    }

    measurementData.renderableData[GraphicType].push(
-      _getRenderableData(
-        GraphicType,
-        GraphicData,
-        imageId,
-        measurement.TrackingIdentifier
-      )
+      _getRenderableData(GraphicType, GraphicData, imageId, measurement.TrackingIdentifier)
    );
  });

@@ -86,12 +77,7 @@ export default function addMeasurement(
  delete measurement.coords;
 }

-function _getRenderableData(
-  GraphicType,
-  GraphicData,
-  imageId,
-  TrackingIdentifier
-) {
+function _getRenderableData(GraphicType, GraphicData, imageId, TrackingIdentifier) {
  const [cornerstoneTag, toolName] = TrackingIdentifier.split(':');

  let renderableData: csTypes.Point3[];
@@ -207,38 +193,22 @@ function _getRenderableData(
        throw new Error('imageId does not have imagePlaneModule metadata');
      }

-      const {
-        columnCosines,
-      }: { columnCosines: csTypes.Point3 } = imagePlaneModule;
+      const { columnCosines }: { columnCosines: csTypes.Point3 } = imagePlaneModule;

      // find which axis is parallel to the columnCosines
      const columnCosinesVec = vec3.fromValues(...columnCosines);

-      const projectedMajorAxisOnColVec = Math.abs(
-        vec3.dot(columnCosinesVec, majorAxisVec)
-      );
-      const projectedMinorAxisOnColVec = Math.abs(
-        vec3.dot(columnCosinesVec, minorAxisVec)
-      );
+      const projectedMajorAxisOnColVec = Math.abs(vec3.dot(columnCosinesVec, majorAxisVec));
+      const projectedMinorAxisOnColVec = Math.abs(vec3.dot(columnCosinesVec, minorAxisVec));

      const absoluteOfMajorDotProduct = Math.abs(projectedMajorAxisOnColVec);
      const absoluteOfMinorDotProduct = Math.abs(projectedMinorAxisOnColVec);

      renderableData = [];
      if (Math.abs(absoluteOfMajorDotProduct - 1) < EPSILON) {
-        renderableData = [
-          pointsWorld[0],
-          pointsWorld[1],
-          pointsWorld[2],
-          pointsWorld[3],
-        ];
+        renderableData = [pointsWorld[0], pointsWorld[1], pointsWorld[2], pointsWorld[3]];
      } else if (Math.abs(absoluteOfMinorDotProduct - 1) < EPSILON) {
-        renderableData = [
-          pointsWorld[2],
-          pointsWorld[3],
-          pointsWorld[0],
-          pointsWorld[1],
-        ];
+        renderableData = [pointsWorld[2], pointsWorld[3], pointsWorld[0], pointsWorld[1]];
      } else {
        console.warn('OBLIQUE ELLIPSE NOT YET SUPPORTED');
      }
@@ -1,10 +1,6 @@
 import { addTool } from '@cornerstonejs/tools';

-export default function addToolInstance(
-  name: string,
-  toolClass,
-  configuration?
-): void {
+export default function addToolInstance(name: string, toolClass, configuration?): void {
  class InstanceClass extends toolClass {
    static toolName = name;
  }
@@ -3,13 +3,8 @@ import { DisplaySetService, classes } from '@ohif/core';
 const ImageSet = classes.ImageSet;

 const findInstance = (measurement, displaySetService: DisplaySetService) => {
-  const {
-    displaySetInstanceUID,
-    ReferencedSOPInstanceUID: sopUid,
-  } = measurement;
-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const { displaySetInstanceUID, ReferencedSOPInstanceUID: sopUid } = measurement;
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
  if (!referencedDisplaySet.images) {
    return;
  }
@@ -20,10 +15,7 @@ const findInstance = (measurement, displaySetService: DisplaySetService) => {
 * contained within the provided display set.
 * @return an array of instances referenced.
 */
-const findReferencedInstances = (
-  displaySetService: DisplaySetService,
-  displaySet
-) => {
+const findReferencedInstances = (displaySetService: DisplaySetService, displaySet) => {
  const instances = [];
  const instanceById = {};
  for (const measurement of displaySet.measurements) {
@@ -58,7 +50,7 @@ const findReferencedInstances = (
 const createReferencedImageDisplaySet = (displaySetService, displaySet) => {
  const instances = findReferencedInstances(displaySetService, displaySet);
  // This will be a  member function of the created image set
-  const updateInstances = function() {
+  const updateInstances = function () {
    this.images.splice(
      0,
      this.images.length,
@@ -14,8 +14,7 @@ const findInstanceMetadataBySopInstanceUID = (displaySets, SOPInstanceUID) => {
    }

    instanceFound = displaySet.images.find(
-      instanceMetadata =>
-        instanceMetadata.getSOPInstanceUID() === SOPInstanceUID
+      instanceMetadata => instanceMetadata.getSOPInstanceUID() === SOPInstanceUID
    );

    return !!instanceFound;
@@ -18,10 +18,7 @@ const findMostRecentStructuredReport = studies => {
      }

      if (isStructuredReportSeries(series)) {
-        if (
-          !mostRecentStructuredReport ||
-          compareSeriesDate(series, mostRecentStructuredReport)
-        ) {
+        if (!mostRecentStructuredReport || compareSeriesDate(series, mostRecentStructuredReport)) {
          mostRecentStructuredReport = series;
        }
      }
@@ -38,10 +35,7 @@ const findMostRecentStructuredReport = studies => {
 * @returns {boolean}
 */
 const isStructuredReportSeries = series => {
-  const supportedSopClassUIDs = [
-    '1.2.840.10008.5.1.4.1.1.88.22',
-    '1.2.840.10008.5.1.4.1.1.11.1',
-  ];
+  const supportedSopClassUIDs = ['1.2.840.10008.5.1.4.1.1.88.22', '1.2.840.10008.5.1.4.1.1.11.1'];

  const firstInstance = series.getFirstInstance();
  const SOPClassUID = firstInstance.getData().metadata.SOPClassUID;
@@ -50,7 +44,7 @@ const isStructuredReportSeries = series => {
 };

 /**
- *  Checkes if series1 is newer than series2
+ *  Checks if series1 is newer than series2
 *
 * @param {Object} series1 - Series Metadata 1
 * @param {Object} series2 - Series Metadata 2
@@ -2,17 +2,12 @@ import OHIF from '@ohif/core';
 import { annotation } from '@cornerstonejs/tools';
 const { log } = OHIF;

-function getFilteredCornerstoneToolState(
-  measurementData,
-  additionalFindingTypes
-) {
+function getFilteredCornerstoneToolState(measurementData, additionalFindingTypes) {
  const filteredToolState = {};

  function addToFilteredToolState(annotation, toolType) {
    if (!annotation.metadata?.referencedImageId) {
-      log.warn(
-        `[DICOMSR] No referencedImageId found for ${toolType} ${annotation.id}`
-      );
+      log.warn(`[DICOMSR] No referencedImageId found for ${toolType} ${annotation.id}`);
      return;
    }

@@ -30,9 +25,7 @@ function getFilteredCornerstoneToolState(
      };
    }

-    const measurementDataI = measurementData.find(
-      md => md.uid === annotation.annotationUID
-    );
+    const measurementDataI = measurementData.find(md => md.uid === annotation.annotationUID);
    const toolData = imageIdSpecificToolState[toolType].data;

    let { finding } = measurementDataI;
@@ -77,9 +70,7 @@ function getFilteredCornerstoneToolState(
  for (let i = 0; i < framesOfReference.length; i++) {
    const frameOfReference = framesOfReference[i];

-    const frameOfReferenceAnnotations = annotationManager.getAnnotations(
-      frameOfReference
-    );
+    const frameOfReferenceAnnotations = annotationManager.getAnnotations(frameOfReference);

    const toolTypes = Object.keys(frameOfReferenceAnnotations);

@@ -91,9 +82,7 @@ function getFilteredCornerstoneToolState(
      if (annotations) {
        for (let k = 0; k < annotations.length; k++) {
          const annotation = annotations[k];
-          const uidIndex = uids.findIndex(
-            uid => uid === annotation.annotationUID
-          );
+          const uidIndex = uids.findIndex(uid => uid === annotation.annotationUID);

          if (uidIndex !== -1) {
            addToFilteredToolState(annotation, toolType);
@@ -9,9 +9,7 @@
 export default function getLabelFromDCMJSImportedToolData(toolData) {
  const { findingSites = [], finding } = toolData;

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

  if (freeTextLabel) {
    return freeTextLabel.CodeMeaning;
@@ -49,19 +49,10 @@ export default function hydrateStructuredReport(
  const annotationManager = CsAnnotation.state.getAnnotationManager();
  const disableEditing = appConfig?.disableEditing;
  const dataSource = extensionManager.getActiveDataSource()[0];
-  const {
-    measurementService,
-    displaySetService,
-    customizationService,
-  } = servicesManager.services;
+  const { measurementService, displaySetService, customizationService } = servicesManager.services;

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

  // TODO -> We should define a strict versioning somewhere.
  const mappings = measurementService.getSourceMappings(
@@ -125,16 +116,14 @@ export default function hydrateStructuredReport(

  // TODO: notification if no hydratable?
  Object.keys(hydratableMeasurementsInSR).forEach(annotationType => {
-    const toolDataForAnnotationType =
-      hydratableMeasurementsInSR[annotationType];
+    const toolDataForAnnotationType = hydratableMeasurementsInSR[annotationType];

    toolDataForAnnotationType.forEach(toolData => {
      // Add the measurement to toolState
      // dcmjs and Cornerstone3D has structural defect in supporting multi-frame
      // files, and looking up the imageId from sopInstanceUIDToImageId results
      // in the wrong value.
-      const frameNumber =
-        (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
+      const frameNumber = (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
      const imageId =
        imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
        sopInstanceUIDToImageId[toolData.sopInstanceUid];
@@ -150,10 +139,7 @@ export default function hydrateStructuredReport(

  for (let i = 0; i < imageIds.length; i++) {
    const imageId = imageIds[i];
-    const { SeriesInstanceUID, StudyInstanceUID } = metaData.get(
-      'instance',
-      imageId
-    );
+    const { SeriesInstanceUID, StudyInstanceUID } = metaData.get('instance', imageId);

    if (!SeriesInstanceUIDs.includes(SeriesInstanceUID)) {
      SeriesInstanceUIDs.push(SeriesInstanceUID);
@@ -162,23 +148,19 @@ export default function hydrateStructuredReport(
    if (!targetStudyInstanceUID) {
      targetStudyInstanceUID = StudyInstanceUID;
    } else if (targetStudyInstanceUID !== StudyInstanceUID) {
-      console.warn(
-        'NO SUPPORT FOR SRs THAT HAVE MEASUREMENTS FROM MULTIPLE STUDIES.'
-      );
+      console.warn('NO SUPPORT FOR SRs THAT HAVE MEASUREMENTS FROM MULTIPLE STUDIES.');
    }
  }

  Object.keys(hydratableMeasurementsInSR).forEach(annotationType => {
-    const toolDataForAnnotationType =
-      hydratableMeasurementsInSR[annotationType];
+    const toolDataForAnnotationType = hydratableMeasurementsInSR[annotationType];

    toolDataForAnnotationType.forEach(toolData => {
      // Add the measurement to toolState
      // dcmjs and Cornerstone3D has structural defect in supporting multi-frame
      // files, and looking up the imageId from sopInstanceUIDToImageId results
      // in the wrong value.
-      const frameNumber =
-        (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
+      const frameNumber = (toolData.annotation.data && toolData.annotation.data.frameNumber) || 1;
      const imageId =
        imageIdsForToolState[toolData.sopInstanceUid][frameNumber] ||
        sopInstanceUIDToImageId[toolData.sopInstanceUid];
@@ -208,19 +190,11 @@ export default function hydrateStructuredReport(
        CORNERSTONE_3D_TOOLS_SOURCE_VERSION
      );
      annotation.data.label = getLabelFromDCMJSImportedToolData(toolData);
-      annotation.data.finding = convertCode(
-        codingValues,
-        toolData.finding?.[0]
-      );
-      annotation.data.findingSites = convertSites(
-        codingValues,
-        toolData.findingSites
-      );
+      annotation.data.finding = convertCode(codingValues, toolData.finding?.[0]);
+      annotation.data.findingSites = convertSites(codingValues, toolData.findingSites);
      annotation.data.site = annotation.data.findingSites?.[0];

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

      const newAnnotationUID = measurementService.addRawMeasurement(
        source,
@@ -231,9 +205,7 @@ export default function hydrateStructuredReport(
      );

      if (disableEditing) {
-        const addedAnnotation = annotationManager.getAnnotation(
-          newAnnotationUID
-        );
+        const addedAnnotation = annotationManager.getAnnotation(newAnnotationUID);
        locking.setAnnotationLocked(addedAnnotation, true);
      }

@@ -262,15 +234,14 @@ function _mapLegacyDataSet(dataset) {
  );

  // Retrieve the Measurements themselves
-  const measurementGroups = toArray(
-    imagingMeasurementContent.ContentSequence
-  ).filter(codeMeaningEquals(GROUP));
+  const measurementGroups = toArray(imagingMeasurementContent.ContentSequence).filter(
+    codeMeaningEquals(GROUP)
+  );

  // For each of the supported measurement types, compute the measurement data
  const measurementData = {};

-  const cornerstoneToolClasses =
-    MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
+  const cornerstoneToolClasses = MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;

  const registeredToolClasses = [];

@@ -280,13 +251,10 @@ function _mapLegacyDataSet(dataset) {
  });

  measurementGroups.forEach((measurementGroup, index) => {
-    const measurementGroupContentSequence = toArray(
-      measurementGroup.ContentSequence
-    );
+    const measurementGroupContentSequence = toArray(measurementGroup.ContentSequence);

    const TrackingIdentifierGroup = measurementGroupContentSequence.find(
-      contentItem =>
-        contentItem.ConceptNameCodeSequence.CodeMeaning === TRACKING_IDENTIFIER
+      contentItem => contentItem.ConceptNameCodeSequence.CodeMeaning === TRACKING_IDENTIFIER
    );

    const TrackingIdentifier = TrackingIdentifierGroup.TextValue;
@@ -304,7 +272,7 @@ function _mapLegacyDataSet(dataset) {
  return dataset;
 }

-const toArray = function(x) {
+const toArray = function (x) {
  return Array.isArray(x) ? x : [x];
 };

@@ -1,8 +1,7 @@
 import { adaptersSR } from '@cornerstonejs/adapters';

 const cornerstoneAdapters =
-  adaptersSR.Cornerstone3D.MeasurementReport
-    .CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
+  adaptersSR.Cornerstone3D.MeasurementReport.CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;

 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 const CORNERSTONE_3D_TAG = cornerstoneAdapters.CORNERSTONE_3D_TAG;
@@ -24,8 +23,7 @@ export default function isRehydratable(displaySet, mappings) {

  const adapterKeys = Object.keys(cornerstoneAdapters).filter(
    adapterKey =>
-      typeof cornerstoneAdapters[adapterKey]
-        .isValidCornerstoneTrackingIdentifier === 'function'
+      typeof cornerstoneAdapters[adapterKey].isValidCornerstoneTrackingIdentifier === 'function'
  );

  const adapters = [];
@@ -48,19 +46,13 @@ export default function isRehydratable(displaySet, mappings) {

      const mappedTrackingIdentifier = `${cornerstoneTag}:${toolName}`;

-      return adapter.isValidCornerstoneTrackingIdentifier(
-        mappedTrackingIdentifier
-      );
+      return adapter.isValidCornerstoneTrackingIdentifier(mappedTrackingIdentifier);
    });

    if (hydratable) {
      return true;
    }
-    console.log(
-      'Measurement is not rehydratable',
-      TrackingIdentifier,
-      measurements[i]
-    );
+    console.log('Measurement is not rehydratable', TrackingIdentifier, measurements[i]);
  }

  console.log('No measurements found which were rehydratable');
@@ -11,8 +11,7 @@ import { useAppConfig } from '@state';

 const { formatDate } = utils;

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

 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';

@@ -21,7 +20,6 @@ function OHIFCornerstoneSRViewport(props) {
    children,
    dataSource,
    displaySets,
-    viewportIndex,
    viewportLabel,
    viewportOptions,
    servicesManager,
@@ -30,11 +28,10 @@ function OHIFCornerstoneSRViewport(props) {

  const [appConfig] = useAppConfig();

-  const {
-    displaySetService,
-    cornerstoneViewportService,
-    measurementService,
-  } = servicesManager.services;
+  const { displaySetService, cornerstoneViewportService, measurementService } =
+    servicesManager.services;
+
+  const viewportId = viewportOptions.viewportId;

  // SR viewport will always have a single display set
  if (displaySets.length > 1) {
@@ -46,15 +43,10 @@ function OHIFCornerstoneSRViewport(props) {
  const [viewportGrid, viewportGridService] = useViewportGrid();
  const [measurementSelected, setMeasurementSelected] = useState(0);
  const [measurementCount, setMeasurementCount] = useState(1);
-  const [activeImageDisplaySetData, setActiveImageDisplaySetData] = useState(
-    null
-  );
-  const [
-    referencedDisplaySetMetadata,
-    setReferencedDisplaySetMetadata,
-  ] = useState(null);
+  const [activeImageDisplaySetData, setActiveImageDisplaySetData] = useState(null);
+  const [referencedDisplaySetMetadata, setReferencedDisplaySetMetadata] = useState(null);
  const [element, setElement] = useState(null);
-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;

  // Optional hook into tracking extension, if present.
  let trackedMeasurements;
@@ -82,13 +74,11 @@ function OHIFCornerstoneSRViewport(props) {
        { servicesManager, extensionManager, appConfig },
        displaySetInstanceUID
      );
-      const displaySets = displaySetService.getDisplaySetsForSeries(
-        SeriesInstanceUIDs[0]
-      );
+      const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUIDs[0]);
      if (displaySets.length) {
        viewportGridService.setDisplaySetsForViewports([
          {
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
            displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
          },
        ]);
@@ -126,11 +116,7 @@ function OHIFCornerstoneSRViewport(props) {

  const updateViewport = useCallback(
    newMeasurementSelected => {
-      const {
-        StudyInstanceUID,
-        displaySetInstanceUID,
-        sopClassUids,
-      } = srDisplaySet;
+      const { StudyInstanceUID, displaySetInstanceUID, sopClassUids } = srDisplaySet;

      if (!StudyInstanceUID || !displaySetInstanceUID) {
        return;
@@ -139,9 +125,7 @@ function OHIFCornerstoneSRViewport(props) {
      if (sopClassUids && sopClassUids.length > 1) {
        // Todo: what happens if there are multiple SOP Classes? Why we are
        // not throwing an error?
-        console.warn(
-          'More than one SOPClassUID in the same series is not yet supported.'
-        );
+        console.warn('More than one SOPClassUID in the same series is not yet supported.');
      }

      _getViewportReferencedDisplaySetData(
@@ -163,19 +147,11 @@ function OHIFCornerstoneSRViewport(props) {
          // imageIdIndex will handle it by updating the viewport, but if they
          // are the same we just need to use measurementService to jump to the
          // new measurement
-          const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-            viewportIndex
-          );
-
-          const csViewport = cornerstoneViewportService.getCornerstoneViewport(
-            viewportInfo.getViewportId()
-          );
+          const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

          const imageIds = csViewport.getImageIds();

-          const imageIdIndex = imageIds.indexOf(
-            measurements[newMeasurementSelected].imageId
-          );
+          const imageIdIndex = imageIds.indexOf(measurements[newMeasurementSelected].imageId);

          if (imageIdIndex !== -1) {
            csViewport.setImageIdIndex(imageIdIndex);
@@ -183,7 +159,7 @@ function OHIFCornerstoneSRViewport(props) {
        }
      });
    },
-    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportIndex]
+    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportId]
  );

  const getCornerstoneViewport = useCallback(() => {
@@ -231,7 +207,7 @@ function OHIFCornerstoneSRViewport(props) {
        isJumpToMeasurementDisabled={true}
      ></Component>
    );
-  }, [activeImageDisplaySetData, viewportIndex, measurementSelected]);
+  }, [activeImageDisplaySetData, viewportId, measurementSelected]);

  const onMeasurementChange = useCallback(
    direction => {
@@ -254,12 +230,7 @@ function OHIFCornerstoneSRViewport(props) {
      setTrackingIdentifiers(newMeasurementSelected);
      updateViewport(newMeasurementSelected);
    },
-    [
-      measurementSelected,
-      measurementCount,
-      updateViewport,
-      setTrackingIdentifiers,
-    ]
+    [measurementSelected, measurementCount, updateViewport, setTrackingIdentifiers]
  );

  /**
@@ -269,12 +240,10 @@ function OHIFCornerstoneSRViewport(props) {
    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
      ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
-        if (
-          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
-        ) {
+        const activeViewport = viewports.get(activeViewportId);
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
          viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
            displaySetInstanceUIDs: [],
          });
        }
@@ -341,7 +310,7 @@ function OHIFCornerstoneSRViewport(props) {
      return (
        child &&
        React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
          key: index,
        })
      );
@@ -373,7 +342,7 @@ function OHIFCornerstoneSRViewport(props) {
        getStatusComponent={() =>
          _getStatusComponent({
            srDisplaySet,
-            viewportIndex,
+            viewportId,
            isTracked: false,
            isRehydratable: srDisplaySet.isRehydratable,
            isLocked,
@@ -387,23 +356,19 @@ function OHIFCornerstoneSRViewport(props) {
          currentSeries: SeriesNumber,
          seriesDescription: SeriesDescription || '',
          patientInformation: {
-            patientName: PatientName
-              ? OHIF.utils.formatPN(PatientName.Alphabetic)
-              : '',
+            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`
-                : '',
+              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
            scanner: ManufacturerModelName || '',
          },
        }}
      />

-      <div className="relative flex flex-row w-full h-full overflow-hidden">
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
        {getCornerstoneViewport()}
        {childrenWithProps}
      </div>
@@ -413,7 +378,7 @@ function OHIFCornerstoneSRViewport(props) {

 OHIFCornerstoneSRViewport.propTypes = {
  displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
  dataSource: PropTypes.object,
  children: PropTypes.node,
  viewportLabel: PropTypes.string,
@@ -438,9 +403,7 @@ async function _getViewportReferencedDisplaySetData(

  const { displaySetInstanceUID } = measurement;

-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

  const image0 = referencedDisplaySet.images[0];
  const referencedDisplaySetMetadata = {
@@ -462,7 +425,7 @@ async function _getViewportReferencedDisplaySetData(

 function _getStatusComponent({
  srDisplaySet,
-  viewportIndex,
+  viewportId,
  isRehydratable,
  isLocked,
  sendTrackedMeasurementsEvent,
@@ -470,7 +433,7 @@ function _getStatusComponent({
  const handleMouseUp = () => {
    sendTrackedMeasurementsEvent('HYDRATE_SR', {
      displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
-      viewportIndex,
+      viewportId,
    });
  };

@@ -480,8 +443,7 @@ function _getStatusComponent({
  // 1 - Incompatible
  // 2 - Locked
  // 3 - Rehydratable / Open
-  const state =
-    isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
+  const state = isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
  let ToolTipMessage = null;
  let StatusIcon = null;

@@ -511,22 +473,25 @@ function _getStatusComponent({
      );
      break;
    case 3:
-      StatusIcon = () => <Icon name="status-untracked" />;
-
-      ToolTipMessage = () => (
-        <div>{`Click ${loadStr} to restore measurements.`}</div>
+      StatusIcon = () => (
+        <Icon
+          className="text-aqua-pale"
+          name="status-untracked"
+        />
      );
+
+      ToolTipMessage = () => <div>{`Click ${loadStr} to restore measurements.`}</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">
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
        <StatusIcon />
        <span className="ml-1">SR</span>
      </div>
      {state === 3 && (
        <div
-          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
          onMouseUp={handleMouseUp}
        >
@@ -539,7 +504,10 @@ function _getStatusComponent({
  return (
    <>
      {ToolTipMessage && (
-        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
          <StatusArea />
        </Tooltip>
      )}
@@ -40,13 +40,7 @@ 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,
@@ -0,0 +1,330 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [3.7.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.92...v3.7.0-beta.93) (2023-10-03)
+
+
+### Features
+
+* **displayArea:** add display area to hanging protocol ([#3691](https://github.com/OHIF/Viewers/issues/3691)) ([5e7fe91](https://github.com/OHIF/Viewers/commit/5e7fe91617d7399f85702d82e7bfa028b8010a89))
+
+
+
+
+
+# [3.7.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.91...v3.7.0-beta.92) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.90...v3.7.0-beta.91) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.89...v3.7.0-beta.90) (2023-10-03)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.88...v3.7.0-beta.89) (2023-10-03)
+
+
+### Bug Fixes
+
+* **dicom overlay:** Handle special cases of ArrayBuffer for various DICOM overlay attributes. ([#3684](https://github.com/OHIF/Viewers/issues/3684)) ([e36a604](https://github.com/OHIF/Viewers/commit/e36a6043315e900eeb6ce183772c7f852f478e96))
+* **StackSync:** Miscellaneous fixes for stack image sync ([#3663](https://github.com/OHIF/Viewers/issues/3663)) ([8a335bd](https://github.com/OHIF/Viewers/commit/8a335bd03d14ba87d65d7468d93f74040aa828d9))
+
+
+
+
+
+# [3.7.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.87...v3.7.0-beta.88) (2023-10-03)
+
+
+### Bug Fixes
+
+* **config:** support more values for the useSharedArrayBuffer ([#3688](https://github.com/OHIF/Viewers/issues/3688)) ([1129c15](https://github.com/OHIF/Viewers/commit/1129c155d2c7d46c98a5df7c09879aa3d459fa7e))
+
+
+
+
+
+# [3.7.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.86...v3.7.0-beta.87) (2023-09-29)
+
+
+### Bug Fixes
+
+* **no sab:** should work when shared array buffer is not required ([#3686](https://github.com/OHIF/Viewers/issues/3686)) ([a67d72d](https://github.com/OHIF/Viewers/commit/a67d72de85238b369a18c010bf6d147daefc6df5))
+
+
+
+
+
+# [3.7.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.85...v3.7.0-beta.86) (2023-09-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.84...v3.7.0-beta.85) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.83...v3.7.0-beta.84) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.82...v3.7.0-beta.83) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.81...v3.7.0-beta.82) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.80...v3.7.0-beta.81) (2023-09-26)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.79...v3.7.0-beta.80) (2023-09-22)
+
+
+### Features
+
+* **segmentation mode:** Add create, and export SEG with Brushes ([#3632](https://github.com/OHIF/Viewers/issues/3632)) ([48bbd62](https://github.com/OHIF/Viewers/commit/48bbd6281a497ea68670239f5426a10ee6c56dc1))
+
+
+
+
+
+# [3.7.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.78...v3.7.0-beta.79) (2023-09-22)
+
+
+### Performance Improvements
+
+* **memory:** add 16 bit texture via configuration - reduces memory by half ([#3662](https://github.com/OHIF/Viewers/issues/3662)) ([2bd3b26](https://github.com/OHIF/Viewers/commit/2bd3b26a6aa54b211ef988f3ad64ef1fe5648bab))
+
+
+
+
+
+# [3.7.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.77...v3.7.0-beta.78) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.76...v3.7.0-beta.77) (2023-09-21)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.75...v3.7.0-beta.76) (2023-09-19)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.74...v3.7.0-beta.75) (2023-09-18)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.73...v3.7.0-beta.74) (2023-09-15)
+
+
+### Bug Fixes
+
+* **measurements:** Update the calibration tool to match changes in CS3D ([#3505](https://github.com/OHIF/Viewers/issues/3505)) ([38af311](https://github.com/OHIF/Viewers/commit/38af3112ec1f94f36c0ef64ff1cf9d21c0981c81))
+
+
+
+
+
+# [3.7.0-beta.73](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.72...v3.7.0-beta.73) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.72](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.71...v3.7.0-beta.72) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.71](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.70...v3.7.0-beta.71) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.70](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.69...v3.7.0-beta.70) (2023-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.69](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.68...v3.7.0-beta.69) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.68](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.67...v3.7.0-beta.68) (2023-09-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.67](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.66...v3.7.0-beta.67) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.66](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.65...v3.7.0-beta.66) (2023-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.65](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.64...v3.7.0-beta.65) (2023-09-06)
+
+
+### Features
+
+* **ImageOverlayViewerTool:** add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images ([#3163](https://github.com/OHIF/Viewers/issues/3163)) ([69115da](https://github.com/OHIF/Viewers/commit/69115da06d2d437b57e66608b435bb0bc919a90f))
+
+
+
+
+
+# [3.7.0-beta.64](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.63...v3.7.0-beta.64) (2023-09-05)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.63](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.62...v3.7.0-beta.63) (2023-09-01)
+
+
+### Features
+
+* **grid:** remove viewportIndex and only rely on viewportId ([#3591](https://github.com/OHIF/Viewers/issues/3591)) ([4c6ff87](https://github.com/OHIF/Viewers/commit/4c6ff873e887cc30ffc09223f5cb99e5f94c9cdd))
+
+
+
+
+
+# [3.7.0-beta.62](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.61...v3.7.0-beta.62) (2023-08-30)
+
+
+### Features
+
+* **data source UI config:** Popup the configuration dialogue whenever a data source is not fully configured ([#3620](https://github.com/OHIF/Viewers/issues/3620)) ([adedc8c](https://github.com/OHIF/Viewers/commit/adedc8c382e18a2e86a569e3d023cc55a157363f))
+
+
+
+
+
+# [3.7.0-beta.61](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.60...v3.7.0-beta.61) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.60](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.59...v3.7.0-beta.60) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.59](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.58...v3.7.0-beta.59) (2023-08-29)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.58](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.57...v3.7.0-beta.58) (2023-08-25)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [3.7.0-beta.57](https://github.com/OHIF/Viewers/compare/v3.7.0-beta.56...v3.7.0-beta.57) (2023-08-23)
+
+
+### Bug Fixes
+
+* **memory leak:** array buffer was sticking around in volume viewports ([#3611](https://github.com/OHIF/Viewers/issues/3611)) ([65b49ae](https://github.com/OHIF/Viewers/commit/65b49aeb1b5f38224e4892bdf32453500ee351f8))
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.7.0-beta.56",
+  "version": "3.7.0-beta.93",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -36,9 +36,9 @@
    "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
    "@cornerstonejs/codec-openjpeg": "^1.2.2",
    "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.10.3",
-    "@ohif/core": "3.7.0-beta.56",
-    "@ohif/ui": "3.7.0-beta.56",
+    "@cornerstonejs/dicom-image-loader": "^1.19.3",
+    "@ohif/core": "3.7.0-beta.93",
+    "@ohif/ui": "3.7.0-beta.93",
    "dcmjs": "^0.29.6",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
@@ -52,10 +52,10 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.10.3",
-    "@cornerstonejs/core": "^1.10.3",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.10.3",
-    "@cornerstonejs/tools": "^1.10.3",
+    "@cornerstonejs/adapters": "^1.19.3",
+    "@cornerstonejs/core": "^1.19.3",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.19.3",
+    "@cornerstonejs/tools": "^1.19.3",
    "@kitware/vtk.js": "27.3.1",
    "html2canvas": "^1.4.1",
    "lodash.debounce": "4.0.8",
@@ -11,10 +11,7 @@ import {
 } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
 import { Notification, useViewportDialog } from '@ohif/ui';
-import {
-  IStackViewport,
-  IVolumeViewport,
-} from '@cornerstonejs/core/dist/esm/types';
+import { IStackViewport, IVolumeViewport } from '@cornerstonejs/core/dist/esm/types';

 import { setEnabledElement } from '../state';

@@ -42,24 +39,19 @@ function areEqual(prevProps, nextProps) {
    return false;
  }

-  if (
-    prevProps.viewportOptions.orientation !==
-    nextProps.viewportOptions.orientation
-  ) {
+  if (prevProps.viewportOptions.orientation !== nextProps.viewportOptions.orientation) {
    return false;
  }

-  if (
-    prevProps.viewportOptions.toolGroupId !==
-    nextProps.viewportOptions.toolGroupId
-  ) {
+  if (prevProps.viewportOptions.toolGroupId !== nextProps.viewportOptions.toolGroupId) {
    return false;
  }

-  if (
-    prevProps.viewportOptions.viewportType !==
-    nextProps.viewportOptions.viewportType
-  ) {
+  if (prevProps.viewportOptions.viewportType !== nextProps.viewportOptions.viewportType) {
+    return false;
+  }
+
+  if (nextProps.viewportOptions.needsRerendering) {
    return false;
  }

@@ -75,8 +67,7 @@ function areEqual(prevProps, nextProps) {

    const foundDisplaySet = nextDisplaySets.find(
      nextDisplaySet =>
-        nextDisplaySet.displaySetInstanceUID ===
-        prevDisplaySet.displaySetInstanceUID
+        nextDisplaySet.displaySetInstanceUID === prevDisplaySet.displaySetInstanceUID
    );

    if (!foundDisplaySet) {
@@ -91,9 +82,7 @@ function areEqual(prevProps, nextProps) {
    // check if their imageIds are the same
    if (foundDisplaySet.images?.length) {
      for (let j = 0; j < foundDisplaySet.images.length; j++) {
-        if (
-          foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId
-        ) {
+        if (foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId) {
          return false;
        }
      }
@@ -107,7 +96,6 @@ function areEqual(prevProps, nextProps) {
 // Then we don't need to worry about the re-renders if the props change.
 const OHIFCornerstoneViewport = React.memo(props => {
  const {
-    viewportIndex,
    displaySets,
    dataSource,
    viewportOptions,
@@ -123,6 +111,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
    initialImageIndex,
  } = props;

+  const viewportId = viewportOptions.viewportId;
  const [scrollbarHeight, setScrollbarHeight] = useState('100px');
  const [enabledVPElement, setEnabledVPElement] = useState(null);
  const elementRef = useRef();
@@ -154,27 +143,17 @@ const OHIFCornerstoneViewport = React.memo(props => {
    }
  }, [elementRef]);

-  const cleanUpServices = useCallback(() => {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
+  const cleanUpServices = useCallback(
+    viewportInfo => {
+      const renderingEngineId = viewportInfo.getRenderingEngineId();
+      const syncGroups = viewportInfo.getSyncGroups();

-    if (!viewportInfo) {
-      return;
-    }
+      toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);

-    const viewportId = viewportInfo.getViewportId();
-    const renderingEngineId = viewportInfo.getRenderingEngineId();
-    const syncGroups = viewportInfo.getSyncGroups();
-
-    toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
-
-    syncGroupService.removeViewportFromSyncGroup(
-      viewportId,
-      renderingEngineId,
-      syncGroups
-    );
-  }, [viewportIndex, viewportOptions.viewportId]);
+      syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroups);
+    },
+    [viewportId]
+  );

  const elementEnabledHandler = useCallback(
    evt => {
@@ -184,73 +163,48 @@ const OHIFCornerstoneViewport = React.memo(props => {
      }

      const { viewportId, element } = evt.detail;
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(
-        viewportId
-      );
-      const viewportIndex = viewportInfo.getViewportIndex();
-
-      setEnabledElement(viewportIndex, element);
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      setEnabledElement(viewportId, element);
      setEnabledVPElement(element);

      const renderingEngineId = viewportInfo.getRenderingEngineId();
      const toolGroupId = viewportInfo.getToolGroupId();
      const syncGroups = viewportInfo.getSyncGroups();

-      toolGroupService.addViewportToToolGroup(
-        viewportId,
-        renderingEngineId,
-        toolGroupId
-      );
+      toolGroupService.addViewportToToolGroup(viewportId, renderingEngineId, toolGroupId);

-      syncGroupService.addViewportToSyncGroup(
-        viewportId,
-        renderingEngineId,
-        syncGroups
-      );
+      syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, syncGroups);

      if (onElementEnabled) {
        onElementEnabled(evt);
      }
    },
-    [viewportIndex, onElementEnabled, toolGroupService]
+    [viewportId, onElementEnabled, toolGroupService]
  );

  // disable the element upon unmounting
  useEffect(() => {
-    cornerstoneViewportService.enableViewport(
-      viewportIndex,
-      viewportOptions,
-      elementRef.current
-    );
+    cornerstoneViewportService.enableViewport(viewportId, elementRef.current);

-    eventTarget.addEventListener(
-      Enums.Events.ELEMENT_ENABLED,
-      elementEnabledHandler
-    );
+    eventTarget.addEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);

    setImageScrollBarHeight();

    return () => {
-      commandsManager.runCommand('storePresentation', {
-        viewportIndex,
-      });
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);

-      cleanUpServices();
+      if (!viewportInfo) {
+        return;
+      }

-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-        viewportIndex
-      );
-
-      cornerstoneViewportService.disableElement(viewportIndex);
+      cleanUpServices(viewportInfo);
+      cornerstoneViewportService.storePresentation({ viewportId });

      if (onElementDisabled) {
        onElementDisabled(viewportInfo);
      }

-      eventTarget.removeEventListener(
-        Enums.Events.ELEMENT_ENABLED,
-        elementEnabledHandler
-      );
+      eventTarget.removeEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
    };
  }, []);

@@ -273,9 +227,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
          return;
        }

-        const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-          viewportIndex
-        );
+        const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);

        if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
          const viewportData = viewportInfo.getViewportData();
@@ -287,18 +239,14 @@ const OHIFCornerstoneViewport = React.memo(props => {
          );

          const keepCamera = true;
-          cornerstoneViewportService.updateViewport(
-            viewportIndex,
-            newViewportData,
-            keepCamera
-          );
+          cornerstoneViewportService.updateViewport(viewportId, newViewportData, keepCamera);
        }
      }
    );
    return () => {
      unsubscribe();
    };
-  }, [viewportIndex]);
+  }, [viewportId]);

  useEffect(() => {
    // handle the default viewportType to be stack
@@ -317,27 +265,32 @@ const OHIFCornerstoneViewport = React.memo(props => {
      // The presentation state will have been stored previously by closing
      // a viewport.  Otherwise, this viewport will be unchanged and the
      // presentation information will be directly carried over.
-      const {
-        lutPresentationStore,
-        positionPresentationStore,
-      } = stateSyncService.getState();
+      const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
      const { presentationIds } = viewportOptions;
      const presentations = {
-        positionPresentation:
-          positionPresentationStore[presentationIds?.positionPresentationId],
-        lutPresentation:
-          lutPresentationStore[presentationIds?.lutPresentationId],
+        positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
+        lutPresentation: lutPresentationStore[presentationIds?.lutPresentationId],
      };
      let measurement;
-      if (cacheJumpToMeasurementEvent?.viewportIndex === viewportIndex) {
+      if (cacheJumpToMeasurementEvent?.viewportId === viewportId) {
        measurement = cacheJumpToMeasurementEvent.measurement;
        // Delete the position presentation so that viewport navigates direct
        presentations.positionPresentation = null;
        cacheJumpToMeasurementEvent = null;
      }

+      // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+      // Used for segmentation hydration right now, since the logic to decide whether
+      // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+      // so we need to re-render (force update via change of the needsRerendering) so that React
+      // does the diffing and decides we should render this again (although the id and element has not changed)
+      // so that the CornerstoneViewportService can decide whether to render the segmentation or not. Not that we reached here we can turn it off.
+      if (viewportOptions.needsRerendering) {
+        viewportOptions.needsRerendering = false;
+      }
+
      cornerstoneViewportService.setViewportData(
-        viewportIndex,
+        viewportId,
        viewportData,
        viewportOptions,
        displaySetOptions,
@@ -370,7 +323,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
      measurementService,
      displaySetService,
      elementRef,
-      viewportIndex,
+      viewportId,
      displaySets,
      viewportGridService,
      cornerstoneViewportService
@@ -380,7 +333,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
      measurementService,
      displaySetService,
      elementRef,
-      viewportIndex,
+      viewportId,
      displaySets,
      viewportGridService,
      cornerstoneViewportService
@@ -389,7 +342,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
    return () => {
      unsubscribeFromJumpToMeasurementEvents();
    };
-  }, [displaySets, elementRef, viewportIndex]);
+  }, [displaySets, elementRef, viewportId]);

  return (
    <React.Fragment>
@@ -408,7 +361,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
          ref={elementRef}
        ></div>
        <CornerstoneOverlays
-          viewportIndex={viewportIndex}
+          viewportId={viewportId}
          toolBarService={toolbarService}
          element={elementRef.current}
          scrollbarHeight={scrollbarHeight}
@@ -416,12 +369,12 @@ const OHIFCornerstoneViewport = React.memo(props => {
        />
        <CinePlayer
          enabledVPElement={enabledVPElement}
-          viewportIndex={viewportIndex}
+          viewportId={viewportId}
          servicesManager={servicesManager}
        />
      </div>
      <div className="absolute w-full">
-        {viewportDialogState.viewportIndex === viewportIndex && (
+        {viewportDialogState.viewportId === viewportId && (
          <Notification
            id="viewport-notification"
            message={viewportDialogState.message}
@@ -440,37 +393,35 @@ function _subscribeToJumpToMeasurementEvents(
  measurementService,
  displaySetService,
  elementRef,
-  viewportIndex,
+  viewportId,
  displaySets,
  viewportGridService,
  cornerstoneViewportService
 ) {
-  const displaysUIDs = displaySets.map(
-    displaySet => displaySet.displaySetInstanceUID
-  );
  const { unsubscribe } = measurementService.subscribe(
    MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT,
    props => {
      cacheJumpToMeasurementEvent = props;
-      const { viewportIndex: jumpIndex, measurement, isConsumed } = props;
+      const { viewportId: jumpId, measurement, isConsumed } = props;
      if (!measurement || isConsumed) {
        return;
      }
      if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
        // Decide on which viewport should handle this
-        cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIndexToJump(
-          jumpIndex,
-          measurement.displaySetInstanceUID,
-          { referencedImageId: measurement.referencedImageId }
-        );
+        cacheJumpToMeasurementEvent.cornerstoneViewport =
+          cornerstoneViewportService.getViewportIdToJump(
+            jumpId,
+            measurement.displaySetInstanceUID,
+            { referencedImageId: measurement.referencedImageId }
+          );
      }
-      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportIndex) {
+      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportId) {
        return;
      }
      _jumpToMeasurement(
        measurement,
        elementRef,
-        viewportIndex,
+        viewportId,
        measurementService,
        displaySetService,
        viewportGridService,
@@ -487,7 +438,7 @@ function _checkForCachedJumpToMeasurementEvents(
  measurementService,
  displaySetService,
  elementRef,
-  viewportIndex,
+  viewportId,
  displaySets,
  viewportGridService,
  cornerstoneViewportService
@@ -499,9 +450,7 @@ function _checkForCachedJumpToMeasurementEvents(
    cacheJumpToMeasurementEvent = null;
    return;
  }
-  const displaysUIDs = displaySets.map(
-    displaySet => displaySet.displaySetInstanceUID
-  );
+  const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
  if (!displaysUIDs?.length) {
    return;
  }
@@ -513,7 +462,7 @@ function _checkForCachedJumpToMeasurementEvents(
      _jumpToMeasurement(
        measurement,
        elementRef,
-        viewportIndex,
+        viewportId,
        measurementService,
        displaySetService,
        viewportGridService,
@@ -526,7 +475,7 @@ function _checkForCachedJumpToMeasurementEvents(
 function _jumpToMeasurement(
  measurement,
  targetElementRef,
-  viewportIndex,
+  viewportId,
  measurementService,
  displaySetService,
  viewportGridService,
@@ -540,26 +489,19 @@ function _jumpToMeasurement(
    return;
  }

-  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-    displaySetInstanceUID
-  );
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

  // Todo: setCornerstoneMeasurementActive should be handled by the toolGroupManager
  //  to set it properly
  // setCornerstoneMeasurementActive(measurement);

-  viewportGridService.setActiveViewportIndex(viewportIndex);
+  viewportGridService.setActiveViewportId(viewportId);

  const enabledElement = getEnabledElement(targetElement);

-  const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-    viewportIndex
-  );
  if (enabledElement) {
    // See how the jumpToSlice() of Cornerstone3D deals with imageIdx param.
-    const viewport = enabledElement.viewport as
-      | IStackViewport
-      | IVolumeViewport;
+    const viewport = enabledElement.viewport as IStackViewport | IVolumeViewport;

    let imageIdIndex = 0;
    let viewportCameraDirectionMatch = true;
@@ -567,14 +509,9 @@ function _jumpToMeasurement(
    if (viewport instanceof StackViewport) {
      const imageIds = viewport.getImageIds();
      imageIdIndex = imageIds.findIndex(imageId => {
-        const {
-          SOPInstanceUID: aSOPInstanceUID,
-          frameNumber: aFrameNumber,
-        } = getSOPInstanceAttributes(imageId);
-        return (
-          aSOPInstanceUID === SOPInstanceUID &&
-          (!frameNumber || frameNumber === aFrameNumber)
-        );
+        const { SOPInstanceUID: aSOPInstanceUID, frameNumber: aFrameNumber } =
+          getSOPInstanceAttributes(imageId);
+        return aSOPInstanceUID === SOPInstanceUID && (!frameNumber || frameNumber === aFrameNumber);
      });
    } else {
      // for volume viewport we can't rely on the imageIdIndex since it can be
@@ -589,10 +526,7 @@ function _jumpToMeasurement(
      // should compare abs for both planes since the direction can be flipped
      if (
        measurementViewPlane &&
-        !csUtils.isEqual(
-          measurementViewPlane.map(Math.abs),
-          viewportViewPlane.map(Math.abs)
-        )
+        !csUtils.isEqual(measurementViewPlane.map(Math.abs), viewportViewPlane.map(Math.abs))
      ) {
        viewportCameraDirectionMatch = false;
      }
@@ -621,7 +555,6 @@ OHIFCornerstoneViewport.defaultProps = {
 };

 OHIFCornerstoneViewport.propTypes = {
-  viewportIndex: PropTypes.number.isRequired,
  displaySets: PropTypes.array.isRequired,
  dataSource: PropTypes.object.isRequired,
  viewportOptions: PropTypes.object,
@@ -632,10 +565,7 @@ OHIFCornerstoneViewport.propTypes = {
  // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
  // of the imageData in the OHIFCornerstoneViewport. This prop is used
  // to set the initial state of the viewport's first image to render
-  initialImageIdOrIndex: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  initialImageIdOrIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };

 export default OHIFCornerstoneViewport;
@@ -6,7 +6,7 @@ import ViewportOrientationMarkers from './ViewportOrientationMarkers';
 import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';

 function CornerstoneOverlays(props) {
-  const { viewportIndex, element, scrollbarHeight, servicesManager } = props;
+  const { viewportId, element, scrollbarHeight, servicesManager } = props;
  const { cornerstoneViewportService } = servicesManager.services;
  const [imageSliceData, setImageSliceData] = useState({
    imageIndex: 0,
@@ -18,7 +18,7 @@ function CornerstoneOverlays(props) {
    const { unsubscribe } = cornerstoneViewportService.subscribe(
      cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
      props => {
-        if (props.viewportIndex !== viewportIndex) {
+        if (props.viewportId !== viewportId) {
          return;
        }

@@ -29,16 +29,14 @@ function CornerstoneOverlays(props) {
    return () => {
      unsubscribe();
    };
-  }, [viewportIndex]);
+  }, [viewportId]);

  if (!element) {
    return null;
  }

  if (viewportData) {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);

    if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
      return null;
@@ -48,7 +46,7 @@ function CornerstoneOverlays(props) {
  return (
    <div className="noselect">
      <ViewportImageScrollbar
-        viewportIndex={viewportIndex}
+        viewportId={viewportId}
        viewportData={viewportData}
        element={element}
        imageSliceData={imageSliceData}
@@ -60,7 +58,7 @@ function CornerstoneOverlays(props) {
      <CustomizableViewportOverlay
        imageSliceData={imageSliceData}
        viewportData={viewportData}
-        viewportIndex={viewportIndex}
+        viewportId={viewportId}
        servicesManager={servicesManager}
        element={element}
      />
@@ -75,7 +73,7 @@ function CornerstoneOverlays(props) {
        element={element}
        viewportData={viewportData}
        servicesManager={servicesManager}
-        viewportIndex={viewportIndex}
+        viewportId={viewportId}
      />
    </div>
  );
@@ -3,12 +3,7 @@ import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import { ViewportOverlay } from '@ohif/ui';
-import {
-  formatPN,
-  formatDICOMDate,
-  formatDICOMTime,
-  formatNumberPrecision,
-} from './utils';
+import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
 import { InstanceMetadata } from 'platform/core/src/types';
 import { ServicesManager } from '@ohif/core';
 import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';
@@ -21,7 +16,6 @@ interface OverlayItemProps {
  element: any;
  viewportData: any;
  imageSliceData: ImageSliceData;
-  viewportIndex: number | null;
  servicesManager: ServicesManager;
  instance: InstanceMetadata;
  customization: any;
@@ -56,13 +50,9 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
      style={{ color: (customization && customization.color) || undefined }}
    >
      <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 font-light shrink-0">
-        {windowWidth.toFixed(0)}
-      </span>
+      <span className="ml-1 mr-2 shrink-0 font-light">{windowWidth.toFixed(0)}</span>
      <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 font-light shrink-0">
-        {windowCenter.toFixed(0)}
-      </span>
+      <span className="ml-1 shrink-0 font-light">{windowCenter.toFixed(0)}</span>
    </div>
  );
 }
@@ -114,14 +104,11 @@ function CustomizableViewportOverlay({
  element,
  viewportData,
  imageSliceData,
-  viewportIndex,
+  viewportId,
  servicesManager,
 }) {
-  const {
-    toolbarService,
-    cornerstoneViewportService,
-    customizationService,
-  } = servicesManager.services;
+  const { toolbarService, cornerstoneViewportService, customizationService } =
+    servicesManager.services;
  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
  const [scale, setScale] = useState(1);
  const [activeTools, setActiveTools] = useState([]);
@@ -150,15 +137,10 @@ function CustomizableViewportOverlay({

  const instanceNumber = useMemo(() => {
    if (viewportData != null) {
-      return _getInstanceNumber(
-        viewportData,
-        viewportIndex,
-        imageIndex,
-        cornerstoneViewportService
-      );
+      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
    }
    return null;
-  }, [viewportData, viewportIndex, imageIndex, cornerstoneViewportService]);
+  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);

  /**
   * Initial toolbar state
@@ -179,10 +161,7 @@ function CustomizableViewportOverlay({
      }

      const { lower, upper } = range;
-      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
-        lower,
-        upper
-      );
+      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(lower, upper);

      setVOI({ windowCenter, windowWidth });
    };
@@ -192,7 +171,7 @@ function CustomizableViewportOverlay({
    return () => {
      element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
    };
-  }, [viewportIndex, viewportData, voi, element]);
+  }, [viewportId, viewportData, voi, element]);

  /**
   * Updating the scale when the viewport changes its zoom
@@ -205,9 +184,7 @@ function CustomizableViewportOverlay({
        previousCamera.parallelScale !== camera.parallelScale ||
        previousCamera.scale !== camera.scale
      ) {
-        const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-          viewportIndex
-        );
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

        if (!viewport) {
          return;
@@ -226,8 +203,7 @@ function CustomizableViewportOverlay({

        const { spacing } = imageData;
        // convert parallel scale to scale
-        const scale =
-          (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
+        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
        setScale(scale);
      }
    };
@@ -237,7 +213,7 @@ function CustomizableViewportOverlay({
    return () => {
      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
    };
-  }, [viewportIndex, viewportData, cornerstoneViewportService, element]);
+  }, [viewportId, viewportData, cornerstoneViewportService, element]);

  /**
   * Updating the active tools when the toolbar changes
@@ -262,7 +238,7 @@ function CustomizableViewportOverlay({
        element,
        viewportData,
        imageSliceData,
-        viewportIndex,
+        viewportId,
        servicesManager,
        customization: item,
        formatters: {
@@ -296,7 +272,7 @@ function CustomizableViewportOverlay({
      element,
      viewportData,
      imageSliceData,
-      viewportIndex,
+      viewportId,
      servicesManager,
      customizationService,
      instance,
@@ -343,9 +319,7 @@ function CustomizableViewportOverlay({
    return (
      <>
        {items.map((item, i) => (
-          <div key={`bottomLeftOverlayItem_${i}`}>
-            {_renderOverlayItem(item)}
-          </div>
+          <div key={`bottomLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
        ))}
      </>
    );
@@ -356,9 +330,7 @@ function CustomizableViewportOverlay({
    return (
      <>
        {items.map((item, i) => (
-          <div key={`bottomRightOverlayItem_${i}`}>
-            {_renderOverlayItem(item)}
-          </div>
+          <div key={`bottomRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
        ))}
      </>
    );
@@ -388,12 +360,7 @@ function _getViewportInstance(viewportData, imageIndex) {
  return imageId ? metaData.get('instance', imageId) || {} : {};
 }

-function _getInstanceNumber(
-  viewportData,
-  viewportIndex,
-  imageIndex,
-  cornerstoneViewportService
-) {
+function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
  let instanceNumber;

  if (viewportData.viewportType === Enums.ViewportType.STACK) {
@@ -406,7 +373,7 @@ function _getInstanceNumber(
    instanceNumber = _getInstanceNumberFromVolume(
      viewportData,
      imageIndex,
-      viewportIndex,
+      viewportId,
      cornerstoneViewportService
    );
  }
@@ -436,12 +403,7 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
 // Since volume viewports can be in any view direction, they can render
 // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
 // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
-function _getInstanceNumberFromVolume(
-  viewportData,
-  imageIndex,
-  viewportIndex,
-  cornerstoneViewportService
-) {
+function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService) {
  const volumes = viewportData.volumes;

  // Todo: support fusion of acquisition plane which has instanceNumber
@@ -452,9 +414,7 @@ function _getInstanceNumberFromVolume(
  const volume = volumes[0];
  const { direction, imageIds } = volume;

-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-    viewportIndex
-  );
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

  if (!cornerstoneViewport) {
    return;
@@ -477,8 +437,7 @@ function _getInstanceNumberFromVolume(
      return {};
    }

-    const { instanceNumber } =
-      metaData.get('generalImageModule', imageId) || {};
+    const { instanceNumber } = metaData.get('generalImageModule', imageId) || {};
    return parseInt(instanceNumber);
  }
 }
@@ -486,7 +445,7 @@ function _getInstanceNumberFromVolume(
 CustomizableViewportOverlay.propTypes = {
  viewportData: PropTypes.object,
  imageIndex: PropTypes.number,
-  viewportIndex: PropTypes.number,
+  viewportId: PropTypes.string,
 };

 export default CustomizableViewportOverlay;
@@ -7,34 +7,24 @@ import { ServicesManger } from '@ohif/core';

 function CornerstoneImageScrollbar({
  viewportData,
-  viewportIndex,
+  viewportId,
  element,
  imageSliceData,
  setImageSliceData,
  scrollbarHeight,
  servicesManager,
 }) {
-  const {
-    cineService,
-    cornerstoneViewportService,
-  } = (servicesManager as ServicesManger).services;
+  const { cineService, cornerstoneViewportService } = (servicesManager as ServicesManger).services;

-  const onImageScrollbarChange = (imageIndex, viewportIndex) => {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
-
-    const viewportId = viewportInfo.getViewportId();
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(
-      viewportId
-    );
+  const onImageScrollbarChange = (imageIndex, viewportId) => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

    const { isCineEnabled } = cineService.getState();

    if (isCineEnabled) {
      // on image scrollbar change, stop the CINE if it is playing
      cineService.stopClip(element);
-      cineService.setCine({ id: viewportIndex, isPlaying: false });
+      cineService.setCine({ id: viewportId, isPlaying: false });
    }

    csToolsUtils.jumpToSlice(viewport.element, {
@@ -48,9 +38,7 @@ function CornerstoneImageScrollbar({
      return;
    }

-    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-      viewportIndex
-    );
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

    if (!viewport) {
      return;
@@ -79,7 +67,7 @@ function CornerstoneImageScrollbar({
      const { imageIndex, numberOfSlices } = sliceData;
      setImageSliceData({ imageIndex, numberOfSlices });
    }
-  }, [viewportIndex, viewportData]);
+  }, [viewportId, viewportData]);

  useEffect(() => {
    if (viewportData?.viewportType !== Enums.ViewportType.STACK) {
@@ -95,16 +83,10 @@ function CornerstoneImageScrollbar({
      });
    };

-    element.addEventListener(
-      Enums.Events.STACK_VIEWPORT_SCROLL,
-      updateStackIndex
-    );
+    element.addEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, updateStackIndex);

    return () => {
-      element.removeEventListener(
-        Enums.Events.STACK_VIEWPORT_SCROLL,
-        updateStackIndex
-      );
+      element.removeEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, updateStackIndex);
    };
  }, [viewportData, element]);

@@ -122,19 +104,14 @@ function CornerstoneImageScrollbar({
    element.addEventListener(Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);

    return () => {
-      element.removeEventListener(
-        Enums.Events.VOLUME_NEW_IMAGE,
-        updateVolumeIndex
-      );
+      element.removeEventListener(Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);
    };
  }, [viewportData, element]);

  return (
    <ImageScrollbar
-      onChange={evt => onImageScrollbarChange(evt, viewportIndex)}
-      max={
-        imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0
-      }
+      onChange={evt => onImageScrollbarChange(evt, viewportId)}
+      max={imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0}
      height={scrollbarHeight}
      value={imageSliceData.imageIndex}
    />
@@ -143,7 +120,7 @@ function CornerstoneImageScrollbar({

 CornerstoneImageScrollbar.propTypes = {
  viewportData: PropTypes.object,
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
  element: PropTypes.instanceOf(Element),
  scrollbarHeight: PropTypes.string,
  imageSliceData: PropTypes.object.isRequired,
@@ -33,26 +33,14 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
  };

  useEffect(() => {
-    element.addEventListener(
-      Enums.Events.STACK_VIEWPORT_SCROLL,
-      setLoadingState
-    );
+    element.addEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingState);
    element.addEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState);
-    element.addEventListener(
-      Enums.Events.STACK_NEW_IMAGE,
-      setFinishLoadingState
-    );
+    element.addEventListener(Enums.Events.STACK_NEW_IMAGE, setFinishLoadingState);

    return () => {
-      element.removeEventListener(
-        Enums.Events.STACK_VIEWPORT_SCROLL,
-        setLoadingState
-      );
+      element.removeEventListener(Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingState);

-      element.removeEventListener(
-        Enums.Events.STACK_NEW_IMAGE,
-        setFinishLoadingState
-      );
+      element.removeEventListener(Enums.Events.STACK_NEW_IMAGE, setFinishLoadingState);

      element.removeEventListener(Enums.Events.IMAGE_LOAD_ERROR, setErrorState);
    };
@@ -61,8 +49,8 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
  if (error) {
    return (
      <>
-        <div className="bg-black opacity-50 absolute h-full w-full top-0 left-0">
-          <div className="flex transparent items-center justify-center w-full h-full">
+        <div className="absolute top-0 left-0 h-full w-full bg-black opacity-50">
+          <div className="transparent flex h-full w-full items-center justify-center">
            <p className="text-primary-light text-xl font-light">
              <h4>Error Loading Image</h4>
              <p>An error has occurred.</p>
@@ -78,8 +66,8 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
    return (
      // IMPORTANT: we need to use the pointer-events-none class to prevent the loading indicator from
      // interacting with the mouse, since scrolling should propagate to the viewport underneath
-      <div className="pointer-events-none bg-black opacity-50 absolute h-full w-full top-0 left-0">
-        <div className="flex transparent items-center justify-center w-full h-full">
+      <div className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50">
+        <div className="transparent flex h-full w-full items-center justify-center">
          <p className="text-primary-light text-xl font-light">Loading...</p>
        </div>
      </div>
@@ -13,16 +13,13 @@ import { vec3 } from 'gl-matrix';

 import './ViewportOrientationMarkers.css';

-const {
-  getOrientationStringLPS,
-  invertOrientationStringLPS,
-} = utilities.orientation;
+const { getOrientationStringLPS, invertOrientationStringLPS } = utilities.orientation;

 function ViewportOrientationMarkers({
  element,
  viewportData,
  imageSliceData,
-  viewportIndex,
+  viewportId,
  servicesManager,
  orientationMarkers = ['top', 'left'],
 }) {
@@ -33,9 +30,7 @@ function ViewportOrientationMarkers({
  const { cornerstoneViewportService } = servicesManager.services;

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

      if (rotation !== undefined) {
@@ -57,16 +52,10 @@ function ViewportOrientationMarkers({
      }
    };

-    element.addEventListener(
-      Enums.Events.CAMERA_MODIFIED,
-      cameraModifiedListener
-    );
+    element.addEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);

    return () => {
-      element.removeEventListener(
-        Enums.Events.CAMERA_MODIFIED,
-        cameraModifiedListener
-      );
+      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
    };
  }, []);

@@ -85,8 +74,7 @@ function ViewportOrientationMarkers({
        return false;
      }

-      ({ rowCosines, columnCosines } =
-        metaData.get('imagePlaneModule', imageId) || {});
+      ({ rowCosines, columnCosines } = metaData.get('imagePlaneModule', imageId) || {});
    } else {
      if (!element || !getEnabledElement(element)) {
        return '';
@@ -114,9 +102,7 @@ function ViewportOrientationMarkers({
      flipHorizontal
    );

-    const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(
-      viewportIndex
-    );
+    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);

    if (!ohifViewport) {
      console.log('ViewportOrientationMarkers::No viewport');
@@ -126,9 +112,7 @@ function ViewportOrientationMarkers({

    // Todo: probably this can be done in a better way in which we identify bright
    // background
-    const isLight = backgroundColor
-      ? csUtils.isEqual(backgroundColor, [1, 1, 1])
-      : false;
+    const isLight = backgroundColor ? csUtils.isEqual(backgroundColor, [1, 1, 1]) : false;

    return orientationMarkers.map((m, index) => (
      <div
@@ -174,13 +158,7 @@ ViewportOrientationMarkers.defaultProps = {
 * @param {*} rotation in degrees
 * @returns
 */
-function _getOrientationMarkers(
-  rowCosines,
-  columnCosines,
-  rotation,
-  flipVertical,
-  flipHorizontal
-) {
+function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal) {
  const rowString = getOrientationStringLPS(rowCosines);
  const columnString = getOrientationStringLPS(columnCosines);
  const oppositeRowString = invertOrientationStringLPS(rowString);
@@ -11,13 +11,10 @@ function CornerstoneViewportOverlay({
  element,
  viewportData,
  imageSliceData,
-  viewportIndex,
+  viewportId,
  servicesManager,
 }) {
-  const {
-    cornerstoneViewportService,
-    toolbarService,
-  } = servicesManager.services;
+  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
  const [scale, setScale] = useState(1);
  const [activeTools, setActiveTools] = useState([]);
@@ -60,10 +57,7 @@ function CornerstoneViewportOverlay({
      }

      const { lower, upper } = range;
-      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
-        lower,
-        upper
-      );
+      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(lower, upper);

      setVOI({ windowCenter, windowWidth });
    };
@@ -73,7 +67,7 @@ function CornerstoneViewportOverlay({
    return () => {
      element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
    };
-  }, [viewportIndex, viewportData, voi, element]);
+  }, [viewportId, viewportData, voi, element]);

  /**
   * Updating the scale when the viewport changes its zoom
@@ -86,9 +80,7 @@ function CornerstoneViewportOverlay({
        previousCamera.parallelScale !== camera.parallelScale ||
        previousCamera.scale !== camera.scale
      ) {
-        const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-          viewportIndex
-        );
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

        if (!viewport) {
          return;
@@ -107,8 +99,7 @@ function CornerstoneViewportOverlay({

        const { spacing } = imageData;
        // convert parallel scale to scale
-        const scale =
-          (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
+        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
        setScale(scale);
      }
    };
@@ -118,7 +109,7 @@ function CornerstoneViewportOverlay({
    return () => {
      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
    };
-  }, [viewportIndex, viewportData]);
+  }, [viewportId, viewportData]);

  const getTopLeftContent = useCallback(() => {
    const { windowWidth, windowCenter } = voi;
@@ -168,7 +159,7 @@ function CornerstoneViewportOverlay({
      instanceNumber = _getInstanceNumberFromVolume(
        viewportData,
        imageIndex,
-        viewportIndex,
+        viewportId,
        cornerstoneViewportService
      );
    }
@@ -183,15 +174,13 @@ function CornerstoneViewportOverlay({
        </span>
      </div>
    );
-  }, [imageSliceData, viewportData, viewportIndex]);
+  }, [imageSliceData, viewportData, viewportId]);

  if (!viewportData) {
    return null;
  }

-  const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(
-    viewportIndex
-  );
+  const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);

  if (!ohifViewport) {
    return null;
@@ -201,9 +190,7 @@ function CornerstoneViewportOverlay({

  // Todo: probably this can be done in a better way in which we identify bright
  // background
-  const isLight = backgroundColor
-    ? utilities.isEqual(backgroundColor, [1, 1, 1])
-    : false;
+  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;

  return (
    <ViewportOverlay
@@ -240,7 +227,7 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
 function _getInstanceNumberFromVolume(
  viewportData,
  imageIndex,
-  viewportIndex,
+  viewportId,
  cornerstoneViewportService
 ) {
  const volumes = viewportData.volumes;
@@ -253,9 +240,7 @@ function _getInstanceNumberFromVolume(
  const volume = volumes[0];
  const { direction, imageIds } = volume;

-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-    viewportIndex
-  );
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

  if (!cornerstoneViewport) {
    return;
@@ -278,8 +263,7 @@ function _getInstanceNumberFromVolume(
      return {};
    }

-    const { instanceNumber } =
-      metaData.get('generalImageModule', imageId) || {};
+    const { instanceNumber } = metaData.get('generalImageModule', imageId) || {};
    return parseInt(instanceNumber);
  }
 }
@@ -287,7 +271,7 @@ function _getInstanceNumberFromVolume(
 CornerstoneViewportOverlay.propTypes = {
  viewportData: PropTypes.object,
  imageIndex: PropTypes.number,
-  viewportIndex: PropTypes.number,
+  viewportId: PropTypes.string,
  servicesManager: PropTypes.instanceOf(ServicesManager),
 };

@@ -75,22 +75,16 @@ export function formatPN(name) {
 * Gets compression type
 *
 * @param {number} imageId
- * @returns {string} comrpession type.
+ * @returns {string} compression type.
 */
 export function getCompression(imageId) {
  const generalImageModule = metaData.get('generalImageModule', imageId) || {};
-  const {
-    lossyImageCompression,
-    lossyImageCompressionRatio,
-    lossyImageCompressionMethod,
-  } = generalImageModule;
+  const { lossyImageCompression, lossyImageCompressionRatio, lossyImageCompressionMethod } =
+    generalImageModule;

  if (lossyImageCompression === '01' && lossyImageCompressionRatio !== '') {
    const compressionMethod = lossyImageCompressionMethod || 'Lossy: ';
-    const compressionRatio = formatNumberPrecision(
-      lossyImageCompressionRatio,
-      2
-    );
+    const compressionRatio = formatNumberPrecision(lossyImageCompressionRatio, 2);
    return compressionMethod + compressionRatio + ' : 1';
  }

@@ -57,9 +57,7 @@ function commandsModule({
        // filter by allowed selected tools from config property (if there is any)
        const isToolAllowed =
          !optionsToUse.allowedSelectedTools ||
-          optionsToUse.allowedSelectedTools.includes(
-            firstAnnotationSelected?.metadata?.toolName
-          );
+          optionsToUse.allowedSelectedTools.includes(firstAnnotationSelected?.metadata?.toolName);
        if (isToolAllowed) {
          optionsToUse.nearbyToolData = firstAnnotationSelected;
        } else {
@@ -89,10 +87,7 @@ function commandsModule({
    },

    getNearbyToolData({ nearbyToolData, element, canvasCoordinates }) {
-      return (
-        nearbyToolData ??
-        cstUtils.getAnnotationNearPoint(element, canvasCoordinates)
-      );
+      return nearbyToolData ?? cstUtils.getAnnotationNearPoint(element, canvasCoordinates);
    },
    getNearbyAnnotation({ element, canvasCoordinates }) {
      const nearbyToolData = actions.getNearbyToolData({
@@ -109,18 +104,14 @@ function commandsModule({
        }

        const { renderingEngineId, viewportId } = enabledElement;
-        const toolGroup = ToolGroupManager.getToolGroupForViewport(
-          viewportId,
-          renderingEngineId
-        );
+        const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);

        const toolInstance = toolGroup.getToolInstance(toolName);

        return toolInstance?.constructor?.isAnnotation ?? true;
      };

-      return nearbyToolData?.metadata?.toolName &&
-        isAnnotation(nearbyToolData.metadata.toolName)
+      return nearbyToolData?.metadata?.toolName && isAnnotation(nearbyToolData.metadata.toolName)
        ? nearbyToolData
        : null;
    },
@@ -153,11 +144,7 @@ function commandsModule({
            label,
          });

-          measurementService.update(
-            updatedMeasurement.uid,
-            updatedMeasurement,
-            true
-          );
+          measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
        },
        false
      );
@@ -220,27 +207,20 @@ function commandsModule({
          }
        }
      }
-      measurementService.update(
-        updatedMeasurement.uid,
-        updatedMeasurement,
-        true
-      );
+      measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
    },

    // Retrieve value commands
    getActiveViewportEnabledElement: _getActiveViewportEnabledElement,

    setViewportActive: ({ viewportId }) => {
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(
-        viewportId
-      );
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
      if (!viewportInfo) {
        console.warn('No viewport found for viewportId:', viewportId);
        return;
      }

-      const viewportIndex = viewportInfo.getViewportIndex();
-      viewportGridService.setActiveViewportIndex(viewportIndex);
+      viewportGridService.setActiveViewportId(viewportId);
    },
    arrowTextCallback: ({ callback, data }) => {
      callInputDialog(uiDialogService, data, callback);
@@ -250,9 +230,7 @@ function commandsModule({
      const { isCineEnabled } = cineService.getState();
      cineService.setIsCineEnabled(!isCineEnabled);
      toolbarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
-      viewports.forEach((_, index) =>
-        cineService.setCine({ id: index, isPlaying: false })
-      );
+      viewports.forEach((_, index) => cineService.setCine({ id: index, isPlaying: false }));
    },
    setWindowLevel({ window, level, toolGroupId }) {
      // convert to numbers
@@ -260,9 +238,7 @@ function commandsModule({
      const windowCenterNum = Number(level);

      const { viewportId } = _getActiveViewportEnabledElement();
-      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(
-        viewportId
-      );
+      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(viewportId);

      if (toolGroupId && toolGroupId !== viewportToolGroupId) {
        return;
@@ -272,10 +248,7 @@ function commandsModule({
      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
      const viewport = renderingEngine.getViewport(viewportId);

-      const { lower, upper } = csUtils.windowLevel.toLowHighRange(
-        windowWidthNum,
-        windowCenterNum
-      );
+      const { lower, upper } = csUtils.windowLevel.toLowHighRange(windowWidthNum, windowCenterNum);

      viewport.setProperties({
        voiRange: {
@@ -292,8 +265,12 @@ function commandsModule({
    toolbarServiceRecordInteraction: props => {
      toolbarService.recordInteraction(props);
    },
-
-    setToolActive: ({ toolName, toolGroupId = null }) => {
+    // Enable or disable a toggleable command, without calling the activation
+    // Used to setup already active tools from hanging protocols
+    setToolbarToggled: props => {
+      toolbarService.setToggled(props.toolId, props.isActive ?? true);
+    },
+    setToolActive: ({ toolName, toolGroupId = null, toggledState }) => {
      if (toolName === 'Crosshairs') {
        const activeViewportToolGroup = toolGroupService.getToolGroup(null);

@@ -310,9 +287,11 @@ function commandsModule({
        }
      }

-      const { viewports } = viewportGridService.getState() || {
-        viewports: [],
-      };
+      const { viewports } = viewportGridService.getState();
+
+      if (!viewports.size) {
+        return;
+      }

      const toolGroup = toolGroupService.getToolGroup(toolGroupId);
      const toolGroupViewportIds = toolGroup?.getViewportIds?.();
@@ -322,14 +301,8 @@ function commandsModule({
        return;
      }

-      const filteredViewports = viewports.filter(viewport => {
-        if (!viewport.viewportOptions) {
-          return false;
-        }
-
-        return toolGroupViewportIds.includes(
-          viewport.viewportOptions.viewportId
-        );
+      const filteredViewports = Array.from(viewports.values()).filter(viewport => {
+        return toolGroupViewportIds.includes(viewport.viewportId);
      });

      if (!filteredViewports.length) {
@@ -358,6 +331,14 @@ function commandsModule({
          toolGroup.setToolPassive(activeToolName);
        }
      }
+
+      // If there is a toggle state, then simply set the enabled/disabled state without
+      // setting the tool active.
+      if (toggledState != null) {
+        toggledState ? toolGroup.setToolEnabled(toolName) : toolGroup.setToolDisabled(toolName);
+        return;
+      }
+
      // Set the new toolName to be active
      toolGroup.setToolActive(toolName, {
        bindings: [
@@ -368,13 +349,9 @@ function commandsModule({
      });
    },
    showDownloadViewportModal: () => {
-      const { activeViewportIndex } = viewportGridService.getState();
+      const { activeViewportId } = viewportGridService.getState();

-      if (
-        !cornerstoneViewportService.getCornerstoneViewportByIndex(
-          activeViewportIndex
-        )
-      ) {
+      if (!cornerstoneViewportService.getCornerstoneViewport(activeViewportId)) {
        // Cannot download a non-cornerstone viewport (image).
        uiNotificationService.show({
          title: 'Download Image',
@@ -391,7 +368,7 @@ function commandsModule({
          content: CornerstoneViewportDownloadForm,
          title: 'Download High Quality Image',
          contentProps: {
-            activeViewportIndex,
+            activeViewportId,
            onClose: uiModalService.hide,
            cornerstoneViewportService,
          },
@@ -513,9 +490,7 @@ function commandsModule({
        }
        viewport = enabledElement.viewport;
      } else {
-        viewport = cornerstoneViewportService.getCornerstoneViewport(
-          gridViewport.id
-        );
+        viewport = cornerstoneViewportService.getCornerstoneViewport(gridViewport.id);
      }

      // Get number of slices
@@ -525,14 +500,12 @@ function commandsModule({
      if (viewport instanceof StackViewport) {
        numberOfSlices = viewport.getImageIds().length;
      } else if (viewport instanceof VolumeViewport) {
-        numberOfSlices = csUtils.getImageSliceDataForVolumeViewport(viewport)
-          .numberOfSlices;
+        numberOfSlices = csUtils.getImageSliceDataForVolumeViewport(viewport).numberOfSlices;
      } else {
        throw new Error('Unsupported viewport type');
      }

-      const jumpIndex =
-        imageIndex < 0 ? numberOfSlices + imageIndex : imageIndex;
+      const jumpIndex = imageIndex < 0 ? numberOfSlices + imageIndex : imageIndex;
      if (jumpIndex >= numberOfSlices || jumpIndex < 0) {
        throw new Error(`Can't jump to ${imageIndex}`);
      }
@@ -553,15 +526,8 @@ function commandsModule({

      cstUtils.scroll(viewport, options);
    },
-    setViewportColormap: ({
-      viewportIndex,
-      displaySetInstanceUID,
-      colormap,
-      immediate = false,
-    }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-        viewportIndex
-      );
+    setViewportColormap: ({ viewportId, displaySetInstanceUID, colormap, immediate = false }) => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

      const actorEntries = viewport.getActors();

@@ -577,37 +543,29 @@ function commandsModule({
        viewport.render();
      }
    },
-    incrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex + 1) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
-    decrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
+    changeActiveViewport: ({ direction = 1 }) => {
+      const { activeViewportId, viewports } = viewportGridService.getState();
+      const viewportIds = Array.from(viewports.keys());
+      const currentIndex = viewportIds.indexOf(activeViewportId);
      const nextViewportIndex =
-        (activeViewportIndex - 1 + viewports.length) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
+        (currentIndex + direction + viewportIds.length) % viewportIds.length;
+      viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex] as string);
    },
+
    toggleStackImageSync: ({ toggledState }) => {
      toggleStackImageSync({
-        getEnabledElement,
        servicesManager,
        toggledState,
      });
    },
-    toggleReferenceLines: ({ toggledState }) => {
-      const { activeViewportIndex } = viewportGridService.getState();
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-        activeViewportIndex
-      );
-
-      const viewportId = viewportInfo.getViewportId();
-      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-
-      if (!toggledState) {
-        toolGroup.setToolDisabled(ReferenceLinesTool.toolName);
+    setSourceViewportForReferenceLinesTool: ({ toggledState, viewportId }) => {
+      if (!viewportId) {
+        const { activeViewportId } = viewportGridService.getState();
+        viewportId = activeViewportId;
      }

+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
      toolGroup.setToolConfiguration(
        ReferenceLinesTool.toolName,
        {
@@ -615,36 +573,9 @@ function commandsModule({
        },
        true // overwrite
      );
-      toolGroup.setToolEnabled(ReferenceLinesTool.toolName);
    },
-    storePresentation: ({ viewportIndex }) => {
-      const presentation = cornerstoneViewportService.getPresentation(
-        viewportIndex
-      );
-      if (!presentation || !presentation.presentationIds) {
-        return;
-      }
-      const {
-        lutPresentationStore,
-        positionPresentationStore,
-      } = stateSyncService.getState();
-      const { presentationIds } = presentation;
-      const { lutPresentationId, positionPresentationId } =
-        presentationIds || {};
-      const storeState = {};
-      if (lutPresentationId) {
-        storeState.lutPresentationStore = {
-          ...lutPresentationStore,
-          [lutPresentationId]: presentation,
-        };
-      }
-      if (positionPresentationId) {
-        storeState.positionPresentationStore = {
-          ...positionPresentationStore,
-          [positionPresentationId]: presentation,
-        };
-      }
-      stateSyncService.store(storeState);
+    storePresentation: ({ viewportId }) => {
+      cornerstoneViewportService.storePresentation({ viewportId });
    },
  };

@@ -701,10 +632,11 @@ function commandsModule({
      options: { rotation: -90 },
    },
    incrementActiveViewport: {
-      commandFn: actions.incrementActiveViewport,
+      commandFn: actions.changeActiveViewport,
    },
    decrementActiveViewport: {
-      commandFn: actions.decrementActiveViewport,
+      commandFn: actions.changeActiveViewport,
+      options: { direction: -1 },
    },
    flipViewportHorizontal: {
      commandFn: actions.flipViewportHorizontal,
@@ -767,13 +699,14 @@ function commandsModule({
    toggleStackImageSync: {
      commandFn: actions.toggleStackImageSync,
    },
-    toggleReferenceLines: {
-      commandFn: actions.toggleReferenceLines,
+    setSourceViewportForReferenceLinesTool: {
+      commandFn: actions.setSourceViewportForReferenceLinesTool,
    },
    storePresentation: {
      commandFn: actions.storePresentation,
-      storeContexts: [],
-      options: {},
+    },
+    setToolbarToggled: {
+      commandFn: actions.setToolbarToggled,
    },
  };

@@ -2,14 +2,10 @@ import React, { useEffect } from 'react';
 import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
 import { Enums, eventTarget } from '@cornerstonejs/core';

-function WrappedCinePlayer({
-  enabledVPElement,
-  viewportIndex,
-  servicesManager,
-}) {
+function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
  const { toolbarService, customizationService } = servicesManager.services;
  const [{ isCineEnabled, cines }, cineService] = useCine();
-  const [{ activeViewportIndex }] = useViewportGrid();
+  const [{ activeViewportId }] = useViewportGrid();

  const { component: CinePlayerComponent = CinePlayer } =
    customizationService.get('cinePlayer') ?? {};
@@ -17,12 +13,12 @@ function WrappedCinePlayer({
  const handleCineClose = () => {
    toolbarService.recordInteraction({
      groupId: 'MoreTools',
-      itemId: 'cine',
      interactionType: 'toggle',
      commands: [
        {
          commandName: 'toggleCine',
          commandOptions: {},
+          toolName: 'cine',
          context: 'CORNERSTONE',
        },
      ],
@@ -30,11 +26,11 @@ function WrappedCinePlayer({
  };

  const cineHandler = () => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
      return;
    }

-    const cine = cines[viewportIndex];
+    const cine = cines[viewportId];
    const isPlaying = cine.isPlaying || false;
    const frameRate = cine.frameRate || 24;

@@ -50,52 +46,46 @@ function WrappedCinePlayer({
  };

  useEffect(() => {
-    eventTarget.addEventListener(
-      Enums.Events.STACK_VIEWPORT_NEW_STACK,
-      cineHandler
-    );
+    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);

    return () => {
-      cineService.setCine({ id: viewportIndex, isPlaying: false });
-      eventTarget.removeEventListener(
-        Enums.Events.STACK_VIEWPORT_NEW_STACK,
-        cineHandler
-      );
+      cineService.setCine({ id: viewportId, isPlaying: false });
+      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
    };
  }, [enabledVPElement]);

  useEffect(() => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
      return;
    }

    cineHandler();

    return () => {
-      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
+      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
        cineService.stopClip(enabledVPElement);
      }
    };
-  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
+  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);

-  const cine = cines[viewportIndex];
+  const cine = cines[viewportId];
  const isPlaying = (cine && cine.isPlaying) || false;

  return (
    isCineEnabled && (
      <CinePlayerComponent
-        className="absolute left-1/2 -translate-x-1/2 bottom-3"
+        className="absolute left-1/2 bottom-3 -translate-x-1/2"
        isPlaying={isPlaying}
        onClose={handleCineClose}
        onPlayPauseChange={isPlaying =>
          cineService.setCine({
-            id: activeViewportIndex,
+            id: activeViewportId,
            isPlaying,
          })
        }
        onFrameRateChange={frameRate =>
          cineService.setCine({
-            id: activeViewportIndex,
+            id: activeViewportId,
            frameRate,
          })
        }
@@ -1,6 +1,23 @@
 .dicom-upload-drop-area-border-dash {
-  background-image: repeating-linear-gradient(to right, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #7BB2CE 0%, #7BB2CE 50%, transparent 50%, transparent 100%);
-  background-position: left top, left bottom, left top, right top;
+  background-image: repeating-linear-gradient(
+      to right,
+      #7bb2ce 0%,
+      #7bb2ce 50%,
+      transparent 50%,
+      transparent 100%
+    ),
+    repeating-linear-gradient(to right, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
+    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
+    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%);
+  background-position:
+    left top,
+    left bottom,
+    left top,
+    right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
+  background-size:
+    20px 3px,
+    20px 3px,
+    3px 20px,
+    3px 20px;
 }
@@ -14,19 +14,13 @@ type DicomUploadProps = {
  onStarted: () => void;
 };

-function DicomUpload({
-  dataSource,
-  onComplete,
-  onStarted,
-}: DicomUploadProps): ReactElement {
+function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement {
  const baseClassNames = 'min-h-[480px] flex flex-col bg-black select-none';
  const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]);

  const onDrop = useCallback(async acceptedFiles => {
    onStarted();
-    setDicomFileUploaderArr(
-      acceptedFiles.map(file => new DicomFileUploader(file, dataSource))
-    );
+    setDicomFileUploaderArr(acceptedFiles.map(file => new DicomFileUploader(file, dataSource)));
  }, []);

  const getDropZoneComponent = (): ReactElement => {
@@ -40,20 +34,29 @@ function DicomUpload({
        {({ getRootProps }) => (
          <div
            {...getRootProps()}
-            className="m-5 dicom-upload-drop-area-border-dash flex flex-col items-center justify-center h-full"
+            className="dicom-upload-drop-area-border-dash m-5 flex h-full flex-col items-center justify-center"
          >
            <div className="flex gap-3">
-              <Dropzone onDrop={onDrop} noDrag>
+              <Dropzone
+                onDrop={onDrop}
+                noDrag
+              >
                {({ getRootProps, getInputProps }) => (
                  <div {...getRootProps()}>
-                    <Button disabled={false} onClick={() => {}}>
+                    <Button
+                      disabled={false}
+                      onClick={() => {}}
+                    >
                      {'Add files'}
                      <input {...getInputProps()} />
                    </Button>
                  </div>
                )}
              </Dropzone>
-              <Dropzone onDrop={onDrop} noDrag>
+              <Dropzone
+                onDrop={onDrop}
+                noDrag
+              >
                {({ getRootProps, getInputProps }) => (
                  <div {...getRootProps()}>
                    <Button
@@ -73,9 +76,7 @@ function DicomUpload({
              </Dropzone>
            </div>
            <div className="pt-5">or drag images or folders here</div>
-            <div className="pt-3 text-aqua-pale text-lg">
-              (DICOM files supported)
-            </div>
+            <div className="text-aqua-pale pt-3 text-lg">(DICOM files supported)</div>
          </div>
        )}
      </Dropzone>
@@ -92,9 +93,7 @@ function DicomUpload({
          />
        </div>
      ) : (
-        <div className={classNames('h-[480px]', baseClassNames)}>
-          {getDropZoneComponent()}
-        </div>
+        <div className={classNames('h-[480px]', baseClassNames)}>{getDropZoneComponent()}</div>
      )}
    </>
  );
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  ReactElement,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon, ProgressLoadingBar } from '@ohif/ui';
 import DicomFileUploader, {
@@ -39,18 +33,14 @@ const BASE_INTERVAL_TIME = 15000;
 // calculate the upload rate.
 const UPLOAD_RATE_THRESHOLD = 75;

-const NO_WRAP_ELLIPSIS_CLASS_NAMES =
-  'text-ellipsis whitespace-nowrap overflow-hidden';
+const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';

 function DicomUploadProgress({
  dicomFileUploaderArr,
  onComplete,
 }: DicomUploadProgressProps): ReactElement {
  const [totalUploadSize] = useState(
-    dicomFileUploaderArr.reduce(
-      (acc, fileUploader) => acc + fileUploader.getFileSize(),
-      0
-    )
+    dicomFileUploaderArr.reduce((acc, fileUploader) => acc + fileUploader.getFileSize(), 0)
  );

  const currentUploadSizeRef = useRef<number>(0);
@@ -83,15 +73,13 @@ function DicomUploadProgress({
    let intervalStartTime = Date.now();

    const setUploadRateRef = () => {
-      const uploadSizeFromStartOfInterval =
-        currentUploadSizeRef.current - intervalStartUploadSize;
+      const uploadSizeFromStartOfInterval = currentUploadSizeRef.current - intervalStartUploadSize;

      const now = Date.now();
      const timeSinceStartOfInterval = now - intervalStartTime;

      // Calculate and set the upload rate (ref)
-      uploadRateRef.current =
-        uploadSizeFromStartOfInterval / timeSinceStartOfInterval;
+      uploadRateRef.current = uploadSizeFromStartOfInterval / timeSinceStartOfInterval;

      // Reset the interval starting values.
      intervalStartUploadSize = currentUploadSizeRef.current;
@@ -134,28 +122,19 @@ function DicomUploadProgress({
      const updateProgress = (percentComplete: number) => {
        const previousFileUploadSize = currentFileUploadSize;

-        currentFileUploadSize = Math.round(
-          (percentComplete / 100) * fileUploader.getFileSize()
-        );
+        currentFileUploadSize = Math.round((percentComplete / 100) * fileUploader.getFileSize());

        currentUploadSizeRef.current = Math.min(
          totalUploadSize,
-          currentUploadSizeRef.current -
-            previousFileUploadSize +
-            currentFileUploadSize
+          currentUploadSizeRef.current - previousFileUploadSize + currentFileUploadSize
        );

-        setPercentComplete(
-          (currentUploadSizeRef.current / totalUploadSize) * 100
-        );
+        setPercentComplete((currentUploadSizeRef.current / totalUploadSize) * 100);

        if (uploadRateRef.current !== 0) {
-          const uploadSizeRemaining =
-            totalUploadSize - currentUploadSizeRef.current;
+          const uploadSizeRemaining = totalUploadSize - currentUploadSizeRef.current;

-          const timeRemaining = Math.round(
-            uploadSizeRemaining / uploadRateRef.current
-          );
+          const timeRemaining = Math.round(uploadSizeRemaining / uploadRateRef.current);

          if (currentTimeRemaining === null) {
            currentTimeRemaining = timeRemaining;
@@ -168,9 +147,7 @@ function DicomUploadProgress({
          // due to rounding, inaccuracies in the estimate and slight variations
          // in upload rates over time.
          if (timeRemaining < ONE_MINUTE) {
-            const currentSecondsRemaining = Math.ceil(
-              currentTimeRemaining / ONE_SECOND
-            );
+            const currentSecondsRemaining = Math.ceil(currentTimeRemaining / ONE_SECOND);
            const secondsRemaining = Math.ceil(timeRemaining / ONE_SECOND);
            const delta = secondsRemaining - currentSecondsRemaining;
            if (delta < 0 || delta > 2) {
@@ -181,9 +158,7 @@ function DicomUploadProgress({
          }

          if (timeRemaining < ONE_HOUR) {
-            const currentMinutesRemaining = Math.ceil(
-              currentTimeRemaining / ONE_MINUTE
-            );
+            const currentMinutesRemaining = Math.ceil(currentTimeRemaining / ONE_MINUTE);
            const minutesRemaining = Math.ceil(timeRemaining / ONE_MINUTE);
            const delta = minutesRemaining - currentMinutesRemaining;
            if (delta < 0 || delta > 2) {
@@ -199,9 +174,7 @@ function DicomUploadProgress({
        }
      };

-      const progressCallback = (
-        progressEvent: DicomFileUploaderProgressEvent
-      ) => {
+      const progressCallback = (progressEvent: DicomFileUploaderProgressEvent) => {
        updateProgress(progressEvent.percentComplete);
      };

@@ -249,16 +222,12 @@ function DicomUploadProgress({

    if (timeRemaining < ONE_MINUTE) {
      const secondsRemaining = Math.ceil(timeRemaining / ONE_SECOND);
-      return `${secondsRemaining} ${
-        secondsRemaining === 1 ? 'second' : 'seconds'
-      }`;
+      return `${secondsRemaining} ${secondsRemaining === 1 ? 'second' : 'seconds'}`;
    }

    if (timeRemaining < ONE_HOUR) {
      const minutesRemaining = Math.ceil(timeRemaining / ONE_MINUTE);
-      return `${minutesRemaining} ${
-        minutesRemaining === 1 ? 'minute' : 'minutes'
-      }`;
+      return `${minutesRemaining} ${minutesRemaining === 1 ? 'minute' : 'minutes'}`;
    }

    const hoursRemaining = Math.ceil(timeRemaining / ONE_HOUR);
@@ -278,9 +247,7 @@ function DicomUploadProgress({
  const showInfiniteProgressBar = useCallback((): boolean => {
    return (
      getPercentCompleteRounded() < 1 &&
-      (progressBarContainerRef?.current?.offsetWidth ?? 0) *
-        (percentComplete / 100) <
-        1
+      (progressBarContainerRef?.current?.offsetWidth ?? 0) * (percentComplete / 100) < 1
    );
  }, [getPercentCompleteRounded, percentComplete]);

@@ -300,15 +267,17 @@ function DicomUploadProgress({

  const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
    return (
-      <div className="text-lg px-1 pb-4 h-14 flex bg-primary-dark items-center">
+      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg">
        {numFilesCompleted === dicomFileUploaderArr.length ? (
          <>
-            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${
-              dicomFileUploaderArr.length
-            } ${
+            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${
              dicomFileUploaderArr.length > 1 ? 'files' : 'file'
            } completed.`}</span>
-            <Button disabled={false} className="ml-auto" onClick={onComplete}>
+            <Button
+              disabled={false}
+              className="ml-auto"
+              onClick={onComplete}
+            >
              {'Close'}
            </Button>
          </>
@@ -320,18 +289,14 @@ function DicomUploadProgress({
            >
              {`${numFilesCompleted} of ${dicomFileUploaderArr.length}`}&nbsp;
            </span>
+            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{' files completed.'}&nbsp;</span>
            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>
-              {' files completed.'}&nbsp;
-            </span>
-            <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>
-              {timeRemaining
-                ? `Less than ${getFormattedTimeRemaining()} remaining. `
-                : ''}
+              {timeRemaining ? `Less than ${getFormattedTimeRemaining()} remaining. ` : ''}
            </span>
            <span
              className={classNames(
                NO_WRAP_ELLIPSIS_CLASS_NAMES,
-                'cursor-pointer text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto'
+                'text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'
              )}
              onClick={cancelAllUploads}
            >
@@ -345,14 +310,13 @@ function DicomUploadProgress({

  const getShowFailedOnlyIconComponent = (): ReactElement => {
    return (
-      <div className="ml-auto flex justify-center w-6">
+      <div className="ml-auto flex w-6 justify-center">
        {numFails > 0 && (
-          <div
-            onClick={() =>
-              setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)
-            }
-          >
-            <Icon className="cursor-pointer" name="icon-status-alert"></Icon>
+          <div onClick={() => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)}>
+            <Icon
+              className="cursor-pointer"
+              name="icon-status-alert"
+            ></Icon>
          </div>
        )}
      </div>
@@ -361,31 +325,28 @@ function DicomUploadProgress({

  const getPercentCompleteComponent = (): ReactElement => {
    return (
-      <div className="overflow-y-scroll ohif-scrollbar px-2 border-b border-secondary-light">
-        <div className="flex w-full p-2.5 items-center min-h-14">
+      <div className="ohif-scrollbar border-secondary-light overflow-y-scroll border-b px-2">
+        <div className="min-h-14 flex w-full items-center p-2.5">
          {numFilesCompleted === dicomFileUploaderArr.length ? (
            <>
-              <div className="text-xl text-primary-light">
+              <div className="text-primary-light text-xl">
                {numFails > 0
-                  ? `Completed with ${numFails} ${
-                      numFails > 1 ? 'errors' : 'error'
-                    }!`
+                  ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!`
                  : 'Completed!'}
              </div>
              {getShowFailedOnlyIconComponent()}
            </>
          ) : (
            <>
-              <div ref={progressBarContainerRef} className="flex-grow">
+              <div
+                ref={progressBarContainerRef}
+                className="flex-grow"
+              >
                <ProgressLoadingBar
-                  progress={
-                    showInfiniteProgressBar()
-                      ? undefined
-                      : Math.min(100, percentComplete)
-                  }
+                  progress={showInfiniteProgressBar() ? undefined : Math.min(100, percentComplete)}
                ></ProgressLoadingBar>
              </div>
-              <div className="w-24 ml-1 flex items-center">
+              <div className="ml-1 flex w-24 items-center">
                <div className="w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
                {getShowFailedOnlyIconComponent()}
              </div>
@@ -397,16 +358,15 @@ function DicomUploadProgress({
  };

  return (
-    <div className="flex flex-col grow">
+    <div className="flex grow flex-col">
      {getNumCompletedAndTimeRemainingComponent()}
-      <div className="flex flex-col bg-black text-lg overflow-hidden grow">
+      <div className="flex grow flex-col overflow-hidden bg-black text-lg">
        {getPercentCompleteComponent()}
-        <div className="overflow-y-scroll ohif-scrollbar px-2 grow h-1">
+        <div className="ohif-scrollbar h-1 grow overflow-y-scroll px-2">
          {dicomFileUploaderArr
            .filter(
              dicomFileUploader =>
-                !showFailedOnly ||
-                dicomFileUploader.getStatus() === UploadStatus.Failed
+                !showFailedOnly || dicomFileUploader.getStatus() === UploadStatus.Failed
            )
            .map(dicomFileUploader => (
              <DicomUploadProgressItem
@@ -421,9 +381,7 @@ function DicomUploadProgress({
 }

 DicomUploadProgress.propTypes = {
-  dicomFileUploaderArr: PropTypes.arrayOf(
-    PropTypes.instanceOf(DicomFileUploader)
-  ).isRequired,
+  dicomFileUploaderArr: PropTypes.arrayOf(PropTypes.instanceOf(DicomFileUploader)).isRequired,
  onComplete: PropTypes.func.isRequired,
 };

@@ -1,10 +1,4 @@
-import React, {
-  ReactElement,
-  memo,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { ReactElement, memo, useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import DicomFileUploader, {
  DicomFileUploaderProgressEvent,
@@ -21,9 +15,7 @@ type DicomUploadProgressItemProps = {
 // eslint-disable-next-line react/display-name
 const DicomUploadProgressItem = memo(
  ({ dicomFileUploader }: DicomUploadProgressItemProps): ReactElement => {
-    const [percentComplete, setPercentComplete] = useState(
-      dicomFileUploader.getPercentComplete()
-    );
+    const [percentComplete, setPercentComplete] = useState(dicomFileUploader.getPercentComplete());
    const [failedReason, setFailedReason] = useState('');
    const [status, setStatus] = useState(dicomFileUploader.getStatus());

@@ -62,7 +54,10 @@ const DicomUploadProgressItem = memo(
      switch (dicomFileUploader.getStatus()) {
        case UploadStatus.Success:
          return (
-            <Icon name="status-tracked" className="text-primary-light"></Icon>
+            <Icon
+              name="status-tracked"
+              className="text-primary-light"
+            ></Icon>
          );
        case UploadStatus.InProgress:
          return <Icon name="icon-transferring"></Icon>;
@@ -76,27 +71,25 @@ const DicomUploadProgressItem = memo(
    };

    return (
-      <div className="flex w-full p-2.5 text-lg min-h-14 items-center border-b border-secondary-light overflow-hidden">
-        <div className="flex flex-col gap-1 self-top w-0 grow shrink">
+      <div className="min-h-14 border-secondary-light flex w-full items-center overflow-hidden border-b p-2.5 text-lg">
+        <div className="self-top flex w-0 shrink grow flex-col gap-1">
          <div className="flex gap-4">
-            <div className="flex w-6 justify-center items-center shrink-0">
-              {getStatusIcon()}
-            </div>
-            <div className="text-ellipsis whitespace-nowrap overflow-hidden">
+            <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
              {dicomFileUploader.getFileName()}
            </div>
          </div>
          {failedReason && <div className="pl-10">{failedReason}</div>}
        </div>
-        <div className="w-24 flex items-center">
+        <div className="flex w-24 items-center">
          {!isComplete() && (
            <>
              {dicomFileUploader.getStatus() === UploadStatus.InProgress && (
                <div className="w-10 text-right">{percentComplete}%</div>
              )}
-              <div className="flex cursor-pointer ml-auto">
+              <div className="ml-auto flex cursor-pointer">
                <Icon
-                  className="self-center text-primary-active"
+                  className="text-primary-active self-center"
                  name="close"
                  onClick={cancelUpload}
                />
@@ -88,6 +88,7 @@ const mpr: Types.HangingProtocol.Protocol = {
      viewports: [
        {
          viewportOptions: {
+            viewportId: 'mpr-axial',
            toolGroupId: 'mpr',
            viewportType: 'volume',
            orientation: 'axial',
@@ -111,6 +112,7 @@ const mpr: Types.HangingProtocol.Protocol = {
        },
        {
          viewportOptions: {
+            viewportId: 'mpr-sagittal',
            toolGroupId: 'mpr',
            viewportType: 'volume',
            orientation: 'sagittal',
@@ -134,6 +136,7 @@ const mpr: Types.HangingProtocol.Protocol = {
        },
        {
          viewportOptions: {
+            viewportId: 'mpr-coronal',
            toolGroupId: 'mpr',
            viewportType: 'volume',
            orientation: 'coronal',
@@ -31,9 +31,7 @@ import { measurementMappingUtils } from './utils/measurementServiceMappings';
 import type { PublicViewportOptions } from './services/ViewportService/Viewport';

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

 const OHIFCornerstoneViewport = props => {
@@ -61,7 +59,6 @@ const cornerstoneExtension: Types.Extensions.Extension = {
      imageRetrievalPoolManager.clearRequestStack(type);
    });

-    csWADOImageLoader.destroy();
    enabledElementReset();
  },

@@ -70,9 +67,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
   *
   * @param configuration.csToolsConfig - Passed directly to `initCornerstoneTools`
   */
-  preRegistration: function (
-    props: Types.Extensions.ExtensionParams
-  ): Promise<void> {
+  preRegistration: function (props: Types.Extensions.ExtensionParams): Promise<void> {
    const { servicesManager } = props;
    servicesManager.registerService(CornerstoneViewportService.REGISTRATION);
    servicesManager.registerService(ToolGroupService.REGISTRATION);
@@ -140,5 +135,10 @@ const cornerstoneExtension: Types.Extensions.Extension = {
 };

 export type { PublicViewportOptions };
-export { measurementMappingUtils, CornerstoneExtensionTypes, toolNames , getActiveViewportEnabledElement};
+export {
+  measurementMappingUtils,
+  CornerstoneExtensionTypes as Types,
+  toolNames,
+  getActiveViewportEnabledElement,
+};
 export default cornerstoneExtension;
@@ -12,8 +12,9 @@ import {
  imageLoadPoolManager,
  Settings,
  utilities as csUtilities,
+  Enums as csEnums,
 } from '@cornerstonejs/core';
-import { Enums, utilities, ReferenceLinesTool } from '@cornerstonejs/tools';
+import { Enums } from '@cornerstonejs/tools';
 import { cornerstoneStreamingImageVolumeLoader } from '@cornerstonejs/streaming-image-volume-loader';

 import initWADOImageLoader from './initWADOImageLoader';
@@ -41,16 +42,35 @@ export default async function init({
  configuration,
  appConfig,
 }: Types.Extensions.ExtensionParams): Promise<void> {
-  await cs3DInit();
+  // Note: this should run first before initializing the cornerstone
+  // DO NOT CHANGE THE ORDER
+  const value = appConfig.useSharedArrayBuffer;
+  let sharedArrayBufferDisabled = false;
+
+  if (value === 'AUTO') {
+    cornerstone.setUseSharedArrayBuffer(csEnums.SharedArrayBufferModes.AUTO);
+  } else if (value === 'FALSE' || value === false) {
+    cornerstone.setUseSharedArrayBuffer(csEnums.SharedArrayBufferModes.FALSE);
+    sharedArrayBufferDisabled = true;
+  } else {
+    cornerstone.setUseSharedArrayBuffer(csEnums.SharedArrayBufferModes.TRUE);
+  }
+
+  await cs3DInit({
+    rendering: {
+      preferSizeOverAccuracy: Boolean(appConfig.use16BitDataType),
+      useNorm16Texture: Boolean(appConfig.use16BitDataType),
+    },
+  });

  // For debugging e2e tests that are failing on CI
  cornerstone.setUseCPURendering(Boolean(appConfig.useCPURendering));
+
  cornerstone.setConfiguration({
    ...cornerstone.getConfiguration(),
    rendering: {
      ...cornerstone.getConfiguration().rendering,
-      strictZSpacingForVolumeViewport:
-        appConfig.strictZSpacingForVolumeViewport,
+      strictZSpacingForVolumeViewport: appConfig.strictZSpacingForVolumeViewport,
    },
  });

@@ -62,10 +82,7 @@ export default async function init({

  initCornerstoneTools();

-  Settings.getRuntimeSettings().set(
-    'useCursors',
-    Boolean(appConfig.useCursors)
-  );
+  Settings.getRuntimeSettings().set('useCursors', Boolean(appConfig.useCursors));

  const {
    userAuthenticationService,
@@ -76,6 +93,7 @@ export default async function init({
    cornerstoneViewportService,
    hangingProtocolService,
    toolGroupService,
+    toolbarService,
    viewportGridService,
    stateSyncService,
  } = servicesManager.services as CornerstoneServices;
@@ -86,20 +104,18 @@ export default async function init({

  if (
    appConfig.showWarningMessageForCrossOrigin &&
-    !window.crossOriginIsolated
+    !window.crossOriginIsolated &&
+    !sharedArrayBufferDisabled
  ) {
    uiNotificationService.show({
      title: 'Cross Origin Isolation',
      message:
-        'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
+        'Cross Origin Isolation is not enabled, read more about it here: https://docs.ohif.org/faq/',
      type: 'warning',
    });
  }

-  if (
-    appConfig.showCPUFallbackMessage &&
-    cornerstone.getShouldUseCPURendering()
-  ) {
+  if (appConfig.showCPUFallbackMessage && cornerstone.getShouldUseCPURendering()) {
    _showCPURenderingModal(uiModalService, hangingProtocolService);
  }

@@ -119,18 +135,14 @@ export default async function init({
    clearOnModeExit: true,
  });

-  const labelmapRepresentation =
-    cornerstoneTools.Enums.SegmentationRepresentations.Labelmap;
+  const labelmapRepresentation = cornerstoneTools.Enums.SegmentationRepresentations.Labelmap;

-  cornerstoneTools.segmentation.config.setGlobalRepresentationConfig(
-    labelmapRepresentation,
-    {
-      fillAlpha: 0.3,
-      fillAlphaInactive: 0.2,
-      outlineOpacity: 1,
-      outlineOpacityInactive: 0.65,
-    }
-  );
+  cornerstoneTools.segmentation.config.setGlobalRepresentationConfig(labelmapRepresentation, {
+    fillAlpha: 0.3,
+    fillAlphaInactive: 0.2,
+    outlineOpacity: 1,
+    outlineOpacityInactive: 0.65,
+  });

  const metadataProvider = OHIF.classes.MetadataProvider;

@@ -139,14 +151,8 @@ export default async function init({
    cornerstoneStreamingImageVolumeLoader
  );

-  hangingProtocolService.registerImageLoadStrategy(
-    'interleaveCenter',
-    interleaveCenterLoader
-  );
-  hangingProtocolService.registerImageLoadStrategy(
-    'interleaveTopToBottom',
-    interleaveTopToBottom
-  );
+  hangingProtocolService.registerImageLoadStrategy('interleaveCenter', interleaveCenterLoader);
+  hangingProtocolService.registerImageLoadStrategy('interleaveTopToBottom', interleaveTopToBottom);
  hangingProtocolService.registerImageLoadStrategy('nth', nthLoader);

  // add metadata providers
@@ -166,9 +172,7 @@ export default async function init({
  initWADOImageLoader(userAuthenticationService, appConfig, extensionManager);

  /* Measurement Service */
-  this.measurementServiceSource = connectToolsToMeasurementService(
-    servicesManager
-  );
+  this.measurementServiceSource = connectToolsToMeasurementService(servicesManager);

  initCineService(cineService);

@@ -178,31 +182,18 @@ export default async function init({
    volumeInputArrayMap => {
      for (const entry of volumeInputArrayMap.entries()) {
        const [viewportId, volumeInputArray] = entry;
-        const viewport = cornerstoneViewportService.getCornerstoneViewport(
-          viewportId
-        );
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

-        const ohifViewport = cornerstoneViewportService.getViewportInfo(
-          viewportId
-        );
+        const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);

-        const {
-          lutPresentationStore,
-          positionPresentationStore,
-        } = stateSyncService.getState();
+        const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
        const { presentationIds } = ohifViewport.getViewportOptions();
        const presentations = {
-          positionPresentation:
-            positionPresentationStore[presentationIds?.positionPresentationId],
-          lutPresentation:
-            lutPresentationStore[presentationIds?.lutPresentationId],
+          positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
+          lutPresentation: lutPresentationStore[presentationIds?.lutPresentationId],
        };

-        cornerstoneViewportService.setVolumesForViewport(
-          viewport,
-          volumeInputArray,
-          presentations
-        );
+        cornerstoneViewportService.setVolumesForViewport(viewport, volumeInputArray, presentations);
      }
    }
  );
@@ -218,16 +209,50 @@ export default async function init({
    commandsManager,
  });

-  const newStackCallback = evt => {
+  /**
+   * When a viewport gets a new display set, this call will go through all the
+   * active tools in the toolbar, and call any commands registered in the
+   * toolbar service with a callback to re-enable on displaying the viewport.
+   */
+  const toolbarEventListener = evt => {
    const { element } = evt.detail;
-    utilities.stackPrefetch.enable(element);
+    const activeTools = toolbarService.getActiveTools();
+
+    activeTools.forEach(tool => {
+      const toolData = toolbarService.getNestedButton(tool);
+      const commands = toolData?.listeners?.[evt.type];
+      commandsManager.run(commands, { element, evt });
+    });
+  };
+
+  /** Listens for active viewport events and fires the toolbar listeners */
+  const activeViewportEventListener = evt => {
+    const { viewportId } = evt;
+    const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+    const activeTools = toolbarService.getActiveTools();
+
+    activeTools.forEach(tool => {
+      if (!toolGroup?._toolInstances?.[tool]) {
+        return;
+      }
+
+      // check if tool is active on the new viewport
+      const toolEnabled = toolGroup._toolInstances[tool].mode === Enums.ToolModes.Enabled;
+
+      if (!toolEnabled) {
+        return;
+      }
+
+      const button = toolbarService.getNestedButton(tool);
+      const commands = button?.listeners?.[evt.type];
+      commandsManager.run(commands, { viewportId, evt });
+    });
  };

  const resetCrosshairs = evt => {
    const { element } = evt.detail;
-    const { viewportId, renderingEngineId } = cornerstone.getEnabledElement(
-      element
-    );
+    const { viewportId, renderingEngineId } = cornerstone.getEnabledElement(element);

    const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroupForViewport(
      viewportId,
@@ -249,14 +274,16 @@ export default async function init({
    }
  };

+  eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
+    const { element } = evt.detail;
+    cornerstoneTools.utilities.stackContextPrefetch.enable(element);
+  });
+
  function elementEnabledHandler(evt) {
    const { element } = evt.detail;
    element.addEventListener(EVENTS.CAMERA_RESET, resetCrosshairs);

-    eventTarget.addEventListener(
-      EVENTS.STACK_VIEWPORT_NEW_STACK,
-      newStackCallback
-    );
+    eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, toolbarEventListener);
  }

  function elementDisabledHandler(evt) {
@@ -271,47 +298,13 @@ export default async function init({
    // );
  }

-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_ENABLED,
-    elementEnabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));

-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_DISABLED,
-    elementDisabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));

  viewportGridService.subscribe(
-    viewportGridService.EVENTS.ACTIVE_VIEWPORT_INDEX_CHANGED,
-    ({ viewportIndex, viewportId }) => {
-      viewportId = viewportId || `viewport-${viewportIndex}`;
-      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-
-      if (!toolGroup || !toolGroup._toolInstances?.['ReferenceLines']) {
-        return;
-      }
-
-      // check if reference lines are active
-      const referenceLinesEnabled =
-        toolGroup._toolInstances['ReferenceLines'].mode ===
-        Enums.ToolModes.Enabled;
-
-      if (!referenceLinesEnabled) {
-        return;
-      }
-
-      toolGroup.setToolConfiguration(
-        ReferenceLinesTool.toolName,
-        {
-          sourceViewportId: viewportId,
-        },
-        true // overwrite
-      );
-
-      // make sure to set it to enabled again since we want to recalculate
-      // the source-target lines
-      toolGroup.setToolEnabled(ReferenceLinesTool.toolName);
-    }
+    viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
+    activeViewportEventListener
  );
 }

@@ -319,10 +312,9 @@ function CPUModal() {
  return (
    <div>
      <p>
-        Your computer does not have enough GPU power to support the default GPU
-        rendering mode. OHIF has switched to CPU rendering mode. Please note
-        that CPU rendering does not support all features such as Volume
-        Rendering, Multiplanar Reconstruction, and Segmentation Overlays.
+        Your computer does not have enough GPU power to support the default GPU rendering mode. OHIF
+        has switched to CPU rendering mode. Please note that CPU rendering does not support all
+        features such as Volume Rendering, Multiplanar Reconstruction, and Segmentation Overlays.
      </p>
    </div>
  );
@@ -18,6 +18,7 @@ const DEFAULT_CONTEXT_MENU_CLICKS = {
      {
        commandName: 'showCornerstoneContextMenu',
        commandOptions: {
+          requireNearbyToolData: true,
          menuId: 'measurementsContextMenu',
        },
      },
@@ -60,12 +61,22 @@ function initContextMenu({
   */
  const cornerstoneViewportHandleEvent = (name, evt) => {
    const customizations =
-      customizationService.get('cornerstoneViewportClickCommands') ||
-      DEFAULT_CONTEXT_MENU_CLICKS;
+      customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_CONTEXT_MENU_CLICKS;
    const toRun = customizations[name];
-    console.log('initContextMenu::cornerstoneViewportHandleEvent', name, toRun);
+
+    if (!toRun) {
+      return;
+    }
+
+    // only find nearbyToolData if required, for the click (which closes the context menu
+    // we don't need to find nearbyToolData)
+    let nearbyToolData = null;
+    if (toRun.commands.some(command => command.commandOptions?.requireNearbyToolData)) {
+      nearbyToolData = findNearbyToolData(commandsManager, evt);
+    }
+
    const options = {
-      nearbyToolData: findNearbyToolData(commandsManager, evt),
+      nearbyToolData,
      event: evt,
    };
    commandsManager.run(toRun, options);
@@ -82,34 +93,21 @@ function initContextMenu({
    if (!viewportInfo) {
      return;
    }
-    const viewportIndex = viewportInfo.getViewportIndex();
    // TODO check update upstream
-    setEnabledElement(viewportIndex, element);
+    setEnabledElement(viewportId, element);

-    element.addEventListener(
-      cs3DToolsEvents.MOUSE_CLICK,
-      cornerstoneViewportHandleClick
-    );
+    element.addEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
  }

  function elementDisabledHandler(evt) {
    const { element } = evt.detail;

-    element.removeEventListener(
-      cs3DToolsEvents.MOUSE_CLICK,
-      cornerstoneViewportHandleClick
-    );
+    element.removeEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
  }

-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_ENABLED,
-    elementEnabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));

-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_DISABLED,
-    elementDisabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
 }

 export default initContextMenu;
@@ -25,9 +25,13 @@ import {
  annotation,
  ReferenceLinesTool,
  TrackballRotateTool,
+  CircleScissorsTool,
+  RectangleScissorsTool,
+  SphereScissorsTool,
 } from '@cornerstonejs/tools';

 import CalibrationLineTool from './tools/CalibrationLineTool';
+import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';

 export default function initCornerstoneTools(configuration = {}) {
  CrosshairsTool.isAnnotation = false;
@@ -58,6 +62,10 @@ export default function initCornerstoneTools(configuration = {}) {
  addTool(ReferenceLinesTool);
  addTool(CalibrationLineTool);
  addTool(TrackballRotateTool);
+  addTool(CircleScissorsTool);
+  addTool(RectangleScissorsTool);
+  addTool(SphereScissorsTool);
+  addTool(ImageOverlayViewerTool);

  // Modify annotation tools to use dashed lines on SR
  const annotationStyle = {
@@ -99,6 +107,10 @@ const toolNames = {
  ReferenceLines: ReferenceLinesTool.toolName,
  CalibrationLine: CalibrationLineTool.toolName,
  TrackballRotateTool: TrackballRotateTool.toolName,
+  CircleScissors: CircleScissorsTool.toolName,
+  RectangleScissors: RectangleScissorsTool.toolName,
+  SphereScissors: SphereScissorsTool.toolName,
+  ImageOverlayViewer: ImageOverlayViewerTool.toolName,
 };

 export { toolNames };
@@ -39,10 +39,7 @@ export type initDoubleClickArgs = {
  commandsManager: CommandsManager;
 };

-function initDoubleClick({
-  customizationService,
-  commandsManager,
-}: initDoubleClickArgs): void {
+function initDoubleClick({ customizationService, commandsManager }: initDoubleClickArgs): void {
  const cornerstoneViewportHandleDoubleClick = (evt: CustomEvent) => {
    // Do not allow double click on a tool.
    const nearbyToolData = findNearbyToolData(commandsManager, evt);
@@ -54,8 +51,7 @@ function initDoubleClick({

    // Allows for the customization of the double click on a viewport.
    const customizations =
-      customizationService.get('cornerstoneViewportClickCommands') ||
-      DEFAULT_DOUBLE_CLICK;
+      customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_DOUBLE_CLICK;

    const toRun = customizations[eventName];

@@ -84,15 +80,9 @@ function initDoubleClick({
    );
  }

-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_ENABLED,
-    elementEnabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));

-  eventTarget.addEventListener(
-    EVENTS.ELEMENT_DISABLED,
-    elementDisabledHandler.bind(null)
-  );
+  eventTarget.addEventListener(EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
 }

 export default initDoubleClick;
Author	SHA1	Message	Date
ohif-bot	1b207f14d2	chore(version): Update package versions [skip ci]	2023-10-03 19:28:23 +00:00
ohif-bot	38cd3d8afc	chore(version): version.json [skip ci]	2023-10-03 19:28:14 +00:00
AlirezaandOuwen Huang	5e7fe91617	feat(displayArea): add display area to hanging protocol (#3691 ) Co-authored-by: Ouwen Huang <ouwen.oh@gmail.com>	2023-10-03 15:18:15 -04:00
ohif-bot	64f68f58c2	chore(version): Update package versions [skip ci]	2023-10-03 18:36:48 +00:00
ohif-bot	49bc346661	chore(version): version.json [skip ci]	2023-10-03 18:36:39 +00:00
Yaroslav Halchenko	5cc1dc9b9c	docs(links): Adding references to two used markdown links (#3650 )	2023-10-03 14:26:31 -04:00
ohif-bot	2a086a699a	chore(version): Update package versions [skip ci]	2023-10-03 18:12:49 +00:00
ohif-bot	58f214bca5	chore(version): version.json [skip ci]	2023-10-03 18:12:41 +00:00
rodrigobasilio2022	4dc2acdefa	fix(editing): regression bug in disable editing (#3687 )	2023-10-03 14:02:21 -04:00
ohif-bot	4c88a4a2fd	chore(version): Update package versions [skip ci]	2023-10-03 16:35:17 +00:00
ohif-bot	06facd8ea2	chore(version): version.json [skip ci]	2023-10-03 16:35:08 +00:00
Edward Sonandedward65	eb22328fc0	fix(typescript error): Change pubSubServiceInterface file type to typescript (#3546 ) Co-authored-by: edward65 <edward@afxmedical.com>	2023-10-03 12:23:40 -04:00
ohif-bot	b33ad0c7e9	chore(version): Update package versions [skip ci]	2023-10-03 15:55:03 +00:00
ohif-bot	3415cf909f	chore(version): version.json [skip ci]	2023-10-03 15:54:54 +00:00
Joe BoccanfusoandAlireza	e36a604331	fix(dicom overlay): Handle special cases of ArrayBuffer for various DICOM overlay attributes. (#3684 ) Co-authored-by: Alireza <ar.sedghi@gmail.com>	2023-10-03 11:44:56 -04:00
Bill Wallace	8a335bd03d	fix(StackSync): Miscellaneous fixes for stack image sync (#3663 )	2023-10-03 10:59:09 -04:00
ohif-bot	b3429729f1	chore(version): Update package versions [skip ci]	2023-10-03 14:22:22 +00:00
ohif-bot	e2e806f188	chore(version): version.json [skip ci]	2023-10-03 14:22:12 +00:00
Alireza	1129c155d2	fix(config): support more values for the useSharedArrayBuffer (#3688 )	2023-10-03 10:11:32 -04:00
ohif-bot	c9c57b04d3	chore(version): Update package versions [skip ci]	2023-09-29 22:04:50 +00:00
ohif-bot	d09938b72a	chore(version): version.json [skip ci]	2023-09-29 22:04:41 +00:00
Alireza	a67d72de85	fix(no sab): should work when shared array buffer is not required (#3686 )	2023-09-29 17:54:16 -04:00
ohif-bot	3dabee2342	chore(version): Update package versions [skip ci]	2023-09-29 14:51:58 +00:00
ohif-bot	66abdace30	chore(version): version.json [skip ci]	2023-09-29 14:51:49 +00:00
Joe BoccanfusoandAlireza	dc73b18748	fix(cli): various fixes for adding custom modes and extensions (#3683 ) Co-authored-by: Alireza <ar.sedghi@gmail.com>	2023-09-29 10:35:30 -04:00
ohif-bot	52da92fed4	chore(version): Update package versions [skip ci]	2023-09-26 20:58:57 +00:00
ohif-bot	cfbb3cfded	chore(version): version.json [skip ci]	2023-09-26 20:58:49 +00:00
Joe Boccanfuso	86f54d0d07	fix(toggleOneUp): fixed one up for main tmtv layout (#3677 )	2023-09-26 16:49:06 -04:00
ohif-bot	485cf037a1	chore(version): Update package versions [skip ci]	2023-09-26 19:38:00 +00:00
ohif-bot	3d38122b84	chore(version): version.json [skip ci]	2023-09-26 19:37:51 +00:00
Alireza	8feb5ee3f9	chore(publish): fix timeout problem without lerna (#3679 )	2023-09-26 15:27:24 -04:00
ohif-bot	1f906963e7	chore(version): Update package versions [skip ci]	2023-09-26 15:54:37 +00:00
ohif-bot	9a4aa1a5aa	chore(version): version.json [skip ci]	2023-09-26 15:54:28 +00:00
Alireza	fcd323fa8c	chore(publish): fix timeout problem (#3678 )	2023-09-26 11:43:37 -04:00
ohif-bot	b6e33224c8	chore(version): Update package versions [skip ci]	2023-09-26 13:03:46 +00:00
ohif-bot	b8e519a4a9	chore(version): version.json [skip ci]	2023-09-26 13:03:37 +00:00
Alireza	0bf9949f45	chore(build): try to publish to npm again (#3676 )	2023-09-26 08:53:40 -04:00
ohif-bot	3431b103e2	chore(version): Update package versions [skip ci]	2023-09-26 03:23:59 +00:00
ohif-bot	00918d86d3	chore(version): version.json [skip ci]	2023-09-26 03:23:52 +00:00
Alireza	c86b129f58	chore(build): try to publish to npm (#3675 )	2023-09-25 23:13:43 -04:00
ohif-bot	10ca35d5f4	chore(version): Update package versions [skip ci]	2023-09-22 20:00:44 +00:00
ohif-bot	a308f7b4b6	chore(version): version.json [skip ci]	2023-09-22 20:00:36 +00:00
Sofien-Sellami	04ca10d877	fix(react-select): update react select package (#3622 )	2023-09-22 15:48:12 -04:00
Joe Boccanfuso	85c899b399	feat(SidePanel): new side panel tab look-and-feel (#3657 )	2023-09-22 15:36:44 -04:00
Alireza	48bbd6281a	feat(segmentation mode): Add create, and export SEG with Brushes (#3632 )	2023-09-22 10:23:44 -04:00
ohif-bot	896866e9d0	chore(version): Update package versions [skip ci]	2023-09-22 13:40:25 +00:00
ohif-bot	a02a5ded9a	chore(version): version.json [skip ci]	2023-09-22 13:40:16 +00:00
AlirezaandOuwen Huang	2bd3b26a6a	perf(memory): add 16 bit texture via configuration - reduces memory by half (#3662 ) Co-authored-by: Ouwen Huang <ouwen.huang@duke.edu>	2023-09-22 09:31:45 -04:00
ohif-bot	034a6d7696	chore(version): Update package versions [skip ci]	2023-09-21 20:53:19 +00:00
ohif-bot	2fc28978da	chore(version): version.json [skip ci]	2023-09-21 20:53:11 +00:00
Joe Boccanfuso	221dedde5d	fix(mpr): Return the original/raw hanging protocol when fetching and preserving the current active protocol. (#3670 )	2023-09-21 16:45:15 -04:00
ohif-bot	807bd663b3	chore(version): Update package versions [skip ci]	2023-09-21 11:38:01 +00:00
ohif-bot	0318504597	chore(version): version.json [skip ci]	2023-09-21 11:37:54 +00:00
Alireza	d609ae1edb	docs(url): fix incorrect url param in the doc (#3667 )	2023-09-21 07:30:01 -04:00
ohif-bot	2132f0777e	chore(version): Update package versions [skip ci]	2023-09-19 14:19:42 +00:00
ohif-bot	10ecd4997b	chore(version): version.json [skip ci]	2023-09-19 14:19:34 +00:00
AlirezaandJoe Boccanfuso	2d7721cb58	fix(keyCloak): fix openresty keycloak deployment recipe (#3655 ) Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>	2023-09-19 10:11:32 -04:00
ohif-bot	c49b833274	chore(version): Update package versions [skip ci]	2023-09-18 15:10:25 +00:00
ohif-bot	3279df543f	chore(version): version.json [skip ci]	2023-09-18 15:10:17 +00:00
Joe Boccanfuso	2737903386	fix(DicomJson): retrieve.series.metadata method should be async (#3659 )	2023-09-18 11:02:27 -04:00
ohif-bot	9ccdaef812	chore(version): Update package versions [skip ci]	2023-09-15 14:58:43 +00:00
ohif-bot	8c6764a936	chore(version): version.json [skip ci]	2023-09-15 14:58:36 +00:00
Bill Wallace	38af3112ec	fix(measurements): Update the calibration tool to match changes in CS3D (#3505 ) This change makes the OHIF side consistent with the CS3D user calibration settings, and will correctly display px and rounding values consistent with the CS3D display.	2023-09-15 10:50:23 -04:00
ohif-bot	bd7f9592ea	chore(version): Update package versions [skip ci]	2023-09-12 14:38:15 +00:00
ohif-bot	fd74e46280	chore(version): version.json [skip ci]	2023-09-12 14:38:08 +00:00
Ibrahim	74e62a1763	fix(health imaging): studies not loading from healthimaging if imagepositionpatient is missing (#3646 )	2023-09-12 10:30:02 -04:00
ohif-bot	7eda0c5f46	chore(version): Update package versions [skip ci]	2023-09-12 11:49:05 +00:00
ohif-bot	15e1af2526	chore(version): version.json [skip ci]	2023-09-12 11:48:58 +00:00
Yaroslav Halchenko	11ca5b6eae	docs(spelling): Add codespell config + github action, run and fix a good number of typos (#3645 )	2023-09-12 07:40:38 -04:00
ohif-bot	64079e0720	chore(version): Update package versions [skip ci]	2023-09-12 02:02:13 +00:00
ohif-bot	7f683a336b	chore(version): version.json [skip ci]	2023-09-12 02:02:04 +00:00
Joe Boccanfuso	0d10f46b88	fix(suv): import calculate-suv library version that prevents SUV calculation for a zero PatientWeight (#3638 )	2023-09-11 21:50:32 -04:00
ohif-bot	ca19baeafd	chore(version): Update package versions [skip ci]	2023-09-12 01:39:48 +00:00
ohif-bot	3e73ddf4c1	chore(version): version.json [skip ci]	2023-09-12 01:39:41 +00:00
lokeshnano	c0fb2b4892	chore(gitignore): add vercel ignore (#3640 )	2023-09-11 21:32:22 -04:00
ohif-bot	2a7787132a	chore(version): Update package versions [skip ci]	2023-09-11 14:40:31 +00:00
ohif-bot	3cc35e7ed5	chore(version): version.json [skip ci]	2023-09-11 14:40:22 +00:00
Joe Boccanfuso	de0a742733	chore(prettier): fix end-of-line warnings (#3642 )	2023-09-11 10:31:40 -04:00
ohif-bot	c158279a53	chore(version): Update package versions [skip ci]	2023-09-11 13:19:30 +00:00
ohif-bot	12acc396d6	chore(version): version.json [skip ci]	2023-09-11 13:19:23 +00:00
Joe Boccanfuso	a6e668f8d4	docs(google cloud healthcare): Added recipe docs for setting up Google Cloud Healthcare API (#3641 )	2023-09-11 09:11:25 -04:00
ohif-bot	6dd74b6371	chore(version): Update package versions [skip ci]	2023-09-06 18:17:59 +00:00
ohif-bot	908fb8e14f	chore(version): version.json [skip ci]	2023-09-06 18:17:50 +00:00
Alireza	94f7cfb08e	fix(hotkeys): preserve hotkeys if changed, and reduce re-rendering (#3635 )	2023-09-06 14:09:26 -04:00
ohif-bot	6c8364835b	chore(version): Update package versions [skip ci]	2023-09-06 13:53:48 +00:00
ohif-bot	a39929d4d5	chore(version): version.json [skip ci]	2023-09-06 13:53:40 +00:00
Salim Kanoun	dd6a8812d1	export(checkbox): add missing checkbox export (#3629 )	2023-09-06 09:46:01 -04:00
ohif-bot	ce72929367	chore(version): Update package versions [skip ci]	2023-09-06 13:34:21 +00:00
ohif-bot	38ab1ae5a6	chore(version): version.json [skip ci]	2023-09-06 13:34:13 +00:00
M.DandJoe Boccanfuso	69115da06d	feat(ImageOverlayViewerTool): add ImageOverlayViewer tool that can render image overlay (pixel overlay) of the DICOM images (#3163 ) Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>	2023-09-06 09:24:17 -04:00
ohif-bot	ef58893c27	chore(version): Update package versions [skip ci]	2023-09-05 17:13:27 +00:00
ohif-bot	7987f0effa	chore(version): version.json [skip ci]	2023-09-05 17:13:19 +00:00
Joe BoccanfusoandAlireza	3ce72254b3	fix(nginx archive recipe): Fixes to various configuration files. (#3624 ) Co-authored-by: Alireza <ar.sedghi@gmail.com>	2023-09-05 13:05:36 -04:00
ohif-bot	6d47dce4dd	chore(version): Update package versions [skip ci]	2023-09-01 20:26:45 +00:00
ohif-bot	f7cddd0842	chore(version): version.json [skip ci]	2023-09-01 20:26:38 +00:00
Alireza	9045ddaedc	chore(prettier): full repo linting and code reformatting once and for all (#3627 )	2023-09-01 16:19:39 -04:00
ohif-bot	01500a2d4c	chore(version): version.json [skip ci]	2023-08-30 22:46:26 +00:00
Alireza	b170e7f5ae	chore(prettier): update prettier to fix publish (#3623 )	2023-08-30 18:38:57 -04:00
ohif-bot	2d7da9c0bb	chore(version): version.json [skip ci]	2023-08-30 20:54:03 +00:00
AlirezaandBill Wallace	4c6ff873e8	feat(grid): remove viewportIndex and only rely on viewportId (#3591 ) Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>	2023-08-30 16:46:55 -04:00
ohif-bot	5dafac7c92	chore(version): Update package versions [skip ci]	2023-08-30 13:38:56 +00:00
ohif-bot	7ecaf0da5d	chore(version): version.json [skip ci]	2023-08-30 13:38:49 +00:00
Joe Boccanfuso	adedc8c382	feat(data source UI config): Popup the configuration dialogue whenever a data source is not fully configured (#3620 )	2023-08-30 09:27:48 -04:00
ohif-bot	5856ae2464	chore(version): Update package versions [skip ci]	2023-08-29 16:44:37 +00:00
ohif-bot	84b7de5d96	chore(version): version.json [skip ci]	2023-08-29 16:44:29 +00:00
mccle	35fc30c535	fix(OpenIdConnectRoutes): fix handleUnauthenticated (#3617 )	2023-08-29 12:36:41 -04:00
ohif-bot	eafc716d00	chore(version): Update package versions [skip ci]	2023-08-29 16:33:17 +00:00
ohif-bot	88d695cf4f	chore(version): version.json [skip ci]	2023-08-29 16:33:10 +00:00
Joe Boccanfuso	44f101d3f2	fix(PT Metadata): Allow for PatientWeight to be missing from the metadata (#3621 )	2023-08-29 12:21:21 -04:00
ohif-bot	a9d6869198	chore(version): Update package versions [skip ci]	2023-08-29 15:27:52 +00:00
ohif-bot	77c102f993	chore(version): version.json [skip ci]	2023-08-29 15:27:46 +00:00
dxlin	75f61f85fe	fi(buffer): buffer undefined (#3590 )	2023-08-29 11:20:01 -04:00
ohif-bot	9fbdf37f44	chore(version): Update package versions [skip ci]	2023-08-25 18:27:00 +00:00
ohif-bot	7ecd2f1628	chore(version): version.json [skip ci]	2023-08-25 18:26:53 +00:00
Joe Boccanfuso	a336992971	feat(cloud data source config): GUI and API for configuring a cloud data source with Google cloud healthcare implementation (#3589 )	2023-08-25 14:19:17 -04:00
ohif-bot	a2ef2b0fcb	chore(version): Update package versions [skip ci]	2023-08-23 13:43:54 +00:00
ohif-bot	eb57c2f8bd	chore(version): version.json [skip ci]	2023-08-23 13:43:46 +00:00
Alireza	65b49aeb1b	fix(memory leak): array buffer was sticking around in volume viewports (#3611 )	2023-08-23 09:35:44 -04:00
@@ -1 +1 @@
 .14.0
 .16.1