diff --git a/modes/basic-dev-mode/src/index.js b/modes/basic-dev-mode/src/index.js index 01513492f..bcedc4aca 100644 --- a/modes/basic-dev-mode/src/index.js +++ b/modes/basic-dev-mode/src/index.js @@ -133,8 +133,15 @@ function modeFactory({ modeConfiguration }) { ]); }, onModeExit: ({ servicesManager }) => { - const { toolGroupService, measurementService, toolbarService } = servicesManager.services; - + const { + toolGroupService, + measurementService, + toolbarService, + uiDialogService, + uiModalService, + } = servicesManager.services; + uiDialogService.dismissAll(); + uiModalService.hide(); toolGroupService.destroy(); }, validationTags: { @@ -145,7 +152,10 @@ function modeFactory({ modeConfiguration }) { const modalities_list = modalities.split('\\'); // 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: [ { diff --git a/modes/basic-test-mode/src/index.ts b/modes/basic-test-mode/src/index.ts index 1c4342179..a6e9d0827 100644 --- a/modes/basic-test-mode/src/index.ts +++ b/modes/basic-test-mode/src/index.ts @@ -143,8 +143,12 @@ function modeFactory() { syncGroupService, segmentationService, cornerstoneViewportService, + uiDialogService, + uiModalService, } = servicesManager.services; + uiDialogService.dismissAll(); + uiModalService.hide(); toolGroupService.destroy(); syncGroupService.destroy(); segmentationService.destroy(); @@ -159,8 +163,12 @@ function modeFactory() { const modalities_list = modalities.split('\\'); // Exclude non-image modalities - return !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1) - .length; + return { + 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: [ { diff --git a/modes/longitudinal/src/index.js b/modes/longitudinal/src/index.js index 0d9be56af..571d6a5f6 100644 --- a/modes/longitudinal/src/index.js +++ b/modes/longitudinal/src/index.js @@ -179,11 +179,15 @@ function modeFactory({ modeConfiguration }) { toolbarService, segmentationService, cornerstoneViewportService, + uiDialogService, + uiModalService, } = servicesManager.services; _activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe()); _activatePanelTriggersSubscriptions = []; + uiDialogService.dismissAll(); + uiModalService.hide(); toolGroupService.destroy(); syncGroupService.destroy(); segmentationService.destroy(); @@ -198,8 +202,12 @@ function modeFactory({ modeConfiguration }) { const modalities_list = modalities.split('\\'); // Exclude non-image modalities - return !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1) - .length; + return { + 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: [ { diff --git a/modes/microscopy/src/index.tsx b/modes/microscopy/src/index.tsx index 7165b7cc3..557ec00d0 100644 --- a/modes/microscopy/src/index.tsx +++ b/modes/microscopy/src/index.tsx @@ -56,8 +56,10 @@ function modeFactory({ modeConfiguration }) { }, onModeExit: ({ servicesManager }) => { - const { toolbarService } = servicesManager.services; + const { toolbarService, uiDialogService, uiModalService } = servicesManager.services; + uiDialogService.dismissAll(); + uiModalService.hide(); toolbarService.reset(); }, @@ -69,8 +71,10 @@ function modeFactory({ modeConfiguration }) { isValidMode: ({ modalities }) => { const modalities_list = modalities.split('\\'); - // Slide Microscopy and ECG modality not supported by basic mode yet - return modalities_list.includes('SM'); + return { + valid: modalities_list.includes('SM'), + description: 'Microscopy mode only supports the SM modality', + }; }, routes: [ diff --git a/modes/segmentation/src/index.tsx b/modes/segmentation/src/index.tsx index 8b24196f1..57b46c603 100644 --- a/modes/segmentation/src/index.tsx +++ b/modes/segmentation/src/index.tsx @@ -106,8 +106,12 @@ function modeFactory({ modeConfiguration }) { toolbarService, segmentationService, cornerstoneViewportService, + uiDialogService, + uiModalService, } = servicesManager.services; + uiDialogService.dismissAll(); + uiModalService.hide(); toolGroupService.destroy(); syncGroupService.destroy(); segmentationService.destroy(); @@ -127,11 +131,10 @@ function modeFactory({ modeConfiguration }) { // Don't show the mode if the selected studies have only one modality // that is not supported by the mode const modalitiesArray = modalities.split('\\'); - if (modalitiesArray.length === 1) { - return !['SM', 'US', 'MG', 'OT', 'DOC', 'CR'].includes(modalitiesArray[0]); + return { + 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 diff --git a/modes/tmtv/src/index.js b/modes/tmtv/src/index.js index dd57be35e..b21a37582 100644 --- a/modes/tmtv/src/index.js +++ b/modes/tmtv/src/index.js @@ -165,9 +165,13 @@ function modeFactory({ modeConfiguration }) { syncGroupService, segmentationService, cornerstoneViewportService, + uiDialogService, + uiModalService, } = servicesManager.services; unsubscriptions.forEach(unsubscribe => unsubscribe()); + uiDialogService.dismissAll(); + uiModalService.hide(); toolGroupService.destroy(); syncGroupService.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'; // 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: [ { diff --git a/platform/app/public/config/default.js b/platform/app/public/config/default.js index 00013529e..88f7b872e 100644 --- a/platform/app/public/config/default.js +++ b/platform/app/public/config/default.js @@ -12,6 +12,7 @@ window.config = { showCPUFallbackMessage: true, showLoadingIndicator: true, strictZSpacingForVolumeViewport: true, + groupEnabledModesFirst: true, maxNumRequests: { interaction: 100, thumbnail: 75, diff --git a/platform/app/src/routes/WorkList/WorkList.tsx b/platform/app/src/routes/WorkList/WorkList.tsx index ae518a296..50cfccf29 100644 --- a/platform/app/src/routes/WorkList/WorkList.tsx +++ b/platform/app/src/routes/WorkList/WorkList.tsx @@ -27,6 +27,8 @@ import { UserPreferences, LoadingIndicatorProgress, useSessionStorage, + Button, + ButtonEnums, } from '@ohif/ui'; import i18n from '@ohif/i18n'; @@ -254,11 +256,13 @@ function WorkList({ const studyDate = date && moment(date, ['YYYYMMDD', 'YYYY.MM.DD'], true).isValid() && - moment(date, ['YYYYMMDD', 'YYYY.MM.DD']).format(t('Common:localDateFormat','MMM-DD-YYYY')); + moment(date, ['YYYYMMDD', 'YYYY.MM.DD']).format(t('Common:localDateFormat', 'MMM-DD-YYYY')); const studyTime = time && 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 { dataCY: `studyRow-${studyInstanceUid}`, @@ -346,10 +350,24 @@ function WorkList({ } >
- {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 isValidMode = mode.isValidMode({ + const { valid: isValidMode, description: invalidModeDescription } = mode.isValidMode({ modalities: modalitiesToCheck, study, }); @@ -382,16 +400,29 @@ function WorkList({ // 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*/} - } // launch-arrow | launch-info + startIconTooltip={ + !isValidMode ? ( +
+ {invalidModeDescription} +
+ ) : null + } + startIcon={ + + } // launch-arrow | launch-info onClick={() => {}} data-cy={`mode-${mode.routeName}-${studyInstanceUid}`} + className={isValidMode ? 'text-[13px]' : 'bg-[#222d44] text-[13px]'} > {mode.displayName} - + ) ); diff --git a/platform/cli/templates/mode/src/index.tsx b/platform/cli/templates/mode/src/index.tsx index 55be06039..e129a9a05 100644 --- a/platform/cli/templates/mode/src/index.tsx +++ b/platform/cli/templates/mode/src/index.tsx @@ -98,8 +98,12 @@ function modeFactory({ modeConfiguration }) { toolbarService, segmentationService, cornerstoneViewportService, + uiDialogService, + uiModalService, } = servicesManager.services; + uiDialogService.dismissAll(); + uiModalService.hide(); toolGroupService.destroy(); syncGroupService.destroy(); segmentationService.destroy(); diff --git a/platform/ui/src/assets/icons/launch-arrow.svg b/platform/ui/src/assets/icons/launch-arrow.svg index da4b7827f..0f55172d8 100644 --- a/platform/ui/src/assets/icons/launch-arrow.svg +++ b/platform/ui/src/assets/icons/launch-arrow.svg @@ -1,7 +1,7 @@ - - - + + + diff --git a/platform/ui/src/assets/icons/launch-info.svg b/platform/ui/src/assets/icons/launch-info.svg index f4f14e4c8..6e999dc35 100644 --- a/platform/ui/src/assets/icons/launch-info.svg +++ b/platform/ui/src/assets/icons/launch-info.svg @@ -1,7 +1,8 @@ - - - - + + + + + diff --git a/platform/ui/src/components/Button/Button.tsx b/platform/ui/src/components/Button/Button.tsx index fb13927c6..b1e750c5c 100644 --- a/platform/ui/src/components/Button/Button.tsx +++ b/platform/ui/src/components/Button/Button.tsx @@ -2,6 +2,7 @@ import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import * as ButtonEnums from './ButtonEnums'; +import Tooltip from '../Tooltip/Tooltip'; const sizeClasses = { [ButtonEnums.size.small]: 'h-[26px] text-[13px]', @@ -66,11 +67,13 @@ const Button = ({ name, className, onClick, + startIconTooltip = null, + endIconTooltip = null, }) => { const startIcon = 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 && ( <> {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} data-cy={`${name}-btn`} > - {startIcon} + {startIconTooltip ? {startIcon} : startIcon} {children} - {endIcon} + {endIconTooltip ? {endIcon} : endIcon} ); }; @@ -141,6 +144,10 @@ Button.propTypes = { endIcon: PropTypes.node, /** Additional TailwindCSS classnames */ className: PropTypes.string, + /** Tooltip for the start icon */ + startIconTooltip: PropTypes.node, + /** Tooltip for the end icon */ + endIconTooltip: PropTypes.node, }; export default Button; diff --git a/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx b/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx index 2235f277d..4a3fa6f93 100644 --- a/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx +++ b/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx @@ -23,7 +23,7 @@ const StudyListTableRow = props => { className={classnames( '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, }, {