@viamrobotics/test-widgets 0.6.1 → 0.8.0

package/dist/components/widgets/power-sensor/get-power-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import PowerReading from './power-reading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getPower', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetPower"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<PowerReading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/power-sensor/get-power-widget.svelte.d.ts

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

package/dist/components/widgets/power-sensor/get-voltage-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import VoltageReading from './voltage-reading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getVoltage', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetVoltage"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<VoltageReading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/power-sensor/get-voltage-widget.svelte.d.ts

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

package/dist/components/widgets/power-sensor/power-sensor.svelte

@@ -66,6 +66,7 @@
 		<div class="grid w-full grid-cols-3 divide-x">
 			<ApiSection
 				title="GetCurrent"
+				api="rdk:component:power_sensor"
 				class="pb-5"
 			>
 				<Query
@@ -79,6 +80,7 @@
 			</ApiSection>
 			<ApiSection
 				title="GetVoltage"
+				api="rdk:component:power_sensor"
 				class="pb-5"
 			>
 				<Query
@@ -92,6 +94,7 @@
 			</ApiSection>
 			<ApiSection
 				title="GetPower"
+				api="rdk:component:power_sensor"
 				class="pb-5"
 			>
 				<Query
@@ -107,6 +110,7 @@
 
 		<ApiSection
 			title="GetReadings"
+			api="rdk:component:power_sensor"
 			description="Get all the measurements and data that this power sensor provides"
 		>
 			<Switch

package/dist/components/widgets/sensor/sensor.svelte

@@ -44,6 +44,7 @@
 
 		<ApiSection
 			title="GetReadings"
+			api="rdk:component:sensor"
 			class="relative"
 		>
 			<Query

package/dist/components/widgets/servo/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ServoClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={ServoClient}
+	api={ResourceTriplets.Servo}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/servo/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/servo/servo.svelte

@@ -52,6 +52,7 @@
 			<div class="grid grow grid-cols-3 divide-x">
 				<ApiSection
 					title="GetPosition"
+					api="rdk:component:servo"
 					bottomText="Updates automatically"
 				>
 					<Query query={positionQuery}>
@@ -65,7 +66,10 @@
 						{/if}
 					</Query>
 				</ApiSection>
