@viamrobotics/test-widgets 0.6.1 → 0.7.0

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

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/index.d.ts

@@ -1,4 +1,5 @@
 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';

package/dist/index.js

@@ -1,4 +1,5 @@
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -90,7 +90,7 @@
     "prettier-plugin-tailwindcss": "^0.7.4",
     "publint": "^0.3.18",
     "runed": "^0.37.1",
-    "svelte": "^5.55.7",
+    "svelte": "^5.56.3",
     "svelte-check": "^4.4.6",
     "svelte-splitpanes": "^8.0.12",
     "tailwind-merge": "^3.5.0",
@@ -109,6 +109,9 @@
   "engines": {
     "node": ">=22.12.0"
   },
+  "dependencies": {
+    "svelte-tweakpane-ui": "^1.5.17"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && pnpm prepack",