diff --git a/platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js b/platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js
index 623c58ec65d..435915edf62 100644
--- a/platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js
+++ b/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');
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx b/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
index 7e3bbeb2bca..6126db1b7f9 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
+++ b/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 ? (
+
+ ) : (
+ {index}
+ )}
-
+
{label}
{displayText.map((line, i) => (
))}
- {!isLocked && (
-
- )}
+ onEditHandler(e)}
+ />
);
@@ -88,6 +107,7 @@ MeasurementItem.propTypes = {
isActive: PropTypes.bool,
onClick: PropTypes.func,
onEdit: PropTypes.func,
+ onDelete: PropTypes.func,
};
MeasurementItem.defaultProps = {
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx
index bc6d2364727..9905be0eb7b 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx
+++ b/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 (
@@ -28,25 +37,20 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
{data.length !== 0 &&
- data.map((measurementItem, index) => {
- const isLocked = locking.isAnnotationLocked(
- annotationManager.getAnnotation(measurementItem.uid)
- );
- return (
-
- );
- })}
+ data.map((measurementItem, index) => (
+
+ ))}
{data.length === 0 && (
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index b51bc92cf88..c6572864184 100644
--- a/platform/ui/src/components/index.js
+++ b/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,
};
diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js
index 69fc814fa53..b1f57d0f294 100644
--- a/platform/ui/src/index.js
+++ b/platform/ui/src/index.js
@@ -117,6 +117,7 @@ export {
WindowLevelMenuItem,
ImageScrollbar,
ViewportOverlay,
+ MeasurementItem,
} from './components';
export { useSessionStorage } from './hooks';