-				<ApiSection title="Move">
+				<ApiSection
+					title="Move"
+					api="rdk:component:servo"
+				>
 					<Query query={positionQuery}>
 						{#if positionQuery.data !== undefined}
 							<Move
@@ -92,7 +96,10 @@
 				</ApiSection>
 			</div>
 			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:servo"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -102,6 +109,7 @@
 				</ApiSection>
 				<IsMoving
 					client={ServoClient}
+					api="rdk:component:servo"
 					{partID}
 					{resourceName}
 				/>

package/dist/components/widgets/slam/get-position-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { SlamClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		SlamClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getPosition', { refetchInterval: 1000 })
+</script>
+
+<ApiSection
+	title="GetPosition"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Position position={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/slam/get-position-widget.svelte.d.ts

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

package/dist/components/widgets/slam/move-on-map.svelte

@@ -22,7 +22,10 @@
 	let planDeviationM = $state<number>()
 </script>
 
-<ApiSection title="MoveOnMap">
+<ApiSection
+	title="MoveOnMap"
+	api="rdk:service:motion"
+>
 	<Label>
 		Plan deviation <abbr>(m)</abbr>
 

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

@@ -200,7 +200,10 @@
 							/>
 						</div>
 
-						<ApiSection title="GetPosition">
+						<ApiSection
+							title="GetPosition"
+							api="rdk:service:slam"
+						>
 							<Queries
 								queries={[propertiesQuery, positionQuery]}
 								contentCx="h-6"

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

@@ -16,6 +16,7 @@ export interface DetectionsContext {
     readonly current: Detection[];
     readonly byLabel: Record<string, DetectionGroup>;
     readonly hovered: SvelteSet<string>;
+    selected: string | null;
 }
 export declare const DETECTIONS_CONTEXT_KEY: unique symbol;
 export declare const createDetectionContext: (getDetections: () => DetectionPb[]) => DetectionsContext;

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

@@ -29,6 +29,7 @@ export const createDetectionContext = (getDetections) => {
     const detections = $derived(addIdsToDetections(getDetections()));
     const detectionsByLabel = $derived(categorize(detections));
     const hovered = new SvelteSet();
+    let selected = $state(null);
     const context = {
         get current() {
             return detections;
@@ -37,6 +38,12 @@ export const createDetectionContext = (getDetections) => {
             return detectionsByLabel;
         },
         hovered,
+        get selected() {
+            return selected;
+        },
+        set selected(value) {
+            selected = value;
+        },
     };
     return context;
 };

package/dist/components/widgets/vision-service/detection-row.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Detection } from './context.svelte.js'
+
+	import { useDetections } from './context.svelte.js'
+
+	interface Props {
+		detection: Detection
+		label: string
+	}
+
+	let { detection, label }: Props = $props()
+
+	const context = useDetections()
+
+	let node: HTMLElement | undefined
+
+	$effect(() => {
+		if (context.selected === detection.id && node) {
+			node.scrollIntoView({ block: 'nearest' })
+		}
+	})
+</script>
+
+<button
+	bind:this={node}
+	class={[
+		'hover:bg-light w-full py-1 pl-11 text-left',
+		(context.hovered.has(detection.id) || context.selected === detection.id) && 'bg-light',
+	]}
+	onpointerenter={() => context.hovered.add(detection.id)}
+	onpointerleave={() => context.hovered.delete(detection.id)}
+	onclick={() => {
+		context.selected = context.selected === detection.id ? null : detection.id
+	}}
+>
+	{label}
+	<span class="text-subtle-2 pl-1">{detection.confidence}%</span>
+</button>

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

@@ -0,0 +1,8 @@
+import type { Detection } from './context.svelte.ts';
+interface Props {
+    detection: Detection;
+    label: string;
+}
+declare const DetectionRow: import("svelte").Component<Props, {}, "">;
+type DetectionRow = ReturnType<typeof DetectionRow>;
+export default DetectionRow;

package/dist/components/widgets/vision-service/detection.svelte

@@ -23,6 +23,9 @@
 
 	let hovering = $state(false)
 
+	const isSelected = $derived(context.selected === detection.id)
+	const isActive = $derived(isSelected || context.hovered.has(detection.id))
+
 	// These are ballparking, but seem good enough for nearly all cases
 	const isDetectionNearTop = $derived(factoredyMin < 30)
 	const isDetectionNearRight = $derived(factoredxMin > $size.width * 0.66)
@@ -32,10 +35,7 @@
 	positionType="absolute"
 	positionLeft={factoredxMin}
 	positionTop={factoredyMin}
-	borderColor="#aaa"
-	hover={{
-		borderColor: detection.color,
-	}}
+	borderColor={isActive ? detection.color : '#aaa'}
 	borderWidth={2}
 	width={factoredxMax - factoredxMin}
 	height={factoredyMax - factoredyMin}
@@ -47,6 +47,9 @@
 		context.hovered.delete(detection.id)
 		hovering = false
 	}}
+	onclick={() => {
+		context.selected = context.selected === detection.id ? null : detection.id
+	}}
 >
 	{#if hovering}
 		<Text

package/dist/components/widgets/vision-service/legend.svelte

@@ -5,6 +5,7 @@
 	import { SvelteSet } from 'svelte/reactivity'
 
 	import { useDetections } from './context.svelte'
+	import DetectionRow from './detection-row.svelte'
 
 	interface Props {
 		classifications?: Classification[]
@@ -46,6 +47,16 @@
 		}
 	})
 
+	$effect.pre(() => {
+		if (context.selected === undefined) return
+		for (const [label, { detections }] of Object.entries(context.byLabel)) {
+			if (detections.some((d) => d.id === context.selected)) {
+				expandedLabels.add(label)
+				break
+			}
+		}
+	})
+
 	const compareConfidence = (a: Classification, b: Classification) => {
 		return b.confidence - a.confidence
 	}
@@ -113,18 +124,10 @@
 					<ul>
 						{#each detections as detection (detection.id)}
 							<li>
-								<button
-									class="hover:bg-light w-full py-1 pl-11 text-left {context.hovered.has(
-										detection.id
-									)
-										? 'bg-light'
-										: ''}"
-									onpointerenter={() => context.hovered.add(detection.id)}
-									onpointerleave={() => context.hovered.delete(detection.id)}
-								>
+								<DetectionRow
+									{detection}
 									{label}
-									<span class="text-subtle-2 pl-1">{detection.confidence}%</span>
-								</button>
+								/>
 							</li>
 						{/each}
 					</ul>

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

@@ -147,16 +147,15 @@
 						</Select>
 					</Label>
 				</div>
