@viamrobotics/test-widgets 0.1.8 → 0.1.10

package/dist/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">

package/dist/components/widgets/camera/get-source-names.d.ts

@@ -0,0 +1,4 @@
+/** Extract unique, non-empty source names from a GetImages response. */
+export declare const getSourceNames: (images: {
+    sourceName: string;
+}[]) => string[];

package/dist/components/widgets/camera/get-source-names.js

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

package/dist/components/widgets/vision-service/detection.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
 	import { useThrelte } from '@threlte/core'
-	import { useInteractivity } from '@threlte/extras'
-	import { onMount } from 'svelte'
-	import { Vector2 } from 'three'
 	import { Container, Text } from 'threlte-uikit'
 
 	import { lightTextColors } from './color'
@@ -17,19 +14,6 @@
 
 	const { detection, factor = 0 }: Props = $props()
 
-	const normalizedDeviceCoordsToPixel = (
-		ndcCoords: Vector2,
-		canvasWidth: number,
-		canvasHeight: number
-	) => {
-		const screenX = (ndcCoords.x + 1) / 2
-		const screenY = (ndcCoords.y + 1) / 2
-		const pixelX = Math.round(screenX * canvasWidth)
-		const pixelY = Math.round((1 - screenY) * canvasHeight)
-		return new Vector2(pixelX, pixelY)
-	}
-
-	const { pointer } = useInteractivity()
 	const context = useDetections()
 
 	const factoredxMin = $derived(Number(detection.xMin) * factor)
@@ -37,46 +21,32 @@
 	const factoredyMin = $derived(Number(detection.yMin) * factor)
 	const factoredyMax = $derived(Number(detection.yMax) * factor)
 
-	/**
-	 * Check preexisting mouse coords for hover state
-	 */
-	$effect.pre(() => {
-		const pixelCoords = normalizedDeviceCoordsToPixel($pointer, $size.width, $size.height)
-
-		if (
-			factoredxMin < pixelCoords.x &&
-			factoredxMax > pixelCoords.x &&
-			factoredyMin < pixelCoords.y &&
-			factoredyMax > pixelCoords.y
-		) {
-			context.hovered.add(detection.id)
-		} else {
-			context.hovered.delete(detection.id)
-		}
-	})
-
-	const hovering = $derived(context.hovered.has(detection.id))
+	let hovering = $state(false)
 
 	// These are ballparking, but seem good enough for nearly all cases
 	const isDetectionNearTop = $derived(factoredyMin < 30)
 	const isDetectionNearRight = $derived(factoredxMin > $size.width * 0.66)
-
-	onMount(() => {
-		return () => {
-			context.hovered.delete(detection.id)
-		}
-	})
 </script>
 
 <Container
 	positionType="absolute"
 	positionLeft={factoredxMin}
 	positionTop={factoredyMin}
-	borderColor={hovering ? detection.color : '#aaa'}
+	borderColor="#aaa"
+	hover={{
+		borderColor: detection.color,
+	}}
 	borderWidth={2}
 	width={factoredxMax - factoredxMin}
 	height={factoredyMax - factoredyMin}
-	onpointerleave={() => context.hovered.delete(detection.id)}
+	onpointerenter={() => {
+		context.hovered.add(detection.id)
+		hovering = true
+	}}
+	onpointerleave={() => {
+		context.hovered.delete(detection.id)
+		hovering = false
+	}}
 >
 	{#if hovering}
 		<Text

package/dist/components/widgets/vision-service/image.svelte

@@ -16,7 +16,7 @@
 	interface Props {
 		data?: {
 			detections: Detection[]
-			image: ({ image: Uint8Array } & Exclude<cameraApi.Image, 'image'>) | undefined
+			image: ({ image: Uint8Array } & Omit<cameraApi.Image, 'image'>) | undefined
 			classifications: Classification[]
 		}
 		detectionsSupported: boolean
@@ -62,7 +62,9 @@
 	provideFontFamilies({
 		publicSans: {
 			// This must remain `/static/*` while the frontend directory still exist
+			light: '/static/fonts/public-sans.json',
 			medium: '/static/fonts/public-sans.json',
+			'extra-light': '/static/fonts/public-sans.json',
 		},
 	})
 
@@ -108,7 +110,7 @@
 		</div>
 	{:else}
 		<div
-			class="relative max-h-full min-h-0 max-w-full"
+			class="border-light relative max-h-full min-h-0 max-w-full border"
 			style:width={`${size.width.toString()}px`}
 			style:height={`${size.height.toString()}px`}
 		>
@@ -117,11 +119,13 @@
 			>
 				{fps.current.toFixed(1)}fps
 			</div>
+			<img
+				class="absolute top-0 left-0"
+				alt=""
+				{src}
+			/>
 			<Canvas>
-				<Scene
-					{src}
-					factor={size.factor}
-				/>
+				<Scene factor={size.factor} />
 			</Canvas>
 		</div>
 		<div

package/dist/components/widgets/vision-service/image.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
         detections: Detection[];
         image: ({
             image: Uint8Array;
-        } & Exclude<cameraApi.Image, 'image'>) | undefined;
+        } & Omit<cameraApi.Image, 'image'>) | undefined;
         classifications: Classification[];
     };
     detectionsSupported: boolean;

