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

feat(worklist): New worklist buttons and tooltips (#3989)

Browse Source
This commit is contained in:
Ibrahim 2024-03-18 20:27:12 -04:00 committed by GitHub
parent 6b79dff5c1
commit 9bcd1ae6f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 120 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
modes/basic-dev-mode/src/index.js
View File

@ -133,8 +133,15 @@ function modeFactory({ modeConfiguration }) {
]); ]);
}, },
onModeExit: ({ servicesManager }) => { onModeExit: ({ servicesManager }) => {
const { toolGroupService, measurementService, toolbarService } = servicesManager.services; const {
toolGroupService,
measurementService,
toolbarService,
uiDialogService,
uiModalService,
} = servicesManager.services;
uiDialogService.dismissAll();
uiModalService.hide();
toolGroupService.destroy(); toolGroupService.destroy();
}, },
validationTags: { validationTags: {
@ -145,7 +152,10 @@ function modeFactory({ modeConfiguration }) {
const modalities_list = modalities.split('\\'); const modalities_list = modalities.split('\\');
// Slide Microscopy modality not supported by basic mode yet // Slide Microscopy modality not supported by basic mode yet
return !modalities_list.includes('SM'); return {
valid: !modalities_list.includes('SM'),
description: 'The mode does not support the following modalities: SM',
};
}, },
routes: [ routes: [
{ {

12
modes/basic-test-mode/src/index.ts
View File

@ -143,8 +143,12 @@ function modeFactory() {
syncGroupService, syncGroupService,
segmentationService, segmentationService,
cornerstoneViewportService, cornerstoneViewportService,
uiDialogService,
uiModalService,
} = servicesManager.services; } = servicesManager.services;
uiDialogService.dismissAll();
uiModalService.hide();
toolGroupService.destroy(); toolGroupService.destroy();
syncGroupService.destroy(); syncGroupService.destroy();
segmentationService.destroy(); segmentationService.destroy();
@ -159,8 +163,12 @@ function modeFactory() {
const modalities_list = modalities.split('\\'); const modalities_list = modalities.split('\\');
// Exclude non-image modalities // Exclude non-image modalities
return !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1) return {
.length; valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
.length,
description:
'The mode does not support studies that ONLY include the following modalities: SM, ECG, SR, SEG',
};
}, },
routes: [ routes: [
{ {

12
modes/longitudinal/src/index.js
View File

@ -179,11 +179,15 @@ function modeFactory({ modeConfiguration }) {
toolbarService, toolbarService,
segmentationService, segmentationService,
cornerstoneViewportService, cornerstoneViewportService,
uiDialogService,
uiModalService,
} = servicesManager.services; } = servicesManager.services;
_activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe()); _activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe());
_activatePanelTriggersSubscriptions = []; _activatePanelTriggersSubscriptions = [];
uiDialogService.dismissAll();
uiModalService.hide();
toolGroupService.destroy(); toolGroupService.destroy();
syncGroupService.destroy(); syncGroupService.destroy();
segmentationService.destroy(); segmentationService.destroy();
@ -198,8 +202,12 @@ function modeFactory({ modeConfiguration }) {
const modalities_list = modalities.split('\\'); const modalities_list = modalities.split('\\');
// Exclude non-image modalities // Exclude non-image modalities
return !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1) return {
.length; valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
.length,
description:
'The mode does not support studies that ONLY include the following modalities: SM, ECG, SR, SEG, RTSTRUCT',
};
}, },
routes: [ routes: [
{ {

10
modes/microscopy/src/index.tsx
View File

@ -56,8 +56,10 @@ function modeFactory({ modeConfiguration }) {
}, },
onModeExit: ({ servicesManager }) => { onModeExit: ({ servicesManager }) => {
const { toolbarService } = servicesManager.services; const { toolbarService, uiDialogService, uiModalService } = servicesManager.services;
uiDialogService.dismissAll();
uiModalService.hide();
toolbarService.reset(); toolbarService.reset();
}, },
@ -69,8 +71,10 @@ function modeFactory({ modeConfiguration }) {
isValidMode: ({ modalities }) => { isValidMode: ({ modalities }) => {
const modalities_list = modalities.split('\\'); const modalities_list = modalities.split('\\');
// Slide Microscopy and ECG modality not supported by basic mode yet return {
return modalities_list.includes('SM'); valid: modalities_list.includes('SM'),
description: 'Microscopy mode only supports the SM modality',
};
}, },
routes: [ routes: [

11
modes/segmentation/src/index.tsx
View File

@ -106,8 +106,12 @@ function modeFactory({ modeConfiguration }) {
toolbarService, toolbarService,
segmentationService, segmentationService,
cornerstoneViewportService, cornerstoneViewportService,
uiDialogService,
uiModalService,
} = servicesManager.services; } = servicesManager.services;
uiDialogService.dismissAll();
uiModalService.hide();
toolGroupService.destroy(); toolGroupService.destroy();
syncGroupService.destroy(); syncGroupService.destroy();
segmentationService.destroy(); segmentationService.destroy();
@ -127,11 +131,10 @@ function modeFactory({ modeConfiguration }) {
// Don't show the mode if the selected studies have only one modality // Don't show the mode if the selected studies have only one modality
// that is not supported by the mode // that is not supported by the mode
const modalitiesArray = modalities.split('\\'); const modalitiesArray = modalities.split('\\');
if (modalitiesArray.length === 1) { return {
return !['SM', 'US', 'MG', 'OT', 'DOC', 'CR'].includes(modalitiesArray[0]); valid: modalitiesArray.length === 1 ? !['SM', 'US', 'MG', 'OT', 'DOC', 'CR'].includes(modalitiesArray[0]) : true,
description: 'The mode does not support studies that ONLY include the following modalities: SM, US, MG, OT, DOC, CR',
} }
return true;
}, },
/** /**
* Mode Routes are used to define the mode's behavior. A list of Mode Route * Mode Routes are used to define the mode's behavior. A list of Mode Route

9
modes/tmtv/src/index.js
View File

@ -165,9 +165,13 @@ function modeFactory({ modeConfiguration }) {
syncGroupService, syncGroupService,
segmentationService, segmentationService,
cornerstoneViewportService, cornerstoneViewportService,
uiDialogService,
uiModalService,
} = servicesManager.services; } = servicesManager.services;
unsubscriptions.forEach(unsubscribe => unsubscribe()); unsubscriptions.forEach(unsubscribe => unsubscribe());
uiDialogService.dismissAll();
uiModalService.hide();
toolGroupService.destroy(); toolGroupService.destroy();
syncGroupService.destroy(); syncGroupService.destroy();
segmentationService.destroy(); segmentationService.destroy();
@ -193,7 +197,10 @@ function modeFactory({ modeConfiguration }) {
study.studyInstanceUid !== '1.3.6.1.4.1.12842.1.1.14.3.20220915.105557.468.2963630849'; study.studyInstanceUid !== '1.3.6.1.4.1.12842.1.1.14.3.20220915.105557.468.2963630849';
// there should be both CT and PT modalities and the modality should not be SM // there should be both CT and PT modalities and the modality should not be SM
return isValid; return {
valid: isValid,
description: 'The mode requires both PT and CT series in the study',
};
}, },
routes: [ routes: [
{ {

1
platform/app/public/config/default.js
View File

@ -12,6 +12,7 @@ window.config = {
showCPUFallbackMessage: true, showCPUFallbackMessage: true,
showLoadingIndicator: true, showLoadingIndicator: true,
strictZSpacingForVolumeViewport: true, strictZSpacingForVolumeViewport: true,
groupEnabledModesFirst: true,
maxNumRequests: { maxNumRequests: {
interaction: 100, interaction: 100,
thumbnail: 75, thumbnail: 75,

47
platform/app/src/routes/WorkList/WorkList.tsx
View File

@ -27,6 +27,8 @@ import {
UserPreferences, UserPreferences,
LoadingIndicatorProgress, LoadingIndicatorProgress,
useSessionStorage, useSessionStorage,
Button,
ButtonEnums,
} from '@ohif/ui'; } from '@ohif/ui';
import i18n from '@ohif/i18n'; import i18n from '@ohif/i18n';
@ -258,7 +260,9 @@ function WorkList({
const studyTime = const studyTime =
time && time &&
moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).isValid() && moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).isValid() &&
moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).format(t('Common:localTimeFormat', 'hh:mm A')); moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).format(
t('Common:localTimeFormat', 'hh:mm A')
);
return { return {
dataCY: `studyRow-${studyInstanceUid}`, dataCY: `studyRow-${studyInstanceUid}`,
@ -346,10 +350,24 @@ function WorkList({
} }
> >
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
{appConfig.loadedModes.map((mode, i) => { {(appConfig.groupEnabledModesFirst
? appConfig.loadedModes.sort((a, b) => {
const isValidA = a.isValidMode({
modalities: modalities.replaceAll('/', '\\'),
study,
}).valid;
const isValidB = b.isValidMode({
modalities: modalities.replaceAll('/', '\\'),
study,
}).valid;
return isValidB - isValidA;
})
: appConfig.loadedModes
).map((mode, i) => {
const modalitiesToCheck = modalities.replaceAll('/', '\\'); const modalitiesToCheck = modalities.replaceAll('/', '\\');
const isValidMode = mode.isValidMode({ const { valid: isValidMode, description: invalidModeDescription } = mode.isValidMode({
modalities: modalitiesToCheck, modalities: modalitiesToCheck,
study, study,
}); });
@ -382,16 +400,29 @@ function WorkList({
// to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`} // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
> >
{/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/} {/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
<LegacyButton <Button
rounded="full" type={ButtonEnums.type.primary}
variant={isValidMode ? 'contained' : 'disabled'} size={ButtonEnums.size.medium}
disabled={!isValidMode} disabled={!isValidMode}
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info startIconTooltip={
!isValidMode ? (
<div className="font-inter flex w-[206px] whitespace-normal text-left text-xs font-normal text-white ">
{invalidModeDescription}
</div>
) : null
}
startIcon={
<Icon
className="!h-[20px] !w-[20px] text-black"
name={isValidMode ? 'launch-arrow' : 'launch-info'}
/>
} // launch-arrow | launch-info
onClick={() => {}} onClick={() => {}}
data-cy={`mode-${mode.routeName}-${studyInstanceUid}`} data-cy={`mode-${mode.routeName}-${studyInstanceUid}`}
className={isValidMode ? 'text-[13px]' : 'bg-[#222d44] text-[13px]'}
> >
{mode.displayName} {mode.displayName}
</LegacyButton> </Button>
</Link> </Link>
) )
); );

4
platform/cli/templates/mode/src/index.tsx
View File

@ -98,8 +98,12 @@ function modeFactory({ modeConfiguration }) {
toolbarService, toolbarService,
segmentationService, segmentationService,
cornerstoneViewportService, cornerstoneViewportService,
uiDialogService,
uiModalService,
} = servicesManager.services; } = servicesManager.services;
uiDialogService.dismissAll();
uiModalService.hide();
toolGroupService.destroy(); toolGroupService.destroy();
syncGroupService.destroy(); syncGroupService.destroy();
segmentationService.destroy(); segmentationService.destroy();

6
platform/ui/src/assets/icons/launch-arrow.svg
View File

@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill-rule="evenodd"> <g fill-rule="evenodd">
<circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="0.2"/> <circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="1"/>
<path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/> <path fill="#348cfd" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
<path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/> <path fill="#348cfd" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 648 B

After

Width:  |  Height:  |  Size: 636 B

9
platform/ui/src/assets/icons/launch-info.svg
View File

@ -1,7 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22"> <svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22">
<g fill="currentColor" fill-rule="evenodd"> <g fill-rule="evenodd">
<path d="M10.5.31C4.87.31.308 4.872.308 10.501c0 5.629 4.563 10.192 10.192 10.192 5.63 0 10.192-4.563 10.192-10.192C20.692 4.872 16.13.309 10.5.309zm0 1c5.077 0 9.192 4.115 9.192 9.192 0 5.076-4.115 9.192-9.192 9.192s-9.192-4.116-9.192-9.192c0-5.077 4.115-9.193 9.192-9.193z" transform="translate(0 .5)"/> <circle cx="10.5" cy="11" r="10.192" fill="#000000"/>
<path d="M9.692 8.385c.677 0 1.234.514 1.301 1.174l.007.133v5.654c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V9.692c0-.145-.101-.267-.237-.3l-.07-.007H8.076c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h1.615zM9.288 4.346l.114.007c.446.056.79.436.79.897 0 .5-.404.904-.904.904-.499 0-.903-.405-.903-.904 0-.46.344-.841.79-.897l.113-.007z" transform="translate(0 .5)"/> <path fill="#348cfd" d="M10.5.31C4.87.31.308 4.872.308 10.501c0 5.629 4.563 10.192 10.192 10.192 5.63 0 10.192-4.563 10.192-10.192C20.692 4.872 16.13.309 10.5.309zm0 1c5.077 0 9.192 4.115 9.192 9.192 0 5.076-4.115 9.192-9.192 9.192s-9.192-4.116-9.192-9.192c0-5.077 4.115-9.193 9.192-9.193z" transform="translate(0 .5)"/>
<path d="M12.923 14.848c.276 0 .5.224.5.5 0 .245-.177.45-.41.492l-.09.008H8.077c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h4.846z" transform="translate(0 .5)"/> <path fill="#348cfd" d="M9.692 8.385c.677 0 1.234.514 1.301 1.174l.007.133v5.654c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V9.692c0-.145-.101-.267-.237-.3l-.07-.007H8.076c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h1.615zM9.288 4.346l.114.007c.446.056.79.436.79.897 0 .5-.404.904-.904.904-.499 0-.903-.405-.903-.904 0-.46.344-.841.79-.897l.113-.007z" transform="translate(0 .5)"/>
<path fill="#348cfd" d="M12.923 14.848c.276 0 .5.224.5.5 0 .245-.177.45-.41.492l-.09.008H8.077c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h4.846z" transform="translate(0 .5)"/>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

15
platform/ui/src/components/Button/Button.tsx
View File

@ -2,6 +2,7 @@ import React, { useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import * as ButtonEnums from './ButtonEnums'; import * as ButtonEnums from './ButtonEnums';
import Tooltip from '../Tooltip/Tooltip';
const sizeClasses = { const sizeClasses = {
[ButtonEnums.size.small]: 'h-[26px] text-[13px]', [ButtonEnums.size.small]: 'h-[26px] text-[13px]',
@ -66,11 +67,13 @@ const Button = ({
name, name,
className, className,
onClick, onClick,
startIconTooltip = null,
endIconTooltip = null,
}) => { }) => {
const startIcon = startIconProp && ( const startIcon = startIconProp && (
<> <>
{React.cloneElement(startIconProp, { {React.cloneElement(startIconProp, {
className: classnames('w-4 h-4 fill-current'), className: classnames('w-4 h-4 fill-current', startIconProp?.props?.className),
})} })}
</> </>
); );
@ -78,7 +81,7 @@ const Button = ({
const endIcon = endIconProp && ( const endIcon = endIconProp && (
<> <>
{React.cloneElement(endIconProp, { {React.cloneElement(endIconProp, {
className: classnames('w-4 h-4 fill-current'), className: classnames('w-4 h-4 fill-current', endIconProp?.props?.className),
})} })}
</> </>
); );
@ -108,9 +111,9 @@ const Button = ({
onClick={handleOnClick} onClick={handleOnClick}
data-cy={`${name}-btn`} data-cy={`${name}-btn`}
> >
{startIcon} {startIconTooltip ? <Tooltip content={startIconTooltip}>{startIcon}</Tooltip> : startIcon}
{children} {children}
{endIcon} {endIconTooltip ? <Tooltip content={endIconTooltip}>{endIcon}</Tooltip> : endIcon}
</button> </button>
); );
}; };
@ -141,6 +144,10 @@ Button.propTypes = {
endIcon: PropTypes.node, endIcon: PropTypes.node,
/** Additional TailwindCSS classnames */ /** Additional TailwindCSS classnames */
className: PropTypes.string, className: PropTypes.string,
/** Tooltip for the start icon */
startIconTooltip: PropTypes.node,
/** Tooltip for the end icon */
endIconTooltip: PropTypes.node,
}; };
export default Button; export default Button;

2
platform/ui/src/components/StudyListTable/StudyListTableRow.tsx
View File

@ -23,7 +23,7 @@ const StudyListTableRow = props => {
className={classnames( className={classnames(
'w-full transition duration-300', 'w-full transition duration-300',
{ {
'border-primary-light hover:border-secondary-light mb-2 overflow-hidden rounded border': 'border-primary-light hover:border-secondary-light mb-2 overflow-visible rounded border':
isExpanded, isExpanded,
}, },
{ {