Remove annotationToolContext dependency

jpggvilaca · jpggvilaca · commit 80334a393fce · 2025-08-19T15:58:39.000+02:00
diff --git a/web_ui/src/pages/annotator/annotation/labels/annotation-actions.component.tsx b/web_ui/src/pages/annotator/annotation/labels/annotation-actions.component.tsx
@@ -9,7 +9,7 @@ import { Annotation } from '../../../../core/annotations/annotation.interface';
 import { isAnomalyDomain, isClassificationDomain } from '../../../../core/projects/domains';
 import { ANIMATION_PARAMETERS } from '../../../../shared/animation-parameters/animation-parameters';
 import { hasEqualId } from '../../../../shared/utils';
-import { AnnotationToolContext } from '../../core/annotation-tool-context.interface';
+import { useAnnotationScene } from '../../providers/annotation-scene-provider/annotation-scene-provider.component';
 import { useROI } from '../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { getGlobalAnnotations } from '../../providers/task-chain-provider/utils';
 import { useTask } from '../../providers/task-provider/task-provider.component';
@@ -18,21 +18,20 @@ import classes from './labels.module.scss';
 
 interface LabelActionsProps {
     annotation: Annotation;
-    annotationToolContext: AnnotationToolContext;
     setEditLabels: (editLabels: boolean) => void;
 }
 
