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>

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

@@ -79,6 +79,7 @@ function _getDisplaySetsFromSeries(
     SeriesNumber,
     SeriesDate,
     ConceptNameCodeSequence,
+    SOPClassUID,
   } = instance;
 
   if (
@@ -103,6 +104,7 @@ function _getDisplaySetsFromSeries(
     SeriesInstanceUID,
     StudyInstanceUID,
     SOPClassHandlerId,
+    SOPClassUID,
     referencedImages: null,
     measurements: null,
     isDerivedDisplaySet: true,

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -1,13 +1,18 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import OHIF, { utils } from '@ohif/core';
+import { useTranslation } from 'react-i18next';
 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';
+
 import {
   Notification,
   ViewportActionBar,
   useViewportGrid,
   useViewportDialog,
+  Tooltip,
+  Icon,
 } from '@ohif/ui';
+import classNames from 'classnames';
 
 const { formatDate } = utils;
 
@@ -27,6 +32,8 @@ function OHIFCornerstoneSRViewport(props) {
     extensionManager,
   } = props;
 
+  const { t } = useTranslation('SRViewport');
+
   const {
     DisplaySetService,
     CornerstoneViewportService,
@@ -318,8 +325,6 @@ function OHIFCornerstoneSRViewport(props) {
     });
   }
 
-  const { Modality } = srDisplaySet;
-
   const {
     PatientID,
     PatientName,
@@ -341,24 +346,23 @@ function OHIFCornerstoneSRViewport(props) {
           evt.stopPropagation();
           evt.preventDefault();
         }}
-        onPillClick={() => {
-          sendTrackedMeasurementsEvent('RESTORE_PROMPT_HYDRATE_SR', {
-            displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
+        onArrowsClick={onMeasurementChange}
+        getStatusComponent={() =>
+          _getStatusComponent({
+            srDisplaySet,
             viewportIndex,
-          });
-        }}
-        onSeriesChange={onMeasurementChange}
+            isTracked: false,
+            isRehydratable: srDisplaySet.isRehydratable,
+            isLocked,
+            sendTrackedMeasurementsEvent,
+          })
+        }
         studyData={{
           label: viewportLabel,
           useAltStyling: true,
-          isTracked: false,
-          isLocked,
-          isRehydratable: srDisplaySet.isRehydratable,
-          isHydrated,
           studyDate: formatDate(StudyDate),
           currentSeries: SeriesNumber,
           seriesDescription: SeriesDescription,
-          modality: Modality,
           patientInformation: {
             patientName: PatientName
               ? OHIF.utils.formatPN(PatientName.Alphabetic)
@@ -439,6 +443,139 @@ async function _getViewportReferencedDisplaySetData(
   return { referencedDisplaySetMetadata, referencedDisplaySet };
 }
 
+function _getStatusComponent({
+  srDisplaySet,
+  viewportIndex,
+  isRehydratable,
+  isLocked,
+  sendTrackedMeasurementsEvent,
+}) {
+  const onPillClick = () => {
+    sendTrackedMeasurementsEvent('RESTORE_PROMPT_HYDRATE_SR', {
+      displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
+      viewportIndex,
+    });
+  };
+
+  // 1 - Incompatible
+  // 2 - Locked
+  // 3 - Rehydratable / Open
+  const state =
+    isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+
+  switch (state) {
+    case 1:
+      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 structured report is not compatible
+          <br />
+          with this application.
+        </div>
+      );
+      break;
+    case 2:
+      StatusIcon = () => (
+        <div
+          className="flex items-center justify-center -mr-1 bg-black rounded-full"
+          style={{
+            width: '18px',
+            height: '18px',
+          }}
+        >
+          <Icon
+            name="lock"
+            style={{ color: '#05D97C', width: '8px', height: '11px' }}
+          />
+        </div>
+      );
+
+      ToolTipMessage = () => (
+        <div>
+          This structured report is currently read-only
+          <br />
+          because you are tracking measurements in
+          <br />
+          another viewport.
+        </div>
+      );
+      break;
+    case 3:
+      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 restore measurements.</div>;
+  }
+
+  const StatusPill = () => (
+    <div
+      className={classNames(
+        'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
+        {
+          'hover:bg-customblue-100': state === 3,
+          'cursor-pointer': state === 3,
+        }
+      )}
+      style={{
+        height: '24px',
+        width: '55px',
+      }}
+      onClick={() => {
+        if (state === 3) {
+          if (onPillClick) {
+            onPillClick();
+          }
+        }
+      }}
+    >
+      <span className="pr-1 text-lg font-bold leading-none text-black">SR</span>
+      <StatusIcon />
+    </div>
+  );
+
+  return (
+    <>
+      {ToolTipMessage && (
+        <Tooltip content={<ToolTipMessage />} position="bottom-left">
+          <StatusPill />
+        </Tooltip>
+      )}
+      {!ToolTipMessage && <StatusPill />}
+    </>
+  );
+}
+
 // function _onDoubleClick() {
 //   const cancelActiveManipulatorsForElement = cornerstoneTools.getModule(
 //     'manipulatorState'