OHIF-174: Patient Info Icon should be clickable and show the correct details (#1816)

* Update patient info to be clickable and update fields in viewers

* Add spacing

* Remove log

* round number

* Add default

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],
@@ -255,8 +254,8 @@ function OHIFCornerstoneSRViewport({
             patientAge: PatientAge || '',
             MRN: PatientID || '',
             thickness: `${SliceThickness}mm`,
-            spacing: '',
+            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
-            scanner: '',
+            scanner: ManufacturerModelName || '',
           },
         }}
       />

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

@@ -206,12 +206,15 @@ function TrackedCornerstoneViewport({
     SeriesInstanceUID,
     SeriesNumber,
   } = displaySet;
+
   const {
     PatientID,
     PatientName,
     PatientSex,
     PatientAge,
     SliceThickness,
+    PixelSpacing,
+    ManufacturerModelName
   } = displaySet.images[0];
 
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
@@ -222,7 +225,6 @@ function TrackedCornerstoneViewport({
     <>
       <ViewportActionBar
         onSeriesChange={direction => alert(`Series ${direction}`)}
-        showPatientInfo={viewportIndex === activeViewportIndex}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
           label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
@@ -238,8 +240,8 @@ function TrackedCornerstoneViewport({
             patientAge: PatientAge || '',
             MRN: PatientID || '',
             thickness: `${SliceThickness}mm`,
-            spacing: '',
+            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
-            scanner: '',
+            scanner: ManufacturerModelName || '',
           },
         }}
       />

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
@@ -13,9 +13,11 @@ const classes = {
 const ViewportActionBar = ({
   studyData,
   showNavArrows,
-  showPatientInfo,
+  showPatientInfo: patientInfoVisibility,
   onSeriesChange,
 }) => {
+  const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);
+
   const {
     label,
     isTracked,
@@ -37,6 +39,8 @@ const ViewportActionBar = ({
     scanner,
   } = patientInformation;
 
+  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo)
+
   const renderIconStatus = () => {
     if (modality === 'SR') {
       return (
@@ -60,29 +64,30 @@ const ViewportActionBar = ({
         {!isTracked ? (
           <Icon name="dotted-circle" className="w-6 text-primary-light" />
         ) : (
-          <Tooltip
+            <Tooltip
-            position="bottom-left"
+              position="bottom-left"
-            content={
+              content={
-              <div className="flex py-2">
+                <div className="flex py-2">
-                <div className="flex pt-1">
+                  <div className="flex pt-1">
-                  <Icon name="info-link" className="w-4 text-primary-main" />
+                    <Icon name="info-link" className="w-4 text-primary-main" />
-                </div>
+                  </div>
-                <div className="flex ml-4">
+                  <div className="flex ml-4">
-                  <span className="text-base text-common-light">
+                    <span className="text-base text-common-light">
-                    Series is
+                      Series is
                     <span className="font-bold text-white"> tracked</span> and
                     can be viewed <br /> in the measurement panel
                   </span>
+                  </div>
                 </div>
-              </div>
+              }
-            }
+            >
-          >
+              <Icon name="tracked" className="w-6 text-primary-light" />
-            <Icon name="tracked" className="w-6 text-primary-light" />
+            </Tooltip>
-          </Tooltip>
+          )}
-        )}
       </div>
     );
   };
+
   return (
     <div className="flex items-center p-2 border-b border-primary-light">
       <div className="flex flex-grow">
@@ -131,19 +136,18 @@ const ViewportActionBar = ({
           </ButtonGroup>
         </div>
       )}
-      {showPatientInfo && (
+      <div className="flex ml-4 mr-2 cursor-pointer" onClick={onPatientInfoClick}>
-        <div className="flex ml-4 mr-2">
+        <PatientInfo
-          <PatientInfo
+          isOpen={showPatientInfo}
-            patientName={patientName}
+          patientName={patientName}
-            patientSex={patientSex}
+          patientSex={patientSex}
-            patientAge={patientAge}
+          patientAge={patientAge}
-            MRN={MRN}
+          MRN={MRN}
-            thickness={thickness}
+          thickness={thickness}
-            spacing={spacing}
+          spacing={spacing}
-            scanner={scanner}
+          scanner={scanner}
-          />
+        />
-        </div>
+      </div>
-      )}
     </div>
   );
 };
@@ -174,7 +178,7 @@ ViewportActionBar.propTypes = {
 
 ViewportActionBar.defaultProps = {
   showNavArrows: true,
-  showPatientInfo: true,
+  showPatientInfo: false,
 };
 
 function PatientInfo({
@@ -185,11 +189,14 @@ function PatientInfo({
   thickness,
   spacing,
   scanner,
+  isOpen,
 }) {
   return (
     <Tooltip
+      isSticky
+      isDisabled={!isOpen}
       position="bottom-right"
-      content={
+      content={isOpen && (
         <div className="flex py-2">
           <div className="flex pt-1">
             <Icon name="info-link" className="w-4 text-primary-main" />
@@ -236,7 +243,7 @@ function PatientInfo({
             </div>
           </div>
         </div>
-      }
+      )}
     >
       <div className="relative flex justify-end">
         <div className="relative">