@viamrobotics/test-widgets 0.0.1

package/dist/components/navigation-map/lib/create-geometry.js

@@ -0,0 +1,31 @@
+import { ViamObject3D } from '@viamrobotics/three';
+export const createGeometry = (type, size = 5, rotation = 0) => {
+    const pose = new ViamObject3D();
+    pose.orientationVector.th = rotation;
+    switch (type) {
+        case 'box': {
+            return {
+                type,
+                length: size * 2,
+                width: size * 2,
+                height: size * 2,
+                pose,
+            };
+        }
+        case 'sphere': {
+            return {
+                type,
+                radius: size,
+                pose,
+            };
+        }
+        case 'capsule': {
+            return {
+                type,
+                radius: size / 2,
+                length: size,
+                pose,
+            };
+        }
+    }
+};

package/dist/components/navigation-map/lib/create-name.d.ts

@@ -0,0 +1 @@
+export declare const createName: (existingNames: string[], template: string, index: number) => string;

package/dist/components/navigation-map/lib/create-name.js

@@ -0,0 +1,9 @@
+export const createName = (existingNames, template, index) => {
+    let i = index;
+    let name = `${template} ${i}`;
+    while (existingNames.includes(name)) {
+        i += 1;
+        name = `${template} ${i}`;
+    }
+    return name;
+};

package/dist/components/navigation-map/lib/create-obstacle.d.ts

@@ -0,0 +1,3 @@
+import { LngLat } from 'maplibre-gl';
+import type { Obstacle, Shapes } from '../types';
+export declare const createObstacle: (name: string, lngLat: LngLat, type?: Shapes) => Obstacle;

package/dist/components/navigation-map/lib/create-obstacle.js

@@ -0,0 +1,12 @@
+import { theme } from '@viamrobotics/prime-core/theme';
+import { LngLat } from 'maplibre-gl';
+import { createGeometry } from './create-geometry';
+export const createObstacle = (name, lngLat, type = 'box') => {
+    return {
+        name,
+        location: new LngLat(lngLat.lng, lngLat.lat),
+        geometries: [createGeometry(type)],
+        label: 'static',
+        color: theme.extend.colors.cyberpunk,
+    };
+};

package/dist/components/navigation-map/plugins/compute-bounding.svelte.d.ts

@@ -0,0 +1 @@
+export declare const computeBoundingPlugin: () => void;

package/dist/components/navigation-map/plugins/compute-bounding.svelte.js

@@ -0,0 +1,33 @@
+import { injectPlugin } from '@threlte/core';
+import { omit } from 'lodash-es';
+import { BufferGeometry } from 'three';
+import { useNavigationMap } from '../use-navigation-map.svelte';
+export const computeBoundingPlugin = () => injectPlugin('computeBounding', ({ ref, props }) => {
+    const nav = useNavigationMap();
+    let currentRef = ref;
+    let currentProps = props;
+    if (!(currentRef instanceof BufferGeometry) || !currentProps.computeBounding) {
+        return;
+    }
+    const handleChange = () => {
+        currentRef.computeBoundingSphere();
+        const radius = currentRef.boundingSphere?.radius;
+        if (radius) {
+            nav.boundingRadius[currentProps.computeBounding] = radius;
+        }
+    };
+    return {
+        pluginProps: ['computeBounding'],
+        onRefChange(nextRef) {
+            currentRef = nextRef;
+            handleChange();
+            return () => {
+                nav.boundingRadius = omit(nav.boundingRadius, [currentProps.computeBounding]);
+            };
+        },
+        onPropsChange(nextProps) {
+            currentProps = nextProps;
+            handleChange();
+        },
+    };
+});

package/dist/components/navigation-map/plugins/interactivity.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Provides interactivity as described in @threlte/extras,
+ * but carries out necessary camera and screen-space transforms
+ * to be compatible with the map camera.
+ */
+export declare const interactivityPlugin: () => void;

package/dist/components/navigation-map/plugins/interactivity.js

