@viamrobotics/test-widgets 0.6.0 → 0.7.0

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.0",
+  "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",