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

extensions/cornerstone/src/CornerstoneViewportDownloadForm.js

@@ -145,8 +145,4 @@ CornerstoneViewportDownloadForm.propTypes = {
   activeViewportIndex: PropTypes.number.isRequired,
 };
 
-// export default CornerstoneViewportDownloadForm;
-
-export default function HelloWorld() {
-  return <div>Hello World</div>;
-}
+export default CornerstoneViewportDownloadForm;

extensions/default/package.json

@@ -28,6 +28,8 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
+    "@ohif/i18n": "^0.52.8",
+    "react-i18next": "^10.11.0",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

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>

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -203,9 +203,11 @@ function OHIFCornerstoneSRViewport({
     PatientSex,
     PatientAge,
     SliceThickness,
+    ManufacturerModelName,
     StudyDate,
     SeriesDescription,
     SeriesInstanceUID,
+    PixelSpacing,
     SeriesNumber,
   } = activeDisplaySetData;
 
@@ -233,13 +235,10 @@ function OHIFCornerstoneSRViewport({
     updateViewport(newMeasurementSelected);
   };
 
-  console.log(currentImageIdIndex);
-
   return (
     <>
       <ViewportActionBar
         onSeriesChange={onMeasurementChange}
-        showPatientInfo={viewportIndex === activeViewportIndex}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
           label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
@@ -250,13 +249,13 @@ function OHIFCornerstoneSRViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? PatientName.Alphabetic || '' : '',
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
             thickness: `${SliceThickness}mm`,
-            spacing: '',
-            scanner: '',
+            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            scanner: ManufacturerModelName || '',
           },
         }}
       />

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -198,10 +198,10 @@ function PanelStudyBrowserTracking({
     );
     const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
       ? [
-          ...expandedStudyInstanceUIDs.filter(
-            stdyUid => stdyUid !== StudyInstanceUID
-          ),
-        ]
+        ...expandedStudyInstanceUIDs.filter(
+          stdyUid => stdyUid !== StudyInstanceUID
+        ),
+      ]
       : [...expandedStudyInstanceUIDs, StudyInstanceUID];
 
     setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -282,7 +282,6 @@ function _mapDisplaySets(
 ) {
   const thumbnailDisplaySets = [];
   const thumbnailNoImageDisplaySets = [];
-
   displaySets.forEach(ds => {
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
     const componentType = _getComponentType(ds.Modality);

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -10,8 +10,6 @@ import {
   useViewportGrid,
   useViewportDialog,
 } from '@ohif/ui';
-import debounce from 'lodash.debounce';
-import throttle from 'lodash.throttle';
 import { useTrackedMeasurements } from './../getContextModule';
 
 // TODO -> Get this list from the list of tracked measurements.
@@ -40,7 +38,6 @@ function TrackedCornerstoneViewport({
   viewportIndex,
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
-
   const [{ activeViewportIndex, viewports }] = useViewportGrid();
   // viewportIndex, onSubmit
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
@@ -218,15 +215,17 @@ function TrackedCornerstoneViewport({
     SeriesInstanceUID,
     SeriesNumber,
   } = displaySet;
+
   const {
     PatientID,
     PatientName,
     PatientSex,
     PatientAge,
     SliceThickness,
+    PixelSpacing,
+    ManufacturerModelName
   } = displaySet.images[0];
 
-
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
     setIsTracked(!isTracked);
   }
@@ -235,7 +234,6 @@ function TrackedCornerstoneViewport({
     <>
       <ViewportActionBar
         onSeriesChange={direction => alert(`Series ${direction}`)}
-        showPatientInfo={viewportIndex === activeViewportIndex}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
           label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
@@ -246,13 +244,13 @@ function TrackedCornerstoneViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? PatientName.Alphabetic || '' : '',
+            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
             thickness: `${SliceThickness}mm`,
-            spacing: '',
-            scanner: '',
+            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            scanner: ManufacturerModelName || '',
           },
         }}
       />