feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015)

* feat: add initial sop class handler for SEG * feat: move segmentation service * update segmentation service methods * fix: viewport data structure * feat: Add initial render for the DICOM SEG for each displaySet * fix: various wrong architectural dependencies between services * feat: initial separate SEG display in each viewport * feat: refactore viewport action bar * initial work for SEG hydration * fix: various bugs regarding drag and dropping different viewports * fix: rendering issues for multiple seg displaysets * fix: bugs for thumbnail and hydration * feat: fix the initial segment color * update after rebase * feat: initial design for the segmentation group table * feat: initial new design for the segmentation panel * feat: segmentation panel * feat: make segmentation appear on all related viewports * fix: segmentation load bug based on functional groups * initial work for segmentation crosshairs * fix: various stylings and functionality * fix: various stylings for the seg panel * fix: overflow styles * feat: add more ui components * feat: added segmentation config * feat: add jump to segment * feat: add jump to segment for DICOM SEG viewport * fix: bugs after rebase * feat: jump in segmentation viewport * fix: mpr support for seg * feat: add more icons * feat: new icons * feat: add new side panel * feat: add segmentation config * feat: add loading indicator to ohif * feat: make hanging protocols follow matching rules for viewports * feat: enhance drag and drop to be hanging protocol aware * fix: mpr restore previous layout * fix: crosshairs toggle * fix: add auth headers to the dicom loader via dicomwebclient * fix: bug for crosshairs toggle in mpr * fix: seg viewport reusing old toolGroup * feat: add loading animation with lottie * fix: various bugs for Segmentation hydration in mpr * feat: change outline alpha to outline opacity * feat: loading indicator for seg viewport * fix: various segmentation group styles * fix: local mode for seg * feat: add animation for the highlight * fix: loading indicatro to show segment indices * feat: enhance modality drop down ui * fix: panels * fix: download form * fix: layout shift in loading indicator * fix: loading indicator to have correct values * fix: update software number * fix: image jump between MPR and default * fix: segmentation cleanup and cine service cleanup * fix: segmentation toolgroup clena up * fix: highlight interval should not trigger again * fix: issue with multiframe sorting * rename: change onSeriesChange to onArrowsClick * fix: buttons for tmtv and layout shift * fix: various bugs wrt crosshairs * fix: crosshairs re init on reset camera * fix: middle slice calculation different from cs middle reset camera * fix: reset camera should reset viewport camera * fix: loading segments in MPR mode * fix: tmtv hp back to before * fix: layout shift * feat: orientation markers for volume viewport * fix: capture for volume viewports * fix: memory leak for back to worklist * fix: loading bar bg color * fix: side panel for only one panel * fix: react select style in production * fix: various styling for segmentation groups * fix: various ui styles * feat: add new segmentation config styles * fix: hover state for segmentation item * fix: side panel layout shift * temp add panels * try to fix scrollbar for thimbnail * fix: scroll not appearing for side panels * feat: changed styles for scrollbar * feat: add cpu fallback warning * fix: webworker destroy * fix: select styles * fix: orientation marker color and position * fix: capture screenshot for volume viewports * fix: hide segment visibility on mpr * fix: reloading an already loaded seg displayset * feat: add is equal * fix: mpr jump to measurements * apply review comments * fix: optimization for the segmentation load * fix: remove unnecessary context menu and hp service reset * fix: segmentation service wrt brush settings * feat: initial work for the stack synchronization * fix: add validateDisplaySetSelectorsForNewDisplaySets to make sure drag and drop can follow requirements * fix: various react proptypes * fix: thumbnails for the tmtv and change default props to default params * feat: make showing loading indicator configurable and add docs * bump versions and add more docs * fix demo * update cornerstone versions * apply review comments * feat: add reference lines * fix build * fix unit tests * add reference lines icon * fix: e2e tests * fix static wado config * docs: add segmentation service docs * fix: docker build * fix: keep camera and bump versions * Try re-enabling minification to fix deploy previews Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>
2022-11-16 14:19:52 -05:00
1 parent 08c58b0634
commit 83ea228d86
@@ -0,0 +1,312 @@
+import vtkMath from '@kitware/vtk.js/Common/Core/Math';
+
+import { utils } from '@ohif/core';
+
+import { SOPClassHandlerId } from './id';
+import dcmjs from 'dcmjs';
+
+const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
+
+const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
+
+let loadPromises = {};
+
+function _getDisplaySetsFromSeries(
+  instances,
+  servicesManager,
+  extensionManager
+) {
+  const instance = instances[0];
+
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID,
+    wadoRoot,
+    wadoUri,
+    wadoUriRoot,
+  } = instance;
+
+  const displaySet = {
+    Modality: 'SEG',
+    loading: false,
+    isReconstructable: true, // by default for now since it is a volumetric SEG currently
+    displaySetInstanceUID: utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPInstanceUID,
+    SeriesInstanceUID,
+    StudyInstanceUID,
+    SOPClassHandlerId,
+    SOPClassUID,
+    referencedImages: null,
+    referencedSeriesInstanceUID: null,
+    referencedDisplaySetInstanceUID: null,
+    isDerivedDisplaySet: true,
+    isLoaded: false,
+    isHydrated: false,
+    segments: {},
+    sopClassUids,
+    instance,
+    wadoRoot,
+    wadoUriRoot,
+    wadoUri,
+  };
+
+  const referencedSeriesSequence = instance.ReferencedSeriesSequence;
+
+  if (!referencedSeriesSequence) {
+    throw new Error('ReferencedSeriesSequence is missing for the SEG');
+  }
+
+  const referencedSeries = referencedSeriesSequence[0];
+
+  displaySet.referencedImages =
+    instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
+  displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
+
+  displaySet.getReferenceDisplaySet = () => {
+    const { DisplaySetService } = servicesManager.services;
+    const referencedDisplaySets = DisplaySetService.getDisplaySetsForSeries(
+      displaySet.referencedSeriesInstanceUID
+    );
+
+    if (!referencedDisplaySets || referencedDisplaySets.length === 0) {
+      throw new Error('Referenced DisplaySet is missing for the SEG');
+    }
+
+    const referencedDisplaySet = referencedDisplaySets[0];
+
+    displaySet.referencedDisplaySetInstanceUID =
+      referencedDisplaySet.displaySetInstanceUID;
+
+    // Todo: this needs to be able to work with other reference volumes (other than streaming) such as nifti, etc.
+    displaySet.referencedVolumeURI = referencedDisplaySet.displaySetInstanceUID;
+    const referencedVolumeId = `cornerstoneStreamingImageVolume:${displaySet.referencedVolumeURI}`;
+    displaySet.referencedVolumeId = referencedVolumeId;
+
+    return referencedDisplaySet;
+  };
+
+  displaySet.load = async ({ headers }) =>
+    await _load(displaySet, servicesManager, extensionManager, headers);
+
+  return [displaySet];
+}
+
+function _load(segDisplaySet, servicesManager, extensionManager, headers) {
+  const { SOPInstanceUID } = segDisplaySet;
+  if (
+    (segDisplaySet.loading || segDisplaySet.isLoaded) &&
+    loadPromises[SOPInstanceUID]
+  ) {
+    return loadPromises[SOPInstanceUID];
+  }
+
+  segDisplaySet.loading = true;
+
+  // We don't want to fire multiple loads, so we'll wait for the first to finish
+  // and also return the same promise to any other callers.
+  loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
+    const { SegmentationService } = servicesManager.services;
+
+    if (_segmentationExistsInCache(segDisplaySet, SegmentationService)) {
+      return;
+    }
+
+    if (
+      !segDisplaySet.segments ||
+      Object.keys(segDisplaySet.segments).length === 0
+    ) {
+      const segments = await _loadSegments(
+        extensionManager,
+        segDisplaySet,
+        headers
+      );
+
+      segDisplaySet.segments = segments;
+    }
+
+    const suppressEvents = true;
+    SegmentationService.createSegmentationForSEGDisplaySet(
+      segDisplaySet,
+      null,
+      suppressEvents
+    )
+      .then(() => {
+        segDisplaySet.loading = false;
+        resolve();
+      })
+      .catch(error => {
+        segDisplaySet.loading = false;
+        reject(error);
+      });
+  });
+
+  return loadPromises[SOPInstanceUID];
+}
+
+async function _loadSegments(extensionManager, segDisplaySet, headers) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.common'
+  );
+
+  const { dicomLoaderService } = utilityModule.exports;
+  const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
+    segDisplaySet,
+    null,
+    headers
+  );
+
+  const dicomData = DicomMessage.readFile(segArrayBuffer);
+  const dataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
+  dataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+
+  if (!Array.isArray(dataset.SegmentSequence)) {
+    dataset.SegmentSequence = [dataset.SegmentSequence];
+  }
+
+  const segments = _getSegments(dataset);
+  return segments;
+}
+
+function _segmentationExistsInCache(segDisplaySet, SegmentationService) {
+  // This should be abstracted with the CornerstoneCacheService
+  const labelmapVolumeId = segDisplaySet.displaySetInstanceUID;
+  const segVolume = SegmentationService.getLabelmapVolume(labelmapVolumeId);
+
+  return segVolume !== undefined;
+}
+
+function _getPixelData(dataset, segments) {
+  let frameSize = Math.ceil((dataset.Rows * dataset.Columns) / 8);
+  let nextOffset = 0;
+
+  Object.keys(segments).forEach(segmentKey => {
+    const segment = segments[segmentKey];
+    segment.numberOfFrames = segment.functionalGroups.length;
+    segment.size = segment.numberOfFrames * frameSize;
+    segment.offset = nextOffset;
+    nextOffset = segment.offset + segment.size;
+    const packedSegment = dataset.PixelData[0].slice(
+      segment.offset,
+      nextOffset
+    );
+
+    segment.pixelData = dcmjs.data.BitArray.unpack(packedSegment);
+    segment.geometry = geometryFromFunctionalGroups(
+      dataset,
+      segment.functionalGroups
+    );
+  });
+
+  return segments;
+}
+
+function geometryFromFunctionalGroups(dataset, perFrame) {
+  let pixelMeasures =
+    dataset.SharedFunctionalGroupsSequence.PixelMeasuresSequence;
+  let planeOrientation =
+    dataset.SharedFunctionalGroupsSequence.PlaneOrientationSequence;
+  let planePosition = perFrame[0].PlanePositionSequence; // TODO: assume sorted frames!
+
+  const geometry = {};
+
+  // NB: DICOM PixelSpacing is defined as Row then Column,
+  // unlike ImageOrientationPatient
+  let spacingBetweenSlices = pixelMeasures.SpacingBetweenSlices;
+  if (!spacingBetweenSlices) {
+    if (pixelMeasures.SliceThickness) {
+      console.log('Using SliceThickness as SpacingBetweenSlices');
+      spacingBetweenSlices = pixelMeasures.SliceThickness;
+    }
+  }
+  geometry.spacing = [
+    pixelMeasures.PixelSpacing[1],
+    pixelMeasures.PixelSpacing[0],
+    spacingBetweenSlices,
+  ].map(Number);
+
+  geometry.dimensions = [dataset.Columns, dataset.Rows, perFrame.length].map(
+    Number
+  );
+
+  let orientation = planeOrientation.ImageOrientationPatient.map(Number);
+  const columnStepToPatient = orientation.slice(0, 3);
+  const rowStepToPatient = orientation.slice(3, 6);
+  geometry.planeNormal = [];
+  vtkMath.cross(columnStepToPatient, rowStepToPatient, geometry.planeNormal);
+
+  let firstPosition = perFrame[0].PlanePositionSequence.ImagePositionPatient.map(
+    Number
+  );
+  let lastPosition = perFrame[
+    perFrame.length - 1
+  ].PlanePositionSequence.ImagePositionPatient.map(Number);
+  geometry.sliceStep = [];
+  vtkMath.subtract(lastPosition, firstPosition, geometry.sliceStep);
+  vtkMath.normalize(geometry.sliceStep);
+  geometry.direction = columnStepToPatient
+    .concat(rowStepToPatient)
+    .concat(geometry.sliceStep);
+  geometry.origin = planePosition.ImagePositionPatient.map(Number);
+
+  return geometry;
+}
+
+function _getSegments(dataset) {
+  const segments = {};
+
+  dataset.SegmentSequence.forEach(segment => {
+    const cielab = segment.RecommendedDisplayCIELabValue;
+    const rgba = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x =>
+      Math.round(x * 255)
+    );
+
+    rgba.push(255);
+    const segmentNumber = segment.SegmentNumber;
+
+    segments[segmentNumber] = {
+      color: rgba,
+      functionalGroups: [],
+      offset: null,
+      size: null,
+      pixelData: null,
+      label: segment.SegmentLabel,
+    };
+  });
+
+  // make a list of functional groups per segment
+  dataset.PerFrameFunctionalGroupsSequence.forEach(functionalGroup => {
+    const segmentNumber =
+      functionalGroup.SegmentIdentificationSequence.ReferencedSegmentNumber;
+    segments[segmentNumber].functionalGroups.push(functionalGroup);
+  });
+
+  return _getPixelData(dataset, segments);
+}
+
+function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+  const getDisplaySetsFromSeries = instances => {
+    return _getDisplaySetsFromSeries(
+      instances,
+      servicesManager,
+      extensionManager
+    );
+  };
+
+  return [
+    {
+      name: 'dicom-seg',
+      sopClassUids,
+      getDisplaySetsFromSeries,
+    },
+  ];
+}
+
+export default getSopClassHandlerModule;
@@ -0,0 +1,7 @@
+import packageJson from '../package.json';
+
+const id = packageJson.name;
+const SOPClassHandlerName = 'dicom-seg';
+const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
+
+export { id, SOPClassHandlerId, SOPClassHandlerName };
@@ -0,0 +1,93 @@
+import { id } from './id';
+import React from 'react';
+
+import getSopClassHandlerModule from './getSopClassHandlerModule';
+import PanelSegmentation from './panels/PanelSegmentation';
+
+const Component = React.lazy(() => {
+  return import(
+    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport'
+  );
+});
+
+const OHIFCornerstoneSEGViewport = 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 = {
+  /**
+   * 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 = {},
+  }) => {},
+  /**
+   * PanelModule should provide a list of panels that will be available in OHIF
+   * for Modes to consume and render. Each panel is defined by a {name,
+   * iconName, iconLabel, label, component} object. Example of a panel module
+   * is the StudyBrowserPanel that is provided by the default extension in OHIF.
+   */
+  getPanelModule: ({ servicesManager, commandsManager, extensionManager }) => {
+    const wrappedPanelSegmentation = () => {
+      return (
+        <PanelSegmentation
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+        />
+      );
+    };
+
+    return [
+      {
+        name: 'panelSegmentation',
+        iconName: 'tab-segmentation',
+        iconLabel: 'Segmentation',
+        label: 'Segmentation',
+        component: wrappedPanelSegmentation,
+      },
+    ];
+  },
+  getViewportModule({ servicesManager, extensionManager }) {
+    const ExtendedOHIFCornerstoneSEGViewport = props => {
+      return (
+        <OHIFCornerstoneSEGViewport
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          {...props}
+        />
+      );
+    };
+
+    return [
+      { name: 'dicom-seg', component: ExtendedOHIFCornerstoneSEGViewport },
+    ];
+  },
+  /**
+   * 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;
@@ -0,0 +1,292 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { SegmentationGroupTable } from '@ohif/ui';
+import callInputDialog from './callInputDialog';
+
+import { useTranslation } from 'react-i18next';
+import callColorPickerDialog from './callColorPickerDialog';
+
+export default function PanelSegmentation({
+  servicesManager,
+  commandsManager,
+}) {
+  const {
+    SegmentationService,
+    UIDialogService,
+    ViewportGridService,
+    ToolGroupService,
+    CornerstoneViewportService,
+  } = servicesManager.services;
+
+  const { t } = useTranslation('PanelSegmentation');
+  const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
+  const [
+    initialSegmentationConfigurations,
+    setInitialSegmentationConfigurations,
+  ] = useState(SegmentationService.getConfiguration());
+
+  const [segmentations, setSegmentations] = useState(() =>
+    SegmentationService.getSegmentations()
+  );
+
+  const [isMinimized, setIsMinimized] = useState({});
+
+  const onToggleMinimizeSegmentation = useCallback(
+    id => {
+      setIsMinimized(prevState => ({
+        ...prevState,
+        [id]: !prevState[id],
+      }));
+    },
+    [setIsMinimized]
+  );
+
+  // Only expand the last segmentation added to the list and collapse the rest
+  useEffect(() => {
+    const lastSegmentationId = segmentations[segmentations.length - 1]?.id;
+    if (lastSegmentationId) {
+      setIsMinimized(prevState => ({
+        ...prevState,
+        [lastSegmentationId]: false,
+      }));
+    }
+  }, [segmentations, setIsMinimized]);
+
+  useEffect(() => {
+    // ~~ Subscription
+    const added = SegmentationService.EVENTS.SEGMENTATION_ADDED;
+    const updated = SegmentationService.EVENTS.SEGMENTATION_UPDATED;
+    const removed = SegmentationService.EVENTS.SEGMENTATION_REMOVED;
+    const subscriptions = [];
+
+    [added, updated, removed].forEach(evt => {
+      const { unsubscribe } = SegmentationService.subscribe(evt, () => {
+        const segmentations = SegmentationService.getSegmentations();
+        setSegmentations(segmentations);
+      });
+      subscriptions.push(unsubscribe);
+    });
+
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, []);
+
+  const onSegmentationClick = (segmentationId: string) => {
+    SegmentationService.setActiveSegmentationForToolGroup(segmentationId);
+  };
+
+  const onSegmentationDelete = (segmentationId: string) => {
+    SegmentationService.remove(segmentationId);
+  };
+
+  const getToolGroupIds = segmentationId => {
+    const toolGroupIds = SegmentationService.getToolGroupIdsWithSegmentation(
+      segmentationId
+    );
+
+    return toolGroupIds;
+  };
+
+  const onSegmentClick = (segmentationId, segmentIndex) => {
+    SegmentationService.setActiveSegmentForSegmentation(
+      segmentationId,
+      segmentIndex
+    );
+
+    const toolGroupIds = getToolGroupIds(segmentationId);
+
+    toolGroupIds.forEach(toolGroupId => {
+      // const toolGroupId =
+      SegmentationService.setActiveSegmentationForToolGroup(
+        segmentationId,
+        toolGroupId
+      );
+      SegmentationService.jumpToSegmentCenter(
+        segmentationId,
+        segmentIndex,
+        toolGroupId
+      );
+    });
+  };
+
+  const onSegmentEdit = (segmentationId, segmentIndex) => {
+    const segmentation = SegmentationService.getSegmentation(segmentationId);
+
+    const segment = segmentation.segments[segmentIndex];
+    const { label } = segment;
+
+    callInputDialog(UIDialogService, label, (label, actionId) => {
+      if (label === '') {
+        return;
+      }
+
+      SegmentationService.setSegmentLabelForSegmentation(
+        segmentationId,
+        segmentIndex,
+        label
+      );
+    });
+  };
+
+  const onSegmentationEdit = segmentationId => {
+    const segmentation = SegmentationService.getSegmentation(segmentationId);
+    const { label } = segmentation;
+
+    callInputDialog(UIDialogService, label, (label, actionId) => {
+      if (label === '') {
+        return;
+      }
+
+      SegmentationService.addOrUpdateSegmentation(
+        {
+          id: segmentationId,
+          label,
+        },
+        false, // suppress event
+        true // notYetUpdatedAtSource
+      );
+    });
+  };
+
+  const onSegmentColorClick = (segmentationId, segmentIndex) => {
+    // Todo: Implement color picker later
+    return;
+  };
+
+  const onSegmentDelete = (segmentationId, segmentIndex) => {
+    // SegmentationService.removeSegmentFromSegmentation(
+    //   segmentationId,
+    //   segmentIndex
+    // );
+    console.warn('not implemented yet');
+  };
+
+  const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
+    const segmentation = SegmentationService.getSegmentation(segmentationId);
+    const segmentInfo = segmentation.segments[segmentIndex];
+    const isVisible = !segmentInfo.isVisible;
+    const toolGroupIds = getToolGroupIds(segmentationId);
+
+    // Todo: right now we apply the visibility to all tool groups
+    toolGroupIds.forEach(toolGroupId => {
+      SegmentationService.setSegmentVisibility(
+        segmentationId,
+        segmentIndex,
+        isVisible,
+        toolGroupId
+      );
+    });
+  };
+
+  const onToggleSegmentationVisibility = segmentationId => {
+    SegmentationService.toggleSegmentationVisibility(segmentationId);
+  };
+
+  const setSegmentationConfiguration = useCallback(
+    (segmentationId, key, value) => {
+      SegmentationService.setConfiguration({
+        segmentationId,
+        [key]: value,
+      });
+    },
+    [SegmentationService]
+  );
+
+  return (
+    <div className="flex flex-col justify-between mt-1">
+      {/* show segmentation table */}
+      {segmentations?.length ? (
+        <SegmentationGroupTable
+          title={t('Segmentations')}
+          showAddSegmentation={false}
+          segmentations={segmentations}
+          isMinimized={isMinimized}
+          activeSegmentationId={selectedSegmentationId}
+          onSegmentationClick={onSegmentationClick}
+          onSegmentationDelete={onSegmentationDelete}
+          onSegmentationEdit={onSegmentationEdit}
+          onSegmentClick={onSegmentClick}
+          onSegmentEdit={onSegmentEdit}
+          onSegmentColorClick={onSegmentColorClick}
+          onSegmentDelete={onSegmentDelete}
+          onToggleSegmentVisibility={onToggleSegmentVisibility}
+          onToggleSegmentationVisibility={onToggleSegmentationVisibility}
+          onToggleMinimizeSegmentation={onToggleMinimizeSegmentation}
+          segmentationConfig={{
+            initialConfig: initialSegmentationConfigurations,
+            usePercentage: true,
+          }}
+          setRenderOutline={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderOutline',
+              value
+            )
+          }
+          setOutlineOpacityActive={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'outlineOpacity',
+              value
+            )
+          }
+          setRenderFill={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderFill',
+              value
+            )
+          }
+          setRenderInactiveSegmentations={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'renderInactiveSegmentations',
+              value
+            )
+          }
+          setOutlineWidthActive={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'outlineWidthActive',
+              value
+            )
+          }
+          setFillAlpha={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'fillAlpha',
+              value
+            )
+          }
+          setFillAlphaInactive={value =>
+            setSegmentationConfiguration(
+              selectedSegmentationId,
+              'fillAlphaInactive',
+              value
+            )
+          }
+        />
+      ) : null}
+    </div>
+  );
+}
+
+PanelSegmentation.propTypes = {
+  commandsManager: PropTypes.shape({
+    runCommand: PropTypes.func.isRequired,
+  }),
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      SegmentationService: PropTypes.shape({
+        getSegmentation: PropTypes.func.isRequired,
+        getSegmentations: PropTypes.func.isRequired,
+        toggleSegmentationVisibility: PropTypes.func.isRequired,
+        subscribe: PropTypes.func.isRequired,
+        EVENTS: PropTypes.object.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Input, Dialog } from '@ohif/ui';
+
+function callInputDialog(UIDialogService, label, callback) {
+  const dialogId = 'enter-segment-label';
+
+  const onSubmitHandler = ({ action, value }) => {
+    switch (action.id) {
+      case 'save':
+        callback(value.label, action.id);
+        break;
+      case 'cancel':
+        callback('', action.id);
+        break;
+    }
+    UIDialogService.dismiss({ id: dialogId });
+  };
+
+  if (UIDialogService) {
+    UIDialogService.create({
+      id: dialogId,
+      centralize: true,
+      isDraggable: false,
+      showOverlay: true,
+      content: Dialog,
+      contentProps: {
+        title: 'Enter Segment Label',
+        value: { label },
+        noCloseButton: true,
+        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'primary' },
+          { id: 'save', text: 'Confirm', type: 'secondary' },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          return (
+            <div className="p-4 bg-primary-dark">
+              <Input
+                autoFocus
+                className="mt-2 bg-black border-primary-main"
+                type="text"
+                containerClassName="mr-2"
+                value={value.label}
+                onChange={event => {
+                  event.persist();
+                  setValue(value => ({ ...value, label: event.target.value }));
+                }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    onSubmitHandler({ value, action: { id: 'save' } });
+                  }
+                }}
+              />
+            </div>
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callInputDialog;
@@ -0,0 +1,35 @@
+import React, { useReducer } from 'react';
+
+// Todo: use defaults in cs3d
+const initialState = {
+  renderOutline: true,
+  renderFill: true,
+  outlineOpacity: 0.9,
+  outlineWidth: 3,
+  fillOpacity: 0.9,
+  fillOpacityInactive: 0.8,
+  renderInactiveSegmentations: true,
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'RENDER_OUTLINE':
+      return { ...state, renderOutline: action.payload.value };
+    case 'RENDER_FILL':
+      return { ...state, renderFill: action.payload.value };
+    case 'SET_OUTLINE_OPACITY':
+      return { ...state, outlineOpacity: action.payload.value };
+    case 'SET_OUTLINE_WIDTH':
+      return { ...state, outlineWidth: action.payload.value };
+    case 'SET_FILL_OPACITY':
+      return { ...state, fillOpacity: action.payload.value };
+    case 'SET_FILL_OPACITY_INACTIVE':
+      return { ...state, fillOpacityInactive: action.payload.value };
+    case 'RENDER_INACTIVE_SEGMENTATIONS':
+      return { ...state, renderInactiveSegmentations: action.payload.value };
+    default:
+      return state;
+  }
+};
+
+export { initialState, reducer };
@@ -0,0 +1,71 @@
+async function _hydrateSEGDisplaySet({
+  segDisplaySet,
+  viewportIndex,
+  toolGroupId,
+  servicesManager,
+}) {
+  const {
+    SegmentationService,
+    HangingProtocolService,
+    ViewportGridService,
+  } = servicesManager.services;
+
+  const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
+
+  let segmentationId = null;
+
+  // We need the hydration to notify panels about the new segmentation added
+  const suppressEvents = false;
+
+  segmentationId = await SegmentationService.createSegmentationForSEGDisplaySet(
+    segDisplaySet,
+    segmentationId,
+    suppressEvents
+  );
+
+  SegmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
+
+  const { viewports } = ViewportGridService.getState();
+
+  const updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+    viewportIndex,
+    displaySetInstanceUID
+  );
+
+  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,
+      segDisplaySet.displaySetInstanceUID
+    );
+
+    if (shouldDisplaySeg) {
+      ViewportGridService.setDisplaySetsForViewport({
+        viewportIndex: index,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          viewportType: 'volume',
+          toolGroupId,
+          initialImageOptions: {
+            preset: 'middle',
+          },
+        },
+      });
+    }
+  });
+
+  return true;
+}
+
+export default _hydrateSEGDisplaySet;
@@ -0,0 +1,34 @@
+function createSEGToolGroupAndAddTools(
+  ToolGroupService,
+  toolGroupId,
+  extensionManager
+) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  const tools = {
+    active: [
+      {
+        toolName: toolNames.WindowLevel,
+        bindings: [{ mouseButton: Enums.MouseBindings.Primary }],
+      },
+      {
+        toolName: toolNames.Pan,
+        bindings: [{ mouseButton: Enums.MouseBindings.Auxiliary }],
+      },
+      {
+        toolName: toolNames.Zoom,
+        bindings: [{ mouseButton: Enums.MouseBindings.Secondary }],
+      },
+      { toolName: toolNames.StackScrollMouseWheel, bindings: [] },
+    ],
+    enabled: [{ toolName: toolNames.SegmentationDisplay }],
+  };
+
+  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
+}
+
+export default createSEGToolGroupAndAddTools;
@@ -0,0 +1,70 @@
+import hydrateSEGDisplaySet from './_hydrateSEG';
+
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5,
+};
+
+function promptHydrateSEG({
+  servicesManager,
+  segDisplaySet,
+  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 hydrateSEGDisplaySet({
+        segDisplaySet,
+        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 promptHydrateSEG;
@@ -0,0 +1,424 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import OHIF, { utils } from '@ohif/core';
+import {
+  Notification,
+  ViewportActionBar,
+  useViewportGrid,
+  useViewportDialog,
+  LoadingIndicatorProgress,
+} from '@ohif/ui';
+
+import { useTranslation } from 'react-i18next';
+
+import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
+import _hydrateSEGDisplaySet from '../utils/_hydrateSEG';
+import promptHydrateSEG from '../utils/promptHydrateSEG';
+import _getStatusComponent from './_getStatusComponent';
+
+const { formatDate } = utils;
+const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';
+
+function OHIFCornerstoneSEGViewport(props) {
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    viewportIndex,
+    viewportLabel,
+    servicesManager,
+    extensionManager,
+  } = props;
+
+  const { t } = useTranslation('SEGViewport');
+
+  const {
+    DisplaySetService,
+    ToolGroupService,
+    SegmentationService,
+  } = servicesManager.services;
+
+  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
+
+  // SEG viewport will always have a single display set
+  if (displaySets.length > 1) {
+    throw new Error('SEG viewport should only have a single display set');
+  }
+
+  const segDisplaySet = 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 SEG is opened and segments are loaded into the
+  // segmentation panel, and SEG is also rendered on any viewport that is in the
+  // same frameOfReferenceUID as the referencedSeriesUID of the SEG. However,
+  // loading basically means SEG loading over network and bit unpacking of the
+  // SEG data.
+  const [isHydrated, setIsHydrated] = useState(segDisplaySet.isHydrated);
+  const [segIsLoading, setSegIsLoading] = useState(!segDisplaySet.isLoaded);
+  const [element, setElement] = useState(null);
+  const [processingProgress, setProcessingProgress] = useState({
+    segmentIndex: 1,
+    totalSegments: null,
+  });
+
+  // refs
+  const referencedDisplaySetRef = useRef(null);
+
+  const { viewports, activeViewportIndex } = viewportGrid;
+
+  const referencedDisplaySet = segDisplaySet.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, segDisplaySet]}
+        viewportOptions={{
+          viewportType: 'volume',
+          toolGroupId: toolGroupId,
+          orientation: viewportOptions.orientation,
+        }}
+        onElementEnabled={onElementEnabled}
+        onElementDisabled={onElementDisabled}
+        // initialImageIndex={initialImageIndex}
+      ></Component>
+    );
+  }, [viewportIndex, segDisplaySet, toolGroupId]);
+
+  const onSegmentChange = useCallback(
+    direction => {
+      direction = direction === 'left' ? -1 : 1;
+      const segmentationId = segDisplaySet.displaySetInstanceUID;
+      const segmentation = SegmentationService.getSegmentation(segmentationId);
+
+      const { segments } = segmentation;
+
+      const numberOfSegments = Object.keys(segments).length;
+
+      let newSelectedSegmentIndex = selectedSegment + direction;
+
+      if (newSelectedSegmentIndex > numberOfSegments - 1) {
+        newSelectedSegmentIndex = 1;
+      } else if (newSelectedSegmentIndex === 0) {
+        newSelectedSegmentIndex = numberOfSegments - 1;
+      }
+
+      SegmentationService.jumpToSegmentCenter(
+        segmentationId,
+        newSelectedSegmentIndex,
+        toolGroupId
+      );
+      setSelectedSegment(newSelectedSegmentIndex);
+    },
+    [selectedSegment]
+  );
+
+  useEffect(() => {
+    if (segIsLoading) {
+      return;
+    }
+
+    promptHydrateSEG({
+      servicesManager,
+      viewportIndex,
+      segDisplaySet,
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
+    });
+  }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);
+
+  useEffect(() => {
+    const { unsubscribe } = SegmentationService.subscribe(
+      SegmentationService.EVENTS.SEGMENTATION_PIXEL_DATA_CREATED,
+      evt => {
+        if (
+          evt.segDisplaySet.displaySetInstanceUID ===
+          segDisplaySet.displaySetInstanceUID
+        ) {
+          setSegIsLoading(false);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [segDisplaySet]);
+
+  useEffect(() => {
+    const { unsubscribe } = SegmentationService.subscribe(
+      SegmentationService.EVENTS.SEGMENT_PIXEL_DATA_CREATED,
+      ({ segmentIndex, numSegments }) => {
+        setProcessingProgress({
+          segmentIndex,
+          totalSegments: numSegments,
+        });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [segDisplaySet]);
+
+  /**
+   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 = createSEGToolGroupAndAddTools(
+      ToolGroupService,
+      toolGroupId,
+      extensionManager
+    );
+
+    setToolGroupCreated(true);
+
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      SegmentationService.removeSegmentationRepresentationFromToolGroup(
+        toolGroupId
+      );
+
+      ToolGroupService.destroyToolGroup(toolGroupId);
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsHydrated(segDisplaySet.isHydrated);
+
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      SegmentationService.removeSegmentationRepresentationFromToolGroup(
+        toolGroupId
+      );
+      referencedDisplaySetRef.current = null;
+    };
+  }, [segDisplaySet]);
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  let childrenWithProps = null;
+
+  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 onPillClick = () => {
+    promptHydrateSEG({
+      servicesManager,
+      viewportIndex,
+      segDisplaySet,
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
+    });
+  };
+
+  return (
+    <>
+      <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
+        onArrowsClick={onSegmentChange}
+        getStatusComponent={() => {
+          return _getStatusComponent({
+            isHydrated,
+            onPillClick,
+          });
+        }}
+        studyData={{
+          label: viewportLabel,
+          useAltStyling: true,
+          studyDate: formatDate(StudyDate),
+          currentSeries: SeriesNumber,
+          seriesDescription: `SEG Viewport ${SeriesDescription}`,
+          patientInformation: {
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
+            patientSex: PatientSex || '',
+            patientAge: PatientAge || '',
+            MRN: PatientID || '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              SpacingBetweenSlices !== undefined
+                ? `${SpacingBetweenSlices.toFixed(2)}mm`
+                : '',
+            scanner: ManufacturerModelName || '',
+          },
+        }}
+      />
+
+      <div className="relative flex flex-row w-full h-full overflow-hidden">
+        {segIsLoading && (
+          <LoadingIndicatorProgress
+            className="w-full h-full"
+            progress={
+              processingProgress.totalSegments !== null
+                ? ((processingProgress.segmentIndex + 1) /
+                    processingProgress.totalSegments) *
+                  100
+                : null
+            }
+            textBlock={
+              !processingProgress.totalSegments ? (
+                <span className="text-white text-sm">Loading SEG ...</span>
+              ) : (
+                <span className="text-white text-sm flex items-baseline space-x-2">
+                  <div>Loading Segment</div>
+                  <div className="w-3">{`${processingProgress.segmentIndex}`}</div>
+                  <div>/</div>
+                  <div>{`${processingProgress.totalSegments}`}</div>
+                </span>
+              )
+            }
+          />
+        )}
+        {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>
+    </>
+  );
+}
+
+OHIFCornerstoneSEGViewport.propTypes = {
+  displaySets: PropTypes.arrayOf(PropTypes.object),
+  viewportIndex: PropTypes.number.isRequired,
+  dataSource: PropTypes.object,
+  children: PropTypes.node,
+  customProps: PropTypes.object,
+};
+
+OHIFCornerstoneSEGViewport.defaultProps = {
+  customProps: {},
+};
+
+function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
+  const image0 = referencedDisplaySet.images[0];
+  const referencedDisplaySetMetadata = {
+    PatientID: image0.PatientID,
+    PatientName: image0.PatientName,
+    PatientSex: image0.PatientSex,
+    PatientAge: image0.PatientAge,
+    SliceThickness: image0.SliceThickness,
+    StudyDate: image0.StudyDate,
+    SeriesDescription: image0.SeriesDescription,
+    SeriesInstanceUID: image0.SeriesInstanceUID,
+    SeriesNumber: image0.SeriesNumber,
+    ManufacturerModelName: image0.ManufacturerModelName,
+    SpacingBetweenSlices: image0.SpacingBetweenSlices,
+  };
+
+  return referencedDisplaySetMetadata;
+}
+
+export default OHIFCornerstoneSEGViewport;
@@ -0,0 +1,92 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon, Tooltip } from '@ohif/ui';
+
+import _hydrateSEGDisplaySet from '../utils/_hydrateSEG';
+
+export default function _getStatusComponent({ isHydrated, onPillClick }) {
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => (
+        <div
+          className="flex items-center justify-center -mr-1 rounded-full"
+          style={{
+            width: '18px',
+            height: '18px',
+            backgroundColor: '#98e5c1',
+            border: 'solid 1.5px #000000',
+          }}
+        >
+          <Icon
+            name="exclamation"
+            style={{ color: '#000', width: '12px', height: '12px' }}
+          />
+        </div>
+      );
+
+      ToolTipMessage = () => (
+        <div>This Segmentation is loaded in the segmentation panel</div>
+      );
+      break;
+    case false:
+      StatusIcon = () => (
+        <div
+          className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
+          style={{
+            width: '18px',
+            height: '18px',
+            border: 'solid 1.5px #000000',
+          }}
+        >
+          <Icon
+            name="arrow-left"
+            style={{ color: '#000', width: '14px', height: '14px' }}
+          />
+        </div>
+      );
+
+      ToolTipMessage = () => <div>Click to load segmentation.</div>;
+  }
+
+  const StatusPill = () => (
+    <div
+      className={classNames(
+        'group relative flex items-center justify-center px-8 rounded-full cursor-default bg-customgreen-100',
+        {
+          'hover:bg-customblue-100': !isHydrated,
+          'cursor-pointer': !isHydrated,
+        }
+      )}
+      style={{
+        height: '24px',
+        width: '55px',
+      }}
+      onClick={() => {
+        if (!isHydrated) {
+          if (onPillClick) {
+            onPillClick();
+          }
+        }
+      }}
+    >
+      <div className="pr-1 text-base font-medium leading-none text-black">
+        SEG
+      </div>
+      <StatusIcon />
+    </div>
+  );
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+          <StatusPill />
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusPill />}
+    </>
+  );
+}