fix: ellipse should use exponent (#2086)

* fix: prevent app from blowing up when snapshot modal is opened

* fix: use superscript tag to indicate ellipse is mm squared

* fix: update measurement item to allow us to specify html in MeasurementItem display text

extensions/cornerstone/src/CornerstoneViewportDownloadForm.js

@@ -13,7 +13,7 @@ const DEFAULT_SIZE = 512;
 const MAX_TEXTURE_SIZE = 10000;
 
 const CornerstoneViewportDownloadForm = ({ onClose, activeViewportIndex }) => {
-  const { enabledElement: activeEnabledElement } = getEnabledElement(
+  const { element: activeEnabledElement } = getEnabledElement(
     activeViewportIndex
   );
 

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

@@ -385,7 +385,7 @@ function _getDisplayText(
       const roundedArea = _round(area, 2);
 
       return [
-        `${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
+        `${roundedArea} ${unit}<sup>2</sup> (S:${seriesNumber}, I:${instanceNumber})`,
       ];
     }
     case types.POINT: {

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

@@ -382,7 +382,6 @@ function _mapDisplaySets(
   UIDialogService,
   UINotificationService
 ) {
-  console.log(displaySets.length);
   const thumbnailDisplaySets = [];
   const thumbnailNoImageDisplaySets = [];
   displaySets.forEach(ds => {

platform/ui/src/components/MeasurementTable/MeasurementItem.js

@@ -3,7 +3,15 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon } from '../';
 
-const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
+const MeasurementItem = ({
+  id,
+  index,
+  label,
+  displayText,
+  isActive,
+  onClick,
+  onEdit,
+}) => {
   const [isHovering, setIsHovering] = useState(false);
 
   const onEditHandler = event => {
@@ -41,14 +49,14 @@ const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onE
       >
         {index}
       </div>
-      <div className="px-2 py-1 flex flex-1 flex-col relative">
-        <span className="text-base text-primary-light mb-1">
-          {label}
-        </span>
+      <div className="relative flex flex-col flex-1 px-2 py-1">
+        <span className="mb-1 text-base text-primary-light">{label}</span>
         {displayText.map(line => (
-          <span key={line} className="pl-2 border-l border-primary-light text-base text-white">
-            {line}
-          </span>
+          <span
+            key={line}
+            className="pl-2 text-base text-white border-l border-primary-light"
+            dangerouslySetInnerHTML={{ __html: line }}
+          ></span>
         ))}
         <Icon
           className={classnames(
@@ -70,13 +78,16 @@ const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onE
 };
 
 MeasurementItem.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
+  id: PropTypes.oneOfType([
+    PropTypes.number.isRequired,
+    PropTypes.string.isRequired,
+  ]),
   index: PropTypes.number.isRequired,
   label: PropTypes.string,
   displayText: PropTypes.array.isRequired,
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
-  onEdit: PropTypes.func
+  onEdit: PropTypes.func,
 };
 
 MeasurementItem.defaultProps = {

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx

@@ -164,7 +164,7 @@ const ViewportDownloadForm = ({
     }
 
     return (
-      <Typography className="mt-2 pl-1" color="error">
+      <Typography className="pl-1 mt-2" color="error">
         {error_messages[errorType]}
       </Typography>
     );
@@ -276,7 +276,7 @@ const ViewportDownloadForm = ({
         image.
       </Typography>
 
-      <div className="mt-6 flex flex-col">
+      <div className="flex flex-col mt-6">
         <div className="w-full mb-4">
           <Input
             data-cy="file-name"
@@ -331,7 +331,7 @@ const ViewportDownloadForm = ({
             </div>
           </div>
 
-          <div className="ml-6 w-1/4 pl-6 border-l border-secondary-dark">
+          <div className="w-1/4 pl-6 ml-6 border-l border-secondary-dark">
             <div>
               <InputLabelWrapper
                 sortDirection="none"
@@ -405,7 +405,7 @@ const ViewportDownloadForm = ({
             />
           </div>
         ) : (
-          <div className="text-center p-8">
+          <div className="p-8 text-center">
             <Typography>Loading Image Preview...</Typography>
           </div>
         )}