feat(RT): add dicom RT support via volume viewports (#3310)

* feat: initial RT support

* make the segmentation service work with representation data

* feat: make segmentation service work with representations

* fix rtss vis

* fix: rt hydration

* fix the rendering of rt names

* fix imports

* refactor: Modify status and click handling for hydration of RTStructures

Modify status and click handling for hydration of RTStructures by renaming `onPillClick` to `onStatusClick` in `OHIFCornerstoneRTViewport.tsx` and `_getStatusComponent.tsx` files. Also, update initial segmentation configurations in `PanelSegmentation.tsx` and simplify configuration changes and values for segmentation service in `SegmentationService.ts`. Finally, remove console debug in `CornerstoneViewportService.ts`.

* wip for highlighting contours

* refactor rt displayset code

* review code update

* update cornerstone dependencies

* refactor: Update license year, version number, and minor code cleanup

This commit updates the license year in several files, updates the version number in package.json, and contains minor code cleanup in two files.

* add bulkdataURI retrieve for RT

* fix package version

* apply review comments

* apply review comments

* apply review comments

* feat(panels): refactor and streamline segmentation configuration and inputs

Rewrote state hooks and streamlined the configuration input for `PanelSegmentation` to be more verbose and reusable. Included several new input types, including the `InputRange` component which now shows a fixed floating value based on the step provided. The `SegmentationConfig` component now works with dynamic values controlled by `initialConfig`. These changes should improve function usability and make the code more maintainable going forward.

* fix various bugs

* fix contour delete by upgrade cs3d version

* feat(viewport, inputNumber, segmentationConfig, orthanc): Implement minimum and maximum values for input number components, and useBulkDataURI for Orthanc configuration. Compare measurement view planes with absolute viewport view planes in Cornerstone viewport.

* update yarn lock

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

@@ -0,0 +1,207 @@
+import { utils } from '@ohif/core';
+
+import { SOPClassHandlerId } from './id';
+import loadRTStruct from './loadRTStruct';
+
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.481.3'];
+
+let loadPromises = {};
+
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager,
+  extensionManager
+) {
+  const instance = instances[0];
+
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID,
+    wadoRoot,
+    wadoUri,
+    wadoUriRoot,
+  } = instance;
+
+  const displaySet = {
+    Modality: 'RTSTRUCT',
+    loading: false,
+    isReconstructable: false, // by default for now since it is a volumetric SEG currently
+    displaySetInstanceUID: utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPInstanceUID,
+    SeriesInstanceUID,
+    StudyInstanceUID,
+    SOPClassHandlerId,
+    SOPClassUID,
+    referencedImages: null,
+    referencedSeriesInstanceUID: null,
+    referencedDisplaySetInstanceUID: null,
+    isDerivedDisplaySet: true,
+    isLoaded: false,
+    isHydrated: false,
+    structureSet: null,
+    sopClassUids,
+    instance,
+    wadoRoot,
+    wadoUriRoot,
+    wadoUri,
+    isOverlayDisplaySet: true,
+  };
+
+  let referencedSeriesSequence = instance.ReferencedSeriesSequence;
+  if (
+    instance.ReferencedFrameOfReferenceSequence &&
+    !instance.ReferencedSeriesSequence
+  ) {
+    instance.ReferencedSeriesSequence = _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
+      instance.ReferencedFrameOfReferenceSequence
+    );
+    referencedSeriesSequence = instance.ReferencedSeriesSequence;
+  }
+
+  if (!referencedSeriesSequence) {
+    throw new Error('ReferencedSeriesSequence is missing for the RTSTRUCT');
+  }
+
+  const referencedSeries = referencedSeriesSequence[0];
+
+  displaySet.referencedImages =
+    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
+
+  displaySet.getReferenceDisplaySet = () => {
+    const { DisplaySetService } = servicesManager.services;
+    const referencedDisplaySets = DisplaySetService.getDisplaySetsForSeries(
+      displaySet.referencedSeriesInstanceUID
+    );
+
+    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
+      throw new Error('Referenced DisplaySet is missing for the RT');
+    }
+
+    const referencedDisplaySet = referencedDisplaySets[0];
+
+    displaySet.referencedDisplaySetInstanceUID =
+      referencedDisplaySet.displaySetInstanceUID;
+
+    return referencedDisplaySet;
+  };
+
+  displaySet.load = ({ headers }) =>
+    _load(displaySet, servicesManager, extensionManager, headers);
+
+  return [displaySet];
+}
+
+function _load(rtDisplaySet, servicesManager, extensionManager, headers) {
+  const { SOPInstanceUID } = rtDisplaySet;
+  const { segmentationService } = servicesManager.services;
+  if (
+    (rtDisplaySet.loading || rtDisplaySet.isLoaded) &&
+    loadPromises[SOPInstanceUID] &&
+    _segmentationExistsInCache(rtDisplaySet, segmentationService)
+  ) {
+    return loadPromises[SOPInstanceUID];
+  }
+
+  rtDisplaySet.loading = true;
+
+  // We don't want to fire multiple loads, so we'll wait for the first to finish
+  // and also return the same promise to any other callers.
+  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
+    if (!rtDisplaySet.structureSet) {
+      const structureSet = await loadRTStruct(
+        extensionManager,
+        rtDisplaySet,
+        rtDisplaySet.getReferenceDisplaySet(),
+        headers
+      );
+
+      rtDisplaySet.structureSet = structureSet;
+    }
+
+    const suppressEvents = true;
+    segmentationService
+      .createSegmentationForRTDisplaySet(rtDisplaySet, null, suppressEvents)
+      .then(() => {
+        rtDisplaySet.loading = false;
+        resolve();
+      })
+      .catch(error => {
+        rtDisplaySet.loading = false;
+        reject(error);
+      });
+  });
+
+  return loadPromises[SOPInstanceUID];
+}
+
+function _deriveReferencedSeriesSequenceFromFrameOfReferenceSequence(
+  ReferencedFrameOfReferenceSequence
+) {
+  const ReferencedSeriesSequence = [];
+
+  ReferencedFrameOfReferenceSequence.forEach(referencedFrameOfReference => {
+    const { RTReferencedStudySequence } = referencedFrameOfReference;
+
+    RTReferencedStudySequence.forEach(rtReferencedStudy => {
+      const { RTReferencedSeriesSequence } = rtReferencedStudy;
+
+      RTReferencedSeriesSequence.forEach(rtReferencedSeries => {
+        const ReferencedInstanceSequence = [];
+        const { ContourImageSequence, SeriesInstanceUID } = rtReferencedSeries;
+
+        ContourImageSequence.forEach(contourImage => {
+          ReferencedInstanceSequence.push({
+            ReferencedSOPInstanceUID: contourImage.ReferencedSOPInstanceUID,
+            ReferencedSOPClassUID: contourImage.ReferencedSOPClassUID,
+          });
+        });
+
+        const referencedSeries = {
+          SeriesInstanceUID,
+          ReferencedInstanceSequence,
+        };
+
+        ReferencedSeriesSequence.push(referencedSeries);
+      });
+    });
+  });
+
+  return ReferencedSeriesSequence;
+}
+
+function _segmentationExistsInCache(rtDisplaySet, segmentationService) {
+  // Todo: fix this
+  return false;
+  // This should be abstracted with the CornerstoneCacheService
+  const rtContourId = rtDisplaySet.displaySetInstanceUID;
+  const contour = segmentationService.getContour(rtContourId);
+
+  return contour !== undefined;
+}
+
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+  return [
+    {
+      name: 'dicom-rt',
+      sopClassUids,
+      getDisplaySetsFromSeries: instances => {
+        return _getDisplaySetsFromSeries(
+          instances,
+          servicesManager,
+          extensionManager
+        );
+      },
+    },
+  ];
+}
+
+export default getSopClassHandlerModule;

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

