Add missing annotation color

Author: jpggvilaca

web_ui/packages/smart-tools/src/edit-bounding-box/edit-bounding-box/edit-bounding-box.component.tsx

@@ -68,11 +68,18 @@ export const EditBoundingBox = ({
                 >
                     <g id={`canvas-annotation-${annotation.id}`}>
                         <rect
-                            x={annotation.shape.x}
-                            y={annotation.shape.y}
-                            width={annotation.shape.width}
-                            height={annotation.shape.height}
-                            fill='transparent'
+                            x={shape.x}
+                            y={shape.y}
+                            width={shape.width}
+                            height={shape.height}
+                            fill={annotation.color || 'var(--intel-blue, #0068b5)'}
+                            fillOpacity='var(--annotation-fill-opacity, 0.2)'
+                            stroke={annotation.color || 'var(--intel-blue, #0068b5)'}
+                            strokeWidth={2 / zoom}
+                            strokeOpacity='var(--annotation-border-opacity, 0.8)'
+                            strokeLinecap='round'
+                            strokeDasharray='0'
+                            strokeDashoffset='0'
                         />
                     </g>
                 </TranslateShape>

web_ui/packages/smart-tools/src/shared/interfaces.ts

@@ -60,4 +60,5 @@ export interface Annotation {
     readonly isSelected: boolean;
     readonly isHidden: boolean;
     readonly isLocked: boolean;
+    readonly color?: string;
 }

web_ui/src/pages/annotator/tools/edit-tool/edit-annotation-tool.component.tsx

@@ -11,6 +11,7 @@ import { useOutsideClick } from '../../../../hooks/outside-click/outside-click.h
 import { hasEqualId } from '../../../../shared/utils';
 import { isWheelButton } from '../../../buttons-utils';
 import { Labels } from '../../annotation/labels/labels.component';
+import { getLabelsColor } from '../../annotation/labels/utils';
 import { ToolType } from '../../core/annotation-tool-context.interface';
 import { useROI } from '../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { getGlobalAnnotations } from '../../providers/task-chain-provider/utils';
@@ -51,6 +52,8 @@ const EditAnnotationToolFactory = ({
 
     switch (annotation.shape.shapeType) {
         case ShapeType.Rect: {
+            const annotationColor = getLabelsColor(annotation.labels, selectedTask);
+
             return (
                 <EditBoundingBoxTool
                     roi={roi}
@@ -63,7 +66,11 @@ const EditAnnotationToolFactory = ({
                             labels: annotation.labels,
                         });
                     }}
-                    annotation={annotation as Annotation & { shape: { shapeType: ShapeType.Rect } }}
+                    annotation={
+                        { ...annotation, color: annotationColor } as Annotation & {
+                            shape: { shapeType: ShapeType.Rect };
+                        }
+                    }
                     disableTranslation={disableTranslation}
                     disablePoints={disablePoints}
                 />