feat(delete measurement): icon for measurement table (#3775)

platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js

@@ -31,7 +31,7 @@ describe('OHIF Measurement Panel', function () {
 
     cy.get('[data-cy="measurement-item"]').as('measurementItem').click();
 
-    cy.get('[data-cy="measurement-item"]').find('svg').as('measurementItemSvg').click();
+    cy.get('[data-cy="measurement-item"]').find('svg').eq(0).as('measurementItemSvg').click();
 
     // enter Bone label
     cy.get('[data-cy="input-annotation"]').should('exist');

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

@@ -10,18 +10,23 @@ const MeasurementItem = ({
   label,
   displayText,
   isActive,
-  isLocked,
   onClick,
   onEdit,
-  item,
+  onDelete,
 }) => {
   const [isHovering, setIsHovering] = useState(false);
+  const [isIndexHovering, setIsIndexHovering] = useState(false);
 
   const onEditHandler = event => {
     event.stopPropagation();
     onEdit({ uid, isActive, event });
   };
 
+  const onDeleteHandler = event => {
+    event.stopPropagation();
+    onDelete({ uid, isActive, event });
+  };
+
   const onClickHandler = event => onClick({ uid, isActive, event });
 
   const onMouseEnter = () => setIsHovering(true);
@@ -47,10 +52,26 @@ const MeasurementItem = ({
           'bg-primary-light active text-black': isActive,
           'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
         })}
+        onMouseEnter={() => setIsIndexHovering(true)}
+        onMouseLeave={() => setIsIndexHovering(false)}
       >
-        {index}
+        {isIndexHovering ? (
+          <Icon
+            name="close"
+            className={classnames(
+              'mx-auto mt-1 w-[10px] text-center transition duration-500 hover:opacity-80',
+              {
+                'bg-primary-light text-black': isActive,
+                'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+              }
+            )}
+            onClick={onDeleteHandler}
+          />
+        ) : (
+          <span>{index}</span>
+        )}
       </div>
-      <div className="relative flex flex-1 flex-col px-2 py-1">
+      <div className="relative flex flex-1 flex-col py-1 pl-2 pr-1">
         <span className="text-primary-light mb-1 text-base">{label}</span>
         {displayText.map((line, i) => (
           <span
@@ -59,22 +80,20 @@ const MeasurementItem = ({
             dangerouslySetInnerHTML={{ __html: line }}
           ></span>
         ))}
-        {!isLocked && (
-          <Icon
-            className={classnames(
-              'absolute w-4 cursor-pointer text-white transition duration-300',
-              { 'invisible mr-2 opacity-0': !isActive && !isHovering },
-              { 'opacity-1 visible': !isActive && isHovering }
-            )}
-            name="pencil"
-            style={{
-              top: 4,
-              right: 4,
-              transform: isActive || isHovering ? '' : 'translateX(100%)',
-            }}
-            onClick={onEditHandler}
-          />
-        )}
+        <Icon
+          className={classnames(
+            'absolute w-3 cursor-pointer text-white transition duration-300 hover:opacity-80',
+            { 'invisible mr-2 opacity-0': !isActive && !isHovering },
+            { 'opacity-1 visible': !isActive && isHovering }
+          )}
+          name="pencil"
+          style={{
+            top: 7,
+            right: 14,
+            transform: isActive || isHovering ? '' : 'translateX(100%)',
+          }}
+          onClick={e => onEditHandler(e)}
+        />
       </div>
     </div>
   );
@@ -88,6 +107,7 @@ MeasurementItem.propTypes = {
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
   onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
 };
 
 MeasurementItem.defaultProps = {

platform/ui/src/components/MeasurementTable/MeasurementTable.tsx

@@ -8,7 +8,7 @@ import MeasurementItem from './MeasurementItem';
 
 const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) => {
   servicesManager = servicesManager as ServicesManager;
-  const { customizationService } = servicesManager.services;
+  const { customizationService, measurementService } = servicesManager.services;
   const { t } = useTranslation('MeasurementTable');
   const amount = data.length;
 
@@ -17,8 +17,17 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
     contentProps: {},
   });
   const CustomMeasurementItem = itemCustomization.content;
-  const annotationManager = CsAnnotation.state.getAnnotationManager();
-  const { locking } = CsAnnotation;
+
+  const onMeasurementDeleteHandler = ({ uid }) => {
+    const measurement = measurementService.getMeasurement(uid);
+    measurementService.remove(
+      uid,
+      {
+        ...measurement,
+      },
+      true
+    );
+  };
 
   return (
     <div>
@@ -28,25 +37,20 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
       </div>
       <div className="ohif-scrollbar max-h-112 overflow-hidden">
         {data.length !== 0 &&
-          data.map((measurementItem, index) => {
-            const isLocked = locking.isAnnotationLocked(
-              annotationManager.getAnnotation(measurementItem.uid)
-            );
-            return (
-              <CustomMeasurementItem
-                key={measurementItem.uid}
-                uid={measurementItem.uid}
-                index={index + 1}
-                label={measurementItem.label}
-                isActive={measurementItem.isActive}
-                isLocked={isLocked}
-                displayText={measurementItem.displayText}
-                item={measurementItem}
-                onClick={onClick}
-                onEdit={onEdit}
-              />
-            );
-          })}
+          data.map((measurementItem, index) => (
+            <CustomMeasurementItem
+              key={measurementItem.uid}
+              uid={measurementItem.uid}
+              index={index + 1}
+              label={measurementItem.label}
+              isActive={measurementItem.isActive}
+              displayText={measurementItem.displayText}
+              item={measurementItem}
+              onClick={onClick}
+              onEdit={onEdit}
+              onDelete={onMeasurementDeleteHandler}
+            />
+          ))}
         {data.length === 0 && (
           <div className="group flex cursor-default border border-transparent bg-black transition duration-300">
             <div className="bg-primary-dark text-primary-light group-hover:bg-secondary-main w-6 py-1 text-center text-base transition duration-300"></div>

platform/ui/src/components/index.js

@@ -79,6 +79,7 @@ import PanelSection from './PanelSection';
 import AdvancedToolbox from './AdvancedToolbox';
 import InputDoubleRange from './InputDoubleRange';
 import LegacyButtonGroup from './LegacyButtonGroup';
+import MeasurementItem from './MeasurementTable/MeasurementItem';
 
 export {
   AboutModal,
@@ -163,4 +164,5 @@ export {
   ViewportPane,
   ViewportOverlay,
   WindowLevelMenuItem,
+  MeasurementItem,
 };

platform/ui/src/index.js

@@ -117,6 +117,7 @@ export {
   WindowLevelMenuItem,
   ImageScrollbar,
   ViewportOverlay,
+  MeasurementItem,
 } from './components';
 
 export { useSessionStorage } from './hooks';