@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/slam/slam.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { Input, Label } from '@viamrobotics/prime-core'
+	import {
+		motionApi,
+		MotionClient,
+		MotionConfiguration,
+		slamApi,
+		SlamClient,
+	} from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+	import { Vector2, type Vector3 } from 'three'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Queries from '../../queries.svelte'
+	import Query from '../../query.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import {
+		createRefetchIntervalStore,
+		RefetchIntervals,
+	} from '../../refetch-interval-store.svelte'
+	import SlamMap2D from '../../slam/map2d/index.svelte'
+
+	import type { PosePosition } from './pose'
+
+	import MoveOnMap from './move-on-map.svelte'
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'slam',
+		RefetchIntervals.FIVE_SEC
+	)
+
+	const slamClient = createResourceClient(
+		SlamClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(slamClient, 'getProperties', {
+		refetchInterval: false,
+	})
+
+	const positionQuery = createResourceQuery(slamClient, 'getPosition', () => ({
+		enabled: propertiesQuery.data?.cloudSlam === false,
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const pointCloudMapQuery = createResourceQuery(slamClient, 'getPointCloudMap', () => ({
+		enabled: propertiesQuery.data?.cloudSlam === false,
+		refetchInterval:
+			propertiesQuery.data?.mappingMode === slamApi.MappingMode.LOCALIZE_ONLY
+				? false
+				: refetchInterval.current,
+	}))
+
+	// Although this is the SLAM widget, the motion client is heavily
+	// used for calling MoveOnMap and for rendering plans.
+	//
+	// The user must specify the motion service to use, typically
+	// "builtin".
+	let motionName = $state('')
+
+	const motionClient = createResourceClient(
+		MotionClient,
+		() => partID,
+		() => motionName || 'builtin'
+	)
+
+	const moveOnMapMutation = createResourceMutation(motionClient, 'moveOnMap')
+	const stopPlanMutation = createResourceMutation(motionClient, 'stopPlan')
+
+	let baseName = $state('')
+
+	const base = $derived({
+		name: baseName,
+		namespace: 'rdk',
+		type: 'component',
+		subtype: 'base',
+		localName: '',
+		remotePath: [],
+	})
+
+	// The map doesn't show an error or loading state for rendering the motion plan
+	// so wire up the createResourceQuery here and thread down the plan if it exists
+	const planQuery = createResourceQuery(
+		motionClient,
+		'getPlan',
+		() => [base.name, true] as const,
+		() => ({
+			enabled: baseName !== undefined,
+			refetchInterval: refetchInterval.current,
+		})
+	)
+
+	const motionPath = $derived(
+		planQuery.data?.currentPlanWithStatus?.status?.state === motionApi.PlanState.IN_PROGRESS
+			? new Float32Array(
+					(planQuery.data.currentPlanWithStatus.plan?.steps ?? [])
+						.map((step) => step.step[1]?.pose)
+						// Path is returned in millimeters, but the map uses meters
+						.flatMap((pose) => (pose ? [pose.x / 1000, pose.y / 1000] : []))
+				)
+			: undefined
+	)
+
+	// User chosen destination for MoveOnMap.
+	let destination = $state<PosePosition>()
+	const updateDestination = (next: Partial<PosePosition>) => {
+		destination = {
+			x: 0,
+			y: 0,
+			z: 0,
+			...destination,
+			...next,
+		}
+	}
+	const handleClick = (value: Vector3) => {
+		const roundedX = Number.parseFloat(value.x.toFixed(5))
+		const roundedY = Number.parseFloat(value.y.toFixed(5))
+		updateDestination({
+			x: roundedX,
+			y: roundedY,
+		})
+	}
+
+	// MoveOnMap goes to the user chosen position, but it maintains
+	// the current orientation of the base.
+	const currentOrientation = $derived({
+		oX: positionQuery.data?.pose?.oX ?? 0,
+		oY: positionQuery.data?.pose?.oY ?? 0,
+		oZ: positionQuery.data?.pose?.oZ ?? 1,
+		theta: positionQuery.data?.pose?.theta ?? 0,
+	})
+	const moveOnMap = (planDeviationM: number | undefined) => {
+		if (!destination) {
+			return
+		}
+
+		const motionConfiguration: [MotionConfiguration] | [] =
+			planDeviationM === undefined
+				? []
+				: [
+						new MotionConfiguration({
+							planDeviationM,
+						}),
+					]
+		moveOnMapMutation.mutate([
+			{
+				// The motion client expects mm
+				x: destination.x * 1000,
+				y: destination.y * 1000,
+				z: destination.z * 1000,
+				...currentOrientation,
+			},
+			base.name,
+			slamClient.current?.name ?? '',
+			...motionConfiguration,
+		])
+	}
+	const stopPlan = () => {
+		stopPlanMutation.mutate([base.name])
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<Query
+			query={propertiesQuery}
+			contentCx="p-4 h-14"
+		>
+			{#if propertiesQuery.data?.cloudSlam}
+				<div class="p-4 text-sm">
+					This resource is using Cloud SLAM. <a
+						href="https://docs.viam.com/operate/reference/services/slam/cloudslam/"
+						target="_blank"
+						class="text-link">Learn more</a
+					>.
+				</div>
+			{:else}
+				<div class="flex divide-x">
+					<div class="divide-y">
+						<div class="m-4">
+							<RefetchController
+								{refetchInterval}
+								queries={[positionQuery, pointCloudMapQuery]}
+							/>
+						</div>
+
+						<ApiSection title="GetPosition">
+							<Queries
+								queries={[propertiesQuery, positionQuery]}
+								contentCx="h-6"
+							>
+								{#if positionQuery.data !== undefined}
+									<Position position={positionQuery.data} />
+								{/if}
+							</Queries>
+						</ApiSection>
+
+						<ApiSection title="Motion">
+							<Label>
+								Base name
+
+								<Input
+									slot="input"
+									bind:value={baseName}
+								/>
+							</Label>
+							<Label>
+								Motion name
+
+								<Input
+									slot="input"
+									placeholder="builtin"
+									bind:value={motionName}
+								/>
+							</Label>
+						</ApiSection>
+
+						<MoveOnMap
+							{destination}
+							{updateDestination}
+							{moveOnMap}
+							{stopPlan}
+							lastError={moveOnMapMutation.error ?? stopPlanMutation.error}
+						/>
+					</div>
+
+					<Queries
+						queries={[propertiesQuery, positionQuery, pointCloudMapQuery]}
+						contentCx="p-4 h-auto"
+					>
+						{#if positionQuery.data?.pose !== undefined && pointCloudMapQuery.data !== undefined}
+							<SlamMap2D
+								pointcloud={pointCloudMapQuery.data}
+								basePose={{
+									// Position is returned in millimeters, but the map uses meters
+									x: positionQuery.data.pose.x / 1000,
+									y: positionQuery.data.pose.y / 1000,
+									theta: positionQuery.data.pose.theta,
+								}}
+								{motionPath}
+								destination={destination ? new Vector2(destination.x, destination.y) : undefined}
+								helpers={true}
+								onClick={handleClick}
+							/>
+						{/if}
+					</Queries>
+				</div>
+			{/if}
+		</Query>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/slam/slam.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const Slam: import("svelte").Component<Props, {}, "">;
+type Slam = ReturnType<typeof Slam>;
+export default Slam;

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { SwitchClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import Queries from '../../queries.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		SwitchClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		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 onSelect = async (position: number) => {
+		currentPosition = position
+		await setPositionMutation.mutateAsync([position])
+		await positionQuery.refetch()
+	}
+</script>
+
+<Queries
+	queries={[positionQuery, numPositionsQuery]}
+	contentCx="h-7.5"
+>
+	{#if positionQuery.data !== undefined && numPositionsQuery.data !== undefined}
+		<Position
+			numPositions={numPositionsQuery.data[0]}
+			labels={numPositionsQuery.data[1]}
+			{currentPosition}
+			{onSelect}
+			lastError={setPositionMutation.error}
+		/>
+	{/if}
+</Queries>

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

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const PositionView: import("svelte").Component<Props, {}, "">;
+type PositionView = ReturnType<typeof PositionView>;
+export default PositionView;

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ToggleButtons } from '@viamrobotics/prime-core'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	interface Props {
+		numPositions: number
+		labels: string[]
+		currentPosition: number
+		onSelect: (position: number) => void
+		lastError: Error | null
+	}
+
+	const { numPositions, labels, currentPosition, onSelect, lastError }: Props = $props()
+
+	const hasLabels = $derived(labels.length > 0)
+	const options = $derived(
+		Array.from({ length: numPositions }, (_, i) => ({
+			position: i,
+			label: `${labels[i] ?? i}`,
+		}))
+	)
+
+	const currentOption = $derived(options.find((option) => option.position === currentPosition))
+
+	const handleInput = (event: CustomEvent<string>) => {
+		const { detail } = event
+		const position = options.find((option) => option.label === detail)?.position
+		if (position !== undefined) {
+			onSelect(position)
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	<ToggleButtons
+		options={options.map((option) => option.label)}
+		selected={currentOption?.label}
+		cx={[{ '[&>div>button]:w-12!': !hasLabels }, 'font-roboto-mono [&>div]:flex-wrap!']}
+		on:input={handleInput}
+	/>
+	<ErrorDisplay {lastError} />
+</div>

package/dist/components/widgets/switch/position.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    numPositions: number;
+    labels: string[];
+    currentPosition: number;
+    onSelect: (position: number) => void;
+    lastError: Error | null;
+}
+declare const Position: import("svelte").Component<Props, {}, "">;
+type Position = ReturnType<typeof Position>;
+export default Position;

package/dist/components/widgets/switch/switch.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { SwitchClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import ConnectionStatus from '../../connection-status.svelte'
+	import Queries from '../../queries.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		SwitchClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const positionQuery = createResourceQuery(client, 'getPosition', {
+		refetchInterval: 500,
+	})
+
+	const numPositionsQuery = createResourceQuery(client, 'getNumberOfPositions', {
+		refetchInterval: 500,
+	})
+
+	const setPositionMutation = createResourceMutation(client, 'setPosition')
+
+	const onSelect = async (position: number) => {
+		await setPositionMutation.mutateAsync([position])
+		await positionQuery.refetch()
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4">
+			<Queries
+				queries={[positionQuery, numPositionsQuery]}
+				contentCx="h-7.5"
+			>
+				{#if positionQuery.data !== undefined && numPositionsQuery.data !== undefined}
+					<Position
+						numPositions={numPositionsQuery.data[0]}
+						labels={numPositionsQuery.data[1]}
+						currentPosition={positionQuery.data}
+						{onSelect}
+						lastError={setPositionMutation.error}
+					/>
+				{/if}
+			</Queries>
+		</div>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/switch/switch.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const Switch: import("svelte").Component<Props, {}, "">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/widgets/vision-service/__tests__/__fixtures__/classifications.d.ts

@@ -0,0 +1,10 @@
+export declare const classifications: [{
+    readonly className: "dog";
+    readonly confidence: 0.5;
+}, {
+    readonly className: "dragon";
+    readonly confidence: 0.4;
+}, {
+    readonly className: "liopleurodon";
+    readonly confidence: 0.1;
+}];

package/dist/components/widgets/vision-service/__tests__/__fixtures__/classifications.js

@@ -0,0 +1,5 @@
+export const classifications = [
+    { className: 'dog', confidence: 0.5 },
+    { className: 'dragon', confidence: 0.4 },
+    { className: 'liopleurodon', confidence: 0.1 },
+];

package/dist/components/widgets/vision-service/__tests__/__fixtures__/detections.d.ts

@@ -0,0 +1,2 @@
+import { Detection } from '@viamrobotics/sdk';
+export declare const detection: Detection;

package/dist/components/widgets/vision-service/__tests__/__fixtures__/detections.js

@@ -0,0 +1,9 @@
+import { Detection } from '@viamrobotics/sdk';
+export const detection = new Detection({
+    xMin: 5n,
+    yMin: 5n,
+    xMax: 10n,
+    yMax: 10n,
+    confidence: 0.5,
+    className: 'Wagyu',
+});

package/dist/components/widgets/vision-service/color.d.ts

@@ -0,0 +1,7 @@
+export declare const colors: readonly ["#EF8733", "#52B4E6", "#E9335A", "#75FBD0", "#FFFF54", "#EA33F7", "#3778F5", "#F3AFAD", "#0000F5", "#965635", "#808026", "#463D86", "#7F1786", "#EB5528", "#CA3142", "#75FBFD", "#D4C0D6", "#EA3891", "#FBE5BB", "#CD7693", "#D8B98D", "#6F94E6", "#D2FB50", "#7B2AF5"];
+/**
+ * A subset of the above background colors have lightness values high
+ * enough to require dark text for accessible contrast.
+ */
+export declare const lightTextColors: string[];
+export declare const labelToColor: (label: string) => string;

package/dist/components/widgets/vision-service/color.js

@@ -0,0 +1,53 @@
+export const colors = [
+    '#EF8733',
+    '#52B4E6',
+    '#E9335A',
+    '#75FBD0',
+    '#FFFF54',
+    '#EA33F7',
+    '#3778F5',
+    '#F3AFAD',
+    '#0000F5',
+    '#965635',
+    '#808026',
+    '#463D86',
+    '#7F1786',
+    '#EB5528',
+    '#CA3142',
+    '#75FBFD',
+    '#D4C0D6',
+    '#EA3891',
+    '#FBE5BB',
+    '#CD7693',
+    '#D8B98D',
+    '#6F94E6',
+    '#D2FB50',
+    '#7B2AF5',
+];
+/**
+ * A subset of the above background colors have lightness values high
+ * enough to require dark text for accessible contrast.
+ */
+export const lightTextColors = ['#0000F5', '#965635', '#463D86', '#7F1786', '#CA3142', '#7B2AF5'];
+const cache = {};
+const uniqueIndexFromString = (str) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i += 1) {
+        const char = str.codePointAt(i);
+        if (char) {
+            hash = (hash << 5) - hash + char;
+        }
+        hash = Math.trunc(hash);
+    }
+    return Math.abs(hash) % colors.length;
+};
+export const labelToColor = (label) => {
+    const result = cache[label];
+    if (result) {
+        return result;
+    }
+    const index = uniqueIndexFromString(label);
+    const color = colors[index];
+    cache[label] = color;
+    return color;
+};

package/dist/components/widgets/vision-service/context.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Detection as DetectionPb } from '@viamrobotics/sdk';
+import { SvelteSet } from 'svelte/reactivity';
+export interface Detection extends DetectionPb {
+    id: string;
+    color: string;
+}
+/**
+ * Adds ids to detections.
+ */
+export declare const addIdsToDetections: (detections: DetectionPb[]) => Detection[];
+interface DetectionGroup {
+    color: string;
+    detections: Detection[];
+}
+export interface DetectionsContext {
+    readonly current: Detection[];
+    readonly byLabel: Record<string, DetectionGroup>;
+    readonly hovered: SvelteSet<string>;
+}
+export declare const DETECTIONS_CONTEXT_KEY: unique symbol;
+export declare const createDetectionContext: (getDetections: () => DetectionPb[]) => DetectionsContext;
+export declare const provideDetectionsContext: (next: () => DetectionPb[]) => DetectionsContext;
+export declare const useDetections: () => DetectionsContext;
+export {};

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

@@ -0,0 +1,50 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+import { MathUtils } from 'three';
+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;
+};
+export const DETECTIONS_CONTEXT_KEY = Symbol('detections-context');
+const categorize = (list) => {
+    const labels = {};
+    for (const detection of list) {
+        labels[detection.className] ??= {
+            color: labelToColor(detection.className),
+            detections: [],
+        };
+        labels[detection.className]?.detections.push(detection);
+    }
+    return labels;
+};
+export const createDetectionContext = (getDetections) => {
+    const detections = $derived(addIdsToDetections(getDetections()));
+    const detectionsByLabel = $derived(categorize(detections));
+    const hovered = new SvelteSet();
+    const context = {
+        get current() {
+            return detections;
+        },
+        get byLabel() {
+            return detectionsByLabel;
+        },
+        hovered,
+    };
+    return context;
+};
+export const provideDetectionsContext = (next) => {
+    const context = createDetectionContext(next);
+    setContext(DETECTIONS_CONTEXT_KEY, context);
+    return context;
+};
+export const useDetections = () => {
+    return getContext(DETECTIONS_CONTEXT_KEY);
+};