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/measurement-tracking/src/getPanelModule.tsx

@@ -26,7 +26,7 @@ function getPanelModule({
     },
     {
       name: 'trackedMeasurements',
-      iconName: 'list-bullets',
+      iconName: 'tab-linear',
       iconLabel: 'Measure',
       label: 'Measurements',
       component: PanelMeasurementTableTracking.bind(null, {

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -251,7 +251,6 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
         )}
         <MeasurementTable
           title="Measurements"
-          amount={displayMeasurementsWithoutFindings.length}
           data={displayMeasurementsWithoutFindings}
           onClick={jumpToImage}
           onEdit={onMeasurementItemEditHandler}
@@ -259,7 +258,6 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
         {additionalFindings.length !== 0 && (
           <MeasurementTable
             title="Additional Findings"
-            amount={additionalFindings.length}
             data={additionalFindings}
             onClick={jumpToImage}
             onEdit={onMeasurementItemEditHandler}

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { utils } from '@ohif/core';
+import { HangingProtocolService, utils } from '@ohif/core';
 import {
   StudyBrowser,
   useImageViewer,
@@ -16,15 +16,20 @@ const { formatDate } = utils;
  * @param {*} param0
  */
 function PanelStudyBrowserTracking({
-  MeasurementService,
-  DisplaySetService,
-  UIDialogService,
-  UINotificationService,
+  servicesManager,
   getImageSrc,
   getStudiesForPatientByStudyInstanceUID,
   requestDisplaySetCreationForStudy,
   dataSource,
 }) {
+  const {
+    MeasurementService,
+    DisplaySetService,
+    UIDialogService,
+    HangingProtocolService,
+    UINotificationService,
+  } = servicesManager.services;
+
   // Normally you nest the components so the tree isn't so deep, and the data
   // doesn't have to have such an intense shape. This works well enough for now.
   // Tabs --> Studies --> DisplaySets --> Thumbnails
@@ -47,10 +52,25 @@ function PanelStudyBrowserTracking({
   const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
 
   const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
-    viewportGridService.setDisplaySetsForViewport({
-      viewportIndex: activeViewportIndex,
-      displaySetInstanceUIDs: [displaySetInstanceUID],
-    });
+    let updatedViewports = [];
+    const viewportIndex = activeViewportIndex;
+    try {
+      updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+        viewportIndex,
+        displaySetInstanceUID
+      );
+    } catch (error) {
+      console.warn(error);
+      UINotificationService.show({
+        title: 'Thumbnail Double Click',
+        message:
+          'The selected display sets could not be added to the viewport due to a mismatch in the Hanging Protocol rules.',
+        type: 'info',
+        duration: 3000,
+      });
+    }
+
+    viewportGridService.setDisplaySetsForViewports(updatedViewports);
   };
 
   const activeViewportDisplaySetInstanceUIDs =
@@ -353,16 +373,7 @@ function PanelStudyBrowserTracking({
 }
 
 PanelStudyBrowserTracking.propTypes = {
-  MeasurementService: PropTypes.shape({
-    subscribe: PropTypes.func.isRequired,
-    EVENTS: PropTypes.object.isRequired,
-  }).isRequired,
-  DisplaySetService: PropTypes.shape({
-    EVENTS: PropTypes.object.isRequired,
-    activeDisplaySets: PropTypes.arrayOf(PropTypes.object).isRequired,
-    getDisplaySetByUID: PropTypes.func.isRequired,
-    subscribe: PropTypes.func.isRequired,
-  }).isRequired,
+  servicesManager: PropTypes.object.isRequired,
   dataSource: PropTypes.shape({
     getImageIdsForDisplaySet: PropTypes.func.isRequired,
   }).isRequired,
@@ -542,8 +553,6 @@ function _getComponentType(Modality) {
   return 'thumbnailTracked';
 }
 
-const _viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
-
 /**
  *
  * @param {string[]} primaryStudyInstanceUIDs

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/index.tsx

@@ -45,10 +45,7 @@ function WrappedPanelStudyBrowserTracking({
 
   return (
     <PanelStudyBrowserTracking
-      MeasurementService={servicesManager.services.MeasurementService}
-      DisplaySetService={servicesManager.services.DisplaySetService}
-      UIDialogService={servicesManager.services.UIDialogService}
-      UINotificationService={servicesManager.services.UINotificationService}
+      servicesManager={servicesManager}
       dataSource={dataSource}
       getImageSrc={_getImageSrcFromImageId}
       getStudiesForPatientByStudyInstanceUID={

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx

@@ -8,8 +8,12 @@ import {
   useCine,
   useViewportGrid,
   useViewportDialog,
+  Tooltip,
+  Icon,
 } from '@ohif/ui';
 
+import { useTranslation } from 'react-i18next';
+
 import { eventTarget, Enums } from '@cornerstonejs/core';
 import { annotation } from '@cornerstonejs/tools';
 import { useTrackedMeasurements } from './../getContextModule';
@@ -27,6 +31,8 @@ function TrackedCornerstoneViewport(props) {
     commandsManager,
   } = props;
 
+  const { t } = useTranslation('TrackedViewport');
+
   const {
     MeasurementService,
     CornerstoneViewportService,
@@ -137,9 +143,11 @@ function TrackedCornerstoneViewport(props) {
     cineHandler();
 
     return () => {
-      cineService.stopClip(element);
+      if (element && cines?.[viewportIndex]?.isPlaying) {
+        cineService.stopClip(element);
+      }
     };
-  }, [cines, viewportIndex, cineService, element]);
+  }, [cines, viewportIndex, cineService, element, cineHandler]);
 
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
     setIsTracked(!isTracked);
@@ -193,16 +201,14 @@ function TrackedCornerstoneViewport(props) {
           evt.stopPropagation();
           evt.preventDefault();
         }}
-        onSeriesChange={direction => switchMeasurement(direction)}
+        useAltStyling={isTracked}
+        onArrowsClick={direction => switchMeasurement(direction)}
+        getStatusComponent={() => _getStatusComponent(isTracked)}
         studyData={{
           label: viewportLabel,
-          isTracked,
-          isLocked: false,
-          isRehydratable: false,
           studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
           currentSeries: SeriesNumber, // TODO - switch entire currentSeries to be UID based or actual position based
           seriesDescription: SeriesDescription,
-          modality: Modality,
           patientInformation: {
             patientName: PatientName
               ? OHIF.utils.formatPN(PatientName.Alphabetic)
@@ -322,4 +328,43 @@ function _getNextMeasurementUID(
   return newTrackedMeasurementId;
 }
 
+function _getStatusComponent(isTracked) {
+  const trackedIcon = isTracked ? 'tracked' : 'dotted-circle';
+
+  return (
+    <div className="relative">
+      <Tooltip
+        position="bottom-left"
+        content={
+          <div className="flex py-2">
+            <div className="flex pt-1">
+              <Icon name="info-link" className="w-4 text-primary-main" />
+            </div>
+            <div className="flex ml-4">
+              <span className="text-base text-common-light">
+                {isTracked ? (
+                  <>
+                    Series is
+                    <span className="font-bold text-white"> tracked</span> and
+                    can be viewed <br /> in the measurement panel
+                  </>
+                ) : (
+                  <>
+                    Measurements for
+                    <span className="font-bold text-white"> untracked </span>
+                    series <br /> will not be shown in the <br /> measurements
+                    panel
+                  </>
+                )}
+              </span>
+            </div>
+          </div>
+        }
+      >
+        <Icon name={trackedIcon} className="w-6 text-primary-light" />
+      </Tooltip>
+    </div>
+  );
+}
+
 export default TrackedCornerstoneViewport;