-const useOnRemoveLabels = (annotationToolContext: AnnotationToolContext, annotation: Annotation) => {
+const useOnRemoveLabels = (annotation: Annotation) => {
     const { selectedTask } = useTask();
     const { roi } = useROI();
-    const { removeAnnotations, removeLabels } = annotationToolContext.scene;
+    const { annotations, removeAnnotations, removeLabels } = useAnnotationScene();
 
     if (selectedTask === null) {
         return () => removeAnnotations([annotation]);
     }
 
     if (isClassificationDomain(selectedTask.domain) || isAnomalyDomain(selectedTask.domain)) {
-        const globalAnnotations = getGlobalAnnotations(annotationToolContext.scene.annotations, roi, selectedTask);
+        const globalAnnotations = getGlobalAnnotations(annotations, roi, selectedTask);
 
         if (!globalAnnotations.some(hasEqualId(annotation.id))) {
             return () => {
@@ -50,12 +49,8 @@ const useOnRemoveLabels = (annotationToolContext: AnnotationToolContext, annotat
     };
 };
 
-export const AnnotationActions = ({
-    annotation,
-    annotationToolContext,
-    setEditLabels,
-}: LabelActionsProps): JSX.Element => {
-    const onRemoveLabels = useOnRemoveLabels(annotationToolContext, annotation);
+export const AnnotationActions = ({ annotation, setEditLabels }: LabelActionsProps): JSX.Element => {
+    const onRemoveLabels = useOnRemoveLabels(annotation);
 
     const onEditLabels = () => {
         setEditLabels(true);
diff --git a/web_ui/src/pages/annotator/annotation/labels/edit-labels.component.tsx b/web_ui/src/pages/annotator/annotation/labels/edit-labels.component.tsx
@@ -10,21 +10,20 @@ import { isAnomalyDomain } from '../../../../core/projects/domains';
 import { TaskLabelTreeSearchPopover } from '../../../../shared/components/task-label-tree-search/task-label-tree-search-popover.component';
 import { hasEqualId, runWhenTruthy } from '../../../../shared/utils';
 import { SelectionIndicator } from '../../components/labels/label-search/selection-indicator.component';
-import { AnnotationToolContext } from '../../core/annotation-tool-context.interface';
+import { useAnnotationScene } from '../../providers/annotation-scene-provider/annotation-scene-provider.component';
 import { useROI } from '../../providers/region-of-interest-provider/region-of-interest-provider.component';
 import { getGlobalAnnotations } from '../../providers/task-chain-provider/utils';
 import { useTask } from '../../providers/task-provider/task-provider.component';
 
 interface EditLabelsProps {
     setEditLabels: (editLabels: boolean) => void;
     annotation: Annotation;
-    annotationToolContext: AnnotationToolContext;
 }
 
-export const EditLabels = ({ annotation, annotationToolContext, setEditLabels }: EditLabelsProps): JSX.Element => {
+export const EditLabels = ({ annotation, setEditLabels }: EditLabelsProps): JSX.Element => {
     const { roi } = useROI();
     const { tasks, selectedTask } = useTask();
-    const { addLabel, removeLabels, annotations } = annotationToolContext.scene;
+    const { addLabel, removeLabels, annotations } = useAnnotationScene();
 
     const isAnomalyTask = selectedTask && isAnomalyDomain(selectedTask?.domain);
     const globalAnnotations = getGlobalAnnotations(annotations, roi, selectedTask);
diff --git a/web_ui/src/pages/annotator/annotation/labels/labels.component.tsx b/web_ui/src/pages/annotator/annotation/labels/labels.component.tsx
@@ -11,7 +11,8 @@ import { useHover } from 'react-aria';
 import { Annotation } from '../../../../core/annotations/annotation.interface';
 import { ShapeType } from '../../../../core/annotations/shapetype.enum';
 import { isRect } from '../../../../core/annotations/utils';
-import { AnnotationToolContext, ToolType } from '../../core/annotation-tool-context.interface';
+import { ToolType } from '../../core/annotation-tool-context.interface';
+import { useAnnotationToolContext } from '../../providers/annotation-tool-provider/annotation-tool-provider.component';
 import { useTask } from '../../providers/task-provider/task-provider.component';
 import { AnnotationActions } from './annotation-actions.component';
 import { EditLabels } from './edit-labels.component';
@@ -27,7 +28,6 @@ export interface LabelsProps {
     showOptions?: boolean;
     annotation: Annotation;
     areLabelsInteractive?: boolean;
-    annotationToolContext: AnnotationToolContext;
     canEditAnnotationLabel?: boolean;
 }
 
@@ -67,12 +67,12 @@ export const Labels = ({
     annotation,
     isOverlap = false,
     showOptions = true,
-    annotationToolContext,
     areLabelsInteractive = true,
     canEditAnnotationLabel = true,
 }: LabelsProps): JSX.Element => {
     const { selectedTask } = useTask();
     const { x: left, y, height } = useLabelPosition(annotation);
+    const { tool } = useAnnotationToolContext();
 
     const [editLabels, setEditLabels] = useState(false);
     const { hoverProps, isHovered } = useHover({ isDisabled: editLabels || !canEditAnnotationLabel });
@@ -84,9 +84,10 @@ export const Labels = ({
             return undefined;
         }
 
-        if (!annotation.isSelected && annotationToolContext.tool === ToolType.SelectTool) {
+        if (!annotation.isSelected && tool === ToolType.SelectTool) {
             return isHovered ? 2 : 1;
         }
+
         return undefined;
     };
 
@@ -112,11 +113,7 @@ export const Labels = ({
                     // Make sure the label search component overlaps labels from other annotations
                     style={{ ...style, zIndex: 2 }}
                 >
-                    <EditLabels
-                        annotation={annotation}
-                        setEditLabels={setEditLabels}
-                        annotationToolContext={annotationToolContext}
-                    />
+                    <EditLabels annotation={annotation} setEditLabels={setEditLabels} />
                 </div>
             </>
         );
@@ -167,11 +164,7 @@ export const Labels = ({
 
                 <AnimatePresence>
                     {showOptions && isHovered && (
-                        <AnnotationActions
-                            setEditLabels={setEditLabels}
-                            annotation={annotation}
-                            annotationToolContext={annotationToolContext}
-                        />
+                        <AnnotationActions setEditLabels={setEditLabels} annotation={annotation} />
                     )}
                 </AnimatePresence>
             </ul>
diff --git a/web_ui/src/pages/annotator/annotation/labels/shape-label.component.tsx b/web_ui/src/pages/annotator/annotation/labels/shape-label.component.tsx
@@ -9,13 +9,7 @@ interface ShapeLabelProps extends LabelsProps {
     isOverlap?: boolean;
 }
 
-export const ShapeLabel = ({
-    isOverlap,
-    annotation,
-    showOptions,
-    areLabelsInteractive,
-    annotationToolContext,
-}: ShapeLabelProps) => {
+export const ShapeLabel = ({ isOverlap, annotation, showOptions, areLabelsInteractive }: ShapeLabelProps) => {
     if (isPoseShape(annotation.shape)) {
         return annotation.shape.points.map((point) => (
             <ExpandablePointLabel isVisible key={point.label.id} point={point} isOverlap={isOverlap} />
@@ -28,7 +22,6 @@ export const ShapeLabel = ({
             showOptions={showOptions}
             annotation={annotation}
             areLabelsInteractive={areLabelsInteractive}
-            annotationToolContext={annotationToolContext}
         />
     );
 };
diff --git a/web_ui/src/pages/annotator/annotation/layers/layers.component.tsx b/web_ui/src/pages/annotator/annotation/layers/layers.component.tsx
@@ -64,7 +64,6 @@ export const Layers = ({
                             showOptions={showLabelOptions && isActiveLearningMode}
                             annotation={annotation}
                             areLabelsInteractive={props.areLabelsInteractive}
-                            annotationToolContext={props.annotationToolContext}
                         />
                     )}
                 />
@@ -86,7 +85,6 @@ export const Layers = ({
                             annotation={annotation}
                             isOverlap={!isClassification}
                             areLabelsInteractive={props.areLabelsInteractive}
-                            annotationToolContext={props.annotationToolContext}
                         />
                     )}
                 />
diff --git a/web_ui/src/pages/annotator/annotation/layers/video-layers.component.tsx b/web_ui/src/pages/annotator/annotation/layers/video-layers.component.tsx
@@ -77,7 +77,6 @@ export const VideoLayers = ({
                             showOptions={isActiveLearningMode}
                             annotation={annotation}
                             areLabelsInteractive={props.areLabelsInteractive}
-                            annotationToolContext={props.annotationToolContext}
                         />
                     )}
                 />
@@ -96,7 +95,6 @@ export const VideoLayers = ({
                             showOptions={false}
                             annotation={annotation}
                             areLabelsInteractive={props.areLabelsInteractive}
-                            annotationToolContext={props.annotationToolContext}
                         />
                     )}
                 />
diff --git a/web_ui/src/pages/annotator/annotator-canvas.component.tsx b/web_ui/src/pages/annotator/annotator-canvas.component.tsx
@@ -166,7 +166,6 @@ export function AnnotatorCanvas({
                                 <Labels
                                     key={annotation.id}
                                     annotation={annotation}
-                                    annotationToolContext={annotationToolContext}
                                     canEditAnnotationLabel={canEditAnnotationLabel}
                                 />
                             ))}
diff --git a/web_ui/src/pages/annotator/components/annotator-preview/preview-canvas-content.component.tsx b/web_ui/src/pages/annotator/components/annotator-preview/preview-canvas-content.component.tsx
@@ -12,7 +12,6 @@ import { AnnotationsMask } from '../../annotation/annotations-mask.component';
 import { ShapeLabel } from '../../annotation/labels/shape-label.component';
 import { Layer } from '../../annotation/layers/layer.component';
 import { MediaImage } from '../../media-image.component';
-import { useAnnotationToolContext } from '../../providers/annotation-tool-provider/annotation-tool-provider.component';
 import { useAnnotatorCanvasSettings } from '../../providers/annotator-canvas-settings-provider/annotator-canvas-settings-provider.component';
 import {
     useExplanationOpacity,
@@ -46,7 +45,6 @@ export const PreviewCanvasContent = ({
     const { inputs } = useTaskChain();
     const { zoomState } = useZoom();
     const { tasks, selectedTask } = useTask();
-    const annotationToolContext = useAnnotationToolContext();
     const { canvasSettingsState } = useAnnotatorCanvasSettings();
     const { showOverlapAnnotations } = useExplanationOpacity();
     const { isExplanationVisible, selectedExplanation } = usePrediction();
@@ -97,13 +95,7 @@ export const PreviewCanvasContent = ({
                             selectedTask={selectedTask}
                             globalAnnotations={getGlobalAnnotations(visibleAnnotations, roi, selectedTask)}
                             removeBackground={showOverlapAnnotations}
-                            renderLabel={(annotation) => (
-                                <ShapeLabel
-                                    showOptions={false}
-                                    annotation={annotation}
-                                    annotationToolContext={annotationToolContext}
-                                />
-                            )}
+                            renderLabel={(annotation) => <ShapeLabel showOptions={false} annotation={annotation} />}
                         />
                     )}
 
@@ -117,13 +109,7 @@ export const PreviewCanvasContent = ({
                             selectedTask={selectedTask}
                             globalAnnotations={getGlobalAnnotations(annotations, roi, selectedTask)}
                             isOverlap={!isClassification}
-                            renderLabel={(annotation) => (
-                                <ShapeLabel
-                                    showOptions={false}
-                                    annotation={annotation}
-                                    annotationToolContext={annotationToolContext}
-                                />
-                            )}
+                            renderLabel={(annotation) => <ShapeLabel showOptions={false} annotation={annotation} />}
                         />
                     )}
                 </div>
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-annotation-tool.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-annotation-tool.component.tsx
@@ -13,6 +13,7 @@ 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';
 import { useTask } from '../../providers/task-provider/task-provider.component';
+import { useZoom } from '../../zoom/zoom-provider.component';
 import { SelectingToolType } from '../selecting-tool/selecting-tool.enums';
 import { ToolAnnotationContextProps } from '../tools.interface';
 import { EditBoundingBox as EditBoundingBoxTool } from './edit-bounding-box/edit-bounding-box.component';
@@ -32,21 +33,28 @@ const EditAnnotationToolFactory = ({
     disableTranslation = false,
     disablePoints = false,
 }: EditAnnotationToolFactoryProps) => {
-    const { roi } = useROI();
+    const { roi, image } = useROI();
     const { tasks, selectedTask } = useTask();
     const task = selectedTask ?? tasks[0];
+    const { scene } = annotationToolContext;
+    const {
+        zoomState: { zoom },
+    } = useZoom();
 
-    const globalAnnotations = getGlobalAnnotations(annotationToolContext.scene.annotations, roi, task);
+    const globalAnnotations = getGlobalAnnotations(scene.annotations, roi, task);
 
     if (globalAnnotations.some(hasEqualId(annotation.id))) {
-        return <Labels annotation={annotation} annotationToolContext={annotationToolContext} />;
+        return <Labels annotation={annotation} />;
     }
 
     switch (annotation.shape.shapeType) {
         case ShapeType.Rect: {
             return (
                 <EditBoundingBoxTool
-                    annotationToolContext={annotationToolContext}
+                    roi={roi}
+                    image={image}
+                    zoom={zoom}
+                    updateAnnotation={scene.updateAnnotation}
                     annotation={annotation as Annotation & { shape: { shapeType: ShapeType.Rect } }}
                     disableTranslation={disableTranslation}
                     disablePoints={disablePoints}
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-bounding-box/edit-bounding-box.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-bounding-box/edit-bounding-box.component.tsx
@@ -4,44 +4,42 @@
 import { useEffect, useState } from 'react';
 
 import { ANCHOR_SIZE, ResizeAnchor } from '@geti/smart-tools';
+import { RegionOfInterest } from '@geti/smart-tools/types';
 
 import { Annotation } from '../../../../../core/annotations/annotation.interface';
 import { Point } from '../../../../../core/annotations/shapes.interface';
 import { ShapeType } from '../../../../../core/annotations/shapetype.enum';
 import { Labels } from '../../../annotation/labels/labels.component';
-import { AnnotationToolContext } from '../../../core/annotation-tool-context.interface';
-import { useROI } from '../../../providers/region-of-interest-provider/region-of-interest-provider.component';
-import { useZoom } from '../../../zoom/zoom-provider.component';
 import { TranslateShape } from '../translate-shape.component';
 import { getBoundingBoxInRoi, getBoundingBoxResizePoints, getClampedBoundingBox } from '../utils';
 
 import classes from './../../../annotator-canvas.module.scss';
 
 interface EditBoundingBoxProps {
-    annotationToolContext: AnnotationToolContext;
     annotation: Annotation & { shape: { shapeType: ShapeType.Rect } };
     disableTranslation?: boolean;
     disablePoints?: boolean;
+    roi: RegionOfInterest;
+    image: ImageData;
+    zoom: number;
+    updateAnnotation: (annotation: Annotation) => void;
 }
 
 export const EditBoundingBox = ({
-    annotationToolContext,
     annotation,
     disablePoints = false,
     disableTranslation = false,
+    roi,
+    image,
+    zoom,
+    updateAnnotation,
 }: EditBoundingBoxProps): JSX.Element => {
     const [shape, setShape] = useState(annotation.shape);
 
     useEffect(() => setShape(annotation.shape), [annotation.shape]);
 
-    const { scene } = annotationToolContext;
-    const {
-        zoomState: { zoom },
-    } = useZoom();
-    const { roi, image } = useROI();
-
     const onComplete = () => {
-        scene.updateAnnotation({ ...annotation, shape });
+        updateAnnotation({ ...annotation, shape });
     };
 
     const translate = (point: Point) => {
@@ -75,7 +73,7 @@ export const EditBoundingBox = ({
                 />
             </svg>
 
-            <Labels annotation={{ ...annotation, shape }} annotationToolContext={annotationToolContext} />
+            <Labels annotation={{ ...annotation, shape }} />
 
             {disablePoints === false ? (
                 <svg
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-circle/edit-circle.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-circle/edit-circle.component.tsx
@@ -132,7 +132,7 @@ export const EditCircle = ({
                 />
             </svg>
 
-            <Labels annotation={{ ...annotation, shape }} annotationToolContext={annotationToolContext} />
+            <Labels annotation={{ ...annotation, shape }} />
 
             {disablePoints === false ? (
                 <svg
diff --git a/web_ui/src/pages/annotator/tools/edit-tool/edit-polygon/edit-polygon.component.tsx b/web_ui/src/pages/annotator/tools/edit-tool/edit-polygon/edit-polygon.component.tsx
@@ -125,9 +125,7 @@ export const EditPolygon = ({
                 />
             </svg>
 
-            {shape.points.length > 0 && !isBrushSubTool && (
-                <Labels annotation={{ ...annotation, shape }} annotationToolContext={annotationToolContext} />
-            )}
+            {shape.points.length > 0 && !isBrushSubTool && <Labels annotation={{ ...annotation, shape }} />}
 
             {disablePoints === false && !isBrushSubTool ? (
                 <svg
diff --git a/web_ui/src/pages/annotator/tools/selecting-tool/components/translated-annotations.component.tsx b/web_ui/src/pages/annotator/tools/selecting-tool/components/translated-annotations.component.tsx
@@ -124,7 +124,7 @@ export const TranslatedAnnotations = ({
                     </svg>
                     {showLabels && (
                         <foreignObject style={{ height: '100%', width: '100%', pointerEvents: 'none' }}>
-                            <Labels annotation={annotation} annotationToolContext={annotationToolContext} />
+                            <Labels annotation={annotation} />
                         </foreignObject>
                     )}
                 </Fragment>
