@viamrobotics/test-widgets 0.6.0 → 0.7.0

package/dist/components/widgets/camera/three-sixty-camera-view.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
 	import type { QueryObserverResult } from '@tanstack/svelte-query'
-	import type { OrbitControls as OrbitControlsType } from 'three/examples/jsm/controls/OrbitControls.js'
+	import type { Texture } from 'three'
 
-	import { T } from '@threlte/core'
-	import { OrbitControls, useTexture } from '@threlte/extras'
+	import { useTexture } from '@threlte/extras'
 	import { CameraClient } from '@viamrobotics/sdk'
-	import { BackSide } from 'three'
 
-	const {
-		data,
-	}: { data: QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>['data'] } =
-		$props()
+	import type { PanoCoverage } from './get-pano-coverage-from-xmp'
+
+	import PanoSphereScene from './pano-sphere-scene.svelte'
+
+	interface Props {
+		data: QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>['data']
+		coverage?: PanoCoverage | null
+	}
+
+	const { data, coverage = null }: Props = $props()
 
 	let imageUrl = $state.raw('')
-	let controlsRef = $state<OrbitControlsType>()
 
 	$effect(() => {
 		const imageRecord = data?.images?.[0]
@@ -23,47 +26,34 @@
 			return
 		}
 
-		const imageBytes = new Uint8Array(image)
-		const imageBlob = new Blob([imageBytes], {
+		const imageBlob = new Blob([new Uint8Array(image)], {
 			type: imageRecord.mimeType || 'image/jpeg',
 		})
 		const url = URL.createObjectURL(imageBlob)
 		imageUrl = url
 
-		return () => {
-			URL.revokeObjectURL(url)
-		}
+		return () => URL.revokeObjectURL(url)
 	})
 
-	const texture = $derived.by(() => (imageUrl ? useTexture(imageUrl) : null))
-</script>
-
-<T.PerspectiveCamera
-	makeDefault
-	position={[0, 0, 0.1]}
-	fov={75}
->
-	<OrbitControls
-		bind:ref={controlsRef}
-		enableZoom={true}
-		enablePan={false}
-	/>
-</T.PerspectiveCamera>
+	// `useTexture` returns a store that resolves to the decoded texture (with the
+	// renderer's color space already applied). Mirror its value into reactive state so
+	// the sphere scene can render the camera even before the first frame loads, and so
+	// `map` clears when the source goes away.
+	const textureStore = $derived(imageUrl ? useTexture(imageUrl) : undefined)
+	let map = $state.raw<Texture>()
+	$effect(() => {
+		if (!textureStore) {
+			map = undefined
+			return
+		}
 
-{#if $texture}
-	{#await texture then map}
-		<T.Mesh scale={[-1, 1, 1]}>
-			<T.SphereGeometry args={[500, 60, 40]} />
-			<T.MeshBasicMaterial
-				{map}
-				side={BackSide}
-			/>
-		</T.Mesh>
-	{/await}
-{/if}
+		return textureStore.subscribe((value) => {
+			map = value ?? undefined
+		})
+	})
+</script>
 
-<T.AmbientLight intensity={0.5} />
-<T.DirectionalLight
-	position={[5, 5, 5]}
-	intensity={1}
+<PanoSphereScene
+	{coverage}
+	{map}
 />

package/dist/components/widgets/camera/three-sixty-camera-view.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { QueryObserverResult } from '@tanstack/svelte-query';
 import { CameraClient } from '@viamrobotics/sdk';
-type $$ComponentProps = {
+import type { PanoCoverage } from './get-pano-coverage-from-xmp';
+interface Props {
     data: QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>['data'];
-};
-declare const ThreeSixtyCameraView: import("svelte").Component<$$ComponentProps, {}, "">;
+    coverage?: PanoCoverage | null;
+}
+declare const ThreeSixtyCameraView: import("svelte").Component<Props, {}, "">;
 type ThreeSixtyCameraView = ReturnType<typeof ThreeSixtyCameraView>;
 export default ThreeSixtyCameraView;

package/dist/components/widgets/discovery/discovery.svelte

@@ -135,6 +135,7 @@
 
 		<ApiSection
 			title="DiscoverResources"
+			api="rdk:service:discovery"
 			class="relative"
 		>
 			<Query

package/dist/components/widgets/encoder/encoder.svelte

@@ -81,6 +81,7 @@
 		<div class="grid w-full grid-cols-2 divide-x">
 			<ApiSection
 				title="GetPosition"
+				api="rdk:component:encoder"
 				tooltip="Relative encoders return ticks since last zeroing. Absolute encoders return degrees."
 				class="gap-3"
 			>
@@ -99,6 +100,7 @@
 
 			<ApiSection
 				title="ResetPosition"
+				api="rdk:component:encoder"
 				description="Set the current position as the new zero position"
 			>
 				<Button

package/dist/components/widgets/gantry/gantry.svelte

@@ -6,6 +6,7 @@
 		createResourceQuery,
 	} from '@viamrobotics/svelte-sdk'
 
+	import { apiDocsHref } from '../../../api-docs-href'
 	import ApiSection from '../../api-section.svelte'
 	import ConnectionStatus from '../../connection-status.svelte'
 	import IsMoving from '../../is-moving.svelte'
@@ -51,12 +52,26 @@
 					aria-labelledby={positionHeadingID}
 				>
 					<h3
-						class="flex flex-row items-center gap-1 text-sm"
+						class="text-subtle-2 flex flex-row items-center gap-1 text-sm"
 						id={positionHeadingID}
 					>
-						<span class="font-semibold"> GetPosition </span>
+						<a
+							href={apiDocsHref('rdk:component:gantry', 'getPosition')}
+							target="_blank"
+							rel="noopener noreferrer external"
+							class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+						>
+							GetPosition
+						</a>
 						and
-						<span class="font-semibold"> GetLengths </span>
+						<a
+							href={apiDocsHref('rdk:component:gantry', 'getLengths')}
+							target="_blank"
+							rel="noopener noreferrer external"
+							class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+						>
+							GetLengths
+						</a>
 					</h3>
 					<Queries queries={[positionQuery, lengthsQuery]}>
 						{@const positions = positionQuery.data}
@@ -69,7 +84,10 @@
 						{/if}
 					</Queries>
 				</ApiSection>
-				<ApiSection title="MoveToPosition">
+				<ApiSection
+					title="MoveToPosition"
+					api="rdk:component:gantry"
+				>
 					<Query query={positionQuery}>
 						{@const positions = positionQuery.data}
 						{#if positions !== undefined}
@@ -106,6 +124,7 @@
 					</ApiSection>
 					<ApiSection
 						title="Home"
+						api="rdk:component:gantry"
 						description="Run the homing sequence"
 					>
 						<Home
@@ -116,7 +135,10 @@
 				</div>
 			</div>
 			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:gantry"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -126,6 +148,7 @@
 				</ApiSection>
 				<IsMoving
 					client={GantryClient}
+					api="rdk:component:gantry"
 					{partID}
 					{resourceName}
 				/>

package/dist/components/widgets/generic/generic.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { ResourceName } from '@viamrobotics/sdk'
 
+	import SectionTitle from '../../section-title.svelte'
+
 	import DoCommand from '../do-command/do-command.svelte'
 
 	interface Props {
@@ -11,6 +13,8 @@
 
 	const { partID, resourceName, isComponent }: Props = $props()
 
+	const api = $derived(`rdk:${isComponent ? 'component' : 'service'}:generic`)
+
 	const genericResourceName = $derived<ResourceName>({
 		namespace: 'rdk',
 		type: isComponent ? 'component' : 'service',
@@ -20,7 +24,10 @@
 </script>
 
 <div class="flex flex-col py-2 pl-4">
-	<h3 class="font-semibold">DoCommand</h3>
+	<SectionTitle
+		title="DoCommand"
+		{api}
+	/>
 </div>
 
 {#key genericResourceName}

package/dist/components/widgets/gripper/gripper.svelte

@@ -30,10 +30,11 @@
 <ConnectionStatus {partID}>
 	{#snippet connected()}
 		<div class="flex flex-row divide-x">
-			<span class="flex flex-row gap-4">
+			<span class="flex grow flex-row gap-4">
 				<ApiSection
 					title="Open"
-					class="gap-3 pr-0"
+					api="rdk:component:gripper"
+					class="grow-0 gap-3 pr-0"
 				>
 					<Open
 						{partID}
@@ -42,7 +43,8 @@
 				</ApiSection>
 				<ApiSection
 					title="Grab"
-					class="gap-3 pl-0"
+					api="rdk:component:gripper"
+					class="grow-0 gap-3 pl-0"
 				>
 					<Grab
 						{partID}
@@ -50,8 +52,11 @@
 					/>
 				</ApiSection>
 			</span>
-			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection title="Stop">
+			<div class="flex shrink-0 flex-col divide-y">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:gripper"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -61,6 +66,7 @@
 				</ApiSection>
 				<IsMoving
 					client={GripperClient}
+					api="rdk:component:gripper"
 					{partID}
 					{resourceName}
 				/>

package/dist/components/widgets/gripper/is-holding-something.svelte

@@ -30,6 +30,7 @@
 
 <ApiSection
 	title="IsHoldingSomething"
+	api="rdk:component:gripper"
 	bottomText="Updates automatically"
 	class="grow"
 >

package/dist/components/widgets/input-controller/input-controller.svelte

@@ -54,7 +54,8 @@
 		</div>
 
 		<ApiSection
-			title="GetReadings"
+			title="GetEvents"
+			api="rdk:component:input_controller"
 			class="relative"
 		>
 			<Query

package/dist/components/widgets/motor/motor.svelte

@@ -86,6 +86,7 @@
 				</MutationSection>
 				<MutationSection
 					title="SetPower"
+					api="rdk:component:motor"
 					description="Move continuously"
 					lastError={setPowerMutation.error}
 				>
@@ -94,6 +95,7 @@
 				{#if propertiesQuery.data?.positionReporting}
 					<MutationSection
 						title="SetRPM"
+						api="rdk:component:motor"
 						description="Move indefinitely at a specified speed."
 						lastError={setRPMMutation.error}
 					>
@@ -101,6 +103,7 @@
 					</MutationSection>
 					<MutationSection
 						title="GoFor"
+						api="rdk:component:motor"
 						description="Move a specified number of revolutions"
 						lastError={goForMutation.error}
 					>
@@ -108,6 +111,7 @@
 					</MutationSection>
 					<MutationSection
 						title="GoTo"
+						api="rdk:component:motor"
 						description="Turn to a specified position"
 						lastError={goToMutation.error}
 					>
@@ -117,7 +121,10 @@
 			</div>
 
 			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
-				<ApiSection title="Stop">
+				<ApiSection
+					title="Stop"
+					api="rdk:component:motor"
+				>
 					<StopButton
 						error={stopMutation.error}
 						onStop={() => {
@@ -127,12 +134,14 @@
 				</ApiSection>
 				<IsMoving
 					client={MotorClient}
+					api="rdk:component:motor"
 					{partID}
 					{resourceName}
 				>
 					<div class="flex flex-col gap-6 pt-2">
 						<ApiSection
 							title="IsPowered"
+							api="rdk:component:motor"
 							class="gap-3 p-0"
 							tooltip="Returns whether or not the motor is running and the current portion of max power.
 
@@ -158,6 +167,7 @@
 						{#if propertiesQuery.data?.positionReporting === true}
 							<ApiSection
 								title="GetPosition"
+								api="rdk:component:motor"
 								class="gap-3 p-0"
 								tooltip="Reports the position of an encoded motor in revolutions from zero/home."
 							>

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

@@ -9,6 +9,9 @@
 	import ReadingsList from '../../readings-list.svelte'
 	import RefetchController from '../../refetch-controller.svelte'
 	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+	import SectionTitle from '../../section-title.svelte'
+
+	const MS_API = 'rdk:component:movement_sensor'
 
 	import Accuracy from './accuracy.svelte'
 	import CompassHeading from './compass-heading.svelte'
@@ -104,7 +107,10 @@
 				<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 lg:w-1/4">
 					{#if propertiesQuery.data?.positionSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">GetPosition</h3>
+							<SectionTitle
+								title="GetPosition"
+								api={MS_API}
+							/>
 							<Query
 								query={positionQuery}
 								contentCx="h-6"
@@ -118,9 +124,13 @@
 
 					{#if propertiesQuery.data?.orientationSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetOrientation <span class="text-subtle-2 font-normal">(º)</span>
-							</h3>
+							<SectionTitle
+								title="GetOrientation"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={orientationQuery}
 								contentCx="h-6"
@@ -134,9 +144,13 @@
 
 					{#if propertiesQuery.data?.compassHeadingSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetCompassHeading <span class="text-subtle-2 font-normal">(º)</span>
-							</h3>
+							<SectionTitle
+								title="GetCompassHeading"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={compassHeadingQuery}
 								contentCx="h-6"
@@ -152,9 +166,13 @@
 				<div class="flex w-full flex-col gap-5 p-4 lg:w-1/4">
 					{#if propertiesQuery.data?.angularVelocitySupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetAngularVelocity <span class="text-subtle-2 font-normal">(º/s)</span>
-							</h3>
+							<SectionTitle
+								title="GetAngularVelocity"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º/s)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={angularVelocityQuery}
 								contentCx="h-6"
@@ -168,9 +186,13 @@
 
 					{#if propertiesQuery.data?.linearVelocitySupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetLinearVelocity <span class="text-subtle-2 font-normal">(m/s)</span>
-							</h3>
+							<SectionTitle
+								title="GetLinearVelocity"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(m/s)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={linearVelocityQuery}
 								contentCx="h-6"
@@ -184,11 +206,14 @@
 
 					{#if propertiesQuery.data?.linearAccelerationSupported}
 						<div class="flex flex-col gap-2">
-							<h3 class="font-semibold">
-								GetLinearAcceleration <span class="text-subtle-2 font-normal"
-									>(m/s<sup>2</sup>)</span
-								>
-							</h3>
+							<SectionTitle
+								title="GetLinearAcceleration"
+								api={MS_API}
+							>
+								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal"
+										>(m/s<sup>2</sup>)</span
+									>{/snippet}
+							</SectionTitle>
 							<Query
 								query={linearAccelerationQuery}
 								contentCx="h-6"
@@ -201,7 +226,10 @@
 					{/if}
 
 					<div class="flex flex-col gap-2">
-						<h3 class="font-semibold">GetAccuracy</h3>
+						<SectionTitle
+							title="GetAccuracy"
+							api={MS_API}
+						/>
 						<Query
 							query={accuracyQuery}
 							contentCx="h-6"
@@ -226,13 +254,12 @@
 			class="flex flex-col gap-4 p-4"
 			aria-labelledby={headingID}
 		>
-			<div>
-				<h3
-					id={headingID}
-					class="pb-1.5 font-semibold"
-				>
-					GetReadings
-				</h3>
+			<div class="flex flex-col gap-0.5">
+				<SectionTitle
+					title="GetReadings"
+					api={MS_API}
+					headingId={headingID}
+				/>
 				<p class="text-subtle-2 text-xs">Get all the measurements and data from the sensor</p>
 			</div>
 

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/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/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;
 };