Address comments

jpggvilaca · jpggvilaca · commit 9c1ca04cebfe · 2025-09-02T14:23:41.000+02:00
diff --git a/ui/src/components/interfaces.ts b/ui/src/components/interfaces.ts
diff --git a/ui/src/features/annotator/annotation-shape.test.tsx b/ui/src/features/annotator/annotation-shape.test.tsx
@@ -6,7 +6,7 @@ import { describe, expect, it } from 'vitest';
 
 import { getMockedAnnotation } from '../../../tests/test-utils/mocked-annotation';
 import { AnnotationShape } from './annotation-shape';
-import { Annotation, Polygon, Rect } from './shapes/interfaces';
+import { Annotation, Polygon, Rect } from './interfaces';
 
 type AnnotationBoundingBox = Annotation & { shape: Rect };
 type AnnotationPolygon = Annotation & { shape: Polygon };
diff --git a/ui/src/features/annotator/annotation-shape.tsx b/ui/src/features/annotator/annotation-shape.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Annotation, Point } from './shapes/interfaces';
+import { Annotation, Point } from './interfaces';
 
 type AnnotationShapeProps = {
     annotation: Annotation;
diff --git a/ui/src/features/annotator/annotation/annotation.component.tsx b/ui/src/features/annotator/annotation/annotation.component.tsx
@@ -1,16 +1,16 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Annotation as AnnotationInterface } from '../shapes/interfaces';
-import { ShapeFactory } from './shape-factory.component';
+import { AnnotationShape } from '../annotation-shape';
+import { Annotation as AnnotationInterface } from '../interfaces';
 
 interface AnnotationProps {
     annotation: AnnotationInterface;
     maskId?: string;
 }
 
 export const Annotation = ({ maskId, annotation }: AnnotationProps): JSX.Element => {
-    const { id, labels, shape } = annotation;
+    const { id, labels } = annotation;
 
     return (
         <>
@@ -27,7 +27,7 @@ export const Annotation = ({ maskId, annotation }: AnnotationProps): JSX.Element
                       }
                     : {})}
             >
-                <ShapeFactory shape={shape} styles={{}} ariaLabel={''} />
+                <AnnotationShape annotation={annotation} />
             </g>
         </>
     );
diff --git a/ui/src/features/annotator/annotation/shape-factory.component.tsx b/ui/src/features/annotator/annotation/shape-factory.component.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Shape } from '../shapes/interfaces';
+import { Shape } from '../interfaces';
 import { Polygon } from '../shapes/polygon.component';
 import { Rectangle } from '../shapes/rectangle.component';
 
diff --git a/ui/src/features/annotator/annotations.tsx b/ui/src/features/annotator/annotations.tsx
@@ -4,8 +4,8 @@
 import { CSSProperties } from 'react';
 
 import { AnnotationShape } from './annotation-shape';
+import { Annotation } from './interfaces';
 import { MaskAnnotations } from './mask-annotations';
