@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/navigation/navigation.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+	import type { LngLat, Map as MaplLibreMap } from 'maplibre-gl'
+
+	import { Tab, TabsBar, ToggleButtons } from '@viamrobotics/prime-core'
+	import { GeoGeometry, navigationApi, NavigationClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+	import { PersistedState } from 'runed'
+
+	import ConnectionStatus from '../../connection-status.svelte'
+	import {
+		CenterControls,
+		MapLibre,
+		MapProviders,
+		NavigationControls,
+		SatelliteControls,
+	} from '../../maplibre'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+
+	import DirectionalMarker from './directional-marker.svelte'
+	import ObstaclesLegend from './obstacles/legend.svelte'
+	import Obstacles from './obstacles/obstacles.svelte'
+	import WaypointsLegend from './waypoints/legend.svelte'
+	import Waypoints from './waypoints/waypoints.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'navigation-view'
+	)
+
+	const client = createResourceClient(
+		NavigationClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const locationQuery = createResourceQuery(client, 'getLocation', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const waypointsQuery = createResourceQuery(client, 'getWayPoints', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const obstaclesQuery = createResourceQuery(client, 'getObstacles', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const getModeQuery = createResourceQuery(client, 'getMode', {
+		refetchInterval: 10_000,
+	})
+
+	const addWaypointMutation = createResourceMutation(client, 'addWayPoint')
+	const removeWaypointMutation = createResourceMutation(client, 'removeWayPoint')
+	const setModeMutation = createResourceMutation(client, 'setMode')
+
+	/**
+	 * Explore mode is hidden due to being slated for removal.
+	 * Do not enable it, Rand's well-being and happiness are at stake.
+	 */
+	//
+	const mode = $derived(
+		{
+			[navigationApi.Mode.UNSPECIFIED]: '',
+			[navigationApi.Mode.EXPLORE]: '',
+			[navigationApi.Mode.MANUAL]: 'Manual',
+			[navigationApi.Mode.WAYPOINT]: 'Waypoint',
+		}[getModeQuery.data ?? 0] ?? ''
+	)
+
+	const handleModeChange = async (event: CustomEvent<string>) => {
+		const nextMode =
+			{
+				'': navigationApi.Mode.UNSPECIFIED,
+				Manual: navigationApi.Mode.MANUAL,
+				Waypoint: navigationApi.Mode.WAYPOINT,
+			}[event.detail] ?? navigationApi.Mode.UNSPECIFIED
+
+		await setModeMutation.mutateAsync([nextMode])
+		await getModeQuery.refetch()
+	}
+
+	const waypoints = $derived(waypointsQuery.data ?? [])
+	const obstacles = $derived<GeoGeometry[]>(
+		(obstaclesQuery.data ?? []).map((obstacle, index) => ({
+			location: obstacle.location,
+			geometries: obstacle.geometries.map((geometry) => ({
+				center: geometry.center,
+				geometryType: geometry.geometryType,
+				label: geometry.label === '' ? `Obstacle ${(index + 1).toString()}` : geometry.label,
+			})),
+		}))
+	)
+
+	const tab = new PersistedState<'obstacles' | 'waypoints'>(
+		'navigation-service-test-card-tab',
+		'obstacles'
+	)
+	let view = $state<'2D' | '3D'>('2D')
+	let hovered = $state<string | null>(null)
+
+	const handleViewSelect = ({ detail }: CustomEvent<string>) => {
+		view = detail as '2D' | '3D'
+	}
+
+	const setHovered = (next?: string | null) => {
+		hovered = next ?? null
+	}
+
+	let map = $state.raw<MaplLibreMap>()
+
+	const addWayPoint = async (lngLat: LngLat) => {
+		const location = {
+			latitude: lngLat.lat,
+			longitude: lngLat.lng,
+		}
+
+		await addWaypointMutation.mutateAsync([location])
+		await waypointsQuery.refetch()
+	}
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex w-full justify-between p-4">
+			<RefetchController
+				{refetchInterval}
+				queries={[locationQuery, obstaclesQuery, waypointsQuery]}
+			/>
+
+			<div>
+				<label class="flex items-center gap-2 text-xs">
+					Mode
+					<ToggleButtons
+						options={['Manual', 'Waypoint']}
+						selected={mode}
+						on:input={handleModeChange}
+					/>
+				</label>
+			</div>
+		</div>
+
+		<div class="relative h-120 w-full items-stretch p-2 sm:flex">
+			<div class="w-full max-w-62.5 p-2">
+				<TabsBar variant="secondary">
+					<Tab
+						title="Obstacles"
+						selected={tab.current === 'obstacles'}
+						selectTab={() => (tab.current = 'obstacles')}
+					/>
+					<Tab
+						title="Waypoints"
+						selected={tab.current === 'waypoints'}
+						selectTab={() => (tab.current = 'waypoints')}
+					/>
+				</TabsBar>
+
+				<ul class="h-[calc(100%-32px)] overflow-auto">
+					{#if tab.current === 'obstacles'}
+						<ObstaclesLegend
+							{map}
+							{hovered}
+							{obstacles}
+							onEnter={setHovered}
+							onLeave={setHovered}
+						/>
+					{:else if tab.current === 'waypoints'}
+						<WaypointsLegend
+							{map}
+							{hovered}
+							{waypoints}
+							onEnter={setHovered}
+							onLeave={setHovered}
+							onRemove={async (id) => {
+								await removeWaypointMutation.mutateAsync([id])
+								await waypointsQuery.refetch()
+							}}
+						/>
+					{/if}
+				</ul>
+			</div>
+
+			<MapLibre
+				class="relative grow"
+				maxPitch={view === '3D' ? 60 : 0}
+				mapProvider={MapProviders.googleMaps}
+				mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
+				bind:map
+			>
+				<NavigationControls showZoom={false} />
+
+				<div class="absolute top-5 right-14 z-10 flex items-center gap-2">
+					<ToggleButtons
+						options={['2D', '3D']}
+						selected={view}
+						on:input={handleViewSelect}
+					/>
+					<SatelliteControls />
+					<CenterControls />
+				</div>
+
+				{#if locationQuery.data}
+					<DirectionalMarker position={locationQuery.data} />
+				{/if}
+
+				<Waypoints
+					{waypoints}
+					{addWayPoint}
+					tab={tab.current ?? 'obstacles'}
+					{hovered}
+				/>
+
+				{#snippet layer()}
+					<Obstacles
+						{obstacles}
+						{hovered}
+						{setHovered}
+						{view}
+					/>
+				{/snippet}
+			</MapLibre>
+		</div>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/navigation/navigation.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const Navigation: import("svelte").Component<Props, {}, "">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

package/dist/components/widgets/navigation/obstacles/__tests__/__fixtures__/obstacles.d.ts

@@ -0,0 +1,2 @@
+import type { GeoGeometry } from '@viamrobotics/sdk';
+export declare const obstacles: GeoGeometry[];

package/dist/components/widgets/navigation/obstacles/__tests__/__fixtures__/obstacles.js

@@ -0,0 +1,56 @@
+export const obstacles = [
+    {
+        location: { latitude: 1, longitude: 2 },
+        geometries: [
+            {
+                center: { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 },
+                geometryType: {
+                    case: 'sphere',
+                    value: {
+                        radiusMm: 2000,
+                    },
+                },
+                label: 'sphere',
+            },
+        ],
+    },
+    {
+        location: { latitude: 3, longitude: 4 },
+        geometries: [
+            {
+                center: { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 },
+                geometryType: {
+                    case: 'capsule',
+                    value: { radiusMm: 500, lengthMm: 5000 },
+                },
+                label: 'capsule',
+            },
+        ],
+    },
+    {
+        location: { latitude: 5, longitude: 6 },
+        geometries: [
+            {
+                center: { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 },
+                geometryType: {
+                    case: 'box',
+                    value: { dimsMm: { x: 50_000, y: 50_000, z: 50_000 } },
+                },
+                label: 'box',
+            },
+        ],
+    },
+    {
+        location: { latitude: 7, longitude: 8 },
+        geometries: [
+            {
+                center: { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 },
+                geometryType: {
+                    case: 'capsule',
+                    value: { radiusMm: 50_000, lengthMm: 300_000 },
+                },
+                label: 'myCamera_transientObstacle',
+            },
+        ],
+    },
+];

package/dist/components/widgets/navigation/obstacles/color.d.ts

@@ -0,0 +1 @@
+export declare const getColor: (hoveredLabel: string | null, label: string) => string;

package/dist/components/widgets/navigation/obstacles/color.js

@@ -0,0 +1,10 @@
+import { theme } from '@viamrobotics/prime-core/theme';
+export const getColor = (hoveredLabel, label) => {
+    if (hoveredLabel === label) {
+        return theme.extend.colors['solar-power'];
+    }
+    else if (label.includes('transient')) {
+        return theme.extend.colors.hologram;
+    }
+    return theme.extend.colors.cyberpunk;
+};

package/dist/components/widgets/navigation/obstacles/legend.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { GeoGeometry, Geometry } from '@viamrobotics/sdk'
+
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
+	import { LngLat, LngLatBounds, Map } from 'maplibre-gl'
+
+	import { getColor } from './color'
+
+	interface Props {
+		map?: Map | undefined
+		obstacles: GeoGeometry[]
+		hovered: string | null
+		onEnter: (id: string) => void
+		onLeave: () => void
+	}
+
+	const { map, obstacles, hovered, onEnter, onLeave }: Props = $props()
+
+	const getBoundingRadius = (geometry: Geometry) => {
+		switch (geometry.geometryType.case) {
+			case 'box': {
+				if (geometry.geometryType.value.dimsMm) {
+					const { x, y, z } = geometry.geometryType.value.dimsMm
+					return (Math.max(x, y, z) / 1000) * 1.1
+				}
+				break
+			}
+			case 'sphere': {
+				return (geometry.geometryType.value.radiusMm / 1000) * 1.1
+			}
+			case 'capsule': {
+				return (geometry.geometryType.value.lengthMm / 1000) * 1.1
+			}
+		}
+
+		return 0 as never
+	}
+
+	const panToGeometry = (obstacle: GeoGeometry, geometry: Geometry) => {
+		if (!obstacle.location) {
+			return
+		}
+
+		const lngLat = new LngLat(obstacle.location.longitude, obstacle.location.latitude)
+
+		const radius = getBoundingRadius(geometry)
+		const bounds = LngLatBounds.fromLngLat(lngLat, radius)
+
+		map?.fitBounds(bounds, {
+			padding: 100,
+			duration: 800,
+			curve: 0.1,
+		})
+	}
+</script>
+
+{#each obstacles as obstacle, i (i)}
+	{#if obstacle.location}
+		{#each obstacle.geometries as geometry, j (j)}
+			{@const th = geometry.center?.theta ?? 0}
+			<li
+				class="group border-b-medium border-b py-2 pl-2 last:border-b-0"
+				class:bg-light={hovered === geometry.label}
+				onmouseenter={() => onEnter(geometry.label)}
+				onmouseleave={() => onLeave()}
+			>
+				<div class="flex items-center justify-between gap-1.5">
+					<small class="max-w-[66%] overflow-hidden text-sm text-ellipsis">
+						{geometry.label}
+					</small>
+
+					<div class="flex gap-1">
+						<Tooltip let:tooltipID>
+							<IconButton
+								aria-describedby={tooltipID}
+								icon="image-filter-center-focus"
+								label="Focus {geometry.label}"
+								on:click={(event) => {
+									event.stopPropagation()
+									panToGeometry(obstacle, geometry)
+								}}
+							/>
+
+							<p slot="description">
+								{obstacle.location.latitude}, {obstacle.location.longitude}
+							</p>
+						</Tooltip>
+
+						<Tooltip let:tooltipID>
+							<div
+								aria-describedby={tooltipID}
+								class="m-2 h-3.5 w-3.5"
+								style:background-color={getColor(null, geometry.label)}
+							></div>
+
+							<p slot="description">
+								{geometry.label.includes('transient') ? 'transient' : 'static'}
+							</p>
+						</Tooltip>
+					</div>
+				</div>
+
+				<small class="text-subtle-2">
+					{#if geometry.geometryType.case === 'box' && geometry.geometryType.value.dimsMm}
+						{@const { x, y, z } = geometry.geometryType.value.dimsMm}
+						x: {x / 1000}m, y: {y / 1000}m, z: {z / 1000}m, θ: {th}deg
+					{:else if geometry.geometryType.case === 'sphere'}
+						r: {geometry.geometryType.value.radiusMm / 1000}m, θ: {th}deg
+					{:else if geometry.geometryType.case === 'capsule'}
+						r: {geometry.geometryType.value.radiusMm / 1000}m, l: {geometry.geometryType.value
+							.lengthMm / 1000}m, θ: {th}deg
+					{/if}
+				</small>
+			</li>
+		{/each}
+	{/if}
+{/each}

package/dist/components/widgets/navigation/obstacles/legend.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { GeoGeometry } from '@viamrobotics/sdk';
+import { Map } from 'maplibre-gl';
+interface Props {
+    map?: Map | undefined;
+    obstacles: GeoGeometry[];
+    hovered: string | null;
+    onEnter: (id: string) => void;
+    onLeave: () => void;
+}
+declare const Legend: import("svelte").Component<Props, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/components/widgets/navigation/obstacles/meshes.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { GeoGeometry } from '@viamrobotics/sdk'
+
+	import { T } from '@threlte/core'
+	import { CapsuleGeometry } from '@viamrobotics/motion-tools/lib'
+	import { type BufferGeometry, MathUtils } from 'three'
+
+	import { AxesHelper } from '../../../three'
+
+	import { getColor } from './color'
+
+	interface Props {
+		obstacles: GeoGeometry[]
+		hovered: string | null
+		setHovered: (_: string | null) => void
+		view: '2D' | '3D'
+	}
+
+	const { obstacles, hovered, setHovered, view }: Props = $props()
+
+	const oncreate = (ref: BufferGeometry) => {
+		ref.rotateX(-Math.PI / 2)
+	}
+</script>
+
+{#each obstacles as obstacle, i (i)}
+	{#if obstacle.location}
+		<T.Group
+			userData.lngLat={{
+				lng: obstacle.location.longitude,
+				lat: obstacle.location.latitude,
+			}}
+		>
+			{#each obstacle.geometries as geometry (geometry.label)}
+				<T.Mesh
+					position.x={(geometry.center?.x ?? 0) / 1000}
+					position.y={(geometry.center?.y ?? 0) / 1000}
+					position.z={(geometry.center?.z ?? 0) / 1000}
+					rotation.y={MathUtils.degToRad(geometry.center?.theta ?? 0)}
+					onpointerenter={() => setHovered(geometry.label)}
+					onpointerleave={() => setHovered(null)}
+				>
+					{#if geometry.geometryType.case === 'box' && geometry.geometryType.value.dimsMm}
+						{@const { x, y, z } = geometry.geometryType.value.dimsMm}
+
+						<AxesHelper
+							length={(Math.max(x, y, z) / 1000) * 1.25}
+							width={0.002}
+							depthTest={false}
+							renderOrder={1}
+						/>
+
+						{#if view === '3D'}
+							<T.BoxGeometry
+								args={[x / 1000, y / 1000, z / 1000]}
+								{oncreate}
+							/>
+						{:else}
+							<T.PlaneGeometry
+								args={[x / 1000, y / 1000]}
+								{oncreate}
+							/>
+						{/if}
+					{:else if geometry.geometryType.case === 'sphere'}
+						<AxesHelper
+							length={(geometry.geometryType.value.radiusMm / 1000) * 1.25}
+							width={0.002}
+							depthTest={false}
+							renderOrder={1}
+						/>
+
+						{#if view === '3D'}
+							<T.SphereGeometry
+								args={[geometry.geometryType.value.radiusMm / 1000]}
+								{oncreate}
+							/>
+						{:else}
+							<T.CircleGeometry
+								args={[geometry.geometryType.value.radiusMm / 1000]}
+								{oncreate}
+							/>
+						{/if}
+					{:else if geometry.geometryType.case === 'capsule'}
+						{@const { radiusMm, lengthMm } = geometry.geometryType.value}
+
+						<AxesHelper
+							length={Math.max(radiusMm, lengthMm) / 1000}
+							width={0.002}
+							depthTest={false}
+							renderOrder={1}
+						/>
+
+						<T
+							is={new CapsuleGeometry(radiusMm / 1000, lengthMm / 1000)}
+							{oncreate}
+						/>
+					{/if}
+
+					<T.MeshPhongMaterial color={getColor(hovered, geometry.label)} />
+				</T.Mesh>
+			{/each}
+		</T.Group>
+	{/if}
+{/each}

package/dist/components/widgets/navigation/obstacles/meshes.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { GeoGeometry } from '@viamrobotics/sdk';
+interface Props {
+    obstacles: GeoGeometry[];
+    hovered: string | null;
+    setHovered: (_: string | null) => void;
+    view: '2D' | '3D';
+}
+declare const Meshes: import("svelte").Component<Props, {}, "">;
+type Meshes = ReturnType<typeof Meshes>;
+export default Meshes;

package/dist/components/widgets/navigation/obstacles/obstacles.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { GeoGeometry } from '@viamrobotics/sdk'
+
+	import { Canvas } from '@threlte/core'
+
+	import Meshes from './meshes.svelte'
+	import Scene from './scene.svelte'
+
+	interface Props {
+		obstacles: GeoGeometry[]
+		hovered: string | null
+		setHovered: (_: string | null) => void
+		view: '2D' | '3D'
+	}
+
+	const { obstacles, hovered, setHovered, view }: Props = $props()
+</script>
+
+<div class="pointer-events-none absolute top-0 left-0 h-full w-full">
+	<Canvas autoRender={false}>
+		<Scene {view}>
+			<Meshes
+				{obstacles}
+				{hovered}
+				{setHovered}
+				{view}
+			/>
+		</Scene>
+	</Canvas>
+</div>

package/dist/components/widgets/navigation/obstacles/obstacles.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { GeoGeometry } from '@viamrobotics/sdk';
+interface Props {
+    obstacles: GeoGeometry[];
+    hovered: string | null;
+    setHovered: (_: string | null) => void;
+    view: '2D' | '3D';
+}
+declare const Obstacles: import("svelte").Component<Props, {}, "">;
+type Obstacles = ReturnType<typeof Obstacles>;
+export default Obstacles;

package/dist/components/widgets/navigation/obstacles/scene.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { T, useThrelte } from '@threlte/core'
+	import { interactivity } from '@threlte/extras'
+	import { Camera, type Intersection, Plane, Vector3 } from 'three'
+
+	import {
+		useMapLibre,
+		useMapLibreThreeRaycast,
+		useMapLibreThreeRenderer,
+	} from '../../../maplibre'
+
+	interface Props {
+		view: '2D' | '3D'
+		children?: import('svelte').Snippet
+	}
+
+	const { view, children }: Props = $props()
+
+	const { map } = useMapLibre()
+	const { scene, camera, renderer } = $state(useThrelte())
+
+	camera.set(new Camera())
+
+	const { pointer, compute } = useMapLibreThreeRaycast(camera)
+
+	interactivity({
+		target: map.getCanvas(),
+		filter: (hits: Intersection[]) => {
+			// Only return the first hit
+			return hits.slice(0, 1)
+		},
+		compute: (_, state) => {
+			state.pointer.update((vec2) => {
+				vec2.copy(pointer)
+				return vec2
+			})
+
+			compute(state.raycaster)
+		},
+	})
+
+	useMapLibreThreeRenderer(scene, camera, () => {
+		renderer.render(scene, camera.current)
+	})
+
+	const clippingPlane = new Plane(new Vector3(0, 1, 0), 0)
+
+	$effect.pre(() => {
+		renderer.clippingPlanes = view === '2D' ? [] : [clippingPlane]
+	})
+</script>
+
+<T.AmbientLight intensity={view === '2D' ? 2 : 1.5} />
+
+{#if view === '3D'}
+	<T.DirectionalLight />
+{/if}
+
+{@render children?.()}

package/dist/components/widgets/navigation/obstacles/scene.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    view: '2D' | '3D';
+    children?: import('svelte').Snippet;
+}
+declare const Scene: import("svelte").Component<Props, {}, "">;
+type Scene = ReturnType<typeof Scene>;
+export default Scene;

package/dist/components/widgets/navigation/waypoints/__tests__/__fixtures__/waypoints.d.ts

@@ -0,0 +1,7 @@
+export declare const waypoints: {
+    id: string;
+    location: {
+        latitude: number;
+        longitude: number;
+    };
+}[];