@viamrobotics/test-widgets 0.6.1 → 0.7.0

package/dist/components/widgets/camera/camera.svelte

@@ -12,6 +12,7 @@
 		createRefetchIntervalStore,
 		RefetchIntervals,
 	} from '../../refetch-interval-store.svelte'
+	import SectionTitle from '../../section-title.svelte'
 
 	import PCDWidget from '../pcd/pcd-widget.svelte'
 	import ExportScreenshot from './export-screenshot.svelte'
@@ -150,166 +151,179 @@
 	}
 
 	const headingID = $props.id()
+	const getImagesHeadingID = `${headingID}-images`
+	const getPointCloudHeadingID = `${headingID}-point-cloud`
 </script>
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		{#if isPlaying}
-			<div class="flex gap-4 p-4 pb-3">
-				<RefetchController
-					{refetchInterval}
-					allowLive
-					queries={[imageQuery, pointcloudQuery]}
+		<section
+			class="flex flex-col"
+			aria-labelledby={getImagesHeadingID}
+		>
+			<div class="flex flex-col gap-0.5 p-4 pb-0">
+				<SectionTitle
+					title="GetImages"
+					api="rdk:component:camera"
+					headingId={getImagesHeadingID}
 				/>
-				{#if sourceNames.length > 0 && refetchInterval.current !== RefetchIntervals.LIVE}
-					<Label position="left">
-						Source
-						<Select
-							value={selectedSource}
-							on:change={onSourceSelect}
-							slot="input"
-						>
-							{#each sourceNames as name (name)}
-								<option value={name}>{name}</option>
-							{/each}
-						</Select>
-					</Label>
-				{/if}
-				{#if panoCoverage}
-					<Label>
-						{panoToggleLabel}
-						<ToggleButtons
-							slot="input"
-							options={['On', 'Off']}
-							selected={displayAs360 ? 'On' : 'Off'}
-							on:input={(event) => {
-								displayAs360 = event.detail === 'On'
-							}}
-						/>
-					</Label>
-				{/if}
 			</div>
-		{/if}
-		<div class="flex h-full w-full gap-4 p-4">
-			<div class="grow">
-				{#if isPlaying}
-					{#if displayAs360}
-						{#if isLive}
-							<!-- renderMode="always" keeps the live VideoTexture advancing each frame -->
-							<Canvas renderMode="always">
-								<LiveThreeSixtyCameraView
-									{partID}
-									{resourceName}
-									coverage={panoCoverage}
-								/>
-							</Canvas>
+			{#if isPlaying}
+				<div class="flex gap-4 p-4 pb-3">
+					<RefetchController
+						{refetchInterval}
+						allowLive
+						queries={[imageQuery, pointcloudQuery]}
+					/>
+					{#if sourceNames.length > 0 && refetchInterval.current !== RefetchIntervals.LIVE}
+						<Label position="left">
+							Source
+							<Select
+								value={selectedSource}
+								on:change={onSourceSelect}
+								slot="input"
+							>
+								{#each sourceNames as name (name)}
+									<option value={name}>{name}</option>
+								{/each}
+							</Select>
+						</Label>
+					{/if}
+					{#if panoCoverage}
+						<Label>
+							{panoToggleLabel}
+							<ToggleButtons
+								slot="input"
+								options={['On', 'Off']}
+								selected={displayAs360 ? 'On' : 'Off'}
+								on:input={(event) => {
+									displayAs360 = event.detail === 'On'
+								}}
+							/>
+						</Label>
+					{/if}
+				</div>
+			{/if}
+			<div class="flex h-full w-full gap-4 p-4">
+				<div class="grow">
+					{#if isPlaying}
+						{#if displayAs360}
+							{#if isLive}
+								<!-- renderMode="always" keeps the live VideoTexture advancing each frame -->
+								<Canvas renderMode="always">
+									<LiveThreeSixtyCameraView
+										{partID}
+										{resourceName}
+										coverage={panoCoverage}
+									/>
+								</Canvas>
+							{:else}
+								<Canvas>
+									<ThreeSixtyCameraView
+										data={imageQuery.data}
+										coverage={panoCoverage}
+									/>
+								</Canvas>
+							{/if}
 						{:else}
-							<Canvas>
-								<ThreeSixtyCameraView
-									data={imageQuery.data}
-									coverage={panoCoverage}
-								/>
-							</Canvas>
+							<LiveOrPollingVideo
+								{partID}
+								{resourceName}
+								showResolutionOptions
+								{isLive}
+								data={imageQuery.data}
+								error={imageQuery.error}
+								isLoading={imageQuery.isLoading}
+								refetch={imageQuery.refetch}
+								showMousePositionTooltip={mousePostionTooltip === 'On'}
+								sourceName={selectedSource}
+							/>
 						{/if}
 					{:else}
-						<LiveOrPollingVideo
-							{partID}
-							{resourceName}
-							showResolutionOptions
-							{isLive}
-							data={imageQuery.data}
-							error={imageQuery.error}
-							isLoading={imageQuery.isLoading}
-							refetch={imageQuery.refetch}
-							showMousePositionTooltip={mousePostionTooltip === 'On'}
+						<div class="bg-medium flex h-64 w-80 items-center justify-center">
+							<Button
+								icon="play-circle-outline"
+								variant="dark"
+								onclick={() => {
+									isPlaying = true
+								}}
+							>
+								Start feed
+							</Button>
+						</div>
+					{/if}
+				</div>
+				{#if isPlaying}
+					<div class="flex flex-col items-start gap-2">
+						<ExportScreenshot
+							name={client.current?.name ?? ''}
 							sourceName={selectedSource}
+							getImage={exportScreenshotQuery.refetch}
 						/>
-					{/if}
-				{:else}
-					<div class="bg-medium flex h-64 w-80 items-center justify-center">
-						<Button
-							icon="play-circle-outline"
-							variant="dark"
-							onclick={() => {
-								isPlaying = true
-							}}
-						>
-							Start feed
-						</Button>
-					</div>
-				{/if}
-			</div>
-			{#if isPlaying}
-				<div class="flex flex-col items-start gap-2">
-					<ExportScreenshot
-						name={client.current?.name ?? ''}
-						sourceName={selectedSource}
-						getImage={exportScreenshotQuery.refetch}
-					/>
-					{#if addImageToDataset}
-						<Button
-							icon="layers-triple-outline"
-							onclick={async () => {
-								let imgData
-								if (refetchInterval.current === RefetchIntervals.LIVE) {
-									const { isSuccess, data } = await imageQuery.refetch()
-									if (!isSuccess) return
-									imgData = data
-								} else {
-									imgData = imageQuery.data
-								}
+						{#if addImageToDataset}
+							<Button
+								icon="layers-triple-outline"
+								onclick={async () => {
+									let imgData
+									if (refetchInterval.current === RefetchIntervals.LIVE) {
+										const { isSuccess, data } = await imageQuery.refetch()
+										if (!isSuccess) return
+										imgData = data
+									} else {
+										imgData = imageQuery.data
+									}
 
-								const matchingImage = pickImageForSource(imgData?.images, selectedSource)
-								const image = matchingImage?.image
-								const mimeType = matchingImage?.mimeType
+									const matchingImage = pickImageForSource(imgData?.images, selectedSource)
+									const image = matchingImage?.image
+									const mimeType = matchingImage?.mimeType
 
-								if (image) {
-									addImageToDataset({
-										binaryData: new Uint8Array(image),
-										partID,
-										componentType: 'camera',
-										componentName: resourceName,
-										methodName: 'captureAllFromCamera',
-										mimeType: mimeType ?? 'image/png',
-										dataRequestTimes: [new Date(), new Date()],
-									})
-								}
-							}}
-						>
-							Add current image to dataset
-						</Button>
-					{/if}
-					{#if !isFirefox}
-						<PictureInPictureButton
-							{resourceName}
-							rate={refetchInterval.current}
-						/>
-					{/if}
-					<Label>
-						Mouse Position Tooltip
+									if (image) {
+										addImageToDataset({
+											binaryData: new Uint8Array(image),
+											partID,
+											componentType: 'camera',
+											componentName: resourceName,
+											methodName: 'captureAllFromCamera',
+											mimeType: mimeType ?? 'image/png',
+											dataRequestTimes: [new Date(), new Date()],
+										})
+									}
+								}}
+							>
+								Add current image to dataset
+							</Button>
+						{/if}
+						{#if !isFirefox}
+							<PictureInPictureButton
+								{resourceName}
+								rate={refetchInterval.current}
+							/>
+						{/if}
+						<Label>
+							Mouse Position Tooltip
 
-						<ToggleButtons
-							slot="input"
-							options={['On', 'Off']}
-							selected={mousePostionTooltip}
-							on:input={setMousePostionTooltip}
-						/>
-					</Label>
-				</div>
-			{/if}
-		</div>
+							<ToggleButtons
+								slot="input"
+								options={['On', 'Off']}
+								selected={mousePostionTooltip}
+								on:input={setMousePostionTooltip}
+							/>
+						</Label>
+					</div>
+				{/if}
+			</div>
+		</section>
 
 		<section
 			class="flex flex-col gap-4 p-4"
-			aria-labelledby={headingID}
+			aria-labelledby={getPointCloudHeadingID}
 		>
-			<div>
-				<h3
-					id={headingID}
-					class="pb-1.5 font-semibold"
-				>
-					GetPointCloud
-				</h3>
+			<div class="flex flex-col gap-0.5">
+				<SectionTitle
+					title="GetPointCloud"
+					api="rdk:component:camera"
+					headingId={getPointCloudHeadingID}
+				/>
 				<p class="text-subtle-2 text-xs">
 					Get depth measurement data from cameras with depth sensing support
 				</p>

package/dist/components/widgets/camera/live-or-polling-video.svelte

@@ -393,6 +393,7 @@
 {#if showResolutionOptions && isLive}
 	<MutationSection
 		title="SetStreamOptions"
+		api="rdk:component:camera"
 		description="Change the resolution of the live stream video feed"
 		lastError={resolutionMutation.error}
 		class="-m-4 mt-4"

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."
 							>