perf(segmentation): make segmentation read 3x faster (#3577)

platform/ui/src/components/LoadingIndicatorTotalPercent/LoadingIndicatorTotalPercent.tsx

@@ -21,26 +21,23 @@ function LoadingIndicatorTotalPercent({
   loadingText = 'Loading...',
   targetText = 'segments',
 }: Props): JSX.Element {
-  percentComplete = percentComplete !== null ? percentComplete : null;
-
-  const progress = percentComplete !== null ? percentComplete : null;
+  const progress = percentComplete;
   const totalNumbersText = totalNumbers !== null ? `${totalNumbers}` : '';
   const numTargetsLoadedText =
     percentComplete !== null
       ? Math.floor((percentComplete * totalNumbers) / 100)
       : '';
 
-  const textBlock = !totalNumbers ? (
-    <div className="text-white text-sm">{loadingText}</div>
-  ) : (
-    <div className="text-white text-sm flex items-baseline space-x-1">
-      <div>Loaded</div>
-      <div>{numTargetsLoadedText}</div>
-      <div>of</div>
-      <div>{totalNumbersText}</div>
-      <div>{targetText}</div>
-    </div>
-  );
+  const textBlock =
+    !totalNumbers && percentComplete === null ? (
+      <div className="text-white text-sm">{loadingText}</div>
+    ) : !totalNumbers && percentComplete !== null ? (
+      <div className="text-white text-sm">Loaded {percentComplete}%</div>
+    ) : (
+      <div className="text-white text-sm">
+        Loaded {numTargetsLoadedText} of {totalNumbersText} {targetText}
+      </div>
+    );
 
   return (
     <LoadingIndicatorProgress

platform/ui/src/components/PatientInfo/PatientInfo.tsx

@@ -19,6 +19,7 @@ function PatientInfo({
   patientAge,
   MRN,
   thickness,
+  thicknessUnits,
   spacing,
   scanner,
   isOpen,
@@ -29,7 +30,6 @@ function PatientInfo({
   while (patientAge.charAt(0) === '0') {
     patientAge = patientAge.substr(1);
   }
-
   return (
     <div ref={showPatientInfoRef}>
       <Tooltip
@@ -90,7 +90,9 @@ function PatientInfo({
                       className={classnames(classes.infoText)}
                       title={thickness}
                     >
-                      {thickness}
+                      {thicknessUnits
+                        ? `${thickness}${thicknessUnits}`
+                        : `${thickness}`}
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
@@ -136,6 +138,7 @@ PatientInfo.propTypes = {
   patientAge: PropTypes.string,
   MRN: PropTypes.string,
   thickness: PropTypes.string,
+  thicknessUnits: PropTypes.string,
   spacing: PropTypes.string,
   scanner: PropTypes.string,
   isOpen: PropTypes.bool,

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -34,6 +34,7 @@ const ViewportActionBar = ({
     patientAge,
     MRN,
     thickness,
+    thicknessUnits,
     spacing,
     scanner,
   } = patientInformation;
@@ -169,6 +170,7 @@ const ViewportActionBar = ({
           patientAge={patientAge}
           MRN={MRN}
           thickness={thickness}
+          thicknessUnits={thicknessUnits}
           spacing={spacing}
           scanner={scanner}
         />
@@ -192,6 +194,7 @@ ViewportActionBar.propTypes = {
       patientAge: PropTypes.string.isRequired,
       MRN: PropTypes.string.isRequired,
       thickness: PropTypes.string.isRequired,
+      thicknessUnits: PropTypes.string.isRequired,
       spacing: PropTypes.string.isRequired,
       scanner: PropTypes.string.isRequired,
     }),