TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Alireza authored and GitHub committed 2023-04-26 12:21:08 -04:00
1 parent 69d8e6a191
commit 66863281c4
60 files changed
+2488 -678
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/InputNumber/InputNumber.tsx
+30 -7
View File
@@ -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
+4 -1
View File
@@ -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
+54
View File
@@ -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
+2
View File
@@ -0,0 +1,2 @@
import LoadingIndicatorTotalPercent from './LoadingIndicatorTotalPercent';
export default LoadingIndicatorTotalPercent;
platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx
+18 -119
View File
@@ -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
+2 -29
View File
@@ -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
-22
View File
@@ -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
+2
View File
@@ -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
+1
View File
@@ -65,6 +65,7 @@ export {
LegacyCinePlayer,
LegacyViewportActionBar,
LoadingIndicatorProgress,
LoadingIndicatorTotalPercent,
MeasurementTable,
Modal,
NavBar,