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

chore(version): version.json [skip ci]
feat(v3p7): segmentation mode and cloud server configuration (#3720 )
2023-10-11 16:59:05 +00:00 · 2023-10-11 16:58:56 +00:00 · 2023-10-11 12:49:12 -04:00 · 2023-10-11 12:18:10 -04:00 · 2023-06-07 20:01:22 +00:00 · 2023-06-07 20:01:18 +00:00
1472 changed files with 18180 additions and 83699 deletions
@@ -13,7 +13,7 @@ version: 2.1
 ##
 orbs:
  codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@3.3.1
+  cypress: cypress-io/cypress@3.1.4

 executors:
  cypress-custom:
@@ -42,7 +42,6 @@ jobs:
  ###
  UNIT_TESTS:
    <<: *defaults
-    resource_class: large
    steps:
      # Update yarn
      - run: yarn -v
@@ -99,7 +98,6 @@ jobs:
  ###
  BUILD:
    <<: *defaults
-    resource_class: large
    steps:
      # Checkout code and ALL Git Tags
      - checkout
@@ -148,7 +146,6 @@ jobs:
  # just to make sure later on we can publish them
  BUILD_PACKAGES_QUICK:
    <<: *defaults
-    resource_class: large
    steps:
      - run: yarn -v
      # Checkout code and ALL Git Tags
@@ -198,7 +195,6 @@ jobs:
  ###
  NPM_PUBLISH:
    <<: *defaults
-    resource_class: large
    steps:
      - run: yarn -v
      # Checkout code and ALL Git Tags
@@ -268,7 +264,6 @@ jobs:

  DOCKER_RELEASE_PUBLISH:
    <<: *defaults
-    resource_class: large
    steps:
      - attach_workspace:
          at: ~/repo
@@ -298,7 +293,6 @@ jobs:

  DOCKER_BETA_PUBLISH:
    <<: *defaults
-    resource_class: large
    steps:
      - attach_workspace:
          at: ~/repo
@@ -403,7 +397,6 @@ jobs:
        default: ''
        description: Directory containing package.json
        type: string
-    resource_class: large
    steps:
      - cypress/install:
          cypress-cache-key: << parameters.cypress-cache-key >>
@@ -502,18 +495,13 @@ workflows:
      - BUILD:
          filters:
            branches:
-              only: /^release\/.*/
-      - HOLD_FOR_APPROVAL:
-          type: approval
-          requires:
-            - BUILD
+              only: release
      - NPM_PUBLISH:
          requires:
-            - HOLD_FOR_APPROVAL
+            - BUILD
      - DOCKER_RELEASE_PUBLISH:
          requires:
            - NPM_PUBLISH
-
  ###
  # Unit and E2E tests have already run for PR_CHECKS
  # Re-running should not gain us any confidence here
@@ -0,0 +1,25 @@
+# ABOUT:
+# https://docs.codecov.io/docs/codecov-yaml
+#
+#
+# COMMIT STATUS:
+# https://docs.codecov.io/docs/commit-status
+coverage:
+  status:
+    project:
+      default:
+        threshold: 0.5%
+      core:
+        flags: core
+        threshold: 0.5%
+      viewer:
+        flags: viewer
+        threshold: 0.5%
+    patch: off
+flags:
+  core:
+    paths:
+      - platform/core
+  viewer:
+    paths:
+      - platform/app
@@ -0,0 +1 @@
+PERCY_TOKEN=<your token here>
@@ -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
@@ -1,63 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [main, master]
-  pull_request:
-    branches: [main, master]
-jobs:
-  playwright-tests:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        shardIndex: [1, 2, 3, 4, 5]
-        shardTotal: [5]
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-      - name: Run Playwright tests
-        run: export NODE_OPTIONS="--max_old_space_size=8192" && npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
-
-      - name: Upload blob report to GitHub Actions Artifacts
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: blob-report-${{ matrix.shardIndex }}
-          path: blob-report
-          retention-days: 1
-
-  merge-reports:
-    if: ${{ !cancelled() }}
-    needs: [playwright-tests]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: all-blob-reports
-          pattern: blob-report-*
-          merge-multiple: true
-
-      - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
-
-      - name: Upload HTML report
-        uses: actions/upload-artifact@v4
-        with:
-          name: html-report--attempt-${{ github.run_attempt }}
-          path: playwright-report
-          retention-days: 14
@@ -10,8 +10,6 @@ junit.xml
 coverage/
 .docz/
 .yarn/
-.nx/
-addOns/yarn.lock

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

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

 # Cypress test results
 videos/
-
+screenshots/

 # Locize settings
 .locize
@@ -48,11 +45,3 @@ platform/app/.recipes/OpenResty-Orthanc/logs/*
 .vercel

 .vs
-
-# PlayWright
-
-node_modules/
-tests/test-results/
-tests/playwright-report/
-/blob-report/
-/playwright/.cache/
@@ -1,265 +0,0 @@
-/*
- * This script uses nodejs to generate a JSON file from a DICOM study folder.
- * You need to have dcmjs installed in your project.
- * The JSON file can be used to load the study into the OHIF Viewer. You can get more detail
- * in the DICOM JSON Data source on docs.ohif.org
- *
- * Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath>
- *
- * params:
- * - studyFolder: path to the study folder
- * - urlPrefix: prefix to the url that will be used to load the study into the viewer. For instance
- *   we use https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data as the urlPrefix for the
- *   example since the data is hosted on S3 and each study is in a folder. So the url in the generated
- *   json file for the first instance of the first series of the first study will be
- *   dicomweb:https://ohif-assets.s3.us-east-2.amazonaws.com/dicom-json/data/Series1/Instance1
- * - outputJSONPath: path to the output JSON file
- */
-const dcmjs = require('dcmjs');
-const path = require('path');
-const fs = require('fs').promises;
-
-const args = process.argv.slice(2);
-const [studyDirectory, urlPrefix, outputPath] = args;
-
-if (args.length !== 3) {
-  console.error('Usage: node dicomStudyToJSONLaunch.js <studyFolder> <urlPrefix> <outputJSONPath>');
-  process.exit(1);
-}
-
-const model = {
-  studies: [],
-};
-
-async function convertDICOMToJSON(studyDirectory, urlPrefix, outputPath) {
-  try {
-    const files = await recursiveReadDir(studyDirectory);
-    console.debug('Processing...');
-
-    for (const file of files) {
-      if (!file.includes('.DS_Store') && !file.includes('.xml')) {
-        const arrayBuffer = await fs.readFile(file);
-        const dicomDict = dcmjs.data.DicomMessage.readFile(arrayBuffer.buffer);
-        const instance = dcmjs.data.DicomMetaDictionary.naturalizeDataset(dicomDict.dict);
-
-        instance.fileLocation = createImageId(file, urlPrefix, studyDirectory);
-        processInstance(instance);
-      }
-    }
-
-    console.log('Successfully loaded data');
-
-    model.studies.forEach(study => {
-      study.NumInstances = findInstancesNumber(study);
-      study.Modalities = findModalities(study).join('/');
-    });
-
-    await fs.writeFile(outputPath, JSON.stringify(model, null, 2));
-    console.log('JSON saved');
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-async function recursiveReadDir(dir) {
-  let results = [];
-  const list = await fs.readdir(dir);
-  for (const file of list) {
-    const filePath = path.resolve(dir, file);
-    const stat = await fs.stat(filePath);
-    if (stat.isDirectory()) {
-      const res = await recursiveReadDir(filePath);
-      results = results.concat(res);
-    } else {
-      results.push(filePath);
-    }
-  }
-  return results;
-}
-
-function createImageId(fileLocation, urlPrefix, studyDirectory) {
-  const relativePath = path.relative(studyDirectory, fileLocation);
-  const normalizedPath = path.normalize(relativePath).replace(/\\/g, '/');
-  return `dicomweb:${urlPrefix}${normalizedPath}`;
-}
-
-function processInstance(instance) {
-  const { StudyInstanceUID, SeriesInstanceUID } = instance;
-  let study = getStudy(StudyInstanceUID);
-
-  if (!study) {
-    study = createStudyMetadata(StudyInstanceUID, instance);
-    model.studies.push(study);
-  }
-
-  let series = getSeries(StudyInstanceUID, SeriesInstanceUID);
-
-  if (!series) {
-    series = createSeriesMetadata(instance);
-    study.series.push(series);
-  }
-
-  const instanceMetaData =
-    instance.NumberOfFrames > 1
-      ? createInstanceMetaDataMultiFrame(instance)
-      : createInstanceMetaData(instance);
-
-  series.instances.push(...[].concat(instanceMetaData));
-}
-
-function getStudy(StudyInstanceUID) {
-  return model.studies.find(study => study.StudyInstanceUID === StudyInstanceUID);
-}
-
-function getSeries(StudyInstanceUID, SeriesInstanceUID) {
-  const study = getStudy(StudyInstanceUID);
-  return study
-    ? study.series.find(series => series.SeriesInstanceUID === SeriesInstanceUID)
-    : undefined;
-}
-
-const findInstancesNumber = study => {
-  let numInstances = 0;
-  study.series.forEach(aSeries => {
-    numInstances = numInstances + aSeries.instances.length;
-  });
-  return numInstances;
-};
-
-const findModalities = study => {
-  let modalities = new Set();
-  study.series.forEach(aSeries => {
-    modalities.add(aSeries.Modality);
-  });
-  return Array.from(modalities);
-};
-
-function createStudyMetadata(StudyInstanceUID, instance) {
-  return {
-    StudyInstanceUID,
-    StudyDescription: instance.StudyDescription,
-    StudyDate: instance.StudyDate,
-    StudyTime: instance.StudyTime,
-    PatientName: instance.PatientName,
-    PatientID: instance.PatientID || '1234', // this is critical to have
-    AccessionNumber: instance.AccessionNumber,
-    PatientAge: instance.PatientAge,
-    PatientSex: instance.PatientSex,
-    PatientWeight: instance.PatientWeight,
-    series: [],
-  };
-}
-function createSeriesMetadata(instance) {
-  return {
-    SeriesInstanceUID: instance.SeriesInstanceUID,
-    SeriesDescription: instance.SeriesDescription,
-    SeriesNumber: instance.SeriesNumber,
-    SeriesTime: instance.SeriesTime,
-    Modality: instance.Modality,
-    SliceThickness: instance.SliceThickness,
-    instances: [],
-  };
-}
-function commonMetaData(instance) {
-  return {
-    Columns: instance.Columns,
-    Rows: instance.Rows,
-    InstanceNumber: instance.InstanceNumber,
-    SOPClassUID: instance.SOPClassUID,
-    AcquisitionNumber: instance.AcquisitionNumber,
-    PhotometricInterpretation: instance.PhotometricInterpretation,
-    BitsAllocated: instance.BitsAllocated,
-    BitsStored: instance.BitsStored,
-    PixelRepresentation: instance.PixelRepresentation,
-    SamplesPerPixel: instance.SamplesPerPixel,
-    PixelSpacing: instance.PixelSpacing,
-    HighBit: instance.HighBit,
-    ImageOrientationPatient: instance.ImageOrientationPatient,
-    ImagePositionPatient: instance.ImagePositionPatient,
-    FrameOfReferenceUID: instance.FrameOfReferenceUID,
-    ImageType: instance.ImageType,
-    Modality: instance.Modality,
-    SOPInstanceUID: instance.SOPInstanceUID,
-    SeriesInstanceUID: instance.SeriesInstanceUID,
-    StudyInstanceUID: instance.StudyInstanceUID,
-    WindowCenter: instance.WindowCenter,
-    WindowWidth: instance.WindowWidth,
-    RescaleIntercept: instance.RescaleIntercept,
-    RescaleSlope: instance.RescaleSlope,
-  };
-}
-
-function conditionalMetaData(instance) {
-  return {
-    ...(instance.ConceptNameCodeSequence && {
-      ConceptNameCodeSequence: instance.ConceptNameCodeSequence,
-    }),
-    ...(instance.SeriesDate && { SeriesDate: instance.SeriesDate }),
-    ...(instance.ReferencedSeriesSequence && {
-      ReferencedSeriesSequence: instance.ReferencedSeriesSequence,
-    }),
-    ...(instance.SharedFunctionalGroupsSequence && {
-      SharedFunctionalGroupsSequence: instance.SharedFunctionalGroupsSequence,
-    }),
-    ...(instance.PerFrameFunctionalGroupsSequence && {
-      PerFrameFunctionalGroupsSequence: instance.PerFrameFunctionalGroupsSequence,
-    }),
-    ...(instance.ContentSequence && { ContentSequence: instance.ContentSequence }),
-    ...(instance.ContentTemplateSequence && {
-      ContentTemplateSequence: instance.ContentTemplateSequence,
-    }),
-    ...(instance.CurrentRequestedProcedureEvidenceSequence && {
-      CurrentRequestedProcedureEvidenceSequence: instance.CurrentRequestedProcedureEvidenceSequence,
-    }),
-    ...(instance.CodingSchemeIdentificationSequence && {
-      CodingSchemeIdentificationSequence: instance.CodingSchemeIdentificationSequence,
-    }),
-    ...(instance.RadiopharmaceuticalInformationSequence && {
-      RadiopharmaceuticalInformationSequence: instance.RadiopharmaceuticalInformationSequence,
-    }),
-    ...(instance.ROIContourSequence && {
-      ROIContourSequence: instance.ROIContourSequence,
-    }),
-    ...(instance.StructureSetROISequence && {
-      StructureSetROISequence: instance.StructureSetROISequence,
-    }),
-    ...(instance.ReferencedFrameOfReferenceSequence && {
-      ReferencedFrameOfReferenceSequence: instance.ReferencedFrameOfReferenceSequence,
-    }),
-    ...(instance.CorrectedImage && { CorrectedImage: instance.CorrectedImage }),
-    ...(instance.Units && { Units: instance.Units }),
-    ...(instance.DecayCorrection && { DecayCorrection: instance.DecayCorrection }),
-    ...(instance.AcquisitionDate && { AcquisitionDate: instance.AcquisitionDate }),
-    ...(instance.AcquisitionTime && { AcquisitionTime: instance.AcquisitionTime }),
-    ...(instance.PatientWeight && { PatientWeight: instance.PatientWeight }),
-    ...(instance.NumberOfFrames && { NumberOfFrames: instance.NumberOfFrames }),
-    ...(instance.FrameTime && { FrameTime: instance.FrameTime }),
-    ...(instance.EncapsulatedDocument && { EncapsulatedDocument: instance.EncapsulatedDocument }),
-    ...(instance.SequenceOfUltrasoundRegions && {
-      SequenceOfUltrasoundRegions: instance.SequenceOfUltrasoundRegions,
-    }),
-  };
-}
-
-function createInstanceMetaData(instance) {
-  const metadata = {
-    ...commonMetaData(instance),
-    ...conditionalMetaData(instance),
-  };
-  return { metadata, url: instance.fileLocation };
-}
-
-function createInstanceMetaDataMultiFrame(instance) {
-  const instances = [];
-  const commonData = commonMetaData(instance);
-  const conditionalData = conditionalMetaData(instance);
-
-  for (let i = 1; i <= instance.NumberOfFrames; i++) {
-    const metadata = { ...commonData, ...conditionalData };
-    const result = { metadata, url: instance.fileLocation + `?frame=${i}` };
-    instances.push(result);
-  }
-  return instances;
-}
-
-convertDICOMToJSON(studyDirectory, urlPrefix, outputPath);
@@ -31,6 +31,6 @@
  "prettier.endOfLine": "lf",
  "workbench.colorCustomizations": {},
  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": true
  }
 }
@@ -7,7 +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
@@ -19,8 +19,6 @@ const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
 const cssToJavaScript = require('./rules/cssToJavaScript.js');
 const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-

 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
@@ -100,46 +98,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
    module: {
      noParse: [/(codec)/, /(dicomicc)/],
      rules: [
-        ...(isProdBuild ? [] : [{
-          test: /\.[jt]sx?$/,
-          exclude: /node_modules/,
-          loader: 'babel-loader',
-          options: {
-            plugins: ['react-refresh/babel'],
-          },
-        }]),
-        {
-          test: /\.svg?$/,
-          oneOf: [
-            {
-              use: [
-                {
-                  loader: '@svgr/webpack',
-                  options: {
-                    svgoConfig: {
-                      plugins: [
-                        {
-                          name: 'preset-default',
-                          params: {
-                            overrides: {
-                              removeViewBox: false
-                            },
-                          },
-                        },
-                      ]
-                    },
-                    prettier: false,
-                    svgo: true,
-                    titleProp: true,
-                  },
-                },
-              ],
-              issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-              },
-            },
-          ],
-        },
        {
          test: /\.js$/,
          enforce: 'pre',
@@ -162,17 +120,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
          test: /\.wasm/,
          type: 'asset/resource',
        },
-        {
-          test: /\.(png|jpe?g|gif|svg)$/i,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: 'assets/images/[name].[ext]',
-              },
-            },
-          ],
-        },
      ], //.concat(vtkRules),
    },
    resolve: {
@@ -184,6 +131,8 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
        '@hooks': path.resolve(__dirname, '../platform/app/src/hooks'),
        '@routes': path.resolve(__dirname, '../platform/app/src/routes'),
        '@state': path.resolve(__dirname, '../platform/app/src/state'),
+        'dicom-microscopy-viewer':
+          'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
        '@cornerstonejs/dicom-image-loader':
          '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
      },
@@ -213,7 +162,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
-      ...(isProdBuild ? [] : [new ReactRefreshWebpackPlugin()]),
      // Uncomment to generate bundle analyzer
      // new BundleAnalyzerPlugin(),
    ],
@@ -41,19 +41,17 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF

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

 ## About

-The OHIF Viewer can retrieve
+The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve
 and load images from most sources and formats; render sets in 2D, 3D, and
 reconstructed representations; allows for the manipulation, annotation, and
 serialization of observations; supports internationalization, OpenID Connect,
@@ -118,16 +116,19 @@ This is typically where the latest development happens. Code that is in the mast

 Each package is tagged with beta version numbers, and published to npm such as `@ohif/ui@3.6.0-beta.1`

-### `release/*` branches - The latest stable releases
-Once the `master` branch code reaches a stable, release-ready state, we conduct a comprehensive code review and QA testing. Upon approval, we create a new release branch from `master`. These branches represent the latest stable version considered ready for production.
+### `release` branch - The latest stable release

-For example, `release/3.5` is the branch for version 3.5.0, and `release/3.6` is for version 3.6.0. After each release, we wait a few days to ensure no critical bugs. If any are found, we fix them in the release branch and create a new release with a minor version bump, e.g., 3.5.1 in the `release/3.5` branch.
+This branch represents the latest stable version of the project that is considered ready for production. The code in this branch should be fully tested and vetted for release. Once the code in the master branch reaches a state where it's stable and ready to be released to users,
+we do a comprehensive code review and QA testing. Once the code is approved,
+we merge it into the release branch and tag a new release.

-Each package is tagged with version numbers and published to npm, such as `@ohif/ui@3.5.0`. Note that `master` is always ahead of the `release` branch. We publish docker builds for both beta and stable releases.
+Each package is tagged with version numbers, and published to npm such as `@ohif/ui@3.5.0`
+
+Note: `master` is always ahead of `release` branch. We publish both docker builds for beta and stable releases.

 Here is a schematic representation of our development workflow:

-![alt text](platform/docs/docs/assets/img/github-readme-branches-Jun2024.png)
+![Alt text](platform/docs/docs/assets/img/github-readme-branches.png)



@@ -136,7 +137,7 @@ Here is a schematic representation of our development workflow:
 ### Requirements

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

@@ -1,3 +0,0 @@
-# External Dependencies
-
-This module contains optional dependencies and external dependencies for including in OHIF, such as the DICOM Microscopy Viewer component.  
@@ -1,67 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [3.9.0-beta.54](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.53...v3.9.0-beta.54) (2024-06-28)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.53](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.52...v3.9.0-beta.53) (2024-06-28)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.52](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.51...v3.9.0-beta.52) (2024-06-27)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.51](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.50...v3.9.0-beta.51) (2024-06-27)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.50](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.49...v3.9.0-beta.50) (2024-06-26)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.49](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.48...v3.9.0-beta.49) (2024-06-26)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.48](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.47...v3.9.0-beta.48) (2024-06-25)
-
-**Note:** Version bump only for package @externals/devDependencies
-
-
-
-
-
-# [3.9.0-beta.47](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.46...v3.9.0-beta.47) (2024-06-21)
-
-
-### Bug Fixes
-
-* Allow the mode setup/creation to be async, and provide a few more values to extension/app config/mode setup. ([#4016](https://github.com/OHIF/Viewers/issues/4016)) ([88575c6](https://github.com/OHIF/Viewers/commit/88575c6c09fd778a31b2f91524163ce65d1639dd))
@@ -1,94 +0,0 @@
-{
-  "name": "@externals/devDependencies",
-  "description": "External dev dependencies - put dev build dependencies here",
-  "version": "3.9.0-beta.54",
-  "license": "MIT",
-  "private": true,
-  "engines": {
-    "node": ">=12",
-    "yarn": ">=1.19.1"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@kitware/vtk.js": "30.4.1",
-    "clsx": "^2.1.1",
-    "core-js": "^3.2.1",
-    "moment": "^2.9.4"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@svgr/webpack": "^8.1.0",
-    "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "autoprefixer": "^10.4.4",
-    "babel-eslint": "9.x",
-    "babel-loader": "^8.2.4",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "cross-env": "^5.2.0",
-    "css-loader": "^6.8.1",
-    "dotenv": "^8.1.0",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^7.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-tsdoc": "^0.2.11",
-    "eslint-webpack-plugin": "^2.5.3",
-    "execa": "^8.0.1",
-    "extract-css-chunks-webpack-plugin": "^4.5.4",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.1.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-junit": "^6.4.0",
-    "lerna": "^7.2.0",
-    "lint-staged": "^9.0.2",
-    "mini-css-extract-plugin": "^2.1.0",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.5",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-env": "^7.4.3",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "react-refresh": "^0.14.2",
-    "semver": "^7.5.1",
-    "serve": "^14.2.0",
-    "shader-loader": "^1.3.1",
-    "shx": "^0.3.3",
-    "source-map-loader": "^4.0.1",
-    "start-server-and-test": "^1.10.0",
-    "style-loader": "^1.0.0",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^7.1.3",
-    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "4.6.4",
-    "unused-webpack-plugin": "2.4.0",
-    "webpack": "5.89.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "4.7.3",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3",
-    "workbox-webpack-plugin": "^6.1.5",
-    "worker-loader": "^3.0.8"
-  },
-  "scripts": {
-    "build": "Included as direct dependency"
-  }
-}
@@ -1,67 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [3.9.0-beta.54](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.53...v3.9.0-beta.54) (2024-06-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.53](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.52...v3.9.0-beta.53) (2024-06-28)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.52](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.51...v3.9.0-beta.52) (2024-06-27)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.51](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.50...v3.9.0-beta.51) (2024-06-27)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.50](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.49...v3.9.0-beta.50) (2024-06-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.49](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.48...v3.9.0-beta.49) (2024-06-26)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.48](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.47...v3.9.0-beta.48) (2024-06-25)
-
-**Note:** Version bump only for package @externals/dicom-microscopy-viewer
-
-
-
-
-
-# [3.9.0-beta.47](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.46...v3.9.0-beta.47) (2024-06-21)
-
-
-### Bug Fixes
-
-* Allow the mode setup/creation to be async, and provide a few more values to extension/app config/mode setup. ([#4016](https://github.com/OHIF/Viewers/issues/4016)) ([88575c6](https://github.com/OHIF/Viewers/commit/88575c6c09fd778a31b2f91524163ce65d1639dd))
@@ -1,9 +0,0 @@
-{
-  "name": "@externals/dicom-microscopy-viewer",
-  "description": "External reference to dicom-microscopy-viewer",
-  "version": "3.9.0-beta.54",
-  "license": "MIT",
-  "dependencies": {
-    "dicom-microscopy-viewer": "^0.46.1"
-  }
-}
@@ -1,51 +0,0 @@
-{
-  "name": "ohif-monorepo-root",
-  "private": true,
-  "packageManager": "yarn@1.22.22",
-  "workspaces": {
-    "packages": [
-      "../platform/i18n",
-      "../platform/core",
-      "../platform/ui",
-      "../platform/ui-next",
-      "../platform/app",
-      "../extensions/*",
-      "../modes/*",
-      "../addOns/externals/*"
-    ],
-    "nohoist": [
-      "**/html-minifier-terser"
-    ]
-  },
-  "scripts": {
-    "preinstall": "cd .. && node preinstall.js"
-  },
-  "devDependencies": {
-    "@babel/core": "7.24.7",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.16.7",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-env": "7.24.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.13.0"
-  },
-  "resolutions": {
-    "**/@babel/runtime": "^7.20.13",
-    "commander": "8.3.0",
-    "dcmjs": ">=0.33.0",
-    "dicomweb-client": ">=0.10.4",
-    "nth-check": "^2.1.1",
-    "trim-newlines": "^5.0.0",
-    "glob-parent": "^6.0.2",
-    "trim": "^1.0.0",
-    "package-json": "^8.1.0",
-    "typescript": "4.6.4",
-    "sharp": "^0.32.6"
-  }
-}
@@ -5,11 +5,27 @@ module.exports = {
  babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
  plugins: [
+    [
+      'inline-react-svg',
+      {
+        svgo: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
+              },
+            },
+          ],
+        },
+      },
+    ],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-transform-typescript',
    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
    ['@babel/plugin-proposal-private-methods', { loose: true }],
