feat(RT): add dicom RT support via volume viewports (#3310)

* feat: initial RT support

* make the segmentation service work with representation data

* feat: make segmentation service work with representations

* fix rtss vis

* fix: rt hydration

* fix the rendering of rt names

* fix imports

* refactor: Modify status and click handling for hydration of RTStructures

Modify status and click handling for hydration of RTStructures by renaming `onPillClick` to `onStatusClick` in `OHIFCornerstoneRTViewport.tsx` and `_getStatusComponent.tsx` files. Also, update initial segmentation configurations in `PanelSegmentation.tsx` and simplify configuration changes and values for segmentation service in `SegmentationService.ts`. Finally, remove console debug in `CornerstoneViewportService.ts`.

* wip for highlighting contours

* refactor rt displayset code

* review code update

* update cornerstone dependencies

* refactor: Update license year, version number, and minor code cleanup

This commit updates the license year in several files, updates the version number in package.json, and contains minor code cleanup in two files.

* add bulkdataURI retrieve for RT

* fix package version

* apply review comments

* apply review comments

* apply review comments

* feat(panels): refactor and streamline segmentation configuration and inputs

Rewrote state hooks and streamlined the configuration input for `PanelSegmentation` to be more verbose and reusable. Included several new input types, including the `InputRange` component which now shows a fixed floating value based on the step provided. The `SegmentationConfig` component now works with dynamic values controlled by `initialConfig`. These changes should improve function usability and make the code more maintainable going forward.

* fix various bugs

* fix contour delete by upgrade cs3d version

* feat(viewport, inputNumber, segmentationConfig, orthanc): Implement minimum and maximum values for input number components, and useBulkDataURI for Orthanc configuration. Compare measurement view planes with absolute viewport view planes in Cornerstone viewport.

* update yarn lock

platform/ui/src/components/InputNumber/InputNumber.tsx

@@ -19,37 +19,60 @@ const sizesClasses = {
 const InputNumber: React.FC<{
   value: number;
   onChange: (value) => void;
+  minValue?: number;
+  maxValue?: number;
   step: number;
   size?: string;
   className?: string;
-}> = ({ value, onChange, step = 1, className, size = 'sm' }) => {
+}> = ({
+  value,
+  onChange,
+  step = 1,
+  className,
+  size = 'sm',
+  minValue = 0,
+  maxValue = 100,
+}) => {
   const [numberValue, setNumberValue] = useState(value);
 
+  const handleMinMax = useCallback(
+    (value: number) => {
+      if (value > maxValue) {
+        return maxValue;
+      } else if (value < minValue) {
+        return minValue;
+      } else {
+        return value;
+      }
+    },
+    [maxValue, minValue]
+  );
+
   const handleChange = useCallback(
     e => {
-      const numberValue = e.target.value;
+      const numberValue = handleMinMax(Number(e.target.value));
       setNumberValue(numberValue);
       onChange(numberValue);
     },
-    [onChange, setNumberValue]
+    [onChange, setNumberValue, handleMinMax]
   );
 
   const handleIncrement = useCallback(
     e => {
-      const newNum = Number(numberValue) + step;
+      const newNum = handleMinMax(Number(numberValue) + step);
       setNumberValue(newNum);
       onChange(newNum);
     },
-    [onChange, setNumberValue, step, numberValue]
+    [onChange, setNumberValue, step, numberValue, handleMinMax]
   );
 
   const handleDecrement = useCallback(
     e => {
-      const newNum = Number(numberValue) - step;
+      const newNum = handleMinMax(Number(numberValue) - step);
       setNumberValue(newNum);
       onChange(newNum);
     },
-    [onChange, setNumberValue, step, numberValue]
+    [onChange, setNumberValue, step, numberValue, handleMinMax]
   );
 
   return (

platform/ui/src/components/InputRange/InputRange.tsx

@@ -54,6 +54,9 @@ const InputRange: React.FC<{
   const rangeValuePercentage =
     ((rangeValue - minValue) / (maxValue - minValue)) * 100;
 
+  const rangeValueForStr =
+    step >= 1 ? rangeValue.toFixed(0) : rangeValue.toFixed(1);
+
   return (
     <div
       className={`flex items-center cursor-pointer space-x-1 ${
@@ -82,7 +85,7 @@ const InputRange: React.FC<{
           component="p"
           className={classNames('w-8', labelClassName ?? 'text-white')}
         >
-          {rangeValue}
+          {rangeValueForStr}
           {unit}
         </Typography>
       )}

platform/ui/src/components/LoadingIndicatorTotalPercent/LoadingIndicatorTotalPercent.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import LoadingIndicatorProgress from '../LoadingIndicatorProgress';
+
+interface Props {
+  className?: string;
+  totalNumbers: number | null;
+  percentComplete: number | null;
+  loadingText?: string;
+  targetText?: string;
+}
+
+/**
+ *  A React component that renders a loading indicator but accepts a totalNumbers
+ * and percentComplete to display a more detailed message.
+ */
+function LoadingIndicatorTotalPercent({
+  className,
+  totalNumbers,
+  percentComplete,
+  loadingText = 'Loading...',
+  targetText = 'segments',
+}: Props): JSX.Element {
+  percentComplete = percentComplete !== null ? percentComplete : null;
+
+  const progress = percentComplete !== null ? percentComplete : null;
+  const totalNumbersText = totalNumbers !== null ? `${totalNumbers}` : '';
+  const numTargetsLoadedText =
+    percentComplete !== null
+      ? Math.floor((percentComplete * totalNumbers) / 100)
+      : '';
+
+  const textBlock = !totalNumbers ? (
+    <div className="text-white text-sm">{loadingText}</div>
+  ) : (
+    <div className="text-white text-sm flex items-baseline space-x-1">
+      <div>Loaded</div>
+      <div>{numTargetsLoadedText}</div>
+      <div>of</div>
+      <div>{totalNumbersText}</div>
+      <div>{targetText}</div>
+    </div>
+  );
+
+  return (
+    <LoadingIndicatorProgress
+      className={className}
+      progress={progress}
+      textBlock={textBlock}
+    />
+  );
+}
+
+export default LoadingIndicatorTotalPercent;

platform/ui/src/components/LoadingIndicatorTotalPercent/index.js

@@ -0,0 +1,2 @@
+import LoadingIndicatorTotalPercent from './LoadingIndicatorTotalPercent';
+export default LoadingIndicatorTotalPercent;

platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx

@@ -1,27 +1,15 @@
 import React, { useState } from 'react';
 import { Icon, InputRange, CheckBox, InputNumber } from '../';
 import classNames from 'classnames';
-import { reducer } from './segmentationConfigReducer';
 
 const ActiveSegmentationConfig = ({
   config,
-  dispatch,
   setRenderOutline,
   setOutlineOpacityActive,
   setOutlineWidthActive,
   setRenderFill,
   setFillAlpha,
-  usePercentage,
 }) => {
-  const [
-    useOutlineOpacityPercentage,
-    setUseOutlineOpacityPercentage,
-  ] = useState(usePercentage);
-
-  const [useFillAlphaPercentage, setUseFillAlphaPercentage] = useState(
-    usePercentage
-  );
-
   return (
     <div className="flex justify-between text-[12px] pt-[13px] px-2">
       <div className="flex flex-col items-start">
@@ -31,32 +19,14 @@ const ActiveSegmentationConfig = ({
           checked={config.renderOutline}
           labelClassName="text-[12px] pl-1 pt-1"
           className="mb-[9px]"
-          onChange={value => {
-            dispatch({
-              type: 'RENDER_OUTLINE',
-              payload: {
-                value,
-              },
-            });
-
-            setRenderOutline(value);
-          }}
+          onChange={setRenderOutline}
         />
         <CheckBox
           label="Fill"
           checked={config.renderFill}
           labelClassName="text-[12px] pl-1 pt-1"
           className="mb-[9px]"
-          onChange={value => {
-            dispatch({
-              type: 'RENDER_FILL',
-              payload: {
-                value,
-              },
-            });
-
-            setRenderFill(value);
-          }}
+          onChange={setRenderFill}
         />
       </div>
 
@@ -64,23 +34,9 @@ const ActiveSegmentationConfig = ({
         <div className="text-[#b3b3b3] text-[10px] mb-[12px]">Opacity</div>
         <InputRange
           minValue={0}
-          maxValue={usePercentage ? 100 : 1}
-          value={
-            useOutlineOpacityPercentage
-              ? config.outlineOpacity * 100
-              : config.outlineOpacity
-          }
-          onChange={value => {
-            setUseOutlineOpacityPercentage(false);
-            dispatch({
-              type: 'SET_OUTLINE_OPACITY',
-              payload: {
-                value: value,
-              },
-            });
-
-            setOutlineOpacityActive(value);
-          }}
+          maxValue={100}
+          value={config.outlineOpacity * 100}
+          onChange={setOutlineOpacityActive}
           step={1}
           containerClassName="mt-[4px] mb-[9px]"
           inputClassName="w-[64px]"
@@ -89,21 +45,9 @@ const ActiveSegmentationConfig = ({
         />
         <InputRange
           minValue={0}
-          maxValue={usePercentage ? 100 : 1}
-          value={
-            useFillAlphaPercentage ? config.fillAlpha * 100 : config.fillAlpha
-          }
-          onChange={value => {
-            setUseFillAlphaPercentage(false);
-            dispatch({
-              type: 'SET_FILL_ALPHA',
-              payload: {
-                value,
-              },
-            });
-
-            setFillAlpha(value);
-          }}
+          maxValue={100}
+          value={config.fillAlpha * 100}
+          onChange={setFillAlpha}
           step={1}
           containerClassName="mt-[4px] mb-[9px]"
           inputClassName="w-[64px]"
@@ -116,16 +60,9 @@ const ActiveSegmentationConfig = ({
         <div className="text-[#b3b3b3] text-[10px] mb-[12px]">Size</div>
         <InputNumber
           value={config.outlineWidthActive}
-          onChange={value => {
-            dispatch({
-              type: 'SET_OUTLINE_WIDTH',
-              payload: {
-                value,
-              },
-            });
-
-            setOutlineWidthActive(value);
-          }}
+          onChange={setOutlineWidthActive}
+          minValue={0}
+          maxValue={10}
           className="-mt-1"
         />
       </div>
@@ -135,16 +72,9 @@ const ActiveSegmentationConfig = ({
 
 const InactiveSegmentationConfig = ({
   config,
-  dispatch,
   setRenderInactiveSegmentations,
   setFillAlphaInactive,
-  usePercentage,
 }) => {
-  const [
-    useFillAlphaInactivePercentage,
-    setUseFillInactivePercentage,
-  ] = useState(usePercentage);
-
   return (
     <div className="px-2">
       <CheckBox
@@ -152,39 +82,16 @@ const InactiveSegmentationConfig = ({
         checked={config.renderInactiveSegmentations}
         labelClassName="text-[12px] pt-1"
         className="mb-[9px]"
-        onChange={value => {
-          dispatch({
-            type: 'RENDER_INACTIVE_SEGMENTATIONS',
-            payload: {
-              value,
-            },
-          });
-
-          setRenderInactiveSegmentations(value);
-        }}
+        onChange={setRenderInactiveSegmentations}
       />
 
       <div className="flex pl-4 items-center space-x-2">
         <span className="text-[10px] text-[#b3b3b3]">Opacity</span>
         <InputRange
           minValue={0}
-          maxValue={usePercentage ? 100 : 1}
-          value={
-            useFillAlphaInactivePercentage
-              ? config.fillAlphaInactive * 100
-              : config.fillAlphaInactive
-          }
-          onChange={value => {
-            setUseFillInactivePercentage(false);
-            dispatch({
-              type: 'SET_FILL_ALPHA_INACTIVE',
-              payload: {
-                value: value,
-              },
-            });
-
-            setFillAlphaInactive(value);
-          }}
+          maxValue={100}
+          value={config.fillAlphaInactive * 100}
+          onChange={setFillAlphaInactive}
           step={1}
           containerClassName="mt-[4px]"
           inputClassName="w-[64px]"
@@ -206,11 +113,7 @@ const SegmentationConfig = ({
   setRenderInactiveSegmentations,
   setRenderOutline,
 }) => {
-  const [config, dispatch] = React.useReducer(
-    reducer,
-    segmentationConfig.initialConfig
-  );
-
+  const { initialConfig } = segmentationConfig;
   const [isMinimized, setIsMinimized] = useState(true);
   return (
     <div className="bg-primary-dark">
@@ -238,14 +141,12 @@ const SegmentationConfig = ({
       {!isMinimized && (
         <div>
           <ActiveSegmentationConfig
-            config={config}
-            dispatch={dispatch}
+            config={initialConfig}
             setFillAlpha={setFillAlpha}
             setOutlineWidthActive={setOutlineWidthActive}
             setOutlineOpacityActive={setOutlineOpacityActive}
             setRenderFill={setRenderFill}
             setRenderOutline={setRenderOutline}
-            usePercentage={segmentationConfig.usePercentage}
           />
           {/* A small line  */}
           <div className="h-[1px] bg-[#212456] mb-[8px] mx-1"></div>
@@ -259,11 +160,9 @@ const SegmentationConfig = ({
             </span>
           </div>
           <InactiveSegmentationConfig
-            config={config}
-            dispatch={dispatch}
+            config={initialConfig}
             setRenderInactiveSegmentations={setRenderInactiveSegmentations}
             setFillAlphaInactive={setFillAlphaInactive}
-            usePercentage={segmentationConfig.usePercentage}
           />
         </div>
       )}

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -4,30 +4,6 @@ import Icon from '../Icon';
 import SegmentationGroup from './SegmentationGroup';
 import SegmentationConfig from './SegmentationConfig';
 
-const GetSegmentationConfig = ({
-  setFillAlpha,
-  setFillAlphaInactive,
-  setOutlineWidthActive,
-  setRenderFill,
-  setRenderInactiveSegmentations,
-  setRenderOutline,
-  setOutlineOpacityActive,
-  segmentationConfig,
-}) => {
-  return (
-    <SegmentationConfig
-      setFillAlpha={setFillAlpha}
-      setFillAlphaInactive={setFillAlphaInactive}
-      setOutlineWidthActive={setOutlineWidthActive}
-      setOutlineOpacityActive={setOutlineOpacityActive}
-      setRenderFill={setRenderFill}
-      setRenderInactiveSegmentations={setRenderInactiveSegmentations}
-      setRenderOutline={setRenderOutline}
-      segmentationConfig={segmentationConfig}
-    />
-  );
-};
-
 const SegmentationGroupTable = ({
   segmentations,
   onSegmentationAdd,
@@ -56,10 +32,7 @@ const SegmentationGroupTable = ({
 }) => {
   return (
     <div className="flex flex-col min-h-0 font-inter font-[300]">
-      <GetSegmentationConfig
-        // showAddSegmentation={showAddSegmentation}
-        // onSegmentationAdd={onSegmentationAdd}
-        segmentationConfig={segmentationConfig}
+      <SegmentationConfig
         setFillAlpha={setFillAlpha}
         setFillAlphaInactive={setFillAlphaInactive}
         setOutlineWidthActive={setOutlineWidthActive}
@@ -67,6 +40,7 @@ const SegmentationGroupTable = ({
         setRenderFill={setRenderFill}
         setRenderInactiveSegmentations={setRenderInactiveSegmentations}
         setRenderOutline={setRenderOutline}
+        segmentationConfig={segmentationConfig}
       />
       <div className="flex flex-col min-h-0 pr-[1px] mt-1">
         {!!segmentations.length &&
@@ -155,7 +129,6 @@ SegmentationGroupTable.defaultProps = {
       renderInactiveSegmentations: true,
       renderOutline: true,
     },
-    usePercentage: true,
   },
   setFillAlpha: () => {},
   setFillAlphaInactive: () => {},

platform/ui/src/components/SegmentationGroupTable/segmentationConfigReducer.tsx

@@ -1,22 +0,0 @@
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'RENDER_OUTLINE':
-      return { ...state, renderOutline: action.payload.value };
-    case 'RENDER_FILL':
-      return { ...state, renderFill: action.payload.value };
-    case 'SET_OUTLINE_OPACITY':
-      return { ...state, outlineOpacity: action.payload.value };
-    case 'SET_OUTLINE_WIDTH':
-      return { ...state, outlineWidth: action.payload.value };
-    case 'SET_FILL_ALPHA':
-      return { ...state, fillAlpha: action.payload.value };
-    case 'SET_FILL_ALPHA_INACTIVE':
-      return { ...state, fillAlphaInactive: action.payload.value };
-    case 'RENDER_INACTIVE_SEGMENTATIONS':
-      return { ...state, renderInactiveSegmentations: action.payload.value };
-    default:
-      return state;
-  }
-};
-
-export { reducer };

platform/ui/src/components/index.js

@@ -68,6 +68,7 @@ import InputRange from './InputRange';
 import InputNumber from './InputNumber';
 import CheckBox from './CheckBox';
 import LoadingIndicatorProgress from './LoadingIndicatorProgress';
+import LoadingIndicatorTotalPercent from './LoadingIndicatorTotalPercent';
 import ViewportActionBar from './ViewportActionBar';
 
 export {
@@ -104,6 +105,7 @@ export {
   LegacyCinePlayer,
   LegacyViewportActionBar,
   LoadingIndicatorProgress,
+  LoadingIndicatorTotalPercent,
   MeasurementTable,
   Modal,
   NavBar,

platform/ui/src/index.js

@@ -65,6 +65,7 @@ export {
   LegacyCinePlayer,
   LegacyViewportActionBar,
   LoadingIndicatorProgress,
+  LoadingIndicatorTotalPercent,
   MeasurementTable,
   Modal,
   NavBar,