Merge branch 'feat/v2-main' into dannyrb/ohif-154/restore-command-functionality-for-toolbar

extensions/default/src/DicomWebDataSource/index.js

@@ -17,8 +17,10 @@ const { DicomMetaDictionary, DicomDict } = dcmjs.data;
 const { naturalizeDataset, denaturalizeDataset } = DicomMetaDictionary;
 const { urlUtil } = utils;
 
-const VERSION_NAME = 'OHIF-0.1';
-const SR_TRANSFER_SYNTAX_UID = '1.2.840.10008.1.2.1';
+const ImplementationClassUID =
+  '2.25.270695996825855179949881587723571202391.2.0.0';
+const ImplementationVersionName = 'OHIF-VIEWER-2.0.0';
+const EXPLICIT_VR_LITTLE_ENDIAN = '1.2.840.10008.1.2.1';
 
 /**
  *
@@ -140,9 +142,9 @@ function createDicomWebApi(dicomWebConfig) {
             dataset._meta.FileMetaInformationVersion.Value,
           MediaStorageSOPClassUID: dataset.SOPClassUID,
           MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
-          TransferSyntaxUID: SR_TRANSFER_SYNTAX_UID,
-          ImplementationClassUID: DicomMetaDictionary.uid(),
-          ImplementationVersionName: VERSION_NAME,
+          TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
+          ImplementationClassUID,
+          ImplementationVersionName,
         };
 
         const denaturalized = denaturalizeDataset(meta);

extensions/default/src/DicomWebDataSource/qido.js

@@ -22,7 +22,7 @@
  * | limit            | {number}           |
  * | offset           | {number}           |
  */
-import { DICOMWeb } from '@ohif/core';
+import { DICOMWeb, utils } from '@ohif/core';
 
 const { getString, getName, getModalities } = DICOMWeb;
 
@@ -50,7 +50,7 @@ function processResults(qidoStudies) {
       time: getString(qidoStudy['00080030']), // HHmmss.SSS (24-hour, minutes, seconds, fractional seconds)
       accession: getString(qidoStudy['00080050']) || '', // short string, probably a number?
       mrn: getString(qidoStudy['00100020']) || '', // medicalRecordNumber
-      patientName: getName(qidoStudy['00100010']) || '',
+      patientName: utils.formatPN(getName(qidoStudy['00100010'])) || '',
       instances: Number(getString(qidoStudy['00201208'])) || 0, // number
       description: getString(qidoStudy['00081030']) || '',
       modalities:

extensions/default/src/Panels/PanelStudyBrowser.jsx

@@ -127,7 +127,6 @@ function PanelStudyBrowser({
           changedDisplaySets,
           thumbnailImageSrcMap
         );
-
         setDisplaySets(mappedDisplaySets);
       }
     );
@@ -152,11 +151,11 @@ function PanelStudyBrowser({
     );
     const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
       ? // eslint-disable-next-line prettier/prettier
-        [
-          ...expandedStudyInstanceUIDs.filter(
-            stdyUid => stdyUid !== StudyInstanceUID
-          ),
-        ]
+      [
+        ...expandedStudyInstanceUIDs.filter(
+          stdyUid => stdyUid !== StudyInstanceUID
+        ),
+      ]
       : [...expandedStudyInstanceUIDs, StudyInstanceUID];
 
     setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);

extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx

@@ -5,22 +5,40 @@ import {
   useViewportGrid,
 } from '@ohif/ui';
 