@@ -0,0 +1,7 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+const SOPClassHandlerName = 'dicom-rt';
+const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
+
+export { id, SOPClassHandlerId, SOPClassHandlerName };

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

@@ -0,0 +1,61 @@
+import { id } from './id';
+import React from 'react';
+import { Types } from '@ohif/core';
+import getSopClassHandlerModule from './getSopClassHandlerModule';
+
+const Component = React.lazy(() => {
+  return import(
+    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport'
+  );
+});
+
+const OHIFCornerstoneRTViewport = props => {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
+
+/**
+ * You can remove any of the following modules if you don't need them.
+ */
+const extension: Types.Extensions.Extension = {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   * You ID can be anything you want, but it should be unique.
+   */
+  id,
+
+  /**
+   * PanelModule should provide a list of panels that will be available in OHIF
+   * for Modes to consume and render. Each panel is defined by a {name,
+   * iconName, iconLabel, label, component} object. Example of a panel module
+   * is the StudyBrowserPanel that is provided by the default extension in OHIF.
+   */
+  getViewportModule({
+    servicesManager,
+    extensionManager,
+  }: Types.Extensions.ExtensionParams) {
+    const ExtendedOHIFCornerstoneRTViewport = props => {
+      return (
+        <OHIFCornerstoneRTViewport
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          {...props}
+        />
+      );
+    };
+
+    return [{ name: 'dicom-rt', component: ExtendedOHIFCornerstoneRTViewport }];
+  },
+  /**
+   * SopClassHandlerModule should provide a list of sop class handlers that will be
+   * available in OHIF for Modes to consume and use to create displaySets from Series.
+   * Each sop class handler is defined by a { name, sopClassUids, getDisplaySetsFromSeries}.
+   * Examples include the default sop class handler provided by the default extension
+   */
+  getSopClassHandlerModule,
+};
+
+export default extension;

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

@@ -0,0 +1,318 @@
+import dcmjs from 'dcmjs';
+const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
+const dicomlab2RGB = dcmjs.data.Colors.dicomlab2RGB;
+
+async function checkAndLoadContourData(instance, datasource) {
+  if (!instance || !instance.ROIContourSequence) {
+    return Promise.reject('Invalid instance object or ROIContourSequence');
+  }
+
+  const promises = [];
+  let counter = 0;
+
+  for (const ROIContour of instance.ROIContourSequence) {
+    if (!ROIContour || !ROIContour.ContourSequence) {
+      return Promise.reject('Invalid ROIContour or ContourSequence');
+    }
+
+    for (const Contour of ROIContour.ContourSequence) {
+      if (!Contour || !Contour.ContourData) {
+        return Promise.reject('Invalid Contour or ContourData');
+      }
+
+      const contourData = Contour.ContourData;
+      counter++;
+      if (Array.isArray(contourData)) {
+        promises.push(Promise.resolve(contourData));
+      } else if (contourData && contourData.BulkDataURI) {
+        const bulkDataURI = contourData.BulkDataURI;
+
+        if (
+          !datasource ||
+          !datasource.retrieve ||
+          !datasource.retrieve.bulkDataURI
+        ) {
+          return Promise.reject(
+            'Invalid datasource object or retrieve function'
+          );
+        }
+
+        const bulkDataPromise = datasource.retrieve.bulkDataURI({
+          BulkDataURI: bulkDataURI,
+          StudyInstanceUID: instance.StudyInstanceUID,
+          SeriesInstanceUID: instance.SeriesInstanceUID,
+          SOPInstanceUID: instance.SOPInstanceUID,
+        });
+
+        promises.push(bulkDataPromise);
+      } else {
+        return Promise.reject(`Invalid ContourData: ${contourData}`);
+      }
+    }
+  }
+  const flattenedPromises = promises.flat();
+  const resolvedPromises = await Promise.allSettled(flattenedPromises);
+
+  // Modify contourData and replace it in its corresponding ROIContourSequence's Contour's contourData
+  let index = 0;
+  instance.ROIContourSequence.forEach((ROIContour, roiIndex) => {
+    ROIContour.ContourSequence.forEach((Contour, contourIndex) => {
+      const promise = resolvedPromises[index++];
+
+      if (promise.status === 'fulfilled') {
+        const uint8Array = new Uint8Array(promise.value);
+        const textDecoder = new TextDecoder();
+        const dataUint8Array = textDecoder.decode(uint8Array);
+        if (
+          typeof dataUint8Array === 'string' &&
+          dataUint8Array.includes('\\')
+        ) {
+          const numSlashes = (dataUint8Array.match(/\\/g) || []).length;
+          let startIndex = 0;
+          let endIndex = dataUint8Array.indexOf('\\', startIndex);
+          let numbersParsed = 0;
+          const ContourData = [];
+
+          while (numbersParsed !== numSlashes + 1) {
+            const str = dataUint8Array.substring(startIndex, endIndex);
+            let value = parseFloat(str);
+
+            ContourData.push(value);
+            startIndex = endIndex + 1;
+            endIndex = dataUint8Array.indexOf('\\', startIndex);
+            endIndex === -1 ? (endIndex = dataUint8Array.length) : endIndex;
+            numbersParsed++;
+          }
+          Contour.ContourData = ContourData;
+        } else {
+          Contour.ContourData = [];
+        }
+      } else {
+        console.error(promise.reason);
+      }
+    });
+  });
+}
+
+export default async function loadRTStruct(
+  extensionManager,
+  rtStructDisplaySet,
+  referencedDisplaySet,
+  headers
+) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.common'
+  );
+  const dataSource = extensionManager.getActiveDataSource()[0];
+  const { useBulkDataURI } = dataSource.getConfig?.() || {};
+
+  const { dicomLoaderService } = utilityModule.exports;
+  const imageIdSopInstanceUidPairs = _getImageIdSopInstanceUidPairsForDisplaySet(
+    referencedDisplaySet
+  );
+
+  // Set here is loading is asynchronous.
+  // If this function throws its set back to false.
+  rtStructDisplaySet.isLoaded = true;
+  let instance = rtStructDisplaySet.instance;
+
+  if (!useBulkDataURI) {
+    const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
+      rtStructDisplaySet,
+      null,
+      headers
+    );
+
+    const dicomData = DicomMessage.readFile(segArrayBuffer);
+    const rtStructDataset = DicomMetaDictionary.naturalizeDataset(
+      dicomData.dict
+    );
+    rtStructDataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+    instance = rtStructDataset;
+  } else {
+    await checkAndLoadContourData(instance, dataSource);
+  }
+
+  const {
+    StructureSetROISequence,
+    ROIContourSequence,
+    RTROIObservationsSequence,
+  } = instance;
+
+  // Define our structure set entry and add it to the rtstruct module state.
+  const structureSet = {
+    StructureSetLabel: instance.StructureSetLabel,
+    SeriesInstanceUID: instance.SeriesInstanceUID,
+    ROIContours: [],
+    visible: true,
+  };
+
+  for (let i = 0; i < ROIContourSequence.length; i++) {
+    const ROIContour = ROIContourSequence[i];
+    const { ContourSequence } = ROIContour;
+
+    if (!ContourSequence) {
+      continue;
+    }
+
+    const isSupported = false;
+
+    const ContourSequenceArray = _toArray(ContourSequence);
+
+    const contourPoints = [];
+    for (let c = 0; c < ContourSequenceArray.length; c++) {
+      const {
+        ContourImageSequence,
+        ContourData,
+        NumberOfContourPoints,
+        ContourGeometricType,
+      } = ContourSequenceArray[c];
+
+      const sopInstanceUID = ContourImageSequence.ReferencedSOPInstanceUID;
+      const imageId = _getImageId(imageIdSopInstanceUidPairs, sopInstanceUID);
+
+      if (!imageId) {
+        continue;
+      }
+      let isSupported = false;
+
+      const points = [];
+      for (let p = 0; p < NumberOfContourPoints * 3; p += 3) {
+        points.push({
+          x: ContourData[p],
+          y: ContourData[p + 1],
+          z: ContourData[p + 2],
+        });
+      }
+
+      switch (ContourGeometricType) {
+        case 'CLOSED_PLANAR':
+        case 'OPEN_PLANAR':
+        case 'POINT':
+          isSupported = true;
+
+          break;
+        default:
+          continue;
+      }
+
+      contourPoints.push({
+        numberOfPoints: NumberOfContourPoints,
+        points,
+        type: ContourGeometricType,
+        isSupported,
+      });
+    }
+
+    _setROIContourMetadata(
+      structureSet,
+      StructureSetROISequence,
+      RTROIObservationsSequence,
+      ROIContour,
+      contourPoints,
+      isSupported
+    );
+  }
+  return structureSet;
+}
+
+const _getImageId = (imageIdSopInstanceUidPairs, sopInstanceUID) => {
+  const imageIdSopInstanceUidPairsEntry = imageIdSopInstanceUidPairs.find(
+    imageIdSopInstanceUidPairsEntry =>
+      imageIdSopInstanceUidPairsEntry.sopInstanceUID === sopInstanceUID
+  );
+
+  return imageIdSopInstanceUidPairsEntry
+    ? imageIdSopInstanceUidPairsEntry.imageId
+    : null;
+};
+
+function _getImageIdSopInstanceUidPairsForDisplaySet(referencedDisplaySet) {
+  return referencedDisplaySet.images.map(image => {
+    return {
+      imageId: image.imageId,
+      sopInstanceUID: image.SOPInstanceUID,
+    };
+  });
+}
+
+function _setROIContourMetadata(
+  structureSet,
+  StructureSetROISequence,
+  RTROIObservationsSequence,
+  ROIContour,
+  contourPoints,
+  isSupported
+) {
+  const StructureSetROI = StructureSetROISequence.find(
+    structureSetROI =>
+      structureSetROI.ROINumber === ROIContour.ReferencedROINumber
+  );
+
+  const ROIContourData = {
+    ROINumber: StructureSetROI.ROINumber,
+    ROIName: StructureSetROI.ROIName,
+    ROIGenerationAlgorithm: StructureSetROI.ROIGenerationAlgorithm,
+    ROIDescription: StructureSetROI.ROIDescription,
+    isSupported,
+    contourPoints,
+    visible: true,
+  };
+
+  _setROIContourDataColor(ROIContour, ROIContourData);
+
+  if (RTROIObservationsSequence) {
+    // If present, add additional RTROIObservations metadata.
+    _setROIContourRTROIObservations(
+      ROIContourData,
+      RTROIObservationsSequence,
+      ROIContour.ReferencedROINumber
+    );
+  }
+
+  structureSet.ROIContours.push(ROIContourData);
+}
+
+function _setROIContourDataColor(ROIContour, ROIContourData) {
+  let { ROIDisplayColor, RecommendedDisplayCIELabValue } = ROIContour;
+
+  if (!ROIDisplayColor && RecommendedDisplayCIELabValue) {
+    // If ROIDisplayColor is absent, try using the RecommendedDisplayCIELabValue color.
+    ROIDisplayColor = dicomlab2RGB(RecommendedDisplayCIELabValue);
+  }
+
+  if (ROIDisplayColor) {
+    ROIContourData.colorArray = [...ROIDisplayColor];
+  }
+}
+
+function _setROIContourRTROIObservations(
+  ROIContourData,
+  RTROIObservationsSequence,
+  ROINumber
+) {
+  const RTROIObservations = RTROIObservationsSequence.find(
+    RTROIObservations => RTROIObservations.ReferencedROINumber === ROINumber
+  );
+
+  if (RTROIObservations) {
+    // Deep copy so we don't keep the reference to the dcmjs dataset entry.
+    const {
+      ObservationNumber,
+      ROIObservationDescription,
+      RTROIInterpretedType,
+      ROIInterpreter,
+    } = RTROIObservations;
+
+    ROIContourData.RTROIObservations = {
+      ObservationNumber,
+      ROIObservationDescription,
+      RTROIInterpretedType,
+      ROIInterpreter,
+    };
+  }
+}
+
+function _toArray(objOrArray) {
+  return Array.isArray(objOrArray) ? objOrArray : [objOrArray];
+}

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

