fix(bugs): enhancements and bug fixes - more (#4043)
This commit is contained in:
Ibrahim
GitHub
parent
d3cdfd8506
commit
3754c224b4
@ -24,7 +24,7 @@ const Header = ({ title, tooltip }) => (
|
||||
content={<div className="text-white">{tooltip}</div>}
|
||||
position="bottom-left"
|
||||
tight={true}
|
||||
tooltipBoxClassName="max-w-xs"
|
||||
tooltipBoxClassName="max-w-xs p-2"
|
||||
>
|
||||
<Icon
|
||||
name="info-link"
|
||||
@ -120,7 +120,19 @@ const DynamicVolumeControls = ({
|
||||
/>
|
||||
</div>
|
||||
<div className={`mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`}>
|
||||
<Header title="Computed Operation" />
|
||||
<Header
|
||||
title="Computed Operation"
|
||||
tooltip={
|
||||
<div>
|
||||
Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be
|
||||
applied to the data set.
|
||||
<br></br> Range Slider: Choose the numeric range within which the operation will be
|
||||
performed.
|
||||
<br></br>Generate Button: Execute the chosen operation on the specified range of
|
||||
data.{' '}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ButtonGroup
|
||||
className={`mt-2 w-full `}
|
||||
separated={true}
|
||||
@ -187,7 +199,16 @@ function FrameControls({
|
||||
|
||||
return (
|
||||
<div className={computedView && 'ohif-disabled'}>
|
||||
<Header title="4D Controls" />
|
||||
<Header
|
||||
title="4D Controls"
|
||||
tooltip={
|
||||
<div>
|
||||
Play/Pause Button: Begin or pause the animation of the 4D visualization. <br></br> Frame
|
||||
Selector: Navigate through individual frames of the 4D data. <br></br> FPS (Frames Per
|
||||
Second) Selector: Adjust the playback speed of the animation.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="mt-3 flex justify-between">
|
||||
<IconButton
|
||||
className="bg-customblue-30 h-[26px] w-[58px] rounded-[4px]"
|
||||
|
||||
@ -415,6 +415,7 @@ function commandsModule({
|
||||
onClose: uiModalService.hide,
|
||||
cornerstoneViewportService,
|
||||
},
|
||||
containerDimensions: 'w-[70%] max-w-[900px]',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -102,6 +102,7 @@ export function Colorbar({
|
||||
|
||||
return (
|
||||
<div className="all-in-one-menu-item flex w-full justify-center">
|
||||
<div className="mr-2 w-[28px]"></div>
|
||||
<SwitchButton
|
||||
label="Display Color bar"
|
||||
checked={showColorbar}
|
||||
|
||||
@ -25,7 +25,7 @@ export function VolumeRenderingOptions({
|
||||
commandsManager={commandsManager}
|
||||
serviceManager={serviceManager}
|
||||
/>
|
||||
<div className="all-in-one-menu-item flex !h-[20px] w-full justify-start">
|
||||
<div className="all-in-one-menu-item mt-2 flex !h-[20px] w-full justify-start">
|
||||
<div className="text-aqua-pale text-[13px]">LIGHTING</div>
|
||||
</div>
|
||||
<div className="bg-primary-dark mt-1 mb-1 h-[2px] w-full"></div>
|
||||
|
||||
@ -52,6 +52,7 @@ export function WindowLevelActionMenu({
|
||||
} = colorbarProperties;
|
||||
const { colorbarService, cornerstoneViewportService } = serviceManager.services;
|
||||
const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
|
||||
const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
|
||||
const backgroundColor = viewportInfo.getViewportOptions().background;
|
||||
const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
|
||||
|
||||
@ -93,13 +94,7 @@ export function WindowLevelActionMenu({
|
||||
colorbarService.removeColorbar(viewportId);
|
||||
onSetColorbar();
|
||||
}, 0);
|
||||
}, [viewportId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (colorbarService.hasColorbar(viewportId)) {
|
||||
colorbarService.removeColorbar(viewportId);
|
||||
}
|
||||
}, [displaySets]);
|
||||
}, [viewportId, displaySets, viewport]);
|
||||
|
||||
useEffect(() => {
|
||||
setMenuKey(menuKey + 1);
|
||||
|
||||
@ -75,10 +75,7 @@ export default class ColorbarService extends PubSubService {
|
||||
|
||||
displaySetInstanceUIDs.forEach((displaySetInstanceUID, index) => {
|
||||
const actorEntry = actorEntries.find(entry => entry.uid.includes(displaySetInstanceUID));
|
||||
if (!actorEntry) {
|
||||
return;
|
||||
}
|
||||
const { uid: volumeId } = actorEntry;
|
||||
const volumeId = actorEntry?.uid;
|
||||
const properties = viewport?.getProperties(volumeId);
|
||||
const colormap = properties?.colormap;
|
||||
// if there's an initial colormap set, and no colormap on the viewport, set it
|
||||
@ -194,8 +191,10 @@ export default class ColorbarService extends PubSubService {
|
||||
private setViewportColormap(viewportId, displaySetInstanceUID, colormap, immediate = false) {
|
||||
const renderingEngine = getRenderingEngine(RENDERING_ENGINE_ID);
|
||||
const viewport = renderingEngine.getViewport(viewportId);
|
||||
const actorEntries = viewport.getActors();
|
||||
|
||||
const actorEntries = viewport?.getActors();
|
||||
if (!viewport || !actorEntries || actorEntries.length === 0) {
|
||||
return;
|
||||
}
|
||||
const setViewportProperties = (viewport, uid) => {
|
||||
const actorEntry = actorEntries.find(entry => entry.uid.includes(uid));
|
||||
const { actor: volumeActor, uid: volumeId } = actorEntry;
|
||||
|
||||
@ -11,6 +11,7 @@ function ToolbarButtonGroupWithServices({ groupId, items, onInteraction, size })
|
||||
label={item.label}
|
||||
disabled={item.disabled}
|
||||
className={item.className}
|
||||
disabledText={item.disabledText}
|
||||
id={item.id}
|
||||
size={size}
|
||||
onClick={() => {
|
||||
|
||||
@ -63,6 +63,7 @@ function ViewerHeader({ hotkeysManager, extensionManager, servicesManager, appCo
|
||||
show({
|
||||
title: t('UserPreferencesModal:User preferences'),
|
||||
content: UserPreferences,
|
||||
containerDimensions: 'w-[70%] max-w-[900px]',
|
||||
contentProps: {
|
||||
hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
|
||||
hotkeyDefinitions,
|
||||
|
||||
@ -448,7 +448,7 @@ const commandsModule = ({
|
||||
displaySetInstanceUID,
|
||||
onClose: UIModalService.hide,
|
||||
},
|
||||
containerDimensions: 'max-w-4xl max-h-4xl',
|
||||
containerDimensions: 'w-[70%] max-w-[900px]',
|
||||
title: 'DICOM Tag Browser',
|
||||
});
|
||||
},
|
||||
|
||||
@ -96,7 +96,7 @@ export default function PanelRoiThresholdSegmentation({ servicesManager, command
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="absolute bottom-1 flex cursor-pointer items-center justify-center text-blue-400 opacity-50 hover:opacity-80"
|
||||
className="absolute bottom-1 left-[50px] 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');
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>tool-layout-default</title>
|
||||
<g id="tool-layout-default" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<title>tool-layout</title>
|
||||
<g id="tool-layout" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
|
||||
<g id="Group" transform="translate(0.5, 0.5)">
|
||||
<path d="M5.45696821e-12,9.49450549 L5.45696821e-12,17.3947362 C5.45710348e-12,18.4993057 0.8954305,19.3947362 2,19.3947362 L10.861569,19.3947362 L10.861569,19.3947362" id="Path-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"></path>
|
||||
<path d="M9.49450549,0 L9.49450549,3.85708618 C9.49450549,4.96165568 10.389936,5.85708618 11.4945055,5.85708618 L19.195248,5.85708618 L19.195248,5.85708618" id="Path-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" transform="translate(14.3449, 2.9285) rotate(180) translate(-14.3449, -2.9285)"></path>
|
||||
<path d="M0.0997440877,-0.0997440877 L0.0997440877,7.80048659 C0.0997440877,8.90505609 0.995174588,9.80048659 2.09974409,9.80048659 L9.80048659,9.80048659 L9.80048659,9.80048659" id="Path-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" transform="translate(4.9501, 4.8504) rotate(90) translate(-4.9501, -4.8504)"></path>
|
||||
<g id="Group-10" opacity="0.550000012" transform="translate(2, 2)" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
|
||||
<g id="Group" transform="translate(0.5, 4)" stroke-linecap="round">
|
||||
<g id="Group-3" transform="translate(0, 0)" stroke="currentColor" stroke-width="1.25">
|
||||
<path d="M5.45696821e-12,9.49450549 L5.45696821e-12,17.3947362 C5.45710348e-12,18.4993057 0.8954305,19.3947362 2,19.3947362 L13.2443085,19.3947362 L13.2443085,19.3947362" id="Path-3"></path>
|
||||
<path d="M9.49450549,0 L9.49450549,4.91369247 L9.49450549,6 C9.49450549,7.1045695 10.389936,8 11.4945055,8 L19.195248,8 L19.195248,8" id="Path-3" transform="translate(14.3449, 4) rotate(180) translate(-14.3449, -4)"></path>
|
||||
<path d="M0.0997440877,-0.0997440877 L0.0997440877,7.80048659 C0.0997440877,8.90505609 0.995174588,9.80048659 2.09974409,9.80048659 L9.80048659,9.80048659 L9.80048659,9.80048659" id="Path-3" transform="translate(4.9501, 4.8504) rotate(90) translate(-4.9501, -4.8504)"></path>
|
||||
</g>
|
||||
<g id="Group-10" opacity="0.550000012" transform="translate(2, 2)" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="7.5" y1="14.5" x2="7.5" y2="0.5" id="Line-2"></line>
|
||||
<line x1="7" y1="14" x2="7" y2="1" id="Line-2" transform="translate(7, 7.5) rotate(90) translate(-7, -7.5)"></line>
|
||||
</g>
|
||||
<g id="gear" transform="translate(20.6492, 15.8718) rotate(-20) translate(-20.6492, -15.8718)translate(15.525, 10.1048)" stroke="#348CFD" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25">
|
||||
<g id="gear" transform="translate(21.0876, 17.2796) rotate(-20) translate(-21.0876, -17.2796)translate(15.9634, 11.5127)" stroke="#348CFD" stroke-linejoin="round" stroke-width="1.25">
|
||||
<circle id="Oval" cx="5.12378058" cy="5.76719178" r="1.28158482"></circle>
|
||||
<path d="M6.21361819,0.80762797 L6.59086967,2.04907966 C6.72061095,2.47639719 7.15892721,2.73042581 7.59419808,2.63056421 L8.85259487,2.33893009 C9.34216301,2.22858155 9.84650092,2.45011894 10.0964357,2.88530436 C10.3463705,3.32048979 10.2835655,3.86774756 9.94154064,4.23499782 L9.06128718,5.18481538 C8.75980718,5.51248709 8.75980718,6.0165454 9.06128718,6.3442171 L9.94154064,7.29403466 C10.2835655,7.66128493 10.3463705,8.2085427 10.0964357,8.64372812 C9.84650092,9.07891354 9.34216301,9.30045094 8.85259487,9.1901024 L7.59419808,8.89846827 C7.15663131,8.79632613 6.71524652,9.05279063 6.58730228,9.48352022 L6.2100508,10.7249719 C6.0649735,11.2053044 5.62242271,11.5339347 5.12065911,11.5339347 C4.61889551,11.5339347 4.17634472,11.2053044 4.03126742,10.7249719 L3.65669148,9.48352022 C3.52807698,9.05567912 3.08963152,8.80095947 2.65425492,8.90114382 L1.39585813,9.19277794 C0.90628999,9.30312648 0.401952083,9.08158909 0.152017275,8.64640366 C-0.0979175321,8.21121824 -0.035112502,7.66396047 0.306912358,7.29671021 L1.18716582,6.34689264 C1.48864582,6.01922094 1.48864582,5.51516263 1.18716582,5.18749093 L0.306912358,4.23767336 C-0.035112502,3.8704231 -0.0979175321,3.32316533 0.152017275,2.88797991 C0.401952083,2.45279448 0.90628999,2.23125709 1.39585813,2.34160563 L2.65425492,2.63323975 C3.08937078,2.73350334 3.52770594,2.47923776 3.65669148,2.0517552 L4.03483481,0.810303513 C4.17932126,0.32979188 4.62146882,0.000617032116 5.12323309,0 C5.62499736,-0.000615299293 6.06795204,0.327472644 6.21361819,0.80762797 Z" id="Path"></path>
|
||||
</g>
|
||||
<polygon id="w/l-chevron" stroke="#348CFD" stroke-linejoin="round" transform="translate(20.5, 25.25) rotate(-360) translate(-20.5, -25.25)" points="20.5 26.75 18 24.1184211 18.35 23.75 20.5 26.0131579 22.65 23.75 23 24.1184211"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.5 KiB |
@ -1,22 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>tool-layout</title>
|
||||
<g id="tool-layout" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
|
||||
<g id="Group" transform="translate(0.5, 4)" stroke-linecap="round">
|
||||
<g id="Group-3" transform="translate(0, 0)" stroke="currentColor" stroke-width="1.25">
|
||||
<path d="M5.45696821e-12,9.49450549 L5.45696821e-12,17.3947362 C5.45710348e-12,18.4993057 0.8954305,19.3947362 2,19.3947362 L13.2443085,19.3947362 L13.2443085,19.3947362" id="Path-3"></path>
|
||||
<path d="M9.49450549,0 L9.49450549,4.91369247 L9.49450549,6 C9.49450549,7.1045695 10.389936,8 11.4945055,8 L19.195248,8 L19.195248,8" id="Path-3" transform="translate(14.3449, 4) rotate(180) translate(-14.3449, -4)"></path>
|
||||
<path d="M0.0997440877,-0.0997440877 L0.0997440877,7.80048659 C0.0997440877,8.90505609 0.995174588,9.80048659 2.09974409,9.80048659 L9.80048659,9.80048659 L9.80048659,9.80048659" id="Path-3" transform="translate(4.9501, 4.8504) rotate(90) translate(-4.9501, -4.8504)"></path>
|
||||
</g>
|
||||
<g id="Group-10" opacity="0.550000012" transform="translate(2, 2)" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="7.5" y1="14.5" x2="7.5" y2="0.5" id="Line-2"></line>
|
||||
<line x1="7" y1="14" x2="7" y2="1" id="Line-2" transform="translate(7, 7.5) rotate(90) translate(-7, -7.5)"></line>
|
||||
</g>
|
||||
<g id="gear" transform="translate(21.0876, 17.2796) rotate(-20) translate(-21.0876, -17.2796)translate(15.9634, 11.5127)" stroke="#348CFD" stroke-linejoin="round" stroke-width="1.25">
|
||||
<circle id="Oval" cx="5.12378058" cy="5.76719178" r="1.28158482"></circle>
|
||||
<path d="M6.21361819,0.80762797 L6.59086967,2.04907966 C6.72061095,2.47639719 7.15892721,2.73042581 7.59419808,2.63056421 L8.85259487,2.33893009 C9.34216301,2.22858155 9.84650092,2.45011894 10.0964357,2.88530436 C10.3463705,3.32048979 10.2835655,3.86774756 9.94154064,4.23499782 L9.06128718,5.18481538 C8.75980718,5.51248709 8.75980718,6.0165454 9.06128718,6.3442171 L9.94154064,7.29403466 C10.2835655,7.66128493 10.3463705,8.2085427 10.0964357,8.64372812 C9.84650092,9.07891354 9.34216301,9.30045094 8.85259487,9.1901024 L7.59419808,8.89846827 C7.15663131,8.79632613 6.71524652,9.05279063 6.58730228,9.48352022 L6.2100508,10.7249719 C6.0649735,11.2053044 5.62242271,11.5339347 5.12065911,11.5339347 C4.61889551,11.5339347 4.17634472,11.2053044 4.03126742,10.7249719 L3.65669148,9.48352022 C3.52807698,9.05567912 3.08963152,8.80095947 2.65425492,8.90114382 L1.39585813,9.19277794 C0.90628999,9.30312648 0.401952083,9.08158909 0.152017275,8.64640366 C-0.0979175321,8.21121824 -0.035112502,7.66396047 0.306912358,7.29671021 L1.18716582,6.34689264 C1.48864582,6.01922094 1.48864582,5.51516263 1.18716582,5.18749093 L0.306912358,4.23767336 C-0.035112502,3.8704231 -0.0979175321,3.32316533 0.152017275,2.88797991 C0.401952083,2.45279448 0.90628999,2.23125709 1.39585813,2.34160563 L2.65425492,2.63323975 C3.08937078,2.73350334 3.52770594,2.47923776 3.65669148,2.0517552 L4.03483481,0.810303513 C4.17932126,0.32979188 4.62146882,0.000617032116 5.12323309,0 C5.62499736,-0.000615299293 6.06795204,0.327472644 6.21361819,0.80762797 Z" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
@ -19,7 +19,10 @@ const AdvancedToolbox = ({ title, items }) => {
|
||||
const activeItemOptions = items?.find(item => item.name === activeItemName)?.options;
|
||||
|
||||
return (
|
||||
<PanelSection title={title}>
|
||||
<PanelSection
|
||||
title={title}
|
||||
childrenClassName="flex-shrink-0"
|
||||
>
|
||||
<div className="flex flex-col bg-black">
|
||||
<div className="bg-primary-dark mt-0.5 flex flex-wrap py-2">
|
||||
{items?.map(item => {
|
||||
|
||||
@ -37,7 +37,7 @@ const ButtonGroup = ({
|
||||
return (
|
||||
<div
|
||||
className={classnames(wrapperClasses, ' text-[13px]', {
|
||||
'border-secondary-light rounded-[5px] border bg-black': !separated,
|
||||
' rounded-md bg-black': !separated,
|
||||
})}
|
||||
>
|
||||
{!separated && (
|
||||
@ -52,7 +52,7 @@ const ButtonGroup = ({
|
||||
? 'bg-customblue-40 text-white'
|
||||
: 'text-primary-active bg-black',
|
||||
child.props.className,
|
||||
disabled ? 'ohif-disabled' : ''
|
||||
child.props.disabled ? 'ohif-disabled' : ''
|
||||
),
|
||||
onClick: e => {
|
||||
child.props.onClick && child.props.onClick(e);
|
||||
@ -76,7 +76,7 @@ const ButtonGroup = ({
|
||||
? 'bg-customblue-40 text-white'
|
||||
: 'text-primary-active bg-black border-secondary-light rounded-[5px] border',
|
||||
child.props.className,
|
||||
disabled ? 'ohif-disabled' : ''
|
||||
child.props.disabled ? 'ohif-disabled' : ''
|
||||
),
|
||||
onClick: e => {
|
||||
child.props.onClick && child.props.onClick(e);
|
||||
|
||||
@ -94,7 +94,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="align-items-center hover:bg-primary-dark flex cursor-pointer justify-center gap-1 rounded-lg"
|
||||
className="hover:bg-primary-dark flex cursor-pointer items-center justify-center gap-1 rounded-lg"
|
||||
onClick={handleOnClick}
|
||||
>
|
||||
<Icon
|
||||
|
||||
@ -30,7 +30,7 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-2">
|
||||
<div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-1">
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
<ListItem
|
||||
|
||||
@ -20,20 +20,21 @@ const ActiveSegmentationConfig = ({
|
||||
}) => {
|
||||
const { t } = useTranslation('SegmentationTable');
|
||||
return (
|
||||
<div className="flex justify-between px-3 pt-[13px] text-[12px]">
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="flex justify-between gap-[5px] px-2 pt-[13px] text-[12px]">
|
||||
<div className="flex h-[89px] flex-col items-start">
|
||||
<div className="mb-[12px] text-white">{t('Active')}</div>
|
||||
<CheckBox
|
||||
label={t('Outline')}
|
||||
checked={config.renderOutline}
|
||||
labelClassName="text-[12px] pl-1 pt-1"
|
||||
labelClassName="text-[12px]"
|
||||
className="mb-[9px]"
|
||||
onChange={setRenderOutline}
|
||||
/>
|
||||
<div className="mt-2"></div>
|
||||
<CheckBox
|
||||
label={t('Fill')}
|
||||
checked={config.renderFill}
|
||||
labelClassName="text-[12px] pl-1 pt-1"
|
||||
labelClassName="text-[12px]"
|
||||
className="mb-[9px]"
|
||||
onChange={setRenderFill}
|
||||
/>
|
||||
@ -47,9 +48,9 @@ const ActiveSegmentationConfig = ({
|
||||
value={getRoundedValue(config.outlineOpacity * 100)}
|
||||
onChange={setOutlineOpacityActive}
|
||||
step={1}
|
||||
containerClassName="mt-[4px] mb-[9px]"
|
||||
containerClassName="mt-[4px] mb-[9px] w-[100px]"
|
||||
inputClassName="w-[64px]"
|
||||
labelClassName="text-white text-[12px]"
|
||||
labelClassName="text-white text-[12px] whitespace-nowrap"
|
||||
unit="%"
|
||||
/>
|
||||
<InputRange
|
||||
@ -58,9 +59,9 @@ const ActiveSegmentationConfig = ({
|
||||
value={getRoundedValue(config.fillAlpha * 100)}
|
||||
onChange={setFillAlpha}
|
||||
step={1}
|
||||
containerClassName="mt-[4px] mb-[9px]"
|
||||
containerClassName="mt-[4px] mb-[9px] w-[100px]"
|
||||
inputClassName="w-[64px]"
|
||||
labelClassName="text-white text-[12px]"
|
||||
labelClassName="text-white text-[12px] whitespace-nowrap"
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -70,7 +70,7 @@ const SegmentItem = ({
|
||||
'border border-l-0 border-transparent': !isActive,
|
||||
})}
|
||||
style={{
|
||||
width: 'calc(100% - 40px)',
|
||||
width: 'calc(100% - 28px)',
|
||||
}}
|
||||
>
|
||||
<div className="bg-primary-dark flex h-full flex-grow items-center">
|
||||
@ -93,7 +93,7 @@ const SegmentItem = ({
|
||||
</div>
|
||||
<div
|
||||
className={classnames(
|
||||
'absolute right-3 top-0 flex flex-row-reverse rounded-lg pt-[3px]',
|
||||
'absolute right-[8px] top-0 flex flex-row-reverse rounded-lg pt-[3px]',
|
||||
{}
|
||||
)}
|
||||
>
|
||||
|
||||
@ -75,7 +75,7 @@ const SegmentationGroupTable = ({
|
||||
const { t } = useTranslation('SegmentationTable');
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
|
||||
<div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
|
||||
<PanelSection
|
||||
title={t('Segmentation')}
|
||||
actionIcons={
|
||||
|
||||
@ -67,7 +67,7 @@ const SegmentationGroupTableExpanded = ({
|
||||
const { t } = useTranslation('SegmentationTable');
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
|
||||
<div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
|
||||
<PanelSection
|
||||
title={t('Segmentation')}
|
||||
actionIcons={
|
||||
|
||||
@ -31,7 +31,7 @@ const classes = {
|
||||
isActive
|
||||
? isExpanded
|
||||
? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light'
|
||||
: 'border-primary-light bg-primary-light border-2 rounded-md'
|
||||
: 'border-primary-light bg-primary-light rounded-md'
|
||||
: `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`
|
||||
),
|
||||
Secondary: ({ isExpanded, primary }) =>
|
||||
|
||||
@ -40,9 +40,9 @@ const StudyItem = ({
|
||||
{numInstances}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row py-1">
|
||||
<div className="text-l pr-5 text-blue-300">{modalities}</div>
|
||||
<div className="truncate-2-lines break-words text-base text-blue-300">{description}</div>
|
||||
<div className="flex flex-row items-center py-1">
|
||||
<div className="text-l flex items-center pr-5 text-blue-300">{modalities}</div>
|
||||
<div className="flex items-center break-words text-base text-blue-300">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
{!!trackedSeries && (
|
||||
|
||||
@ -39,14 +39,14 @@ const ToolbarButton = ({
|
||||
<Tooltip
|
||||
isSticky={shouldShowDropdown}
|
||||
content={shouldShowDropdown ? dropdownContent : label}
|
||||
secondaryContent={disabledText}
|
||||
secondaryContent={disabled ? disabledText : null}
|
||||
tight={shouldShowDropdown}
|
||||
className={toolTipClassNameToUse}
|
||||
isDisabled={disableToolTip}
|
||||
>
|
||||
<IconButton
|
||||
size={sizeToUse}
|
||||
className={classNames(className, disabled ? '!cursor-default' : '')}
|
||||
className={classNames(className, disabled ? 'ohif-disabled' : '')}
|
||||
onClick={() => {
|
||||
onInteraction({
|
||||
itemId: id,
|
||||
|
||||
@ -107,6 +107,12 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
|
||||
api.handleToolOptionChange(toolName, optionName, newValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
api.handleToolSelect(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ToolboxUI
|
||||
{...props}
|
||||
|
||||
@ -46,38 +46,20 @@ function ToolboxUI(props) {
|
||||
key={id}
|
||||
className={classnames({
|
||||
[toolClasses]: true,
|
||||
'flex flex-col items-center justify-center': true,
|
||||
'border-secondary-light flex flex-col items-center justify-center rounded-md border':
|
||||
true,
|
||||
})}
|
||||
>
|
||||
{componentProps.disabled ? (
|
||||
<Tooltip
|
||||
position="bottom"
|
||||
content={componentProps.label}
|
||||
secondaryContent={componentProps.disabledText}
|
||||
>
|
||||
<div className="bg-black">
|
||||
<Component
|
||||
{...componentProps}
|
||||
{...props}
|
||||
id={id}
|
||||
servicesManager={servicesManager}
|
||||
onInteraction={onInteraction}
|
||||
size="toolbox"
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<div className="bg-black">
|
||||
<Component
|
||||
{...componentProps}
|
||||
{...props}
|
||||
id={id}
|
||||
servicesManager={servicesManager}
|
||||
onInteraction={onInteraction}
|
||||
size="toolbox"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex rounded-md bg-black">
|
||||
<Component
|
||||
{...componentProps}
|
||||
{...props}
|
||||
id={id}
|
||||
servicesManager={servicesManager}
|
||||
onInteraction={onInteraction}
|
||||
size="toolbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -90,7 +72,16 @@ function ToolboxUI(props) {
|
||||
);
|
||||
};
|
||||
|
||||
return useCollapsedPanel ? <PanelSection title={title}>{render()}</PanelSection> : render();
|
||||
return useCollapsedPanel ? (
|
||||
<PanelSection
|
||||
childrenClassName="flex-shrink-0"
|
||||
title={title}
|
||||
>
|
||||
{render()}
|
||||
</PanelSection>
|
||||
) : (
|
||||
render()
|
||||
);
|
||||
}
|
||||
|
||||
export { ToolboxUI };
|
||||
|
||||
@ -141,7 +141,7 @@ const WindowLevel = ({
|
||||
</div>
|
||||
</div>
|
||||
{showOpacitySlider && (
|
||||
<div className="flex items-center justify-between text-base">
|
||||
<div className="flex items-center justify-between gap-2 text-base">
|
||||
<div className="text-xs text-white">Opacity</div>
|
||||
<InputRange
|
||||
inputClassName="grow"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user