-				<Label
-					cx="w-fit"
-					position="top"
-				>
-					Is remote?
-					<Switch
-						slot="input"
-						bind:on={isRemote}
-					/>
-				</Label>
+				<div class="w-fit">
+					<Label position="top">
+						Is remote?
+						<Switch
+							slot="input"
+							bind:on={isRemote}
+						/>
+					</Label>
+				</div>
 			</div>
 
 			<h6 class="text-subtle-1 font-semibold">Detections/Classifications</h6>

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 export { createAddImageToDatasetContext, type ImageData, useAddImageToDataset, } from './add-image-to-dataset';
+export { apiDocsHref } from './api-docs-href';
 export { clientForResource } from './client-map';
 export * from './components';
 export { getResourceAPI } from './get-resource-api';
 export { providePip, usePip } from './pip/context.svelte';
-export { hasWidget, showResourceWidget, widgetForResource } from './resource';
+export { ResourceTriplets } from './resource-triplet';
+export { apiWidgetsForResource, availableAPIWidgets, isKnownResource, 
+/** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
+isKnownResource as hasWidget, type ResourceAPIWidget, showResourceWidget, widgetForResource, } from './resource-widget';

package/dist/index.js

@@ -1,6 +1,11 @@
 export { createAddImageToDatasetContext, useAddImageToDataset, } from './add-image-to-dataset';
+export { apiDocsHref } from './api-docs-href';
 export { clientForResource } from './client-map';
 export * from './components';
 export { getResourceAPI } from './get-resource-api';
 export { providePip, usePip } from './pip/context.svelte';
-export { hasWidget, showResourceWidget, widgetForResource } from './resource';
+export { ResourceTriplets } from './resource-triplet';
+export { apiWidgetsForResource, availableAPIWidgets, isKnownResource, 
+// TODO: Delete `hasWidget`
+/** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
+isKnownResource as hasWidget, showResourceWidget, widgetForResource, } from './resource-widget';

package/dist/pip/context.svelte.d.ts

@@ -2,6 +2,8 @@ interface PipContext {
     /** Called by PictureInPictureButton to start or stop PiP. */
     toggle(resourceName: string): Promise<void>;
     setRate(rate: 'live' | number | false): void;
+    /** Register the media stream from the main camera view when its card is open. */
+    setStream(resourceName: string, stream: MediaStream | null): void;
     error: Error | undefined;
     /** Whether the PictureInPicture is active */
     readyState: 'inactive' | 'loading' | 'active';

package/dist/pip/context.svelte.js

@@ -14,12 +14,21 @@ export function providePip(partID) {
     const canvasCtx = canvas.getContext('2d');
     const canvasStream = canvas.captureStream();
     const img = document.createElement('img');
+    const externalStreams = new Map();
+    let externalStreamVersion = $state(0);
     let error = $state();
     let readyState = $state('inactive');
     let rate = $state('live');
     let activeName = $state();
-    const cameraClient = $derived(activeName ? createResourceClient(CameraClient, partID, () => activeName ?? '') : undefined);
-    const streamClient = $derived(activeName ? createStreamClient(partID, () => activeName ?? '') : undefined);
+    const externalStream = $derived.by(() => {
+        void externalStreamVersion;
+        return activeName ? externalStreams.get(activeName) : undefined;
+    });
+    const needsOwnedStream = $derived(activeName !== undefined && !externalStream);
+    const cameraClient = $derived(needsOwnedStream && activeName
+        ? createResourceClient(CameraClient, partID, () => activeName ?? '')
+        : undefined);
+    const streamClient = $derived(needsOwnedStream && activeName ? createStreamClient(partID, () => activeName ?? '') : undefined);
     const imageQuery = $derived(cameraClient?.current
         ? createResourceQuery(cameraClient, 'getImages', () => ({
             enabled: rate !== 'live',
@@ -27,22 +36,39 @@ export function providePip(partID) {
             refetchIntervalInBackground: activeName === cameraClient?.current?.name,
         }))
         : undefined);
-    const mediaStream = $derived((rate === 'live' ? streamClient?.mediaStream : canvasStream) ?? null);
+    const ownedMediaStream = $derived(needsOwnedStream ? ((rate === 'live' ? streamClient?.mediaStream : canvasStream) ?? null) : null);
+    const playbackStream = $derived(externalStream ?? ownedMediaStream);
+    const setStream = (resourceName, stream) => {
+        if (stream) {
+            externalStreams.set(resourceName, stream);
+        }
+        else {
+            externalStreams.delete(resourceName);
+        }
+        externalStreamVersion++;
+    };
     $effect(() => {
         document.body.append(video);
+        const handleLeave = () => {
+            readyState = 'inactive';
+            activeName = undefined;
+            error = undefined;
+        };
+        video.addEventListener('leavepictureinpicture', handleLeave);
         return () => {
+            video.removeEventListener('leavepictureinpicture', handleLeave);
             video.remove();
         };
     });
     $effect(() => {
-        video.srcObject = mediaStream;
+        video.srcObject = playbackStream;
         return () => {
             video.srcObject = null;
         };
     });
     $effect(() => {
         const currentRate = rate;
-        if (currentRate === 'live')
+        if (!needsOwnedStream || currentRate === 'live')
             return;
         const image = imageQuery?.data?.images[0];
         if (!image)
@@ -64,12 +90,11 @@ export function providePip(partID) {
             img.removeEventListener('load', drawImage);
         };
     });
-    const toggle = async () => {
-        if (activeName === undefined &&
-            readyState === 'active' &&
-            document.pictureInPictureElement === video) {
+    const toggle = async (resourceName) => {
+        if (activeName === resourceName && document.pictureInPictureElement === video) {
             try {
                 await document.exitPictureInPicture();
+                activeName = undefined;
                 readyState = 'inactive';
                 error = undefined;
             }
@@ -78,28 +103,31 @@ export function providePip(partID) {
             }
             return;
         }
+        activeName = resourceName;
         readyState = 'loading';
-        // Wait for the new stream's metadata to load before requesting PiP,
-        // otherwise the browser throws InvalidStateError.
-        if (video.readyState < 1 /* HAVE_METADATA */) {
-            await new Promise((resolve) => {
-                video.addEventListener('loadedmetadata', () => resolve(), { once: true });
-            });
-        }
         try {
+            const stream = ownedMediaStream;
+            video.srcObject = stream;
+            // Wait for the stream's metadata to load before requesting PiP,
+            // otherwise the browser throws InvalidStateError.
+            if (video.readyState < 1 /* HAVE_METADATA */) {
+                await new Promise((resolve) => {
+                    video.addEventListener('loadedmetadata', () => resolve(), { once: true });
+                });
+            }
             await video.requestPictureInPicture();
             readyState = 'active';
             error = undefined;
         }
         catch (nextError) {
+            readyState = 'inactive';
+            activeName = undefined;
             error = nextError;
         }
     };
     const context = {
-        async toggle(resourceName) {
-            activeName = activeName === resourceName ? undefined : resourceName;
-            await toggle();
-        },
+        toggle,
+        setStream,
         setRate(newRate) {
             rate = newRate;
         },

package/dist/resource-triplet.d.ts

@@ -0,0 +1,37 @@
+/** The canonical set of Viam resource API triplets. */
+export declare const ResourceTriplets: {
+    readonly Arm: "rdk:component:arm";
+    readonly AudioInput: "rdk:component:audio_in";
+    readonly AudioOutput: "rdk:component:audio_out";
+    readonly Base: "rdk:component:base";
+    readonly Board: "rdk:component:board";
+    readonly Button: "rdk:component:button";
+    readonly Camera: "rdk:component:camera";
+    readonly Encoder: "rdk:component:encoder";
+    readonly Gantry: "rdk:component:gantry";
+    readonly GenericComponent: "rdk:component:generic";
+    readonly Gripper: "rdk:component:gripper";
+    readonly InputController: "rdk:component:input_controller";
+    readonly Motor: "rdk:component:motor";
+    readonly MovementSensor: "rdk:component:movement_sensor";
+    readonly PoseTracker: "rdk:component:pose_tracker";
+    readonly PowerSensor: "rdk:component:power_sensor";
+    readonly Sensor: "rdk:component:sensor";
+    readonly Servo: "rdk:component:servo";
+    readonly Switch: "rdk:component:switch";
+    readonly BaseRemoteControl: "rdk:service:base_remote_control";
+    readonly DataManager: "rdk:service:data_manager";
+    readonly Discovery: "rdk:service:discovery";
+    readonly GenericService: "rdk:service:generic";
+    readonly MLModel: "rdk:service:mlmodel";
+    readonly Motion: "rdk:service:motion";
+    readonly Navigation: "rdk:service:navigation";
+    readonly Slam: "rdk:service:slam";
+    readonly Sensors: "rdk:service:sensors";
+    readonly Shell: "rdk:service:shell";
+    readonly Video: "rdk:service:video";
+    readonly Vision: "rdk:service:vision";
+    readonly WorldStateStore: "rdk:service:world_state_store";
+};
+/** A Viam resource API triplet, e.g. `'rdk:component:arm'`. */
+export type ResourceTriplet = (typeof ResourceTriplets)[keyof typeof ResourceTriplets];