@@ -0,0 +1,70 @@
+async function _hydrateRTDisplaySet({
+  rtDisplaySet,
+  viewportIndex,
+  servicesManager,
+}) {
+  const {
+    segmentationService,
+    hangingProtocolService,
+    viewportGridService,
+  } = servicesManager.services;
+
+  const displaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
+
+  let segmentationId = null;
+
+  // We need the hydration to notify panels about the new segmentation added
+  const suppressEvents = false;
+
+  segmentationId = await segmentationService.createSegmentationForRTDisplaySet(
+    rtDisplaySet,
+    segmentationId,
+    suppressEvents
+  );
+
+  segmentationService.hydrateSegmentation(rtDisplaySet.displaySetInstanceUID);
+
+  const { viewports } = viewportGridService.getState();
+
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+    viewportIndex,
+    displaySetInstanceUID
+  );
+
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+
+  // Todo: fix this after we have a better way for stack viewport segmentations
+
+  // check every viewport in the viewports to see if the displaySetInstanceUID
+  // is being displayed, if so we need to update the viewport to use volume viewport
+  // (if already is not using it) since Cornerstone3D currently only supports
+  // volume viewport for segmentation
+  viewports.forEach((viewport, index) => {
+    if (index === viewportIndex) {
+      return;
+    }
+
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
+      viewport.displaySetInstanceUIDs,
+      rtDisplaySet.displaySetInstanceUID
+    );
+
+    if (shouldDisplaySeg) {
+      updatedViewports.push({
+        viewportIndex: index,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          initialImageOptions: {
+            preset: 'middle',
+          },
+        },
+      });
+    }
+  });
+
+  // Do the entire update at once
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+  return true;
+}
+
+export default _hydrateRTDisplaySet;

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

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

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

