[OHIF-192] - Viewport letter only if using multiple viewport layout. (#1822)

* Viewport letter only in multi-viewport layout.

* If SliceThickness not available print N/A

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -250,12 +250,19 @@ function OHIFCornerstoneSRViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            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

@@ -291,8 +291,11 @@ function _mapDisplaySets(
     const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
       vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
     );
+
     const viewportIdentificator =
-      _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || '';
+      viewports.length > 1
+        ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+        : '';
 
     const array =
       componentType === 'thumbnailTracked'

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

@@ -225,20 +225,25 @@ function TrackedCornerstoneViewport({
     PatientAge,
     SliceThickness,
     PixelSpacing,
-    ManufacturerModelName
+    ManufacturerModelName,
   } = displaySet.images[0];
 
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
     setIsTracked(!isTracked);
   }
 
+  const label =
+    viewports.length > 1
+      ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+      : '';
+
   return (
     <>
       <ViewportActionBar
         onSeriesChange={direction => alert(`Series ${direction}`)}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
-          label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
+          label,
           isTracked: trackedSeries.includes(SeriesInstanceUID),
           isLocked: false,
           studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
@@ -246,12 +251,19 @@ function TrackedCornerstoneViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            spacing:
+              PixelSpacing && PixelSpacing.length
+                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                    2
+                  )}mm`
+                : '',
             scanner: ManufacturerModelName || '',
           },
         }}

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

@@ -39,7 +39,7 @@ const ViewportActionBar = ({
     scanner,
   } = patientInformation;
 
-  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo)
+  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
 
   const renderIconStatus = () => {
     if (modality === 'SR') {
@@ -196,7 +196,8 @@ function PatientInfo({
       isSticky
       isDisabled={!isOpen}
       position="bottom-right"
-      content={isOpen && (
+      content={
+        isOpen && (
           <div className="flex py-2">
             <div className="flex pt-1">
               <Icon name="info-link" className="w-4 text-primary-main" />
@@ -229,21 +230,30 @@ function PatientInfo({
                     Thickness
                   </span>
                   <span className={classnames(classes.infoText)}>
-                  {thickness}
+                    {thickness ? thickness : 'N/A'}
                   </span>
                 </div>
                 <div className={classnames(classes.row)}>
-                <span className={classnames(classes.infoHeader)}>Spacing</span>
+                  <span className={classnames(classes.infoHeader)}>
-                <span className={classnames(classes.infoText)}>{spacing}</span>
+                    Spacing
+                  </span>
+                  <span className={classnames(classes.infoText)}>
+                    {spacing}
+                  </span>
                 </div>
                 <div className={classnames(classes.row)}>
-                <span className={classnames(classes.infoHeader)}>Scanner</span>
+                  <span className={classnames(classes.infoHeader)}>
-                <span className={classnames(classes.infoText)}>{scanner}</span>
+                    Scanner
+                  </span>
+                  <span className={classnames(classes.infoText)}>
+                    {scanner}
+                  </span>
                 </div>
               </div>
             </div>
           </div>
-      )}
+        )
+      }
     >
       <div className="relative flex justify-end cursor-pointer">
         <div className="relative">