@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,23 @@
+export const waypoints = [
+    {
+        id: '66c60ce541f43f5eaabc0548',
+        location: {
+            latitude: 1,
+            longitude: 2,
+        },
+    },
+    {
+        id: '66c60ce541f43f5eaabc0549',
+        location: {
+            latitude: 3,
+            longitude: 4,
+        },
+    },
+    {
+        id: '66c60ce641f43f5eaabc054a',
+        location: {
+            latitude: 5,
+            longitude: 6,
+        },
+    },
+];

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Waypoint } from '@viamrobotics/sdk'
+	import type { Map } from 'maplibre-gl'
+
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
+
+	interface Props {
+		map?: Map | undefined
+		waypoints: Waypoint[]
+		hovered: string | null
+		onEnter: (id: string) => void
+		onLeave: () => void
+		onRemove: (id: string) => void
+	}
+
+	const { map, waypoints, hovered, onEnter, onLeave, onRemove }: Props = $props()
+
+	const flyTo = (lng: number, lat: number) => {
+		map?.flyTo({
+			center: [lng, lat],
+			zoom: 20,
+			speed: 2,
+		})
+	}
+</script>
+
+{#each waypoints.filter((waypoint) => waypoint.location) as waypoint, index (waypoint.id)}
+	<li
+		class="group border-b-medium flex items-center justify-between border-b p-2 pl-2 last:border-b-0"
+		class:bg-light={hovered === waypoint.id}
+		onpointerenter={() => onEnter(waypoint.id)}
+		onpointerleave={() => onLeave()}
+	>
+		<small class="max-w-[66%] overflow-hidden text-sm text-ellipsis">
+			Waypoint {index + 1}
+		</small>
+
+		<div class="flex gap-1">
+			<Tooltip let:tooltipID>
+				<IconButton
+					aria-describedby={tooltipID}
+					icon="image-filter-center-focus"
+					label="Focus waypoint {index + 1}"
+					on:click={(event) => {
+						if (!waypoint.location) {
+							return
+						}
+
+						event.stopPropagation()
+
+						flyTo(waypoint.location.longitude, waypoint.location.latitude)
+					}}
+				/>
+
+				<p slot="description">
+					{waypoint.location?.latitude.toString()}, {waypoint.location?.longitude.toString()}
+				</p>
+			</Tooltip>
+
+			<IconButton
+				icon="trash-can-outline"
+				label="Remove waypoint {index + 1}"
+				on:click={() => onRemove(waypoint.id)}
+			/>
+		</div>
+	</li>
+{/each}

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

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

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Waypoint as WaypointType } from '@viamrobotics/sdk'
+	import type { LngLat } from 'maplibre-gl'
+
+	import { theme } from '@viamrobotics/prime-core/theme'
+
+	import { MapLibreMarker, useMapLibreEvent } from '../../../maplibre'
+
+	interface Props {
+		waypoints: WaypointType[]
+		addWayPoint: (_: LngLat) => void
+		tab: 'obstacles' | 'waypoints'
+		hovered: string | null
+	}
+
+	const { waypoints, addWayPoint, tab, hovered }: Props = $props()
+
+	useMapLibreEvent('click', (event) => {
+		if (tab === 'waypoints') {
+			addWayPoint(event.lngLat)
+		}
+	})
+</script>
+
+{#each waypoints as waypoint (waypoint.id)}
+	{#if waypoint.location}
+		<MapLibreMarker
+			lat={waypoint.location.latitude}
+			lng={waypoint.location.longitude}
+			scale={hovered === waypoint.id ? 1.25 : 1}
+			color={hovered === waypoint.id ? theme.extend.colors['solar-power'] : ''}
+		/>
+	{/if}
+{/each}

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

@@ -0,0 +1,11 @@
+import type { Waypoint as WaypointType } from '@viamrobotics/sdk';
+import type { LngLat } from 'maplibre-gl';
+interface Props {
+    waypoints: WaypointType[];
+    addWayPoint: (_: LngLat) => void;
+    tab: 'obstacles' | 'waypoints';
+    hovered: string | null;
+}
+declare const Waypoints: import("svelte").Component<Props, {}, "">;
+type Waypoints = ReturnType<typeof Waypoints>;
+export default Waypoints;

package/dist/components/widgets/operations-and-sessions/operations-and-sessions.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Icon } from '@viamrobotics/prime-core'
+	import { createRobotMutation, createRobotQuery, useRobotClient } from '@viamrobotics/svelte-sdk'
+	import { slide } from 'svelte/transition'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	import OperationsTable from './operations-table.svelte'
+	import RttPill from './rtt-pill.svelte'
+	import SessionsTable from './sessions-table.svelte'
+
+	interface Props {
+		partID: string
+	}
+
+	const { partID }: Props = $props()
+
+	let isCollapsed = $state(true)
+
+	const client = useRobotClient(() => partID)
+	const operationsQuery = createRobotQuery(client, 'getOperations', () => ({
+		refetchInterval: 1000,
+	}))
+	const cancelOperationMutation = createRobotMutation(client, 'cancelOperation')
+	// only enabled if not collapsed
+	const sessionsQuery = createRobotQuery(client, 'getSessions', () => ({
+		refetchInterval: 1000,
+		enabled: !isCollapsed,
+	}))
+
+	let rtt = $state(0)
+	let then = Date.now()
+
+	$effect.pre(() => {
+		if (operationsQuery.isRefetching) {
+			then = Date.now()
+		} else if (operationsQuery.isSuccess) {
+			rtt = Date.now() - then
+		}
+	})
+
+	const operations = $derived(operationsQuery.data ?? [])
+
+	const cancelOperation = (id: string) => cancelOperationMutation.mutate([id])
+
+	const id = $props.id()
+	const collapseID = `${id}-ops-sessions-collapse`
+	const headingID = `${id}-ops-sessions-heading`
+</script>
+
+<!-- z-10 is enough to ensure it is above the 'maplibre Google Maps' floating element-->
+<section
+	class="fixed bottom-0 z-10 w-full bg-white"
+	aria-labelledby={headingID}
+>
+	<header>
+		<button
+			class="group border-light bg-extralight flex h-8 w-full items-center gap-2 border-y px-2 py-[11px]"
+			aria-controls={collapseID}
+			aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} Operations and Sessions`}
+			aria-expanded={!isCollapsed}
+			onclick={() => (isCollapsed = !isCollapsed)}
+		>
+			<Icon
+				cx="text-gray-6"
+				name={isCollapsed ? 'chevron-up' : 'chevron-down'}
+			/>
+			<h3
+				id={headingID}
+				class="font-roboto-mono text-subtle-1 text-xs tracking-wider uppercase"
+			>
+				Operations and Sessions
+			</h3>
+			{#if operations}
+				<spacer class="w-4"></spacer>
+				<span class="font-roboto-mono text-subtle-2 text-xs">RTT</span>
+				<RttPill {rtt} />
+			{/if}
+		</button>
+	</header>
+
+	{#if !isCollapsed}
+		<!-- 
+  NOTE(zp, 2024-09-04) height is calculated here using 30vh because the parent (section) is the child of a flexbox and so it has to use min-h in order to get the right height (not h))
+    but transition:slide and transition-[height] dont work without a height change (not a min-height change) so I can't put it on the section 
+    (transition-[min-height] doesn't work).
+   -->
+		<div
+			transition:slide={{ duration: 250 }}
+			class="flex h-[calc(30vh-32px)] flex-col gap-4 overflow-y-auto px-4 pt-3 pb-4"
+		>
+			<div class="flex h-max flex-col gap-2">
+				<span class="text-default text-sm font-semibold">Operations</span>
+				{#if operations}
+					<OperationsTable
+						{operations}
+						{cancelOperation}
+					/>
+				{/if}
+				<ErrorDisplay lastError={operationsQuery.error} />
+				<ErrorDisplay lastError={cancelOperationMutation.error} />
+			</div>
+			<div class="flex h-max flex-col gap-2">
+				<span class="text-default text-sm font-semibold">Sessions</span>
+				{#if sessionsQuery.data}
+					<SessionsTable
+						sessions={sessionsQuery.data}
+						ourSessionId={client.current?.sessionId}
+					/>
+				{/if}
+				<ErrorDisplay lastError={sessionsQuery.error} />
+			</div>
+		</div>
+	{/if}
+</section>

package/dist/components/widgets/operations-and-sessions/operations-and-sessions.svelte.d.ts

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

package/dist/components/widgets/operations-and-sessions/operations-table.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { Button, Tooltip } from '@viamrobotics/prime-core'
+	import { robotApi } from '@viamrobotics/sdk'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		operations: robotApi.Operation[]
+		cancelOperation: (id: string) => void
+	}
+
+	const { operations, cancelOperation }: Props = $props()
+
+	const getElapsedTimeMs = (startedAt: { seconds: bigint; nanos: number } | undefined): number => {
+		const now = new Date()
+		const started = startedAt
+			? new Date(Number(startedAt.seconds) * 1000 + startedAt.nanos / 1_000_000)
+			: new Date()
+		return now.getTime() - started.getTime()
+	}
+
+	// sort operations by elapsed time in descending order
+	// so that short-lived operations dont result in excessive element-shifting
+	const formattedOperations = $derived(
+		operations
+			.map((operation) => ({
+				...operation,
+				elapsedTime: getElapsedTimeMs(operation.started),
+			}))
+			.toSorted((a, b) => b.elapsedTime - a.elapsedTime)
+	)
+</script>
+
+{#if formattedOperations.length === 0}
+	<p class="text-subtle-2 text-xs">No operations currently available</p>
+{:else}
+	<table class="w-full table-fixed">
+		<thead>
+			<tr class="bg-light text-subtle-1 border text-left text-xs">
+				<th class="w-1/4 p-2 font-normal">ID</th>
+				<th class="w-1/4 p-2 font-normal">Session</th>
+				<th class="w-1/4 p-2 font-normal">Method</th>
+				<th class="w-1/6 p-2 font-normal">Elapsed Time</th>
+				<th class="w-16"></th>
+			</tr>
+		</thead>
+		<tbody class="text-xs">
+			{#each formattedOperations as operation (operation.id)}
+				<tr class="border border-b text-left">
+					<td
+						class="truncate p-2"
+						title={operation.id}
+						>{operation.id}
+					</td>
+					<td
+						class="truncate p-2"
+						title={operation.sessionId}
+						>{operation.sessionId}
+					</td>
+					<td
+						class="truncate p-2"
+						title={operation.method}
+						>{operation.method}
+					</td>
+					<td
+						class="truncate p-2"
+						title={`${formatNumeric(operation.elapsedTime, 0)} ms`}
+					>
+						{formatNumeric(operation.elapsedTime, 0)} ms
+					</td>
+					<td class="p-2">
+						<Tooltip hoverDelayMS={500}>
+							<Button onclick={() => cancelOperation(operation.id)}>Kill</Button>
+
+							<span slot="description"> Request cancellation of the operation. </span>
+						</Tooltip>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+{/if}

package/dist/components/widgets/operations-and-sessions/operations-table.svelte.d.ts

@@ -0,0 +1,8 @@
+import { robotApi } from '@viamrobotics/sdk';
+interface Props {
+    operations: robotApi.Operation[];
+    cancelOperation: (id: string) => void;
+}
+declare const OperationsTable: import("svelte").Component<Props, {}, "">;
+type OperationsTable = ReturnType<typeof OperationsTable>;
+export default OperationsTable;

package/dist/components/widgets/operations-and-sessions/rtt-pill.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Badge } from '@viamrobotics/prime-core'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		rtt: number
+	}
+
+	const { rtt }: Props = $props()
+
+	const getBadgeVariant = (currentRtt: number) => {
+		if (currentRtt < 50) {
+			return 'success'
+		}
+		if (currentRtt < 500) {
+			return 'warning'
+		}
+		return 'danger'
+	}
+</script>
+
+<Badge
+	label={`${formatNumeric(rtt, 0)} ms`}
+	variant={getBadgeVariant(rtt)}
+/>

package/dist/components/widgets/operations-and-sessions/rtt-pill.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    rtt: number;
+}
+declare const RttPill: import("svelte").Component<Props, {}, "">;
+type RttPill = ReturnType<typeof RttPill>;
+export default RttPill;

package/dist/components/widgets/operations-and-sessions/sessions-table.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { robotApi } from '@viamrobotics/sdk'
+
+	interface Props {
+		sessions: robotApi.Session[]
+		ourSessionId: string | undefined
+	}
+
+	const { sessions, ourSessionId }: Props = $props()
+
+	const sessionTypeToString = (type: robotApi.PeerConnectionType | undefined) => {
+		switch (type) {
+			case robotApi.PeerConnectionType.GRPC: {
+				return 'gRPC'
+			}
+			case robotApi.PeerConnectionType.WEBRTC: {
+				return 'WebRTC'
+			}
+			default: {
+				return 'Unknown'
+			}
+		}
+	}
+	// sort sessions by id (because the api returns them in a random order)
+	const flattenedSessions = $derived(
+		sessions
+			.map((session) => ({
+				id: session.id,
+				type: session.peerConnectionInfo?.type,
+				typeString: sessionTypeToString(session.peerConnectionInfo?.type),
+				remoteAddress: session.peerConnectionInfo?.remoteAddress,
+				localAddress: session.peerConnectionInfo?.localAddress,
+			}))
+			.toSorted((a, b) => a.id.localeCompare(b.id))
+	)
+</script>
+
+{#if flattenedSessions.length === 0}
+	<p class="text-subtle-2 text-xs">No sessions currently available</p>
+{:else}
+	<table class="w-full table-fixed">
+		<thead>
+			<tr class="bg-light text-subtle-1 border text-left text-xs">
+				<th class="w-1/4 p-2 font-normal">ID</th>
+				<th class="w-1/8 p-2 font-normal">Type</th>
+				<th class="w-1/4 p-2 font-normal">Remote Address</th>
+				<th class="w-1/4 p-2 font-normal">Local Address</th>
+			</tr>
+		</thead>
+		<tbody class="text-xs">
+			{#each flattenedSessions as session (session.id)}
+				<tr class="border border-b text-left">
+					<td
+						class="truncate p-2 text-left"
+						title={session.id}
+					>
+						{session.id}
+						{#if session.id === ourSessionId}
+							<div class="text-subtle-2 text-xs">(Ours)</div>
+						{/if}
+					</td>
+					<td class="truncate p-2">{session.typeString}</td>
+					<td
+						class="truncate p-2"
+						title={session.remoteAddress}
+						>{session.remoteAddress}
+					</td>
+					<td
+						class="truncate p-2"
+						title={session.localAddress}
+					>
+						{session.localAddress}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+{/if}

package/dist/components/widgets/operations-and-sessions/sessions-table.svelte.d.ts

@@ -0,0 +1,8 @@
+import { robotApi } from '@viamrobotics/sdk';
+interface Props {
+    sessions: robotApi.Session[];
+    ourSessionId: string | undefined;
+}
+declare const SessionsTable: import("svelte").Component<Props, {}, "">;
+type SessionsTable = ReturnType<typeof SessionsTable>;
+export default SessionsTable;

package/dist/components/widgets/pcd/__tests__/__fixtures__/pcd.d.ts

@@ -0,0 +1 @@
+export declare const pcd = "# .PCD v.7 - Point Cloud Data file format\nVERSION .7\nFIELDS x y z rgb\nSIZE 4 4 4 4\nTYPE F F F F\nCOUNT 1 1 1 1\nWIDTH 213\nHEIGHT 1\nVIEWPOINT 0 0 0 1 0 0 0\nPOINTS 213\nDATA ascii\n1 2 3 4.2108e+06";

package/dist/components/widgets/pcd/__tests__/__fixtures__/pcd.js

@@ -0,0 +1,12 @@
+export const pcd = `# .PCD v.7 - Point Cloud Data file format
+VERSION .7
+FIELDS x y z rgb
+SIZE 4 4 4 4
+TYPE F F F F
+COUNT 1 1 1 1
+WIDTH 213
+HEIGHT 1
+VIEWPOINT 0 0 0 1 0 0 0
+POINTS 213
+DATA ascii
+1 2 3 4.2108e+06`;

package/dist/components/widgets/pcd/download.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+
+	interface Props {
+		data: Uint8Array
+	}
+
+	const { data }: Props = $props()
+
+	const downloadRawData = () => {
+		const file = new File([data as BlobPart], 'pointcloud.pcd', {
+			type: 'pointcloud/pcd',
+		})
+		const url = URL.createObjectURL(file)
+
+		const link = document.createElement('a')
+		link.href = url
+		link.download = 'pointcloud.pcd'
+		link.click()
+
+		URL.revokeObjectURL(url)
+	}
+</script>
+
+<Button onclick={downloadRawData}>Download raw data</Button>

package/dist/components/widgets/pcd/download.svelte.d.ts

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

package/dist/components/widgets/pcd/inputs.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Vector3Tuple } from 'three'
+
+	import { Label, NumericInput, Select } from '@viamrobotics/prime-core'
+
+	import Download from './download.svelte'
+
+	interface Props {
+		pointSize: number
+		up: Vector3Tuple
+		data: Uint8Array
+		onPointSizeChange: (value: number) => void
+		onUpChange: (value: Vector3Tuple) => void
+	}
+
+	const { pointSize, up, data, onPointSizeChange, onUpChange }: Props = $props()
+
+	const coordSystems = [
+		['+y', '0,1,0'],
+		['-y', '0,-1,0'],
+		['+z', '0,0,1'],
+		['-z', '0,0,-1'],
+		['+x', '1,0,0'],
+		['-x', '-1,0,0'],
+	] as const
+
+	const handlePointSizeChange = (event: Event) => {
+		if (event.target instanceof HTMLInputElement) {
+			onPointSizeChange(event.target.valueAsNumber)
+		}
+	}
+
+	const handleUpChange = (event: Event) => {
+		if (event.target instanceof HTMLSelectElement) {
+			onUpChange(event.target.value.split(',').map(Number) as Vector3Tuple)
+		}
+	}
+</script>
+
+<div class="flex w-1/3 flex-col gap-2">
+	<Label>
+		Point size
+
+		<NumericInput
+			slot="input"
+			step={0.01}
+			min={0}
+			value={pointSize}
+			on:change={handlePointSizeChange}
+		/>
+	</Label>
+
+	<Label>
+		Camera up vector
+
+		<Select
+			slot="input"
+			on:change={handleUpChange}
+		>
+			{#each coordSystems as [text, coord] (coord)}
+				<option
+					selected={coord === up.toString()}
+					value={coord}>{text}</option
+				>
+			{/each}
+		</Select>
+	</Label>
+
+	<Download {data} />
+</div>

package/dist/components/widgets/pcd/inputs.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Vector3Tuple } from 'three';
+interface Props {
+    pointSize: number;
+    up: Vector3Tuple;
+    data: Uint8Array;
+    onPointSizeChange: (value: number) => void;
+    onUpChange: (value: Vector3Tuple) => void;
+}
+declare const Inputs: import("svelte").Component<Props, {}, "">;
+type Inputs = ReturnType<typeof Inputs>;
+export default Inputs;

package/dist/components/widgets/pcd/pcd-widget.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Vector3Tuple } from 'three'
+
+	import { Canvas } from '@threlte/core'
+
+	import Inputs from './inputs.svelte'
+	import Scene from './scene.svelte'
+
+	interface Props {
+		data: Uint8Array
+	}
+
+	const { data }: Props = $props()
+
+	let up: Vector3Tuple = $state([0, 0, 1])
+	let pointSize = $state(0.02)
+
+	const handlePointSizeChange = (value: number) => {
+		pointSize = value
+	}
+
+	const handleUpChange = (value: Vector3Tuple) => {
+		up = value
+	}
+</script>
+
+<div class="flex h-120 gap-4">
+	<Inputs
+		{pointSize}
+		{up}
+		{data}
+		onPointSizeChange={handlePointSizeChange}
+		onUpChange={handleUpChange}
+	/>
+
+	<div class="relative h-full w-2/3 overflow-hidden border">
+		<Canvas>
+			<Scene
+				{data}
+				{up}
+				{pointSize}
+			/>
+		</Canvas>
+	</div>
+</div>

package/dist/components/widgets/pcd/pcd-widget.svelte.d.ts

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