Rebase and reorganize files & folders

Author: jpggvilaca

ui/src/components/interfaces.ts

@@ -0,0 +1,4 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+export type Label = { id: string; name: string; color: string; isPrediction: boolean; score?: number };

ui/src/features/annotator/annotation-shape.test.tsx

@@ -6,9 +6,9 @@ import { describe, expect, it } from 'vitest';
 
 import { getMockedAnnotation } from '../../../tests/test-utils/mocked-annotation';
 import { AnnotationShape } from './annotation-shape';
-import { Annotation, BoundingBox, Polygon } from './types';
+import { Annotation, Polygon, Rect } from './shapes/interfaces';
 
-type AnnotationBoundingBox = Annotation & { shape: BoundingBox };
+type AnnotationBoundingBox = Annotation & { shape: Rect };
 type AnnotationPolygon = Annotation & { shape: Polygon };
 
 describe('AnnotationShape', () => {
@@ -31,7 +31,7 @@ describe('AnnotationShape', () => {
             { x: 3, y: 4 },
             { x: 5, y: 6 },
         ];
-        const annotation = getMockedAnnotation({ shape: { type: 'polygon', points } }) as AnnotationPolygon;
+        const annotation = getMockedAnnotation({ shape: { shapeType: 'polygon', points } }) as AnnotationPolygon;
 
         render(<AnnotationShape annotation={annotation} />);
         const polygon = screen.getByLabelText('annotation polygon');

ui/src/features/annotator/annotation-shape.tsx

@@ -1,8 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Point } from '../../components/shapes/interfaces';
-import { Annotation } from './types';
+import { Annotation, Point } from './shapes/interfaces';
 
 type AnnotationShapeProps = {
     annotation: Annotation;
@@ -16,7 +15,7 @@ export const AnnotationShape = ({ annotation }: AnnotationShapeProps) => {
     const shape = annotation.shape;
     const color = annotation.labels[0].color;
 
-    if (shape.type === 'bounding-box') {
+    if (shape.shapeType === 'rect') {
         return (
             <rect
                 aria-label='annotation bounding-box'

ui/src/components/annotation/annotation.component.tsx renamed to ui/src/features/annotator/annotation/annotation.component.tsx

@@ -10,18 +10,19 @@ interface AnnotationProps {
 }
 
 export const Annotation = ({ maskId, annotation }: AnnotationProps): JSX.Element => {
-    const { id, color, shape } = annotation;
+    const { id, labels, shape } = annotation;
 
     return (
         <>
             <g
                 mask={maskId}
                 id={`canvas-annotation-${id}`}
                 strokeLinecap={'round'}
-                {...(color !== undefined
+                {...(labels.length > 0
                     ? {
-                          fill: color,
-                          stroke: color,
+                          // TODO: fix this color behavior
+                          fill: labels[0].color,
+                          stroke: labels[0].color,
                           strokeOpacity: 'var(--annotation-border-opacity)',
                       }
                     : {})}

ui/src/components/annotation/shape-factory.component.tsx renamed to ui/src/features/annotator/annotation/shape-factory.component.tsx

@@ -5,7 +5,7 @@ import { CSSProperties } from 'react';
 
 import { AnnotationShape } from './annotation-shape';
 import { MaskAnnotations } from './mask-annotations';
-import { Annotation } from './types';
+import { Annotation } from './shapes/interfaces';
 
 type AnnotationsProps = {
     annotations: Array<Annotation>;

ui/src/components/annotation/utils.ts renamed to ui/src/features/annotator/annotation/utils.ts

@@ -4,7 +4,7 @@
 import { ReactNode, useId } from 'react';
 
 import { AnnotationShape } from './annotation-shape';
-import { Annotation } from './types';
+import { Annotation } from './shapes/interfaces';
 
 type MaskAnnotationsProps = {
     annotations: Array<Annotation>;

ui/src/features/annotator/annotations.tsx

@@ -1,11 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-export interface Annotation {
-    readonly id: string;
-    readonly shape: Shape;
-    color: string;
-}
+import { Label } from '../../../components/interfaces';
 
 export interface RegionOfInterest {
     x: number;
@@ -45,4 +41,17 @@ export interface ClipperPoint {
     Y: number;
 }
 
+export type Annotation = {
+    id: string;
+    shape: Shape;
+    labels: Array<Label>;
+};
+
+export type AnnotationState = {
+    isHovered: boolean;
+    isSelected: boolean;
+    isHidden: boolean;
+    isLocked: boolean;
+};
+
 export type Shape = Rect | Polygon;