package/dist/components/widgets/vision-service/scene.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
 	import { interactivity } from '@threlte/extras'
-	import { Fullscreen, Image } from 'threlte-uikit'
+	import { Fullscreen } from 'threlte-uikit'
 
 	import { useDetections } from './context.svelte'
 	import Detection from './detection.svelte'
 
 	interface Props {
-		src: string
 		factor?: number
 	}
 
-	const { src, factor = 0 }: Props = $props()
+	const { factor = 0 }: Props = $props()
 
 	const context = useDetections()
 
@@ -22,24 +21,7 @@
 	makeDefault
 	position={[0, 0, 1]}
 >
-	<Fullscreen
-		positionType="relative"
-		width="100%"
-		height="100%"
-	>
-		<Image
-			positionType="absolute"
-			width="100%"
-			height="100%"
-			{src}
-		/>
-	</Fullscreen>
-
-	<Fullscreen
-		positionType="relative"
-		width="100%"
-		height="100%"
-	>
+	<Fullscreen>
 		{#each context.current as detection (detection.id)}
 			<Detection
 				{detection}

package/dist/components/widgets/vision-service/scene.svelte.d.ts

@@ -1,5 +1,4 @@
 interface Props {
-    src: string;
     factor?: number;
 }
 declare const Scene: import("svelte").Component<Props, {}, "">;

package/dist/components/widgets/vision-service/use-slow-request.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const useSlowRequest: (isFetching: () => boolean) => {
+    readonly isSlow: boolean;
+};

package/dist/components/widgets/vision-service/use-slow-request.svelte.js

@@ -0,0 +1,22 @@
+const SLOW_REQUEST_THRESHOLD_MS = 5000;
+export const useSlowRequest = (isFetching) => {
+    let isSlow = $state(false);
+    $effect(() => {
+        if (!isFetching()) {
+            isSlow = false;
+            return;
+        }
+        isSlow = false;
+        const timeout = setTimeout(() => {
+            isSlow = true;
+        }, SLOW_REQUEST_THRESHOLD_MS);
+        return () => {
+            clearTimeout(timeout);
+        };
+    });
+    return {
+        get isSlow() {
+            return isSlow;
+        },
+    };
+};

package/dist/components/widgets/vision-service/vision-service.svelte

@@ -15,6 +15,7 @@
 
 	import Image from './image.svelte'
 	import ObjectPointClouds from './object-point-clouds.svelte'
+	import { useSlowRequest } from './use-slow-request.svelte.js'
 
 	const { addImageToDataset } = useAddImageToDataset()
 
@@ -106,10 +107,16 @@
 				: (Math.max(getObjectPointCloudsRefetchInterval.current, 1000 / 20) as number | false),
 	}))
 
+	const captureAllSlow = useSlowRequest(() => captureAllQuery.isFetching)
+	const propertiesSlow = useSlowRequest(() => propertiesQuery.isFetching)
+	const objectPointCloudsSlow = useSlowRequest(() => getObjectPointCloudsQuery.isFetching)
+
 	const onCameraSelect = (event: Event) => {
 		const { value } = event.target as HTMLSelectElement
 		cameraName = value
 	}
+
+	const detectionsSlow = $derived(captureAllSlow.isSlow || propertiesSlow.isSlow)
 </script>
 
 <ConnectionStatus {partID}>
@@ -183,10 +190,19 @@
 				{/if}
 			</div>
 
+			{#if detectionsSlow}
+				<p class="text-subtle-2 text-xs italic">This request is taking a long time to complete.</p>
+			{/if}
+
 			<Queries
 				queries={[propertiesQuery, captureAllQuery]}
 				contentCx="p-4 h-14"
 			>
+				{#if detectionsSlow}
+					<p class="text-subtle-2 text-xs italic">
+						This request is taking a long time to complete.
+					</p>
+				{/if}
 				{#if captureAllQuery.data}
 					<Image
 						data={captureAllQuery.data}
@@ -213,11 +229,20 @@
 				/>
 			</div>
 
+			{#if showObjectPointClouds && objectPointCloudsSlow}
+				<p class="text-subtle-2 text-xs italic">This request is taking a long time to complete.</p>
+			{/if}
+
 			{#if showObjectPointClouds}
 				<Queries
 					queries={[getObjectPointCloudsQuery]}
 					contentCx="p-4 h-14"
 				>
+					{#if objectPointCloudsSlow.isSlow}
+						<p class="text-subtle-2 text-xs italic">
+							This request is taking a long time to complete.
+						</p>
+					{/if}
 					{#if getObjectPointCloudsQuery.data !== undefined}
 						<ObjectPointClouds objects={getObjectPointCloudsQuery.data} />
 					{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "license": "Apache-2.0",
   "type": "module",
   "files": [