Annotation hole: Mask rendering order (#1129)

Author: camiloHimura

web_ui/src/pages/annotator/annotation/layers/background-masks.tsx

@@ -6,16 +6,16 @@ import { ShapeFactory } from '../shapes/factory.component';
 
 interface BackgroundMasksProps {
     id: string;
-    annotations: Annotation[];
+    masks: { idx: number; annotation: Annotation }[];
 }
 
-export const BackgroundMasks = ({ id, annotations }: BackgroundMasksProps) => {
+export const BackgroundMasks = ({ id, masks }: BackgroundMasksProps) => {
     return (
         <defs xmlns='http://www.w3.org/2000/svg'>
             <mask id={id} aria-label='background-mask'>
                 <rect width='100%' height='100%' fill='white' />
                 <g fill='black' fillOpacity='1'>
-                    {annotations.map((annotation) => (
+                    {masks.map(({ annotation }) => (
                         <ShapeFactory key={annotation.id} annotation={annotation} />
                     ))}
                 </g>

web_ui/src/pages/annotator/annotation/layers/layer.component.tsx

@@ -1,18 +1,14 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { Annotation as AnnotationInterface } from '../../../../core/annotations/annotation.interface';
-import { isBackgroundLabel } from '../../../../core/labels/utils';
 import { hasEqualId, isNonEmptyArray } from '../../../../shared/utils';
 import { DEFAULT_ANNOTATION_STYLES } from '../../tools/utils';
 import { Annotation } from '../annotation.component';
 import { BackgroundMasks } from './background-masks';
-import { LayerProps } from './utils';
+import { getBackgroundMaskAnnotations, LayerProps } from './utils';
 
 import classes from '../../annotator-canvas.module.scss';
 
-const isBackgroundMask = (annotation: AnnotationInterface) => annotation.labels.some(isBackgroundLabel);
-
 export const Layer = ({
     width,
     height,
@@ -25,24 +21,22 @@ export const Layer = ({
     removeBackground = false,
     renderLabel,
 }: LayerProps) => {
+    const maskAnnotations = getBackgroundMaskAnnotations(annotations);
     const overwriteAnnotationFill = removeBackground ? { '--annotation-fill-opacity': 0 } : {};
     // We render each annotation as two layers: one where we draw its shape and another
     // where we draw its labels.
     // This is done so that we can use HTML inside the canvas (which gets tricky if you
     // try to do this inside of a svg element instead)
 
-    let savedMasks: AnnotationInterface[] = [];
-
     return (
         <div aria-label='annotations'>
-            {annotations.map((annotation) => {
+            {annotations.map((annotation, index) => {
                 const hideAnnotationShape = globalAnnotations.some(hasEqualId(annotation.id));
                 // Show labels if the annotation's shape is hidden (i.e. global empty annotations),
                 // otherwise use the user's settings
                 const showLabel = hideLabels === false || hideAnnotationShape;
                 const maskId = `${annotation.id}-mask`;
-
-                savedMasks = isBackgroundMask(annotation) ? [...savedMasks, annotation] : savedMasks;
+                const savedMasks = maskAnnotations.filter((mask) => mask.idx >= index);
 
                 return (
                     <div key={annotation.id} className={classes.disabledLayer}>
@@ -54,9 +48,7 @@ export const Layer = ({
                                 id={`annotations-canvas-${annotation.id}-shape`}
                                 aria-label={`annotations-canvas-${annotation.id}-shape`}
                             >
-                                {isNonEmptyArray(savedMasks) && (
-                                    <BackgroundMasks id={maskId} annotations={savedMasks} />
-                                )}
+                                {isNonEmptyArray(savedMasks) && <BackgroundMasks id={maskId} masks={savedMasks} />}
 
                                 <Annotation
                                     key={annotation.id}

web_ui/src/pages/annotator/annotation/layers/layer.test.tsx

@@ -51,6 +51,7 @@ describe('Layer Component', () => {
             />
         );
 
-        expect(screen.getAllByLabelText('background-mask')).toHaveLength(mockedBackgroundAnnotations.length);
+        // It generates a background mask for each background annotation, plus one for the mask annotation itself
+        expect(screen.getAllByLabelText('background-mask')).toHaveLength(mockedBackgroundAnnotations.length + 1);
     });
 });

web_ui/src/pages/annotator/annotation/layers/utils.ts

@@ -7,6 +7,7 @@ import { isNil } from 'lodash-es';
 
 import { Annotation as AnnotationInterface } from '../../../../core/annotations/annotation.interface';
 import { Explanation } from '../../../../core/annotations/prediction.interface';
+import { isBackgroundLabel } from '../../../../core/labels/utils';
 import { Task } from '../../../../core/projects/task.interface';
 import { hasEqualId } from '../../../../shared/utils';
 import { AnnotationToolContext } from '../../core/annotation-tool-context.interface';
@@ -60,3 +61,11 @@ export const filterByExplanationSelection = (
         })
         .filter(hasValidLabels);
 };
+
+export const isBackgroundMask = (annotation: AnnotationInterface) => annotation.labels.some(isBackgroundLabel);
+
+export const getBackgroundMaskAnnotations = (annotations: AnnotationInterface[]) =>
+    annotations.reduce<{ idx: number; annotation: AnnotationInterface }[]>(
+        (acc, annotation, idx) => (isBackgroundMask(annotation) ? [...acc, { idx, annotation }] : acc),
+        []
+    );

web_ui/src/pages/media/utils.test.ts

@@ -1,6 +1,8 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
+import { labelFromUser } from '../../core/annotations/utils';
+import { LABEL_BEHAVIOUR } from '../../core/labels/label.interface';
 import { MEDIA_TYPE } from '../../core/media/base-media.interface';
 import {
     AdvancedFilterOptions,
@@ -10,8 +12,10 @@ import {
     SearchRuleShapeType,
 } from '../../core/media/media-filter.interface';
 import { KeyMap } from '../../shared/keyboard-events/keyboard.interface';
+import { getMockedAnnotation } from '../../test-utils/mocked-items-factory/mocked-annotations';
 import { getMockedLabel } from '../../test-utils/mocked-items-factory/mocked-labels';
 import { getMockedImageMediaItem } from '../../test-utils/mocked-items-factory/mocked-media';
+import { getBackgroundMaskAnnotations, isBackgroundMask } from '../annotator/annotation/layers/utils';
 import {
     addOrUpdateFilterRule,
     concatByProperty,
@@ -338,4 +342,29 @@ describe('media util', () => {
             );
         });
     });
+
+    it('isBackgroundMask', () => {
+        const backgroundAnnotation = getMockedAnnotation({
+            labels: [labelFromUser(getMockedLabel({ behaviour: LABEL_BEHAVIOUR.BACKGROUND }))],
+        });
+
+        expect(isBackgroundMask(backgroundAnnotation)).toBe(true);
+        expect(isBackgroundMask(getMockedAnnotation({}))).toBe(false);
+    });
+});
+describe('getBackgroundMaskAnnotations', () => {
+    it('returns array with background mask annotations and their indices', () => {
+        const defaultLabel = labelFromUser(getMockedLabel({}));
+        const backgroundLabel = labelFromUser(getMockedLabel({ behaviour: LABEL_BEHAVIOUR.BACKGROUND }));
+
+        const annotation1 = getMockedAnnotation({ labels: [defaultLabel] });
+        const annotation2 = getMockedAnnotation({ labels: [backgroundLabel] });
+        const annotation3 = getMockedAnnotation({ labels: [defaultLabel, backgroundLabel] });
+        const annotations = [annotation1, annotation2, annotation3];
+
+        expect(getBackgroundMaskAnnotations(annotations)).toEqual([
+            { idx: 1, annotation: annotation2 },
+            { idx: 2, annotation: annotation3 },
+        ]);
+    });
 });