@@ -0,0 +1,27 @@
+import { useThrelte } from '@threlte/core';
+import { interactivity } from '@threlte/extras';
+import { useMapLibre, useMapLibreThreeRaycast } from '../../maplibre';
+/**
+ * Provides interactivity as described in @threlte/extras,
+ * but carries out necessary camera and screen-space transforms
+ * to be compatible with the map camera.
+ */
+export const interactivityPlugin = () => {
+    const { camera } = useThrelte();
+    const { map } = useMapLibre();
+    const { pointer, compute } = useMapLibreThreeRaycast(camera);
+    interactivity({
+        target: map.getCanvas(),
+        filter: (hits) => {
+            // Only return the first hit
+            return hits.slice(0, 1);
+        },
+        compute: (_, state) => {
+            state.pointer.update((vec2) => {
+                vec2.copy(pointer);
+                return vec2;
+            });
+            compute(state.raycaster);
+        },
+    });
+};

package/dist/components/navigation-map/types.d.ts

@@ -0,0 +1,37 @@
+import type { ViamObject3D } from '@viamrobotics/three';
+import type { LngLat } from 'maplibre-gl';
+interface BaseGeometry {
+    pose: ViamObject3D;
+}
+export declare const NavigationTab: {
+    readonly Waypoints: "Waypoints";
+    readonly Obstacles: "Obstacles";
+    readonly Attributes: "Attributes";
+};
+export type NavigationTabType = (typeof NavigationTab)[keyof typeof NavigationTab];
+export type Shapes = 'box' | 'sphere' | 'capsule';
+export type CapsuleGeometry = BaseGeometry & {
+    type: 'capsule';
+    radius: number;
+    length: number;
+};
+export type SphereGeometry = BaseGeometry & {
+    type: 'sphere';
+    radius: number;
+};
+export type BoxGeometry = BaseGeometry & {
+    type: 'box';
+    length: number;
+    width: number;
+    height: number;
+};
+export type Geometry = BoxGeometry | SphereGeometry | CapsuleGeometry;
+export interface Obstacle {
+    name: string;
+    location: LngLat;
+    geometries: Geometry[];
+    color: string;
+    label: string;
+}
+export type Path = LngLat[];
+export {};

package/dist/components/navigation-map/types.js

@@ -0,0 +1,5 @@
+export const NavigationTab = {
+    Waypoints: 'Waypoints',
+    Obstacles: 'Obstacles',
+    Attributes: 'Attributes',
+};

package/dist/components/navigation-map/use-navigation-map.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Waypoint } from '../maplibre/types';
+import type { NavigationTabType, Obstacle, Path } from './types';
+export type Environments = 'debug' | 'configure';
+export interface NavigationMapContext {
+    tab: NavigationTabType;
+    tabs: NavigationTabType[];
+    waypoints: Waypoint[];
+    obstacles: Obstacle[];
+    paths: Path[];
+    environment: Environments;
+    hovered: string | undefined;
+    selected: string | undefined;
+    view: '2D' | '3D';
+    boundingRadius: Record<string, number>;
+}
+export declare const provideNavigationMapContext: (tab: () => NavigationTabType, tabs: () => NavigationTabType[], waypoints: () => Waypoint[], paths: () => Path[], environment: () => Environments) => NavigationMapContext;
+export declare const useNavigationMap: () => NavigationMapContext;

package/dist/components/navigation-map/use-navigation-map.svelte.js

@@ -0,0 +1,69 @@
+import { getContext, setContext } from 'svelte';
+const CONTEXT_KEY = 'navigation-map-context';
+export const provideNavigationMapContext = (tab, tabs, waypoints, paths, environment) => {
+    let obstacles = $state([]);
+    let currentTab = $state(tab());
+    let hovered = $state();
+    let selected = $state();
+    let view = $state('2D');
+    let boundingRadius = $state({});
+    const context = {
+        get tab() {
+            return currentTab;
+        },
+        set tab(value) {
+            currentTab = value;
+        },
+        get tabs() {
+            return tabs();
+        },
+        get waypoints() {
+            return waypoints();
+        },
+        get paths() {
+            return paths();
+        },
+        get environment() {
+            return environment();
+        },
+        get hovered() {
+            return hovered;
+        },
+        set hovered(value) {
+            hovered = value;
+        },
+        get selected() {
+            return selected;
+        },
+        set selected(value) {
+            selected = value;
+        },
+        get obstacles() {
+            return obstacles;
+        },
+        set obstacles(value) {
+            obstacles = value;
+        },
+        get view() {
+            return view;
+        },
+        set view(value) {
+            view = value;
+        },
+        get boundingRadius() {
+            return boundingRadius;
+        },
+        set boundingRadius(value) {
+            boundingRadius = value;
+        },
+    };
+    setContext(CONTEXT_KEY, context);
+    return context;
+};
+export const useNavigationMap = () => {
+    const context = getContext(CONTEXT_KEY);
+    if (!context) {
+        throw new Error('NavigationMapContext not found');
+    }
+    return context;
+};

