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

ui(panels): Tool option components and responsive behavior for ROIThreshold (#4876)

Browse Source
This commit is contained in:
Dan Rukas 2025-03-20 15:13:59 -04:00 committed by GitHub
parent 5293253ecd
commit 782a6a0c88
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 147 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx
View File

@ -1,5 +1,14 @@
import React from 'react'; import React from 'react';
import { Input, Label, Select, LegacyButton, LegacyButtonGroup } from '@ohif/ui'; import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
Label,
Input,
Button,
} from '@ohif/ui-next';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
export const ROI_STAT = 'roi_stat'; export const ROI_STAT = 'roi_stat';
@ -14,17 +23,15 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
const { t } = useTranslation('ROIThresholdConfiguration'); const { t } = useTranslation('ROIThresholdConfiguration');
return ( return (
<div className="bg-primary-dark flex flex-col space-y-4"> <div className="bg-primary-dark flex flex-col space-y-4 p-px">
<div className="flex items-end space-x-2"> <div className="flex items-end space-x-3">
<div className="flex w-1/2 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
{/* The original panel design does not include "Strategy," but it was found in the code.
Need to determine if it should be included or removed.
<Label className="my-2">{t('Strategy')}</Label> */}
<Select <Select
label={t('Strategy')}
closeMenuOnSelect={true}
className="border-primary-main mr-2 bg-black text-white "
options={options}
placeholder={options.find(option => option.value === config.strategy).placeHolder}
value={config.strategy} value={config.strategy}
onChange={({ value }) => { onValueChange={value => {
dispatch({ dispatch({
type: 'setStrategy', type: 'setStrategy',
payload: { payload: {
@ -32,156 +39,146 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
}, },
}); });
}} }}
/> >
<SelectTrigger className="w-full">
<SelectValue
placeholder={options.find(option => option.value === config.strategy)?.placeHolder}
/>
</SelectTrigger>
<SelectContent className="">
{options.map(option => (
<SelectItem
key={option.value}
value={option.value}
>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
<div className="w-1/2"> <div className="flex-shrink-0">
{/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/} <div className="flex justify-end space-x-2">
<LegacyButtonGroup> <Button
<LegacyButton variant="secondary"
size="initial"
className="px-2 py-2 text-base text-white"
color="primaryLight"
variant="outlined"
onClick={() => runCommand('setStartSliceForROIThresholdTool')} onClick={() => runCommand('setStartSliceForROIThresholdTool')}
> >
{t('Start')} {t('Start')}
</LegacyButton> </Button>
<LegacyButton <Button
size="initial" variant="secondary"
color="primaryLight"
variant="outlined"
className="px-2 py-2 text-base text-white"
onClick={() => runCommand('setEndSliceForROIThresholdTool')} onClick={() => runCommand('setEndSliceForROIThresholdTool')}
> >
{t('End')} {t('End')}
</LegacyButton> </Button>
</LegacyButtonGroup> </div>
</div> </div>
</div> </div>
{config.strategy === ROI_STAT && ( {config.strategy === ROI_STAT && (
<Input <div className="mr-0">
label={t('Percentage of Max SUV')} <div className="mb-2">
labelClassName="text-[13px] font-inter text-white" <Label>{t('Percentage of Max SUV')}</Label>
className="border-primary-main bg-black" </div>
type="text" <Input
containerClassName="mr-2" className="w-full"
value={config.weight} type="text"
onChange={e => { value={config.weight}
dispatch({ onChange={e => {
type: 'setWeight', dispatch({
payload: { type: 'setWeight',
weight: e.target.value, payload: {
}, weight: e.target.value,
}); },
}} });
/> }}
/>
</div>
)} )}
{config.strategy !== ROI_STAT && ( {config.strategy !== ROI_STAT && (
<div className="mr-2 text-sm"> <div className="mr-2 text-sm">
<table> <div className="flex flex-col space-y-2">
<tbody> {/* Header */}
<tr className="mt-2"> <Label>Lower & Upper Ranges</Label>
<td
className="pr-4" {/* CT Row */}
colSpan="3" <div className="flex items-center">
> <div className="w-10 text-left">
<Label <Label>CT</Label>
className="font-inter text-[13px] text-white" </div>
text="Lower & Upper Ranges" <div className="flex flex-1 space-x-2">
></Label> <div className="flex-1">
</td> <Input
</tr> className="w-full"
<tr className="mt-2"> type="text"
<td className="pr-4 pt-2 text-center"> value={config.ctLower}
<Label onChange={e => {
className="text-white" dispatch({
text="CT" type: 'setThreshold',
></Label> payload: {
</td> ctLower: e.target.value,
<td> },
<div className="flex justify-between"> });
<Input }}
label={t('')} />
labelClassName="text-white" </div>
className="border-primary-main mt-2 bg-black" <div className="flex-1">
type="text" <Input
containerClassName="mr-2" className="w-full"
value={config.ctLower} type="text"
onChange={e => { value={config.ctUpper}
dispatch({ onChange={e => {
type: 'setThreshold', dispatch({
payload: { type: 'setThreshold',
ctLower: e.target.value, payload: {
}, ctUpper: e.target.value,
}); },
}} });
/> }}
<Input />
label={t('')} </div>
labelClassName="text-white" </div>
className="border-primary-main mt-2 bg-black" </div>
type="text"
containerClassName="mr-2" {/* PT Row */}
value={config.ctUpper} <div className="flex items-center">
onChange={e => { <div className="w-10 text-left">
dispatch({ <Label>PT</Label>
type: 'setThreshold', </div>
payload: { <div className="flex flex-1 space-x-2">
ctUpper: e.target.value, <div className="flex-1">
}, <Input
}); className="w-full"
}} type="text"
/> value={config.ptLower}
</div> onChange={e => {
</td> dispatch({
</tr> type: 'setThreshold',
<tr> payload: {
<td className="pr-4 pt-2 text-center"> ptLower: e.target.value,
<Label },
className="text-white" });
text="PT" }}
></Label> />
</td> </div>
<td> <div className="flex-1">
<div className="flex justify-between"> <Input
<Input className="w-full"
label={t('')} type="text"
labelClassName="text-white" value={config.ptUpper}
className="border-primary-main mt-2 bg-black" onChange={e => {
type="text" dispatch({
containerClassName="mr-2" type: 'setThreshold',
value={config.ptLower} payload: {
onChange={e => { ptUpper: e.target.value,
dispatch({ },
type: 'setThreshold', });
payload: { }}
ptLower: e.target.value, />
}, </div>
}); </div>
}} </div>
/> </div>
<Input
label={t('')}
labelClassName="text-white"
className="border-primary-main mt-2 bg-black"
type="text"
containerClassName="mr-2"
value={config.ptUpper}
onChange={e => {
dispatch({
type: 'setThreshold',
payload: {
ptUpper: e.target.value,
},
});
}}
/>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
)} )}
</div> </div>

7
extensions/tmtv/src/Panels/RectangleROIOptions.tsx
View File

@ -1,5 +1,5 @@
import React, { useCallback, useReducer } from 'react'; import React, { useCallback, useReducer } from 'react';
import { Button } from '@ohif/ui'; import { Button } from '@ohif/ui-next';
import ROIThresholdConfiguration, { import ROIThresholdConfiguration, {
ROI_STAT, ROI_STAT,
} from './PanelROIThresholdSegmentation/ROIThresholdConfiguration'; } from './PanelROIThresholdSegmentation/ROIThresholdConfiguration';
@ -80,7 +80,7 @@ function RectangleROIOptions() {
}, [activeSegmentation, config]); }, [activeSegmentation, config]);
return ( return (
<div className="invisible-scrollbar mb-2 flex flex-col overflow-y-auto overflow-x-hidden"> <div className="invisible-scrollbar mb-1 flex flex-col overflow-y-auto overflow-x-hidden">
<ROIThresholdConfiguration <ROIThresholdConfiguration
config={config} config={config}
dispatch={dispatch} dispatch={dispatch}
@ -88,7 +88,8 @@ function RectangleROIOptions() {
/> />
{activeSegmentation && ( {activeSegmentation && (
<Button <Button
className="mt-2 !h-[26px] !w-[75px]" variant="default"
className="my-3 mr-auto w-20"
onClick={handleROIThresholding} onClick={handleROIThresholding}
> >
Run Run