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/tmtv/src/Panels/PanelPetSUV.tsx

@@ -143,7 +143,6 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
       ptDisplaySet.displaySetInstanceUID
     );
   }
-
   return (
     <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
       {

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdSegmentation.tsx

@@ -94,7 +94,7 @@ export default function PanelRoiThresholdSegmentation({
       selectedSegmentationId
     );
 
-    const data = {
+    const cachedStats = {
       lesionStats,
       suvPeak,
       lesionGlyoclysisStats,
@@ -102,11 +102,10 @@ export default function PanelRoiThresholdSegmentation({
 
     const notYetUpdatedAtSource = true;
     SegmentationService.addOrUpdateSegmentation(
-      selectedSegmentationId,
       {
         ...segmentation,
-        data: Object.assign(segmentation.data, data),
-        text: [`SUV Peak: ${suvPeak.suvPeak.toFixed(2)}`],
+        ...Object.assign(segmentation.cachedStats, cachedStats),
+        displayText: [`SUV Peak: ${suvPeak.suvPeak.toFixed(2)}`],
       },
       notYetUpdatedAtSource
     );
@@ -160,23 +159,6 @@ export default function PanelRoiThresholdSegmentation({
     };
   }, []);
 
-  /**
-   * Toggle visibility of the segmentation
-   */
-  useEffect(() => {
-    const subscription = SegmentationService.subscribe(
-      SegmentationService.EVENTS.SEGMENTATION_VISIBILITY_CHANGED,
-      ({ segmentation }) => {
-        runCommand('toggleSegmentationVisibility', {
-          segmentationId: segmentation.id,
-        });
-      }
-    );
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [SegmentationService]);
-
   /**
    * Whenever the segmentations change, update the TMTV calculations
    */
@@ -189,7 +171,7 @@ export default function PanelRoiThresholdSegmentation({
   }, [segmentations, selectedSegmentationId]);
 
   return (
-    <div className="flex flex-col justify-between h-full">
+    <div className="flex flex-col">
       <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
         <div className="flex mx-4 my-4 mb-4 space-x-4">
           <Button
@@ -203,17 +185,10 @@ export default function PanelRoiThresholdSegmentation({
                 });
               });
             }}
-            className={classnames(
-              'text-xs text-white border-b border-transparent'
-            )}
           >
             {labelmapLoading ? 'loading ...' : 'New Label'}
           </Button>
-          <Button
-            color="primary"
-            onClick={handleROIThresholding}
-            className="text-xs text-white border-b border-transparent "
-          >
+          <Button color="primary" onClick={handleROIThresholding}>
             Run
           </Button>
         </div>
@@ -239,7 +214,6 @@ export default function PanelRoiThresholdSegmentation({
           {segmentations?.length ? (
             <SegmentationTable
               title={t('Segmentations')}
-              amount={segmentations.length}
               segmentations={segmentations}
               activeSegmentationId={selectedSegmentationId}
               onClick={id => {
@@ -249,10 +223,12 @@ export default function PanelRoiThresholdSegmentation({
                 setSelectedSegmentationId(id);
               }}
               onToggleVisibility={id => {
-                SegmentationService.toggleSegmentationsVisibility([id]);
+                SegmentationService.toggleSegmentationVisibility(id);
               }}
               onToggleVisibilityAll={ids => {
-                SegmentationService.toggleSegmentationsVisibility(ids);
+                ids.map(id => {
+                  SegmentationService.toggleSegmentationVisibility(id);
+                });
               }}
               onDelete={id => {
                 SegmentationService.remove(id);
@@ -282,11 +258,11 @@ export default function PanelRoiThresholdSegmentation({
         />
       </div>
       <div
-        className="opacity-50 hover:opacity-80 flex items-center justify-center text-blue-400 mb-4 cursor-pointer"
+        className="opacity-50 hover:opacity-80 flex items-center justify-center text-blue-400 mt-auto cursor-pointer mb-4"
         onClick={() => {
           // navigate to a url in a new tab
           window.open(
-            'https://github.com/OHIF/Viewers/blob/feat/segmentation-service/modes/tmtv/README.md',
+            'https://github.com/OHIF/Viewers/blob/v3-stable/modes/tmtv/README.md',
             '_blank'
           );
         }}
@@ -312,10 +288,9 @@ PanelRoiThresholdSegmentation.propTypes = {
       SegmentationService: PropTypes.shape({
         getSegmentation: PropTypes.func.isRequired,
         getSegmentations: PropTypes.func.isRequired,
-        toggleSegmentationsVisibility: PropTypes.func.isRequired,
+        toggleSegmentationVisibility: PropTypes.func.isRequired,
         subscribe: PropTypes.func.isRequired,
         EVENTS: PropTypes.object.isRequired,
-        VALUE_TYPES: PropTypes.object.isRequired,
       }).isRequired,
     }).isRequired,
   }).isRequired,

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -20,7 +20,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
           <Select
             label={t('Strategy')}
             closeMenuOnSelect={true}
-            className="mr-2 bg-black border-primary-main "
+            className="mr-2 bg-black border-primary-main text-white "
             options={options}
             placeholder={
               options.find(option => option.value === config.strategy)

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx

@@ -10,7 +10,6 @@ function segmentationItemEditHandler({ id, servicesManager }) {
     switch (action.id) {
       case 'save': {
         SegmentationService.addOrUpdateSegmentation(
-          id,
           {
             ...segmentation,
             ...value,