init

extensions/cornerstone-dicom-rt/src/getCommandsModule.ts

@@ -0,0 +1,55 @@
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
+  const services = servicesManager.services;
+  const { displaySetService, viewportGridService } = services;
+
+  const actions = {
+    hydrateRTSDisplaySet: ({ displaySet, viewportId }) => {
+      if (displaySet.Modality !== 'RTSTRUCT') {
+        throw new Error('Display set is not an RTSTRUCT');
+      }
+
+      const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+        displaySet.referencedDisplaySetInstanceUID
+      );
+
+      // update the previously stored segmentationPresentation with the new viewportId
+      // presentation so that when we put the referencedDisplaySet back in the viewport
+      // it will have the correct segmentation representation hydrated
+      commandsManager.runCommand('updateStoredSegmentationPresentation', {
+        displaySet: displaySet,
+        type: SegmentationRepresentations.Contour,
+      });
+
+      // update the previously stored positionPresentation with the new viewportId
+      // presentation so that when we put the referencedDisplaySet back in the viewport
+      // it will be in the correct position zoom and pan
+      commandsManager.runCommand('updateStoredPositionPresentation', {
+        viewportId,
+        displaySetInstanceUID: referencedDisplaySet.displaySetInstanceUID,
+      });
+
+      viewportGridService.setDisplaySetsForViewport({
+        viewportId,
+        displaySetInstanceUIDs: [referencedDisplaySet.displaySetInstanceUID],
+      });
+    },
+  };
+
+  const definitions = {
+    hydrateRTSDisplaySet: {
+      commandFn: actions.hydrateRTSDisplaySet,
+      storeContexts: [],
+      options: {},
+    },
+  };
+
+  return {
+    actions,
+    definitions,
+    defaultContext: 'cornerstone-dicom-rt',
+  };
+};
+
+export default commandsModule;

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

