feat(segmentation): Enhanced segmentation panel design for TMTV (#3988)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Input, Button } from '@ohif/ui';
+import { PanelSection, Input, Button } from '@ohif/ui';
 import { DicomMetadataStore, ServicesManager } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
 
@@ -126,84 +126,102 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
     }, 0);
   }
   return (
-    <div className="invisible-scrollbar overflow-y-auto overflow-x-hidden">
-      {
-        <div className="flex flex-col">
-          <div className="bg-primary-dark flex flex-col space-y-4 p-4">
-            <Input
-              label={t('Patient Sex')}
-              labelClassName="text-white mb-2"
-              className="mt-1"
-              value={metadata.PatientSex || ''}
-              onChange={e => {
-                handleMetadataChange({
-                  PatientSex: e.target.value,
-                });
-              }}
-            />
-            <Input
-              label={t('Patient Weight (kg)')}
-              labelClassName="text-white mb-2"
-              className="mt-1"
-              value={metadata.PatientWeight || ''}
-              onChange={e => {
-                handleMetadataChange({
-                  PatientWeight: e.target.value,
-                });
-              }}
-            />
-            <Input
-              label={t('Total Dose (bq)')}
-              labelClassName="text-white mb-2"
-              className="mt-1"
-              value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''}
-              onChange={e => {
-                handleMetadataChange({
-                  RadiopharmaceuticalInformationSequence: {
-                    RadionuclideTotalDose: e.target.value,
-                  },
-                });
-              }}
-            />
-            <Input
-              label={t('Half Life (s)')}
-              labelClassName="text-white mb-2"
-              className="mt-1"
-              value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
-              onChange={e => {
-                handleMetadataChange({
-                  RadiopharmaceuticalInformationSequence: {
-                    RadionuclideHalfLife: e.target.value,
-                  },
-                });
-              }}
-            />
-            <Input
-              label={t('Injection Time (s)')}
-              labelClassName="text-white mb-2"
-              className="mt-1"
-              value={
-                metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || ''
-              }
-              onChange={e => {
-                handleMetadataChange({
-                  RadiopharmaceuticalInformationSequence: {
-                    RadiopharmaceuticalStartTime: e.target.value,
-                  },
-                });
-              }}
-            />
-            <Input
-              label={t('Acquisition Time (s)')}
-              labelClassName="text-white mb-2"
-              className="mt-1 mb-2"
-              value={metadata.SeriesTime || ''}
-              onChange={() => {}}
-            />
-            <Button onClick={updateMetadata}>Reload Data</Button>
+    <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
+      <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
+        <PanelSection title={t('Patient Information')}>
+          <div className="flex flex-col">
+            <div className="bg-primary-dark flex flex-col gap-4 p-2">
+              <Input
+                containerClassName={'!flex-row !justify-between items-center'}
+                label={t('Patient Sex')}
+                labelClassName="text-[13px] font-inter text-white"
+                className="!m-0 !h-[26px] !w-[117px]"
+                value={metadata.PatientSex || ''}
+                onChange={e => {
+                  handleMetadataChange({
+                    PatientSex: e.target.value,
+                  });
+                }}
+              />
+              <Input
+                containerClassName={'!flex-row !justify-between items-center'}
+                label={t('Weight')}
+                labelChildren={<span className="text-aqua-pale"> kg</span>}
+                labelClassName="text-[13px] font-inter text-white"
+                className="!m-0 !h-[26px] !w-[117px]"
+                value={metadata.PatientWeight || ''}
+                onChange={e => {
+                  handleMetadataChange({
+                    PatientWeight: e.target.value,
+                  });
+                }}
+              />
+              <Input
+                containerClassName={'!flex-row !justify-between items-center'}
+                label={t('Total Dose')}
+                labelChildren={<span className="text-aqua-pale"> bq</span>}
+                labelClassName="text-[13px] font-inter text-white"
+                className="!m-0 !h-[26px] !w-[117px]"
+                value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''}
+                onChange={e => {
+                  handleMetadataChange({
+                    RadiopharmaceuticalInformationSequence: {
+                      RadionuclideTotalDose: e.target.value,
+                    },
+                  });
+                }}
+              />
+              <Input
+                containerClassName={'!flex-row !justify-between items-center'}
+                label={t('Half Life')}
+                labelChildren={<span className="text-aqua-pale"> s</span>}
+                labelClassName="text-[13px] font-inter text-white"
+                className="!m-0 !h-[26px] !w-[117px]"
+                value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
+                onChange={e => {
+                  handleMetadataChange({
+                    RadiopharmaceuticalInformationSequence: {
+                      RadionuclideHalfLife: e.target.value,
+                    },
+                  });
+                }}
+              />
+              <Input
+                containerClassName={'!flex-row !justify-between items-center'}
+                label={t('Injection Time')}
+                labelChildren={<span className="text-aqua-pale"> s</span>}
+                labelClassName="text-[13px] font-inter text-white"
+                className="!m-0 !h-[26px] !w-[117px]"
+                value={
+                  metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || ''
+                }
+                onChange={e => {
+                  handleMetadataChange({
+                    RadiopharmaceuticalInformationSequence: {
+                      RadiopharmaceuticalStartTime: e.target.value,
+                    },
+                  });
+                }}
+              />
+              <Input
+                containerClassName={'!flex-row !justify-between items-center'}
+                label={t('Acquisition Time')}
+                labelChildren={<span className="text-aqua-pale"> s</span>}
+                labelClassName="text-[13px] font-inter text-white"
+                className="!m-0 !h-[26px] !w-[117px]"
+                value={metadata.SeriesTime || ''}
+                onChange={() => {}}
+              />
+              <Button
+                className="!h-[26px] !w-[115px] self-end !p-0"
+                onClick={updateMetadata}
+              >
+                Reload Data
+              </Button>
+            </div>
           </div>