-    '@babel/plugin-transform-class-static-block',
  ],
  env: {
    test: {
@@ -29,10 +45,8 @@ module.exports = {
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-regenerator',
-        '@babel/transform-destructuring',
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-typescript',
-        '@babel/plugin-transform-class-static-block',
      ],
    },
    production: {
@@ -51,7 +65,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
-      plugins: ['react-refresh/babel'],
+      plugins: ['react-hot-loader/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1 +1 @@
-2048b19484c0b1fae73f993cfaa814f861bbd230
+5ddf8a16027255d28dc01c1740099cf85bbcf458
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -37,7 +37,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
-      plugins: ['react-refresh/babel'],
+      plugins: ['react-hot-loader/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.9.0-beta.54",
+  "version": "3.7.0",
  "description": "DICOM RT read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -24,8 +24,6 @@
    "yarn": ">=1.18.0"
  },
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:dicom-seg": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
@@ -33,16 +31,16 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.54",
-    "@ohif/extension-cornerstone": "3.9.0-beta.54",
-    "@ohif/extension-default": "3.9.0-beta.54",
-    "@ohif/i18n": "3.9.0-beta.54",
+    "@ohif/core": "3.7.0",
+    "@ohif/extension-cornerstone": "3.7.0",
+    "@ohif/extension-default": "3.7.0",
+    "@ohif/i18n": "3.7.0",
    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
    "react-i18next": "^10.11.0",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1"
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
@@ -5,13 +5,9 @@ import loadRTStruct from './loadRTStruct';

 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];

-const loadPromises = {};
+let loadPromises = {};

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

  const {
@@ -73,8 +69,8 @@ function _getDisplaySetsFromSeries(
  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;

  displaySet.getReferenceDisplaySet = () => {
-    const { displaySetService } = servicesManager.services;
-    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+    const { DisplaySetService } = servicesManager.services;
+    const referencedDisplaySets = DisplaySetService.getDisplaySetsForSeries(
      displaySet.referencedSeriesInstanceUID
    );

@@ -94,7 +90,7 @@ function _getDisplaySetsFromSeries(
  return [displaySet];
 }

-function _load(rtDisplaySet, servicesManager: AppTypes.ServicesManager, extensionManager, headers) {
+function _load(rtDisplaySet, servicesManager, extensionManager, headers) {
  const { SOPInstanceUID } = rtDisplaySet;
  const { segmentationService } = servicesManager.services;
  if (
@@ -172,10 +168,7 @@ function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
  return ReferencedSeriesSequence;
 }

-function _segmentationExistsInCache(
-  rtDisplaySet,
-  segmentationService: AppTypes.SegmentationService
-) {
+function _segmentationExistsInCache(rtDisplaySet, segmentationService) {
  // Todo: fix this
  return false;
  // This should be abstracted with the CornerstoneCacheService
@@ -13,46 +13,39 @@ function promptHydrateRT({
  toolGroupId = 'default',
  preHydrateCallbacks,
  hydrateRTDisplaySet,
-}: withAppTypes) {
+}) {
  const { uiViewportDialogService } = servicesManager.services;
-  const extensionManager = servicesManager._extensionManager;
-  const appConfig = extensionManager._appConfig;
+
  return new Promise(async function (resolve, reject) {
-    const promptResult = appConfig?.disableConfirmationPrompts
-      ? RESPONSE.HYDRATE_SEG
-      : await _askHydrate(uiViewportDialogService, viewportId);
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportId);

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

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

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

-function _askHydrate(uiViewportDialogService: AppTypes.UIViewportDialogService, viewportId) {
+function _askHydrate(uiViewportDialogService, viewportId) {
  return new Promise(function (resolve, reject) {
    const message = 'Do you want to open this Segmentation?';
    const actions = [
      {
-        id: 'no-hydrate',
        type: ButtonEnums.type.secondary,
        text: 'No',
        value: RESPONSE.CANCEL,
      },
      {
-        id: 'yes-hydrate',
        type: ButtonEnums.type.primary,
        text: 'Yes',
        value: RESPONSE.HYDRATE_SEG,
@@ -64,7 +57,6 @@ function _askHydrate(uiViewportDialogService: AppTypes.UIViewportDialogService,
    };

    uiViewportDialogService.show({
-      id: 'promptHydrateRT',
      viewportId,
      type: 'info',
      message,
@@ -74,11 +66,6 @@ function _askHydrate(uiViewportDialogService: AppTypes.UIViewportDialogService,
        uiViewportDialogService.hide();
        resolve(RESPONSE.CANCEL);
      },
-      onKeyPress: event => {
-        if (event.key === 'Enter') {
-          onSubmit(RESPONSE.HYDRATE_SEG);
-        }
-      },
    });
  });
 }
@@ -1,18 +1,21 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useViewportGrid, LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';
+import OHIF, { utils } from '@ohif/core';
+import { ViewportActionBar, useViewportGrid, LoadingIndicatorTotalPercent } from '@ohif/ui';

 import promptHydrateRT from '../utils/promptHydrateRT';
 import _getStatusComponent from './_getStatusComponent';
 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';

+const { formatDate } = utils;
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';

-function OHIFCornerstoneRTViewport(props: withAppTypes) {
+function OHIFCornerstoneRTViewport(props) {
  const {
    children,
    displaySets,
    viewportOptions,
+    viewportLabel,
    servicesManager,
    extensionManager,
    commandsManager,
@@ -24,7 +27,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    segmentationService,
    uiNotificationService,
    customizationService,
-    viewportActionCornersService,
  } = servicesManager.services;

  const viewportId = viewportOptions.viewportId;
@@ -111,15 +113,12 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
        {...props}
        displaySets={[referencedDisplaySet, rtDisplaySet]}
        viewportOptions={{
-          viewportType: 'stack',
+          viewportType: 'volume',
          toolGroupId: toolGroupId,
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
        }}
-        onElementEnabled={evt => {
-          props.onElementEnabled?.(evt);
-          onElementEnabled(evt);
-        }}
+        onElementEnabled={onElementEnabled}
        onElementDisabled={onElementDisabled}
      ></Component>
    );
@@ -127,6 +126,7 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {

  const onSegmentChange = useCallback(
    direction => {
+      direction = direction === 'left' ? -1 : 1;
      const segmentationId = rtDisplaySet.displaySetInstanceUID;
      const segmentation = segmentationService.getSegmentation(segmentationId);

@@ -168,8 +168,6 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
  }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading]);

  useEffect(() => {
-    // I'm not sure what is this, since in RT we support Overlapping segments
-    // via contours
    const { unsubscribe } = segmentationService.subscribe(
      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
      evt => {
@@ -282,7 +280,20 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    });
  }

-  const onStatusClick = useCallback(async () => {
+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+    ManufacturerModelName,
+    StudyDate,
+    SeriesDescription,
+    SpacingBetweenSlices,
+    SeriesNumber,
+  } = referencedDisplaySetRef.current.metadata;
+
+  const onStatusClick = async () => {
    // Before hydrating a RT and make it added to all viewports in the grid
    // that share the same frameOfReferenceUID, we need to store the viewport grid
    // presentation state, so that we can restore it after hydrating the RT. This is
@@ -296,47 +307,41 @@ function OHIFCornerstoneRTViewport(props: withAppTypes) {
    });

    setIsHydrated(isHydrated);
-  }, [hydrateRTDisplaySet, rtDisplaySet, storePresentationState, viewportId]);
-
-  useEffect(() => {
-    viewportActionCornersService.setComponents([
-      {
-        viewportId,
-        id: 'viewportStatusComponent',
-        component: _getStatusComponent({
-          isHydrated,
-          onStatusClick,
-        }),
-        indexPriority: -100,
-        location: viewportActionCornersService.LOCATIONS.topLeft,
-      },
-      {
-        viewportId,
-        id: 'viewportActionArrowsComponent',
-        component: (
-          <ViewportActionArrows
-            key="actionArrows"
-            onArrowsClick={onSegmentChange}
-            className={
-              viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
-            }
-          ></ViewportActionArrows>
-        ),
-        indexPriority: 0,
-        location: viewportActionCornersService.LOCATIONS.topRight,
-      },
-    ]);
-  }, [
-    activeViewportId,
-    isHydrated,
-    onSegmentChange,
-    onStatusClick,
-    viewportActionCornersService,
-    viewportId,
-  ]);
+  };

  return (
    <>
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onSegmentChange}
+        getStatusComponent={() => {
+          return _getStatusComponent({
+            isHydrated,
+            onStatusClick,
+          });
+        }}
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          currentSeries: SeriesNumber,
+          seriesDescription: `RT Viewport ${SeriesDescription}`,
+          patientInformation: {
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
      <div className="relative flex h-full w-full flex-row overflow-hidden">
        {rtIsLoading && (
          <LoadingIndicatorTotalPercent
@@ -358,6 +363,11 @@ OHIFCornerstoneRTViewport.propTypes = {
  viewportId: PropTypes.string.isRequired,
  dataSource: PropTypes.object,
  children: PropTypes.node,
+  customProps: PropTypes.object,
+};
+
+OHIFCornerstoneRTViewport.defaultProps = {
+  customProps: {},
 };

 function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
@@ -6,6 +6,9 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  let ToolTipMessage = null;
  let StatusIcon = null;

+  const { t } = useTranslation('Common');
+  const loadStr = t('LOAD');
+
  switch (isHydrated) {
    case true:
      StatusIcon = () => <Icon name="status-alert" />;
@@ -23,28 +26,23 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
      ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
  }

-  const StatusArea = () => {
-    const { t } = useTranslation('Common');
-    const loadStr = t('LOAD');
-
-    return (
-      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
-        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
-          <StatusIcon />
-          <span className="ml-1">RTSTRUCT</span>
-        </div>
-        {!isHydrated && (
-          <div
-            className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
-            // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
-            onMouseUp={onStatusClick}
-          >
-            {loadStr}
-          </div>
-        )}
+  const StatusArea = () => (
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+        <StatusIcon />
+        <span className="ml-1">RTSTRUCT</span>
      </div>
-    );
-  };
+      {!isHydrated && (
+        <div
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={onStatusClick}
+        >
+          {loadStr}
+        </div>
+      )}
+    </div>
+  );

  return (
    <>
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
  env: {
    test: {
      presets: [
@@ -37,7 +37,7 @@ module.exports = {
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
-      plugins: ['react-refresh/babel'],
+      plugins: ['react-hot-loader/babel'],
      ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
    },
  },
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.9.0-beta.54",
+  "version": "3.7.0",
  "description": "DICOM SEG read workflow",
  "author": "OHIF",
  "license": "MIT",
@@ -24,8 +24,6 @@
    "yarn": ">=1.18.0"
  },
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:dicom-seg": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
@@ -33,22 +31,22 @@
    "start": "yarn run dev"
  },
  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.54",
-    "@ohif/extension-cornerstone": "3.9.0-beta.54",
-    "@ohif/extension-default": "3.9.0-beta.54",
-    "@ohif/i18n": "3.9.0-beta.54",
+    "@ohif/core": "3.7.0",
+    "@ohif/extension-cornerstone": "3.7.0",
+    "@ohif/extension-default": "3.7.0",
+    "@ohif/i18n": "3.7.0",
    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
    "react-i18next": "^12.2.2",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1"
+    "react-router": "^6.8.1",
+    "react-router-dom": "^6.8.1"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.78.1",
-    "@cornerstonejs/core": "^1.78.1",
-    "@kitware/vtk.js": "*",
+    "@cornerstonejs/adapters": "^1.20.3",
+    "@cornerstonejs/tools": "^1.20.3",
+    "@kitware/vtk.js": "27.3.1",
    "react-color": "^2.19.3"
  }
 }
@@ -1,11 +1,10 @@
 import dcmjs from 'dcmjs';
 import { createReportDialogPrompt } from '@ohif/extension-default';
-import { Types } from '@ohif/core';
+import { ServicesManager, Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
 import {
  segmentation as cornerstoneToolsSegmentation,
  Enums as cornerstoneToolsEnums,
-  utilities,
 } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
 import { classes, DicomMetadataStore } from '@ohif/core';
@@ -19,7 +18,6 @@ import {
  getUpdatedViewportsForSegmentation,
  getTargetViewport,
 } from './utils/hydrationUtils';
-const { segmentation: segmentationUtils } = utilities;

 const { datasetToBlob } = dcmjs.data;

@@ -47,9 +45,7 @@ const commandsModule = ({
    uiDialogService,
    displaySetService,
    viewportGridService,
-    toolGroupService,
-    cornerstoneViewportService,
-  } = servicesManager.services;
+  } = (servicesManager as ServicesManager).services;

  const actions = {
    /**
@@ -95,7 +91,6 @@ const commandsModule = ({
      updateViewportsForSegmentationRendering({
        viewportId,
        servicesManager,
-        displaySet,
        loadFn: async () => {
          const currentSegmentations = segmentationService.getSegmentations();
          const segmentationId = await segmentationService.createSegmentationForDisplaySet(
@@ -208,16 +203,11 @@ const commandsModule = ({
    loadSegmentationDisplaySetsForViewport: async ({ viewportId, displaySets }) => {
      // Todo: handle adding more than one segmentation
      const displaySet = displaySets[0];
-      const referencedDisplaySet = displaySetService.getDisplaySetByUID(
-        displaySet.referencedDisplaySetInstanceUID
-      );
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      const initialSliceIndex = viewport.getSliceIndex();

      updateViewportsForSegmentationRendering({
        viewportId,
        servicesManager,
-        displaySet,
+        referencedDisplaySetInstanceUID: displaySet.referencedDisplaySetInstanceUID,
        loadFn: async () => {
          const segDisplaySet = displaySet;
          const suppressEvents = false;
@@ -228,11 +218,9 @@ const commandsModule = ({

          const boundFn = segmentationService[serviceFunction].bind(segmentationService);
          const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
-          const segmentation = segmentationService.getSegmentation(segmentationId);
-          segmentation.description = `S${referencedDisplaySet.SeriesNumber}: ${referencedDisplaySet.SeriesDescription}`;
+
          return segmentationId;
        },
-        initialSliceIndex,
      });
    },
    /**
@@ -263,12 +251,9 @@ const commandsModule = ({
      labelmapObj.metadata = [];

      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
-      segmentationInOHIF.segments.forEach(segment => {
+      labelmapObj.segmentsOnLabelmap.forEach(segmentIndex => {
        // segmentation service already has a color for each segment
-        if (!segment) {
-          return;
-        }
-        const segmentIndex = segment.segmentIndex;
+        const segment = segmentationInOHIF?.segments[segmentIndex];
        const { label, color } = segment;

        const RecommendedDisplayCIELabValue = dcmjs.data.Colors.rgb2DICOMLAB(
@@ -278,8 +263,8 @@ const commandsModule = ({
        const segmentMetadata = {
          SegmentNumber: segmentIndex.toString(),
          SegmentLabel: label,
-          SegmentAlgorithmType: segment?.algorithmType || 'MANUAL',
-          SegmentAlgorithmName: segment?.algorithmName || 'OHIF Brush',
+          SegmentAlgorithmType: 'MANUAL',
+          SegmentAlgorithmName: 'OHIF Brush',
          RecommendedDisplayCIELabValue,
          SegmentedPropertyCategoryCodeSequence: {
            CodeValue: 'T-D0050',
@@ -412,36 +397,6 @@ const commandsModule = ({
        console.warn(e);
      }
    },
-    setBrushSize: ({ value, toolNames }) => {
-      const brushSize = Number(value);
-
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        if (toolNames?.length === 0) {
-          segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize);
-        } else {
-          toolNames?.forEach(toolName => {
-            segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
-          });
-        }
-      });
-    },
-    setThresholdRange: ({
-      value,
-      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
-    }) => {
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-        toolNames?.forEach(toolName => {
-          toolGroup.setToolConfiguration(toolName, {
-            strategySpecificConfiguration: {
-              THRESHOLD: {
-                threshold: value,
-              },
-            },
-          });
-        });
-      });
-    },
  };

  const definitions = {
@@ -469,18 +424,11 @@ const commandsModule = ({
    downloadRTSS: {
      commandFn: actions.downloadRTSS,
    },
-    setBrushSize: {
-      commandFn: actions.setBrushSize,
-    },
-    setThresholdRange: {
-      commandFn: actions.setThresholdRange,
-    },
  };

  return {
    actions,
    definitions,
-    defaultContext: 'SEGMENTATION',
  };
 };

@@ -1,21 +1,17 @@
 import React from 'react';

 import { useAppConfig } from '@state';
-import { Toolbox } from '@ohif/ui';
 import PanelSegmentation from './panels/PanelSegmentation';
+import SegmentationToolbox from './panels/SegmentationToolbox';

-const getPanelModule = ({
-  commandsManager,
-  servicesManager,
-  extensionManager,
-  configuration,
-  title,
-}: withAppTypes) => {
+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}
@@ -23,8 +19,7 @@ const getPanelModule = ({
        extensionManager={extensionManager}
        configuration={{
          ...configuration,
-          disableEditing: appConfig.disableEditing,
-          ...customizationService.get('segmentation.panel'),
+          disableEditing: appConfig.disableEditing || disableEditingForMode?.value,
        }}
      />
    );
@@ -32,15 +27,12 @@ const getPanelModule = ({

  const wrappedPanelSegmentationWithTools = configuration => {
    const [appConfig] = useAppConfig();
-
    return (
      <>
-        <Toolbox
+        <SegmentationToolbox
          commandsManager={commandsManager}
          servicesManager={servicesManager}
          extensionManager={extensionManager}
-          buttonSectionId="segmentationToolbox"
-          title="Segmentation Tools"
          configuration={{
            ...configuration,
          }}
@@ -51,8 +43,6 @@ const getPanelModule = ({
          extensionManager={extensionManager}
          configuration={{
            ...configuration,
-            disableEditing: appConfig.disableEditing,
-            ...customizationService.get('segmentation.panel'),
          }}
        />
      </>
@@ -1,6 +1,5 @@
 import { utils } from '@ohif/core';
 import { metaData, cache, triggerEvent, eventTarget } from '@cornerstonejs/core';
-import { CONSTANTS } from '@cornerstonejs/tools';
 import { adaptersSEG, Enums } from '@cornerstonejs/adapters';

 import { SOPClassHandlerId } from './id';
@@ -8,13 +7,9 @@ import { dicomlabToRGB } from './utils/dicomlabToRGB';

 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];

-const loadPromises = {};
+let loadPromises = {};

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

  const {
@@ -99,12 +94,7 @@ function _getDisplaySetsFromSeries(
  return [displaySet];
 }

-function _load(
-  segDisplaySet,
-  servicesManager: AppTypes.ServicesManager,
-  extensionManager,
-  headers
-) {
+function _load(segDisplaySet, servicesManager, extensionManager, headers) {
  const { SOPInstanceUID } = segDisplaySet;
  const { segmentationService } = servicesManager.services;

@@ -146,17 +136,12 @@ function _load(
  return loadPromises[SOPInstanceUID];
 }

-async function _loadSegments({
-  extensionManager,
-  servicesManager,
-  segDisplaySet,
-  headers,
-}: withAppTypes) {
+async function _loadSegments({ extensionManager, servicesManager, segDisplaySet, headers }) {
  const utilityModule = extensionManager.getModuleEntry(
    '@ohif/extension-cornerstone.utilityModule.common'
  );

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

  const { dicomLoaderService } = utilityModule.exports;
  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(segDisplaySet, null, headers);
@@ -189,44 +174,16 @@ async function _loadSegments({
    { skipOverlapping, tolerance, eventTarget, triggerEvent }
  );

-  let usedRecommendedDisplayCIELabValue = true;
  results.segMetadata.data.forEach((data, i) => {
    if (i > 0) {
-      data.rgba = data.RecommendedDisplayCIELabValue;
-
-      if (data.rgba) {
-        data.rgba = dicomlabToRGB(data.rgba);
-      } else {
-        usedRecommendedDisplayCIELabValue = false;
-        data.rgba = CONSTANTS.COLOR_LUT[i % CONSTANTS.COLOR_LUT.length];
-      }
+      data.rgba = dicomlabToRGB(data.RecommendedDisplayCIELabValue);
    }
  });

-  if (results.overlappingSegments) {
-    uiNotificationService.show({
-      title: 'Overlapping Segments',
-      message:
-        'Unsupported overlapping segments detected, segmentation rendering results may be incorrect.',
-      type: 'warning',
-    });
-  }
-
-  if (!usedRecommendedDisplayCIELabValue) {
-    // Display a notification about the non-utilization of RecommendedDisplayCIELabValue
-    uiNotificationService.show({
-      title: 'DICOM SEG import',
-      message:
-        'RecommendedDisplayCIELabValue not found for one or more segments. The default color was used instead.',
-      type: 'warning',
-      duration: 5000,
-    });
-  }
-
  Object.assign(segDisplaySet, results);
 }

-function _segmentationExists(segDisplaySet, segmentationService: AppTypes.SegmentationService) {
+function _segmentationExists(segDisplaySet, segmentationService) {
  // This should be abstracted with the CornerstoneCacheService
  return segmentationService.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }
@@ -1,57 +0,0 @@
-export function getToolbarModule({ servicesManager }: withAppTypes) {
-  const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
-  return [
-    {
-      name: 'evaluate.cornerstone.segmentation',
-      evaluate: ({ viewportId, button, toolNames, disabledText }) => {
-        // Todo: we need to pass in the button section Id since we are kind of
-        // forcing the button to have black background since initially
-        // it is designed for the toolbox not the toolbar on top
-        // we should then branch the buttonSectionId to have different styles
-        const segmentations = segmentationService.getSegmentations();
-        if (!segmentations?.length) {
-          return {
-            disabled: true,
-            className: '!text-common-bright !bg-black opacity-50',
-            disabledText: disabledText ?? 'No segmentations available',
-          };
-        }
-
-        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-
-        if (!toolGroup) {
-          return {
-            disabled: true,
-            className: '!text-common-bright ohif-disabled',
-            disabledText: disabledText ?? 'Not available on the current viewport',
-          };
-        }
-
-        const toolName = toolbarService.getToolNameForButton(button);
-
-        if (!toolGroup.hasTool(toolName) && !toolNames) {
-          return {
-            disabled: true,
-            className: '!text-common-bright ohif-disabled',
-            disabledText: disabledText ?? 'Not available on the current viewport',
-          };
-        }
-
-        const isPrimaryActive = toolNames
-          ? toolNames.includes(toolGroup.getActivePrimaryMouseButtonTool())
-          : toolGroup.getActivePrimaryMouseButtonTool() === toolName;
-
-        return {
-          disabled: false,
-          className: isPrimaryActive
-            ? '!text-black !bg-primary-light hover:bg-primary-light hover-text-black hover:cursor-pointer'
-            : '!text-common-bright !bg-black hover:bg-primary-light hover:cursor-pointer hover:text-black',
-          // Todo: isActive right now is used for nested buttons where the primary
-          // button needs to be fully rounded (vs partial rounded) when active
-          // otherwise it does not have any other use
-          isActive: isPrimaryActive,
-        };
-      },
-    },
-  ];
-}
@@ -5,7 +5,7 @@ import getSopClassHandlerModule from './getSopClassHandlerModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
 import getPanelModule from './getPanelModule';
 import getCommandsModule from './commandsModule';
-import { getToolbarModule } from './getToolbarModule';
+import preRegistration from './init';

 const Component = React.lazy(() => {
  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport');
@@ -28,6 +28,8 @@ 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
   * for Modes to consume and render. Each panel is defined by a {name,
@@ -36,8 +38,8 @@ const extension = {
   */
  getPanelModule,
  getCommandsModule,
-  getToolbarModule,
-  getViewportModule({ servicesManager, extensionManager, commandsManager }) {
+
+  getViewportModule({ servicesManager, extensionManager }) {
    const ExtendedOHIFCornerstoneSEGViewport = props => {
      return (
        <OHIFCornerstoneSEGViewport
@@ -0,0 +1,5 @@
+import { addTool, BrushTool } from '@cornerstonejs/tools';
+
+export default function init({ configuration = {} }): void {
+  addTool(BrushTool);
+}
@@ -1,35 +1,23 @@
 import { createReportAsync } from '@ohif/extension-default';
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { SegmentationGroupTable, SegmentationGroupTableExpanded } from '@ohif/ui';
-import { SegmentationPanelMode } from '../types/segmentation';
+import { SegmentationGroupTable, LegacyButtonGroup, LegacyButton } from '@ohif/ui';
+
 import callInputDialog from './callInputDialog';
 import callColorPickerDialog from './colorPickerDialog';
 import { useTranslation } from 'react-i18next';

-const components = {
-  [SegmentationPanelMode.Expanded]: SegmentationGroupTableExpanded,
-  [SegmentationPanelMode.Dropdown]: SegmentationGroupTable,
-};
-
 export default function PanelSegmentation({
  servicesManager,
  commandsManager,
  extensionManager,
  configuration,
-}: withAppTypes) {
-  const {
-    segmentationService,
-    viewportGridService,
-    uiDialogService,
-    displaySetService,
-    cornerstoneViewportService,
-  } = servicesManager.services;
+}) {
+  const { segmentationService, viewportGridService, uiDialogService } = servicesManager.services;

  const { t } = useTranslation('PanelSegmentation');

  const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
-  const [addSegmentationClassName, setAddSegmentationClassName] = useState('');
  const [segmentationConfiguration, setSegmentationConfiguration] = useState(
    segmentationService.getConfiguration()
  );
@@ -59,64 +47,6 @@ export default function PanelSegmentation({
    };
  }, []);

-  // temporary measure to not allow add segmentation when the selected viewport
-  // is stack viewport
-  useEffect(() => {
-    const handleActiveViewportChange = viewportId => {
-      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(
-        viewportId || viewportGridService.getActiveViewportId()
-      );
-
-      if (!displaySetUIDs) {
-        return;
-      }
-
-      const isReconstructable =
-        displaySetUIDs?.some(displaySetUID => {
-          const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
-          return displaySet?.isReconstructable;
-        }) || false;
-
-      if (isReconstructable) {
-        setAddSegmentationClassName('');
-      } else {
-        setAddSegmentationClassName('ohif-disabled');
-      }
-    };
-
-    // Handle initial state
-    handleActiveViewportChange();
-
-    const changedGrid = viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED;
-    const ready = viewportGridService.EVENTS.VIEWPORTS_READY;
-
-    const subsGrid = [];
-    [ready, changedGrid].forEach(evt => {
-      const { unsubscribe } = viewportGridService.subscribe(evt, ({ viewportId }) => {
-        handleActiveViewportChange(viewportId);
-      });
-
-      subsGrid.push(unsubscribe);
-    });
-
-    const changedData = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
-
-    const subsData = [];
-    [changedData].forEach(evt => {
-      const { unsubscribe } = cornerstoneViewportService.subscribe(evt, () => {
-        handleActiveViewportChange();
-      });
-
-      subsData.push(unsubscribe);
-    });
-
-    // Clean up
-    return () => {
-      subsGrid.forEach(unsub => unsub());
-      subsData.forEach(unsub => unsub());
-    };
-  }, []);
-
  const getToolGroupIds = segmentationId => {
    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);

@@ -124,9 +54,7 @@ export default function PanelSegmentation({
  };

  const onSegmentationAdd = async () => {
-    commandsManager.runCommand('createEmptySegmentationForViewport', {
-      viewportId: viewportGridService.getActiveViewportId(),
-    });
+    commandsManager.runCommand('createEmptySegmentationForViewport');
  };

  const onSegmentationClick = (segmentationId: string) => {
@@ -219,7 +147,6 @@ export default function PanelSegmentation({
    segmentationService.removeSegment(segmentationId, segmentIndex);
  };

-  // segment hide
  const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
    const segmentation = segmentationService.getSegmentation(segmentationId);
    const segmentInfo = segmentation.segments[segmentIndex];
@@ -243,22 +170,6 @@ export default function PanelSegmentation({

  const onToggleSegmentationVisibility = segmentationId => {
    segmentationService.toggleSegmentationVisibility(segmentationId);
-    const segmentation = segmentationService.getSegmentation(segmentationId);
-    const isVisible = segmentation.isVisible;
-    const segments = segmentation.segments;
-
-    const toolGroupIds = getToolGroupIds(segmentationId);
-
-    toolGroupIds.forEach(toolGroupId => {
-      segments.forEach((segment, segmentIndex) => {
-        segmentationService.setSegmentVisibility(
-          segmentationId,
-          segmentIndex,
-          isVisible,
-          toolGroupId
-        );
-      });
-    });
  };

  const _setSegmentationConfiguration = useCallback(
@@ -310,61 +221,59 @@ export default function PanelSegmentation({
    });
  };

-  const SegmentationGroupTableComponent =
-    components[configuration?.segmentationPanelMode] || SegmentationGroupTable;
-  const allowAddSegment = configuration?.addSegment;
-  const onSegmentationAddWrapper =
-    configuration?.onSegmentationAdd && typeof configuration?.onSegmentationAdd === 'function'
-      ? configuration?.onSegmentationAdd
-      : onSegmentationAdd;
-
  return (
-    <SegmentationGroupTableComponent
-      title={t('Segmentations')}
-      segmentations={segmentations}
-      disableEditing={configuration.disableEditing}
-      activeSegmentationId={selectedSegmentationId || ''}
-      onSegmentationAdd={onSegmentationAddWrapper}
-      addSegmentationClassName={addSegmentationClassName}
-      showAddSegment={allowAddSegment}
-      onSegmentationClick={onSegmentationClick}
-      onSegmentationDelete={onSegmentationDelete}
-      onSegmentationDownload={onSegmentationDownload}
-      onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
-      storeSegmentation={storeSegmentation}
-      onSegmentationEdit={onSegmentationEdit}
-      onSegmentClick={onSegmentClick}
-      onSegmentEdit={onSegmentEdit}
-      onSegmentAdd={onSegmentAdd}
-      onSegmentColorClick={onSegmentColorClick}
-      onSegmentDelete={onSegmentDelete}
-      onToggleSegmentVisibility={onToggleSegmentVisibility}
-      onToggleSegmentLock={onToggleSegmentLock}
-      onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-      showDeleteSegment={true}
-      segmentationConfig={{ initialConfig: segmentationConfiguration }}
-      setRenderOutline={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
-      }
-      setOutlineOpacityActive={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
-      }
-      setRenderFill={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
-      }
-      setRenderInactiveSegmentations={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'renderInactiveSegmentations', value)
-      }
-      setOutlineWidthActive={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
-      }
-      setFillAlpha={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
-      }
-      setFillAlphaInactive={value =>
-        _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
-      }
-    />
+    <>
+      <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
+        <SegmentationGroupTable
+          title={t('Segmentations')}
+          segmentations={segmentations}
+          disableEditing={configuration.disableEditing}
+          activeSegmentationId={selectedSegmentationId || ''}
+          onSegmentationAdd={onSegmentationAdd}
+          onSegmentationClick={onSegmentationClick}
+          onSegmentationDelete={onSegmentationDelete}
+          onSegmentationDownload={onSegmentationDownload}
+          onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
+          storeSegmentation={storeSegmentation}
+          onSegmentationEdit={onSegmentationEdit}
+          onSegmentClick={onSegmentClick}
+          onSegmentEdit={onSegmentEdit}
+          onSegmentAdd={onSegmentAdd}
+          onSegmentColorClick={onSegmentColorClick}
+          onSegmentDelete={onSegmentDelete}
+          onToggleSegmentVisibility={onToggleSegmentVisibility}
+          onToggleSegmentLock={onToggleSegmentLock}
+          onToggleSegmentationVisibility={onToggleSegmentationVisibility}
+          showDeleteSegment={true}
+          segmentationConfig={{ initialConfig: segmentationConfiguration }}
+          setRenderOutline={value =>
+            _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
+          }
+          setOutlineOpacityActive={value =>
+            _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
+          }
+          setRenderFill={value =>
+            _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
+          }
+          setRenderInactiveSegmentations={value =>
+            _setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderInactiveSegmentations',
+              value
+            )
+          }
+          setOutlineWidthActive={value =>
+            _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
+          }
+          setFillAlpha={value =>
+            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
+          }
+          setFillAlphaInactive={value =>
+            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
+          }
+        />
+      </div>
+    </>
  );
 }

@@ -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_SHAPE: 'CircleScissor',
+  RECTANGLE_SHAPE: 'RectangleScissor',
+  SPHERE_SHAPE: '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'
+  },
+  Shapes: {
+    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: 'Shapes',
+          icon: 'icon-tool-shape',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCLE_SHAPE ||
+            state.activeTool === TOOL_TYPES.RECTANGLE_SHAPE ||
+            state.activeTool === TOOL_TYPES.SPHERE_SHAPE,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCLE_SHAPE),
+          options: [
+            {
+              name: 'Mode',
+              type: 'radio',
+              value: state.Shapes.mode,
+              id: 'shape-mode',
+              values: [
+                { value: TOOL_TYPES.CIRCLE_SHAPE, label: 'Circle' },
+                { value: TOOL_TYPES.RECTANGLE_SHAPE, label: 'Rectangle' },
+                { value: TOOL_TYPES.SPHERE_SHAPE, 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;
@@ -1,4 +0,0 @@
-export enum SegmentationPanelMode {
-  Expanded = 'expanded',
-  Dropdown = 'dropdown',
-}
@@ -10,8 +10,7 @@ import { Enums, cache } from '@cornerstonejs/core';
 * @param params.viewportId - ID of the viewport to be updated.
 * @param params.loadFn - Function to load the segmentation data.
 * @param params.servicesManager - The services manager.
- * @param params.displaySet -  the display set.
- * @param params.initialSliceIndex - The initial slice index.
+ * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
 *
 * @returns Returns true upon successful update of viewports for segmentation rendering.
 */
@@ -19,14 +18,12 @@ async function updateViewportsForSegmentationRendering({
  viewportId,
  loadFn,
  servicesManager,
-  displaySet,
-  initialSliceIndex = null,
+  referencedDisplaySetInstanceUID,
 }: {
  viewportId: string;
  loadFn: () => Promise<string>;
-  servicesManager: AppTypes.ServicesManager;
-  displaySet?: any;
-  initialSliceIndex?: number;
+  servicesManager: any;
+  referencedDisplaySetInstanceUID?: string;
 }) {
  const { cornerstoneViewportService, segmentationService, viewportGridService } =
    servicesManager.services;
@@ -34,13 +31,13 @@ async function updateViewportsForSegmentationRendering({
  const viewport = getTargetViewport({ viewportId, viewportGridService });
  const targetViewportId = viewport.viewportOptions.viewportId;

-  const referencedDisplaySetInstanceUID =
-    displaySet?.referencedDisplaySetInstanceUID || viewport?.displaySetInstanceUIDs[0];
+  referencedDisplaySetInstanceUID =
+    referencedDisplaySetInstanceUID || viewport?.displaySetInstanceUIDs[0];

  const updatedViewports = getUpdatedViewportsForSegmentation({
-    viewportId,
    servicesManager,
-    displaySet,
+    viewportId,
+    referencedDisplaySetInstanceUID,
  });

  // create Segmentation callback which needs to be waited until
@@ -59,25 +56,17 @@ async function updateViewportsForSegmentationRendering({
  updatedViewports.forEach(async viewport => {
    viewport.viewportOptions = {
      ...viewport.viewportOptions,
-      viewportType: displaySet?.Modality === 'RTSTRUCT' ? 'stack' : 'volume',
+      viewportType: 'volume',
      needsRerendering: true,
    };
    const viewportId = viewport.viewportId;

-    // maintain the prehydration slice on the target viewport only
-    if (viewportId === targetViewportId) {
-      viewport.viewportOptions.initialImageOptions = {
-        index: initialSliceIndex,
-        useOnce: true,
-      };
-    }
-
    const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
    const prevCamera = csViewport.getCamera();

    // only run the createSegmentationForVolume for the targetViewportId
    // since the rest will get handled by cornerstoneViewportService
-    if ((volumeExists || displaySet.Modality === 'RTSTRUCT') && viewportId === targetViewportId) {
+    if (volumeExists && viewportId === targetViewportId) {
      await createSegmentationForVolume();
      return;
    }
@@ -137,19 +126,19 @@ const getTargetViewport = ({ viewportId, viewportGridService }) => {
 * @param {Object} params - Parameters for the function.
 * @param params.viewportId - the ID of the viewport to be updated.
 * @param params.servicesManager - The services manager
- * @param params.displaySet -  the display set.
+ * @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,
-  displaySet,
-}: withAppTypes) {
+  referencedDisplaySetInstanceUID,
+}) {
  const { hangingProtocolService, displaySetService, segmentationService, viewportGridService } =
    servicesManager.services;

-  const { viewports, isHangingProtocolLayout } = viewportGridService.getState();
+  const { viewports } = viewportGridService.getState();

  const viewport = getTargetViewport({ viewportId, viewportGridService });
  const targetViewportId = viewport.viewportOptions.viewportId;
@@ -157,15 +146,14 @@ function getUpdatedViewportsForSegmentation({
  const displaySetInstanceUIDs = viewports.get(targetViewportId).displaySetInstanceUIDs;

  const referenceDisplaySetInstanceUID =
-    displaySet?.referencedDisplaySetInstanceUID || displaySetInstanceUIDs[0];
+    referencedDisplaySetInstanceUID || displaySetInstanceUIDs[0];

  const referencedDisplaySet = displaySetService.getDisplaySetByUID(referenceDisplaySetInstanceUID);
  const segmentationFrameOfReferenceUID = referencedDisplaySet.instances[0].FrameOfReferenceUID;

  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
    targetViewportId,
-    referenceDisplaySetInstanceUID,
-    isHangingProtocolLayout
+    referenceDisplaySetInstanceUID
  );

  viewports.forEach((viewport, viewportId) => {
@@ -186,14 +174,13 @@ function getUpdatedViewportsForSegmentation({
        viewportId,
        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
        viewportOptions: {
-          viewportType: displaySet?.Modality === 'RTSTRUCT' ? 'stack' : 'volume',
+          viewportType: 'volume',
          needsRerendering: true,
        },
      });
    }
  });
-
-  return updatedViewports.filter(v => v.viewportOptions?.viewportType !== 'volume3d');
+  return updatedViewports;
 }

 export {
@@ -12,29 +12,23 @@ function promptHydrateSEG({
  viewportId,
  preHydrateCallbacks,
  hydrateSEGDisplaySet,
-}: withAppTypes) {
+}) {
  const { uiViewportDialogService } = servicesManager.services;
-  const extensionManager = servicesManager._extensionManager;
-  const appConfig = extensionManager._appConfig;

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

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

-      window.setTimeout(async () => {
-        const isHydrated = await hydrateSEGDisplaySet({
-          segDisplaySet,
-          viewportId,
-        });
+      const isHydrated = await hydrateSEGDisplaySet({
+        segDisplaySet,
+        viewportId,
+      });

-        resolve(isHydrated);
-      }, 0);
+      resolve(isHydrated);
    }
  });
 }
@@ -44,13 +38,11 @@ function _askHydrate(uiViewportDialogService, viewportId) {
    const message = 'Do you want to open this Segmentation?';
    const actions = [
      {
-        id: 'no-hydrate',
        type: ButtonEnums.type.secondary,
        text: 'No',
        value: RESPONSE.CANCEL,
      },
      {
-        id: 'yes-hydrate',
        type: ButtonEnums.type.primary,
        text: 'Yes',
        value: RESPONSE.HYDRATE_SEG,
@@ -71,11 +63,6 @@ function _askHydrate(uiViewportDialogService, viewportId) {
        uiViewportDialogService.hide();
        resolve(RESPONSE.CANCEL);
      },
-      onKeyPress: event => {
-        if (event.key === 'Enter') {
-          onSubmit(RESPONSE.HYDRATE_SEG);
-        }
-      },
    });
  });
 }
@@ -1,18 +1,21 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
+import OHIF, { utils } from '@ohif/core';
+import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionBar } from '@ohif/ui';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
 import _getStatusComponent from './_getStatusComponent';

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

-function OHIFCornerstoneSEGViewport(props: withAppTypes) {
+function OHIFCornerstoneSEGViewport(props) {
  const {
    children,
    displaySets,
    viewportOptions,
+    viewportLabel,
    servicesManager,
    extensionManager,
    commandsManager,
@@ -25,8 +28,8 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    displaySetService,
    toolGroupService,
    segmentationService,
+    uiNotificationService,
    customizationService,
-    viewportActionCornersService,
  } = servicesManager.services;

  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;
@@ -111,17 +114,16 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
          orientation: viewportOptions.orientation,
          viewportId: viewportOptions.viewportId,
        }}
-        onElementEnabled={evt => {
-          props.onElementEnabled?.(evt);
-          onElementEnabled(evt);
-        }}
+        onElementEnabled={onElementEnabled}
        onElementDisabled={onElementDisabled}
+        // initialImageIndex={initialImageIndex}
      ></Component>
    );
  }, [viewportId, segDisplaySet, toolGroupId]);

  const onSegmentChange = useCallback(
    direction => {
+      direction = direction === 'left' ? -1 : 1;
      const segmentationId = segDisplaySet.displaySetInstanceUID;
      const segmentation = segmentationService.getSegmentation(segmentationId);

@@ -170,6 +172,14 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
        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',
+            type: 'warning',
+          });
+        }
      }
    );

@@ -246,69 +256,6 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    };
  }, [segDisplaySet]);

-  const hydrateSEGDisplaySet = useCallback(
-    ({ segDisplaySet, viewportId }) => {
-      commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
-        displaySets: [segDisplaySet],
-        viewportId,
-      });
-    },
-    [commandsManager]
-  );
-
-  const onStatusClick = useCallback(async () => {
-    // Before hydrating a SEG and make it added to all viewports in the grid
-    // that share the same frameOfReferenceUID, we need to store the viewport grid
-    // presentation state, so that we can restore it after hydrating the SEG. This is
-    // required if the user has changed the viewport (other viewport than SEG viewport)
-    // presentation state (w/l and invert) and then opens the SEG. If we don't store
-    // the presentation state, the viewport will be reset to the default presentation
-    storePresentationState();
-    const isHydrated = await hydrateSEGDisplaySet({
-      segDisplaySet,
-      viewportId,
-    });
-
-    setIsHydrated(isHydrated);
-  }, [hydrateSEGDisplaySet, segDisplaySet, storePresentationState, viewportId]);
-
-  useEffect(() => {
-    viewportActionCornersService.setComponents([
-      {
-        viewportId,
-        id: 'viewportStatusComponent',
-        component: _getStatusComponent({
-          isHydrated,
-          onStatusClick,
-        }),
-        indexPriority: -100,
-        location: viewportActionCornersService.LOCATIONS.topLeft,
-      },
-      {
-        viewportId,
-        id: 'viewportActionArrowsComponent',
-        component: (
-          <ViewportActionArrows
-            key="actionArrows"
-            onArrowsClick={onSegmentChange}
-            className={
-              viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
-            }
-          ></ViewportActionArrows>
-        ),
-        indexPriority: 0,
-        location: viewportActionCornersService.LOCATIONS.topRight,
-      },
-    ]);
-  }, [
-    activeViewportId,
-    isHydrated,
-    onSegmentChange,
-    onStatusClick,
-    viewportActionCornersService,
-    viewportId,
-  ]);
-
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;

@@ -344,8 +291,61 @@ function OHIFCornerstoneSEGViewport(props: withAppTypes) {
    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
+    // presentation state, so that we can restore it after hydrating the SEG. This is
+    // required if the user has changed the viewport (other viewport than SEG viewport)
+    // presentation state (w/l and invert) and then opens the SEG. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
+    const isHydrated = await hydrateSEGDisplaySet({
+      segDisplaySet,
+      viewportId,
+    });
+
+    setIsHydrated(isHydrated);
+  };
  return (
    <>
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onSegmentChange}
+        getStatusComponent={() => {
+          return _getStatusComponent({
+            isHydrated,
+            onStatusClick,
+          });
+        }}
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          seriesDescription: `SEG Viewport ${SeriesDescription}`,
+          patientInformation: {
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? utils.roundNumber(SliceThickness, 2) : '',
+            thicknessUnits: SliceThickness !== undefined ? 'mm' : '',
+            spacing:
+              SpacingBetweenSlices !== undefined ? utils.roundNumber(SpacingBetweenSlices, 2) : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
      <div className="relative flex h-full w-full flex-row overflow-hidden">
        {segIsLoading && (
          <LoadingIndicatorTotalPercent
@@ -367,6 +367,11 @@ OHIFCornerstoneSEGViewport.propTypes = {
  viewportId: PropTypes.string.isRequired,
  dataSource: PropTypes.object,
  children: PropTypes.node,
+  customProps: PropTypes.object,
+};
+
+OHIFCornerstoneSEGViewport.defaultProps = {
+  customProps: {},
 };

 function _getReferencedDisplaySetMetadata(referencedDisplaySet, segDisplaySet) {
@@ -6,6 +6,9 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
  let ToolTipMessage = null;
  let StatusIcon = null;

+  const { t } = useTranslation('Common');
+  const loadStr = t('LOAD');
+
  switch (isHydrated) {
    case true:
      StatusIcon = () => <Icon name="status-alert" />;
@@ -23,28 +26,23 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
      ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
  }

-  const StatusArea = () => {
-    const { t } = useTranslation('Common');
-    const loadStr = t('LOAD');
-
-    return (
-      <div className="flex h-6 cursor-default text-sm leading-6 text-white">
-        <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
-          <StatusIcon />
-          <span className="ml-1">SEG</span>
-        </div>
-        {!isHydrated && (
-          <div
-            className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
-            // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
-            onMouseUp={onStatusClick}
-          >
-            {loadStr}
-          </div>
-        )}
+  const StatusArea = () => (
+    <div className="flex h-6 cursor-default text-sm leading-6 text-white">
+      <div className="bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1">
+        <StatusIcon />
+        <span className="ml-1">SEG</span>
      </div>
-    );
-  };
+      {!isHydrated && (
+        <div
+          className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={onStatusClick}
+        >
+          {loadStr}
+        </div>
+      )}
+    </div>
+  );

  return (
    <>
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.9.0-beta.54",
+  "version": "3.7.0",
  "description": "OHIF extension for an SR Cornerstone Viewport",
  "author": "OHIF",
  "license": "MIT",
@@ -23,8 +23,6 @@
    "ohif-extension"
  ],
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:cornerstone": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
@@ -34,21 +32,21 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
  },
  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.54",
-    "@ohif/extension-cornerstone": "3.9.0-beta.54",
-    "@ohif/extension-measurement-tracking": "3.9.0-beta.54",
-    "@ohif/ui": "3.9.0-beta.54",
-    "dcmjs": "*",
+    "@ohif/core": "3.7.0",
+    "@ohif/extension-cornerstone": "3.7.0",
+    "@ohif/extension-measurement-tracking": "3.7.0",
+    "@ohif/ui": "3.7.0",
+    "dcmjs": "^0.29.5",
    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
-    "react": "^18.3.1"
+    "react": "^17.0.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.78.1",
-    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/tools": "^1.78.1",
+    "@cornerstonejs/adapters": "^1.20.3",
+    "@cornerstonejs/core": "^1.20.3",
+    "@cornerstonejs/tools": "^1.20.3",
    "classnames": "^2.3.2"
  }
 }
@@ -40,9 +40,7 @@ const _generateReport = (measurementData, additionalFindingTypes, options = {})
  return dataset;
 };

-const commandsModule = (props: withAppTypes) => {
-  const { servicesManager } = props;
-  const { customizationService } = servicesManager.services;
+const commandsModule = ({}) => {
  const actions = {
    /**
     *
@@ -57,7 +55,7 @@ const commandsModule = (props: withAppTypes) => {
      const reportBlob = dcmjs.data.datasetToBlob(srDataset);

      //Create a URL for the binary.
-      const objectUrl = URL.createObjectURL(reportBlob);
+      var objectUrl = URL.createObjectURL(reportBlob);
      window.location.assign(objectUrl);
    },

@@ -97,15 +95,7 @@ const commandsModule = (props: withAppTypes) => {
          throw new Error('Invalid report, no content');
        }

-        const onBeforeDicomStore =
-          customizationService.getModeCustomization('onBeforeDicomStore')?.value;
-
-        let dicomDict;
-        if (typeof onBeforeDicomStore === 'function') {
-          dicomDict = onBeforeDicomStore({ measurementData, naturalizedReport });
-        }
-
-        await dataSource.store.dicom(naturalizedReport, null, dicomDict);
+        await dataSource.store.dicom(naturalizedReport);

        if (StudyInstanceUID) {
          dataSource.deleteStudyMetadataPromise(StudyInstanceUID);
@@ -128,9 +118,13 @@ const commandsModule = (props: withAppTypes) => {
  const definitions = {
    downloadReport: {
      commandFn: actions.downloadReport,
+      storeContexts: [],
+      options: {},
    },
    storeMeasurements: {
      commandFn: actions.storeMeasurements,
+      storeContexts: [],
+      options: {},
    },
  };

@@ -1,6 +1,6 @@
 import { SOPClassHandlerName, SOPClassHandlerId } from './id';
 import { utils, classes, DisplaySetService, Types } from '@ohif/core';
-import addDICOMSRDisplayAnnotation from './utils/addDICOMSRDisplayAnnotation';
+import addMeasurement from './utils/addMeasurement';
 import isRehydratable from './utils/isRehydratable';
 import { adaptersSR } from '@cornerstonejs/adapters';

@@ -85,11 +85,7 @@ function addInstances(instances: InstanceMetadata[], displaySetService: DisplayS
 * @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: AppTypes.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');
@@ -154,37 +150,13 @@ function _getDisplaySetsFromSeries(
  return [displaySet];
 }

-async function _load(displaySet, servicesManager: AppTypes.ServicesManager, extensionManager) {
+function _load(displaySet, servicesManager, extensionManager) {
  const { displaySetService, measurementService } = servicesManager.services;
  const dataSources = extensionManager.getDataSources();
  const dataSource = dataSources[0];

  const { ContentSequence } = displaySet.instance;

-  async function retrieveBulkData(obj, parentObj = null, key = null) {
-    for (const prop in obj) {
-      if (typeof obj[prop] === 'object' && obj[prop] !== null) {
-        await retrieveBulkData(obj[prop], obj, prop);
-      } else if (Array.isArray(obj[prop])) {
-        await Promise.all(obj[prop].map(item => retrieveBulkData(item, obj, prop)));
-      } else if (prop === 'BulkDataURI') {
-        const value = await dataSource.retrieve.bulkDataURI({
-          BulkDataURI: obj[prop],
-          StudyInstanceUID: displaySet.instance.StudyInstanceUID,
-          SeriesInstanceUID: displaySet.instance.SeriesInstanceUID,
-          SOPInstanceUID: displaySet.instance.SOPInstanceUID,
-        });
-        if (parentObj && key) {
-          parentObj[key] = new Float32Array(value);
-        }
-      }
-    }
-  }
-
-  if (displaySet.isLoaded !== true) {
-    await retrieveBulkData(ContentSequence);
-  }
-
  displaySet.referencedImages = _getReferencedImagesList(ContentSequence);
  displaySet.measurements = _getMeasurements(ContentSequence);

@@ -199,12 +171,7 @@ async function _load(displaySet, servicesManager: AppTypes.ServicesManager, exte

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

  // Subscribe to new displaySets as the source may come in after.
@@ -213,23 +180,12 @@ async function _load(displaySet, servicesManager: AppTypes.ServicesManager, exte
    // 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,
-        servicesManager
-      );
+      _checkIfCanAddMeasurementsToDisplaySet(displaySet, newDisplaySet, dataSource);
    });
  });
 }

-function _checkIfCanAddMeasurementsToDisplaySet(
-  srDisplaySet,
-  newDisplaySet,
-  dataSource,
-  servicesManager: AppTypes.ServicesManager
-) {
-  const { customizationService } = servicesManager.services;
+function _checkIfCanAddMeasurementsToDisplaySet(srDisplaySet, newDisplaySet, dataSource) {
  let unloadedMeasurements = srDisplaySet.measurements.filter(
    measurement => measurement.loaded === false
  );
@@ -239,16 +195,12 @@ function _checkIfCanAddMeasurementsToDisplaySet(
    return;
  }

-  if ((!newDisplaySet) instanceof ImageSet) {
+  if (!newDisplaySet instanceof ImageSet) {
    // This also filters out _this_ displaySet, as it is not an ImageSet.
    return;
  }

-  if (newDisplaySet.unsupported) {
-    return;
-  }
-
-  const { sopClassUids } = newDisplaySet;
+  const { sopClassUids, images } = newDisplaySet;

  // Check if any have the newDisplaySet is the correct SOPClass.
  unloadedMeasurements = unloadedMeasurements.filter(measurement =>
@@ -288,37 +240,9 @@ function _checkIfCanAddMeasurementsToDisplaySet(

    if (SOPInstanceUIDs.includes(SOPInstanceUID)) {
      for (let j = unloadedMeasurements.length - 1; j >= 0; j--) {
-        let measurement = unloadedMeasurements[j];
-
-        const onBeforeSRAddMeasurement = customizationService.getModeCustomization(
-          'onBeforeSRAddMeasurement'
-        )?.value;
-
-        if (typeof onBeforeSRAddMeasurement === 'function') {
-          measurement = onBeforeSRAddMeasurement({
-            measurement,
-            StudyInstanceUID: srDisplaySet.StudyInstanceUID,
-            SeriesInstanceUID: srDisplaySet.SeriesInstanceUID,
-          });
-        }
-
+        const measurement = unloadedMeasurements[j];
        if (_measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frameNumber)) {
-          const frame =
-            (measurement.coords[0].ReferencedSOPSequence &&
-              measurement.coords[0].ReferencedSOPSequence?.ReferencedFrameNumber) ||
-            1;
-
-          /** Add DICOMSRDisplay annotation for the SR viewport (only) */
-          addDICOMSRDisplayAnnotation(measurement, imageId, frame);
-
-          /** Update measurement properties */
-          measurement.loaded = true;
-          measurement.imageId = imageId;
-          measurement.displaySetInstanceUID = newDisplaySet.displaySetInstanceUID;
-          measurement.ReferencedSOPInstanceUID =
-            measurement.coords[0].ReferencedSOPSequence.ReferencedSOPInstanceUID;
-          measurement.frameNumber = frame;
-          delete measurement.coords;
+          addMeasurement(measurement, imageId, newDisplaySet.displaySetInstanceUID);

          unloadedMeasurements.splice(j, 1);
        }
@@ -334,7 +258,7 @@ function _measurementReferencesSOPInstanceUID(measurement, SOPInstanceUID, frame
  //  Standard. But for now, we will support only one ReferenceFrameNumber.
  const ReferencedFrameNumber =
    (measurement.coords[0].ReferencedSOPSequence &&
-      measurement.coords[0].ReferencedSOPSequence?.ReferencedFrameNumber) ||
+      measurement.coords[0].ReferencedSOPSequence[0]?.ReferencedFrameNumber) ||
    1;

  if (frameNumber && Number(frameNumber) !== Number(ReferencedFrameNumber)) {
@@ -1,6 +1,6 @@
 import React from 'react';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import { srProtocol } from './getHangingProtocolModule';
+import getHangingProtocolModule, { srProtocol } from './getHangingProtocolModule';
 import onModeEnter from './onModeEnter';
 import getCommandsModule from './commandsModule';
 import preRegistration from './init';
@@ -1,4 +1,5 @@
 import {
+  addTool,
  AngleTool,
  annotation,
  ArrowAnnotateTool,
@@ -8,7 +9,6 @@ import {
  CircleROITool,
  LengthTool,
  PlanarFreehandROITool,
-  RectangleROITool,
 } from '@cornerstonejs/tools';
 import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
 import addToolInstance from './utils/addToolInstance';
@@ -19,25 +19,24 @@ import toolNames from './tools/toolNames';
 * @param {object} configuration
 */
 export default function init({ configuration = {} }: Types.Extensions.ExtensionParams): void {
-  addToolInstance(toolNames.DICOMSRDisplay, DICOMSRDisplayTool);
-  addToolInstance(toolNames.SRLength, LengthTool);
+  addTool(DICOMSRDisplayTool);
+  addToolInstance(toolNames.SRLength, LengthTool, {});
  addToolInstance(toolNames.SRBidirectional, BidirectionalTool);
  addToolInstance(toolNames.SREllipticalROI, EllipticalROITool);
  addToolInstance(toolNames.SRCircleROI, CircleROITool);
  addToolInstance(toolNames.SRArrowAnnotate, ArrowAnnotateTool);
  addToolInstance(toolNames.SRAngle, AngleTool);
-  addToolInstance(toolNames.SRPlanarFreehandROI, PlanarFreehandROITool);
-  addToolInstance(toolNames.SRRectangleROI, RectangleROITool);
-
  // TODO - fix the SR display of Cobb Angle, as it joins the two lines
  addToolInstance(toolNames.SRCobbAngle, CobbAngleTool);
+  // TODO - fix the rehydration of Freehand, as it throws an exception
+  // on a missing polyline. The fix is probably in CS3D
+  addToolInstance(toolNames.SRPlanarFreehandROI, PlanarFreehandROITool);

  // Modify annotation tools to use dashed lines on SR
  const dashedLine = {
    lineDash: '4,4',
  };
  annotation.config.style.setToolGroupToolStyles('SRToolGroup', {
-    [toolNames.DICOMSRDisplay]: dashedLine,
    SRLength: dashedLine,
    SRBidirectional: dashedLine,
    SREllipticalROI: dashedLine,
@@ -46,7 +45,6 @@ export default function init({ configuration = {} }: Types.Extensions.ExtensionP
    SRCobbAngle: dashedLine,
    SRAngle: dashedLine,
    SRPlanarFreehandROI: dashedLine,
-    SRRectangleROI: dashedLine,
    global: {},
  });
 }
@@ -22,14 +22,14 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
  }

  _getTextBoxLinesFromLabels(labels) {
-    // TODO -> max 5 for now (label + shortAxis + longAxis), need a generic solution for this!
+    // TODO -> max 3 for now (label + shortAxis + longAxis), need a generic solution for this!

-    const labelLength = Math.min(labels.length, 5);
+    const labelLength = Math.min(labels.length, 3);
    const lines = [];

    for (let i = 0; i < labelLength; i++) {
      const labelEntry = labels[i];
-      lines.push(`${_labelToShorthand(labelEntry.label)}: ${labelEntry.value}`);
+      lines.push(`${_labelToShorthand(labelEntry.label)}${labelEntry.value}`);
    }

    return lines;
@@ -65,7 +65,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {

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

    if (!viewport._actors?.size) {
@@ -77,24 +77,20 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
      toolName: this.getToolName(),
      viewportId: enabledElement.viewport.id,
    };
-    const { style: annotationStyle } = annotation.config;

    for (let i = 0; i < filteredAnnotations.length; i++) {
      const annotation = filteredAnnotations[i];
      const annotationUID = annotation.annotationUID;
-      const { renderableData, TrackingUniqueIdentifier } = annotation.data;
+      const { renderableData } = annotation.data.cachedStats;
+      const { cachedStats } = annotation.data;
      const { referencedImageId } = annotation.metadata;

      styleSpecifier.annotationUID = annotationUID;

-      const groupStyle = annotationStyle.getToolGroupToolStyles(this.toolGroupId)[
-        this.getToolName()
-      ];
-
      const lineWidth = this.getStyle('lineWidth', styleSpecifier, annotation);
      const lineDash = this.getStyle('lineDash', styleSpecifier, annotation);
      const color =
-        TrackingUniqueIdentifier === activeTrackingUniqueIdentifier
+        cachedStats.TrackingUniqueIdentifier === activeTrackingUniqueIdentifier
          ? 'rgb(0, 255, 0)'
          : this.getStyle('color', styleSpecifier, annotation);

@@ -102,7 +98,6 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
        color,
        lineDash,
        lineWidth,
-        ...groupStyle,
      };

      Object.keys(renderableData).forEach(GraphicType => {
@@ -165,7 +160,6 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
    const drawingOptions = {
      color: options.color,
      width: options.lineWidth,
-      lineDash: options.lineDash,
    };
    let allCanvasCoordinates = [];
    renderableData.map((data, index) => {
@@ -313,7 +307,6 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
        {
          color: options.color,
          width: options.lineWidth,
-          lineDash: options.lineDash,
        }
      );
    });
@@ -346,9 +339,7 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
    const textLines = this._getTextBoxLinesFromLabels(label);
    const canvasTextBoxCoords = utilities.drawing.getTextBoxCoordsCanvas(adaptedCanvasCoordinates);

-    if (!annotation.data?.handles?.textBox?.worldPosition) {
-      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);

@@ -1,13 +1,15 @@
 import { vec3 } from 'gl-matrix';
 import { Types, annotation } from '@cornerstonejs/tools';
 import { metaData, utilities, Types as csTypes } from '@cornerstonejs/core';
-
 import toolNames from '../tools/toolNames';
 import SCOORD_TYPES from '../constants/scoordTypes';

 const EPSILON = 1e-4;

-export default function addDICOMSRDisplayAnnotation(measurement, imageId, frameNumber) {
+const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
+
+export default function addMeasurement(measurement, imageId, displaySetInstanceUID) {
+  // TODO -> Render rotated ellipse .
  const toolName = toolNames.DICOMSRDisplay;

  const measurementData = {
@@ -25,43 +27,59 @@ export default function addDICOMSRDisplayAnnotation(measurement, imageId, frameN
    }

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

+  // Use the metadata provider to grab its imagePlaneModule metadata
  const imagePlaneModule = metaData.get('imagePlaneModule', imageId);

-  /**
-   * This annotation (DICOMSRDisplay) is only used by the SR viewport.
-   * This is used before the annotation is hydrated. If hydrated the measurement will be added
-   * to the measurement service and will be available for the other viewports.
-   */
+  const annotationManager = annotation.state.getAnnotationManager();
+
+  // Create Cornerstone3D Annotation from measurement
+  const frameNumber =
+    (measurement.coords[0].ReferencedSOPSequence &&
+      measurement.coords[0].ReferencedSOPSequence[0]?.ReferencedFrameNumber) ||
+    1;
+
  const SRAnnotation: Types.Annotation = {
    annotationUID: measurement.TrackingUniqueIdentifier,
-    highlighted: false,
-    isLocked: false,
-    invalidated: false,
    metadata: {
-      toolName: toolName,
      FrameOfReferenceUID: imagePlaneModule.frameOfReferenceUID,
+      toolName: toolName,
      referencedImageId: imageId,
    },
    data: {
      label: measurement.labels,
      handles: {
-        textBox: measurement.textBox ?? {},
+        textBox: {},
      },
-      cachedStats: {},
-      TrackingUniqueIdentifier: measurementData.TrackingUniqueIdentifier,
-      renderableData: measurementData.renderableData,
-      frameNumber,
+      cachedStats: {
+        TrackingUniqueIdentifier: measurementData.TrackingUniqueIdentifier,
+        renderableData: measurementData.renderableData,
+      },
+      frameNumber: frameNumber,
    },
  };
-  const annotationManager = annotation.state.getAnnotationManager();
+
  annotationManager.addAnnotation(SRAnnotation);
+
+  measurement.loaded = true;
+  measurement.imageId = imageId;
+  measurement.displaySetInstanceUID = displaySetInstanceUID;
+
+  // Remove the unneeded coord now its processed, but keep the SOPInstanceUID.
+  // NOTE: We assume that each SCOORD in the MeasurementGroup maps onto one frame,
+  // It'd be super weird if it didn't anyway as a SCOORD.
+  measurement.ReferencedSOPInstanceUID =
+    measurement.coords[0].ReferencedSOPSequence.ReferencedSOPInstanceUID;
+  measurement.frameNumber = frameNumber;
+  delete measurement.coords;
 }

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

  switch (GraphicType) {
@@ -43,7 +43,7 @@ const convertSites = (codingValues, sites) => {
 *
 */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager, appConfig }: withAppTypes,
+  { servicesManager, extensionManager, appConfig },
  displaySetInstanceUID
 ) {
  const annotationManager = CsAnnotation.state.getAnnotationManager();
@@ -90,7 +90,7 @@ export default function hydrateStructuredReport(
  const datasetToUse = _mapLegacyDataSet(instance);

  // Use dcmjs to generate toolState.
-  let storedMeasurementByAnnotationType = MeasurementReport.generateToolState(
+  const storedMeasurementByAnnotationType = MeasurementReport.generateToolState(
    datasetToUse,
    // NOTE: we need to pass in the imageIds to dcmjs since the we use them
    // for the imageToWorld transformation. The following assumes that the order
@@ -101,16 +101,6 @@ export default function hydrateStructuredReport(
    metaData
  );

-  const onBeforeSRHydration =
-    customizationService.getModeCustomization('onBeforeSRHydration')?.value;
-
-  if (typeof onBeforeSRHydration === 'function') {
-    storedMeasurementByAnnotationType = onBeforeSRHydration({
-      storedMeasurementByAnnotationType,
-      displaySet,
-    });
-  }
-
  // Filter what is found by DICOM SR to measurements we support.
  const mappingDefinitions = mappings.map(m => m.annotationType);
  const hydratableMeasurementsInSR = {};
@@ -1,31 +1,35 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ExtensionManager } from '@ohif/core';
+import OHIF, { utils, ServicesManager, ExtensionManager } from '@ohif/core';

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

-import { Icon, Tooltip, useViewportGrid, ViewportActionArrows } from '@ohif/ui';
+import { Icon, Tooltip, useViewportGrid, ViewportActionBar } from '@ohif/ui';
 import hydrateStructuredReport from '../utils/hydrateStructuredReport';
 import { useAppConfig } from '@state';
-import createReferencedImageDisplaySet from '../utils/createReferencedImageDisplaySet';
+
+const { formatDate } = utils;

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

 const SR_TOOLGROUP_BASE_NAME = 'SRToolGroup';

-function OHIFCornerstoneSRViewport(props: withAppTypes) {
-  const { children, dataSource, displaySets, viewportOptions, servicesManager, extensionManager } =
-    props;
+function OHIFCornerstoneSRViewport(props) {
+  const {
+    children,
+    dataSource,
+    displaySets,
+    viewportLabel,
+    viewportOptions,
+    servicesManager,
+    extensionManager,
+  } = props;

  const [appConfig] = useAppConfig();

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

  const viewportId = viewportOptions.viewportId;

@@ -44,8 +48,6 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
  const [element, setElement] = useState(null);
  const { viewports, activeViewportId } = viewportGrid;

-  const { t } = useTranslation('Common');
-
  // Optional hook into tracking extension, if present.
  let trackedMeasurements;
  let sendTrackedMeasurementsEvent;
@@ -126,10 +128,6 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
        console.warn('More than one SOPClassUID in the same series is not yet supported.');
      }

-      // if (!srDisplaySet.measurements || !srDisplaySet.measurements.length) {
-      //   return;
-      // }
-
      _getViewportReferencedDisplaySetData(
        srDisplaySet,
        newMeasurementSelected,
@@ -204,10 +202,7 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
          // The positionIds for the viewport aren't meaningful for the child display sets
          positionIds: null,
        }}
-        onElementEnabled={evt => {
-          props.onElementEnabled?.(evt);
-          onElementEnabled(evt);
-        }}
+        onElementEnabled={onElementEnabled}
        initialImageIndex={initialImageIndex}
        isJumpToMeasurementDisabled={true}
      ></Component>
@@ -218,11 +213,18 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
    direction => {
      let newMeasurementSelected = measurementSelected;

-      newMeasurementSelected += direction;
-      if (newMeasurementSelected >= measurementCount) {
-        newMeasurementSelected = 0;
-      } else if (newMeasurementSelected < 0) {
-        newMeasurementSelected = measurementCount - 1;
+      if (direction === 'right') {
+        newMeasurementSelected++;
+
+        if (newMeasurementSelected >= measurementCount) {
+          newMeasurementSelected = 0;
+        }
+      } else {
+        newMeasurementSelected--;
+
+        if (newMeasurementSelected < 0) {
+          newMeasurementSelected = measurementCount - 1;
+        }
      }

      setTrackingIdentifiers(newMeasurementSelected);
@@ -261,15 +263,11 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
   * if it is hydrated we don't even use the SR viewport.
   */
  useEffect(() => {
-    const loadSR = async () => {
-      if (!srDisplaySet.isLoaded) {
-        await srDisplaySet.load();
-      }
-      const numMeasurements = srDisplaySet.measurements.length;
-      setMeasurementCount(numMeasurements);
-      updateViewport(measurementSelected);
-    };
-    loadSR();
+    if (!srDisplaySet.isLoaded) {
+      srDisplaySet.load();
+    }
+    const numMeasurements = srDisplaySet.measurements.length;
+    setMeasurementCount(numMeasurements);
  }, [srDisplaySet]);

  /**
@@ -277,66 +275,28 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
   * the element changes
   */
  useEffect(() => {
-    const updateSR = async () => {
-    if (!srDisplaySet.isLoaded) {
-      await srDisplaySet.load();
-    }
    if (!element || !srDisplaySet.isLoaded) {
      return;
    }
    setTrackingIdentifiers(measurementSelected);
-    }
-    updateSR();
  }, [measurementSelected, element, setTrackingIdentifiers, srDisplaySet]);

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

+  /**
+   * Data fetching for the SR displaySet, which updates the measurements and
+   * also gets the referenced image displaySet that SR is based on.
+   */
  useEffect(() => {
-    viewportActionCornersService.setComponents([
-      {
-        viewportId,
-        id: 'viewportStatusComponent',
-        component: _getStatusComponent({
-          srDisplaySet,
-          viewportId,
-          isRehydratable: srDisplaySet.isRehydratable,
-          isLocked,
-          sendTrackedMeasurementsEvent,
-          t,
-        }),
-        indexPriority: -100,
-        location: viewportActionCornersService.LOCATIONS.topLeft,
-      },
-      {
-        viewportId,
-        id: 'viewportActionArrowsComponent',
-        index: 0,
-        component: (
-          <ViewportActionArrows
-            key="actionArrows"
-            onArrowsClick={onMeasurementChange}
-          ></ViewportActionArrows>
-        ),
-        indexPriority: 0,
-        location: viewportActionCornersService.LOCATIONS.topRight,
-      },
-    ]);
-  }, [
-    isLocked,
-    onMeasurementChange,
-    sendTrackedMeasurementsEvent,
-    srDisplaySet,
-    t,
-    viewportActionCornersService,
-    viewportId,
-  ]);
+    updateViewport(measurementSelected);
+  }, [dataSource, srDisplaySet]);

  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  let childrenWithProps = null;
@@ -357,8 +317,57 @@ function OHIFCornerstoneSRViewport(props: withAppTypes) {
    });
  }

+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+    ManufacturerModelName,
+    StudyDate,
+    SeriesDescription,
+    SpacingBetweenSlices,
+    SeriesNumber,
+  } = referencedDisplaySetMetadata;
+
+  // TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
  return (
    <>
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onMeasurementChange}
+        getStatusComponent={() =>
+          _getStatusComponent({
+            srDisplaySet,
+            viewportId,
+            isTracked: false,
+            isRehydratable: srDisplaySet.isRehydratable,
+            isLocked,
+            sendTrackedMeasurementsEvent,
+          })
+        }
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          currentSeries: SeriesNumber,
+          seriesDescription: SeriesDescription || '',
+          patientInformation: {
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
      <div className="relative flex h-full w-full flex-row overflow-hidden">
        {getCornerstoneViewport()}
        {childrenWithProps}
@@ -373,11 +382,17 @@ OHIFCornerstoneSRViewport.propTypes = {
  dataSource: PropTypes.object,
  children: PropTypes.node,
  viewportLabel: PropTypes.string,
+  customProps: PropTypes.object,
  viewportOptions: PropTypes.object,
-  servicesManager: PropTypes.object.isRequired,
+  viewportLabel: PropTypes.string,
+  servicesManager: PropTypes.instanceOf(ServicesManager).isRequired,
  extensionManager: PropTypes.instanceOf(ExtensionManager).isRequired,
 };

+OHIFCornerstoneSRViewport.defaultProps = {
+  customProps: {},
+};
+
 async function _getViewportReferencedDisplaySetData(
  displaySet,
  measurementSelected,
@@ -387,13 +402,6 @@ async function _getViewportReferencedDisplaySetData(
  const measurement = measurements[measurementSelected];

  const { displaySetInstanceUID } = measurement;
-  if (!displaySet.keyImageDisplaySet) {
-    // Create a new display set, and preserve a reference to it here,
-    // so that it can be re-displayed and shown inside the SR viewport.
-    // This is only for ease of redisplay - the display set is stored in the
-    // usual manner in the display set service.
-    displaySet.keyImageDisplaySet = createReferencedImageDisplaySet(displaySetService, displaySet);
-  }

  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);

@@ -421,7 +429,6 @@ function _getStatusComponent({
  isRehydratable,
  isLocked,
  sendTrackedMeasurementsEvent,
-  t,
 }) {
  const handleMouseUp = () => {
    sendTrackedMeasurementsEvent('HYDRATE_SR', {
@@ -430,6 +437,7 @@ function _getStatusComponent({
    });
  };

+  const { t } = useTranslation('Common');
  const loadStr = t('LOAD');

  // 1 - Incompatible
@@ -1,8 +0,0 @@
-const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
-const SRC_DIR = path.join(__dirname, '../src');
-const DIST_DIR = path.join(__dirname, '../dist');
-
-module.exports = (env, argv) => {
-  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
-};
@@ -1,54 +0,0 @@
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
-const path = require('path');
-const webpackCommon = require('./../../../.webpack/webpack.base.js');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const pkg = require('./../package.json');
-
-const ROOT_DIR = path.join(__dirname, '../');
-const SRC_DIR = path.join(__dirname, '../src');
-const DIST_DIR = path.join(__dirname, '../dist');
-const ENTRY = {
-  app: `${SRC_DIR}/index.ts`,
-};
-
-const outputName = `ohif-${pkg.name.split('/').pop()}`;
-
-module.exports = (env, argv) => {
-  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
-
-  return merge(commonConfig, {
-    stats: {
-      colors: true,
-      hash: true,
-      timings: true,
-      assets: true,
-      chunks: false,
-      chunkModules: false,
-      modules: false,
-      children: false,
-      warnings: true,
-    },
-    optimization: {
-      minimize: true,
-      sideEffects: true,
-    },
-    output: {
-      path: ROOT_DIR,
-      library: 'ohif-extension-cornerstone',
-      libraryTarget: 'umd',
-      filename: pkg.main,
-    },
-    externals: [/\b(vtk.js)/, /\b(dcmjs)/, /\b(gl-matrix)/, /^@ohif/, /^@cornerstonejs/],
-    plugins: [
-      new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
-      new MiniCssExtractPlugin({
-        filename: `./dist/${outputName}.css`,
-        chunkFilename: `./dist/${outputName}.css`,
-      }),
-    ],
-  });
-};
@@ -1,682 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [3.9.0-beta.54](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.53...v3.9.0-beta.54) (2024-06-28)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.53](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.52...v3.9.0-beta.53) (2024-06-28)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.52](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.51...v3.9.0-beta.52) (2024-06-27)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.51](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.50...v3.9.0-beta.51) (2024-06-27)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.50](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.49...v3.9.0-beta.50) (2024-06-26)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.49](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.48...v3.9.0-beta.49) (2024-06-26)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.48](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.47...v3.9.0-beta.48) (2024-06-25)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.47](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.46...v3.9.0-beta.47) (2024-06-21)
-
-
-### Bug Fixes
-
-* Allow the mode setup/creation to be async, and provide a few more values to extension/app config/mode setup. ([#4016](https://github.com/OHIF/Viewers/issues/4016)) ([88575c6](https://github.com/OHIF/Viewers/commit/88575c6c09fd778a31b2f91524163ce65d1639dd))
-
-
-### Features
-
-* customization service append and customize functionality should run once ([#4238](https://github.com/OHIF/Viewers/issues/4238)) ([e462fd3](https://github.com/OHIF/Viewers/commit/e462fd31f7944acfee34f08cfbc28cfd9de16169))
-
-
-
-
-
-# [3.9.0-beta.46](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.45...v3.9.0-beta.46) (2024-06-18)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.45](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.44...v3.9.0-beta.45) (2024-06-18)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.44](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.43...v3.9.0-beta.44) (2024-06-17)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.43](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.42...v3.9.0-beta.43) (2024-06-12)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.42](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.41...v3.9.0-beta.42) (2024-06-12)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.41](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.40...v3.9.0-beta.41) (2024-06-12)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.40](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.39...v3.9.0-beta.40) (2024-06-12)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.39](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.38...v3.9.0-beta.39) (2024-06-08)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.38](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.37...v3.9.0-beta.38) (2024-06-07)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.37](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.36...v3.9.0-beta.37) (2024-06-05)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.36](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.35...v3.9.0-beta.36) (2024-06-05)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.35](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.34...v3.9.0-beta.35) (2024-06-05)
-
-
-### Bug Fixes
-
-* **seg:** maintain algorithm name and algorithm type when DICOM seg is exported or downloaded ([#4203](https://github.com/OHIF/Viewers/issues/4203)) ([a29e94d](https://github.com/OHIF/Viewers/commit/a29e94de803f79bbb3372d00ad8eb14b4224edc2))
-
-
-
-
-
-# [3.9.0-beta.34](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.33...v3.9.0-beta.34) (2024-06-05)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.33](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.32...v3.9.0-beta.33) (2024-06-05)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.32](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.31...v3.9.0-beta.32) (2024-05-31)
-
-
-### Bug Fixes
-
-* **tmtv:** crosshairs should not have viewport indicators ([#4197](https://github.com/OHIF/Viewers/issues/4197)) ([f85da32](https://github.com/OHIF/Viewers/commit/f85da32f34389ef7cecae03c07e0af26468b52a6))
-
-
-
-
-
-# [3.9.0-beta.31](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.30...v3.9.0-beta.31) (2024-05-30)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.30](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.29...v3.9.0-beta.30) (2024-05-30)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.29](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.28...v3.9.0-beta.29) (2024-05-30)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.28](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.27...v3.9.0-beta.28) (2024-05-30)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.27](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.26...v3.9.0-beta.27) (2024-05-29)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.26](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.25...v3.9.0-beta.26) (2024-05-29)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.25](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.24...v3.9.0-beta.25) (2024-05-29)
-
-
-### Bug Fixes
-
-* **ultrasound:** Upgrade cornerstone3D version to resolve coloring issues ([#4181](https://github.com/OHIF/Viewers/issues/4181)) ([75a71db](https://github.com/OHIF/Viewers/commit/75a71db7f89840250ad1c2b35df5a35aceb8be7d))
-
-
-
-
-
-# [3.9.0-beta.24](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.23...v3.9.0-beta.24) (2024-05-29)
-
-
-### Features
-
-* **measurements:** show untracked measurements in measurement panel under additional findings ([#4160](https://github.com/OHIF/Viewers/issues/4160)) ([18686c2](https://github.com/OHIF/Viewers/commit/18686c2caf13ede3e881303100bd4cc34b8b135f))
-
-
-
-
-
-# [3.9.0-beta.23](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.22...v3.9.0-beta.23) (2024-05-28)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.22](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.21...v3.9.0-beta.22) (2024-05-27)
-
-
-### Features
-
-* **ui:** move to React 18 and base for using shadcn/ui ([#4174](https://github.com/OHIF/Viewers/issues/4174)) ([70f2c79](https://github.com/OHIF/Viewers/commit/70f2c797f42af603d7ea0eb8d23b4103aba66f77))
-
-
-
-
-
-# [3.9.0-beta.21](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.20...v3.9.0-beta.21) (2024-05-24)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.20](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.19...v3.9.0-beta.20) (2024-05-24)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.19](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.18...v3.9.0-beta.19) (2024-05-24)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.18](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.17...v3.9.0-beta.18) (2024-05-24)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.17](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.16...v3.9.0-beta.17) (2024-05-23)
-
-
-### Bug Fixes
-
-* **crosshairs:** reset angle, position, and slabthickness for crosshairs when reset viewport tool is used ([#4113](https://github.com/OHIF/Viewers/issues/4113)) ([73d9e99](https://github.com/OHIF/Viewers/commit/73d9e99d5d6f38ab6c36f4471d54f18798feacb4))
-
-
-
-
-
-# [3.9.0-beta.16](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.15...v3.9.0-beta.16) (2024-05-23)
-
-
-### Bug Fixes
-
-* dicom json for orthanc by Update package versions for [@cornerstonejs](https://github.com/cornerstonejs) dependencies ([#4165](https://github.com/OHIF/Viewers/issues/4165)) ([34c7d72](https://github.com/OHIF/Viewers/commit/34c7d72142847486b98c9c52469940083eeaf87e))
-
-
-
-
-
-# [3.9.0-beta.15](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.14...v3.9.0-beta.15) (2024-05-22)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.14](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.13...v3.9.0-beta.14) (2024-05-21)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.13](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.12...v3.9.0-beta.13) (2024-05-21)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.12](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.11...v3.9.0-beta.12) (2024-05-21)
-
-
-### Bug Fixes
-
-* **segmentation:** Address issue where segmentation creation failed on layout change ([#4153](https://github.com/OHIF/Viewers/issues/4153)) ([29944c8](https://github.com/OHIF/Viewers/commit/29944c8512c35718af03c03ef82bc43675ee1872))
-
-
-
-
-
-# [3.9.0-beta.11](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.10...v3.9.0-beta.11) (2024-05-21)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.10](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.9...v3.9.0-beta.10) (2024-05-21)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.9](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.8...v3.9.0-beta.9) (2024-05-17)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.8](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.7...v3.9.0-beta.8) (2024-05-16)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.7](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.6...v3.9.0-beta.7) (2024-05-15)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.6](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.5...v3.9.0-beta.6) (2024-05-15)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.5](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.4...v3.9.0-beta.5) (2024-05-14)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.4](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.3...v3.9.0-beta.4) (2024-05-14)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.3](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.2...v3.9.0-beta.3) (2024-05-08)
-
-
-### Features
-
-* **typings:** Enhance typing support with withAppTypes and custom services throughout OHIF ([#4090](https://github.com/OHIF/Viewers/issues/4090)) ([374065b](https://github.com/OHIF/Viewers/commit/374065bc3bad9d212f9817a8d41546cc64cfabfb))
-
-
-
-
-
-# [3.9.0-beta.2](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.1...v3.9.0-beta.2) (2024-05-06)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.9.0-beta.1](https://github.com/OHIF/Viewers/compare/v3.9.0-beta.0...v3.9.0-beta.1) (2024-05-06)
-
-
-### Bug Fixes
-
-* **rt:** enhanced RT support, utilize SVGs for rendering. ([#4074](https://github.com/OHIF/Viewers/issues/4074)) ([0156bc4](https://github.com/OHIF/Viewers/commit/0156bc426f1840ae0d090223e94a643726e856cb))
-
-
-
-
-
-# [3.9.0-beta.0](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.94...v3.9.0-beta.0) (2024-04-29)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.94](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.93...v3.8.0-beta.94) (2024-04-29)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.93](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.92...v3.8.0-beta.93) (2024-04-29)
-
-
-### Bug Fixes
-
-* **toolbox:** Preserve user-specified tool state and streamline command execution ([#4063](https://github.com/OHIF/Viewers/issues/4063)) ([f1a736d](https://github.com/OHIF/Viewers/commit/f1a736d1934733a434cb87b2c284907a3122403f))
-
-
-
-
-
-# [3.8.0-beta.92](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.91...v3.8.0-beta.92) (2024-04-28)
-
-
-### Bug Fixes
-
-* **bugs:** fix patient header for doc, track ball rotate resize observer and add segmentation button not being enabled on viewport data change ([#4068](https://github.com/OHIF/Viewers/issues/4068)) ([c09311d](https://github.com/OHIF/Viewers/commit/c09311d3b7df05fcd00a9f36a7233e9d7e5589d0))
-
-
-
-
-
-# [3.8.0-beta.91](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.90...v3.8.0-beta.91) (2024-04-25)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.90](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.89...v3.8.0-beta.90) (2024-04-22)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.89](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.88...v3.8.0-beta.89) (2024-04-22)
-
-
-### Bug Fixes
-
-* **viewport-webworker-segmentation:** Resolve issues with viewport detection, webworker termination, and segmentation panel layout change ([#4059](https://github.com/OHIF/Viewers/issues/4059)) ([52a0c59](https://github.com/OHIF/Viewers/commit/52a0c59294a4161fcca0a6708855549034849951))
-
-
-
-
-
-# [3.8.0-beta.88](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.87...v3.8.0-beta.88) (2024-04-22)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.87](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.86...v3.8.0-beta.87) (2024-04-19)
-
-
-### Features
-
-* **tmtv-mode:** Add Brush tools and move SUV peak calculation to web worker ([#4053](https://github.com/OHIF/Viewers/issues/4053)) ([8192e34](https://github.com/OHIF/Viewers/commit/8192e348eca993fec331d4963efe88f9a730eceb))
-
-
-
-
-
-# [3.8.0-beta.86](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.85...v3.8.0-beta.86) (2024-04-19)
-
-
-### Bug Fixes
-
-* **layouts:** and fix thumbnail in touch and update migration guide for 3.8 release ([#4052](https://github.com/OHIF/Viewers/issues/4052)) ([d250d04](https://github.com/OHIF/Viewers/commit/d250d04580883446fcb8d748b2a97c5c198922af))
-
-
-
-
-
-# [3.8.0-beta.85](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.84...v3.8.0-beta.85) (2024-04-18)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.84](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.83...v3.8.0-beta.84) (2024-04-18)
-
-
-### Bug Fixes
-
-* **bugs:** and replace seriesInstanceUID and seriesInstanceUIDs URL with seriesInstanceUIDs ([#4049](https://github.com/OHIF/Viewers/issues/4049)) ([da7c1a5](https://github.com/OHIF/Viewers/commit/da7c1a5d8c54bfa1d3f97bbc500386bf76e7fd9d))
-
-
-
-
-
-# [3.8.0-beta.83](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.82...v3.8.0-beta.83) (2024-04-18)
-
-
-### Bug Fixes
-
-* **bugs:** enhancements and bug fixes - final ([#4048](https://github.com/OHIF/Viewers/issues/4048)) ([170bb96](https://github.com/OHIF/Viewers/commit/170bb96983082c39b22b7352e0c54aacf3e73b02))
-
-
-
-
-
-# [3.8.0-beta.82](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.81...v3.8.0-beta.82) (2024-04-17)
-
-
-### Bug Fixes
-
-* **bugs:** enhancements and bug fixes - more ([#4043](https://github.com/OHIF/Viewers/issues/4043)) ([3754c22](https://github.com/OHIF/Viewers/commit/3754c224b4dab28182adb0a41e37d890942144d8))
-
-
-
-
-
-# [3.8.0-beta.81](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.80...v3.8.0-beta.81) (2024-04-16)
-
-
-### Bug Fixes
-
-* **viewport:** Reset viewport state and fix CINE looping, thumbnail resolution, and dynamic tool settings ([#4037](https://github.com/OHIF/Viewers/issues/4037)) ([f99a0bf](https://github.com/OHIF/Viewers/commit/f99a0bfb31434aa137bbb3ed1f9eef1dfcc09025))
-
-
-
-
-
-# [3.8.0-beta.80](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.79...v3.8.0-beta.80) (2024-04-16)
-
-
-### Bug Fixes
-
-* **bugs:** enhancements and bug fixes ([#4036](https://github.com/OHIF/Viewers/issues/4036)) ([e80fc6f](https://github.com/OHIF/Viewers/commit/e80fc6f47708e1d6b1a1e1de438196a4b74ec637))
-
-
-
-
-
-# [3.8.0-beta.79](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.78...v3.8.0-beta.79) (2024-04-10)
-
-
-### Features
-
-* **SM:** remove SM measurements from measurement panel ([#4022](https://github.com/OHIF/Viewers/issues/4022)) ([df49a65](https://github.com/OHIF/Viewers/commit/df49a653be61a93f6e9fb3663aabe9775c31fd13))
-
-
-
-
-
-# [3.8.0-beta.78](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.77...v3.8.0-beta.78) (2024-04-10)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.77](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.76...v3.8.0-beta.77) (2024-04-10)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.76](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.75...v3.8.0-beta.76) (2024-04-10)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.75](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.74...v3.8.0-beta.75) (2024-04-10)
-
-**Note:** Version bump only for package @ohif/extension-cornerstone-dynamic-volume
-
-
-
-
-
-# [3.8.0-beta.74](https://github.com/OHIF/Viewers/compare/v3.8.0-beta.73...v3.8.0-beta.74) (2024-04-10)
-
-
-### Features
-
-* **4D:** Add 4D dynamic volume rendering and new pre-clinical 4d pt/ct mode ([#3664](https://github.com/OHIF/Viewers/issues/3664)) ([d57e8bc](https://github.com/OHIF/Viewers/commit/d57e8bc1571c6da4effaa492ee2d162c552365a2))
@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2023 cornerstone-dynamic-volume ()
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,8 +0,0 @@
-# cornerstone-dynamic-volume
-## Description
-
-## Author
-OHIF
-
-## License
-MIT
@@ -1 +0,0 @@
-module.exports = require('../../babel.config.js');
@@ -1,50 +0,0 @@
-{
-  "name": "@ohif/extension-cornerstone-dynamic-volume",
-  "version": "3.9.0-beta.54",
-  "description": "OHIF extension for 4D volumes data",
-  "author": "OHIF",
-  "license": "MIT",
-  "repository": "OHIF/Viewers",
-  "main": "dist/ohif-extension-cornerstone-dynamic-volume.umd.js",
-  "module": "src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./types": "./src/types/index.ts"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
-    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
-    "build:package": "yarn run build",
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
-    "start": "yarn run dev",
-    "test:unit": "jest --watchAll",
-    "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
-  },
-  "peerDependencies": {
-    "@ohif/core": "3.9.0-beta.54",
-    "@ohif/extension-cornerstone": "3.9.0-beta.54",
-    "@ohif/extension-default": "3.9.0-beta.54",
-    "@ohif/i18n": "3.9.0-beta.54",
-    "@ohif/ui": "3.9.0-beta.54",
-    "dcmjs": "*",
-    "dicom-parser": "^1.8.21",
-    "hammerjs": "^2.0.8",
-    "prop-types": "^15.6.2",
-    "react": "^18.3.1"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.78.1",
-    "@cornerstonejs/tools": "^1.78.1",
-    "classnames": "^2.3.2"
-  }
-}
@@ -1,3 +0,0 @@
-import updateSegmentationsChartDisplaySet from './updateSegmentationsChartDisplaySet';
-
-export { updateSegmentationsChartDisplaySet };
@@ -1,281 +0,0 @@
-import { DicomMetadataStore, utils } from '@ohif/core';
-
-import * as cs from '@cornerstonejs/core';
-import * as csTools from '@cornerstonejs/tools';
-
-const CHART_MODALITY = 'CHT';
-const SEG_CHART_INSTANCE_UID = utils.guid();
-
-// Private SOPClassUid for chart data
-const ChartDataSOPClassUid = '1.9.451.13215.7.3.2.7.6.1';
-
-const { utilities: csToolsUtils } = csTools;
-
-function _getDateTimeStr() {
-  const now = new Date();
-  const date =
-    now.getFullYear() + ('0' + now.getUTCMonth()).slice(-2) + ('0' + now.getUTCDate()).slice(-2);
-  const time =
-    ('0' + now.getUTCHours()).slice(-2) +
-    ('0' + now.getUTCMinutes()).slice(-2) +
-    ('0' + now.getUTCSeconds()).slice(-2);
-
-  return { date, time };
-}
-
-function _getTimePointsDataByTagName(volume, timePointsTag) {
-  const uniqueTimePoints = volume.imageIds.reduce((timePoints, imageId) => {
-    const instance = DicomMetadataStore.getInstanceByImageId(imageId);
-    const timePointValue = instance[timePointsTag];
-
-    if (timePointValue !== undefined) {
-      timePoints.add(timePointValue);
-    }
-
-    return timePoints;
-  }, new Set());
-
-  return Array.from(uniqueTimePoints).sort((a: number, b: number) => a - b);
-}
-
-function _convertTimePointsUnit(timePoints, timePointsUnit) {
-  const validUnits = ['ms', 's', 'm', 'h'];
-  const divisors = [1000, 60, 60];
-  const currentUnitIndex = validUnits.indexOf(timePointsUnit);
-  let divisor = 1;
-
-  if (currentUnitIndex !== -1) {
-    for (let i = currentUnitIndex; i < validUnits.length - 1; i++) {
-      const newDivisor = divisor * divisors[i];
-      const greaterThanDivisorCount = timePoints.filter(timePoint => timePoint > newDivisor).length;
-
-      // Change the scale only if more than 50% of the time points are
-      // greater than the new divisor.
-      if (greaterThanDivisorCount <= timePoints.length / 2) {
-        break;
-      }
-
-      divisor = newDivisor;
-      timePointsUnit = validUnits[i + 1];
-    }
-
-    if (divisor > 1) {
-      timePoints = timePoints.map(timePoint => timePoint / divisor);
-    }
-  }
-
-  return { timePoints, timePointsUnit };
-}
-
-// It currently supports only one tag but a few other will be added soon
-// Supported 4D Tags
-//   (0018,1060) Trigger Time                   [NOK]
-//   (0018,0081) Echo Time                      [NOK]
-//   (0018,0086) Echo Number                    [NOK]
-//   (0020,0100) Temporal Position Identifier   [NOK]
-//   (0054,1300) FrameReferenceTime             [OK]
-function _getTimePointsData(volume) {
-  const timePointsTags = {
-    FrameReferenceTime: {
-      unit: 'ms',
-    },
-  };
-
-  const timePointsTagNames = Object.keys(timePointsTags);
-  let timePoints;
-  let timePointsUnit;
-
-  for (let i = 0; i < timePointsTagNames.length; i++) {
-    const tagName = timePointsTagNames[i];
-    const curTimePoints = _getTimePointsDataByTagName(volume, tagName);
-
-    if (curTimePoints.length) {
-      timePoints = curTimePoints;
-      timePointsUnit = timePointsTags[tagName].unit;
-      break;
-    }
-  }
-
-  if (!timePoints.length) {
-    const concatTagNames = timePointsTagNames.join(', ');
-
-    throw new Error(`Could not extract time points data for the following tags: ${concatTagNames}`);
-  }
-
-  const convertedTimePoints = _convertTimePointsUnit(timePoints, timePointsUnit);
-
-  timePoints = convertedTimePoints.timePoints;
-  timePointsUnit = convertedTimePoints.timePointsUnit;
-
-  return { timePoints, timePointsUnit };
-}
-
-function _getSegmentationData(segmentation, volumesTimePointsCache, displaySetService) {
-  const displaySets = displaySetService.getActiveDisplaySets();
-
-  const dynamic4DDisplaySet = displaySets.find(displaySet => {
-    const anInstance = displaySet.instances?.[0];
-
-    if (anInstance) {
-      return (
-        anInstance.FrameReferenceTime !== undefined || anInstance.NumberOfTimeSlices !== undefined
-      );
-    }
-
-    return false;
-  });
-
-  // const referencedDynamicVolume = cs.cache.getVolume(dynamic4DDisplaySet.displaySetInstanceUID);
-  let volumeCacheKey: string | undefined;
-  const volumeId = dynamic4DDisplaySet.displaySetInstanceUID;
-
-  for (const [key] of cs.cache._volumeCache) {
-    if (key.includes(volumeId)) {
-      volumeCacheKey = key;
-      break;
-    }
-  }
-
-  let referencedDynamicVolume;
-  if (volumeCacheKey) {
-    referencedDynamicVolume = cs.cache.getVolume(volumeCacheKey);
-  }
-
-  const { StudyInstanceUID, StudyDescription } = DicomMetadataStore.getInstanceByImageId(
-    referencedDynamicVolume.imageIds[0]
-  );
-
-  const [timeData, _] = csToolsUtils.dynamicVolume.getDataInTime(referencedDynamicVolume, {
-    maskVolumeId: segmentation.id,
-  }) as number[][];
-
-  const pixelCount = timeData.length;
-
-  if (pixelCount === 0) {
-    return [];
-  }
-
-  // since we only use one segmentation representation per segmentationId
-  // it is fine to pick the first one
-  const segmentationRepresentations = csTools.segmentation.state.getSegmentationIdRepresentations(
-    segmentation.id
-  );
-
-  const segmentationRepresentationUID =
-    segmentationRepresentations[0].segmentationRepresentationUID;
-
-  const toolGroupId = csTools.segmentation.state.getToolGroupIdFromSegmentationRepresentationUID(
-    segmentationRepresentationUID
-  );
-
-  // Todo: this is useless we should be able to grab color with just segRepUID and segmentIndex
-  const color = csTools.segmentation.config.color.getColorForSegmentIndex(
-    toolGroupId,
-    segmentationRepresentationUID,
-    1 // segmentIndex
-  );
-
-  const hexColor = cs.utilities.color.rgbToHex(...color);
-  let timePointsData = volumesTimePointsCache.get(referencedDynamicVolume);
-
-  if (!timePointsData) {
-    timePointsData = _getTimePointsData(referencedDynamicVolume);
-    volumesTimePointsCache.set(referencedDynamicVolume, timePointsData);
-  }
-
-  const { timePoints, timePointsUnit } = timePointsData;
-
-  if (timePoints.length !== timeData[0].length) {
-    throw new Error('Invalid number of time points returned');
-  }
-
-  const timepointsCount = timePoints.length;
-  const chartSeriesData = new Array(timepointsCount);
-
-  for (let i = 0; i < timepointsCount; i++) {
-    const average = timeData.reduce((acc, cur) => acc + cur[i] / pixelCount, 0);
-
-    chartSeriesData[i] = [timePoints[i], average];
-  }
-
-  return {
-    StudyInstanceUID,
-    StudyDescription,
-    chartData: {
-      series: {
-        label: segmentation.label,
-        points: chartSeriesData,
-        color: hexColor,
-      },
-      axis: {
-        x: {
-          label: `Time (${timePointsUnit})`,
-        },
-        y: {
-          label: `Vl (Bq/ml)`,
-        },
-      },
-    },
-  };
-}
-
-function _getInstanceFromSegmentations(segmentations, displaySetService) {
-  if (!segmentations.length) {
-    return;
-  }
-
-  const volumesTimePointsCache = new WeakMap();
-  const segmentationsData = segmentations.map(segmentation =>
-    _getSegmentationData(segmentation, volumesTimePointsCache, displaySetService)
-  );
-
-  const { date: seriesDate, time: seriesTime } = _getDateTimeStr();
-  const series = segmentationsData.reduce((allSeries, curSegData) => {
-    return [...allSeries, curSegData.chartData.series];
-  }, []);
-
-  const instance = {
-    SOPClassUID: ChartDataSOPClassUid,
-    Modality: CHART_MODALITY,
-    SOPInstanceUID: utils.guid(),
-    SeriesDate: seriesDate,
-    SeriesTime: seriesTime,
-    SeriesInstanceUID: SEG_CHART_INSTANCE_UID,
-    StudyInstanceUID: segmentationsData[0].StudyInstanceUID,
-    StudyDescription: segmentationsData[0].StudyDescription,
-    SeriesNumber: 100,
-    SeriesDescription: 'Segmentation chart series data',
-    chartData: {
-      series,
-      axis: { ...segmentationsData[0].chartData.axis },
-    },
-  };
-
-  const seriesMetadata = {
-    StudyInstanceUID: instance.StudyInstanceUID,
-    StudyDescription: instance.StudyDescription,
-    SeriesInstanceUID: instance.SeriesInstanceUID,
-    SeriesDescription: instance.SeriesDescription,
-    SeriesNumber: instance.SeriesNumber,
-    SeriesTime: instance.SeriesTime,
-    SOPClassUID: instance.SOPClassUID,
-    Modality: instance.Modality,
-  };
-
-  return { seriesMetadata, instance };
-}
-
-function updateSegmentationsChartDisplaySet({ servicesManager }: withAppTypes): void {
-  const { segmentationService, displaySetService } = servicesManager.services;
-  const segmentations = segmentationService.getSegmentations();
-  const { seriesMetadata, instance } =
-    _getInstanceFromSegmentations(segmentations, displaySetService) ?? {};
-
-  if (seriesMetadata && instance) {
-    // An event is triggered after adding the instance and the displaySet is created
-    DicomMetadataStore.addSeriesMetadata([seriesMetadata], true);
-    DicomMetadataStore.addInstances([instance], true);
-  }
-}
-
-export { updateSegmentationsChartDisplaySet as default };
@@ -1,407 +0,0 @@
-import * as importedActions from './actions';
-import { utilities, Enums } from '@cornerstonejs/tools';
-import { cache } from '@cornerstonejs/core';
-
-const LABELMAP = Enums.SegmentationRepresentations.Labelmap;
-
-const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
-  const services = servicesManager.services;
-  const { displaySetService, viewportGridService, segmentationService } = services;
-
-  const actions = {
-    ...importedActions,
-    getDynamic4DDisplaySet: () => {
-      const displaySets = displaySetService.getActiveDisplaySets();
-
-      const dynamic4DDisplaySet = displaySets.find(displaySet => {
-        const anInstance = displaySet.instances?.[0];
-
-        if (anInstance) {
-          return (
-            anInstance.FrameReferenceTime !== undefined ||
-            anInstance.NumberOfTimeSlices !== undefined ||
-            anInstance.TemporalPositionIdentifier !== undefined
-          );
-        }
-
-        return false;
-      });
-
-      return dynamic4DDisplaySet;
-    },
-    getComputedDisplaySets: () => {
-      const displaySetCache = displaySetService.getDisplaySetCache();
-      const cachedDisplaySets = [...displaySetCache.values()];
-      const computedDisplaySets = cachedDisplaySets.filter(displaySet => {
-        return displaySet.isDerived;
-      });
-      return computedDisplaySets;
-    },
-    exportTimeReportCSV: ({ segmentations, config, options, summaryStats }) => {
-      const dynamic4DDisplaySet = actions.getDynamic4DDisplaySet();
-
-      const volumeId = dynamic4DDisplaySet?.displaySetInstanceUID;
-
-      // cache._volumeCache is a map that has a key that includes the volumeId
-      // it is not exactly the volumeId, but it is the key that includes the volumeId
-      // so we can't do cache._volumeCache.get(volumeId) we should iterate
-      // over the keys and find the one that includes the volumeId
-      let volumeCacheKey: string | undefined;
-
-      for (const [key] of cache._volumeCache) {
-        if (key.includes(volumeId)) {
-          volumeCacheKey = key;
-          break;
-        }
-      }
-
-      let dynamicVolume;
-      if (volumeCacheKey) {
-        dynamicVolume = cache.getVolume(volumeCacheKey);
-      }
-
-      const instance = dynamic4DDisplaySet.instances[0];
-
-      const csv = [];
-
-      // CSV header information with placeholder empty values for the metadata lines
-      csv.push(`Patient ID,${instance.PatientID},`);
-      csv.push(`Study Date,${instance.StudyDate},`);
-      csv.push(`StudyInstanceUID,${instance.StudyInstanceUID},`);
-      csv.push(`StudyDescription,${instance.StudyDescription},`);
-      csv.push(`SeriesInstanceUID,${instance.SeriesInstanceUID},`);
-
-      // empty line
-      csv.push('');
-      csv.push('');
-
-      // Helper function to calculate standard deviation
-      function calculateStandardDeviation(data) {
-        const n = data.length;
-        const mean = data.reduce((acc, value) => acc + value, 0) / n;
-        const squaredDifferences = data.map(value => (value - mean) ** 2);
-        const variance = squaredDifferences.reduce((acc, value) => acc + value, 0) / n;
-        const stdDeviation = Math.sqrt(variance);
-        return stdDeviation;
-      }
-
-      // Iterate through each segmentation to get the timeData and ijkCoords
-      segmentations.forEach((segmentation, segmentationIndex) => {
-        const [timeData, ijkCoords] = utilities.dynamicVolume.getDataInTime(dynamicVolume, {
-          maskVolumeId: segmentation.id,
-        }) as number[][];
-
-        if (summaryStats) {
-          // Adding column headers for pixel identifier and segmentation label ids
-          let headers = 'Operation,Segmentation Label ID';
-          const maxLength = dynamicVolume.numTimePoints;
-          for (let t = 0; t < maxLength; t++) {
-            headers += `,Time Point ${t}`;
-          }
-          csv.push(headers);
-          // // perform summary statistics on the timeData including for each time point, mean, median, min, max, and standard deviation for
-          // // all the voxels in the ROI
-          const mean = [];
-          const min = [];
-          const minIJK = [];
-          const max = [];
-          const maxIJK = [];
-          const std = [];
-
-          const numVoxels = timeData.length;
-          // Helper function to calculate standard deviation
-          for (let timeIndex = 0; timeIndex < maxLength; timeIndex++) {
-            // for each voxel in the ROI, get the value at the current time point
-            const voxelValues = [];
-            for (let voxelIndex = 0; voxelIndex < numVoxels; voxelIndex++) {
-              voxelValues.push(timeData[voxelIndex][timeIndex]);
-            }
-
-            mean.push(voxelValues.reduce((acc, value) => acc + value, 0) / numVoxels);
-            const minimum = Math.min(...voxelValues);
-            min.push(minimum);
-            minIJK.push(ijkCoords[voxelValues.indexOf(minimum)]);
-            const maximum = Math.max(...voxelValues);
-            max.push(maximum);
-            maxIJK.push(ijkCoords[voxelValues.indexOf(maximum)]);
-            std.push(calculateStandardDeviation(voxelValues));
-          }
-
-          let row = `Mean,${segmentation.label}`;
-          // Generate separate rows for each statistic
-          for (let t = 0; t < maxLength; t++) {
-            row += `,${mean[t]}`;
-          }
-
-          csv.push(row);
-
-          row = `Standard Deviation,${segmentation.label}`;
-          for (let t = 0; t < maxLength; t++) {
-            row += `,${std[t]}`;
-          }
-
-          csv.push(row);
-
-          row = `Min,${segmentation.label}`;
-          for (let t = 0; t < maxLength; t++) {
-            row += `,${min[t]}`;
-          }
-
-          csv.push(row);
-
-          row = `Max,${segmentation.label}`;
-          for (let t = 0; t < maxLength; t++) {
-            row += `,${max[t]}`;
-          }
-
-          csv.push(row);
-        } else {
-          // Adding column headers for pixel identifier and segmentation label ids
-          let headers = 'Pixel Identifier (IJK),Segmentation Label ID';
-          const maxLength = dynamicVolume.numTimePoints;
-          for (let t = 0; t < maxLength; t++) {
-            headers += `,Time Point ${t}`;
-          }
-          csv.push(headers);
-          // Assuming timeData and ijkCoords are of the same length
-          for (let i = 0; i < timeData.length; i++) {
-            // Generate the pixel identifier
-            const pixelIdentifier = `${ijkCoords[i][0]}_${ijkCoords[i][1]}_${ijkCoords[i][2]}`;
-
-            // Start a new row for the current pixel
-            let row = `${pixelIdentifier},${segmentation.label}`;
-
-            // Add time data points for this pixel
-            for (let t = 0; t < timeData[i].length; t++) {
-              row += `,${timeData[i][t]}`;
-            }
-
-            // Append the row to the CSV array
-            csv.push(row);
-          }
-        }
-      });
-
-      // Convert to CSV string
-      const csvContent = csv.join('\n');
-
-      // Generate filename and trigger download
-      const filename = `${instance.PatientID}.csv`;
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement('a');
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', filename);
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    },
-    swapDynamicWithComputedDisplaySet: ({ displaySet }) => {
-      const computedDisplaySet = displaySet;
-
-      const displaySetCache = displaySetService.getDisplaySetCache();
-      const cachedDisplaySetKeys = [displaySetCache.keys()];
-      const { displaySetInstanceUID } = computedDisplaySet;
-      // Check to see if computed display set is already in cache
-      if (!cachedDisplaySetKeys.includes(displaySetInstanceUID)) {
-        displaySetCache.set(displaySetInstanceUID, computedDisplaySet);
-      }
-
-      // Get all viewports and their corresponding indices
-      const { viewports } = viewportGridService.getState();
-
-      // get the viewports in the grid
-      // iterate over them and find the ones that are showing a dynamic
-      // volume (displaySet), and replace that exact displaySet with the
-      // computed displaySet
-
-      const dynamic4DDisplaySet = actions.getDynamic4DDisplaySet();
-
-      const viewportsToUpdate = [];
-
-      for (const [key, value] of viewports) {
-        const viewport = value;
-        const viewportOptions = viewport.viewportOptions;
-        const { displaySetInstanceUIDs } = viewport;
-        const displaySetInstanceUIDIndex = displaySetInstanceUIDs.indexOf(
-          dynamic4DDisplaySet.displaySetInstanceUID
-        );
-        if (displaySetInstanceUIDIndex !== -1) {
-          const newViewport = {
-            viewportId: viewport.viewportId,
-            // merge the other displaySetInstanceUIDs with the new one
-            displaySetInstanceUIDs: [
-              ...displaySetInstanceUIDs.slice(0, displaySetInstanceUIDIndex),
-              displaySetInstanceUID,
-              ...displaySetInstanceUIDs.slice(displaySetInstanceUIDIndex + 1),
-            ],
-            viewportOptions: {
-              initialImageOptions: viewportOptions.initialImageOptions,
-              viewportType: 'volume',
-              orientation: viewportOptions.orientation,
-              background: viewportOptions.background,
-            },
-          };
-          viewportsToUpdate.push(newViewport);
-        }
-      }
-
-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
-    },
-    swapComputedWithDynamicDisplaySet: () => {
-      // Todo: this assumes there is only one dynamic display set in the viewer
-      const dynamicDisplaySet = actions.getDynamic4DDisplaySet();
-
-      const displaySetCache = displaySetService.getDisplaySetCache();
-      const cachedDisplaySetKeys = [...displaySetCache.keys()]; // Fix: Spread to get the array
-      const { displaySetInstanceUID } = dynamicDisplaySet;
-
-      // Check to see if dynamic display set is already in cache
-      if (!cachedDisplaySetKeys.includes(displaySetInstanceUID)) {
-        displaySetCache.set(displaySetInstanceUID, dynamicDisplaySet);
-      }
-
-      // Get all viewports and their corresponding indices
-      const { viewports } = viewportGridService.getState();
-
-      // Get the computed 4D display set
-      const computed4DDisplaySet = actions.getComputedDisplaySets()[0];
-
-      const viewportsToUpdate = [];
-
-      for (const [key, value] of viewports) {
-        const viewport = value;
-        const viewportOptions = viewport.viewportOptions;
-        const { displaySetInstanceUIDs } = viewport;
-        const displaySetInstanceUIDIndex = displaySetInstanceUIDs.indexOf(
-          computed4DDisplaySet.displaySetInstanceUID
-        );
-        if (displaySetInstanceUIDIndex !== -1) {
-          const newViewport = {
-            viewportId: viewport.viewportId,
-            // merge the other displaySetInstanceUIDs with the new one
-            displaySetInstanceUIDs: [
-              ...displaySetInstanceUIDs.slice(0, displaySetInstanceUIDIndex),
-              displaySetInstanceUID,
-              ...displaySetInstanceUIDs.slice(displaySetInstanceUIDIndex + 1),
-            ],
-            viewportOptions: {
-              initialImageOptions: viewportOptions.initialImageOptions,
-              viewportType: 'volume',
-              orientation: viewportOptions.orientation,
-              background: viewportOptions.background,
-            },
-          };
-          viewportsToUpdate.push(newViewport);
-        }
-      }
-
-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
-    },
-    createNewLabelMapForDynamicVolume: async ({ label }) => {
-      const { viewports, activeViewportId } = viewportGridService.getState();
-
-      // get the dynamic 4D display set
-      const dynamic4DDisplaySet = actions.getDynamic4DDisplaySet();
-      const dynamic4DDisplaySetInstanceUID = dynamic4DDisplaySet.displaySetInstanceUID;
-
-      // check if the dynamic 4D display set is in the display, if not we might have
-      // the computed volumes and we should choose them for the segmentation
-      // creation
-
-      let referenceDisplaySet;
-
-      const activeViewport = viewports.get(activeViewportId);
-      const activeDisplaySetInstanceUIDs = activeViewport.displaySetInstanceUIDs;
-      const dynamicIsInActiveViewport = activeDisplaySetInstanceUIDs.includes(
-        dynamic4DDisplaySetInstanceUID
-      );
-
-      if (dynamicIsInActiveViewport) {
-        referenceDisplaySet = dynamic4DDisplaySet;
-      }
-
-      if (!referenceDisplaySet) {
-        // try to see if there is any derived displaySet in the active viewport
-        // which is referencing the dynamic 4D display set
-
-        // Todo: this is wrong but I don't have time to fix it now
-        const cachedDisplaySets = displaySetService.getDisplaySetCache();
-        for (const [key, displaySet] of cachedDisplaySets) {
-          if (displaySet.referenceDisplaySetUID === dynamic4DDisplaySetInstanceUID) {
-            referenceDisplaySet = displaySet;
-            break;
-          }
-        }
-      }
-
-      if (!referenceDisplaySet) {
-        throw new Error('No reference display set found based on the dynamic data');
-      }
-
-      const segmentationId = await segmentationService.createSegmentationForDisplaySet(
-        referenceDisplaySet.displaySetInstanceUID,
-        { label }
-      );
-
-      // Add Segmentation to all toolGroupIds in the viewer
-      const toolGroupIds = Array.from(
-        viewports.values(),
-        viewport => viewport.viewportOptions.toolGroupId
-      );
-
-      const representationType = LABELMAP;
-
-      for (const toolGroupId of toolGroupIds) {
-        const hydrateSegmentation = true;
-        await segmentationService.addSegmentationRepresentationToToolGroup(
-          toolGroupId,
-          segmentationId,
-          hydrateSegmentation,
-          representationType
-        );
-
-        segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
-      }
-
-      return segmentationId;
-    },
-  };
-
-  const definitions = {
-    updateSegmentationsChartDisplaySet: {
-      commandFn: actions.updateSegmentationsChartDisplaySet,
-      storeContexts: [],
-      options: {},
-    },
-    exportTimeReportCSV: {
-      commandFn: actions.exportTimeReportCSV,
-      storeContexts: [],
-      options: {},
-    },
-    swapDynamicWithComputedDisplaySet: {
-      commandFn: actions.swapDynamicWithComputedDisplaySet,
-      storeContexts: [],
-      options: {},
-    },
-    createNewLabelMapForDynamicVolume: {
-      commandFn: actions.createNewLabelMapForDynamicVolume,
-      storeContexts: [],
-      options: {},
-    },
-    swapComputedWithDynamicDisplaySet: {
-      commandFn: actions.swapComputedWithDynamicDisplaySet,
-      storeContexts: [],
-      options: {},
-    },
-  };
-
-  return {
-    actions,
-    definitions,
-    defaultContext: 'DYNAMIC-VOLUME:CORNERSTONE',
-  };
-};
-
-export default commandsModule;
@@ -1,654 +0,0 @@
-const DEFAULT_COLORMAP = '2hot';
-const toolGroupIds = {
-  pt: 'dynamic4D-pt',
-  fusion: 'dynamic4D-fusion',
-  ct: 'dynamic4D-ct',
-};
-
-function getPTOptions({
-  colormap,
-  voiInverted,
-}: {
-  colormap?: {
-    name: string;
-    opacity:
-      | number
-      | {
-          value: number;
-          opacity: number;
-        }[];
-  };
-  voiInverted?: boolean;
-} = {}) {
-  return {
-    blendMode: 'MIP',
-    colormap,
-    voi: {
-      windowWidth: 5,
-      windowCenter: 2.5,
-    },
-    voiInverted,
-  };
-}
-
-function getPTViewports() {
-  const ptOptionsParams = {
-    colormap: {
-      name: DEFAULT_COLORMAP,
-      opacity: [
-        { value: 0, opacity: 0 },
-        { value: 0.1, opacity: 1 },
-        { value: 1, opacity: 1 },
-      ],
-    },
-    voiInverted: false,
-  };
-
-  return [
-    {
-      viewportOptions: {
-        viewportId: 'ptAxial',
-        viewportType: 'volume',
-        orientation: 'axial',
-        toolGroupId: toolGroupIds.pt,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'axialSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ptWLSync',
-            source: true,
-            target: true,
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ptDisplaySet',
-          options: { ...getPTOptions(ptOptionsParams) },
-        },
-      ],
-    },
-    {
-      viewportOptions: {
-        viewportId: 'ptSagittal',
-        viewportType: 'volume',
-        orientation: 'sagittal',
-        toolGroupId: toolGroupIds.pt,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'sagittalSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ptWLSync',
-            source: true,
-            target: true,
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ptDisplaySet',
-          options: { ...getPTOptions(ptOptionsParams) },
-        },
-      ],
-    },
-    {
-      viewportOptions: {
-        viewportId: 'ptCoronal',
-        viewportType: 'volume',
-        orientation: 'coronal',
-        toolGroupId: toolGroupIds.pt,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'coronalSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ptWLSync',
-            source: true,
-            target: true,
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ptDisplaySet',
-          options: { ...getPTOptions(ptOptionsParams) },
-        },
-      ],
-    },
-  ];
-}
-
-function getFusionViewports() {
-  const ptOptionsParams = {
-    colormap: {
-      name: DEFAULT_COLORMAP,
-      opacity: [
-        { value: 0, opacity: 0 },
-        { value: 0.1, opacity: 0.3 },
-        { value: 1, opacity: 0.3 },
-      ],
-    },
-  };
-
-  return [
-    {
-      viewportOptions: {
-        viewportId: 'fusionAxial',
-        viewportType: 'volume',
-        orientation: 'axial',
-        toolGroupId: toolGroupIds.fusion,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'axialSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ctWLSync',
-            source: false,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'fusionWLSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ptFusionWLSync',
-            source: false,
-            target: true,
-            options: {
-              syncInvertState: false,
-            },
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ctDisplaySet',
-        },
-        {
-          options: { ...getPTOptions(ptOptionsParams) },
-          id: 'ptDisplaySet',
-        },
-      ],
-    },
-    {
-      viewportOptions: {
-        viewportId: 'fusionSagittal',
-        viewportType: 'volume',
-        orientation: 'sagittal',
-        toolGroupId: toolGroupIds.fusion,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'sagittalSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ctWLSync',
-            source: false,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'fusionWLSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ptFusionWLSync',
-            source: false,
-            target: true,
-            options: {
-              syncInvertState: false,
-            },
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ctDisplaySet',
-        },
-        {
-          options: { ...getPTOptions(ptOptionsParams) },
-          id: 'ptDisplaySet',
-        },
-      ],
-    },
-    {
-      viewportOptions: {
-        viewportId: 'fusionCoronal',
-        viewportType: 'volume',
-        orientation: 'coronal',
-        toolGroupId: toolGroupIds.fusion,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'coronalSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ctWLSync',
-            source: false,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'fusionWLSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ptFusionWLSync',
-            source: false,
-            target: true,
-            options: {
-              syncInvertState: false,
-            },
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ctDisplaySet',
-        },
-        {
-          options: { ...getPTOptions(ptOptionsParams) },
-          id: 'ptDisplaySet',
-        },
-      ],
-    },
-  ];
-}
-
-function getSeriesChartViewport() {
-  return {
-    viewportOptions: {
-      viewportId: 'seriesChart',
-    },
-    displaySets: [
-      {
-        id: 'chartDisplaySet',
-        options: {
-          // This dataset does not require the download of any instance since it is pre-computed locally,
-          // but interleaveTopToBottom.ts was not loading any series because it consider that all viewports
-          // are a Cornerstone viewport which is not true in this case and it waits for all viewports to
-          // have called interleaveTopToBottom(...).
-          skipLoading: true,
-        },
-      },
-    ],
-  };
-}
-
-function getCTViewports() {
-  return [
-    {
-      viewportOptions: {
-        viewportId: 'ctAxial',
-        viewportType: 'volume',
-        orientation: 'axial',
-        toolGroupId: toolGroupIds.ct,
-        initialImageOptions: {
-          preset: 'middle', // 'first', 'last', 'middle'
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'axialSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ctWLSync',
-            source: true,
-            target: true,
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ctDisplaySet',
-        },
-      ],
-    },
-    {
-      viewportOptions: {
-        viewportId: 'ctSagittal',
-        viewportType: 'volume',
-        orientation: 'sagittal',
-        toolGroupId: toolGroupIds.ct,
-        initialImageOptions: {
-          preset: 'middle',
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'sagittalSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ctWLSync',
-            source: true,
-            target: true,
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ctDisplaySet',
-        },
-      ],
-    },
-    {
-      viewportOptions: {
-        viewportId: 'ctCoronal',
-        viewportType: 'volume',
-        orientation: 'coronal',
-        toolGroupId: toolGroupIds.ct,
-        initialImageOptions: {
-          preset: 'middle',
-        },
-        syncGroups: [
-          {
-            type: 'cameraPosition',
-            id: 'coronalSync',
-            source: true,
-            target: true,
-          },
-          {
-            type: 'voi',
-            id: 'ctWLSync',
-            source: true,
-            target: true,
-          },
-        ],
-      },
-      displaySets: [
-        {
-          id: 'ctDisplaySet',
-        },
-      ],
-    },
-  ];
-}
-
-const defaultProtocol = {
-  id: 'default4D',
-  locked: true,
-  // Don't store this hanging protocol as it applies to the currently active
-  // display set by default
-  // cacheId: null,
-  hasUpdatedPriorsInformation: false,
-  name: 'Default',
-  createdDate: '2023-01-01T00:00:00.000Z',
-  modifiedDate: '2023-01-01T00:00:00.000Z',
-  availableTo: {},
-  editableBy: {},
-  imageLoadStrategy: 'default', // "default" , "interleaveTopToBottom",  "interleaveCenter"
-  protocolMatchingRules: [
-    {
-      attribute: 'ModalitiesInStudy',
-      constraint: {
-        contains: ['CT', 'PT'],
-      },
-    },
-  ],
-  // -1 would be used to indicate active only, whereas other values are
-  // the number of required priors referenced - so 0 means active with
-  // 0 or more priors.
-  numberOfPriorsReferenced: -1,
-  displaySetSelectors: {
-    defaultDisplaySetId: {
-      // Unused currently
-      imageMatchingRules: [],
-      // Matches displaysets, NOT series
-      seriesMatchingRules: [
-        // Try to match series with images by default, to prevent weird display
-        // on SEG/SR containing studies
-        {
-          attribute: 'numImageFrames',
-          constraint: {
-            greaterThan: { value: 0 },
-          },
-        },
-      ],
-      // Can be used to select matching studies
-      // studyMatchingRules: [],
-    },
-    ctDisplaySet: {
-      // Unused currently
-      imageMatchingRules: [],
-      // Matches displaysets, NOT series
-      seriesMatchingRules: [
-        {
-          attribute: 'Modality',
-          constraint: {
-            equals: {
-              value: 'CT',
-            },
-          },
-          required: true,
-        },
-        {
-          attribute: 'isReconstructable',
-          constraint: {
-            equals: {
-              value: true,
-            },
-          },
-          required: true,
-        },
-      ],
-      // Can be used to select matching studies
-      // studyMatchingRules: [],
-    },
-    ptDisplaySet: {
-      // Unused currently
-      imageMatchingRules: [],
-      // Matches displaysets, NOT series
-      seriesMatchingRules: [
-        {
-          attribute: 'Modality',
-          constraint: {
-            equals: 'PT',
-          },
-          required: true,
-        },
-        {
-          attribute: 'isReconstructable',
-          constraint: {
-            equals: {
-              value: true,
-            },
-          },
-          required: true,
-        },
-        {
-          attribute: 'SeriesDescription',
-          constraint: {
-            contains: 'Corrected',
-          },
-        },
-        {
-          weight: 2,
-          attribute: 'SeriesDescription',
-          constraint: {
-            doesNotContain: {
-              value: 'Uncorrected',
-            },
-          },
-        },
-
-        // Should we check if CorrectedImage contains ATTN?
-        // (0028,0051) (CorrectedImage): NORM\DTIM\ATTN\SCAT\RADL\DECY
-      ],
-      // Can be used to select matching studies
-      // studyMatchingRules: [],
-    },
-    chartDisplaySet: {
-      // Unused currently
-      imageMatchingRules: [],
-      // Matches displaysets, NOT series
-      seriesMatchingRules: [
-        {
-          attribute: 'Modality',
-          constraint: {
-            equals: {
-              value: 'CHT',
-            },
-          },
-          required: true,
-        },
-      ],
-    },
-  },
-  stages: [
-    {
-      id: 'dataPreparation',
-      name: 'Data Preparation',
-      viewportStructure: {
-        layoutType: 'grid',
-        properties: {
-          rows: 1,
-          columns: 3,
-        },
-      },
-      viewports: [...getPTViewports()],
-      createdDate: '2023-01-01T00:00:00.000Z',
-    },
-
-    {
-      id: 'registration',
-      name: 'Registration',
-      viewportStructure: {
-        layoutType: 'grid',
-        properties: {
-          rows: 3,
-          columns: 3,
-        },
-      },
-      viewports: [...getFusionViewports(), ...getCTViewports(), ...getPTViewports()],
-      createdDate: '2023-01-01T00:00:00.000Z',
-    },
-
-    {
-      id: 'roiQuantification',
-      name: 'ROI Quantification',
-      viewportStructure: {
-        layoutType: 'grid',
-        properties: {
-          rows: 1,
-          columns: 3,
-        },
-      },
-      viewports: [...getFusionViewports()],
-      createdDate: '2023-01-01T00:00:00.000Z',
-    },
-
-    {
-      id: 'kineticAnalysis',
-      name: 'Kinetic Analysis',
-      viewportStructure: {
-        layoutType: 'grid',
-        properties: {
-          rows: 2,
-          columns: 3,
-          layoutOptions: [
-            {
-              x: 0,
-              y: 0,
-              width: 1 / 3,
-              height: 1 / 2,
-            },
-            {
-              x: 1 / 3,
-              y: 0,
-              width: 1 / 3,
-              height: 1 / 2,
-            },
-            {
-              x: 2 / 3,
-              y: 0,
-              width: 1 / 3,
-              height: 1 / 2,
-            },
-            {
-              x: 0,
-              y: 1 / 2,
-              width: 1,
-              height: 1 / 2,
-            },
-          ],
-        },
-      },
-      viewports: [...getFusionViewports(), getSeriesChartViewport()],
-      createdDate: '2023-01-01T00:00:00.000Z',
-    },
-  ],
-};
-
-/**
- * HangingProtocolModule should provide a list of hanging protocols that will be
- * available in OHIF for Modes to use to decide on the structure of the viewports
- * and also the series that hung in the viewports. Each hanging protocol is defined by
- * { name, protocols}. Examples include the default hanging protocol provided by
- * the default extension that shows 2x2 viewports.
- */
-
-function getHangingProtocolModule() {
-  return [
-    {
-      name: defaultProtocol.id,
-      protocol: defaultProtocol,
-    },
-  ];
-}
-
-export default getHangingProtocolModule;
@@ -1,68 +0,0 @@
-import React from 'react';
-import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/ui';
-import DynamicExport from './panels/DynamicExport';
-
-function getPanelModule({ commandsManager, extensionManager, servicesManager }) {
-  const wrappedDynamicDataPanel = () => {
-    return (
-      <DynamicDataPanel
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-        extensionManager={extensionManager}
-      />
-    );
-  };
-
-  const wrappedDynamicToolbox = () => {
-    return (
-      <>
-        <Toolbox
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
-          buttonSectionId="dynamic-toolbox"
-          title="Threshold Tools"
-        />
-      </>
-    );
-  };
-
-  const wrappedDynamicExport = () => {
-    return (
-      <>
-        <DynamicExport
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
-        />
-      </>
-    );
-  };
-
-  return [
-    {
-      name: 'dynamic-volume',
-      iconName: 'tab-4d',
-      iconLabel: '4D Workflow',
-      label: '4D Workflow',
-      component: wrappedDynamicDataPanel,
-    },
-    {
-      name: 'dynamic-toolbox',
-      iconName: 'tab-4d',
-      iconLabel: '4D Workflow',
-      label: 'Dynamic Toolbox',
-      component: wrappedDynamicToolbox,
-    },
-    {
-      name: 'dynamic-export',
-      iconName: 'tab-4d',
-      iconLabel: '4D Workflow',
-      label: '4D Workflow',
-      component: wrappedDynamicExport,
-    },
-  ];
-}
-
-export default getPanelModule;
@@ -1,6 +0,0 @@
-import packageJson from '../package.json';
-
-const id = packageJson.name;
-const SOPClassHandlerName = 'dynamic-volume';
-
-export { id, SOPClassHandlerName };
@@ -1,57 +0,0 @@
-import { id } from './id';
-import commandsModule from './commandsModule';
-import getPanelModule from './getPanelModule';
-import getHangingProtocolModule from './getHangingProtocolModule';
-import { cache } from '@cornerstonejs/core';
-
-/**
- * You can remove any of the following modules if you don't need them.
- */
-const dynamicVolumeExtension = {
-  /**
-   * Only required property. Should be a unique value across all extensions.
-   * You ID can be anything you want, but it should be unique.
-   */
-  id,
-
-  /**
-   * Perform any pre-registration tasks here. This is called before the extension
-   * is registered. Usually we run tasks such as: configuring the libraries
-   * (e.g. cornerstone, cornerstoneTools, ...) or registering any services that
-   * this extension is providing.
-   */
-  preRegistration: ({ servicesManager, commandsManager, configuration = {} }) => {
-    // TODO: look for the right fix
-    cache.setMaxCacheSize(5 * 1024 * 1024 * 1024);
-  },
-  /**
-   * PanelModule should provide a list of panels that will be available in OHIF
-   * for Modes to consume and render. Each panel is defined by a {name,
-   * iconName, iconLabel, label, component} object. Example of a panel module
-   * is the StudyBrowserPanel that is provided by the default extension in OHIF.
-   */
-  getPanelModule,
-  /**
-   * ViewportModule should provide a list of viewports that will be available in OHIF
-   * for Modes to consume and use in the viewports. Each viewport is defined by
-   * {name, component} object. Example of a viewport module is the CornerstoneViewport
-   * that is provided by the Cornerstone extension in OHIF.
-   */
-  getHangingProtocolModule,
-  /**
-   * CommandsModule should provide a list of commands that will be available in OHIF
-   * for Modes to consume and use in the viewports. Each command is defined by
-   * an object of { actions, definitions, defaultContext } where actions is an
-   * object of functions, definitions is an object of available commands, their
-   * options, and defaultContext is the default context for the command to run against.
-   */
-  getCommandsModule: ({ servicesManager, commandsManager, extensionManager }) => {
-    return commandsModule({
-      servicesManager,
-      commandsManager,
-      extensionManager,
-    });
-  },
-};
-
-export { dynamicVolumeExtension as default };
@@ -1,18 +0,0 @@
-import React from 'react';
-import PanelGenerateImage from './PanelGenerateImage';
-
-function DynamicDataPanel({ servicesManager, commandsManager }) {
-  return (
-    <div
-      className="flex flex-col text-white"
-      data-cy={'dynamic-volume-panel'}
-    >
-      <PanelGenerateImage
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      ></PanelGenerateImage>
-    </div>
-  );
-}
-
-export default DynamicDataPanel;
@@ -1,76 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ActionButtons } from '@ohif/ui';
-import { useTranslation } from 'react-i18next';
-
-function DynamicExport({ commandsManager, servicesManager, extensionManager }: withAppTypes) {
-  const { segmentationService } = servicesManager.services;
-  const { t } = useTranslation('dynamicExport');
-
-  const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
-
-  const actions = [
-    {
-      label: 'Export Time Data',
-      onClick: () => {
-        commandsManager.runCommand('exportTimeReportCSV', {
-          segmentations,
-          options: {
-            filename: 'TimeData.csv',
-          },
-        });
-      },
-      disabled: !segmentations?.length,
-    },
-    {
-      label: 'Export ROI Stats',
-      onClick: () => {
-        commandsManager.runCommand('exportTimeReportCSV', {
-          segmentations,
-          summaryStats: true,
-          options: {
-            filename: 'ROIStats.csv',
-          },
-        });
-      },
-      disabled: !segmentations?.length,
-    },
-  ];
-
-  /**
-   * Update UI based on segmentation changes (added, removed, updated)
-   */
-  useEffect(() => {
-    // ~~ Subscription
-    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
-    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
-    const removed = segmentationService.EVENTS.SEGMENTATION_REMOVED;
-    const subscriptions = [];
-
-    [added, updated, removed].forEach(evt => {
-      const { unsubscribe } = segmentationService.subscribe(evt, () => {
-        const segmentations = segmentationService.getSegmentations();
-        setSegmentations(segmentations);
-      });
-      subscriptions.push(unsubscribe);
-    });
-
-    return () => {
-      subscriptions.forEach(unsub => {
-        unsub();
-      });
-    };
-  }, []);
-
-  return (
-    <div>
-      <div className="mt-3 flex justify-center px-2">
-        <ActionButtons
-          actions={actions}
-          t={t}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default DynamicExport;
@@ -1,241 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  InputDoubleRange,
-  Button,
-  PanelSection,
-  ButtonGroup,
-  IconButton,
-  InputNumber,
-  Icon,
-  Tooltip,
-} from '@ohif/ui';
-
-import { Enums } from '@cornerstonejs/core';
-
-const controlClassNames = {
-  sizeClassName: 'w-[58px] h-[28px]',
-  arrowsDirection: 'horizontal',
-  labelPosition: 'bottom',
-};
-
-const Header = ({ title, tooltip }) => (
-  <div className="flex items-center space-x-1">
-    <Tooltip
-      content={<div className="text-white">{tooltip}</div>}
-      position="bottom-left"
-      tight={true}
-      tooltipBoxClassName="max-w-xs p-2"
-    >
-      <Icon
-        name="info-link"
-        className="text-primary-active h-[14px] w-[14px]"
-      />
-    </Tooltip>
-    <span className="text-aqua-pale text-[11px] uppercase">{title}</span>
-  </div>
-);
-
-const DynamicVolumeControls = ({
-  isPlaying,
-  onPlayPauseChange,
-  // fps
-  fps,
-  onFpsChange,
-  minFps,
-  maxFps,
-  // Frames
-  currentFrameIndex,
-  onFrameChange,
-  framesLength,
-  onGenerate,
-  onDoubleRangeChange,
-  onDynamicClick,
-}) => {
-  const [computedView, setComputedView] = useState(false);
-
-  const [computeViewMode, setComputeViewMode] = useState(Enums.DynamicOperatorType.SUM);
-
-  const [sliderRangeValues, setSliderRangeValues] = useState([framesLength / 4, framesLength / 2]);
-
-  useEffect(() => {
-    setSliderRangeValues([framesLength / 4, framesLength / 2]);
-  }, [framesLength]);
-
-  const handleSliderChange = newValues => {
-    onDoubleRangeChange(newValues);
-
-    if (newValues[0] === sliderRangeValues[0] && newValues[1] === sliderRangeValues[1]) {
-      return;
-    }
-    setSliderRangeValues(newValues);
-  };
-
-  return (
-    <div className="flex select-none flex-col">
-      <PanelSection
-        title="Controls"
-        childrenClassName="space-y-4 pb-5 px-5"
-      >
-        <div className="mt-2">
-          <Header
-            title="View"
-            tooltip={
-              'Select the view mode, 4D to view the dynamic volume or Computed to view the computed volume'
-            }
-          />
-          <ButtonGroup className="mt-2 w-full">
-            <button
-              className="w-1/2"
-              onClick={() => {
-                setComputedView(false);
-                onDynamicClick?.();
-              }}
-            >
-              4D
-            </button>
-            <button
-              className="w-1/2"
-              onClick={() => {
-                setComputedView(true);
-              }}
-            >
-              Computed
-            </button>
-          </ButtonGroup>
-        </div>
-        <div>
-          <FrameControls
-            onPlayPauseChange={onPlayPauseChange}
-            isPlaying={isPlaying}
-            computedView={computedView}
-            // fps
-            fps={fps}
-            onFpsChange={onFpsChange}
-            minFps={minFps}
-            maxFps={maxFps}
-            //
-            framesLength={framesLength}
-            onFrameChange={onFrameChange}
-            currentFrameIndex={currentFrameIndex}
-          />
-        </div>
-        <div className={`mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
-          <Header
-            title="Computed Operation"
-            tooltip={
-              <div>
-                Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
-                applied to the data set.
-                <br></br> Range Slider: Choose the numeric range within which the operation will be
-                performed.
-                <br></br>Generate Button: Execute the chosen operation on the specified range of
-                data.{' '}
-              </div>
-            }
-          />
-          <ButtonGroup
-            className={`mt-2 w-full `}
-            separated={true}
-          >
-            <button
-              className="w-1/2"
-              onClick={() => setComputeViewMode(Enums.DynamicOperatorType.SUM)}
-            >
-              {Enums.DynamicOperatorType.SUM.toString().toUpperCase()}
-            </button>
-            <button
-              className="w-1/2"
-              onClick={() => setComputeViewMode(Enums.DynamicOperatorType.AVERAGE)}
-            >
-              {Enums.DynamicOperatorType.AVERAGE.toString().toUpperCase()}
-            </button>
-            <button
-              className="w-1/2"
-              onClick={() => setComputeViewMode(Enums.DynamicOperatorType.SUBTRACT)}
-            >
-              {Enums.DynamicOperatorType.SUBTRACT.toString().toUpperCase()}
-            </button>
-          </ButtonGroup>
-          <div className="w-ful mt-2">
-            <InputDoubleRange
-              values={sliderRangeValues}
-              onChange={handleSliderChange}
-              minValue={0}
-              showLabel={true}
-              allowNumberEdit={true}
-              maxValue={framesLength}
-              step={1}
-            />
-          </div>
-          <Button
-            className="mt-2 !h-[26px] !w-[115px] self-start !p-0"
-            onClick={() => {
-              onGenerate(computeViewMode);
-            }}
-          >
-            Generate
-          </Button>
-        </div>
-      </PanelSection>
-    </div>
-  );
-};
-
-export default DynamicVolumeControls;
-
-function FrameControls({
-  isPlaying,
-  onPlayPauseChange,
-  fps,
-  minFps,
-  maxFps,
-  onFpsChange,
-  framesLength,
-  onFrameChange,
-  currentFrameIndex,
-  computedView,
-}) {
-  const getPlayPauseIconName = () => (isPlaying ? 'icon-pause' : 'icon-play');
-
-  return (
-    <div className={computedView && 'ohif-disabled'}>
-      <Header
-        title="4D Controls"
-        tooltip={
-          <div>
-            Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
-            Selector: Navigate through individual frames of the 4D data. <br></br> FPS (Frames Per
-            Second) Selector: Adjust the playback speed of the animation.
-          </div>
-        }
-      />
-      <div className="mt-3 flex justify-between">
-        <IconButton
-          className="bg-customblue-30 h-[26px] w-[58px] rounded-[4px]"
-          onClick={() => onPlayPauseChange(!isPlaying)}
-        >
-          <Icon
-            name={getPlayPauseIconName()}
-            className=" active:text-primary-light hover:bg-customblue-300 h-[24px] w-[24px] cursor-pointer text-white"
-          />
-        </IconButton>
-        <InputNumber
-          value={currentFrameIndex}
-          onChange={onFrameChange}
-          minValue={0}
-          maxValue={framesLength}
-          label="Frame"
-          {...controlClassNames}
-        />
-        <InputNumber
-          value={fps}
-          onChange={onFpsChange}
-          minValue={minFps}
-          maxValue={maxFps}
-          {...controlClassNames}
-          label="FPS"
-        />
-      </div>
-    </div>
-  );
-}
@@ -1,71 +0,0 @@
-import React from 'react';
-import { InputDoubleRange } from '@ohif/ui';
-import { Select } from '@ohif/ui';
-import { Button } from '@ohif/ui';
-import PropTypes from 'prop-types';
-
-const GenerateVolume = ({
-  rangeValues,
-  handleSliderChange,
-  operationsUI,
-  options,
-  handleGenerateOptionsChange,
-  onGenerateImage,
-  returnTo4D,
-  displayingComputedVolume,
-}) => {
-  return (
-    <>
-      <div>
-        <div className="mb-2 text-white">Computed Image</div>
-        <Select
-          closeMenuOnSelect={true}
-          className="border-primary-main mr-2 bg-black text-white "
-          options={operationsUI}
-          placeholder={operationsUI.find(option => option.value === options.Operation).placeHolder}
-          value={options.Operation}
-          onChange={({ value }) => {
-            handleGenerateOptionsChange({
-              Operation: value,
-            });
-          }}
-        />
-        <InputDoubleRange
-          values={rangeValues}
-          onChange={handleSliderChange}
-          minValue={rangeValues[0] || 1}
-          maxValue={rangeValues[1] || 2}
-          showLabel={true}
-          step={1}
-        />
-        <div className="flex space-x-2">
-          <Button
-            onClick={onGenerateImage}
-            className="w-1/2"
-          >
-            Generate
-          </Button>
-          <Button
-            onClick={returnTo4D}
-            disabled={!displayingComputedVolume}
-            className="w-1/2"
-          >
-            Return To 4D
-          </Button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-GenerateVolume.propTypes = {
-  rangeValues: PropTypes.array.isRequired,
-  handleSliderChange: PropTypes.func.isRequired,
-  operationsUI: PropTypes.array.isRequired,
-  options: PropTypes.object.isRequired,
-  handleGenerateOptionsChange: PropTypes.func.isRequired,
-  onGenerateImage: PropTypes.func.isRequired,
-  returnTo4D: PropTypes.func.isRequired,
-};
-
-export default GenerateVolume;
@@ -1,275 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useCine, useViewportGrid } from '@ohif/ui';
-import { cache, utilities as csUtils, volumeLoader, eventTarget } from '@cornerstonejs/core';
-import { Enums } from '@cornerstonejs/streaming-image-volume-loader';
-import { utilities as cstUtils } from '@cornerstonejs/tools';
-import DynamicVolumeControls from './DynamicVolumeControls';
-
-const SOPClassHandlerId = '@ohif/extension-default.sopClassHandlerModule.stack';
-
-export default function PanelGenerateImage({ servicesManager, commandsManager }: withAppTypes) {
-  const { cornerstoneViewportService, viewportGridService, displaySetService } =
-    servicesManager.services;
-
-  const [{ isCineEnabled }, cineService] = useCine();
-  const [{ activeViewportId }] = useViewportGrid();
-
-  //
-  const [timePointsRange, setTimePointsRange] = useState([]);
-  const [timePointsRangeToUseForGenerate, setTimePointsRangeToUseForGenerate] = useState([]);
-  const [computedDisplaySet, setComputedDisplaySet] = useState(null);
-  const [dynamicVolume, setDynamicVolume] = useState(null);
-  const [frameRate, setFrameRate] = useState(20);
-  const [isPlaying, setIsPlaying] = useState(isCineEnabled);
-  const [timePointRendered, setTimePointRendered] = useState(null);
-  const [displayingComputed, setDisplayingComputed] = useState(false);
-
-  //
-  const uuidComputedVolume = useRef(csUtils.uuidv4());
-  const uuidDynamicVolume = useRef(null);
-  const computedVolumeId = `cornerstoneStreamingImageVolume:${uuidComputedVolume.current}`;
-
-  useEffect(() => {
-    const evt = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
-
-    const { unsubscribe } = cornerstoneViewportService.subscribe(evt, evtDetails => {
-      evtDetails.viewportData.data.forEach(volumeData => {
-        if (volumeData.volume.isDynamicVolume()) {
-          setDynamicVolume(volumeData.volume);
-          uuidDynamicVolume.current = volumeData.displaySetInstanceUID;
-          setTimePointsRange([1, volumeData.volume.numTimePoints]);
-        }
-      });
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [cornerstoneViewportService]);
-
-  useEffect(() => {
-    const { unsubscribe } = servicesManager.services.cineService.subscribe(
-      servicesManager.services.cineService.EVENTS.CINE_STATE_CHANGED,
-      evt => {
-        setIsPlaying(evt.isPlaying);
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [cineService]);
-
-  useEffect(() => {
-    const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(activeViewportId);
-
-    if (!displaySetUIDs || displaySetUIDs.length === 0) {
-      return;
-    }
-
-    const displaySets = displaySetUIDs.map(displaySetUID =>
-      displaySetService.getDisplaySetByUID(displaySetUID)
-    );
-
-    const dynamicVolumeDisplaySet = displaySets.find(displaySet => displaySet.isDynamicVolume);
-
-    if (!dynamicVolumeDisplaySet) {
-      return;
-    }
-
-    const dynamicVolume = cache
-      .getVolumes()
-      .find(volume => volume.volumeId.includes(dynamicVolumeDisplaySet.displaySetInstanceUID));
-
-    if (!dynamicVolume) {
-      return;
-    }
-
-    setDynamicVolume(dynamicVolume);
-    uuidDynamicVolume.current = dynamicVolumeDisplaySet.displaySetInstanceUID;
-    setTimePointsRange([1, dynamicVolume.numTimePoints]);
-  }, [activeViewportId, cornerstoneViewportService]);
-
-  useEffect(() => {
-    // ~~ Subscription
-    const evt = Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED;
-
-    const callback = evt => {
-      setTimePointRendered(evt.detail.timePointIndex);
-    };
-
-    eventTarget.addEventListener(evt, callback);
-
-    return () => {
-      eventTarget.removeEventListener(evt, callback);
-    };
-  }, [cornerstoneViewportService]);
-
-  function renderGeneratedImage(displaySet) {
-    commandsManager.runCommand('swapDynamicWithComputedDisplaySet', {
-      displaySet,
-    });
-
-    setDisplayingComputed(true);
-  }
-
-  function renderDynamicImage(displaySet) {
-    commandsManager.runCommand('swapComputedWithDynamicDisplaySet');
-  }
-
-  // Get computed volume from cache, calculate the data across the time frames,
-  // set the scalar data to the computedVolume, and create displaySet
-  async function onGenerateImage(operationName) {
-    const dynamicVolumeId = dynamicVolume.volumeId;
-
-    if (!dynamicVolumeId) {
-      return;
-    }
-
-    let computedVolume = cache.getVolume(computedVolumeId);
-
-    if (!computedVolume) {
-      await createComputedVolume(dynamicVolumeId, computedVolumeId);
-      computedVolume = cache.getVolume(computedVolumeId);
-    }
-
-    const vals = timePointsRangeToUseForGenerate;
-
-    const targets = Array.from({ length: vals[1] - vals[0] + 1 }, (_, i) => i + vals[0]);
-
-    const dataInTime = cstUtils.dynamicVolume.generateImageFromTimeData(
-      dynamicVolume,
-      operationName,
-      operationName === 'SUBTRACT' ? vals : targets
-    );
-
-    // Add loadStatus.loaded to computed volume and set to true
-    computedVolume.loadStatus = {};
-    computedVolume.loadStatus.loaded = true;
-    // Set computed scalar data to volume
-    const scalarData = computedVolume.getScalarData();
-    scalarData.set(dataInTime);
-
-    // If computed display set does not exist, create an object to be used as
-    // the displaySet. If it does exist, update the image data and vtkTexture
-    if (!computedDisplaySet) {
-      const displaySet = {
-        volumeLoaderSchema: computedVolume.volumeId.split(':')[0],
-        displaySetInstanceUID: uuidComputedVolume.current,
-        SOPClassHandlerId: SOPClassHandlerId,
-        Modality: dynamicVolume.metadata.Modality,
-        isMultiFrame: false,
-        numImageFrames: 1,
-        uid: uuidComputedVolume.current,
-        referenceDisplaySetUID: dynamicVolume.volumeId.split(':')[1],
-        madeInClient: true,
-        FrameOfReferenceUID: dynamicVolume.metadata.FrameOfReferenceUID,
-        isDerived: true,
-      };
-      setComputedDisplaySet(displaySet);
-      renderGeneratedImage(displaySet);
-    } else {
-      commandsManager.runCommand('updateVolumeData', {
-        volume: computedVolume,
-      });
-      // Check if viewport is currently displaying the computed volume, if so,
-      // call render on the viewports to update the image, if not, call
-      // renderGeneratedImage
-      // if (!cache.getVolume(dynamicVolumeId)) {
-      //   for (const viewportId of viewports.keys()) {
-      //     const viewportForRendering =
-      //       cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      //     viewportForRendering.render();
-      //   }
-      // } else {
-      cornerstoneViewportService.getRenderingEngine().render();
-      renderGeneratedImage(computedDisplaySet);
-      // }
-    }
-  }
-
-  const onPlayPauseChange = isPlaying => {
-    isPlaying ? handlePlay() : handleStop();
-  };
-
-  const handlePlay = () => {
-    setIsPlaying(true);
-    const viewportInfo = cornerstoneViewportService.getViewportInfo(activeViewportId);
-
-    if (!viewportInfo) {
-      return;
-    }
-
-    const { element } = viewportInfo;
-    cineService.playClip(element, { framesPerSecond: frameRate, viewportId: activeViewportId });
-  };
-
-  const handleStop = () => {
-    setIsPlaying(false);
-    const { element } = cornerstoneViewportService.getViewportInfo(activeViewportId);
-    cineService.stopClip(element);
-  };
-
-  const handleSetFrameRate = newFrameRate => {
-    setFrameRate(newFrameRate);
-    handleStop();
-    handlePlay();
-  };
-
-  function handleSliderChange(newValues) {
-    if (
-      newValues[0] === timePointsRangeToUseForGenerate[0] &&
-      newValues[1] === timePointsRangeToUseForGenerate[1]
-    ) {
-      return;
-    }
-
-    setTimePointsRangeToUseForGenerate(newValues);
-  }
-
-  if (!dynamicVolume || timePointsRange.length === 0) {
-    return null;
-  }
-
-  return (
-    <DynamicVolumeControls
-      fps={frameRate}
-      isPlaying={isPlaying}
-      onPlayPauseChange={onPlayPauseChange}
-      minFps={1}
-      maxFps={50}
-      currentFrameIndex={timePointRendered}
-      onFpsChange={handleSetFrameRate}
-      framesLength={timePointsRange[1]}
-      onFrameChange={timePointIndex => {
-        dynamicVolume.timePointIndex = timePointIndex;
-      }}
-      onGenerate={onGenerateImage}
-      onDynamicClick={displayingComputed ? () => renderDynamicImage(computedDisplaySet) : null}
-      onDoubleRangeChange={handleSliderChange}
-    />
-  );
-}
-
-async function createComputedVolume(dynamicVolumeId, computedVolumeId) {
-  if (!cache.getVolume(computedVolumeId)) {
-    const computedVolume = await volumeLoader.createAndCacheDerivedVolume(dynamicVolumeId, {
-      volumeId: computedVolumeId,
-    });
-    return computedVolume;
-  }
-}
-
-PanelGenerateImage.propTypes = {
-  servicesManager: PropTypes.shape({
-    services: PropTypes.shape({
-      measurementService: PropTypes.shape({
-        getMeasurements: PropTypes.func.isRequired,
-        subscribe: PropTypes.func.isRequired,
-        EVENTS: PropTypes.object.isRequired,
-        VALUE_TYPES: PropTypes.object.isRequired,
-      }).isRequired,
-    }).isRequired,
-  }).isRequired,
-};
@@ -1,23 +0,0 @@
-import React from 'react';
-import type { ServicesManager } from '@ohif/core';
-
-function WorkflowPanel({ servicesManager }: { servicesManager: ServicesManager }) {
-  const ProgressDropdownWithService =
-    servicesManager.services.customizationService.getCustomization(
-      'progressDropdownWithServiceComponent'
-    ).component;
-
-  return (
-    <div
-      data-cy={'workflow-panel'}
-      className="bg-secondary-dark mb-1 px-3 py-4"
-    >
-      <div className="mb-1">Workflow</div>
-      <div>
-        <ProgressDropdownWithService servicesManager={servicesManager} />
-      </div>
-    </div>
-  );
-}
-
-export default WorkflowPanel;
@@ -1,5 +0,0 @@
-import DynamicDataPanel from './DynamicDataPanel';
-import WorkflowPanel from './WorkflowPanel';
-import PanelGenerateImage from './PanelGenerateImage';
-
-export { DynamicDataPanel, WorkflowPanel, PanelGenerateImage };
@@ -3,6 +3,7 @@ const pkg = require('./package');

 module.exports = {
  ...base,
+  name: pkg.name,
  displayName: pkg.name,
  // rootDir: "../.."
  // testMatch: [
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "3.9.0-beta.54",
+  "version": "3.7.0",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -25,8 +25,6 @@
    "access": "public"
  },
  "scripts": {
-    "clean": "shx rm -rf dist",
-    "clean:deep": "yarn run clean && shx rm -rf node_modules",
    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
    "dev:cornerstone": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --progress --config .webpack/webpack.prod.js",
@@ -38,31 +36,29 @@
    "@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.78.1",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@ohif/core": "3.9.0-beta.54",
-    "@ohif/ui": "3.9.0-beta.54",
-    "dcmjs": "*",
+    "@cornerstonejs/dicom-image-loader": "^1.20.3",
+    "@ohif/core": "3.7.0",
+    "@ohif/ui": "3.7.0",
+    "dcmjs": "^0.29.6",
    "dicom-parser": "^1.8.21",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-resize-detector": "^10.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-resize-detector": "^6.7.6"
  },
  "devDependencies": {
    "lodash": "^4.17.21"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.78.1",
-    "@cornerstonejs/core": "^1.78.1",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.78.1",
-    "@cornerstonejs/tools": "^1.78.1",
-    "@icr/polyseg-wasm": "^0.4.0",
-    "@kitware/vtk.js": "*",
+    "@cornerstonejs/adapters": "^1.20.3",
+    "@cornerstonejs/core": "^1.20.3",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.20.3",
+    "@cornerstonejs/tools": "^1.20.3",
+    "@kitware/vtk.js": "27.3.1",
    "html2canvas": "^1.4.1",
-    "lodash.debounce": "^4.0.8",
+    "lodash.debounce": "4.0.8",
    "lodash.merge": "^4.6.2",
    "shader-loader": "^1.3.1",
    "worker-loader": "^3.0.8"
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useCallback, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
+import ReactResizeDetector from 'react-resize-detector';
 import PropTypes from 'prop-types';
 import * as cs3DTools from '@cornerstonejs/tools';
 import {
@@ -10,7 +10,7 @@ import {
  utilities as csUtils,
 } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
-import { Notification, useViewportDialog, AllInOneMenu } from '@ohif/ui';
+import { Notification, useViewportDialog } from '@ohif/ui';
 import { IStackViewport, IVolumeViewport } from '@cornerstonejs/core/dist/esm/types';

 import { setEnabledElement } from '../state';
@@ -18,15 +18,10 @@ import { setEnabledElement } from '../state';
 import './OHIFCornerstoneViewport.css';
 import CornerstoneOverlays from './Overlays/CornerstoneOverlays';
 import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
+import CornerstoneServices from '../types/CornerstoneServices';
 import CinePlayer from '../components/CinePlayer';
 import { Types } from '@ohif/core';

-import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
-import { getWindowLevelActionMenu } from '../components/WindowLevelActionMenu/getWindowLevelActionMenu';
-import { useAppConfig } from '@state';
-
-import { LutPresentation, PositionPresentation } from '../types/Presentation';
-
 const STACK = 'stack';

 /**
@@ -99,49 +94,27 @@ function areEqual(prevProps, nextProps) {

 // Todo: This should be done with expose of internal API similar to react-vtkjs-viewport
 // Then we don't need to worry about the re-renders if the props change.
-const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
+const OHIFCornerstoneViewport = React.memo(props => {
  const {
    displaySets,
    dataSource,
    viewportOptions,
    displaySetOptions,
    servicesManager,
+    commandsManager,
    onElementEnabled,
-    // eslint-disable-next-line react/prop-types
    onElementDisabled,
-    isJumpToMeasurementDisabled = false,
+    isJumpToMeasurementDisabled,
    // 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
-    // eslint-disable-next-line react/prop-types
    initialImageIndex,
-    // if the viewport is part of a hanging protocol layout
-    // we should not really rely on the old synchronizers and
-    // you see below we only rehydrate the synchronizers if the viewport
-    // is not part of the hanging protocol layout. HPs should
-    // define their own synchronizers. Since the synchronizers are
-    // viewportId dependent and
-    // eslint-disable-next-line react/prop-types
-    isHangingProtocolLayout,
  } = props;

  const viewportId = viewportOptions.viewportId;
-
-  if (!viewportId) {
-    throw new Error('Viewport ID is required');
-  }
-
-  // Since we only have support for dynamic data in volume viewports, we should
-  // handle this case here and set the viewportType to volume if any of the
-  // displaySets are dynamic volumes
-  viewportOptions.viewportType = displaySets.some(ds => ds.isDynamicVolume && ds.isReconstructable)
-    ? 'volume'
-    : viewportOptions.viewportType;
-
  const [scrollbarHeight, setScrollbarHeight] = useState('100px');
  const [enabledVPElement, setEnabledVPElement] = useState(null);
-  const elementRef = useRef() as React.MutableRefObject<HTMLDivElement>;
-  const [appConfig] = useAppConfig();
+  const elementRef = useRef();

  const {
    measurementService,
@@ -153,13 +126,12 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
    cornerstoneCacheService,
    viewportGridService,
    stateSyncService,
-    viewportActionCornersService,
-  } = servicesManager.services;
+  } = servicesManager.services as CornerstoneServices;

  const [viewportDialogState] = useViewportDialog();
  // useCallback for scroll bar height calculation
  const setImageScrollBarHeight = useCallback(() => {
-    const scrollbarHeight = `${elementRef.current.clientHeight - 40}px`;
+    const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
    setScrollbarHeight(scrollbarHeight);
  }, [elementRef]);

@@ -179,8 +151,6 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
      toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);

      syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroups);
-
-      viewportActionCornersService.clear(viewportId);
    },
    [viewportId]
  );
@@ -205,13 +175,6 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {

      syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, syncGroups);

-      const synchronizersStore = stateSyncService.getState().synchronizersStore;
-
-      if (synchronizersStore?.[viewportId]?.length && !isHangingProtocolLayout) {
-        // If the viewport used to have a synchronizer, re apply it again
-        _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService);
-      }
-
      if (onElementEnabled) {
        onElementEnabled(evt);
      }
@@ -234,18 +197,13 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
        return;
      }

-      cornerstoneViewportService.storePresentation({ viewportId });
-
-      // This should be done after the store presentation since synchronizers
-      // will get cleaned up and they need the viewportInfo to be present
      cleanUpServices(viewportInfo);
+      cornerstoneViewportService.storePresentation({ viewportId });

      if (onElementDisabled) {
        onElementDisabled(viewportInfo);
      }

-      cornerstoneViewportService.disableElement(viewportId);
-
      eventTarget.removeEventListener(Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
    };
  }, []);
@@ -307,10 +265,7 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
      // 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 state = stateSyncService.getState();
-      const lutPresentationStore = state.lutPresentationStore as LutPresentation;
-      const positionPresentationStore = state.positionPresentationStore as PositionPresentation;
-
+      const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
      const { presentationIds } = viewportOptions;
      const presentations = {
        positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
@@ -389,49 +344,21 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
    };
  }, [displaySets, elementRef, viewportId]);

-  // Set up the window level action menu in the viewport action corners.
-  useEffect(() => {
-    // Doing an === check here because the default config value when not set is true
-    if (appConfig.addWindowLevelActionMenu === false) {
-      return;
-    }
-
-    // TODO: In the future we should consider using the customization service
-    // to determine if and in which corner various action components should go.
-    const wlActionMenu = getWindowLevelActionMenu({
-      viewportId,
-      element: elementRef.current,
-      displaySets,
-      servicesManager,
-      commandsManager,
-      verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
-      horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
-    });
-
-    viewportActionCornersService.setComponent({
-      viewportId,
-      id: 'windowLevelActionMenu',
-      component: wlActionMenu,
-      location: viewportActionCornersService.LOCATIONS.topRight,
-      indexPriority: -100,
-    });
-  }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
-
-  const { ref: resizeRef } = useResizeDetector({
-    onResize,
-  });
  return (
    <React.Fragment>
      <div className="viewport-wrapper">
+        <ReactResizeDetector
+          refreshMode="debounce"
+          refreshRate={50} // Wait 50 ms after last move to render
+          onResize={onResize}
+          targetRef={elementRef.current}
+        />
        <div
          className="cornerstone-viewport-element"
          style={{ height: '100%', width: '100%' }}
          onContextMenu={e => e.preventDefault()}
          onMouseDown={e => e.preventDefault()}
-          ref={el => {
-            resizeRef.current = el;
-            elementRef.current = el;
-          }}
+          ref={elementRef}
        ></div>
        <CornerstoneOverlays
          viewportId={viewportId}
@@ -446,8 +373,7 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
          servicesManager={servicesManager}
        />
      </div>
-      {/* top offset of 24px to account for ViewportActionCorners. */}
-      <div className="absolute top-[24px] w-full">
+      <div className="absolute w-full">
        {viewportDialogState.viewportId === viewportId && (
          <Notification
            id="viewport-notification"
@@ -456,12 +382,9 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
            actions={viewportDialogState.actions}
            onSubmit={viewportDialogState.onSubmit}
            onOutsideClick={viewportDialogState.onOutsideClick}
-            onKeyPress={viewportDialogState.onKeyPress}
          />
        )}
      </div>
-      {/* The OHIFViewportActionCorners follows the viewport in the DOM so that it is naturally at a higher z-index.*/}
-      <OHIFViewportActionCorners viewportId={viewportId} />
    </React.Fragment>
  );
 }, areEqual);
@@ -489,10 +412,7 @@ function _subscribeToJumpToMeasurementEvents(
          cornerstoneViewportService.getViewportIdToJump(
            jumpId,
            measurement.displaySetInstanceUID,
-            {
-              referencedImageId:
-                measurement.referencedImageId || measurement.metadata?.referencedImageId,
-            }
+            { referencedImageId: measurement.referencedImageId }
          );
      }
      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportId) {
@@ -601,9 +521,6 @@ function _jumpToMeasurement(
        i => i.SOPInstanceUID === SOPInstanceUID
      );

-      // the index is reversed in the volume viewport
-      // imageIdIndex = referencedDisplaySet.images.length - 1 - imageIdIndex;
-
      const { viewPlaneNormal: viewportViewPlane } = viewport.getCamera();

      // should compare abs for both planes since the direction can be flipped
@@ -630,61 +547,13 @@ function _jumpToMeasurement(
  }
 }

-function _rehydrateSynchronizers(
-  synchronizersStore: { [key: string]: unknown },
-  viewportId: string,
-  syncGroupService: any
-) {
-  synchronizersStore[viewportId].forEach(synchronizerObj => {
-    if (!synchronizerObj.id) {
-      return;
-    }
-
-    const { id, sourceViewports, targetViewports } = synchronizerObj;
-
-    const synchronizer = syncGroupService.getSynchronizer(id);
-
-    if (!synchronizer) {
-      return;
-    }
-
-    const sourceViewportInfo = sourceViewports.find(
-      sourceViewport => sourceViewport.viewportId === viewportId
-    );
-
-    const targetViewportInfo = targetViewports.find(
-      targetViewport => targetViewport.viewportId === viewportId
-    );
-
-    const isSourceViewportInSynchronizer = synchronizer
-      .getSourceViewports()
-      .find(sourceViewport => sourceViewport.viewportId === viewportId);
-
-    const isTargetViewportInSynchronizer = synchronizer
-      .getTargetViewports()
-      .find(targetViewport => targetViewport.viewportId === viewportId);
-
-    // if the viewport was previously a source viewport, add it again
-    if (sourceViewportInfo && !isSourceViewportInSynchronizer) {
-      synchronizer.addSource({
-        viewportId: sourceViewportInfo.viewportId,
-        renderingEngineId: sourceViewportInfo.renderingEngineId,
-      });
-    }
-
-    // if the viewport was previously a target viewport, add it again
-    if (targetViewportInfo && !isTargetViewportInSynchronizer) {
-      synchronizer.addTarget({
-        viewportId: targetViewportInfo.viewportId,
-        renderingEngineId: targetViewportInfo.renderingEngineId,
-      });
-    }
-  });
-}
-
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';

+OHIFCornerstoneViewport.defaultProps = {
+  isJumpToMeasurementDisabled: false,
+};
+
 OHIFCornerstoneViewport.propTypes = {
  displaySets: PropTypes.array.isRequired,
  dataSource: PropTypes.object.isRequired,
@@ -5,7 +5,7 @@ import CustomizableViewportOverlay from './CustomizableViewportOverlay';
 import ViewportOrientationMarkers from './ViewportOrientationMarkers';
 import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';

-function CornerstoneOverlays(props: withAppTypes) {
+function CornerstoneOverlays(props) {
  const { viewportId, element, scrollbarHeight, servicesManager } = props;
  const { cornerstoneViewportService } = servicesManager.services;
  const [imageSliceData, setImageSliceData] = useState({
@@ -2,24 +2,21 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
-import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';
 import { ViewportOverlay } from '@ohif/ui';
-import { InstanceMetadata } from '@ohif/core/src/types';
 import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } from './utils';
-import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
+import { InstanceMetadata } from 'platform/core/src/types';
+import { ServicesManager } from '@ohif/core';
+import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';

 import './CustomizableViewportOverlay.css';

 const EPSILON = 1e-4;

-type ViewportData = StackViewportData | VolumeViewportData;
-
 interface OverlayItemProps {
-  element: HTMLElement;
-  viewportData: ViewportData;
+  element: any;
+  viewportData: any;
  imageSliceData: ImageSliceData;
-  servicesManager: AppTypes.ServicesManager;
-  viewportId: string;
+  servicesManager: ServicesManager;
  instance: InstanceMetadata;
  customization: any;
  formatters: {
@@ -38,82 +35,67 @@ interface OverlayItemProps {
  scale?: number;
 }

-const OverlayItemComponents = {
-  'ohif.overlayItem': OverlayItem,
-  'ohif.overlayItem.windowLevel': VOIOverlayItem,
-  'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
-  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem,
-};
+/**
+ * Window Level / Center Overlay item
+ */
+function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
+  const { windowWidth, windowCenter } = voi;
+  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
+    return null;
+  }

-
-const studyDateItem = {
-  id: 'StudyDate',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Study date',
-  condition: ({ referenceInstance }) => referenceInstance?.StudyDate,
-  contentF: ({ referenceInstance, formatters: { formatDate } }) => formatDate(referenceInstance.StudyDate),
-};
-
-const seriesDescriptionItem = {
-  id: 'SeriesDescription',
-  customizationType: 'ohif.overlayItem',
-  label: '',
-  title: 'Series description',
-  condition: ({ referenceInstance }) => {
-    return referenceInstance && referenceInstance.SeriesDescription;
-  },
-  contentF: ({ referenceInstance }) => referenceInstance.SeriesDescription
-};
-
-const topLeftItems = { id: 'cornerstoneOverlayTopLeft', items: [studyDateItem, seriesDescriptionItem] };
-
-const topRightItems = { id: 'cornerstoneOverlayTopRight', items: [] };
-
-const bottomLeftItems = {
-  id: 'cornerstoneOverlayBottomLeft', items: [
-    {
-      id: 'WindowLevel',
-      customizationType: 'ohif.overlayItem.windowLevel',
-    },
-    {
-      id: 'ZoomLevel',
-      customizationType: 'ohif.overlayItem.zoomLevel',
-      condition: (props) => {
-        const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
-        return activeToolName === 'Zoom';
-      },
-    },
-  ]
-};
-
-const bottomRightItems = {
-  id: 'cornerstoneOverlayBottomRight',
-  items: [
-    {
-      id: 'InstanceNumber',
-      customizationType: 'ohif.overlayItem.instanceNumber',
-    },
-  ]
-};
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">W:</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 shrink-0 font-light">{windowCenter.toFixed(0)}</span>
+    </div>
+  );
+}

 /**
- * The @ohif/cornerstoneOverlay is a default value for a customization
- * for the cornerstone overlays.  The intent is to allow it to be extended
- * without needing to re-write the individual overlays by using the append
- * mechanism.  Individual attributes can be modified individually without
- * affecting the other items by using the append as well, with position
- * based replacement.
- * This is used as a default in the getCustomizationModule so that it
- * is available early for additional customization extensions.
+ * Zoom Level Overlay item
 */
-const CornerstoneOverlay = {
-  id: '@ohif/cornerstoneOverlay',
-  topLeftItems,
-  topRightItems,
-  bottomLeftItems,
-  bottomRightItems,
-};
+function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">Zoom:</span>
+      <span className="font-light">{scale.toFixed(2)}x</span>
+    </div>
+  );
+}
+
+/**
+ * Instance Number Overlay Item
+ */
+function InstanceNumberOverlayItem({
+  instanceNumber,
+  imageSliceData,
+  customization,
+}: OverlayItemProps) {
+  const { imageIndex, numberOfSlices } = imageSliceData;
+
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">I:</span>
+      <span className="font-light">
+        {instanceNumber !== undefined && instanceNumber !== null
+          ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`
+          : `${imageIndex + 1}/${numberOfSlices}`}
+      </span>
+    </div>
+  );
+}

 /**
 * Customizable Viewport Overlay
@@ -124,65 +106,48 @@ function CustomizableViewportOverlay({
  imageSliceData,
  viewportId,
  servicesManager,
-}: {
-  element: HTMLElement;
-  viewportData: ViewportData;
-  imageSliceData: ImageSliceData;
-  viewportId: string;
-  servicesManager: AppTypes.ServicesManager;
 }) {
-  const { cornerstoneViewportService, customizationService, toolGroupService, displaySetService } =
+  const { toolbarService, cornerstoneViewportService, customizationService } =
    servicesManager.services;
  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
  const [scale, setScale] = useState(1);
+  const [activeTools, setActiveTools] = useState([]);
  const { imageIndex } = imageSliceData;

-  // The new customization is 'cornerstoneOverlay', with an append or replace
-  // on the individual items rather than defining individual items.
-  const cornerstoneOverlay = customizationService.getCustomization('@ohif/cornerstoneOverlay');
-
-  // Historical usage defined the overlays as separate items due to lack of
-  // append functionality.  This code enables the historical usage, but
-  // the recommended functionality is to append to the default values in
-  // cornerstoneOverlay rather than defining individual items.
-  const topLeftCustomization = customizationService.getCustomization(
+  const topLeftCustomization = customizationService.getModeCustomization(
    'cornerstoneOverlayTopLeft'
-  ) || cornerstoneOverlay?.topLeftItems;
-  const topRightCustomization = customizationService.getCustomization(
+  );
+  const topRightCustomization = customizationService.getModeCustomization(
    'cornerstoneOverlayTopRight'
-  ) || cornerstoneOverlay?.topRightItems;
-  const bottomLeftCustomization = customizationService.getCustomization(
+  );
+  const bottomLeftCustomization = customizationService.getModeCustomization(
    'cornerstoneOverlayBottomLeft'
-  ) || cornerstoneOverlay?.bottomLeftItems;
-  const bottomRightCustomization = customizationService.getCustomization(
+  );
+  const bottomRightCustomization = customizationService.getModeCustomization(
    'cornerstoneOverlayBottomRight'
-  ) || cornerstoneOverlay?.bottomRightItems;
-
-
-  const instanceNumber = useMemo(
-    () =>
-      viewportData
-        ? getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService)
-        : null,
-    [viewportData, viewportId, imageIndex, cornerstoneViewportService]
  );

-  const displaySetProps = useMemo(() => {
-    const displaySets = getDisplaySets(viewportData, displaySetService);
-    if (!displaySets) {
+  const instance = useMemo(() => {
+    if (viewportData != null) {
+      return _getViewportInstance(viewportData, imageIndex);
+    } else {
      return null;
    }
-    const [displaySet] = displaySets;
-    const { instances, instance: referenceInstance } = displaySet;
-    return {
-      displaySets,
-      displaySet,
-      instance: instances[imageIndex],
-      instances,
-      referenceInstance,
-    };
-  }, [viewportData, viewportId, instanceNumber, cornerstoneViewportService]);
+  }, [viewportData, imageIndex]);

+  const instanceNumber = useMemo(() => {
+    if (viewportData != null) {
+      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
+    }
+    return null;
+  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
+
+  /**
+   * Initial toolbar state
+   */
+  useEffect(() => {
+    setActiveTools(toolbarService.getActiveTools());
+  }, []);

  /**
   * Updating the VOI when the viewport changes its voi
@@ -225,8 +190,20 @@ function CustomizableViewportOverlay({
          return;
        }

-        const scale = viewport.getZoom();
+        const imageData = viewport.getImageData();

+        if (!imageData) {
+          return;
+        }
+
+        if (camera.scale) {
+          setScale(camera.scale);
+          return;
+        }
+
+        const { spacing } = imageData;
+        // convert parallel scale to scale
+        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
        setScale(scale);
      }
    };
@@ -238,10 +215,26 @@ function CustomizableViewportOverlay({
    };
  }, [viewportId, viewportData, cornerstoneViewportService, element]);

+  /**
+   * Updating the active tools when the toolbar changes
+   */
+  // Todo: this should act on the toolGroups instead of the toolbar state
+  useEffect(() => {
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => {
+        setActiveTools(toolbarService.getActiveTools());
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+
  const _renderOverlayItem = useCallback(
-    (item, props) => {
-      const overlayItemProps = {
-        ...props,
+    item => {
+      const overlayItemProps: OverlayItemProps = {
        element,
        viewportData,
        imageSliceData,
@@ -249,27 +242,29 @@ function CustomizableViewportOverlay({
        servicesManager,
        customization: item,
        formatters: {
-          formatPN,
+          formatPN: formatPN,
          formatDate: formatDICOMDate,
          formatTime: formatDICOMTime,
-          formatNumberPrecision,
+          formatNumberPrecision: formatNumberPrecision,
        },
+        instance,
+        // calculated
+        voi,
+        scale,
+        instanceNumber,
      };

-      if (!item) {
-        return null;
-      }
-
-      const { customizationType } = item;
-      const OverlayItemComponent = OverlayItemComponents[customizationType];
-
-      if (OverlayItemComponent) {
-        return <OverlayItemComponent {...overlayItemProps} />;
+      if (item.customizationType === 'ohif.overlayItem.windowLevel') {
+        return <VOIOverlayItem {...overlayItemProps} />;
+      } else if (item.customizationType === 'ohif.overlayItem.zoomLevel') {
+        return <ZoomOverlayItem {...overlayItemProps} />;
+      } else if (item.customizationType === 'ohif.overlayItem.instanceNumber') {
+        return <InstanceNumberOverlayItem {...overlayItemProps} />;
      } else {
        const renderItem = customizationService.transform(item);

-        if (typeof renderItem.contentF === 'function') {
-          return renderItem.contentF(overlayItemProps);
+        if (typeof renderItem.content === 'function') {
+          return renderItem.content(overlayItemProps);
        }
      }
    },
@@ -280,90 +275,113 @@ function CustomizableViewportOverlay({
      viewportId,
      servicesManager,
      customizationService,
-      displaySetProps,
+      instance,
      voi,
      scale,
      instanceNumber,
    ]
  );

-  const getContent = useCallback(
-    (customization, keyPrefix) => {
-      if (!customization?.items) {
-        return null;
-      }
-      const { items } = customization;
-      const props = {
-        ...displaySetProps,
-        formatters: { formatDate: formatDICOMDate },
-        voi,
-        scale,
-        instanceNumber,
-        viewportId,
-        toolGroupService,
-      };
+  const getTopLeftContent = useCallback(() => {
+    const items = topLeftCustomization?.items || [
+      {
+        id: 'WindowLevel',
+        customizationType: 'ohif.overlayItem.windowLevel',
+      },
+    ];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`topLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
+        ))}
+      </>
+    );
+  }, [topLeftCustomization, _renderOverlayItem]);

-      return (
-        <>
-          {items.map((item, index) => (
-            <div key={`${keyPrefix}_${index}`}>
-              {(!item?.condition || item.condition(props)) && _renderOverlayItem(item, props) || null}
-            </div>
-          ))}
-        </>
-      );
-    },
-    [_renderOverlayItem]
-  );
+  const getTopRightContent = useCallback(() => {
+    const items = topRightCustomization?.items || [
+      {
+        id: 'InstanceNmber',
+        customizationType: 'ohif.overlayItem.instanceNumber',
+      },
+    ];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`topRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
+        ))}
+      </>
+    );
+  }, [topRightCustomization, _renderOverlayItem]);

+  const getBottomLeftContent = useCallback(() => {
+    const items = bottomLeftCustomization?.items || [];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`bottomLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
+        ))}
+      </>
+    );
+  }, [bottomLeftCustomization, _renderOverlayItem]);
+
+  const getBottomRightContent = useCallback(() => {
+    const items = bottomRightCustomization?.items || [];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`bottomRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
+        ))}
+      </>
+    );
+  }, [bottomRightCustomization, _renderOverlayItem]);

  return (
    <ViewportOverlay
-      topLeft={getContent(topLeftCustomization, 'topLeftOverlayItem')}
-      topRight={getContent(topRightCustomization, 'topRightOverlayItem')}
-      bottomLeft={getContent(bottomLeftCustomization, 'bottomLeftOverlayItem')}
-      bottomRight={getContent(bottomRightCustomization, 'bottomRightOverlayItem')}
+      topLeft={getTopLeftContent()}
+      topRight={getTopRightContent()}
+      bottomLeft={getBottomLeftContent()}
+      bottomRight={getBottomRightContent()}
    />
  );
 }

-/**
- * Gets an array of display sets for the given viewport, based on the viewport data.
- * Returns null if none found.
- */
-function getDisplaySets(viewportData, displaySetService) {
-  if (!viewportData?.data?.length) {
-    return null;
+function _getViewportInstance(viewportData, imageIndex) {
+  let imageId = null;
+  if (viewportData.viewportType === Enums.ViewportType.STACK) {
+    imageId = viewportData.data.imageIds[imageIndex];
+  } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
+    const volumes = viewportData.data;
+    if (volumes && volumes.length == 1) {
+      const volume = volumes[0];
+      imageId = volume.imageIds[imageIndex];
+    }
  }
-  const displaySets = viewportData.data.map(datum => displaySetService.getDisplaySetByUID(datum.displaySetInstanceUID)).filter(it => !!it);
-  if (!displaySets.length) {
-    return null;
-  }
-  return displaySets;
+  return imageId ? metaData.get('instance', imageId) || {} : {};
 }

-const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
+function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
  let instanceNumber;

-  switch (viewportData.viewportType) {
-    case Enums.ViewportType.STACK:
-      instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
-      break;
-    case Enums.ViewportType.ORTHOGRAPHIC:
-      instanceNumber = _getInstanceNumberFromVolume(
-        viewportData,
-        viewportId,
-        cornerstoneViewportService,
-        imageIndex
-      );
-      break;
-  }
+  if (viewportData.viewportType === Enums.ViewportType.STACK) {
+    instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);

-  return instanceNumber ?? null;
-};
+    if (!instanceNumber && instanceNumber !== 0) {
+      return null;
+    }
+  } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
+    instanceNumber = _getInstanceNumberFromVolume(
+      viewportData,
+      imageIndex,
+      viewportId,
+      cornerstoneViewportService
+    );
+  }
+  return instanceNumber;
+}

 function _getInstanceNumberFromStack(viewportData, imageIndex) {
-  const imageIds = viewportData.data[0].imageIds;
+  const imageIds = viewportData.data.imageIds;
  const imageId = imageIds[imageIndex];

  if (!imageId) {
@@ -382,24 +400,18 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
  return parseInt(instanceNumber);
 }

-
 // Since volume viewports can be in any view direction, they can render
 // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
 // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
-function _getInstanceNumberFromVolume(
-  viewportData,
-  viewportId,
-  cornerstoneViewportService,
-  imageIndex
-) {
-  const volumes = viewportData.data;
+function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService) {
+  const volumes = viewportData.volumes;

-  if (!volumes) {
+  // Todo: support fusion of acquisition plane which has instanceNumber
+  if (!volumes || volumes.length > 1) {
    return;
  }

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

  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
@@ -430,90 +442,6 @@ function _getInstanceNumberFromVolume(
  }
 }

-function OverlayItem(props) {
-  const { instance, customization = {} } = props;
-  const { color, attribute, title, label, background } = customization;
-  const value = customization.contentF?.(props, customization) ?? instance?.[attribute];
-  if (value === undefined || value === null) {
-    return null;
-  }
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color, background }}
-      title={title}
-    >
-      {label ? (<span className="mr-1 shrink-0">{label}</span>) : null}
-      <span className="ml-1 mr-2 shrink-0">{value}</span>
-    </div>);
-}
-
-/**
- * Window Level / Center Overlay item
- */
-function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
-  const { windowWidth, windowCenter } = voi;
-  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
-    return null;
-  }
-
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color: customization?.color }}
-    >
-      <span className="mr-1 shrink-0">W:</span>
-      <span className="ml-1 mr-2 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-1 shrink-0">L:</span>
-      <span className="ml-1 shrink-0">{windowCenter.toFixed(0)}</span>
-    </div>
-  );
-}
-
-/**
- * Zoom Level Overlay item
- */
-function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color: (customization && customization.color) || undefined }}
-    >
-      <span className="mr-1 shrink-0">Zoom:</span>
-      <span>{scale.toFixed(2)}x</span>
-    </div>
-  );
-}
-
-/**
- * Instance Number Overlay Item
- */
-function InstanceNumberOverlayItem({
-  instanceNumber,
-  imageSliceData,
-  customization,
-}: OverlayItemProps) {
-  const { imageIndex, numberOfSlices } = imageSliceData;
-
-  return (
-    <div
-      className="overlay-item flex flex-row"
-      style={{ color: (customization && customization.color) || undefined }}
-    >
-      <span>
-        {instanceNumber !== undefined && instanceNumber !== null ? (
-          <>
-            <span className="mr-1 shrink-0">I:</span>
-            <span>{`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`}</span>
-          </>
-        ) : (
-          `${imageIndex + 1}/${numberOfSlices}`
-        )}
-      </span>
-    </div>
-  );
-}
-
 CustomizableViewportOverlay.propTypes = {
  viewportData: PropTypes.object,
  imageIndex: PropTypes.number,
@@ -521,5 +449,3 @@ CustomizableViewportOverlay.propTypes = {
 };

 export default CustomizableViewportOverlay;
-
-export { CustomizableViewportOverlay, CornerstoneOverlay };
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Enums, Types, utilities } from '@cornerstonejs/core';
 import { utilities as csToolsUtils } from '@cornerstonejs/tools';
 import { ImageScrollbar } from '@ohif/ui';
+import { ServicesManger } from '@ohif/core';

 function CornerstoneImageScrollbar({
  viewportData,
@@ -12,8 +13,8 @@ function CornerstoneImageScrollbar({
  setImageSliceData,
  scrollbarHeight,
  servicesManager,
-}: withAppTypes) {
-  const { cineService, cornerstoneViewportService } = servicesManager.services;
+}) {
+  const { cineService, cornerstoneViewportService } = (servicesManager as ServicesManger).services;

  const onImageScrollbarChange = (imageIndex, viewportId) => {
    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
@@ -22,7 +23,7 @@ function CornerstoneImageScrollbar({

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

@@ -48,7 +49,7 @@ function CornerstoneImageScrollbar({

      setImageSliceData({
        imageIndex: imageIndex,
-        numberOfSlices: viewportData.data[0].imageIds.length,
+        numberOfSlices: viewportData.data.imageIds.length,
      });

      return;
@@ -78,7 +79,7 @@ function CornerstoneImageScrollbar({
      // find the index of imageId in the imageIds
      setImageSliceData({
        imageIndex: newImageIdIndex,
-        numberOfSlices: viewportData.data[0].imageIds.length,
+        numberOfSlices: viewportData.data.imageIds.length,
      });
    };

@@ -78,8 +78,14 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
 }

 ViewportImageSliceLoadingIndicator.propTypes = {
+  percentComplete: PropTypes.number,
  error: PropTypes.object,
  element: PropTypes.object,
 };

+ViewportImageSliceLoadingIndicator.defaultProps = {
+  percentComplete: 0,
+  error: null,
+};
+
 export default ViewportImageSliceLoadingIndicator;
@@ -22,7 +22,7 @@ function ViewportOrientationMarkers({
  viewportId,
  servicesManager,
  orientationMarkers = ['top', 'left'],
-}: withAppTypes) {
+}) {
  // Rotation is in degrees
  const [rotation, setRotation] = useState(0);
  const [flipHorizontal, setFlipHorizontal] = useState(false);
@@ -67,7 +67,7 @@ function ViewportOrientationMarkers({
    let rowCosines, columnCosines;
    if (viewportData.viewportType === 'stack') {
      const imageIndex = imageSliceData.imageIndex;
-      const imageId = viewportData.data[0].imageIds?.[imageIndex];
+      const imageId = viewportData.data.imageIds?.[imageIndex];

      // Workaround for below TODO stub
      if (!imageId) {
@@ -108,15 +108,17 @@ function ViewportOrientationMarkers({
      console.log('ViewportOrientationMarkers::No viewport');
      return null;
    }
+    const backgroundColor = ohifViewport.getViewportOptions().background;
+
+    // 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;

    return orientationMarkers.map((m, index) => (
      <div
        className={classNames(
-          'overlay-text',
          `${m}-mid orientation-marker`,
-          'text-aqua-pale',
-          'text-[13px]',
-          'leading-5'
+          isLight ? 'text-[#726F7E]' : 'text-[#ccc]'
        )}
        key={`${m}-mid orientation-marker`}
      >
@@ -133,9 +135,19 @@ function ViewportOrientationMarkers({
    element,
  ]);

-  return <div className="ViewportOrientationMarkers select-none">{markers}</div>;
+  return <div className="ViewportOrientationMarkers noselect">{markers}</div>;
 }

+ViewportOrientationMarkers.propTypes = {
+  percentComplete: PropTypes.number,
+  error: PropTypes.object,
+};
+
+ViewportOrientationMarkers.defaultProps = {
+  percentComplete: 0,
+  error: null,
+};
+
 /**
 *
 * Computes the orientation labels on a Cornerstone-enabled Viewport element
@@ -0,0 +1,278 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { vec3 } from 'gl-matrix';
+import PropTypes from 'prop-types';
+import { metaData, Enums, utilities } from '@cornerstonejs/core';
+import { ViewportOverlay } from '@ohif/ui';
+import { ServicesManager } from '@ohif/core';
+
+const EPSILON = 1e-4;
+
+function CornerstoneViewportOverlay({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager,
+}) {
+  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
+  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
+  const [scale, setScale] = useState(1);
+  const [activeTools, setActiveTools] = useState([]);
+
+  /**
+   * Initial toolbar state
+   */
+  useEffect(() => {
+    setActiveTools(toolbarService.getActiveTools());
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => {
+        if (!isMounted) {
+          return;
+        }
+
+        setActiveTools(toolbarService.getActiveTools());
+      }
+    );
+
+    return () => {
+      isMounted = false;
+      unsubscribe();
+    };
+  }, []);
+
+  /**
+   * Updating the VOI when the viewport changes its voi
+   */
+  useEffect(() => {
+    const updateVOI = eventDetail => {
+      const { range } = eventDetail.detail;
+
+      if (!range) {
+        return;
+      }
+
+      const { lower, upper } = range;
+      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(lower, upper);
+
+      setVOI({ windowCenter, windowWidth });
+    };
+
+    element.addEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
+
+    return () => {
+      element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
+    };
+  }, [viewportId, viewportData, voi, element]);
+
+  /**
+   * Updating the scale when the viewport changes its zoom
+   */
+  useEffect(() => {
+    const updateScale = eventDetail => {
+      const { previousCamera, camera } = eventDetail.detail;
+
+      if (
+        previousCamera.parallelScale !== camera.parallelScale ||
+        previousCamera.scale !== camera.scale
+      ) {
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+        if (!viewport) {
+          return;
+        }
+
+        const imageData = viewport.getImageData();
+
+        if (!imageData) {
+          return;
+        }
+
+        if (camera.scale) {
+          setScale(camera.scale);
+          return;
+        }
+
+        const { spacing } = imageData;
+        // convert parallel scale to scale
+        const scale = (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
+        setScale(scale);
+      }
+    };
+
+    element.addEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
+
+    return () => {
+      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
+    };
+  }, [viewportId, viewportData]);
+
+  const getTopLeftContent = useCallback(() => {
+    const { windowWidth, windowCenter } = voi;
+
+    if (activeTools.includes('WindowLevel')) {
+      if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
+        return null;
+      }
+
+      return (
+        <div className="flex flex-row text-base">
+          <span className="mr-1">W:</span>
+          <span className="ml-1 mr-2 font-light">{windowWidth.toFixed(0)}</span>
+          <span className="mr-1">L:</span>
+          <span className="ml-1 font-light">{windowCenter.toFixed(0)}</span>
+        </div>
+      );
+    }
+
+    if (activeTools.includes('Zoom')) {
+      return (
+        <div className="flex flex-row text-base">
+          <span className="mr-1">Zoom:</span>
+          <span className="font-light">{scale.toFixed(2)}x</span>
+        </div>
+      );
+    }
+
+    return null;
+  }, [voi, scale, activeTools]);
+
+  const getTopRightContent = useCallback(() => {
+    const { imageIndex, numberOfSlices } = imageSliceData;
+    if (!viewportData) {
+      return;
+    }
+
+    let instanceNumber;
+
+    if (viewportData.viewportType === Enums.ViewportType.STACK) {
+      instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
+
+      if (!instanceNumber) {
+        return null;
+      }
+    } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
+      instanceNumber = _getInstanceNumberFromVolume(
+        viewportData,
+        imageIndex,
+        viewportId,
+        cornerstoneViewportService
+      );
+    }
+
+    return (
+      <div className="flex flex-row text-base">
+        <span className="mr-1">I:</span>
+        <span className="font-light">
+          {instanceNumber !== undefined
+            ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`
+            : `${imageIndex + 1}/${numberOfSlices}`}
+        </span>
+      </div>
+    );
+  }, [imageSliceData, viewportData, viewportId]);
+
+  if (!viewportData) {
+    return null;
+  }
+
+  const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
+
+  if (!ohifViewport) {
+    return null;
+  }
+
+  const backgroundColor = ohifViewport.getViewportOptions().background;
+
+  // 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;
+
+  return (
+    <ViewportOverlay
+      topLeft={getTopLeftContent()}
+      topRight={getTopRightContent()}
+      color={isLight && 'text-[#0944B3]'}
+    />
+  );
+}
+
+function _getInstanceNumberFromStack(viewportData, imageIndex) {
+  const imageIds = viewportData.data.imageIds;
+  const imageId = imageIds[imageIndex];
+
+  if (!imageId) {
+    return;
+  }
+
+  const generalImageModule = metaData.get('generalImageModule', imageId) || {};
+  const { instanceNumber } = generalImageModule;
+
+  const stackSize = imageIds.length;
+
+  if (stackSize <= 1) {
+    return;
+  }
+
+  return parseInt(instanceNumber);
+}
+
+// Since volume viewports can be in any view direction, they can render
+// a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
+// Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
+function _getInstanceNumberFromVolume(
+  viewportData,
+  imageIndex,
+  viewportId,
+  cornerstoneViewportService
+) {
+  const volumes = viewportData.volumes;
+
+  // Todo: support fusion of acquisition plane which has instanceNumber
+  if (!volumes || volumes.length > 1) {
+    return;
+  }
+
+  const volume = volumes[0];
+  const { direction, imageIds } = volume;
+
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+  if (!cornerstoneViewport) {
+    return;
+  }
+
+  const camera = cornerstoneViewport.getCamera();
+  const { viewPlaneNormal } = camera;
+  // checking if camera is looking at the acquisition plane (defined by the direction on the volume)
+
+  const scanAxisNormal = direction.slice(6, 9);
+
+  // check if viewPlaneNormal is parallel to scanAxisNormal
+  const cross = vec3.cross(vec3.create(), viewPlaneNormal, scanAxisNormal);
+  const isAcquisitionPlane = vec3.length(cross) < EPSILON;
+
+  if (isAcquisitionPlane) {
+    const imageId = imageIds[imageIndex];
+
+    if (!imageId) {
+      return {};
+    }
+
+    const { instanceNumber } = metaData.get('generalImageModule', imageId) || {};
+    return parseInt(instanceNumber);
+  }
+}
+
+CornerstoneViewportOverlay.propTypes = {
+  viewportData: PropTypes.object,
+  imageIndex: PropTypes.number,
+  viewportId: PropTypes.string,
+  servicesManager: PropTypes.instanceOf(ServicesManager),
+};
+
+export default CornerstoneViewportOverlay;
@@ -62,12 +62,6 @@ export function formatPN(name) {
  if (!name) {
    return '';
  }
-  if (typeof name === 'object') {
-    name = name.Alphabetic;
-    if (!name) {
-      return '';
-    }
-  }

  const cleaned = name
    .split('^')
@@ -3,8 +3,6 @@ import {
  StackViewport,
  VolumeViewport,
  utilities as csUtils,
-  Types as CoreTypes,
-  BaseVolumeViewport,
 } from '@cornerstonejs/core';
 import {
  ToolGroupManager,
@@ -13,19 +11,13 @@ import {
  ReferenceLinesTool,
 } from '@cornerstonejs/tools';
 import { Types as OhifTypes } from '@ohif/core';
-import { vec3, mat4 } from 'gl-matrix';

 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
-import { callLabelAutocompleteDialog, showLabelAnnotationPopup } from './utils/callInputDialog';
-import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
+import callInputDialog from './utils/callInputDialog';
+import toggleStackImageSync from './utils/stackSync/toggleStackImageSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
-import toggleVOISliceSync from './utils/toggleVOISliceSync';
-
-const toggleSyncFunctions = {
-  imageSlice: toggleImageSliceSync,
-  voi: toggleVOISliceSync,
-};
+import { CornerstoneServices } from './types';

 function commandsModule({
  servicesManager,
@@ -35,27 +27,18 @@ function commandsModule({
    viewportGridService,
    toolGroupService,
    cineService,
+    toolbarService,
    uiDialogService,
    cornerstoneViewportService,
    uiNotificationService,
    measurementService,
-    customizationService,
-    colorbarService,
-    hangingProtocolService,
-    syncGroupService,
-  } = servicesManager.services;
+  } = servicesManager.services as CornerstoneServices;

  const { measurementServiceSource } = this;

  function _getActiveViewportEnabledElement() {
    return getActiveViewportEnabledElement(viewportGridService);
  }
-
-  function _getActiveViewportToolGroupId() {
-    const viewport = _getActiveViewportEnabledElement();
-    return toolGroupService.getToolGroupForViewport(viewport.id);
-  }
-
  const actions = {
    /**
     * Generates the selector props for the context menu, specific to
@@ -131,29 +114,38 @@ function commandsModule({
        ? nearbyToolData
        : null;
    },
+
+    // Measurement tool commands:
+
    /** Delete the given measurement */
    deleteMeasurement: ({ uid }) => {
      if (uid) {
        measurementServiceSource.remove(uid);
      }
    },
+
    /**
     * Show the measurement labelling input dialog and update the label
     * on the measurement with a response if not cancelled.
     */
    setMeasurementLabel: ({ uid }) => {
-      const labelConfig = customizationService.get('measurementLabels');
      const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
-        (val: Map<any, any>) => {
-          measurementService.update(
-            uid,
-            {
-              ...val,
-            },
-            true
-          );
-        }
+
+      callInputDialog(
+        uiDialogService,
+        measurement,
+        (label, actionId) => {
+          if (actionId === 'cancel') {
+            return;
+          }
+
+          const updatedMeasurement = Object.assign({}, measurement, {
+            label,
+          });
+
+          measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
+        },
+        false
      );
    },

@@ -229,22 +221,47 @@ function commandsModule({

      viewportGridService.setActiveViewportId(viewportId);
    },
-    arrowTextCallback: ({ callback, data, uid }) => {
-      const labelConfig = customizationService.get('measurementLabels');
-      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig);
+    arrowTextCallback: ({ callback, data }) => {
+      callInputDialog(uiDialogService, data, callback);
+    },
+    cleanUpCrosshairs: () => {
+      // if the crosshairs tool is active, deactivate it and set window level active
+      // since we are going back to main non-mpr HP
+      const activeViewportToolGroup = toolGroupService.getToolGroup(null);
+
+      if (activeViewportToolGroup._toolInstances?.Crosshairs?.mode === Enums.ToolModes.Active) {
+        actions.toolbarServiceRecordInteraction({
+          interactionType: 'tool',
+          commands: [
+            {
+              commandOptions: {
+                toolName: 'WindowLevel',
+              },
+              context: 'CORNERSTONE',
+            },
+          ],
+        });
+      }
    },
    toggleCine: () => {
      const { viewports } = viewportGridService.getState();
      const { isCineEnabled } = cineService.getState();
      cineService.setIsCineEnabled(!isCineEnabled);
+      toolbarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
      viewports.forEach((_, index) => cineService.setCine({ id: index, isPlaying: false }));
    },
-
-    setViewportWindowLevel({ viewportId, window, level }) {
+    setWindowLevel({ window, level, toolGroupId }) {
      // convert to numbers
      const windowWidthNum = Number(window);
      const windowCenterNum = Number(level);

+      const { viewportId } = _getActiveViewportEnabledElement();
+      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(viewportId);
+
+      if (toolGroupId && toolGroupId !== viewportToolGroupId) {
+        return;
+      }
+
      // get actor from the viewport
      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
      const viewport = renderingEngine.getViewport(viewportId);
@@ -260,102 +277,34 @@ function commandsModule({
      viewport.render();
    },

-    toggleViewportColorbar: ({ viewportId, displaySetInstanceUIDs, options = {} }) => {
-      const hasColorbar = colorbarService.hasColorbar(viewportId);
-      if (hasColorbar) {
-        colorbarService.removeColorbar(viewportId);
-        return;
-      }
-      colorbarService.addColorbar(viewportId, displaySetInstanceUIDs, options);
+    // Just call the toolbar service record interaction - allows
+    // executing a toolbar command as a full toolbar command with side affects
+    // coming from the ToolbarService itself.
+    toolbarServiceRecordInteraction: props => {
+      toolbarService.recordInteraction(props);
    },
-
-    setWindowLevel(props) {
-      const { toolGroupId } = props;
-      const { viewportId } = _getActiveViewportEnabledElement();
-      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(viewportId);
-
-      if (toolGroupId && toolGroupId !== viewportToolGroupId) {
-        return;
-      }
-
-      actions.setViewportWindowLevel({ ...props, viewportId });
+    // 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);
    },
-    setToolEnabled: ({ toolName, toggle, toolGroupId }) => {
-      const { viewports } = viewportGridService.getState();
+    setToolActive: ({ toolName, toolGroupId = null, toggledState }) => {
+      if (toolName === 'Crosshairs') {
+        const activeViewportToolGroup = toolGroupService.getToolGroup(null);

-      if (!viewports.size) {
-        return;
-      }
+        if (!activeViewportToolGroup._toolInstances.Crosshairs) {
+          uiNotificationService.show({
+            title: 'Crosshairs',
+            message:
+              'You need to be in a MPR view to use Crosshairs. Click on MPR button in the toolbar to activate it.',
+            type: 'info',
+            duration: 3000,
+          });

-      const toolGroup = toolGroupService.getToolGroup(toolGroupId ?? null);
-
-      if (!toolGroup || !toolGroup.hasTool(toolName)) {
-        return;
-      }
-
-      const toolIsEnabled = toolGroup.getToolOptions(toolName).mode === Enums.ToolModes.Enabled;
-
-      // Toggle the tool's state only if the toggle is true
-      if (toggle) {
-        toolIsEnabled ? toolGroup.setToolDisabled(toolName) : toolGroup.setToolEnabled(toolName);
-      } else {
-        toolGroup.setToolEnabled(toolName);
-      }
-
-      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
-      renderingEngine.render();
-    },
-    toggleEnabledDisabledToolbar({ value, itemId, toolGroupId }) {
-      const toolName = itemId || value;
-      toolGroupId = toolGroupId ?? _getActiveViewportToolGroupId();
-
-      const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-      if (!toolGroup || !toolGroup.hasTool(toolName)) {
-        return;
-      }
-
-      const toolIsEnabled = toolGroup.getToolOptions(toolName).mode === Enums.ToolModes.Enabled;
-
-      toolIsEnabled ? toolGroup.setToolDisabled(toolName) : toolGroup.setToolEnabled(toolName);
-    },
-    toggleActiveDisabledToolbar({ value, itemId, toolGroupId }) {
-      const toolName = itemId || value;
-      toolGroupId = toolGroupId ?? _getActiveViewportToolGroupId();
-      const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-      if (!toolGroup || !toolGroup.hasTool(toolName)) {
-        return;
-      }
-
-      const toolIsActive = [
-        Enums.ToolModes.Active,
-        Enums.ToolModes.Enabled,
-        Enums.ToolModes.Passive,
-      ].includes(toolGroup.getToolOptions(toolName).mode);
-
-      toolIsActive
-        ? toolGroup.setToolDisabled(toolName)
-        : actions.setToolActive({ toolName, toolGroupId });
-
-      // we should set the previously active tool to active after we set the
-      // current tool disabled
-      if (toolIsActive) {
-        const prevToolName = toolGroup.getPrevActivePrimaryToolName();
-        if (prevToolName !== toolName) {
-          actions.setToolActive({ toolName: prevToolName, toolGroupId });
+          throw new Error('Crosshairs tool is not available in this viewport');
        }
      }
-    },
-    setToolActiveToolbar: ({ value, itemId, toolName, toolGroupIds = [] }) => {
-      // Sometimes it is passed as value (tools with options), sometimes as itemId (toolbar buttons)
-      toolName = toolName || itemId || value;

-      toolGroupIds = toolGroupIds.length ? toolGroupIds : toolGroupService.getToolGroupIds();
-
-      toolGroupIds.forEach(toolGroupId => {
-        actions.setToolActive({ toolName, toolGroupId });
-      });
-    },
-    setToolActive: ({ toolName, toolGroupId = null }) => {
      const { viewports } = viewportGridService.getState();

      if (!viewports.size) {
@@ -368,17 +317,34 @@ function commandsModule({
        return;
      }

-      if (!toolGroup.hasTool(toolName)) {
-        return;
+      if (!toolGroup.getToolInstance(toolName)) {
+        uiNotificationService.show({
+          title: `${toolName} tool`,
+          message: `The ${toolName} tool is not available in this viewport.`,
+          type: 'info',
+          duration: 3000,
+        });
+
+        throw new Error(`ToolGroup ${toolGroup.id} does not have this tool.`);
      }

      const activeToolName = toolGroup.getActivePrimaryMouseButtonTool();

      if (activeToolName) {
-        const activeToolOptions = toolGroup.getToolConfiguration(activeToolName);
-        activeToolOptions?.disableOnPassive
-          ? toolGroup.setToolDisabled(activeToolName)
-          : toolGroup.setToolPassive(activeToolName);
+        // Todo: this is a hack to prevent the crosshairs to stick around
+        // after another tool is selected. We should find a better way to do this
+        if (activeToolName === 'Crosshairs') {
+          toolGroup.setToolDisabled(activeToolName);
+        } else {
+          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
@@ -414,7 +380,6 @@ function commandsModule({
            onClose: uiModalService.hide,
            cornerstoneViewportService,
          },
-          containerDimensions: 'w-[70%] max-w-[900px]',
        });
      }
    },
@@ -426,16 +391,8 @@ function commandsModule({

      const { viewport } = enabledElement;

-      if (viewport instanceof BaseVolumeViewport) {
-        const camera = viewport.getCamera();
-        const rotAngle = (rotation * Math.PI) / 180;
-        const rotMat = mat4.identity(new Float32Array(16));
-        mat4.rotate(rotMat, rotMat, rotAngle, camera.viewPlaneNormal);
-        const rotatedViewUp = vec3.transformMat4(vec3.create(), camera.viewUp, rotMat);
-        viewport.setCamera({ viewUp: rotatedViewUp as CoreTypes.Point3 });
-        viewport.render();
-      } else if (viewport.getRotation !== undefined) {
-        const currentRotation = viewport.getRotation();
+      if (viewport instanceof StackViewport) {
+        const { rotation: currentRotation } = viewport.getProperties();
        const newRotation = (currentRotation + rotation) % 360;
        viewport.setProperties({ rotation: newRotation });
        viewport.render();
@@ -450,9 +407,11 @@ function commandsModule({

      const { viewport } = enabledElement;

-      const { flipHorizontal } = viewport.getCamera();
-      viewport.setCamera({ flipHorizontal: !flipHorizontal });
-      viewport.render();
+      if (viewport instanceof StackViewport) {
+        const { flipHorizontal } = viewport.getCamera();
+        viewport.setCamera({ flipHorizontal: !flipHorizontal });
+        viewport.render();
+      }
    },
    flipViewportVertical: () => {
      const enabledElement = _getActiveViewportEnabledElement();
@@ -463,9 +422,11 @@ function commandsModule({

      const { viewport } = enabledElement;

-      const { flipVertical } = viewport.getCamera();
-      viewport.setCamera({ flipVertical: !flipVertical });
-      viewport.render();
+      if (viewport instanceof StackViewport) {
+        const { flipVertical } = viewport.getCamera();
+        viewport.setCamera({ flipVertical: !flipVertical });
+        viewport.render();
+      }
    },
    invertViewport: ({ element }) => {
      let enabledElement;
@@ -495,8 +456,13 @@ function commandsModule({

      const { viewport } = enabledElement;

-      viewport.resetProperties?.();
-      viewport.resetCamera();
+      if (viewport instanceof StackViewport) {
+        viewport.resetProperties();
+        viewport.resetCamera();
+      } else {
+        viewport.resetProperties();
+        viewport.resetCamera();
+      }

      viewport.render();
    },
@@ -568,51 +534,18 @@ function commandsModule({

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

      const actorEntries = viewport.getActors();
-      let hpOpacity;
-      // Retrieve active protocol's viewport match details
-      const { viewportMatchDetails } = hangingProtocolService.getActiveProtocol();
-      // Get display set options for the specified viewport ID
-      const displaySetsInfo = viewportMatchDetails.get(viewportId)?.displaySetsInfo;

-      if (displaySetsInfo) {
-        // Find the display set that matches the given UID
-        const matchingDisplaySet = displaySetsInfo.find(
-          displaySet => displaySet.displaySetInstanceUID === displaySetInstanceUID
-        );
-        // If a matching display set is found, update the opacity with its value
-        hpOpacity = matchingDisplaySet?.displaySetOptions?.options?.colormap?.opacity;
-      }
+      const actorEntry = actorEntries.find(actorEntry => {
+        return actorEntry.uid.includes(displaySetInstanceUID);
+      });

-      // HP takes priority over the default opacity
-      colormap = { ...colormap, opacity: hpOpacity || opacity };
+      const { actor: volumeActor, uid: volumeId } = actorEntry;

-      const setViewportProperties = (viewport, uid) => {
-        const actorEntry = actorEntries.find(entry => entry.uid.includes(uid));
-        const { actor: volumeActor, uid: volumeId } = actorEntry;
-        viewport.setProperties({ colormap, volumeActor }, volumeId);
-      };
-
-      if (viewport instanceof StackViewport) {
-        setViewportProperties(viewport, viewportId);
-      }
-
-      if (viewport instanceof VolumeViewport) {
-        if (!displaySetInstanceUID) {
-          const { viewports } = viewportGridService.getState();
-          displaySetInstanceUID = viewports.get(viewportId)?.displaySetInstanceUIDs[0];
-        }
-        setViewportProperties(viewport, displaySetInstanceUID);
-      }
+      viewport.setProperties({ colormap, volumeActor }, volumeId);

      if (immediate) {
        viewport.render();
@@ -626,207 +559,32 @@ function commandsModule({
        (currentIndex + direction + viewportIds.length) % viewportIds.length;
      viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex] as string);
    },
-    /**
-     * If the syncId is given and a synchronizer with that ID already exists, it will
-     * toggle it on/off for the provided viewports. If not, it will attempt to create
-     * a new synchronizer using the given syncId and type for the specified viewports.
-     * If no viewports are provided, you may notice some default behavior.
-     * - 'voi' type, we will aim to synchronize all viewports with the same modality
-     * -'imageSlice' type, we will aim to synchronize all viewports with the same orientation.
-     *
-     * @param options
-     * @param options.viewports - The viewports to synchronize
-     * @param options.syncId - The synchronization group ID
-     * @param options.type - The type of synchronization to perform
-     */
-    toggleSynchronizer: ({ type, viewports, syncId }) => {
-      const synchronizer = syncGroupService.getSynchronizer(syncId);

-      if (synchronizer) {
-        synchronizer.isDisabled() ? synchronizer.setEnabled(true) : synchronizer.setEnabled(false);
-        return;
-      }
-
-      const fn = toggleSyncFunctions[type];
-
-      if (fn) {
-        fn({
-          servicesManager,
-          viewports,
-          syncId,
-        });
-      }
+    toggleStackImageSync: ({ toggledState }) => {
+      toggleStackImageSync({
+        servicesManager,
+        toggledState,
+      });
    },
-    setSourceViewportForReferenceLinesTool: ({ viewportId }) => {
+    setSourceViewportForReferenceLinesTool: ({ toggledState, viewportId }) => {
      if (!viewportId) {
        const { activeViewportId } = viewportGridService.getState();
-        viewportId = activeViewportId ?? 'default';
+        viewportId = activeViewportId;
      }

      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);

-      toolGroup?.setToolConfiguration(
+      toolGroup.setToolConfiguration(
        ReferenceLinesTool.toolName,
        {
          sourceViewportId: viewportId,
        },
        true // overwrite
      );
-
-      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
-      renderingEngine.render();
    },
    storePresentation: ({ viewportId }) => {
      cornerstoneViewportService.storePresentation({ viewportId });
    },
-    updateVolumeData: ({ volume }) => {
-      // update vtkOpenGLTexture and imageData of computed volume
-      const { imageData, vtkOpenGLTexture } = volume;
-      const numSlices = imageData.getDimensions()[2];
-      const slicesToUpdate = [...Array(numSlices).keys()];
-      slicesToUpdate.forEach(i => {
-        vtkOpenGLTexture.setUpdatedFrame(i);
-      });
-      imageData.modified();
-    },
-
-    attachProtocolViewportDataListener: ({ protocol, stageIndex }) => {
-      const EVENT = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
-      const command = protocol.callbacks.onViewportDataInitialized;
-      const numPanes = protocol.stages?.[stageIndex]?.viewports.length ?? 1;
-      let numPanesWithData = 0;
-      const { unsubscribe } = cornerstoneViewportService.subscribe(EVENT, evt => {
-        numPanesWithData++;
-
-        if (numPanesWithData === numPanes) {
-          commandsManager.run(...command);
-
-          // Unsubscribe from the event
-          unsubscribe(EVENT);
-        }
-      });
-    },
-
-    setViewportPreset: ({ viewportId, preset }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      if (!viewport) {
-        return;
-      }
-      viewport.setProperties({
-        preset,
-      });
-      viewport.render();
-    },
-
-    /**
-     * Sets the volume quality for a given viewport.
-     * @param {string} viewportId - The ID of the viewport to set the volume quality.
-     * @param {number} volumeQuality - The desired quality level of the volume rendering.
-     */
-
-    setVolumeRenderingQulaity: ({ viewportId, volumeQuality }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      const { actor } = viewport.getActors()[0];
-      const mapper = actor.getMapper();
-      const image = mapper.getInputData();
-      const dims = image.getDimensions();
-      const spacing = image.getSpacing();
-      const spatialDiagonal = vec3.length(
-        vec3.fromValues(dims[0] * spacing[0], dims[1] * spacing[1], dims[2] * spacing[2])
-      );
-
-      let sampleDistance = spacing.reduce((a, b) => a + b) / 3.0;
-      sampleDistance /= volumeQuality > 1 ? 0.5 * volumeQuality ** 2 : 1.0;
-      const samplesPerRay = spatialDiagonal / sampleDistance + 1;
-      mapper.setMaximumSamplesPerRay(samplesPerRay);
-      mapper.setSampleDistance(sampleDistance);
-      viewport.render();
-    },
-
-    /**
-     * Shifts opacity points for a given viewport id.
-     * @param {string} viewportId - The ID of the viewport to set the mapping range.
-     * @param {number} shift - The shift value to shift the points by.
-     */
-    shiftVolumeOpacityPoints: ({ viewportId, shift }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      const { actor } = viewport.getActors()[0];
-      const ofun = actor.getProperty().getScalarOpacity(0);
-
-      const opacityPointValues = []; // Array to hold values
-      // Gather Existing Values
-      const size = ofun.getSize();
-      for (let pointIdx = 0; pointIdx < size; pointIdx++) {
-        const opacityPointValue = [0, 0, 0, 0];
-        ofun.getNodeValue(pointIdx, opacityPointValue);
-        // opacityPointValue now holds [xLocation, opacity, midpoint, sharpness]
-        opacityPointValues.push(opacityPointValue);
-      }
-      // Add offset
-      opacityPointValues.forEach(opacityPointValue => {
-        opacityPointValue[0] += shift; // Change the location value
-      });
-      // Set new values
-      ofun.removeAllPoints();
-      opacityPointValues.forEach(opacityPointValue => {
-        ofun.addPoint(...opacityPointValue);
-      });
-      viewport.render();
-    },
-
-    /**
-     * Sets the volume lighting settings for a given viewport.
-     * @param {string} viewportId - The ID of the viewport to set the lighting settings.
-     * @param {Object} options - The lighting settings to be set.
-     * @param {boolean} options.shade - The shade setting for the lighting.
-     * @param {number} options.ambient - The ambient setting for the lighting.
-     * @param {number} options.diffuse - The diffuse setting for the lighting.
-     * @param {number} options.specular - The specular setting for the lighting.
-     **/
-
-    setVolumeLighting: ({ viewportId, options }) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-      const { actor } = viewport.getActors()[0];
-      const property = actor.getProperty();
-
-      if (options.shade !== undefined) {
-        property.setShade(options.shade);
-      }
-
-      if (options.ambient !== undefined) {
-        property.setAmbient(options.ambient);
-      }
-
-      if (options.diffuse !== undefined) {
-        property.setDiffuse(options.diffuse);
-      }
-
-      if (options.specular !== undefined) {
-        property.setSpecular(options.specular);
-      }
-
-      viewport.render();
-    },
-    resetCrosshairs: ({ viewportId }) => {
-      const crosshairInstances = [];
-
-      const getCrosshairInstances = toolGroupId => {
-        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-        crosshairInstances.push(toolGroup.getToolInstance('Crosshairs'));
-      };
-
-      if (!viewportId) {
-        const toolGroupIds = toolGroupService.getToolGroupIds();
-        toolGroupIds.forEach(getCrosshairInstances);
-      } else {
-        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-        getCrosshairInstances(toolGroup.id);
-      }
-
-      crosshairInstances.forEach(ins => {
-        ins?.resetCrosshairs();
-      });
-    },
  };

  const definitions = {
@@ -834,6 +592,7 @@ function commandsModule({
    // context menu
    showCornerstoneContextMenu: {
      commandFn: actions.showCornerstoneContextMenu,
+      storeContexts: [],
      options: {
        menuCustomizationId: 'measurementsContextMenu',
        commands: [
@@ -852,9 +611,7 @@ function commandsModule({
      storeContexts: [],
      options: {},
    },
-    toggleViewportColorbar: {
-      commandFn: actions.toggleViewportColorbar,
-    },
+
    deleteMeasurement: {
      commandFn: actions.deleteMeasurement,
    },
@@ -864,21 +621,16 @@ function commandsModule({
    updateMeasurement: {
      commandFn: actions.updateMeasurement,
    },
-    setViewportWindowLevel: {
-      commandFn: actions.setViewportWindowLevel,
-    },
+
    setWindowLevel: {
      commandFn: actions.setWindowLevel,
    },
+    toolbarServiceRecordInteraction: {
+      commandFn: actions.toolbarServiceRecordInteraction,
+    },
    setToolActive: {
      commandFn: actions.setToolActive,
    },
-    setToolActiveToolbar: {
-      commandFn: actions.setToolActiveToolbar,
-    },
-    setToolEnabled: {
-      commandFn: actions.setToolEnabled,
-    },
    rotateViewportCW: {
      commandFn: actions.rotateViewport,
      options: { rotation: 90 },
@@ -952,41 +704,20 @@ function commandsModule({
    setViewportColormap: {
      commandFn: actions.setViewportColormap,
    },
+    toggleStackImageSync: {
+      commandFn: actions.toggleStackImageSync,
+    },
    setSourceViewportForReferenceLinesTool: {
      commandFn: actions.setSourceViewportForReferenceLinesTool,
    },
    storePresentation: {
      commandFn: actions.storePresentation,
    },
-    attachProtocolViewportDataListener: {
-      commandFn: actions.attachProtocolViewportDataListener,
+    setToolbarToggled: {
+      commandFn: actions.setToolbarToggled,
    },
-    setViewportPreset: {
-      commandFn: actions.setViewportPreset,
-    },
-    setVolumeRenderingQulaity: {
-      commandFn: actions.setVolumeRenderingQulaity,
-    },
-    shiftVolumeOpacityPoints: {
-      commandFn: actions.shiftVolumeOpacityPoints,
-    },
-    setVolumeLighting: {
-      commandFn: actions.setVolumeLighting,
-    },
-    resetCrosshairs: {
-      commandFn: actions.resetCrosshairs,
-    },
-    toggleSynchronizer: {
-      commandFn: actions.toggleSynchronizer,
-    },
-    updateVolumeData: {
-      commandFn: actions.updateVolumeData,
-    },
-    toggleEnabledDisabledToolbar: {
-      commandFn: actions.toggleEnabledDisabledToolbar,
-    },
-    toggleActiveDisabledToolbar: {
-      commandFn: actions.toggleActiveDisabledToolbar,
+    cleanUpCrosshairs: {
+      commandFn: actions.cleanUpCrosshairs,
    },
  };

@@ -1,26 +0,0 @@
-import React, { ReactElement } from 'react';
-import PropTypes from 'prop-types';
-import { useViewportGrid } from '@ohif/ui';
-import ViewportWindowLevel from '../ViewportWindowLevel/ViewportWindowLevel';
-
-const ActiveViewportWindowLevel = ({ servicesManager }: withAppTypes): ReactElement => {
-  const [viewportGrid] = useViewportGrid();
-  const { activeViewportId } = viewportGrid;
-
-  return (
-    <>
-      {activeViewportId && (
-        <ViewportWindowLevel
-          servicesManager={servicesManager}
-          viewportId={activeViewportId}
-        />
-      )}
-    </>
-  );
-};
-
-ActiveViewportWindowLevel.propTypes = {
-  servicesManager: PropTypes.object.isRequired,
-};
-
-export default ActiveViewportWindowLevel;
@@ -1 +0,0 @@
-export { default } from './ActiveViewportWindowLevel';
@@ -1,244 +1,96 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { CinePlayer, useCine } from '@ohif/ui';
-import { Enums, eventTarget, cache } from '@cornerstonejs/core';
-import { Enums as StreamingEnums } from '@cornerstonejs/streaming-image-volume-loader';
-import { useAppConfig } from '@state';
+import React, { useEffect } from 'react';
+import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
+import { Enums, eventTarget } from '@cornerstonejs/core';

-function WrappedCinePlayer({
-  enabledVPElement,
-  viewportId,
-  servicesManager,
-}: withAppTypes<{
-  enabledVPElement: HTMLElement;
-  viewportId: string;
-}>) {
-  const { customizationService, displaySetService, viewportGridService } = servicesManager.services;
+function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
+  const { toolbarService, customizationService } = servicesManager.services;
  const [{ isCineEnabled, cines }, cineService] = useCine();
-  const [newStackFrameRate, setNewStackFrameRate] = useState(24);
-  const [dynamicInfo, setDynamicInfo] = useState(null);
-  const [appConfig] = useAppConfig();
-  const isMountedRef = useRef(null);
+  const [{ activeViewportId }] = useViewportGrid();

-  const cineHandler = () => {
-    if (!cines?.[viewportId] || !enabledVPElement) {
-      return;
-    }
-
-    const { isPlaying = false, frameRate = 24 } = cines[viewportId];
-    const validFrameRate = Math.max(frameRate, 1);
-
-    return isPlaying
-      ? cineService.playClip(enabledVPElement, { framesPerSecond: validFrameRate, viewportId })
-      : cineService.stopClip(enabledVPElement);
-  };
-
-  const newDisplaySetHandler = useCallback(() => {
-    if (!enabledVPElement || !isCineEnabled) {
-      return;
-    }
-
-    const { viewports } = viewportGridService.getState();
-    const { displaySetInstanceUIDs } = viewports.get(viewportId);
-    let frameRate = 24;
-    let isPlaying = cines[viewportId]?.isPlaying || false;
-    displaySetInstanceUIDs.forEach(displaySetInstanceUID => {
-      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-
-      if (displaySet.FrameRate) {
-        // displaySet.FrameRate corresponds to DICOM tag (0018,1063) which is defined as the the frame time in milliseconds
-        // So a bit of math to get the actual frame rate.
-        frameRate = Math.round(1000 / displaySet.FrameRate);
-        isPlaying ||= !!appConfig.autoPlayCine;
-      }
-
-      // check if the displaySet is dynamic and set the dynamic info
-      if (displaySet.isDynamicVolume) {
-        const { dynamicVolumeInfo } = displaySet;
-        const numTimePoints = dynamicVolumeInfo.timePoints.length;
-        const label = dynamicVolumeInfo.splittingTag;
-        const timePointIndex = dynamicVolumeInfo.timePointIndex || 0;
-        setDynamicInfo({
-          volumeId: displaySet.displaySetInstanceUID,
-          timePointIndex,
-          numTimePoints,
-          label,
-        });
-      } else {
-        setDynamicInfo(null);
-      }
-    });
-
-    if (isPlaying) {
-      cineService.setIsCineEnabled(isPlaying);
-    }
-    cineService.setCine({ id: viewportId, isPlaying, frameRate });
-    setNewStackFrameRate(frameRate);
-  }, [displaySetService, viewportId, viewportGridService, cines, isCineEnabled, enabledVPElement]);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-
-    newDisplaySetHandler();
-
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, [isCineEnabled, newDisplaySetHandler]);
-
-  useEffect(() => {
-    if (!isCineEnabled) {
-      return;
-    }
-
-    cineHandler();
-  }, [isCineEnabled, cineHandler, enabledVPElement]);
-
-  /**
-   * Use effect for handling new display set
-   */
-  useEffect(() => {
-    if (!enabledVPElement) {
-      return;
-    }
-
-    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
-    // this doesn't makes sense that we are listening to this event on viewport element
-    enabledVPElement.addEventListener(
-      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
-      newDisplaySetHandler
-    );
-
-    return () => {
-      cineService.setCine({ id: viewportId, isPlaying: false });
-
-      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
-      enabledVPElement.removeEventListener(
-        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
-        newDisplaySetHandler
-      );
-    };
-  }, [enabledVPElement, newDisplaySetHandler, viewportId]);
-
-  useEffect(() => {
-    if (!cines || !cines[viewportId] || !enabledVPElement || !isMountedRef.current) {
-      return;
-    }
-
-    cineHandler();
-
-    return () => {
-      cineService.stopClip(enabledVPElement, { viewportId });
-    };
-  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
-
-  if (!isCineEnabled) {
-    return null;
-  }
-
-  const cine = cines[viewportId];
-  const isPlaying = cine?.isPlaying || false;
-
-  return (
-    <RenderCinePlayer
-      viewportId={viewportId}
-      cineService={cineService}
-      newStackFrameRate={newStackFrameRate}
-      isPlaying={isPlaying}
-      dynamicInfo={dynamicInfo}
-      customizationService={customizationService}
-    />
-  );
-}
-
-function RenderCinePlayer({
-  viewportId,
-  cineService,
-  newStackFrameRate,
-  isPlaying,
-  dynamicInfo: dynamicInfoProp,
-  customizationService,
-}) {
  const { component: CinePlayerComponent = CinePlayer } =
    customizationService.get('cinePlayer') ?? {};

-  const [dynamicInfo, setDynamicInfo] = useState(dynamicInfoProp);
+  const handleCineClose = () => {
+    toolbarService.recordInteraction({
+      groupId: 'MoreTools',
+      interactionType: 'toggle',
+      commands: [
+        {
+          commandName: 'toggleCine',
+          commandOptions: {},
+          toolName: 'cine',
+          context: 'CORNERSTONE',
+        },
+      ],
+    });
+  };

-  useEffect(() => {
-    setDynamicInfo(dynamicInfoProp);
-  }, [dynamicInfoProp]);
-
-  /**
-   * Use effect for handling 4D time index changed
-   */
-  useEffect(() => {
-    if (!dynamicInfo) {
+  const cineHandler = () => {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
      return;
    }

-    const handleTimePointIndexChange = evt => {
-      const { volumeId, timePointIndex, numTimePoints, splittingTag } = evt.detail;
-      setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
-    };
+    const cine = cines[viewportId];
+    const isPlaying = cine.isPlaying || false;
+    const frameRate = cine.frameRate || 24;

-    eventTarget.addEventListener(
-      StreamingEnums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
-      handleTimePointIndexChange
-    );
+    const validFrameRate = Math.max(frameRate, 1);
+
+    if (isPlaying) {
+      cineService.playClip(enabledVPElement, {
+        framesPerSecond: validFrameRate,
+      });
+    } else {
+      cineService.stopClip(enabledVPElement);
+    }
+  };
+
+  useEffect(() => {
+    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);

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

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

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

-    setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
-  }, []);
+    return () => {
+      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
+        cineService.stopClip(enabledVPElement);
+      }
+    };
+  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);

-  const updateDynamicInfo = useCallback(props => {
-    const { volumeId, timePointIndex } = props;
-    const volume = cache.getVolume(volumeId);
-    volume.timePointIndex = timePointIndex;
-  }, []);
+  const cine = cines[viewportId];
+  const isPlaying = (cine && cine.isPlaying) || false;

  return (
-    <CinePlayerComponent
-      className="absolute left-1/2 bottom-3 -translate-x-1/2"
-      frameRate={newStackFrameRate}
-      isPlaying={isPlaying}
-      onClose={() => {
-        // also stop the clip
-        cineService.setCine({
-          id: viewportId,
-          isPlaying: false,
-        });
-        cineService.setIsCineEnabled(false);
-      }}
-      onPlayPauseChange={isPlaying => {
-        cineService.setCine({
-          id: viewportId,
-          isPlaying,
-        });
-      }}
-      onFrameRateChange={frameRate =>
-        cineService.setCine({
-          id: viewportId,
-          frameRate,
-        })
-      }
-      dynamicInfo={dynamicInfo}
-      updateDynamicInfo={updateDynamicInfo}
-    />
+    isCineEnabled && (
+      <CinePlayerComponent
+        className="absolute left-1/2 bottom-3 -translate-x-1/2"
+        isPlaying={isPlaying}
+        onClose={handleCineClose}
+        onPlayPauseChange={isPlaying =>
+          cineService.setCine({
+            id: activeViewportId,
+            isPlaying,
+          })
+        }
+        onFrameRateChange={frameRate =>
+          cineService.setCine({
+            id: activeViewportId,
+            frameRate,
+          })
+        }
+      />
+    )
  );
 }

@@ -1,23 +0,0 @@
-import React from 'react';
-import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { ViewportActionCorners } from '@ohif/ui';
-
-export type OHIFViewportActionCornersProps = {
-  viewportId: string;
-};
-
-function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
-  const [viewportActionCornersState] = useViewportActionCornersContext();
-
-  if (!viewportActionCornersState[viewportId]) {
-    return null;
-  }
-
-  return (
-    <ViewportActionCorners
-      cornerComponents={viewportActionCornersState[viewportId]}
-    ></ViewportActionCorners>
-  );
-}
-
-export default OHIFViewportActionCorners;
@@ -1,385 +0,0 @@
-import React, { useEffect, useCallback, useState, ReactElement } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import { PanelSection, WindowLevel } from '@ohif/ui';
-import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
-import { Enums, eventTarget, cache as cs3DCache, utilities as csUtils } from '@cornerstonejs/core';
-import { getViewportVolumeHistogram } from './getViewportVolumeHistogram';
-
-const { Events } = Enums;
-
-const ViewportWindowLevel = ({
-  servicesManager,
-  viewportId,
-}: withAppTypes<{
-  viewportId: string;
-}>): ReactElement => {
-  const { cornerstoneViewportService } = servicesManager.services;
-  const [windowLevels, setWindowLevels] = useState([]);
-  const [cachedHistograms, setCachedHistograms] = useState({});
-
-  /**
-   * Looks for all viewports that has exactly all volumeIds passed as parameter.
-   */
-  const getViewportsWithVolumeIds = useCallback(
-    (volumeIds: string[]) => {
-      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
-      const viewports = renderingEngine.getVolumeViewports();
-
-      return viewports.filter(vp => {
-        const viewportVolumeIds = vp.getActors().map(actor => actor.uid);
-
-        return (
-          volumeIds.length === viewportVolumeIds.length &&
-          volumeIds.every(volumeId => viewportVolumeIds.includes(volumeId))
-        );
-      });
-    },
-    [cornerstoneViewportService]
-  );
-
-  const getNodeOpacity = (volumeActor, nodeIndex) => {
-    const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
-    const nodeValue = [];
-
-    volumeOpacity.getNodeValue(nodeIndex, nodeValue);
-
-    return nodeValue[1];
-  };
-
-  /**
-   * Checks if the opacity applied to the PET volume is something like
-   * [{x: 0, y: 0}, {x: 0.1, y: [C]}, {x: [ANY], y: [C]}] where C is a
-   * constant opacity value for all x's greater than 0.1
-   */
-  const isPetVolumeWithDefaultOpacity = (volumeId, volumeActor) => {
-    const volume = cs3DCache.getVolume(volumeId);
-
-    if (!volume) {
-      return false;
-    }
-
-    const modality = volume.metadata.Modality;
-
-    if (modality !== 'PT') {
-      return false;
-    }
-
-    const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
-
-    // It must have at least two points (0 and 0.1)
-    if (volumeOpacity.getSize() < 2) {
-      return false;
-    }
-
-    const node1Value = [];
-    const node2Value = [];
-
-    volumeOpacity.getNodeValue(0, node1Value);
-    volumeOpacity.getNodeValue(1, node2Value);
-
-    // First node must be (x:0, y:0} and the second one {x:0.1, y:any}
-    if (node1Value[0] !== 0 || node1Value[1] !== 0 || node2Value[0] !== 0.1) {
-      return false;
-    }
-
-    const expectedOpacity = node2Value[1];
-    const opacitySize = volumeOpacity.getSize();
-    const currentNodeValue = [];
-
-    // Any point after 0.1 must have the same opacity
-    for (let i = 2; i < opacitySize; i++) {
-      volumeOpacity.getNodeValue(i, currentNodeValue);
-
-      if (currentNodeValue[1] !== expectedOpacity) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  /**
-   * Checks if the opacity function has a constance opacity value for all x's
-   */
-  const isVolumeWithConstantOpacity = volumeActor => {
-    const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
-    const opacitySize = volumeOpacity.getSize();
-    const firstNodeValue = [];
-
-    volumeOpacity.getNodeValue(0, firstNodeValue);
-
-    const firstNodeOpacity = firstNodeValue[1];
-
-    for (let i = 0; i < opacitySize; i++) {
-      const currentNodeValue = [];
-
-      volumeOpacity.getNodeValue(0, currentNodeValue);
-
-      if (currentNodeValue[1] !== firstNodeOpacity) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  const getVolumeOpacity = useCallback((viewport, volumeId) => {
-    const volumeActor = viewport.getActor(volumeId).actor;
-
-    if (isPetVolumeWithDefaultOpacity(volumeId, volumeActor)) {
-      // Get the opacity from the second node at 0.1
-      return getNodeOpacity(volumeActor, 1);
-    } else if (isVolumeWithConstantOpacity(volumeActor)) {
-      return getNodeOpacity(volumeActor, 0);
-    }
-
-    return undefined;
-  }, []);
-
-  const getWindowLevelsData = useCallback(
-    async (viewportId: number) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-      if (!viewport) {
-        return [];
-      }
-
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-
-      const volumeIds = viewport.getActors().map(actor => actor.uid);
-      const viewportProperties = viewport.getProperties();
-      const { voiRange } = viewportProperties;
-      const viewportVoi = voiRange
-        ? {
-            windowWidth: voiRange.upper - voiRange.lower,
-            windowCenter: voiRange.lower + (voiRange.upper - voiRange.lower) / 2,
-          }
-        : undefined;
-
-      const windowLevels = await Promise.all(
-        volumeIds.map(async (volumeId, volumeIndex) => {
-          const volume = cs3DCache.getVolume(volumeId);
-
-          if (!volume) {
-            return null;
-          }
-
-          const opacity = getVolumeOpacity(viewport, volumeId);
-          const { metadata, scaling } = volume;
-          const modality = metadata.Modality;
-
-          // TODO: find a proper way to fix the histogram
-          const options = {
-            min: modality === 'PT' ? 0.1 : -999,
-            max: modality === 'PT' ? 5 : 10000,
-          };
-
-          const histogram =
-            cachedHistograms[volumeId] ??
-            (await getViewportVolumeHistogram(viewport, volume, options));
-          const { voi: displaySetVOI, colormap: displaySetColormap } =
-            viewportInfo.displaySetOptions[volumeIndex];
-          let colormap;
-          if (displaySetColormap) {
-            colormap =
-              csUtils.colormap.getColormap(displaySetColormap.name) ??
-              vtkColorMaps.getPresetByName(displaySetColormap.name);
-          }
-
-          const voi = !volumeIndex ? viewportVoi ?? displaySetVOI : displaySetVOI;
-
-          return {
-            viewportId,
-            modality,
-            volumeId,
-            volumeIndex,
-            voi,
-            histogram,
-            colormap,
-            step: scaling?.PT ? 0.05 : 1,
-            opacity,
-            showOpacitySlider: volumeIndex === 1 && opacity !== undefined,
-          };
-        })
-      );
-
-      const data = windowLevels.filter(Boolean);
-      return data;
-    },
-
-    [cachedHistograms, cornerstoneViewportService, getVolumeOpacity]
-  );
-
-  const updateViewportHistograms = useCallback(() => {
-    getWindowLevelsData(viewportId).then(windowLevels => {
-      setWindowLevels(windowLevels);
-    });
-  }, [viewportId, getWindowLevelsData]);
-
-  const handleCornerstoneVOIModified = useCallback(
-    e => {
-      const { detail } = e;
-      const { volumeId, range } = detail;
-      const oldWindowLevel = windowLevels.find(wl => wl.volumeId === volumeId);
-
-      if (!oldWindowLevel) {
-        return;
-      }
-
-      const oldVOI = oldWindowLevel.voi;
-      const windowWidth = range.upper - range.lower;
-      const windowCenter = range.lower + windowWidth / 2;
-
-      if (windowWidth === oldVOI.windowWidth && windowCenter === oldVOI.windowCenter) {
-        return;
-      }
-
-      const newWindowLevel = {
-        ...oldWindowLevel,
-        voi: {
-          windowWidth,
-          windowCenter,
-        },
-      };
-
-      setWindowLevels(
-        windowLevels.map(windowLevel =>
-          windowLevel === oldWindowLevel ? newWindowLevel : windowLevel
-        )
-      );
-    },
-    [windowLevels]
-  );
-
-  const debouncedHandleCornerstoneVOIModified = useCallback(
-    debounce(handleCornerstoneVOIModified, 100),
-    [handleCornerstoneVOIModified]
-  );
-
-  const handleVOIChange = useCallback(
-    (volumeId, voi) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-      const newRange = {
-        lower: voi.windowCenter - voi.windowWidth / 2,
-        upper: voi.windowCenter + voi.windowWidth / 2,
-      };
-
-      viewport.setProperties({ voiRange: newRange }, volumeId);
-      viewport.render();
-    },
-    [cornerstoneViewportService, viewportId]
-  );
-
-  const handleOpacityChange = useCallback(
-    (viewportId, _volumeIndex, volumeId, opacity) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-      if (!viewport) {
-        return;
-      }
-
-      const viewportVolumeIds = viewport.getActors().map(actor => actor.uid);
-      const viewports = getViewportsWithVolumeIds(viewportVolumeIds);
-
-      viewports.forEach(vp => {
-        vp.setProperties({ colormap: { opacity } }, volumeId);
-        vp.render();
-      });
-    },
-    [getViewportsWithVolumeIds, cornerstoneViewportService]
-  );
-
-  // Listen to windowLevels changes and caches all the new ones
-  useEffect(() => {
-    const newVolumeHistograms = windowLevels
-      .filter(windowLevel => !cachedHistograms[windowLevel.volumeId] && windowLevel.histogram)
-      .reduce((volumeHistograms, windowLevel) => {
-        // If the histogram exists, add it to the volumeHistograms object
-        if (windowLevel?.histogram) {
-          volumeHistograms[windowLevel.volumeId] = windowLevel.histogram;
-        }
-        return volumeHistograms;
-      }, {});
-
-    if (Object.keys(newVolumeHistograms).length) {
-      setCachedHistograms(prev => ({ ...prev, ...newVolumeHistograms }));
-    }
-  }, [windowLevels, cachedHistograms]);
-
-  // Updates the histogram when the viewport index prop has changed
-  useEffect(() => updateViewportHistograms(), [viewportId, updateViewportHistograms]);
-
-  // Listen to cornerstone events on "eventTarget" and at the document level
-  useEffect(() => {
-    eventTarget.addEventListener(Events.IMAGE_VOLUME_LOADING_COMPLETED, updateViewportHistograms);
-
-    document.addEventListener(Events.VOI_MODIFIED, debouncedHandleCornerstoneVOIModified, true);
-
-    return () => {
-      eventTarget.removeEventListener(
-        Events.IMAGE_VOLUME_LOADING_COMPLETED,
-        updateViewportHistograms
-      );
-
-      document.removeEventListener(
-        Events.VOI_MODIFIED,
-        debouncedHandleCornerstoneVOIModified,
-        true
-      );
-    };
-  }, [updateViewportHistograms, debouncedHandleCornerstoneVOIModified]);
-
-  // Updates the viewport when the context of the viewport has changed. This is
-  // necessary when moving across different stages because the viewport index
-  // may not change but the volumes loaded on it may change.
-  useEffect(() => {
-    const { unsubscribe } = cornerstoneViewportService.subscribe(
-      cornerstoneViewportService.EVENTS.VIEWPORT_VOLUMES_CHANGED,
-      ({ viewportInfo }) => {
-        if (viewportInfo.viewportId === viewportId) {
-          updateViewportHistograms();
-        }
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportId, cornerstoneViewportService, updateViewportHistograms]);
-
-  return (
-    <PanelSection title="Window Level">
-      {windowLevels.map((windowLevel, i) => {
-        if (!windowLevel.histogram) {
-          return null;
-        }
-
-        return (
-          <WindowLevel
-            key={windowLevel.volumeId}
-            title={`${windowLevel.modality}`}
-            histogram={windowLevel.histogram}
-            voi={windowLevel.voi}
-            step={windowLevel.step}
-            showOpacitySlider={windowLevel.showOpacitySlider}
-            colormap={windowLevel.colormap}
-            onVOIChange={voi => handleVOIChange(windowLevel.volumeId, voi)}
-            opacity={windowLevel.opacity}
-            onOpacityChange={opacity =>
-              handleOpacityChange(windowLevel.viewportId, i, windowLevel.volumeId, opacity)
-            }
-          />
-        );
-      })}
-    </PanelSection>
-  );
-};
-
-ViewportWindowLevel.propTypes = {
-  servicesManager: PropTypes.object.isRequired,
-  viewportId: PropTypes.string.isRequired,
-};
-
-export default ViewportWindowLevel;
@@ -1,72 +0,0 @@
-import { getWebWorkerManager } from '@cornerstonejs/core';
-
-const workerManager = getWebWorkerManager();
-
-const WorkerOptions = {
-  maxWorkerInstances: 1,
-  autoTerminateOnIdle: {
-    enabled: true,
-    idleTimeThreshold: 1000,
-  },
-};
-
-// Register the task
-const workerFn = () => {
-  return new Worker(new URL('./histogramWorker.js', import.meta.url), {
-    name: 'histogram-worker', // name used by the browser to name the worker
-  });
-};
-
-const getViewportVolumeHistogram = async (viewport, volume, options?) => {
-  workerManager.registerWorker('histogram-worker', workerFn, WorkerOptions);
-
-  if (!volume?.loadStatus.loaded) {
-    return undefined;
-  }
-
-  const volumeImageData = viewport.getImageData(volume.volumeId);
-
-  if (!volumeImageData) {
-    return undefined;
-  }
-
-  let scalarData = volume.scalarData;
-
-  let prevTimePoint;
-  if (volume.numTimePoints > 1) {
-    prevTimePoint = volume.timePointIndex;
-    const middleTimePoint = Math.round(volume.numTimePoints / 2);
-    volume.timePointIndex = middleTimePoint;
-    scalarData = volume.getScalarData(middleTimePoint);
-  }
-
-  const { dimensions, origin, direction, spacing } = volume;
-
-  const range = await workerManager.executeTask('histogram-worker', 'getRange', {
-    dimensions,
-    origin,
-    direction,
-    spacing,
-    scalarData,
-  });
-
-  // after we calculate the range let's reset the timePointIndex
-  if (volume.numTimePoints > 1) {
-    volume.timePointIndex = prevTimePoint;
-  }
-  const { minimum: min, maximum: max } = range;
-  const calcHistOptions = {
-    numBins: 256,
-    min: Math.max(min, options?.min ?? min),
-    max: Math.min(max, options?.max ?? max),
-  };
-
-  const histogram = await workerManager.executeTask('histogram-worker', 'calcHistogram', {
-    data: scalarData,
-    options: calcHistOptions,
-  });
-
-  return histogram;
-};
-
-export { getViewportVolumeHistogram };
@@ -1,97 +0,0 @@
-import { expose } from 'comlink';
-import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
-
-/**
- * This object simulates a heavy task by implementing a sleep function and a recursive Fibonacci function.
- * It's used for testing or demonstrating purposes where a heavy or time-consuming task is needed.
- */
-const obj = {
-  getRange: ({ dimensions, origin, direction, spacing, scalarData }) => {
-    const imageData = vtkImageData.newInstance();
-    imageData.setDimensions(dimensions);
-    imageData.setOrigin(origin);
-    imageData.setDirection(direction);
-    imageData.setSpacing(spacing);
-
-    const scalarArray = vtkDataArray.newInstance({
-      name: 'Pixels',
-      numberOfComponents: 1,
-      values: scalarData,
-    });
-
-    imageData.getPointData().setScalars(scalarArray);
-
-    imageData.modified();
-
-    const range = imageData.computeHistogram(imageData.getBounds());
-
-    return range;
-  },
-  calcHistogram: ({ data, options }) => {
-    if (options === undefined) {
-      options = {};
-    }
-    const histogram = {
-      numBins: options.numBins || 256,
-      range: { min: 0, max: 0 },
-      bins: new Int32Array(1),
-      maxBin: 0,
-      maxBinValue: 0,
-    };
-
-    let minToUse = options.min;
-    let maxToUse = options.max;
-
-    if (minToUse === undefined || maxToUse === undefined) {
-      let min = Infinity;
-      let max = -Infinity;
-      let index = data.length;
-
-      while (index--) {
-        const value = data[index];
-        if (value < min) {
-          min = value;
-        }
-        if (value > max) {
-          max = value;
-        }
-      }
-
-      minToUse = min;
-      maxToUse = max;
-    }
-
-    histogram.range = { min: minToUse, max: maxToUse };
-
-    const bins = new Int32Array(histogram.numBins);
-    const binScale = histogram.numBins / (maxToUse - minToUse);
-
-    for (let index = 0; index < data.length; index++) {
-      const value = data[index];
-      if (value < minToUse) {
-        continue;
-      }
-      if (value > maxToUse) {
-        continue;
-      }
-      const bin = Math.floor((value - minToUse) * binScale);
-      bins[bin] += 1;
-    }
-
-    histogram.bins = bins;
-    histogram.maxBin = 0;
-    histogram.maxBinValue = 0;
-
-    for (let bin = 0; bin < histogram.numBins; bin++) {
-      if (histogram.bins[bin] > histogram.maxBinValue) {
-        histogram.maxBin = bin;
-        histogram.maxBinValue = histogram.bins[bin];
-      }
-    }
-
-    return histogram;
-  },
-};
-
-expose(obj);
@@ -1 +0,0 @@
-export { default } from './ViewportWindowLevel';
@@ -1,115 +0,0 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import { SwitchButton } from '@ohif/ui';
-import { StackViewport, VolumeViewport } from '@cornerstonejs/core';
-import { ColorbarProps } from '../../types/Colorbar';
-import { utilities } from '@cornerstonejs/core';
-
-export function setViewportColorbar(
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager: AppTypes.ServicesManager,
-  colorbarOptions
-) {
-  const { cornerstoneViewportService } = servicesManager.services;
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-  const backgroundColor = viewportInfo.getViewportOptions().background;
-  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
-
-  if (isLight) {
-    colorbarOptions.ticks = {
-      position: 'left',
-      style: {
-        font: '12px Arial',
-        color: '#000000',
-        maxNumTicks: 8,
-        tickSize: 5,
-        tickWidth: 1,
-        labelMargin: 3,
-      },
-    };
-  }
-
-  const displaySetInstanceUIDs = [];
-
-  if (viewport instanceof StackViewport) {
-    displaySetInstanceUIDs.push(viewportId);
-  }
-
-  if (viewport instanceof VolumeViewport) {
-    displaySets.forEach(ds => {
-      displaySetInstanceUIDs.push(ds.displaySetInstanceUID);
-    });
-  }
-
-  commandsManager.run({
-    commandName: 'toggleViewportColorbar',
-    commandOptions: {
-      viewportId,
-      options: colorbarOptions,
-      displaySetInstanceUIDs,
-    },
-    context: 'CORNERSTONE',
-  });
-}
-
-export function Colorbar({
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
-  colorbarProperties,
-}: withAppTypes<ColorbarProps>): ReactElement {
-  const { colorbarService } = servicesManager.services;
-  const {
-    width: colorbarWidth,
-    colorbarTickPosition,
-    colorbarContainerPosition,
-    colormaps,
-    colorbarInitialColormap,
-  } = colorbarProperties;
-  const [showColorbar, setShowColorbar] = useState(colorbarService.hasColorbar(viewportId));
-
-  const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
-      viewportId,
-      colormaps,
-      ticks: {
-        position: colorbarTickPosition,
-      },
-      width: colorbarWidth,
-      position: colorbarContainerPosition,
-      activeColormapName: colorbarInitialColormap,
-    });
-  }, [commandsManager]);
-
-  useEffect(() => {
-    const updateColorbarState = () => {
-      setShowColorbar(colorbarService.hasColorbar(viewportId));
-    };
-
-    const { unsubscribe } = colorbarService.subscribe(
-      colorbarService.EVENTS.STATE_CHANGED,
-      updateColorbarState
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportId]);
-
-  return (
-    <div className="all-in-one-menu-item flex w-full justify-center">
-      <div className="mr-2 w-[28px]"></div>
-      <SwitchButton
-        label="Display Color bar"
-        checked={showColorbar}
-        onChange={() => {
-          onSetColorbar();
-        }}
-      />
-    </div>
-  );
-}
@@ -1,158 +0,0 @@
-import React, { ReactElement, useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { AllInOneMenu, ButtonGroup, SwitchButton } from '@ohif/ui';
-import { StackViewport } from '@cornerstonejs/core';
-import { ColormapProps } from '../../types/Colormap';
-
-export function Colormap({
-  colormaps,
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
-}: ColormapProps): ReactElement {
-  const { cornerstoneViewportService } = servicesManager.services;
-
-  const [activeDisplaySet, setActiveDisplaySet] = useState(displaySets[0]);
-
-  const [showPreview, setShowPreview] = useState(false);
-  const [prePreviewColormap, setPrePreviewColormap] = useState(null);
-
-  const showPreviewRef = useRef(showPreview);
-  showPreviewRef.current = showPreview;
-  const prePreviewColormapRef = useRef(prePreviewColormap);
-  prePreviewColormapRef.current = prePreviewColormap;
-  const activeDisplaySetRef = useRef(activeDisplaySet);
-  activeDisplaySetRef.current = activeDisplaySet;
-
-  const onSetColorLUT = useCallback(
-    props => {
-      // TODO: Better way to check if it's a fusion
-      const oneOpacityColormaps = ['Grayscale', 'X Ray'];
-      const opacity =
-        displaySets.length > 1 && !oneOpacityColormaps.includes(props.colormap.name) ? 0.5 : 1;
-      commandsManager.run({
-        commandName: 'setViewportColormap',
-        commandOptions: {
-          ...props,
-          opacity,
-          immediate: true,
-        },
-        context: 'CORNERSTONE',
-      });
-    },
-    [commandsManager]
-  );
-
-  const getViewportColormap = (viewportId, displaySet) => {
-    const { displaySetInstanceUID } = displaySet;
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof StackViewport) {
-      const { colormap } = viewport.getProperties();
-      if (!colormap) {
-        return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
-      }
-      return colormap;
-    }
-    const actorEntries = viewport.getActors();
-    const actorEntry = actorEntries.find(entry => entry.uid.includes(displaySetInstanceUID));
-    const { colormap } = viewport.getProperties(actorEntry.uid);
-    if (!colormap) {
-      return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
-    }
-    return colormap;
-  };
-
-  const buttons = useMemo(() => {
-    return displaySets.map((displaySet, index) => ({
-      children: displaySet.Modality,
-      key: index,
-      style: {
-        minWidth: `calc(100% / ${displaySets.length})`,
-        fontSize: '0.8rem',
-        textAlign: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-    }));
-  }, [displaySets]);
-
-  useEffect(() => {
-    setActiveDisplaySet(displaySets[displaySets.length - 1]);
-  }, [displaySets]);
-
-  return (
-    <>
-      {buttons.length > 1 && (
-        <div className="all-in-one-menu-item flex w-full justify-center">
-          <ButtonGroup
-            onActiveIndexChange={index => {
-              setActiveDisplaySet(displaySets[index]);
-              setPrePreviewColormap(null);
-            }}
-            activeIndex={
-              displaySets.findIndex(
-                ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID
-              ) || 1
-            }
-            className="w-[70%] text-[10px]"
-          >
-            {buttons.map(({ children, key, style }) => (
-              <div
-                key={key}
-                style={style}
-              >
-                {children}
-              </div>
-            ))}
-          </ButtonGroup>
-        </div>
-      )}
-      <div className="all-in-one-menu-item flex w-full justify-center">
-        <SwitchButton
-          label="Preview in viewport"
-          checked={showPreview}
-          onChange={checked => {
-            setShowPreview(checked);
-          }}
-        />
-      </div>
-      <AllInOneMenu.DividerItem />
-      <AllInOneMenu.ItemPanel>
-        {colormaps.map((colormap, index) => (
-          <AllInOneMenu.Item
-            key={index}
-            label={colormap.description}
-            onClick={() => {
-              onSetColorLUT({
-                viewportId,
-                colormap,
-                displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID,
-              });
-              setPrePreviewColormap(null);
-            }}
-            onMouseEnter={() => {
-              if (showPreviewRef.current) {
-                setPrePreviewColormap(getViewportColormap(viewportId, activeDisplaySetRef.current));
-                onSetColorLUT({
-                  viewportId,
-                  colormap,
-                  displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID,
-                });
-              }
-            }}
-            onMouseLeave={() => {
-              if (showPreviewRef.current && prePreviewColormapRef.current) {
-                onSetColorLUT({
-                  viewportId,
-                  colormap: prePreviewColormapRef.current,
-                  displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID,
-                });
-              }
-            }}
-          ></AllInOneMenu.Item>
-        ))}
-      </AllInOneMenu.ItemPanel>
-    </>
-  );
-}
@@ -1,130 +0,0 @@
-import React, { ReactElement, useState, useEffect, useCallback } from 'react';
-import { VolumeLightingProps } from '../../types/ViewportPresets';
-
-export function VolumeLighting({
-  servicesManager,
-  commandsManager,
-  viewportId,
-}: VolumeLightingProps): ReactElement {
-  const { cornerstoneViewportService } = servicesManager.services;
-  const [ambient, setAmbient] = useState(null);
-  const [diffuse, setDiffuse] = useState(null);
-  const [specular, setSpecular] = useState(null);
-
-  const onAmbientChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { ambient } });
-  }, [ambient, commandsManager, viewportId]);
-
-  const onDiffuseChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { diffuse } });
-  }, [diffuse, commandsManager, viewportId]);
-
-  const onSpecularChange = useCallback(() => {
-    commandsManager.runCommand('setVolumeLighting', { viewportId, options: { specular } });
-  }, [specular, commandsManager, viewportId]);
-
-  const calculateBackground = value => {
-    const percentage = ((value - 0) / (1 - 0)) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-
-  useEffect(() => {
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    const { actor } = viewport.getActors()[0];
-    const ambient = actor.getProperty().getAmbient();
-    const diffuse = actor.getProperty().getDiffuse();
-    const specular = actor.getProperty().getSpecular();
-    setAmbient(ambient);
-    setDiffuse(diffuse);
-    setSpecular(specular);
-  }, [viewportId, cornerstoneViewportService]);
-  return (
-    <>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="ambient"
-        >
-          Ambient
-        </label>
-        {ambient !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={ambient}
-            onChange={e => {
-              setAmbient(e.target.value);
-              onAmbientChange();
-            }}
-            id="ambient"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(ambient),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="diffuse"
-        >
-          Diffuse
-        </label>
-        {diffuse !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={diffuse}
-            onChange={e => {
-              setDiffuse(e.target.value);
-              onDiffuseChange();
-            }}
-            id="diffuse"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(diffuse),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block  text-white"
-          htmlFor="specular"
-        >
-          Specular
-        </label>
-        {specular !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={specular}
-            onChange={e => {
-              setSpecular(e.target.value);
-              onSpecularChange();
-            }}
-            id="specular"
-            max={1}
-            min={0}
-            type="range"
-            step={0.1}
-            style={{
-              background: calculateBackground(specular),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-    </>
-  );
-}
@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-import { AllInOneMenu } from '@ohif/ui';
-import { VolumeRenderingOptionsProps } from '../../types/ViewportPresets';
-import { VolumeRenderingQuality } from './VolumeRenderingQuality';
-import { VolumeShift } from './VolumeShift';
-import { VolumeLighting } from './VolumeLighting';
-import { VolumeShade } from './VolumeShade';
-export function VolumeRenderingOptions({
-  viewportId,
-  commandsManager,
-  volumeRenderingQualityRange,
-  servicesManager,
-}: VolumeRenderingOptionsProps): ReactElement {
-  return (
-    <AllInOneMenu.ItemPanel>
-      <VolumeRenderingQuality
-        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-        volumeRenderingQualityRange={volumeRenderingQualityRange}
-      />
-
-      <VolumeShift
-        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      />
-      <div className="all-in-one-menu-item mt-2 flex !h-[20px] w-full justify-start">
-        <div className="text-aqua-pale text-[13px]">LIGHTING</div>
-      </div>
-      <div className="bg-primary-dark mt-1 mb-1 h-[2px] w-full"></div>
-      <div className="all-in-one-menu-item flex w-full justify-center">
-        <VolumeShade
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          viewportId={viewportId}
-        />
-      </div>
-      <VolumeLighting
-        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      />
-    </AllInOneMenu.ItemPanel>
-  );
-}
@@ -1,38 +0,0 @@
-import { AllInOneMenu, Icon } from '@ohif/ui';
-import React, { ReactElement } from 'react';
-import { VolumeRenderingPresetsProps } from '../../types/ViewportPresets';
-import { VolumeRenderingPresetsContent } from './VolumeRenderingPresetsContent';
-
-export function VolumeRenderingPresets({
-  viewportId,
-  servicesManager,
-  commandsManager,
-  volumeRenderingPresets,
-}: VolumeRenderingPresetsProps): ReactElement {
-  const { uiModalService } = servicesManager.services;
-
-  const onClickPresets = () => {
-    uiModalService.show({
-      content: VolumeRenderingPresetsContent,
-      title: 'Rendering Presets',
-      movable: true,
-      contentProps: {
-        onClose: uiModalService.hide,
-        presets: volumeRenderingPresets,
-        viewportId,
-        commandsManager,
-      },
-      containerDimensions: 'h-[543px] w-[460px]',
-      contentDimensions: 'h-[493px] w-[460px]  pl-[12px] pr-[12px]',
-    });
-  };
-
-  return (
-    <AllInOneMenu.Item
-      label="Rendering Presets"
-      icon={<Icon name="VolumeRendering" />}
-      rightIcon={<Icon name="action-new-dialog" />}
-      onClick={onClickPresets}
-    />
-  );
-}
@@ -1,95 +0,0 @@
-import { Icon } from '@ohif/ui';
-import { ButtonEnums } from '@ohif/ui';
-import React, { ReactElement, useState, useCallback } from 'react';
-import { Button, InputFilterText } from '@ohif/ui';
-import { ViewportPreset, VolumeRenderingPresetsContentProps } from '../../types/ViewportPresets';
-
-export function VolumeRenderingPresetsContent({
-  presets,
-  viewportId,
-  commandsManager,
-  onClose,
-}: VolumeRenderingPresetsContentProps): ReactElement {
-  const [filteredPresets, setFilteredPresets] = useState(presets);
-  const [searchValue, setSearchValue] = useState('');
-  const [selectedPreset, setSelectedPreset] = useState<ViewportPreset | null>(null);
-
-  const handleSearchChange = useCallback(
-    (value: string) => {
-      setSearchValue(value);
-      const filtered = value
-        ? presets.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase()))
-        : presets;
-      setFilteredPresets(filtered);
-    },
-    [presets]
-  );
-
-  const handleApply = useCallback(
-    props => {
-      commandsManager.runCommand('setViewportPreset', {
-        ...props,
-      });
-    },
-    [commandsManager]
-  );
-
-  const formatLabel = (label: string, maxChars: number) => {
-    return label.length > maxChars ? `${label.slice(0, maxChars)}...` : label;
-  };
-
-  return (
-    <div className="flex min-h-full w-full flex-col justify-between">
-      <div className="border-secondary-light h-[433px] w-full overflow-hidden rounded border bg-black px-2.5">
-        <div className="flex h-[46px] w-full items-center justify-start">
-          <div className="h-[26px] w-[200px]">
-            <InputFilterText
-              value={searchValue}
-              onDebounceChange={handleSearchChange}
-              placeholder={'Search all'}
-            />
-          </div>
-        </div>
-        <div className="ohif-scrollbar overflow h-[385px] w-full overflow-y-auto">
-          <div className="grid grid-cols-4 gap-3 pt-2 pr-3">
-            {filteredPresets.map((preset, index) => (
-              <div
-                key={index}
-                className="flex cursor-pointer flex-col items-start"
-                onClick={() => {
-                  setSelectedPreset(preset);
-                  handleApply({ preset: preset.name, viewportId });
-                }}
-              >
-                <Icon
-                  name={preset.name}
-                  className={
-                    selectedPreset?.name === preset.name
-                      ? 'border-primary-light h-[75px] w-[95px] max-w-none rounded border-2'
-                      : 'hover:border-primary-light h-[75px] w-[95px] max-w-none rounded border-2 border-black'
-                  }
-                />
-                <label className="text-aqua-pale mt-2 text-left text-xs">
-                  {formatLabel(preset.name, 11)}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      <footer className="flex h-[60px] w-full items-center justify-end">
-        <div className="flex">
-          <Button
-            name="Cancel"
-            size={ButtonEnums.size.medium}
-            type={ButtonEnums.type.secondary}
-            onClick={onClose}
-          >
-            {' '}
-            Cancel{' '}
-          </Button>
-        </div>
-      </footer>
-    </div>
-  );
-}
@@ -1,73 +0,0 @@
-import React, { ReactElement, useCallback, useState, useEffect } from 'react';
-import { VolumeRenderingQualityProps } from '../../types/ViewportPresets';
-
-export function VolumeRenderingQuality({
-  volumeRenderingQualityRange,
-  commandsManager,
-  servicesManager,
-  viewportId,
-}: VolumeRenderingQualityProps): ReactElement {
-  const { cornerstoneViewportService } = servicesManager.services;
-  const { min, max, step } = volumeRenderingQualityRange;
-  const [quality, setQuality] = useState(null);
-
-  const onChange = useCallback(
-    (value: number) => {
-      commandsManager.runCommand('setVolumeRenderingQulaity', {
-        viewportId,
-        volumeQuality: value,
-      });
-      setQuality(value);
-    },
-    [commandsManager, viewportId]
-  );
-
-  const calculateBackground = value => {
-    const percentage = ((value - 0) / (1 - 0)) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-
-  useEffect(() => {
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    const { actor } = viewport.getActors()[0];
-    const mapper = actor.getMapper();
-    const image = mapper.getInputData();
-    const spacing = image.getSpacing();
-    const sampleDistance = mapper.getSampleDistance();
-    const averageSpacing = spacing.reduce((a, b) => a + b) / 3.0;
-    if (sampleDistance === averageSpacing) {
-      setQuality(1);
-    } else {
-      setQuality(Math.sqrt(averageSpacing / (sampleDistance * 0.5)));
-    }
-  }, [cornerstoneViewportService, viewportId]);
-  return (
-    <>
-      <div className="all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]">
-        <label
-          className="block text-white"
-          htmlFor="volume"
-        >
-          Quality
-        </label>
-        {quality !== null && (
-          <input
-            className="bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg"
-            value={quality}
-            id="volume"
-            max={max}
-            min={min}
-            type="range"
-            step={step}
-            onChange={e => onChange(parseInt(e.target.value, 10))}
-            style={{
-              background: calculateBackground((quality - min) / (max - min)),
-              '--thumb-inner-color': '#5acce6',
-              '--thumb-outer-color': '#090c29',
-            }}
-          />
-        )}
-      </div>
-    </>
-  );
-}
Author	SHA1	Message	Date
ohif-bot	df32a05a4d	chore(version): Update package versions [skip ci]	2023-10-11 16:59:05 +00:00
ohif-bot	e205bf5c4e	chore(version): version.json [skip ci]	2023-10-11 16:58:56 +00:00
Alireza	5ddf8a1602	feat(v3p7): segmentation mode and cloud server configuration (#3720 )	2023-10-11 12:49:12 -04:00
Alireza	83fccad46b	Merge branch 'release' of github.com:OHIF/Viewers into candidate-3p7-rc-5	2023-10-11 12:18:10 -04:00
ohif-bot	72ec0bffb5	chore(version): Update package versions [skip ci]	2023-06-07 20:01:22 +00:00
ohif-bot	82c6c3c353	chore(version): version.json [skip ci]	2023-06-07 20:01:18 +00:00
Alireza	1d38fe30a4	feat(app): modal headers and fix storybook (#3460 )	2023-06-07 15:54:08 -04:00
Alireza	666964b6d7	Merge branch 'release' of github.com:OHIF/Viewers into release-fore-newsletter	2023-06-07 13:26:13 -04:00
ohif-bot	fa4ee5c559	chore(version): Update package versions [skip ci]	2023-06-07 00:14:02 +00:00
ohif-bot	cd58560e9c	chore(version): version.json [skip ci]	2023-06-07 00:13:59 +00:00
Alireza	16afa740b6	feat(app): change ohif viewer to ohif app (#3451 )	2023-06-06 20:06:31 -04:00
Alireza	6715ad9bd6	chore(build): try to build demo and docs	2023-06-01 08:13:36 -04:00
				`@@ -1 +0,0 @@`
				`module.exports = require('../../babel.config.js');`
				`@@ -1 +0,0 @@`
				`export { default } from './ActiveViewportWindowLevel';`
				`@@ -1 +0,0 @@`
				`export { default } from './ViewportWindowLevel';`