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,

extensions/tmtv/src/commandsModule.js

@@ -12,6 +12,7 @@ import dicomRTAnnotationExport from './utils/dicomRTAnnotationExport/RTStructure
 
 const metadataProvider = classes.MetadataProvider;
 const RECTANGLE_ROI_THRESHOLD_MANUAL = 'RectangleROIStartEndThreshold';
+const LABELMAP = csTools.Enums.SegmentationRepresentations.Labelmap;
 
 const commandsModule = ({
   servicesManager,
@@ -25,6 +26,7 @@ const commandsModule = ({
     HangingProtocolService,
     ToolGroupService,
     CornerstoneViewportService,
+    SegmentationService,
   } = servicesManager.services;
 
   const utilityModule = extensionManager.getModuleEntry(
@@ -43,7 +45,8 @@ const commandsModule = ({
   function _getMatchedViewportsToolGroupIds() {
     const { viewportMatchDetails } = HangingProtocolService.getMatchDetails();
     const toolGroupIds = [];
-    viewportMatchDetails.forEach(({ viewportOptions }) => {
+    viewportMatchDetails.forEach((value, key) => {
+      const { viewportOptions } = value;
       const { toolGroupId } = viewportOptions;
       if (toolGroupIds.indexOf(toolGroupId) === -1) {
         toolGroupIds.push(toolGroupId);
@@ -61,8 +64,8 @@ const commandsModule = ({
       // corrected PT vs the non-attenuation correct PT)
 
       let ptDisplaySet = null;
-      for (const matched of viewportMatchDetails) {
-        const { displaySetsInfo } = matched;
+      for (const [viewportIndex, viewportDetails] of viewportMatchDetails) {
+        const { displaySetsInfo } = viewportDetails;
         const displaySets = displaySetsInfo.map(({ displaySetInstanceUID }) =>
           DisplaySetService.getDisplaySetByUID(displaySetInstanceUID)
         );
@@ -128,22 +131,27 @@ const commandsModule = ({
         return;
       }
 
-      const segmentationId = await commandsManager.runCommand(
-        'createSegmentationForDisplaySet',
-        {
-          displaySetInstanceUID: ptDisplaySet.displaySetInstanceUID,
-        }
+      const segmentationId = await SegmentationService.createSegmentationForDisplaySet(
+        ptDisplaySet.displaySetInstanceUID
       );
 
+      // Add Segmentation to all toolGroupIds in the viewer
       const toolGroupIds = _getMatchedViewportsToolGroupIds();
 
-      const representationType =
-        csTools.Enums.SegmentationRepresentations.Labelmap;
+      const representationType = LABELMAP;
 
       for (const toolGroupId of toolGroupIds) {
-        await commandsManager.runCommand(
-          'addSegmentationRepresentationToToolGroup',
-          { segmentationId, toolGroupId: toolGroupId, representationType }
+        const hydrateSegmentation = true;
+        await SegmentationService.addSegmentationRepresentationToToolGroup(
+          toolGroupId,
+          segmentationId,
+          hydrateSegmentation,
+          representationType
+        );
+
+        SegmentationService.setActiveSegmentationForToolGroup(
+          segmentationId,
+          toolGroupId
         );
       }
 
@@ -153,24 +161,10 @@ const commandsModule = ({
       const toolGroupIds = _getMatchedViewportsToolGroupIds();
 
       toolGroupIds.forEach(toolGroupId => {
-        const segmentationRepresentations = csTools.segmentation.state.getSegmentationRepresentations(
+        SegmentationService.setActiveSegmentationForToolGroup(
+          segmentationId,
           toolGroupId
         );
-
-        if (segmentationRepresentations.length === 0) {
-          return;
-        }
-
-        // Todo: this finds the first segmentation representation that matches the segmentationId
-        // If there are two labelmap representations from the same segmentation, this will not work
-        const representation = segmentationRepresentations.find(
-          representation => representation.segmentationId === segmentationId
-        );
-
-        csTools.segmentation.activeSegmentation.setActiveSegmentationRepresentation(
-          toolGroupId,
-          representation.segmentationRepresentationUID
-        );
       });
     },
     thresholdSegmentationByRectangleROITool: ({ segmentationId, config }) => {
@@ -179,9 +173,7 @@ const commandsModule = ({
       );
 
       const { representationData } = segmentation;
-      const { volumeId: segVolumeId } = representationData[
-        csTools.Enums.SegmentationRepresentations.Labelmap
-      ];
+      const { volumeId: segVolumeId } = representationData[LABELMAP];
 
       const { referencedVolumeId } = cs.cache.getVolume(segVolumeId);
 
@@ -228,36 +220,6 @@ const commandsModule = ({
         configToUse
       );
     },
-    toggleSegmentationVisibility: ({ segmentationId }) => {
-      const toolGroupIds = _getMatchedViewportsToolGroupIds();
-
-      toolGroupIds.forEach(toolGroupId => {
-        const segmentationRepresentations = csTools.segmentation.state.getSegmentationRepresentations(
-          toolGroupId
-        );
-
-        if (segmentationRepresentations.length === 0) {
-          return;
-        }
-
-        // Todo: this finds the first segmentation representation that matches the segmentationId
-        // If there are two labelmap representations from the same segmentation, this will not work
-        const representation = segmentationRepresentations.find(
-          representation => representation.segmentationId === segmentationId
-        );
-
-        const visibility = csTools.segmentation.config.visibility.getSegmentationVisibility(
-          toolGroupId,
-          representation.segmentationRepresentationUID
-        );
-
-        csTools.segmentation.config.visibility.setSegmentationVisibility(
-          toolGroupId,
-          representation.segmentationRepresentationUID,
-          !visibility
-        );
-      });
-    },
     calculateSuvPeak: ({ labelmap }) => {
       const { referencedVolumeId } = labelmap;
 
@@ -326,9 +288,9 @@ const commandsModule = ({
       };
     },
     calculateTMTV: ({ segmentations }) => {
-      const labelmaps = commandsManager.runCommand('getLabelmapVolumes', {
-        segmentations,
-      });
+      const labelmaps = segmentations.map(s =>
+        SegmentationService.getLabelmapVolume(s.id)
+      );
 
       if (!labelmaps.length) {
         return;
@@ -351,9 +313,9 @@ const commandsModule = ({
       createAndDownloadTMTVReport(segReport, additionalReportRows);
     },
     getTotalLesionGlycolysis: ({ segmentations }) => {
-      const labelmapVolumes = commandsManager.runCommand('getLabelmapVolumes', {
-        segmentations,
-      });
+      const labelmapVolumes = segmentations.map(s =>
+        SegmentationService.getLabelmapVolume(s.id)
+      );
 
       let mergedLabelmap;
       // merge labelmap will through an error if labels maps are not the same size
@@ -408,7 +370,6 @@ const commandsModule = ({
         1e-3
       );
     },
-
     setStartSliceForROIThresholdTool: () => {
       const { viewport } = _getActiveViewportsEnabledElement();
       const { focalPoint, viewPlaneNormal } = viewport.getCamera();
@@ -493,7 +454,7 @@ const commandsModule = ({
       let report = {};
 
       for (const segmentation of segmentations) {
-        const { id, label, data } = segmentation;
+        const { id, label, cachedStats: data } = segmentation;
 
         const segReport = { id, label };
 
@@ -513,7 +474,7 @@ const commandsModule = ({
           }
         });
 
-        const labelmapVolume = cornerstone.cache.getVolume(id);
+        const labelmapVolume = SegmentationService.getLabelmapVolume(id);
 
         if (!labelmapVolume) {
           report[id] = segReport;
@@ -523,7 +484,7 @@ const commandsModule = ({
         const referencedVolumeId = labelmapVolume.referencedVolumeId;
         segReport.referencedVolumeId = referencedVolumeId;
 
-        const referencedVolume = cornerstone.cache.getVolume(
+        const referencedVolume = SegmentationService.getLabelmapVolume(
           referencedVolumeId
         );
 
@@ -637,11 +598,6 @@ const commandsModule = ({
       storeContexts: [],
       options: {},
     },
-    toggleSegmentationVisibility: {
-      commandFn: actions.toggleSegmentationVisibility,
-      storeContexts: [],
-      options: {},
-    },
     getTotalLesionGlycolysis: {
       commandFn: actions.getTotalLesionGlycolysis,
       storeContexts: [],

extensions/tmtv/src/getHangingProtocolModule.js

@@ -7,12 +7,6 @@ const ptCT = {
   modifiedDate: '2022-10-04T19:22:08.894Z',
   availableTo: {},
   editableBy: {},
-  toolGroupIds: [
-    'ctToolGroup',
-    'ptToolGroup',
-    'fusionToolGroup',
-    'mipToolGroup',
-  ],
   imageLoadStrategy: 'interleaveTopToBottom', // "default" , "interleaveTopToBottom",  "interleaveCenter"
   protocolMatchingRules: [
     {
@@ -47,6 +41,16 @@ const ptCT = {
           },
           required: true,
         },
+        {
+          weight: 1,
+          attribute: 'isReconstructable',
+          constraint: {
+            equals: {
+              value: true,
+            },
+          },
+          required: true,
+        },
         {
           attribute: 'SeriesDescription',
           constraint: {
@@ -70,6 +74,16 @@ const ptCT = {
           },
           required: true,
         },
+        {
+          weight: 1,
+          attribute: 'isReconstructable',
+          constraint: {
+            equals: {
+              value: true,
+            },
+          },
+          required: true,
+        },
         {
           attribute: 'SeriesDescription',
           constraint: {

extensions/tmtv/src/getPanelModule.tsx

@@ -34,14 +34,14 @@ function getPanelModule({
   return [
     {
       name: 'petSUV',
-      iconName: 'edit-patient',
+      iconName: 'tab-patient-info',
       iconLabel: 'PET SUV',
       label: 'PET SUV',
       component: wrappedPanelPetSuv,
     },
     {
       name: 'ROIThresholdSeg',
-      iconName: 'tool-create-threshold',
+      iconName: 'tab-roi-threshold',
       iconLabel: 'ROI Threshold',
       label: 'ROI Threshold',
       component: wrappedROIThresholdSeg,