Move segment-anything tool

ui/src/features/annotator/tools/segment-anything-tool/interactive-segmentation-point.component.tsx

@@ -11,7 +11,7 @@ interface InteractiveSegmentationPointProps extends InteractiveAnnotationPoint {
 export const InteractiveSegmentationPoint = ({ x, y, positive, isLoading }: InteractiveSegmentationPointProps) => {
     const { scale } = useZoom();
     const fill = positive ? 'var(--brand-moss)' : 'var(--brand-coral-cobalt)';
-    const animationScale = `calc(1 / var(--zoom-scale))`;
+    const animationScale = 1 / scale;
     const pointRadius = 5 / scale;
 
     return (

ui/src/features/annotator/tools/segment-anything-tool/segment-anything-state-provider.component.tsx

@@ -44,7 +44,7 @@ export const SegmentAnythingStateProvider = ({ children }: { children: ReactNode
     const { addAnnotation } = useAnnotator();
 
     const queryClient = useQueryClient();
-    const { encodingQuery, decodingQueryFn, isLoading } = useSegmentAnythingModel();
+    const { encodingQuery, decodingQueryFn, isLoading, isProcessing: isEncodingProcessing } = useSegmentAnythingModel();
     const throttledDecodingQueryFn = useSingleStackFn(decodingQueryFn);
     const decodingQueryOptions = useDecodingQueryOptions(state.points, throttledDecodingQueryFn);
     const decodingQuery = useDecodingQuery(state.points, throttledDecodingQueryFn);
@@ -74,7 +74,7 @@ export const SegmentAnythingStateProvider = ({ children }: { children: ReactNode
         return () => setIsDrawing(false);
     }, [setIsDrawing]);
 
-    const isProcessing = decodingQuery.isFetching;
+    const isProcessing = isEncodingProcessing || decodingQuery.isFetching;
 
     const hasResults = decodingQuery.data && !isEmpty(decodingQuery.data) && !isEmpty(state.points);
     const outputShapes = decodingQuery.data ?? [];

ui/src/features/annotator/tools/segment-anything-tool/segment-anything-tool.component.tsx

@@ -58,11 +58,11 @@ export const SegmentAnythingTool = () => {
 
     const ref = useRef<SVGRectElement>(null);
 
-    const { result, points, addPoint } = useSegmentAnything();
+    const { result, points, addPoint, isProcessing, isLoading } = useSegmentAnything();
     const [mousePosition, setMousePosition] = useState<InteractiveAnnotationPoint>();
 
     const [previewShapes, setPreviewShapes] = useState<Shape[]>([]);
-    const { decodingQueryFn, isLoading } = useSegmentAnything();
+    const { decodingQueryFn } = useSegmentAnything();
     const throttledDecodingQueryFn = useSingleStackFn(decodingQueryFn);
 
     const throttleSetMousePosition = useThrottledCallback((point: InteractiveAnnotationPoint) => {
@@ -219,7 +219,7 @@ export const SegmentAnythingTool = () => {
                     x={point.x}
                     y={point.y}
                     positive={point.positive}
-                    isLoading={false}
+                    isLoading={isProcessing}
                 />
             ))}
         </SvgToolCanvas>

ui/src/features/annotator/tools/segment-anything-tool/use-segment-anything.hook.ts

@@ -109,11 +109,19 @@ const useDecodingFn = (model: Remote<SegmentAnythingModel> | undefined, encoding
 export const useSegmentAnythingModel = () => {
     const encoderModel = useSegmentAnythingWorker('SEGMENT_ANYTHING_ENCODER');
     const decoderModel = useSegmentAnythingWorker('SEGMENT_ANYTHING_DECODER');
-    const isLoading = encoderModel === undefined || decoderModel === undefined;
+    const isLoadingWorkers = encoderModel === undefined || decoderModel === undefined;
 
     const { mediaItem, image } = useAnnotator();
     const encodingQuery = useEncodingQuery(encoderModel, mediaItem, image);
     const decodingQueryFn = useDecodingFn(decoderModel, encodingQuery.data);
 
-    return { isLoading, encodingQuery, decodingQueryFn };
+    const isLoading = isLoadingWorkers || encodingQuery.isLoading;
+    const isProcessing = encodingQuery.isFetching;
+
+    return {
+        isLoading,
+        isProcessing,
+        encodingQuery,
+        decodingQueryFn,
+    };
 };