+const DEFAULT_LAYOUT = {
+  type: 'SET_LAYOUT',
+  payload: {
+    numCols: 1,
+    numRows: 1,
+  },
+};
+
 function LayoutSelector() {
   const [isOpen, setIsOpen] = useState(false);
   const [viewportGridState, viewportGridService] = useViewportGrid();
 
-  useEffect(() => {
-    function closeOnOutsideClick() {
-      if (isOpen) {
-        setIsOpen(false);
-      }
+  const closeOnOutsideClick = () => {
+    if (isOpen) {
+      setIsOpen(false);
     }
+  };
+
+  useEffect(() => {
     window.addEventListener('click', closeOnOutsideClick);
     return () => {
       window.removeEventListener('click', closeOnOutsideClick);
     };
   }, [isOpen]);
 
+  useEffect(() => {
+    /* Reset to default layout when component unmounts */
+    return () => {
+      dispatch(DEFAULT_LAYOUT);
+    };
+  }, []);
+
+  const onClickHandler = () => setIsOpen(!isOpen);
+
   const DropdownContent = isOpen ? OHIFLayoutSelector : null;
 
   return (
@@ -28,9 +46,7 @@ function LayoutSelector() {
       id="Layout"
       label="Grid Layout"
       icon="tool-layout"
-      onClick={() => {
-        setIsOpen(!isOpen);
-      }}
+      onClick={onClickHandler}
       dropdownContent={
         DropdownContent !== null && (
           <DropdownContent

extensions/default/src/ViewerLayout/Header.jsx

@@ -1,22 +1,37 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 // TODO: This may fail if package is split from PWA build
 import { useHistory } from 'react-router-dom';
 //
-import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
+import { NavBar, Svg, Icon, IconButton, Dropdown, useModal } from '@ohif/ui';
 
 function Header({ children }) {
+  const { t } = useTranslation();
   const history = useHistory();
-  // const dropdownContent = [
-  //   {
-  //     name: 'Soft tissue',
-  //     value: '400/40',
-  //   },
-  //   { name: 'Lung', value: '1500 / -600' },
-  //   { name: 'Liver', value: '150 / 90' },
-  //   { name: 'Bone', value: '2500 / 480' },
-  //   { name: 'Brain', value: '80 / 40' },
-  // ]
+  const { show } = useModal();
+
+  // TODO: IT SHOULD BE REFACTORED WHEN THE MODAL CONTENT IS DEFINED
+  const showAboutModal = useCallback(() => {
+    const modalComponent = () => (
+      <div>{t('AboutModal:OHIF Viewer - About')}</div>
+    );
+    show({
+      title: t('AboutModal:OHIF Viewer - About'),
+      content: modalComponent,
+    });
+  }, [show, t]);
+
+  // TODO: IT SHOULD BE REFACTORED WHEN THE MODAL CONTENT IS DEFINED
+  const showPreferencesModal = useCallback(() => {
+    const modalComponent = () => (
+      <div>{t('UserPreferencesModal:User Preferences')}</div>
+    );
+    show({
+      title: t('UserPreferencesModal:User Preferences'),
+      content: modalComponent,
+    });
+  }, [show, t]);
 
   return (
     <NavBar className="justify-between border-b-4 border-black">
@@ -40,18 +55,40 @@ function Header({ children }) {
         <div className="flex items-center">{children}</div>
         <div className="flex items-center">
           <span className="mr-3 text-lg text-common-light">
-            FOR INVESTIGATIONAL USE ONLY
+            {t('Header:INVESTIGATIONAL USE ONLY')}
           </span>
-          <IconButton
-            variant="text"
-            color="inherit"
-            className="text-primary-active"
-            onClick={() => {}}
+          <Dropdown
+            showDropdownIcon={false}
+            list={[
+              {
+                title: t('Header:About'),
+                icon: 'info',
+                onClick: showAboutModal,
+              },
+              {
+                title: t('Header:Preferences'),
+                icon: 'settings',
+                onClick: showPreferencesModal,
+              },
+            ]}
           >
-            <React.Fragment>
-              <Icon name="settings" /> <Icon name="chevron-down" />
-            </React.Fragment>
-          </IconButton>
+            <IconButton
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-primary-active"
+            >
+              <Icon name="settings" />
+            </IconButton>
+            <IconButton
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-primary-active"
+            >
+              <Icon name="chevron-down" />
+            </IconButton>
+          </Dropdown>
         </div>
       </div>
     </NavBar>