@viamrobotics/test-widgets 0.1.1 → 0.1.2

package/dist/components/index.d.ts

@@ -53,5 +53,3 @@ export { default as VisionServiceWidget } from './widgets/vision-service/vision-
 export { default as RefetchController } from './refetch-controller.svelte';
 export { NavigationMap, NavigationTab, type NavigationTabType, type Shapes, type CapsuleGeometry, type SphereGeometry, type BoxGeometry, type Geometry, type Obstacle, type Path, } from './navigation-map';
 export { MapLibre, MapLibreMarker, CenterControls, FollowControls, NavigationControls, SatelliteControls, DirectionalMarker, LngLatInput, MapProviders, type MapProvider, GeoPose, Waypoint, useMapLibre, useMapLibreEvent, useMapLibreThreeRaycast, useMapLibreThreeRenderer, lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './maplibre';
-export { default as BoundingBoxLabeler } from './image-annotations/bounding-box-labeler.svelte';
-export { ZOOM_MIN, ZOOM_MAX, INVERT_Y_FLOAT_DISTANCE, INVERT_X_FLOAT_DISTANCE, } from './image-annotations/labeler-constants';

package/dist/components/index.js

@@ -52,5 +52,3 @@ export { default as VisionServiceWidget } from './widgets/vision-service/vision-
 export { default as RefetchController } from './refetch-controller.svelte';
 export { NavigationMap, NavigationTab, } from './navigation-map';
 export { MapLibre, MapLibreMarker, CenterControls, FollowControls, NavigationControls, SatelliteControls, DirectionalMarker, LngLatInput, MapProviders, GeoPose, Waypoint, useMapLibre, useMapLibreEvent, useMapLibreThreeRaycast, useMapLibreThreeRenderer, lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './maplibre';
-export { default as BoundingBoxLabeler } from './image-annotations/bounding-box-labeler.svelte';
-export { ZOOM_MIN, ZOOM_MAX, INVERT_Y_FLOAT_DISTANCE, INVERT_X_FLOAT_DISTANCE, } from './image-annotations/labeler-constants';

package/dist/components/widgets/do-command/do-command.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from '@viamrobotics/prime-core'
+	import { Button, Progress } from '@viamrobotics/prime-core'
 	import { JsonEditor } from '@viamrobotics/prime-editor'
 	import { MLModelClient, ResourceName, Struct } from '@viamrobotics/sdk'
 	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
@@ -31,7 +31,7 @@
 
 	const doCommandMutation = $derived(createResourceMutation(client, 'doCommand'))
 
-	let lastErr = $state<Error>()
+	let lastErr = $state<Error | null>()
 
 	const uid = $props.id()
 
@@ -41,10 +41,12 @@
 
 	const execute = async () => {
 		try {
+			lastErr = null
+			output = ''
 			const parsedInput = Struct.fromJsonString(input.current ?? '{}')
 			const data = await doCommandMutation.mutateAsync([parsedInput])
 			output = JSON.stringify(data, null, 2)
-			lastErr = undefined
+			lastErr = null
 		} catch (error) {
 			lastErr = error as Error
 		}
@@ -72,7 +74,15 @@
 		>
 
 		<div class="flex w-[45%] flex-col gap-2 border-l py-2">
-			<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
+			<div class="flex flex-row items-center">
+				<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
+				{#if doCommandMutation.isPending}
+					<Progress
+						size="medium"
+						variant="dark"
+					/>
+				{/if}
+			</div>
 			{#if !lastErr}
 				<JsonEditor
 					label="output"

package/dist/components/widgets/switch/position-view.svelte

@@ -27,17 +27,17 @@
 		refetchInterval: 500,
 	})
 
-	// TODO: switch to using optimistic update mutation client from svelte SDK when available APP-15498
-	let currentPosition = $derived(positionQuery.data ?? 0)
-
 	const numPositionsQuery = createResourceQuery(client, 'getNumberOfPositions', {
 		refetchInterval: 500,
 	})
 
-	const setPositionMutation = createResourceMutation(client, 'setPosition')
+	const setPositionMutation = createResourceMutation(
+		client,
+		'setPosition',
+		() => positionQuery.queryKey
+	)
 
 	const onSelect = async (position: number) => {
-		currentPosition = position
 		await setPositionMutation.mutateAsync([position])
 		await positionQuery.refetch()
 	}
@@ -51,7 +51,7 @@
 		<Position
 			numPositions={numPositionsQuery.data[0]}
 			labels={numPositionsQuery.data[1]}
-			{currentPosition}
+			currentPosition={positionQuery.data}
 			{onSelect}
 			lastError={setPositionMutation.error}
 		/>

package/dist/components/widgets/vision-service/context.svelte.js

@@ -6,12 +6,12 @@ import { labelToColor } from "./color.js";
  * Adds ids to detections.
  */
 export const addIdsToDetections = (detections) => {
-    for (const detection of detections) {
-        detection.id = MathUtils.generateUUID();
-        detection.confidence = Math.round(detection.confidence * 100);
-        detection.color = labelToColor(detection.className);
-    }
-    return detections;
+    return detections.map((detection) => ({
+        ...detection,
+        id: MathUtils.generateUUID(),
+        confidence: Math.round(detection.confidence * 100),
+        color: labelToColor(detection.className),
+    }));
 };
 export const DETECTIONS_CONTEXT_KEY = Symbol('detections-context');
 const categorize = (list) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

package/dist/components/image-annotations/annotation-edit-utils.d.ts

@@ -1,21 +0,0 @@
-import type { Size } from './get-image-size';
-import { type BoundingBox, type BoundingCoords, type Coordinates, ResizeHandleLocation } from './bounding-box-types';
-export declare const getBoundingRect: (original: BoundingBox, dragDistance: Coordinates | undefined, containerWidth: number, containerHeight: number, corner?: ResizeHandleLocation) => BoundingCoords;
-export declare const shouldDisplayBoxFill: (annotationID: string, inEditMode: boolean, focusedID: string | undefined, editTargetID: string | undefined, hoveredAnnotations: Record<string, boolean>) => boolean;
-export declare const createNormalizedTempBox: (label: string, size: Size, firstPoint: Coordinates, finalPoint: Coordinates) => {
-    xMinNormalized: number;
-    xMaxNormalized: number;
-    yMinNormalized: number;
-    yMaxNormalized: number;
-    label: string;
-    id: string;
-} | undefined;
-export declare const getModifyKeyForOS: () => "metaKey" | "ctrlKey";
-export declare const calculatePastedBox: (mousePosition: Coordinates, copyTarget: BoundingBox, containerWidth: number, containerHeight: number) => {
-    id: string;
-    label: string;
-    xMinNormalized: number;
-    xMaxNormalized: number;
-    yMinNormalized: number;
-    yMaxNormalized: number;
-};

package/dist/components/image-annotations/annotation-edit-utils.js

@@ -1,183 +0,0 @@
-import { BoxModifier, ResizeHandleLocation, } from './bounding-box-types';
-export const getBoundingRect = (original, dragDistance, containerWidth, containerHeight, corner) => {
-    let transformation = BoxModifier.Scaled;
-    if (dragDistance) {
-        transformation = corner ? BoxModifier.Resized : BoxModifier.Translated;
-    }
-    // scale annotation size to container
-    const scaledCopy = { ...original };
-    scaledCopy.xMinNormalized *= containerWidth;
-    scaledCopy.xMaxNormalized *= containerWidth;
-    scaledCopy.yMinNormalized *= containerHeight;
-    scaledCopy.yMaxNormalized *= containerHeight;
-    if (transformation === BoxModifier.Scaled || !dragDistance) {
-        return scaledCopy;
-    }
-    // apply transformation
-    const unboundedRect = transformation === BoxModifier.Resized && corner
-        ? getResizedRect(scaledCopy, dragDistance, corner)
-        : getTranslatedRect(scaledCopy, dragDistance, containerWidth, containerHeight);
-    // ensure transformation does not exceed boundaries of container
-    return {
-        xMinNormalized: Math.max(unboundedRect.xMinNormalized, 0),
-        xMaxNormalized: Math.min(unboundedRect.xMaxNormalized, containerWidth),
-        yMinNormalized: Math.max(unboundedRect.yMinNormalized, 0),
-        yMaxNormalized: Math.min(unboundedRect.yMaxNormalized, containerHeight),
-    };
-};
-const getTranslatedRect = (original, dragDistance, containerWidth, containerHeight) => {
-    const modifiedRect = {
-        xMinNormalized: original.xMinNormalized + dragDistance.x,
-        xMaxNormalized: original.xMaxNormalized + dragDistance.x,
-        yMinNormalized: original.yMinNormalized + dragDistance.y,
-        yMaxNormalized: original.yMaxNormalized + dragDistance.y,
-    };
-    // maintains box size if user attempts to drag a box beyond the bounds of the image
-    if (modifiedRect.xMinNormalized <= 0) {
-        modifiedRect.xMaxNormalized -= modifiedRect.xMinNormalized;
-        modifiedRect.xMinNormalized = 0;
-    }
-    if (modifiedRect.yMinNormalized <= 0) {
-        modifiedRect.yMaxNormalized -= modifiedRect.yMinNormalized;
-        modifiedRect.yMinNormalized = 0;
-    }
-    if (modifiedRect.xMaxNormalized >= containerWidth) {
-        modifiedRect.xMinNormalized =
-            containerWidth - (modifiedRect.xMaxNormalized - modifiedRect.xMinNormalized);
-        modifiedRect.xMaxNormalized = containerWidth;
-    }
-    if (modifiedRect.yMaxNormalized >= containerHeight) {
-        modifiedRect.yMinNormalized =
-            containerHeight - (modifiedRect.yMaxNormalized - modifiedRect.yMinNormalized);
-        modifiedRect.yMaxNormalized = containerHeight;
-    }
-    return modifiedRect;
-};
-const getResizedRect = (original, dragDistance, corner) => {
-    let variableX = undefined;
-    let variableY = undefined;
-    switch (corner) {
-        case ResizeHandleLocation.T: {
-            variableY = 'yMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.R: {
-            variableX = 'xMaxNormalized';
-            break;
-        }
-        case ResizeHandleLocation.B: {
-            variableY = 'yMaxNormalized';
-            break;
-        }
-        case ResizeHandleLocation.L: {
-            variableX = 'xMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.TL: {
-            variableX = 'xMinNormalized';
-            variableY = 'yMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.TR: {
-            variableX = 'xMaxNormalized';
-            variableY = 'yMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.BL: {
-            variableX = 'xMinNormalized';
-            variableY = 'yMaxNormalized';
-            break;
-        }
-        case ResizeHandleLocation.BR: {
-            variableX = 'xMaxNormalized';
-            variableY = 'yMaxNormalized';
-            break;
-        }
-    }
-    const modifiedRect = {
-        ...original,
-    };
-    if (variableX) {
-        modifiedRect[variableX] = original[variableX] + dragDistance.x;
-    }
-    if (variableY) {
-        modifiedRect[variableY] = original[variableY] + dragDistance.y;
-    }
-    if (modifiedRect.xMinNormalized > modifiedRect.xMaxNormalized) {
-        const temp = modifiedRect.xMaxNormalized;
-        modifiedRect.xMaxNormalized = modifiedRect.xMinNormalized;
-        modifiedRect.xMinNormalized = temp;
-    }
-    if (modifiedRect.yMinNormalized > modifiedRect.yMaxNormalized) {
-        const temp = modifiedRect.yMaxNormalized;
-        modifiedRect.yMaxNormalized = modifiedRect.yMinNormalized;
-        modifiedRect.yMinNormalized = temp;
-    }
-    return modifiedRect;
-};
-export const shouldDisplayBoxFill = (annotationID, inEditMode, focusedID, editTargetID, hoveredAnnotations) => {
-    return (editTargetID === annotationID ||
-        ((focusedID ? focusedID === annotationID : Boolean(hoveredAnnotations[annotationID])) &&
-            !inEditMode));
-};
-export const createNormalizedTempBox = (label, size, firstPoint, finalPoint) => {
-    // coordinates start in center, must translate all coordinates by one quadrant (i.e. half the height and width of container)
-    const xMinNormalized = Math.min(firstPoint.x, finalPoint.x) / size.width;
-    const xMaxNormalized = Math.max(firstPoint.x, finalPoint.x) / size.width;
-    const yMinNormalized = Math.min(firstPoint.y, finalPoint.y) / size.height;
-    const yMaxNormalized = Math.max(firstPoint.y, finalPoint.y) / size.height;
-    return xMaxNormalized - xMinNormalized > 0.01 && yMaxNormalized - yMinNormalized > 0.01
-        ? {
-            // if normalized values exceed bounds of image, lock to edge by setting to min/max value (0 and 1 respectively)
-            xMinNormalized: Math.max(0, xMinNormalized),
-            xMaxNormalized: Math.min(1, xMaxNormalized),
-            yMinNormalized: Math.max(0, yMinNormalized),
-            yMaxNormalized: Math.min(1, yMaxNormalized),
-            label,
-            id: '__NEW_TEMP_BBOX_ID__',
-        }
-        : undefined;
-};
-export const getModifyKeyForOS = () => {
-    const isMac = navigator.userAgent.includes('Mac');
-    return isMac ? 'metaKey' : 'ctrlKey';
-};
-export const calculatePastedBox = (mousePosition, copyTarget, containerWidth, containerHeight) => {
-    const boxWidth = copyTarget.xMaxNormalized - copyTarget.xMinNormalized;
-    const boxHeight = copyTarget.yMaxNormalized - copyTarget.yMinNormalized;
-    // creates box centered on current mouse position
-    const tempBox = {
-        xMin: mousePosition.x / containerWidth - boxWidth / 2,
-        xMax: mousePosition.x / containerWidth + boxWidth / 2,
-        yMin: mousePosition.y / containerHeight - boxHeight / 2,
-        yMax: mousePosition.y / containerHeight + boxHeight / 2,
-    };
-    /**
-     * if side exceeds boundary of image, set exceeding side equal to boundary
-     * then translate parallel side by the same distance
-     */
-    if (tempBox.xMin < 0) {
-        tempBox.xMax -= tempBox.xMin;
-        tempBox.xMin = 0;
-    }
-    if (tempBox.yMin < 0) {
-        tempBox.yMax -= tempBox.yMin;
-        tempBox.yMin = 0;
-    }
-    if (tempBox.xMax > 1) {
-        tempBox.xMin -= tempBox.xMax - 1;
-        tempBox.xMax = 1;
-    }
-    if (tempBox.yMax > 1) {
-        tempBox.yMin -= tempBox.yMax - 1;
-        tempBox.yMax = 1;
-    }
-    return {
-        id: '',
-        label: copyTarget.label,
-        xMinNormalized: tempBox.xMin,
-        xMaxNormalized: tempBox.xMax,
-        yMinNormalized: tempBox.yMin,
-        yMaxNormalized: tempBox.yMax,
-    };
-};