package/dist/components/progress.svelte

@@ -0,0 +1,4 @@
+<div
+	role="progressbar"
+	class="bg-medium h-full w-full animate-pulse"
+></div>

package/dist/components/progress.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Progress;
+type Progress = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Progress: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/queries.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { ResizeDetail } from '@svelte-put/resize'
+	import type { QueryObserverResult } from '@tanstack/svelte-query'
+	import type { Snippet } from 'svelte'
+
+	import { resize } from '@svelte-put/resize'
+
+	import ContentRect from './content-rect.svelte'
+	import ErrorDisplay from './error.svelte'
+	import Progress from './progress.svelte'
+
+	interface Props {
+		queries: QueryObserverResult[]
+		contentCx?: string
+		children?: Snippet<[{ data: unknown[] }]>
+	}
+
+	const { queries, contentCx = '', children }: Props = $props()
+
+	let contentRect = $state<DOMRect>()
+	const handleResize = (event: CustomEvent<ResizeDetail>) => {
+		contentRect = event.detail.entry.contentRect
+	}
+
+	let errors = $state.raw<Error[]>([])
+	let data = $state.raw<unknown[]>([])
+
+	// Errors are null during loading, so keep the latest errors during polling.
+	$effect.pre(() => {
+		const nextErrors = queries.map((query) => query.error).filter((error) => error !== null)
+		if (nextErrors.length > 0) {
+			errors = nextErrors
+		} else if (queries.every((query) => query.isSuccess)) {
+			errors = []
+		}
+	})
+
+	// Data is undefined during loading, so keep the latest data during polling.
+	$effect.pre(() => {
+		const nextData = queries.map((query) => query.data)
+		if (nextData.length > 0) {
+			data = nextData
+		}
+	})
+
+	const isLoading = $derived(queries.some((query) => query.isLoading))
+</script>
+
+{#if errors.length > 0}
+	<ContentRect
+		{contentRect}
+		cx={contentCx}
+	>
+		{#each errors as error (error)}
+			<ErrorDisplay lastError={error} />
+		{/each}
+	</ContentRect>
+{:else if isLoading}
+	<ContentRect
+		{contentRect}
+		cx={contentCx}
+	>
+		<Progress />
+	</ContentRect>
+{:else}
+	<div
+		class="w-full"
+		use:resize
+		onresized={handleResize}
+	>
+		{@render children?.({ data })}
+	</div>
+{/if}

package/dist/components/queries.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+import type { Snippet } from 'svelte';
+interface Props {
+    queries: QueryObserverResult[];
+    contentCx?: string;
+    children?: Snippet<[{
+        data: unknown[];
+    }]>;
+}
+declare const Queries: import("svelte").Component<Props, {}, "">;
+type Queries = ReturnType<typeof Queries>;
+export default Queries;

package/dist/components/query.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { QueryObserverResult } from '@tanstack/svelte-query'
+	import type { Snippet } from 'svelte'
+
+	import Queries from './queries.svelte'
+
+	interface Props {
+		query: QueryObserverResult
+		contentCx?: string
+		children?: Snippet
+	}
+
+	const { query, contentCx = '', children }: Props = $props()
+</script>
+
+<Queries
+	queries={[query]}
+	{contentCx}
+>
+	{@render children?.()}
+</Queries>

package/dist/components/query.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+import type { Snippet } from 'svelte';
+interface Props {
+    query: QueryObserverResult;
+    contentCx?: string;
+    children?: Snippet;
+}
+declare const Query: import("svelte").Component<Props, {}, "">;
+type Query = ReturnType<typeof Query>;
+export default Query;

package/dist/components/readings-list.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
+	import { truncate } from 'lodash-es'
+
+	import { sortObjectKeys } from '../sort'
+
+	interface Props {
+		data: Record<string, unknown>
+	}
+
+	const { data }: Props = $props()
+
+	const sortedData = $derived(Object.entries(sortObjectKeys(data)))
+
+	// TODO(zp) Bring the CopyToClipboard component into the svelte sdk or prime-core so that we can use it here
+	const copyToClipboard = async () => {
+		try {
+			const readingsStr = JSON.stringify(data, null, 2)
+			await globalThis.navigator.clipboard.writeText(readingsStr)
+		} catch (error) {
+			console.error('failed to copy reading to clipboard', error)
+		}
+	}
+</script>
+
+{#if sortedData.length === 0}
+	<p class="text-subtle-2 text-xs">No readings currently available</p>
+{:else}
+	<div class="text-xs">
+		<div class="text-gray-6 absolute top-1.5 right-1.5">
+			<Tooltip let:tooltipID>
+				<IconButton
+					aria-describedby={tooltipID}
+					icon="content-copy"
+					label="Copy JSON"
+					on:click={copyToClipboard}
+				/>
+
+				<div slot="description">Copy JSON</div>
+			</Tooltip>
+		</div>
+		<dl class="font-roboto-mono flex flex-col gap-y-2">
+			{#each sortedData as [key, value] (key)}
+				{@const valueString = JSON.stringify(value, null, 2)}
+				<div class="flex flex-row">
+					<dt
+						class="text-default w-50 min-w-50 truncate pr-2 font-medium"
+						title={key}
+					>
+						{key}
+					</dt>
+					<dd class="text-subtle-1 min-w-50">
+						{#if typeof value === 'object'}
+							<div class="border-light bg-extralight min-w-50 border px-3 py-2">
+								<pre class="whitespace-pre-wrap">
+                  <code>{valueString}</code>
+                </pre>
+							</div>
+						{:else if typeof value === 'string' && value.startsWith('data:image/')}
+							<img
+								class="max-h-80"
+								src={value}
+								alt={key}
+							/>
+						{:else}
+							{truncate(valueString, { length: 300 })}
+						{/if}
+					</dd>
+				</div>
+			{/each}
+		</dl>
+	</div>
+{/if}

package/dist/components/readings-list.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    data: Record<string, unknown>;
+}
+declare const ReadingsList: import("svelte").Component<Props, {}, "">;
+type ReadingsList = ReturnType<typeof ReadingsList>;
+export default ReadingsList;

package/dist/components/refetch-controller.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { QueryObserverResult } from '@tanstack/svelte-query'
+	import type { PersistedState } from 'runed'
+
+	import { IconButton, Select } from '@viamrobotics/prime-core'
+
+	import {
+		type RefetchInterval,
+		RefetchIntervals,
+		type RefetchRate,
+		RefetchRates,
+		RefetchRateToInterval,
+	} from './refetch-interval-store.svelte.js'
+
+	interface Props {
+		refetchInterval: PersistedState<RefetchInterval>
+		queries: QueryObserverResult[]
+		refetchNotifyDurationMs?: number
+		allowLive?: boolean
+	}
+
+	const {
+		refetchInterval,
+		queries,
+		refetchNotifyDurationMs = 500,
+		allowLive = false,
+	}: Props = $props()
+
+	let selectedOption = $derived(
+		RefetchRateToInterval.find(([, interval]) => interval === refetchInterval.current)?.[0] ??
+			RefetchRates.ONE_SEC
+	)
+
+	const selectOption = (selected: string) => {
+		selectedOption = selected as RefetchRate
+		const interval =
+			RefetchRateToInterval.find(([rate]) => rate === selectedOption)?.[1] ??
+			RefetchIntervals.ONE_SEC
+		refetchInterval.current = interval
+	}
+
+	let refetchState = $state<'idle' | 'success' | 'refetching'>('idle')
+	const manualIconState = $derived(
+		{
+			idle: { name: 'refresh' as const },
+			success: { name: 'check' as const },
+			refetching: { progress: 'indeterminate' as const },
+		}[refetchState]
+	)
+
+	let refetchingStateTimeout: number | undefined
+
+	const refetchQueries = async () => {
+		// Clear the timeout to prevent races if refetchQueries is called during a refetch
+		window.clearTimeout(refetchingStateTimeout)
+
+		// This is in a timeout to prevent icon-flashing on very quick queries
+		refetchingStateTimeout = window.setTimeout(() => {
+			refetchState = 'refetching'
+		}, 250)
+		const refetchCalls = queries.map(async (query) => query.refetch())
+		await Promise.all(refetchCalls)
+		clearTimeout(refetchingStateTimeout)
+		refetchState = 'success'
+		resetToIdleEventually()
+	}
+
+	let stateNotifyTimeout: number | undefined
+
+	const resetToIdleEventually = () => {
+		window.clearTimeout(stateNotifyTimeout)
+		stateNotifyTimeout = window.setTimeout(() => {
+			refetchState = 'idle'
+		}, refetchNotifyDurationMs)
+	}
+
+	const onChange = (event: Event) => {
+		selectOption((event.target as HTMLSelectElement).value)
+	}
+
+	const refetchOptions = $derived(
+		allowLive
+			? Object.values(RefetchRates)
+			: Object.values(RefetchRates).filter((value) => value !== RefetchRates.LIVE)
+	)
+
+	$effect(() => {
+		return () => {
+			globalThis.clearTimeout(stateNotifyTimeout)
+		}
+	})
+</script>
+
+<div class="text-default flex flex-row gap-2 text-xs">
+	<div class="w-50">
+		<Select on:change={onChange}>
+			{#each refetchOptions as option (option)}
+				<option selected={selectedOption === option}>{option}</option>
+			{/each}
+		</Select>
+	</div>
+	{#if selectedOption === RefetchRates.MANUAL}
+		<IconButton
+			icon={manualIconState.name ?? 'refresh'}
+			progress={'progress' in manualIconState ? 'indeterminate' : undefined}
+			label="refetch"
+			variant="secondary"
+			cx="border-light border"
+			on:click={refetchQueries}
+		/>
+	{:else}
+		<IconButton
+			icon="pause"
+			label="pause"
+			variant="secondary"
+			cx="border-light border"
+			on:click={() => {
+				selectOption(RefetchRates.MANUAL)
+			}}
+		/>
+	{/if}
+</div>

package/dist/components/refetch-controller.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+import type { PersistedState } from 'runed';
+import { type RefetchInterval } from './refetch-interval-store.svelte.ts';
+interface Props {
+    refetchInterval: PersistedState<RefetchInterval>;
+    queries: QueryObserverResult[];
+    refetchNotifyDurationMs?: number;
+    allowLive?: boolean;
+}
+declare const RefetchController: import("svelte").Component<Props, {}, "">;
+type RefetchController = ReturnType<typeof RefetchController>;
+export default RefetchController;

package/dist/components/refetch-interval-store.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ValueOf } from 'type-fest';
+import { PersistedState } from 'runed';
+export declare const RefetchRates: {
+    readonly LIVE: "Live";
+    readonly ONE_SEC: "Refresh every second";
+    readonly FIVE_SEC: "Refresh every 5 seconds";
+    readonly MANUAL: "Manual refresh";
+};
+export declare const RefetchIntervals: {
+    readonly LIVE: 33.3333;
+    readonly ONE_SEC: 1000;
+    readonly FIVE_SEC: 5000;
+    readonly MANUAL: false;
+};
+export type RefetchRate = ValueOf<typeof RefetchRates>;
+export type RefetchInterval = ValueOf<typeof RefetchIntervals>;
+export declare const RefetchRateToInterval: ["Live" | "Refresh every second" | "Refresh every 5 seconds" | "Manual refresh", false | 1000 | 33.3333 | 5000][];
+export declare const createRefetchIntervalStore: (partID: () => string, resourceName: () => string, scope: string, defaultInterval?: RefetchInterval) => PersistedState<RefetchInterval>;