fix(bugs): enhancements and bug fixes - more (#4043)

This commit is contained in:
Ibrahim authored and GitHub committed 2024-04-17 14:42:40 -04:00
1 parent d3cdfd8506
commit 3754c224b4
26 files changed
+105 -106

No files matched your search

@@ -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"