Merge pull request #35 from viamrobotics/claude/add-camera-source-dropdown

feat: add source dropdown to camera widget (#32)

Author: DTCurrie

src/lib/components/widgets/camera/__tests__/get-source-names.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSourceNames } from '../get-source-names'
+
+describe('getSourceNames', () => {
+	it('returns unique source names from images', () => {
+		const images = [{ sourceName: 'color' }, { sourceName: 'depth' }, { sourceName: 'color' }]
+		expect(getSourceNames(images)).toEqual(['color', 'depth'])
+	})
+
+	it('filters out empty source names', () => {
+		const images = [{ sourceName: '' }, { sourceName: 'color' }, { sourceName: '' }]
+		expect(getSourceNames(images)).toEqual(['color'])
+	})
+
+	it('returns an empty array when there are no images', () => {
+		expect(getSourceNames([])).toEqual([])
+	})
+
+	it('returns an empty array when all source names are empty', () => {
+		const images = [{ sourceName: '' }, { sourceName: '' }]
+		expect(getSourceNames(images)).toEqual([])
+	})
+
+	it('preserves the order of first occurrence', () => {
+		const images = [
+			{ sourceName: 'depth' },
+			{ sourceName: 'color' },
+			{ sourceName: 'depth' },
+			{ sourceName: 'ir' },
+		]
+		expect(getSourceNames(images)).toEqual(['depth', 'color', 'ir'])
+	})
+
+	it('handles a single image', () => {
+		const images = [{ sourceName: 'color' }]
+		expect(getSourceNames(images)).toEqual(['color'])
+	})
+})

src/lib/components/widgets/camera/camera.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Label, Switch, ToggleButtons } from '@viamrobotics/prime-core'
+	import { Button, Label, Select, Switch, ToggleButtons } from '@viamrobotics/prime-core'
 	import { CameraClient } from '@viamrobotics/sdk'
 	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
 
@@ -14,6 +14,7 @@
 
 	import PCDWidget from '../pcd/pcd-widget.svelte'
 	import ExportScreenshot from './export-screenshot.svelte'
+	import { getSourceNames } from './get-source-names'
 	import LiveOrPollingVideo from './live-or-polling-video.svelte'
 	import PictureInPictureButton from './picture-in-picture-button.svelte'
 
@@ -30,6 +31,8 @@
 		'camera'
 	)
 	let isShowingPointcloud = $state(false)
+	let selectedSource = $state('')
+	let sourceNames = $state<string[]>([])
 
 	const { addImageToDataset } = useAddImageToDataset()
 	const setIsShowingPointcloud = (event: CustomEvent<boolean>) => {
@@ -42,10 +45,25 @@
 		() => resourceName
 	)
 
-	const imageQuery = createResourceQuery(client, 'getImages', () => ({
-		enabled: refetchInterval.current !== RefetchIntervals.LIVE,
-		refetchInterval: refetchInterval.current,
-	}))
+	const imageQuery = createResourceQuery(
+		client,
+		'getImages',
+		() => (selectedSource ? ([[selectedSource]] as [string[]]) : ([] as [])),
+		() => ({
+			enabled: refetchInterval.current !== RefetchIntervals.LIVE,
+			refetchInterval: refetchInterval.current,
+		})
+	)
+
+	$effect(() => {
+		if (sourceNames.length === 0 && imageQuery.data?.images) {
+			const names = getSourceNames(imageQuery.data.images)
+			if (names.length > 0) {
+				sourceNames = names
+				selectedSource = names[0]!
+			}
+		}
+	})
 
 	const pointcloudQuery = createResourceQuery(client, 'getPointCloud', () => ({
 		enabled: isShowingPointcloud,
@@ -59,15 +77,25 @@
 	// A separate, disabled query for exporting a screenshot
 	// since this button should work regardless of refetch
 	// interval and not affect the image feed.
-	const exportScreenshotQuery = createResourceQuery(client, 'getImages', {
-		enabled: false,
-		refetchInterval: false,
-	})
+	const exportScreenshotQuery = createResourceQuery(
+		client,
+		'getImages',
+		() => (selectedSource ? ([[selectedSource]] as [string[]]) : ([] as [])),
+		{
+			enabled: false,
+			refetchInterval: false,
+		}
+	)
 
 	// Firefox has native support for picture-in-picture and does not need
 	// to be requested separately. Don't show a "toggle pip" button in Firefox.
 	const isFirefox = navigator.userAgent.toLowerCase().includes('firefox')
 
+	const onSourceSelect = (event: Event) => {
+		const { value } = event.target as HTMLSelectElement
+		selectedSource = value
+	}
+
 	let mousePostionTooltip = $state<'On' | 'Off'>('Off')
 	const setMousePostionTooltip = (event: CustomEvent<string>) => {
 		mousePostionTooltip = event.detail as 'On' | 'Off'
@@ -78,12 +106,26 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex gap-2 p-4 pb-3">
+		<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}
 		</div>
 		<div class="flex h-full w-full gap-4 p-4">
 			<div class="grow">

src/lib/components/widgets/camera/get-source-names.ts

@@ -0,0 +1,4 @@
+/** Extract unique, non-empty source names from a GetImages response. */
+export const getSourceNames = (images: { sourceName: string }[]): string[] => {
+	return [...new Set(images.map((img) => img.sourceName).filter(Boolean))]
+}