@@ -0,0 +1,70 @@
+import hydrateRTDisplaySet from './_hydrateRT';
+
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};
+
+function promptHydrateRT({
+  servicesManager,
+  rtDisplaySet,
+  viewportIndex,
+  toolGroupId = 'default',
+}) {
+  const { uiViewportDialogService } = servicesManager.services;
+
+  return new Promise(async function(resolve, reject) {
+    const promptResult = await _askHydrate(
+      uiViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      const isHydrated = await hydrateRTDisplaySet({
+        rtDisplaySet,
+        viewportIndex,
+        toolGroupId,
+        servicesManager,
+      });
+
+      resolve(isHydrated);
+    }
+  });
+}
+
+function _askHydrate(uiViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Do you want to open this Segmentation?';
+    const actions = [
+      {
+        type: 'secondary',
+        text: 'No',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.HYDRATE_SEG,
+      },
+    ];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+
+    uiViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptHydrateRT;

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

@@ -0,0 +1,415 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import OHIF, { utils } from '@ohif/core';
+import {
+  Notification,
+  ViewportActionBar,
+  useViewportGrid,
+  useViewportDialog,
+  LoadingIndicatorTotalPercent,
+} from '@ohif/ui';
+
+import _hydrateRTdisplaySet from '../utils/_hydrateRT';
+import promptHydrateRT from '../utils/promptHydrateRT';
+import _getStatusComponent from './_getStatusComponent';
+import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
+import _hydrateRTDisplaySet from '../utils/_hydrateRT';
+
+const { formatDate } = utils;
+const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
+
+function OHIFCornerstoneRTViewport(props) {
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    viewportIndex,
+    viewportLabel,
+    servicesManager,
+    extensionManager,
+  } = props;
+
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    uiNotificationService,
+    customizationService,
+  } = servicesManager.services;
+
+  const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
+
+  // RT viewport will always have a single display set
+  if (displaySets.length > 1) {
+    throw new Error('RT viewport should only have a single display set');
+  }
+
+  const rtDisplaySet = displaySets[0];
+
+  const [viewportGrid, viewportGridService] = useViewportGrid();
+  const [viewportDialogState, viewportDialogApi] = useViewportDialog();
+
+  // States
+  const [isToolGroupCreated, setToolGroupCreated] = useState(false);
+  const [selectedSegment, setSelectedSegment] = useState(1);
+
+  // Hydration means that the RT is opened and segments are loaded into the
+  // segmentation panel, and RT is also rendered on any viewport that is in the
+  // same frameOfReferenceUID as the referencedSeriesUID of the RT. However,
+  // loading basically means RT loading over network and bit unpacking of the
+  // RT data.
+  const [isHydrated, setIsHydrated] = useState(rtDisplaySet.isHydrated);
+  const [rtIsLoading, setRtIsLoading] = useState(!rtDisplaySet.isLoaded);
+  const [element, setElement] = useState(null);
+  const [processingProgress, setProcessingProgress] = useState({
+    percentComplete: null,
+    totalSegments: null,
+  });
+
+  // refs
+  const referencedDisplaySetRef = useRef(null);
+
+  const { viewports, activeViewportIndex } = viewportGrid;
+
+  const referencedDisplaySet = rtDisplaySet.getReferenceDisplaySet();
+  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
+    referencedDisplaySet
+  );
+
+  referencedDisplaySetRef.current = {
+    displaySet: referencedDisplaySet,
+    metadata: referencedDisplaySetMetadata,
+  };
+  /**
+   * OnElementEnabled callback which is called after the cornerstoneExtension
+   * has enabled the element. Note: we delegate all the image rendering to
+   * cornerstoneExtension, so we don't need to do anything here regarding
+   * the image rendering, element enabling etc.
+   */
+  const onElementEnabled = evt => {
+    setElement(evt.detail.element);
+  };
+
+  const onElementDisabled = () => {
+    setElement(null);
+  };
+
+  const getCornerstoneViewport = useCallback(() => {
+    const { component: Component } = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.viewportModule.cornerstone'
+    );
+
+    const {
+      displaySet: referencedDisplaySet,
+    } = referencedDisplaySetRef.current;
+
+    // Todo: jump to the center of the first segment
+    return (
+      <Component
+        {...props}
+        displaySets={[referencedDisplaySet, rtDisplaySet]}
+        viewportOptions={{
+          viewportType: 'volume',
+          toolGroupId: toolGroupId,
+          orientation: viewportOptions.orientation,
+          viewportId: viewportOptions.viewportId,
+        }}
+        onElementEnabled={onElementEnabled}
+        onElementDisabled={onElementDisabled}
+        // initialImageIndex={initialImageIndex}
+      ></Component>
+    );
+  }, [viewportIndex, rtDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      direction = direction === 'left' ? -1 : 1;
+      const segmentationId = rtDisplaySet.displaySetInstanceUID;
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      // Segment 0 is always background
+      if (newSelectedSegmentIndex >= numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      segmentationService.jumpToSegmentCenter(
+        segmentationId,
+        newSelectedSegmentIndex,
+        toolGroupId
+      );
+      setSelectedSegment(newSelectedSegmentIndex);
+    },
+    [selectedSegment]
+  );
+
+  useEffect(() => {
+    if (rtIsLoading) {
+      return;
+    }
+
+    promptHydrateRT({
+      servicesManager,
+      viewportIndex,
+      rtDisplaySet,
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
+    });
+  }, [servicesManager, viewportIndex, rtDisplaySet, rtIsLoading]);
+
+  useEffect(() => {
+    const { unsubscribe } = segmentationService.subscribe(
+      segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE,
+      evt => {
+        if (
+          evt.rtDisplaySet.displaySetInstanceUID ===
+          rtDisplaySet.displaySetInstanceUID
+        ) {
+          setRtIsLoading(false);
+        }
+
+        if (evt.overlappingSegments) {
+          uiNotificationService.show({
+            title: 'Overlapping Segments',
+            message:
+              'Overlapping segments detected which is not currently supported',
+            type: 'warning',
+          });
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [rtDisplaySet]);
+
+  useEffect(() => {
+    const { unsubscribe } = segmentationService.subscribe(
+      segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE,
+      ({ percentComplete, numSegments }) => {
+        setProcessingProgress({
+          percentComplete,
+          totalSegments: numSegments,
+        });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [rtDisplaySet]);
+
+  /**
+   Cleanup the SEG viewport when the viewport is destroyed
+   */
+  useEffect(() => {
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
+      ({ displaySetInstanceUIDs }) => {
+        const activeViewport = viewports[activeViewportIndex];
+        if (
+          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
+        ) {
+          viewportGridService.setDisplaySetsForViewport({
+            viewportIndex: activeViewportIndex,
+            displaySetInstanceUIDs: [],
+          });
+        }
+      }
+    );
+
+    return () => {
+      onDisplaySetsRemovedSubscription.unsubscribe();
+    };
+  }, []);
+
+  useEffect(() => {
+    let toolGroup = toolGroupService.getToolGroup(toolGroupId);
+
+    if (toolGroup) {
+      return;
+    }
+
+    toolGroup = createRTToolGroupAndAddTools(
+      toolGroupService,
+      customizationService,
+      toolGroupId
+    );
+
+    setToolGroupCreated(true);
+
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentationFromToolGroup(
+        toolGroupId
+      );
+
+      toolGroupService.destroyToolGroup(toolGroupId);
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsHydrated(rtDisplaySet.isHydrated);
+
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentationFromToolGroup(
+        toolGroupId
+      );
+      referencedDisplaySetRef.current = null;
+    };
+  }, [rtDisplaySet]);
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  let childrenWithProps = null;
+
+  if (
+    !referencedDisplaySetRef.current ||
+    referencedDisplaySet.displaySetInstanceUID !==
+      referencedDisplaySetRef.current.displaySet.displaySetInstanceUID
+  ) {
+    return null;
+  }
+
+  if (children && children.length) {
+    childrenWithProps = children.map((child, index) => {
+      return (
+        child &&
+        React.cloneElement(child, {
+          viewportIndex,
+          key: index,
+        })
+      );
+    });
+  }
+
+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+    ManufacturerModelName,
+    StudyDate,
+    SeriesDescription,
+    SpacingBetweenSlices,
+    SeriesNumber,
+  } = referencedDisplaySetRef.current.metadata;
+
+  const onStatusClick = async () => {
+    const isHydrated = await _hydrateRTDisplaySet({
+      rtDisplaySet,
+      viewportIndex,
+      servicesManager,
+    });
+
+    setIsHydrated(isHydrated);
+  };
+
+  return (
+    <>
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onSegmentChange}
+        getStatusComponent={() => {
+          return _getStatusComponent({
+            isHydrated,
+            onStatusClick,
+          });
+        }}
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          currentSeries: SeriesNumber,
+          seriesDescription: `RT Viewport ${SeriesDescription}`,
+          patientInformation: {
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              SpacingBetweenSlices !== undefined
+                ? `${SpacingBetweenSlices.toFixed(2)}mm`
+                : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
+      <div className="relative flex flex-row w-full h-full overflow-hidden">
+        {rtIsLoading && (
+          <LoadingIndicatorTotalPercent
+            className="w-full h-full"
+            totalNumbers={processingProgress.totalSegments}
+            percentComplete={processingProgress.percentComplete}
+            loadingText="Loading RTSTRUCT..."
+          />
+        )}
+        {getCornerstoneViewport()}
+        <div className="absolute w-full">
+          {viewportDialogState.viewportIndex === viewportIndex && (
+            <Notification
+              id="viewport-notification"
+              message={viewportDialogState.message}
+              type={viewportDialogState.type}
+              actions={viewportDialogState.actions}
+              onSubmit={viewportDialogState.onSubmit}
+              onOutsideClick={viewportDialogState.onOutsideClick}
+            />
+          )}
+        </div>
+        {childrenWithProps}
+      </div>
+    </>
+  );
+}
+
+OHIFCornerstoneRTViewport.propTypes = {
+  displaySets: PropTypes.arrayOf(PropTypes.object),
+  viewportIndex: PropTypes.number.isRequired,
+  dataSource: PropTypes.object,
+  children: PropTypes.node,
+  customProps: PropTypes.object,
+};
+
+OHIFCornerstoneRTViewport.defaultProps = {
+  customProps: {},
+};
+
+function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
+  const image0 = referencedDisplaySet.images[0];
+  const referencedDisplaySetMetadata = {
+    PatientID: image0.PatientID,
+    PatientName: image0.PatientName,
+    PatientSex: image0.PatientSex,
+    PatientAge: image0.PatientAge,
+    SliceThickness: image0.SliceThickness,
+    StudyDate: image0.StudyDate,
+    SeriesDescription: image0.SeriesDescription,
+    SeriesInstanceUID: image0.SeriesInstanceUID,
+    SeriesNumber: image0.SeriesNumber,
+    ManufacturerModelName: image0.ManufacturerModelName,
+    SpacingBetweenSlices: image0.SpacingBetweenSlices,
+  };
+
+  return referencedDisplaySetMetadata;
+}
+
+export default OHIFCornerstoneRTViewport;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon, Tooltip } from '@ohif/ui';
+
+export default function _getStatusComponent({ isHydrated, onStatusClick }) {
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  const { t } = useTranslation('Common');
+  const loadStr = t('LOAD');
+
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => <Icon name="status-alert" />;
+
+      ToolTipMessage = () => (
+        <div>This Segmentation is loaded in the segmentation panel</div>
+      );
+      break;
+    case false:
+      StatusIcon = () => <Icon name="status-untracked" />;
+
+      ToolTipMessage = () => <div>Click LOAD to load RTSTRUCT.</div>;
+  }
+
+  const StatusArea = () => (
+    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
+      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
+        <StatusIcon />
+        <span className="ml-1">RTSTRUCT</span>
+      </div>
+      {!isHydrated && (
+        <div
+          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={onStatusClick}
+        >
+          {loadStr}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+          <StatusArea />
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}