-        </div>
-      }
+        </PanelSection>
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,287 @@
+import React, { useEffect, useState, useCallback, useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { SegmentationTable, Button, Icon } from '@ohif/ui';
+
+import { useTranslation } from 'react-i18next';
+import segmentationEditHandler from './segmentationEditHandler';
+import ExportReports from './ExportReports';
+import ROIThresholdConfiguration, { ROI_STAT } from './ROIThresholdConfiguration';
+
+const LOWER_CT_THRESHOLD_DEFAULT = -1024;
+const UPPER_CT_THRESHOLD_DEFAULT = 1024;
+const LOWER_PT_THRESHOLD_DEFAULT = 2.5;
+const UPPER_PT_THRESHOLD_DEFAULT = 100;
+const WEIGHT_DEFAULT = 0.41; // a default weight for suv max often used in the literature
+const DEFAULT_STRATEGY = ROI_STAT;
+
+function reducer(state, action) {
+  const { payload } = action;
+  const { strategy, ctLower, ctUpper, ptLower, ptUpper, weight } = payload;
+
+  switch (action.type) {
+    case 'setStrategy':
+      return {
+        ...state,
+        strategy,
+      };
+    case 'setThreshold':
+      return {
+        ...state,
+        ctLower: ctLower ? ctLower : state.ctLower,
+        ctUpper: ctUpper ? ctUpper : state.ctUpper,
+        ptLower: ptLower ? ptLower : state.ptLower,
+        ptUpper: ptUpper ? ptUpper : state.ptUpper,
+      };
+    case 'setWeight':
+      return {
+        ...state,
+        weight,
+      };
+    default:
+      return state;
+  }
+}
+
+export default function LegacyPanelRoiThresholdSegmentation({ servicesManager, commandsManager }) {
+  const { segmentationService } = servicesManager.services;
+
+  const { t } = useTranslation('PanelSUV');
+  const [showConfig, setShowConfig] = useState(false);
+  const [labelmapLoading, setLabelmapLoading] = useState(false);
+  const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
+  const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
+
+  const [config, dispatch] = useReducer(reducer, {
+    strategy: DEFAULT_STRATEGY,
+    ctLower: LOWER_CT_THRESHOLD_DEFAULT,
+    ctUpper: UPPER_CT_THRESHOLD_DEFAULT,
+    ptLower: LOWER_PT_THRESHOLD_DEFAULT,
+    ptUpper: UPPER_PT_THRESHOLD_DEFAULT,
+    weight: WEIGHT_DEFAULT,
+  });
+
+  const [tmtvValue, setTmtvValue] = useState(null);
+
+  const runCommand = useCallback(
+    (commandName, commandOptions = {}) => {
+      return commandsManager.runCommand(commandName, commandOptions);
+    },
+    [commandsManager]
+  );
+
+  const handleTMTVCalculation = useCallback(() => {
+    const tmtv = runCommand('calculateTMTV', { segmentations });
+
+    if (tmtv !== undefined) {
+      setTmtvValue(tmtv.toFixed(2));
+    }
+  }, [segmentations, runCommand]);
+
+  const handleROIThresholding = useCallback(() => {
+    const labelmap = runCommand('thresholdSegmentationByRectangleROITool', {
+      segmentationId: selectedSegmentationId,
+      config,
+    });
+
+    const lesionStats = runCommand('getLesionStats', { labelmap });
+    const suvPeak = runCommand('calculateSuvPeak', { labelmap });
+    const lesionGlyoclysisStats = lesionStats.volume * lesionStats.meanValue;
+
+    // update segDetails with the suv peak for the active segmentation
+    const segmentation = segmentationService.getSegmentation(selectedSegmentationId);
+
+    const cachedStats = {
+      lesionStats,
+      suvPeak,
+      lesionGlyoclysisStats,
+    };
+
+    const notYetUpdatedAtSource = true;
+    segmentationService.addOrUpdateSegmentation(
+      {
+        ...segmentation,
+        ...Object.assign(segmentation.cachedStats, cachedStats),
+        displayText: [`SUV Peak: ${suvPeak.suvPeak.toFixed(2)}`],
+      },
+      notYetUpdatedAtSource
+    );
+
+    handleTMTVCalculation();
+  }, [selectedSegmentationId, config]);
+
+  /**
+   * Update UI based on segmentation changes (added, removed, updated)
+   */
+  useEffect(() => {
+    // ~~ Subscription
+    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
+    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
+    const subscriptions = [];
+
+    [added, updated].forEach(evt => {
+      const { unsubscribe } = segmentationService.subscribe(evt, () => {
+        const segmentations = segmentationService.getSegmentations();
+        setSegmentations(segmentations);
+      });
+      subscriptions.push(unsubscribe);
+    });
+
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    const { unsubscribe } = segmentationService.subscribe(
+      segmentationService.EVENTS.SEGMENTATION_REMOVED,
+      () => {
+        const segmentations = segmentationService.getSegmentations();
+        setSegmentations(segmentations);
+
+        if (segmentations.length > 0) {
+          setSelectedSegmentationId(segmentations[0].id);
+          handleTMTVCalculation();
+        } else {
+          setSelectedSegmentationId(null);
+          setTmtvValue(null);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  /**
+   * Whenever the segmentations change, update the TMTV calculations
+   */
+  useEffect(() => {
+    if (!selectedSegmentationId && segmentations.length > 0) {
+      setSelectedSegmentationId(segmentations[0].id);
+    }
+
+    handleTMTVCalculation();
+  }, [segmentations, selectedSegmentationId]);
+
+  return (
+    <>
+      <div className="flex flex-col">
+        <div className="invisible-scrollbar overflow-y-auto overflow-x-hidden">
+          <div className="mx-4 my-4 mb-4 flex space-x-4">
+            <Button
+              onClick={() => {
+                setLabelmapLoading(true);
+                setTimeout(() => {
+                  runCommand('createNewLabelmapFromPT').then(segmentationId => {
+                    setLabelmapLoading(false);
+                    setSelectedSegmentationId(segmentationId);
+                  });
+                });
+              }}
+            >
+              {labelmapLoading ? 'loading ...' : 'New Label'}
+            </Button>
+            <Button onClick={handleROIThresholding}>Run</Button>
+          </div>
+          <div
+            className="bg-secondary-dark border-secondary-light mb-2 flex h-8 cursor-pointer select-none items-center justify-around border-t outline-none first:border-0"
+            onClick={() => {
+              setShowConfig(!showConfig);
+            }}
+          >
+            <div className="px-4 text-base text-white">{t('ROI Threshold Configuration')}</div>
+          </div>
+          {showConfig && (
+            <ROIThresholdConfiguration
+              config={config}
+              dispatch={dispatch}
+              runCommand={runCommand}
+            />
+          )}
+          {/* show segmentation table */}
+          <div className="mt-4">
+            {segmentations?.length ? (
+              <SegmentationTable
+                title={t('Segmentations')}
+                segmentations={segmentations}
+                activeSegmentationId={selectedSegmentationId}
+                onClick={id => {
+                  runCommand('setSegmentationActiveForToolGroups', {
+                    segmentationId: id,
+                  });
+                  setSelectedSegmentationId(id);
+                }}
+                onToggleVisibility={id => {
+                  segmentationService.toggleSegmentationVisibility(id);
+                }}
+                onToggleVisibilityAll={ids => {
+                  ids.map(id => {
+                    segmentationService.toggleSegmentationVisibility(id);
+                  });
+                }}
+                onDelete={id => {
+                  segmentationService.remove(id);
+                }}
+                onEdit={id => {
+                  segmentationEditHandler({
+                    id,
+                    servicesManager,
+                  });
+                }}
+              />
+            ) : null}
+          </div>
+          {tmtvValue !== null ? (
+            <div className="bg-secondary-dark mt-4 flex items-baseline justify-between px-2 py-1">
+              <span className="text-base font-bold uppercase tracking-widest text-white">
+                {'TMTV:'}
+              </span>
+              <div className="text-white">{`${tmtvValue} mL`}</div>
+            </div>
+          ) : null}
+          <ExportReports
+            segmentations={segmentations}
+            tmtvValue={tmtvValue}
+            config={config}
+            commandsManager={commandsManager}
+          />
+        </div>
+      </div>
+      <div
+        className="mt-auto mb-4 flex cursor-pointer items-center justify-center text-blue-400 opacity-50 hover:opacity-80"
+        onClick={() => {
+          // navigate to a url in a new tab
+          window.open('https://github.com/OHIF/Viewers/blob/master/modes/tmtv/README.md', '_blank');
+        }}
+      >
+        <Icon
+          width="15px"
+          height="15px"
+          name={'info'}
+          className={'text-primary-active ml-4 mr-3'}
+        />
+        <span>{'User Guide'}</span>
+      </div>
+    </>
+  );
+}
+
+LegacyPanelRoiThresholdSegmentation.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,
+};

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

@@ -1,67 +1,23 @@
-import React, { useEffect, useState, useCallback, useReducer } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { SegmentationTable, Button, Icon } from '@ohif/ui';
+import { SegmentationGroupTableExpanded, Icon } from '@ohif/ui';
+import { createReportAsync } from '@ohif/extension-default';
 
-import { useTranslation } from 'react-i18next';
 import segmentationEditHandler from './segmentationEditHandler';
 import ExportReports from './ExportReports';
-import ROIThresholdConfiguration, { ROI_STAT } from './ROIThresholdConfiguration';
+import callInputDialog from './callInputDialog';
+import callColorPickerDialog from './colorPickerDialog';
 
-const LOWER_CT_THRESHOLD_DEFAULT = -1024;
-const UPPER_CT_THRESHOLD_DEFAULT = 1024;
-const LOWER_PT_THRESHOLD_DEFAULT = 2.5;
-const UPPER_PT_THRESHOLD_DEFAULT = 100;
-const WEIGHT_DEFAULT = 0.41; // a default weight for suv max often used in the literature
-const DEFAULT_STRATEGY = ROI_STAT;
+export default function PanelRoiThresholdSegmentation({
+  servicesManager,
+  commandsManager,
+  extensionManager,
+}) {
+  const { segmentationService, viewportGridService, uiDialogService } = servicesManager.services;
 
-function reducer(state, action) {
-  const { payload } = action;
-  const { strategy, ctLower, ctUpper, ptLower, ptUpper, weight } = payload;
-
-  switch (action.type) {
-    case 'setStrategy':
-      return {
-        ...state,
-        strategy,
-      };
-    case 'setThreshold':
-      return {
-        ...state,
-        ctLower: ctLower ? ctLower : state.ctLower,
-        ctUpper: ctUpper ? ctUpper : state.ctUpper,
-        ptLower: ptLower ? ptLower : state.ptLower,
-        ptUpper: ptUpper ? ptUpper : state.ptUpper,
-      };
-    case 'setWeight':
-      return {
-        ...state,
-        weight,
-      };
-    default:
-      return state;
-  }
-}
-
-export default function PanelRoiThresholdSegmentation({ servicesManager, commandsManager }) {
-  const { segmentationService } = servicesManager.services;
-
-  const { t } = useTranslation('PanelSUV');
-  const [showConfig, setShowConfig] = useState(false);
-  const [labelmapLoading, setLabelmapLoading] = useState(false);
   const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
   const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
 
-  const [config, dispatch] = useReducer(reducer, {
-    strategy: DEFAULT_STRATEGY,
-    ctLower: LOWER_CT_THRESHOLD_DEFAULT,
-    ctUpper: UPPER_CT_THRESHOLD_DEFAULT,
-    ptLower: LOWER_PT_THRESHOLD_DEFAULT,
-    ptUpper: UPPER_PT_THRESHOLD_DEFAULT,
-    weight: WEIGHT_DEFAULT,
-  });
-
-  const [tmtvValue, setTmtvValue] = useState(null);
-
   const runCommand = useCallback(
     (commandName, commandOptions = {}) => {
       return commandsManager.runCommand(commandName, commandOptions);
@@ -69,46 +25,6 @@ export default function PanelRoiThresholdSegmentation({ servicesManager, command
     [commandsManager]
   );
 
-  const handleTMTVCalculation = useCallback(() => {
-    const tmtv = runCommand('calculateTMTV', { segmentations });
-
-    if (tmtv !== undefined) {
-      setTmtvValue(tmtv.toFixed(2));
-    }
-  }, [segmentations, runCommand]);
-
-  const handleROIThresholding = useCallback(() => {
-    const labelmap = runCommand('thresholdSegmentationByRectangleROITool', {
-      segmentationId: selectedSegmentationId,
-      config,
-    });
-
-    const lesionStats = runCommand('getLesionStats', { labelmap });
-    const suvPeak = runCommand('calculateSuvPeak', { labelmap });
-    const lesionGlyoclysisStats = lesionStats.volume * lesionStats.meanValue;
-
-    // update segDetails with the suv peak for the active segmentation
-    const segmentation = segmentationService.getSegmentation(selectedSegmentationId);
-
-    const cachedStats = {
-      lesionStats,
-      suvPeak,
-      lesionGlyoclysisStats,
-    };
-
-    const notYetUpdatedAtSource = true;
-    segmentationService.addOrUpdateSegmentation(
-      {
-        ...segmentation,
-        ...Object.assign(segmentation.cachedStats, cachedStats),
-        displayText: [`SUV Peak: ${suvPeak.suvPeak.toFixed(2)}`],
-      },
-      notYetUpdatedAtSource
-    );
-
-    handleTMTVCalculation();
-  }, [selectedSegmentationId, config]);
-
   /**
    * Update UI based on segmentation changes (added, removed, updated)
    */
@@ -116,9 +32,10 @@ export default function PanelRoiThresholdSegmentation({ servicesManager, command
     // ~~ Subscription
     const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
     const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
+    const removed = segmentationService.EVENTS.SEGMENTATION_REMOVED;
     const subscriptions = [];
 
-    [added, updated].forEach(evt => {
+    [added, updated, removed].forEach(evt => {
       const { unsubscribe } = segmentationService.subscribe(evt, () => {
         const segmentations = segmentationService.getSegmentations();
         setSegmentations(segmentations);
@@ -133,109 +50,222 @@ export default function PanelRoiThresholdSegmentation({ servicesManager, command
     };
   }, []);
 
-  useEffect(() => {
-    const { unsubscribe } = segmentationService.subscribe(
-      segmentationService.EVENTS.SEGMENTATION_REMOVED,
-      () => {
-        const segmentations = segmentationService.getSegmentations();
-        setSegmentations(segmentations);
+  const onSegmentationClick = (segmentationId: string) => {
+    segmentationService.setActiveSegmentationForToolGroup(segmentationId);
+    setSelectedSegmentationId(segmentationId);
+  };
 
-        if (segmentations.length > 0) {
-          setSelectedSegmentationId(segmentations[0].id);
-          handleTMTVCalculation();
-        } else {
-          setSelectedSegmentationId(null);
-          setTmtvValue(null);
-        }
+  const onSegmentationAdd = async () => {
+    runCommand('createNewLabelmapFromPT').then(segmentationId => {
+      setSelectedSegmentationId(segmentationId);
+    });
+  };
+
+  const onSegmentAdd = segmentationId => {
+    segmentationService.addSegment(segmentationId);
+  };
+
+  const getToolGroupIds = segmentationId => {
+    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
+
+    return toolGroupIds;
+  };
+
+  const onSegmentClick = (segmentationId, segmentIndex) => {
+    segmentationService.setActiveSegment(segmentationId, segmentIndex);
+
+    const toolGroupIds = getToolGroupIds(segmentationId);
+
+    toolGroupIds.forEach(toolGroupId => {
+      // const toolGroupId =
+      segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
+      segmentationService.jumpToSegmentCenter(segmentationId, segmentIndex, toolGroupId);
+    });
+  };
+
+  const _setSegmentationConfiguration = useCallback(
+    (segmentationId, key, value) => {
+      segmentationService.setConfiguration({
+        segmentationId,
+        [key]: value,
+      });
+    },
+    [segmentationService]
+  );
+
+  const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const segmentInfo = segmentation.segments[segmentIndex];
+    const isVisible = !segmentInfo.isVisible;
+    const toolGroupIds = getToolGroupIds(segmentationId);
+    toolGroupIds.forEach(toolGroupId => {
+      segmentationService.setSegmentVisibility(
+        segmentationId,
+        segmentIndex,
+        isVisible,
+        toolGroupId
+      );
+    });
+  };
+
+  const onSegmentDelete = (segmentationId, segmentIndex) => {
+    segmentationService.removeSegment(segmentationId, segmentIndex);
+  };
+
+  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;
       }
-    );
 
-    return () => {
-      unsubscribe();
+      segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
+    });
+  };
+
+  const onToggleSegmentLock = (segmentationId, segmentIndex) => {
+    segmentationService.toggleSegmentLocked(segmentationId, segmentIndex);
+  };
+
+  const onSegmentColorClick = (segmentationId, segmentIndex) => {
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+
+    const segment = segmentation.segments[segmentIndex];
+    const { color, opacity } = segment;
+
+    const rgbaColor = {
+      r: color[0],
+      g: color[1],
+      b: color[2],
+      a: opacity / 255.0,
     };
-  }, []);
 
-  /**
-   * Whenever the segmentations change, update the TMTV calculations
-   */
-  useEffect(() => {
-    if (!selectedSegmentationId && segmentations.length > 0) {
-      setSelectedSegmentationId(segmentations[0].id);
+    callColorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
+      if (actionId === 'cancel') {
+        return;
+      }
+
+      segmentationService.setSegmentRGBAColor(segmentationId, segmentIndex, [
+        newRgbaColor.r,
+        newRgbaColor.g,
+        newRgbaColor.b,
+        newRgbaColor.a * 255.0,
+      ]);
+    });
+  };
+
+  const storeSegmentation = async segmentationId => {
+    const datasources = extensionManager.getActiveDataSource();
+
+    const displaySetInstanceUIDs = await createReportAsync({
+      servicesManager,
+      getReport: () =>
+        commandsManager.runCommand('storeSegmentation', {
+          segmentationId,
+          dataSource: datasources[0],
+        }),
+      reportType: 'Segmentation',
+    });
+
+    // Show the exported report in the active viewport as read only (similar to SR)
+    if (displaySetInstanceUIDs) {
+      // clear the segmentation that we exported, similar to the storeMeasurement
+      // where we remove the measurements and prompt again the user if they would like
+      // to re-read the measurements in a SR read only viewport
+      segmentationService.remove(segmentationId);
+
+      viewportGridService.setDisplaySetsForViewport({
+        viewportId: viewportGridService.getActiveViewportId(),
+        displaySetInstanceUIDs,
+      });
     }
+  };
 
-    handleTMTVCalculation();
-  }, [segmentations, selectedSegmentationId]);
+  const onSegmentationDownloadRTSS = segmentationId => {
+    commandsManager.runCommand('downloadRTSS', {
+      segmentationId,
+    });
+  };
+
+  const onSegmentationDownload = segmentationId => {
+    commandsManager.runCommand('downloadSegmentation', {
+      segmentationId,
+    });
+  };
+
+  const tmtvValue = segmentations?.[0]?.cachedStats?.tmtv?.value || null;
+  const config = segmentations?.[0]?.cachedStats?.tmtv?.config || {};
 
   return (
     <>
       <div className="flex flex-col">
         <div className="invisible-scrollbar overflow-y-auto overflow-x-hidden">
-          <div className="mx-4 my-4 mb-4 flex space-x-4">
-            <Button
-              onClick={() => {
-                setLabelmapLoading(true);
-                setTimeout(() => {
-                  runCommand('createNewLabelmapFromPT').then(segmentationId => {
-                    setLabelmapLoading(false);
-                    setSelectedSegmentationId(segmentationId);
-                  });
+          {/* show segmentation table */}
+          <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
+            <SegmentationGroupTableExpanded
+              disableEditing={false}
+              showAddSegmentation={true}
+              showAddSegment={false}
+              showDeleteSegment={true}
+              segmentations={segmentations}
+              onSegmentationAdd={onSegmentationAdd}
+              onSegmentationClick={onSegmentationClick}
+              onToggleSegmentationVisibility={id => {
+                segmentationService.toggleSegmentationVisibility(id);
+              }}
+              onToggleSegmentVisibility={onToggleSegmentVisibility}
+              onSegmentationDelete={id => {
+                segmentationService.remove(id);
+              }}
+              onSegmentationEdit={id => {
+                segmentationEditHandler({
+                  id,
+                  servicesManager,
                 });
               }}
-            >
-              {labelmapLoading ? 'loading ...' : 'New Label'}
-            </Button>
-            <Button onClick={handleROIThresholding}>Run</Button>
-          </div>
-          <div
-            className="bg-secondary-dark border-secondary-light mb-2 flex h-8 cursor-pointer select-none items-center justify-around border-t outline-none first:border-0"
-            onClick={() => {
-              setShowConfig(!showConfig);
-            }}
-          >
-            <div className="px-4 text-base text-white">{t('ROI Threshold Configuration')}</div>
-          </div>
-          {showConfig && (
-            <ROIThresholdConfiguration
-              config={config}
-              dispatch={dispatch}
-              runCommand={runCommand}
+              segmentationConfig={{ initialConfig: segmentationService.getConfiguration() }}
+              onSegmentAdd={onSegmentAdd}
+              onSegmentClick={onSegmentClick}
+              onSegmentDelete={onSegmentDelete}
+              onSegmentEdit={onSegmentEdit}
+              onToggleSegmentLock={onToggleSegmentLock}
+              onSegmentColorClick={onSegmentColorClick}
+              storeSegmentation={storeSegmentation}
+              onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
+              onSegmentationDownload={onSegmentationDownload}
+              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)
+              }
             />
-          )}
-          {/* show segmentation table */}
-          <div className="mt-4">
-            {segmentations?.length ? (
-              <SegmentationTable
-                title={t('Segmentations')}
-                segmentations={segmentations}
-                activeSegmentationId={selectedSegmentationId}
-                onClick={id => {
-                  runCommand('setSegmentationActiveForToolGroups', {
-                    segmentationId: id,
-                  });
-                  setSelectedSegmentationId(id);
-                }}
-                onToggleVisibility={id => {
-                  segmentationService.toggleSegmentationVisibility(id);
-                }}
-                onToggleVisibilityAll={ids => {
-                  ids.map(id => {
-                    segmentationService.toggleSegmentationVisibility(id);
-                  });
-                }}
-                onDelete={id => {
-                  segmentationService.remove(id);
-                }}
-                onEdit={id => {
-                  segmentationEditHandler({
-                    id,
-                    servicesManager,
-                  });
-                }}
-              />
-            ) : null}
           </div>
           {tmtvValue !== null ? (
-            <div className="bg-secondary-dark mt-4 flex items-baseline justify-between px-2 py-1">
+            <div className="bg-secondary-dark mt-1 flex items-baseline justify-between px-2 py-1">
               <span className="text-base font-bold uppercase tracking-widest text-white">
                 {'TMTV:'}
               </span>
@@ -251,7 +281,7 @@ export default function PanelRoiThresholdSegmentation({ servicesManager, command
         </div>
       </div>
       <div
-        className="mt-auto mb-4 flex cursor-pointer items-center justify-center text-blue-400 opacity-50 hover:opacity-80"
+        className="absolute bottom-1 flex cursor-pointer items-center justify-center text-blue-400 opacity-50 hover:opacity-80"
         onClick={() => {
           // navigate to a url in a new tab
           window.open('https://github.com/OHIF/Viewers/blob/master/modes/tmtv/README.md', '_blank');

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

@@ -14,7 +14,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
   const { t } = useTranslation('ROIThresholdConfiguration');
 
   return (
-    <div className="bg-primary-dark flex flex-col space-y-4 px-4 py-2">
+    <div className="bg-primary-dark flex flex-col space-y-4">
       <div className="flex items-end space-x-2">
         <div className="flex w-1/2 flex-col">
           <Select
@@ -62,8 +62,8 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
       {config.strategy === ROI_STAT && (
         <Input
           label={t('Percentage of Max SUV')}
-          labelClassName="text-white"
-          className="border-primary-main mt-2 bg-black"
+          labelClassName="text-[13px] font-inter text-white"
+          className="border-primary-main bg-black"
           type="text"
           containerClassName="mr-2"
           value={config.weight}
@@ -83,11 +83,11 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
             <tbody>
               <tr className="mt-2">
                 <td
-                  className="pr-4 pt-2"
+                  className="pr-4"
                   colSpan="3"
                 >
                   <Label
-                    className="text-white"
+                    className="font-inter text-[13px] text-white"
                     text="Lower & Upper Ranges"
                   ></Label>
                 </td>

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Input, Dialog, ButtonEnums } 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: 'Segment',
+        value: { label },
+        noCloseButton: true,
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Confirm', type: ButtonEnums.type.primary },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          return (
+            <Input
+              label="Enter the segment label"
+              labelClassName="text-white text-[14px] leading-[1.2]"
+              autoFocus
+              className="border-primary-main bg-black"
+              type="text"
+              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' } });
+                }
+              }}
+            />
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callInputDialog;

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/colorPickerDialog.css

@@ -0,0 +1,3 @@
+.chrome-picker {
+  background: #090c29 !important;
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dialog } from '@ohif/ui';
+import { ChromePicker } from 'react-color';
+
+import './colorPickerDialog.css';
+
+function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
+  const dialogId = 'pick-color';
+
+  const onSubmitHandler = ({ action, value }) => {
+    switch (action.id) {
+      case 'save':
+        callback(value.rgbaColor, 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: 'Segment Color',
+        value: { rgbaColor },
+        noCloseButton: true,
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'primary' },
+          { id: 'save', text: 'Save', type: 'secondary' },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          const handleChange = color => {
+            setValue({ rgbaColor: color.rgb });
+          };
+
+          return (
+            <ChromePicker
+              color={value.rgbaColor}
+              onChange={handleChange}
+              presetColors={[]}
+              width={300}
+            />
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callColorPickerDialog;

extensions/tmtv/src/Panels/RectangleROIOptions.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useCallback, useReducer, useEffect } from 'react';
+import { Button } from '@ohif/ui';
+import ROIThresholdConfiguration, {
+  ROI_STAT,
+} from './PanelROIThresholdSegmentation/ROIThresholdConfiguration';
+import * as cs3dTools from '@cornerstonejs/tools';
+
+const LOWER_CT_THRESHOLD_DEFAULT = -1024;
+const UPPER_CT_THRESHOLD_DEFAULT = 1024;
+const LOWER_PT_THRESHOLD_DEFAULT = 2.5;
+const UPPER_PT_THRESHOLD_DEFAULT = 100;
+const WEIGHT_DEFAULT = 0.41; // a default weight for suv max often used in the literature
+const DEFAULT_STRATEGY = ROI_STAT;
+
+function reducer(state, action) {
+  const { payload } = action;
+  const { strategy, ctLower, ctUpper, ptLower, ptUpper, weight } = payload;
+
+  switch (action.type) {
+    case 'setStrategy':
+      return {
+        ...state,
+        strategy,
+      };
+    case 'setThreshold':
+      return {
+        ...state,
+        ctLower: ctLower ? ctLower : state.ctLower,
+        ctUpper: ctUpper ? ctUpper : state.ctUpper,
+        ptLower: ptLower ? ptLower : state.ptLower,
+        ptUpper: ptUpper ? ptUpper : state.ptUpper,
+      };
+    case 'setWeight':
+      return {
+        ...state,
+        weight,
+      };
+    default:
+      return state;
+  }
+}
+
+function RectangleROIOptions({ servicesManager, commandsManager }) {
+  const { segmentationService } = servicesManager.services;
+  const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
+
+  const runCommand = useCallback(
+    (commandName, commandOptions = {}) => {
+      return commandsManager.runCommand(commandName, commandOptions);
+    },
+    [commandsManager]
+  );
+
+  const [config, dispatch] = useReducer(reducer, {
+    strategy: DEFAULT_STRATEGY,
+    ctLower: LOWER_CT_THRESHOLD_DEFAULT,
+    ctUpper: UPPER_CT_THRESHOLD_DEFAULT,
+    ptLower: LOWER_PT_THRESHOLD_DEFAULT,
+    ptUpper: UPPER_PT_THRESHOLD_DEFAULT,
+    weight: WEIGHT_DEFAULT,
+  });
+
+  const handleROIThresholding = useCallback(() => {
+    const segmentationId = selectedSegmentationId;
+
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const activeSegmentIndex =
+      cs3dTools.segmentation.segmentIndex.getActiveSegmentIndex(segmentationId);
+
+    // run the threshold based on the active segment index
+    // Todo: later find a way to associate each rectangle with a segment (e.g., maybe with color?)
+    const labelmap = runCommand('thresholdSegmentationByRectangleROITool', {
+      segmentationId,
+      config,
+      segmentIndex: activeSegmentIndex,
+    });
+
+    // re-calculating the cached stats for the active segmentation
+    const updatedPerSegmentCachedStats = {};
+    segmentation.segments = segmentation.segments.map(segment => {
+      if (!segment || !segment.segmentIndex) {
+        return segment;
+      }
+
+      const segmentIndex = segment.segmentIndex;
+
+      const lesionStats = runCommand('getLesionStats', { labelmap, segmentIndex });
+      const suvPeak = runCommand('calculateSuvPeak', { labelmap, segmentIndex });
+      const lesionGlyoclysisStats = lesionStats.volume * lesionStats.meanValue;
+
+      // update segDetails with the suv peak for the active segmentation
+      const cachedStats = {
+        lesionStats,
+        suvPeak,
+        lesionGlyoclysisStats,
+      };
+
+      segment.cachedStats = cachedStats;
+      segment.displayText = [
+        `SUV Peak: ${suvPeak.suvPeak.toFixed(2)}`,
+        `Volume: ${lesionStats.volume.toFixed(2)} mm3`,
+      ];
+      updatedPerSegmentCachedStats[segmentIndex] = cachedStats;
+
+      return segment;
+    });
+
+    const notYetUpdatedAtSource = true;
+
+    const segmentations = segmentationService.getSegmentations();
+    const tmtv = runCommand('calculateTMTV', { segmentations });
+
+    segmentation.cachedStats = Object.assign(
+      segmentation.cachedStats,
+      updatedPerSegmentCachedStats,
+      {
+        tmtv: {
+          value: tmtv.toFixed(3),
+          config: { ...config },
+        },
+      }
+    );
+
+    segmentationService.addOrUpdateSegmentation(
+      {
+        ...segmentation,
+      },
+      false, // don't suppress events
+      notYetUpdatedAtSource
+    );
+  }, [selectedSegmentationId, config]);
+
+  useEffect(() => {
+    const segmentations = segmentationService.getSegmentations();
+
+    if (!segmentations.length) {
+      return;
+    }
+
+    const isActive = segmentations.find(seg => seg.isActive);
+    setSelectedSegmentationId(isActive.id);
+  }, []);
+
+  /**
+   * Update UI based on segmentation changes (added, removed, updated)
+   */
+  useEffect(() => {
+    // ~~ Subscription
+    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
+    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
+    const subscriptions = [];
+
+    [added, updated].forEach(evt => {
+      const { unsubscribe } = segmentationService.subscribe(evt, () => {
+        const segmentations = segmentationService.getSegmentations();
+
+        if (!segmentations.length) {
+          return;
+        }
+
+        const isActive = segmentations.find(seg => seg.isActive);
+        setSelectedSegmentationId(isActive.id);
+      });
+      subscriptions.push(unsubscribe);
+    });
+
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    const { unsubscribe } = segmentationService.subscribe(
+      segmentationService.EVENTS.SEGMENTATION_REMOVED,
+      () => {
+        const segmentations = segmentationService.getSegmentations();
+
+        if (segmentations.length > 0) {
+          setSelectedSegmentationId(segmentations[0].id);
+          handleROIThresholding();
+        } else {
+          setSelectedSegmentationId(null);
+          handleROIThresholding();
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return (
+    <div className="invisible-scrollbar mb-2 flex flex-col overflow-y-auto overflow-x-hidden">
+      <ROIThresholdConfiguration
+        config={config}
+        dispatch={dispatch}
+        runCommand={runCommand}
+      />
+      {selectedSegmentationId !== null && (
+        <Button
+          className="mt-2 !h-[26px] !w-[75px]"
+          onClick={handleROIThresholding}
+        >
+          Run
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export default RectangleROIOptions;

extensions/tmtv/src/commandsModule.js

@@ -112,6 +112,7 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
       // Create a segmentation of the same resolution as the source data
       // using volumeLoader.createAndCacheDerivedVolume.
       const { viewportMatchDetails } = hangingProtocolService.getMatchDetails();
+
       const ptDisplaySet = actions.getMatchingPTDisplaySet({
         viewportMatchDetails,
       });
@@ -121,8 +122,11 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
         return;
       }
 
+      const currentSegmentations = segmentationService.getSegmentations();
+
       const segmentationId = await segmentationService.createSegmentationForDisplaySet(
-        ptDisplaySet.displaySetInstanceUID
+        ptDisplaySet.displaySetInstanceUID,
+        { label: `Segmentation ${currentSegmentations.length + 1}` }
       );
 
       // Add Segmentation to all toolGroupIds in the viewer
@@ -141,6 +145,12 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
         segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
       }
 
+      segmentationService.addSegment(segmentationId, {
+        segmentIndex: 1,
+        properties: {
+          label: 'Segment 1',
+        },
+      });
       return segmentationId;
     },
     setSegmentationActiveForToolGroups: ({ segmentationId }) => {
@@ -150,7 +160,7 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
         segmentationService.setActiveSegmentationForToolGroup(segmentationId, toolGroupId);
       });
     },
-    thresholdSegmentationByRectangleROITool: ({ segmentationId, config }) => {
+    thresholdSegmentationByRectangleROITool: ({ segmentationId, config, segmentIndex }) => {
       const segmentation = csTools.segmentation.state.getSegmentation(segmentationId);
 
       const { representationData } = segmentation;
@@ -201,12 +211,11 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
           { volume: referencedVolume, lower: ptLower, upper: ptUpper },
           { volume: ctReferencedVolume, lower: ctLower, upper: ctUpper },
         ],
-        { overwrite: true }
+        { overwrite: true, segmentIndex }
       );
     },
-    calculateSuvPeak: ({ labelmap }) => {
+    calculateSuvPeak: ({ labelmap, segmentIndex }) => {
       const { referencedVolumeId } = labelmap;
-
       const referencedVolume = cs.cache.getVolume(referencedVolumeId);
 
       const annotationUIDs = csTools.annotation.selection.getAnnotationsSelectedByToolName(
@@ -217,7 +226,7 @@ const commandsModule = ({ servicesManager, commandsManager, extensionManager })
         csTools.annotation.state.getAnnotation(annotationUID)
       );
 
-      const suvPeak = calculateSuvPeak(labelmap, referencedVolume, annotations);
+      const suvPeak = calculateSuvPeak(labelmap, referencedVolume, annotations, segmentIndex);
       return {
         suvPeak: suvPeak.mean,
         suvMax: suvPeak.max,

extensions/tmtv/src/getPanelModule.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PanelPetSUV, PanelROIThresholdSegmentation } from './Panels';
+import { Toolbox } from '@ohif/ui';
 
 // TODO:
 // - No loading UI exists yet
@@ -12,18 +13,26 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
       <PanelPetSUV
         commandsManager={commandsManager}
         servicesManager={servicesManager}
-        extensionManager={extensionManager}
       />
     );
   };
 
   const wrappedROIThresholdSeg = () => {
     return (
-      <PanelROIThresholdSegmentation
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-        extensionManager={extensionManager}
-      />
+      <>
+        <Toolbox
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          buttonSectionId="tmtvToolbox"
+          title="Threshold Tools"
+        />
+        <PanelROIThresholdSegmentation
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+        />
+      </>
     );
   };
 
@@ -31,15 +40,15 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
     {
       name: 'petSUV',
       iconName: 'tab-patient-info',
-      iconLabel: 'PET SUV',
-      label: 'PET SUV',
+      iconLabel: 'Patient Info',
+      label: 'Patient Info',
       component: wrappedPanelPetSuv,
     },
     {
       name: 'ROIThresholdSeg',
-      iconName: 'tab-roi-threshold',
-      iconLabel: 'ROI Threshold',
-      label: 'ROI Threshold',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
       component: wrappedROIThresholdSeg,
     },
   ];

extensions/tmtv/src/getToolbarModule.tsx

@@ -0,0 +1,10 @@
+import RectangleROIOptions from './Panels/RectangleROIOptions';
+
+export default function getToolbarModule({ commandsManager, servicesManager }) {
+  return [
+    {
+      name: 'tmtv.RectangleROIThresholdOptions',
+      defaultComponent: () => RectangleROIOptions({ commandsManager, servicesManager }),
+    },
+  ];
+}

extensions/tmtv/src/index.tsx

@@ -3,6 +3,7 @@ import getHangingProtocolModule from './getHangingProtocolModule';
 import getPanelModule from './getPanelModule';
 import init from './init';
 import commandsModule from './commandsModule';
+import getToolbarModule from './getToolbarModule';
 
 /**
  *
@@ -15,6 +16,7 @@ const tmtvExtension = {
   preRegistration({ servicesManager, commandsManager, extensionManager, configuration = {} }) {
     init({ servicesManager, commandsManager, extensionManager, configuration });
   },
+  getToolbarModule,
   getPanelModule,
   getHangingProtocolModule,
   getCommandsModule({ servicesManager, commandsManager, extensionManager }) {

extensions/tmtv/src/utils/measurementServiceMappings/RectangleROIStartEndThreshold.js

@@ -43,8 +43,6 @@ const RectangleROIStartEndThreshold = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
 
-    const { cachedStats } = data;
-
     return {
       uid: annotationUID,
       SOPInstanceUID,
@@ -56,10 +54,8 @@ const RectangleROIStartEndThreshold = {
       toolName: metadata.toolName,
       displaySetInstanceUID: displaySet.displaySetInstanceUID,
       label: metadata.label,
-      // displayText: displayText,
       data: data.cachedStats,
       type: 'RectangleROIStartEndThreshold',
-      // getReport,
     };
   },
 };