@@ -0,0 +1,199 @@
+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'];
+
+const loadPromises = {};
+
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager: AppTypes.ServicesManager,
+  extensionManager
+) {
+  const instance = instances[0];
+
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID,
+    wadoRoot,
+    wadoUri,
+    wadoUriRoot,
+  } = instance;
+
+  const displaySet = {
+    Modality: 'RTSTRUCT',
+    loading: false,
+    isReconstructable: false, // 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;
+
+  const { displaySetService } = servicesManager.services;
+  const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
+    displaySet.referencedSeriesInstanceUID
+  );
+
+  if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
+    // Instead of throwing error, subscribe to display sets added
+    const { unsubscribe } = displaySetService.subscribe(
+      displaySetService.EVENTS.DISPLAY_SETS_ADDED,
+      ({ displaySetsAdded }) => {
+        const addedDisplaySet = displaySetsAdded[0];
+        if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
+          displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          unsubscribe();
+        }
+      }
+    );
+  } else {
+    const referencedDisplaySet = referencedDisplaySets[0];
+    displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
+  }
+
+  displaySet.load = ({ headers }) => _load(displaySet, servicesManager, extensionManager, headers);
+
+  return [displaySet];
+}
+
+function _load(rtDisplaySet, servicesManager: AppTypes.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, headers);
+
+      rtDisplaySet.structureSet = structureSet;
+    }
+
+    segmentationService
+      .createSegmentationForRTDisplaySet(rtDisplaySet)
+      .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: AppTypes.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,63 @@
+import { id } from './id';
+import React from 'react';
+import { Types } from '@ohif/core';
+import getSopClassHandlerModule from './getSopClassHandlerModule';
+import getCommandsModule from './getCommandsModule';
+
+const Component = React.lazy(() => {
+  return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport');
+});
+
+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,
+  getCommandsModule,
+
+  /**
+   * 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,
+    commandsManager,
+  }: Types.Extensions.ExtensionParams) {
+    const ExtendedOHIFCornerstoneRTViewport = props => {
+      return (
+        <OHIFCornerstoneRTViewport
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          commandsManager={commandsManager}
+          {...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,259 @@
+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 promisesMap = new Map();
+
+  for (const ROIContour of instance.ROIContourSequence) {
+    const referencedROINumber = ROIContour.ReferencedROINumber;
+    if (!ROIContour || !ROIContour.ContourSequence) {
+      promisesMap.set(referencedROINumber, [Promise.resolve([])]);
+      continue;
+    }
+
+    for (const Contour of ROIContour.ContourSequence) {
+      if (!Contour || !Contour.ContourData) {
+        return Promise.reject('Invalid Contour or ContourData');
+      }
+
+      const contourData = Contour.ContourData;
+
+      if (Array.isArray(contourData)) {
+        promisesMap.has(referencedROINumber)
+          ? promisesMap.get(referencedROINumber).push(Promise.resolve(contourData))
+          : promisesMap.set(referencedROINumber, [Promise.resolve(contourData)]);
+      } else if (contourData && contourData.BulkDataURI) {
+        const bulkDataURI = contourData.BulkDataURI;
+
+        if (!datasource || !datasource.retrieve || !datasource.retrieve.bulkDataURI) {
+          return Promise.reject('Invalid datasource object or retrieve function');
+        }
+
+        const bulkDataPromise = datasource.retrieve.bulkDataURI({
+          BulkDataURI: bulkDataURI,
+          StudyInstanceUID: instance.StudyInstanceUID,
+          SeriesInstanceUID: instance.SeriesInstanceUID,
+          SOPInstanceUID: instance.SOPInstanceUID,
+        });
+
+        promisesMap.has(referencedROINumber)
+          ? promisesMap.get(referencedROINumber).push(bulkDataPromise)
+          : promisesMap.set(referencedROINumber, [bulkDataPromise]);
+      } else {
+        return Promise.reject(`Invalid ContourData: ${contourData}`);
+      }
+    }
+  }
+
+  const resolvedPromisesMap = new Map();
+  for (const [key, promiseArray] of promisesMap.entries()) {
+    resolvedPromisesMap.set(key, await Promise.allSettled(promiseArray));
+  }
+
+  instance.ROIContourSequence.forEach(ROIContour => {
+    try {
+      const referencedROINumber = ROIContour.ReferencedROINumber;
+      const resolvedPromises = resolvedPromisesMap.get(referencedROINumber);
+
+      if (ROIContour.ContourSequence) {
+        ROIContour.ContourSequence.forEach((Contour, index) => {
+          const promise = resolvedPromises[index];
+          if (promise.status === 'fulfilled') {
+            if (Array.isArray(promise.value) && promise.value.every(Number.isFinite)) {
+              // If promise.value is already an array of numbers, use it directly
+              Contour.ContourData = promise.value;
+            } else {
+              // If the resolved promise value is a byte array (Blob), it needs to be decoded
+              const uint8Array = new Uint8Array(promise.value);
+              const textDecoder = new TextDecoder();
+              const dataUint8Array = textDecoder.decode(uint8Array);
+              if (typeof dataUint8Array === 'string' && dataUint8Array.includes('\\')) {
+                Contour.ContourData = dataUint8Array.split('\\').map(parseFloat);
+              } else {
+                Contour.ContourData = [];
+              }
+            }
+          } else {
+            console.error(promise.reason);
+          }
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}
+
+export default async function loadRTStruct(extensionManager, rtStructDisplaySet, headers) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.common'
+  );
+  const dataSource = extensionManager.getActiveDataSource()[0];
+  const { bulkDataURI } = dataSource.getConfig?.() || {};
+
+  const { dicomLoaderService } = utilityModule.exports;
+
+  // Set here is loading is asynchronous.
+  // If this function throws its set back to false.
+  rtStructDisplaySet.isLoaded = true;
+  let instance = rtStructDisplaySet.instance;
+
+  if (!bulkDataURI || !bulkDataURI.enabled) {
+    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 { ContourData, NumberOfContourPoints, ContourGeometricType } = ContourSequenceArray[c];
+
+      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;
+}
+
+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/initRTToolGroup.ts

@@ -0,0 +1,7 @@
+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,82 @@
+import { ButtonEnums } from '@ohif/ui';
+
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};
+
+function promptHydrateRT({
+  servicesManager,
+  rtDisplaySet,
+  viewportId,
+  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);
+
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      preHydrateCallbacks?.forEach(callback => {
+        callback();
+      });
+
+      const isHydrated = await hydrateRTDisplaySet({
+        rtDisplaySet,
+        viewportId,
+        servicesManager,
+      });
+
+      resolve(isHydrated);
+    }
+  });
+}
+
+function _askHydrate(uiViewportDialogService: AppTypes.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,
+      },
+    ];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+
+    uiViewportDialogService.show({
+      id: 'promptHydrateRT',
+      viewportId,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+      onKeyPress: event => {
+        if (event.key === 'Enter') {
+          onSubmit(RESPONSE.HYDRATE_SEG);
+        }
+      },
+    });
+  });
+}
+
+export default promptHydrateRT;

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

@@ -0,0 +1,390 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useViewportGrid, LoadingIndicatorTotalPercent, ViewportActionArrows } from '@ohif/ui';
+
+import promptHydrateRT from '../utils/promptHydrateRT';
+import _getStatusComponent from './_getStatusComponent';
+
+import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
+
+function OHIFCornerstoneRTViewport(props: withAppTypes) {
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    servicesManager,
+    extensionManager,
+    commandsManager,
+  } = props;
+
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    uiNotificationService,
+    customizationService,
+    viewportActionCornersService,
+  } = servicesManager.services;
+
+  const viewportId = viewportOptions.viewportId;
+
+  const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportId}`;
+
+  // 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();
+
+  // 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, activeViewportId } = viewportGrid;
+
+  const referencedDisplaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+    referencedDisplaySetInstanceUID
+  );
+  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 storePresentationState = useCallback(() => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
+      commandsManager.runCommand('storePresentation', {
+        viewportId,
+      });
+    });
+  }, [viewportGrid]);
+
+  const hydrateRTDisplaySet = useCallback(
+    ({ rtDisplaySet, viewportId }) => {
+      commandsManager.runCommand('hydrateRTSDisplaySet', {
+        displaySet: rtDisplaySet,
+        viewportId,
+      });
+    },
+    [commandsManager]
+  );
+
+  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: 'stack',
+          toolGroupId: toolGroupId,
+          orientation: viewportOptions.orientation,
+          viewportId: viewportOptions.viewportId,
+        }}
+        onElementEnabled={evt => {
+          props.onElementEnabled?.(evt);
+          onElementEnabled(evt);
+        }}
+        onElementDisabled={onElementDisabled}
+      ></Component>
+    );
+  }, [viewportId, rtDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      const segmentationId = rtDisplaySet.displaySetInstanceUID;
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      // Segment 0 is always background
+      if (newSelectedSegmentIndex >= numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, viewportId);
+      setSelectedSegment(newSelectedSegmentIndex);
+    },
+    [selectedSegment, segmentationService]
+  );
+
+  useEffect(() => {
+    if (rtIsLoading) {
+      return;
+    }
+
+    promptHydrateRT({
+      servicesManager,
+      viewportId,
+      rtDisplaySet,
+      preHydrateCallbacks: [storePresentationState],
+      hydrateRTDisplaySet,
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
+    });
+  }, [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 => {
+        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.get(activeViewportId);
+        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
+          viewportGridService.setDisplaySetsForViewport({
+            viewportId: activeViewportId,
+            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.removeSegmentationRepresentations(viewportId);
+
+      toolGroupService.destroyToolGroup(toolGroupId);
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsHydrated(rtDisplaySet.isHydrated);
+
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentations(viewportId);
+      referencedDisplaySetRef.current = null;
+    };
+  }, [rtDisplaySet]);
+
+  const onStatusClick = useCallback(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
+    // required if the user has changed the viewport (other viewport than RT viewport)
+    // presentation state (w/l and invert) and then opens the RT. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
+    const isHydrated = await hydrateRTDisplaySet({
+      rtDisplaySet,
+      viewportId,
+    });
+
+    setIsHydrated(isHydrated);
+  }, [hydrateRTDisplaySet, rtDisplaySet, storePresentationState, viewportId]);
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  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, {
+          viewportId,
+          key: index,
+        })
+      );
+    });
+  }
+
+  useEffect(() => {
+    viewportActionCornersService.addComponents([
+      {
+        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/pane:visible'
+            }
+          ></ViewportActionArrows>
+        ),
+        indexPriority: 0,
+        location: viewportActionCornersService.LOCATIONS.topRight,
+      },
+    ]);
+  }, [
+    activeViewportId,
+    isHydrated,
+    onSegmentChange,
+    onStatusClick,
+    viewportActionCornersService,
+    viewportId,
+  ]);
+
+  return (
+    <>
+      <div className="relative flex h-full w-full flex-row overflow-hidden">
+        {rtIsLoading && (
+          <LoadingIndicatorTotalPercent
+            className="h-full w-full"
+            totalNumbers={processingProgress.totalSegments}
+            percentComplete={processingProgress.percentComplete}
+            loadingText="Loading RTSTRUCT..."
+          />
+        )}
+        {getCornerstoneViewport()}
+        {childrenWithProps}
+      </div>
+    </>
+  );
+}
+
+OHIFCornerstoneRTViewport.propTypes = {
+  displaySets: PropTypes.arrayOf(PropTypes.object),
+  viewportId: PropTypes.string.isRequired,
+  dataSource: PropTypes.object,
+  children: PropTypes.node,
+};
+
+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,62 @@
+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;
+
+  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
+          className="text-aqua-pale"
+          name="status-untracked"
+        />
+      );
+
+      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>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip
+          content={<ToolTipMessage />}
+          position="bottom-left"
+        >
+          <StatusArea />
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusArea />}
+    </>
+  );
+}