feat(worklist): new investigational use text (#3999)

extensions/default/src/ViewerLayout/index.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { SidePanel, ErrorBoundary, LoadingIndicatorProgress } from '@ohif/ui';
+import {
+  SidePanel,
+  ErrorBoundary,
+  LoadingIndicatorProgress,
+  InvestigationalUseDialog,
+} from '@ohif/ui';
 import { ServicesManager, HangingProtocolService, CommandsManager } from '@ohif/core';
 import { useAppConfig } from '@state';
 import ViewerHeader from './ViewerHeader';
@@ -152,6 +157,8 @@ function ViewerLayout({
           ) : null}
         </React.Fragment>
       </div>
+
+      <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
     </div>
   );
 }

platform/app/src/routes/WorkList/WorkList.tsx

@@ -27,6 +27,7 @@ import {
   UserPreferences,
   LoadingIndicatorProgress,
   useSessionStorage,
+  InvestigationalUseDialog,
   Button,
   ButtonEnums,
 } from '@ohif/ui';
@@ -527,6 +528,7 @@ function WorkList({
         isReturnEnabled={false}
         WhiteLabeling={appConfig.whiteLabeling}
       />
+      <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
       <div className="ohif-scrollbar flex grow flex-col overflow-y-auto">
         <StudyListFilter
           numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}

platform/docs/docs/configuration/configurationFiles.md

@@ -122,6 +122,8 @@ Here are a list of some options available:
   decoding. Defaults to minimum of `navigator.hardwareConcurrency` and
   what is specified by `maxNumberOfWebWorkers`. Some windows machines require smaller values.
 - `acceptHeader` : accept header to request specific dicom transfer syntax ex : [ 'multipart/related; type=image/jls; q=1', 'multipart/related; type=application/octet-stream; q=0.1' ]
+- `investigationalUseDialog`: This should contain an object with `option` value, it can be either `always` which always shows the dialog once per session, `never` which never shows the dialog, or `configure` which shows the dialog once and won't show it again until a set number of days defined by the user, if it's set to configure, you are required to add an additional property `days` which is the number of days to wait before showing the dialog again.
+- `groupEnabled`: boolean, if set to true, all valid modes for the study get grouped together first, then the rest of the modes. If false, all modes are shown in the order they are defined in the configuration.
 - `requestTransferSyntaxUID` : Request a specific Transfer syntax from dicom web server ex: 1.2.840.10008.1.2.4.80  (applied only if acceptHeader is not set)
 - `omitQuotationForMultipartRequest`: Some servers (e.g., .NET) require the `multipart/related` request to be sent without quotation marks. Defaults to `false`. If your server doesn't require this, then setting this flag to `true` might improve performance (by removing the need for preflight requests). Also note that
 if auth headers are used, a preflight request is required.

platform/ui/src/components/Header/Header.tsx

@@ -58,7 +58,6 @@ function Header({
         </div>
         <div className="flex items-center">{children}</div>
         <div className="flex items-center">
-          <span className="text-common-light mr-3 text-lg">{t('INVESTIGATIONAL USE ONLY')}</span>
           <Dropdown
             id="options"
             showDropdownIcon={false}

platform/ui/src/components/Icon/getIcon.js

@@ -145,6 +145,10 @@ import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
 import oldStop from './../../assets/icons/old-stop.svg';
 
+/** New investigational use */
+
+import investigationalUse from './../../assets/icons/illustration-investigational-use.svg';
+
 const ICONS = {
   'arrow-down': arrowDown,
   'arrow-left': arrowLeft,
@@ -290,6 +294,9 @@ const ICONS = {
   'old-trash': oldTrash,
   'old-play': oldPlay,
   'old-stop': oldStop,
+
+  /** New investigational use */
+  'illustration-investigational-use': investigationalUse,
 };
 
 function addIcon(iconName, iconSVG) {

platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import Button, { ButtonEnums } from '../Button';
+
+export enum showDialogOption {
+  NeverShowDialog = 'never',
+  AlwaysShowDialog = 'always',
+  ShowOnceAndConfigure = 'configure',
+}
+
+const InvestigationalUseDialog = ({ dialogConfiguration }) => {
+  const { option, days } = dialogConfiguration;
+  const [isHidden, setIsHidden] = useState(true);
+
+  useEffect(() => {
+    const dialogLocalState = localStorage.getItem('investigationalUseDialog');
+    const dialogSessionState = sessionStorage.getItem('investigationalUseDialog');
+
+    switch (option) {
+      case showDialogOption.NeverShowDialog:
+        setIsHidden(true);
+        break;
+      case showDialogOption.AlwaysShowDialog:
+        setIsHidden(!!dialogSessionState);
+        break;
+      case showDialogOption.ShowOnceAndConfigure:
+        if (dialogLocalState) {
+          const { expiryDate } = JSON.parse(dialogLocalState);
+          const isExpired = new Date() > new Date(expiryDate);
+          setIsHidden(!isExpired);
+        } else {
+          setIsHidden(false);
+        }
+        break;
+      default:
+        setIsHidden(true);
+    }
+  }, [option, days]);
+
+  const handleConfirmAndHide = () => {
+    const expiryDate = new Date();
+
+    switch (option) {
+      case showDialogOption.ShowOnceAndConfigure:
+        expiryDate.setDate(expiryDate.getDate() + days);
+        localStorage.setItem('investigationalUseDialog', JSON.stringify({ expiryDate }));
+        break;
+      case showDialogOption.AlwaysShowDialog:
+        sessionStorage.setItem('investigationalUseDialog', 'hidden');
+        break;
+    }
+    setIsHidden(true);
+  };
+
+  if (isHidden) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-2 z-50 flex h-[86px] w-full justify-center">
+      <div className="bg-secondary-dark border-primary-dark flex w-[90%] items-center justify-between rounded-lg border-2 pl-[22px] pr-[22px] pt-[10px] pb-[10px] shadow-lg">
+        <div className="flex items-center gap-4">
+          <Icon
+            name="illustration-investigational-use"
+            className="h-18 w-18"
+          />
+          <div className="flex flex-col">
+            <div className="text-[19px] text-white">
+              OHIF Viewer is{' '}
+              <span className="text-primary-light">for investigational use only</span>
+            </div>
+            <div className="text-[13px] text-white">
+              <span
+                className="text-primary-active cursor-pointer"
+                onClick={() => window.open('https://ohif.org/', '_blank')}
+              >
+                Learn more about OHIF Viewer
+              </span>
+            </div>
+          </div>
+        </div>
+        <Button
+          type={ButtonEnums.type.primary}
+          onClick={handleConfirmAndHide}
+          className="bg-primary-main"
+        >
+          Confirm and Hide
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+InvestigationalUseDialog.propTypes = {
+  dialogConfiguration: PropTypes.shape({
+    option: PropTypes.oneOf(Object.values(showDialogOption)).isRequired,
+    days: PropTypes.number,
+  }).isRequired,
+};
+
+InvestigationalUseDialog.defaultProps = {
+  dialogConfiguration: {
+    option: showDialogOption.AlwaysShowDialog,
+  },
+};
+
+export default InvestigationalUseDialog;

platform/ui/src/components/InvestigationalUseDialog/index.js

@@ -0,0 +1,3 @@
+import InvestigationalUseDialog from './InvestigationalUseDialog';
+
+export default InvestigationalUseDialog;

platform/ui/src/components/index.js

@@ -79,6 +79,7 @@ import PanelSection from './PanelSection';
 import AdvancedToolbox from './AdvancedToolbox';
 import InputDoubleRange from './InputDoubleRange';
 import LegacyButtonGroup from './LegacyButtonGroup';
+import InvestigationalUseDialog from './InvestigationalUseDialog';
 import MeasurementItem from './MeasurementTable/MeasurementItem';
 
 export {
@@ -164,5 +165,6 @@ export {
   ViewportPane,
   ViewportOverlay,
   WindowLevelMenuItem,
+  InvestigationalUseDialog,
   MeasurementItem,
 };

platform/ui/src/index.js

@@ -117,6 +117,7 @@ export {
   WindowLevelMenuItem,
   ImageScrollbar,
   ViewportOverlay,
+  InvestigationalUseDialog,
   MeasurementItem,
 } from './components';