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

2024-03-18 20:27:12 -04:00 · 2024-03-18 20:27:12 -04:00 · 9bcd1ae6f5
commit 9bcd1ae6f5
parent 6b79dff5c1
13 changed files with 120 additions and 36 deletions
--- 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: [
      {
--- 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: [
      {
--- 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: [
      {
--- 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: [
--- 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
--- 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: [
      {
--- 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,
--- 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({
          }
        >
          <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 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*/}
-                    <LegacyButton
-                      rounded="full"
-                      variant={isValidMode ? 'contained' : 'disabled'}
+                    <Button
+                      type={ButtonEnums.type.primary}
+                      size={ButtonEnums.size.medium}
                      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={() => {}}
                      data-cy={`mode-${mode.routeName}-${studyInstanceUid}`}
+                      className={isValidMode ? 'text-[13px]' : 'bg-[#222d44] text-[13px]'}
                    >
                      {mode.displayName}
-                    </LegacyButton>
+                    </Button>
                  </Link>
                )
              );
--- 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();
--- a/platform/ui/src/assets/icons/launch-arrow.svg
+++ b/platform/ui/src/assets/icons/launch-arrow.svg
@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g fill-rule="evenodd">
-        <circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="0.2"/>
-        <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="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"/>
+        <circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="1"/>
+        <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="#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>
 </svg>
--- a/platform/ui/src/assets/icons/launch-info.svg
+++ b/platform/ui/src/assets/icons/launch-info.svg
@ -1,7 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22">
-    <g fill="currentColor" 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)"/>
-        <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 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  fill-rule="evenodd">
+        <circle cx="10.5" cy="11" r="10.192" fill="#000000"/>
+        <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 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>
 </svg>
--- 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 ? <Tooltip content={startIconTooltip}>{startIcon}</Tooltip> : startIcon}
      {children}
-      {endIcon}
+      {endIconTooltip ? <Tooltip content={endIconTooltip}>{endIcon}</Tooltip> : endIcon}
    </button>
  );
 };
@ -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;
--- 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,
              },
              {