-import { Annotation } from './shapes/interfaces';
 
 type AnnotationsProps = {
     annotations: Array<Annotation>;
diff --git a/ui/src/features/annotator/interfaces.ts b/ui/src/features/annotator/interfaces.ts
@@ -1,8 +1,6 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Label } from '../../../components/interfaces';
-
 export interface RegionOfInterest {
     x: number;
     y: number;
@@ -54,4 +52,6 @@ export type AnnotationState = {
     isLocked: boolean;
 };
 
+export type Label = { id: string; name: string; color: string; isPrediction: boolean; score?: number };
+
 export type Shape = Rect | Polygon;
diff --git a/ui/src/features/annotator/mask-annotations.tsx b/ui/src/features/annotator/mask-annotations.tsx
@@ -4,7 +4,7 @@
 import { ReactNode, useId } from 'react';
 
 import { AnnotationShape } from './annotation-shape';
-import { Annotation } from './shapes/interfaces';
+import { Annotation } from './interfaces';
 
 type MaskAnnotationsProps = {
     annotations: Array<Annotation>;
diff --git a/ui/src/features/annotator/shapes/circle.component.tsx b/ui/src/features/annotator/shapes/circle.component.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Circle as CircleInterface } from './interfaces';
+import { Circle as CircleInterface } from '../interfaces';
 
 interface CircleProps {
     circle: CircleInterface;
diff --git a/ui/src/features/annotator/shapes/polygon.component.tsx b/ui/src/features/annotator/shapes/polygon.component.tsx
@@ -3,7 +3,7 @@
 
 import { useMemo } from 'react';
 
-import { Point, Polygon as PolygonInterface } from './interfaces';
+import { Point, Polygon as PolygonInterface } from '../interfaces';
 
 const getFormattedPoints = (points: Point[]): string => points.map(({ x, y }) => `${x},${y}`).join(' ');
 
diff --git a/ui/src/features/annotator/shapes/rectangle.component.tsx b/ui/src/features/annotator/shapes/rectangle.component.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Rect as RectInterface } from './interfaces';
+import { Rect as RectInterface } from '../interfaces';
 
 interface RectangleProps {
     rect: RectInterface;
diff --git a/ui/src/features/annotator/shapes/utils.ts b/ui/src/features/annotator/shapes/utils.ts
@@ -7,7 +7,7 @@ import { Shape as SmartToolsShape, Polygon as ToolPolygon, Rect as ToolRect } fr
 import { BoundingBox } from '@geti/smart-tools/utils';
 import { isEmpty } from 'lodash-es';
 
-import { ClipperPoint, Point, Polygon, Rect, RegionOfInterest, Shape } from './interfaces';
+import { ClipperPoint, Point, Polygon, Rect, RegionOfInterest, Shape } from '../interfaces';
 
 // @ts-expect-error `default` actually exists in the module
 const ClipperJS = Clipper.default || Clipper;
diff --git a/ui/src/features/annotator/tools/bounding-box-tool/anchor.component.tsx b/ui/src/features/annotator/tools/bounding-box-tool/anchor.component.tsx
@@ -6,7 +6,7 @@ import { CSSProperties, PointerEvent, ReactNode, useState } from 'react';
 import { isFunction } from 'lodash-es';
 
 import { isLeftButton } from '../../annotation/utils';
-import { Point } from '../../shapes/interfaces';
+import { Point } from '../../interfaces';
 
 interface AnchorProps {
     children: ReactNode;
diff --git a/ui/src/features/annotator/tools/bounding-box-tool/bounding-box-tool.component.tsx b/ui/src/features/annotator/tools/bounding-box-tool/bounding-box-tool.component.tsx
@@ -3,7 +3,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { Annotation, Point, RegionOfInterest } from '../../shapes/interfaces';
+import { Annotation, Point, RegionOfInterest } from '../../interfaces';
 import { ResizeAnchor } from './resize-anchor.component';
 import { TranslateShape } from './translate-shape.component';
 import { getBoundingBoxInRoi, getBoundingBoxResizePoints, getClampedBoundingBox } from './utils';
diff --git a/ui/src/features/annotator/tools/bounding-box-tool/translate-shape.component.tsx b/ui/src/features/annotator/tools/bounding-box-tool/translate-shape.component.tsx
@@ -5,7 +5,7 @@ import { PointerEvent, useState } from 'react';
 
 import { Annotation } from '../../annotation/annotation.component';
 import { allowPanning, isLeftButton } from '../../annotation/utils';
-import { Annotation as AnnotationInterface, Point } from '../../shapes/interfaces';
+import { Annotation as AnnotationInterface, Point } from '../../interfaces';
 
 const STROKE_WIDTH = 2;
 
diff --git a/ui/src/features/annotator/tools/bounding-box-tool/utils.ts b/ui/src/features/annotator/tools/bounding-box-tool/utils.ts
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Point, RegionOfInterest } from '../../shapes/interfaces';
+import { Point, RegionOfInterest } from '../../interfaces';
 
 export const getBoundingBoxInRoi = (boundingBox: RegionOfInterest, roi: RegionOfInterest) => {
     const x = Math.max(0, boundingBox.x);
diff --git a/ui/src/features/annotator/tools/segment-anything-tool/annotations-mask.component.tsx b/ui/src/features/annotator/tools/segment-anything-tool/annotations-mask.component.tsx
@@ -3,8 +3,8 @@
 
 import { useId } from 'react-aria';
 
-import { ShapeFactory } from '../../annotation/shape-factory.component';
-import { Annotation as AnnotationInterface } from '../../shapes/interfaces';
+import { AnnotationShape } from '../../annotation-shape';
+import { Annotation as AnnotationInterface } from '../../interfaces';
 
 import classes from './segment-anything.module.scss';
 
@@ -33,7 +33,7 @@ export const AnnotationsMask = ({ annotations, width, height, fillOpacity = MASK
                 {annotations.map((annotation) => (
                     <g key={annotation.id} fill='black'>
                         {/* Use an empty set of labels so that the shape won't receive a background */}
-                        <ShapeFactory shape={annotation.shape} ariaLabel={'Mask'} />
+                        <AnnotationShape annotation={annotation} />
                     </g>
                 ))}
             </mask>
diff --git a/ui/src/features/annotator/tools/segment-anything-tool/segment-anything-state-provider.component.tsx b/ui/src/features/annotator/tools/segment-anything-tool/segment-anything-state-provider.component.tsx
@@ -8,7 +8,7 @@ import { toast } from '@geti/ui';
 import { useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { isEmpty } from 'lodash-es';
 
-import { Shape } from '../../shapes/interfaces';
+import { Shape } from '../../interfaces';
 import { InteractiveAnnotationPoint } from './segment-anything.interface';
 import { useDecodingMutation, useDecodingQuery, useDecodingQueryOptions } from './use-decoding-query.hook';
 import { useSegmentAnythingModel } from './use-segment-anything-model.hook';
diff --git a/ui/src/features/annotator/tools/segment-anything-tool/segment-anything-tool.component.tsx b/ui/src/features/annotator/tools/segment-anything-tool/segment-anything-tool.component.tsx
@@ -6,9 +6,9 @@ import { PointerEvent, useEffect, useRef, useState } from 'react';
 import { clampPointBetweenImage, isPointInShape, pointInRectangle } from '@geti/smart-tools/utils';
 
 import { useZoom } from '../../../../components/zoom/zoom';
-import { ShapeFactory } from '../../annotation/shape-factory.component';
+import { AnnotationShape } from '../../annotation-shape';
 import { isRightButton } from '../../annotation/utils';
-import { Annotation, Point, RegionOfInterest, Shape } from '../../shapes/interfaces';
+import { Annotation, Point, RegionOfInterest, Shape } from '../../interfaces';
 import { getRelativePoint, removeOffLimitPoints } from '../../shapes/utils';
 import { AnnotationsMask } from './annotations-mask.component';
 import { InteractiveSegmentationPoint } from './interactive-segmentation-point.component';
@@ -154,7 +154,7 @@ export const SegmentAnythingTool = () => {
     const annotations = (showPreviewShapes ? previewShapes : result.shapes).map((shape, idx): Annotation => {
         return {
             shape,
-            labels: [],
+            labels: [{ id: `sam-${idx}`, name: 'SAM', color: 'var(--energy-blue-shade)', isPrediction: true }],
             id: `${idx}`,
         };
     });
@@ -182,35 +182,33 @@ export const SegmentAnythingTool = () => {
                 height={selectedMediaItem.image.height}
             />
 
-            {showPreviewShapes &&
-                previewShapes.map((shape, idx) => (
+            {annotations.map((annotation, idx) => {
+                return (
                     <g
                         key={idx}
-                        aria-label='Segment anything preview'
+                        aria-label={showPreviewShapes ? 'Segment anything preview' : 'Segment anything result'}
                         {...SELECT_ANNOTATION_STYLES}
                         strokeWidth={'calc(3px / var(--zoom-level))'}
+                        cursor={
+                            !showPreviewShapes
+                                ? `url(/icons/cursor/pencil-${
+                                      interactiveMode === true && rightClickMode === false ? 'minus' : 'plus'
+                                  }.svg) 16 16, auto`
+                                : undefined
+                        }
                         fillOpacity={0.0}
-                        className={interactiveMode ? classes.stroke : classes.animateStroke}
+                        className={
+                            showPreviewShapes
+                                ? interactiveMode
+                                    ? classes.stroke
+                                    : classes.animateStroke
+                                : classes.stroke
+                        }
                     >
-                        <ShapeFactory shape={shape} ariaLabel={'Preview shape'} />
+                        <AnnotationShape annotation={annotation} />
                     </g>
-                ))}
-
-            {result.shapes.map((shape, idx) => (
-                <g
-                    key={idx}
-                    aria-label='Segment anything result'
-                    {...SELECT_ANNOTATION_STYLES}
-                    strokeWidth={'calc(3px / var(--zoom-level))'}
-                    cursor={`url(/icons/cursor/pencil-${
-                        interactiveMode === true && rightClickMode === false ? 'minus' : 'plus'
-                    }.svg) 16 16, auto`}
-                    fillOpacity={0.0}
-                    className={classes.stroke}
-                >
-                    <ShapeFactory shape={shape} ariaLabel={'Result shape'} />
-                </g>
-            ))}
+                );
+            })}
 
             {points.map((point, index) => (
                 <InteractiveSegmentationPoint
diff --git a/ui/src/features/annotator/tools/segment-anything-tool/use-decoding-query.hook.ts b/ui/src/features/annotator/tools/segment-anything-tool/use-decoding-query.hook.ts
@@ -3,7 +3,7 @@
 
 import { queryOptions, useMutation, useQuery } from '@tanstack/react-query';
 
-import { RegionOfInterest, Shape } from '../../shapes/interfaces';
+import { RegionOfInterest, Shape } from '../../interfaces';
 import { removeOffLimitPoints } from '../../shapes/utils';
 import { InteractiveAnnotationPoint } from './segment-anything.interface';
 
diff --git a/ui/src/features/dataset/mock-response.ts b/ui/src/features/dataset/mock-response.ts
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Annotation } from '../annotator/shapes/interfaces';
+import { Annotation } from '../annotator/interfaces';
 
 const polygonAnnotation: Annotation = {
     id: 'mocked-prediction-3',
diff --git a/ui/tests/test-utils/mocked-annotation.ts b/ui/tests/test-utils/mocked-annotation.ts
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Annotation } from '../../src/features/annotator/shapes/interfaces';
+import { Annotation } from '../../src/features/annotator/interfaces';
 import { getMockedLabel } from './mocked-labels';
 
 export const getMockedAnnotation = (annotation?: Partial<Annotation>): Annotation => {
diff --git a/ui/tests/test-utils/mocked-labels.ts b/ui/tests/test-utils/mocked-labels.ts
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Label } from '../../src/components/interfaces';
+import { Label } from '../../src/features/annotator/interfaces';
 
 export const getMockedLabel = (label?: Partial<Label>): Label => {
     return {
