@viamrobotics/test-widgets 0.0.1

package/dist/components/widgets/discovery/resources-list.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { appRobotApi } from '@viamrobotics/sdk'
+
+	import { Button, IconButton, Tooltip } from '@viamrobotics/prime-core'
+
+	import { sortObjectKeys } from '../../../sort'
+
+	import type { ComponentPreviews, ComponentPreviewSnippet } from './component-preview'
+
+	import { parseComponentConfig, transformComponentConfig } from './transform-component-config'
+
+	interface Props {
+		data: appRobotApi.ComponentConfig[]
+		/** A map of generated component preview IDs to component previews. */
+		previews: ComponentPreviews
+		/** A snippet for creating component previews. Requires a `preview` DoCommand to be implemented. */
+		componentPreview?: ComponentPreviewSnippet | undefined
+		onAddComponent?: ((component: appRobotApi.ComponentConfig) => void) | undefined
+	}
+
+	const {
+		data,
+		previews,
+		onAddComponent = undefined,
+		componentPreview = undefined,
+	}: Props = $props()
+
+	const sortedData = $derived(
+		data
+			.toSorted(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB))
+			.map((value) => sortObjectKeys(transformComponentConfig(value)))
+	)
+
+	const copyToClipboard = async () => {
+		try {
+			const resourcesStr = JSON.stringify(data, null, 2)
+			await globalThis.navigator.clipboard.writeText(resourcesStr)
+		} catch (error) {
+			console.error('failed to copy resources to clipboard', error)
+		}
+	}
+
+	const copyAttributes = async (value: Record<string, unknown>) => {
+		try {
+			const attributesStr = JSON.stringify(value.attributes ?? {}, null, 2)
+			await globalThis.navigator.clipboard.writeText(attributesStr)
+		} catch (error) {
+			console.error('failed to copy attributes to clipboard', error)
+		}
+	}
+</script>
+
+{#if sortedData.length === 0}
+	<p class="text-subtle-2 text-xs">No resources discovered</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 all configs"
+					on:click={copyToClipboard}
+				/>
+
+				<div slot="description">Copy JSON</div>
+			</Tooltip>
+		</div>
+		<dl class="font-roboto-mono flex flex-col gap-y-4">
+			{#each sortedData as value (value)}
+				{@const valueString = JSON.stringify(value, null, 2)}
+				{@const preview = previews[value.name]}
+				<div class="flex flex-col gap-y-2">
+					<div class="flex flex-row">
+						<dt class="text-default flex w-50 min-w-50 flex-col gap-2 pr-2 font-medium">
+							<span class="truncate">{value.name}</span>
+							{#if onAddComponent}
+								<Button
+									class="w-fit"
+									icon="plus"
+									onclick={() => onAddComponent(parseComponentConfig(value))}
+								>
+									Add component
+								</Button>
+							{/if}
+							<Button
+								class="w-fit"
+								icon="content-copy"
+								onclick={async () => copyAttributes(value)}
+							>
+								Copy attributes
+							</Button>
+						</dt>
+						<dd class="text-subtle-1 min-w-50">
+							<div class="border-light bg-extralight relative min-w-50 border px-3 py-2">
+								<pre class="whitespace-pre-wrap"><code>{valueString}</code></pre>
+							</div>
+						</dd>
+					</div>
+					{#if preview}
+						<div class="flex w-full pl-50">
+							{@render componentPreview?.(preview)}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</dl>
+	</div>
+{/if}

package/dist/components/widgets/discovery/resources-list.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { appRobotApi } from '@viamrobotics/sdk';
+import type { ComponentPreviews, ComponentPreviewSnippet } from './component-preview';
+interface Props {
+    data: appRobotApi.ComponentConfig[];
+    /** A map of generated component preview IDs to component previews. */
+    previews: ComponentPreviews;
+    /** A snippet for creating component previews. Requires a `preview` DoCommand to be implemented. */
+    componentPreview?: ComponentPreviewSnippet | undefined;
+    onAddComponent?: ((component: appRobotApi.ComponentConfig) => void) | undefined;
+}
+declare const ResourcesList: import("svelte").Component<Props, {}, "">;
+type ResourcesList = ReturnType<typeof ResourcesList>;
+export default ResourcesList;

package/dist/components/widgets/discovery/transform-component-config.d.ts

@@ -0,0 +1,17 @@
+import { appRobotApi } from '@viamrobotics/sdk';
+/** An app-safe version of the resource config without deprecated fields. */
+export type SafeResourceConfig = Omit<appRobotApi.ComponentConfig, 'namespace' | 'type'>;
+type SortableComponentConfig = appRobotApi.ComponentConfig & Record<string, unknown>;
+/**
+ * Transforms the provided component config to ensure it is safe to add the machine part's config
+ *
+ * @param resource The resource config to validate
+ */
+export declare const transformComponentConfig: (resource: appRobotApi.ComponentConfig) => SortableComponentConfig;
+/**
+ * Parses the provided component config json to add to a part's config
+ *
+ * @param resource The resource json to parse
+ */
+export declare const parseComponentConfig: (resource: Record<string, unknown>) => appRobotApi.ComponentConfig;
+export {};

package/dist/components/widgets/discovery/transform-component-config.js

@@ -0,0 +1,32 @@
+import { appRobotApi } from '@viamrobotics/sdk';
+import { omit } from 'lodash-es';
+// The below code was copied from `ui/src/lib/resource-type.ts`
+const TRIPLET_SEPARATOR = ':';
+/** Check if a string is a valid API or model triplet. */
+const isResourceTriplet = (value) => {
+    const parts = value?.split(TRIPLET_SEPARATOR);
+    return parts?.length === 3 && Boolean(parts[0] && parts[1] && parts[2]);
+};
+/**
+ * Transforms the provided component config to ensure it is safe to add the machine part's config
+ *
+ * @param resource The resource config to validate
+ */
+export const transformComponentConfig = (resource) => {
+    const hasQualifiedAPI = isResourceTriplet(resource.api);
+    const hasQualifiedModel = isResourceTriplet(resource.model);
+    let next = resource.clone();
+    if (hasQualifiedAPI && hasQualifiedModel) {
+        next = omit(next, 'namespace');
+        next = omit(next, 'type');
+    }
+    return new appRobotApi.ComponentConfig(next).toJson();
+};
+/**
+ * Parses the provided component config json to add to a part's config
+ *
+ * @param resource The resource json to parse
+ */
+export const parseComponentConfig = (resource) => {
+    return appRobotApi.ComponentConfig.fromJson(resource);
+};

package/dist/components/widgets/do-command/do-command.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+	import { JsonEditor } from '@viamrobotics/prime-editor'
+	import { MLModelClient, ResourceName, Struct } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+	import { PersistedState } from 'runed'
+
+	import { clientForBuiltinResource } from '../../../builtin'
+	import { getResourceAPI, getResourceKey } from '../../../resource'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	interface Props {
+		partID: string
+		resource: ResourceName
+	}
+
+	const { partID, resource }: Props = $props()
+
+	type DoCommandable = Extract<ReturnType<typeof clientForBuiltinResource>, MLModelClient>
+
+	const resourceClientType = $derived(clientForBuiltinResource(resource)) as DoCommandable
+
+	const client = $derived(
+		createResourceClient(
+			resourceClientType,
+			() => partID,
+			() => resource.name
+		)
+	)
+
+	const doCommandMutation = $derived(createResourceMutation(client, 'doCommand'))
+
+	let lastErr = $state<Error>()
+
+	const uid = $props.id()
+
+	const input = $derived(new PersistedState(`${partID}/${getResourceKey(resource)}`, '{\n}'))
+
+	let output = $state('')
+
+	const execute = async () => {
+		try {
+			const parsedInput = Struct.fromJsonString(input.current ?? '{}')
+			const data = await doCommandMutation.mutateAsync([parsedInput])
+			output = JSON.stringify(data, null, 2)
+			lastErr = undefined
+		} catch (error) {
+			lastErr = error as Error
+		}
+	}
+</script>
+
+{#if doCommandMutation}
+	<div class="flex flex-row items-center justify-between">
+		<div class="flex w-[45%] flex-col gap-2 border-r py-2">
+			<span class="text-gray-9 px-4 text-sm font-medium">Input</span>
+			<JsonEditor
+				label="input"
+				initialValue={input.current ?? '{}'}
+				onChange={(nextInput: string) => {
+					input.current = nextInput
+				}}
+				cx="h-56 overflow-y-auto"
+				errorMessageID={lastErr ? uid : undefined}
+			/>
+		</div>
+
+		<Button
+			class="m-auto"
+			onclick={execute}>Execute</Button
+		>
+
+		<div class="flex w-[45%] flex-col gap-2 border-l py-2">
+			<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
+			{#if !lastErr}
+				<JsonEditor
+					label="output"
+					initialValue={output}
+					readonly
+					cx="h-56 overflow-y-auto"
+				/>
+			{:else}
+				<ErrorDisplay
+					id={uid}
+					class="h-56 px-4"
+					lastError={lastErr}
+				/>
+			{/if}
+		</div>
+	</div>
+{:else}
+	<ErrorDisplay
+		class="p-4"
+		lastError={new Error(
+			`DoCommand for ${getResourceAPI(
+				resource
+			)} is not supported in the UI. Consider using one of our SDKs.`
+		)}
+	/>
+{/if}

package/dist/components/widgets/do-command/do-command.svelte.d.ts

@@ -0,0 +1,8 @@
+import { ResourceName } from '@viamrobotics/sdk';
+interface Props {
+    partID: string;
+    resource: ResourceName;
+}
+declare const DoCommand: import("svelte").Component<Props, {}, "">;
+type DoCommand = ReturnType<typeof DoCommand>;
+export default DoCommand;

package/dist/components/widgets/encoder/encoder.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+	import { EncoderClient, EncoderPositionType, type EncoderProperties } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import ErrorDisplay from '../../error.svelte'
+	import Queries from '../../queries.svelte'
+	import RefetchController from '../../refetch-controller.svelte'
+	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		EncoderClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const refetchInterval = createRefetchIntervalStore(
+		() => partID,
+		() => resourceName,
+		'encoder-view'
+	)
+
+	const getPositionArgs = (properties: EncoderProperties | undefined): [EncoderPositionType] => {
+		if (!properties) {
+			return [EncoderPositionType.UNSPECIFIED]
+		}
+
+		const { angleDegreesSupported, ticksCountSupported } = properties
+
+		if (angleDegreesSupported) {
+			return [EncoderPositionType.ANGLE_DEGREES]
+		}
+
+		if (ticksCountSupported) {
+			return [EncoderPositionType.TICKS_COUNT]
+		}
+
+		return [EncoderPositionType.UNSPECIFIED]
+	}
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
+		refetchInterval: refetchInterval.current,
+	}))
+
+	const positionQuery = createResourceQuery(
+		client,
+		'getPosition',
+		() => getPositionArgs(propertiesQuery.data),
+		() => ({
+			enabled: propertiesQuery.data !== undefined,
+			refetchInterval: refetchInterval.current,
+		})
+	)
+	const resetMutation = createResourceMutation(client, 'resetPosition')
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="p-4 pb-3">
+			<RefetchController
+				{refetchInterval}
+				queries={[propertiesQuery, positionQuery]}
+			/>
+		</div>
+
+		<div class="grid w-full grid-cols-2 divide-x">
+			<ApiSection
+				title="GetPosition"
+				tooltip="Relative encoders return ticks since last zeroing. Absolute encoders return degrees."
+				class="gap-3"
+			>
+				<Queries queries={[propertiesQuery, positionQuery]}>
+					{#if positionQuery.data !== undefined}
+						{@const [position, encoderPositionType] = positionQuery.data}
+						<div class="font-roboto-mono flex flex-col gap-2 text-sm">
+							<Position
+								{position}
+								{encoderPositionType}
+							/>
+						</div>
+					{/if}
+				</Queries>
+			</ApiSection>
+
+			<ApiSection
+				title="ResetPosition"
+				description="Set the current position as the new zero position"
+			>
+				<Button
+					icon="play-circle-outline"
+					class="w-fit"
+					onclick={() => {
+						resetMutation.mutate([], {})
+					}}
+				>
+					Execute
+				</Button>
+				<ErrorDisplay lastError={resetMutation.error} />
+			</ApiSection>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/encoder/position.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { EncoderPositionType } from '@viamrobotics/sdk'
+
+	import { formatNumeric } from '../../../format'
+
+	interface Props {
+		position: number
+		encoderPositionType: EncoderPositionType
+	}
+
+	const { position, encoderPositionType }: Props = $props()
+</script>
+
+{#if encoderPositionType === EncoderPositionType.ANGLE_DEGREES}
+	<span class=" flex flex-row gap-0.5">
+		{formatNumeric(position, 1)}
+		<abbr class="text-subtle-2">º</abbr>
+	</span>
+{:else if encoderPositionType === EncoderPositionType.TICKS_COUNT}
+	<span class=" flex flex-row gap-1">
+		{formatNumeric(position, 2)}
+		<abbr class="text-subtle-2">ticks</abbr>
+	</span>
+{:else}
+	{formatNumeric(position, 2)}
+{/if}

package/dist/components/widgets/encoder/position.svelte.d.ts

@@ -0,0 +1,8 @@
+import { EncoderPositionType } from '@viamrobotics/sdk';
+interface Props {
+    position: number;
+    encoderPositionType: EncoderPositionType;
+}
+declare const Position: import("svelte").Component<Props, {}, "">;
+type Position = ReturnType<typeof Position>;
+export default Position;

package/dist/components/widgets/gantry/gantry.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { GantryClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+	} from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+	import IsMoving from '../../is-moving.svelte'
+	import Queries from '../../queries.svelte'
+	import Query from '../../query.svelte'
+	import StopButton from '../../stop-button.svelte'
+
+	import Home from './home.svelte'
+	import MoveToPosition from './move-to-position.svelte'
+	import PositionAndLengths from './position-and-lengths.svelte'
+	import QuickMove from './quick-move.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GantryClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const options = { refetchInterval: 500 }
+	const positionQuery = createResourceQuery(client, 'getPosition', options)
+	const lengthsQuery = createResourceQuery(client, 'getLengths', options)
+
+	const moveMutation = createResourceMutation(client, 'moveToPosition')
+	const quickMoveMutation = createResourceMutation(client, 'moveToPosition')
+	const stopMutation = createResourceMutation(client, 'stop')
+
+	const positionHeadingID = $props.id()
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<div class="flex flex-row divide-x">
+			<div class="flex grow flex-row divide-x">
+				<ApiSection
+					bottomText="Updates automatically"
+					aria-labelledby={positionHeadingID}
+				>
+					<h3
+						class="flex flex-row items-center gap-1 text-sm"
+						id={positionHeadingID}
+					>
+						<span class="font-semibold"> GetPosition </span>
+						and
+						<span class="font-semibold"> GetLengths </span>
+					</h3>
+					<Queries queries={[positionQuery, lengthsQuery]}>
+						{@const positions = positionQuery.data}
+						{@const lengths = lengthsQuery.data ?? []}
+						{#if positions !== undefined}
+							<PositionAndLengths
+								{positions}
+								{lengths}
+							/>
+						{/if}
+					</Queries>
+				</ApiSection>
+				<ApiSection title="MoveToPosition">
+					<Query query={positionQuery}>
+						{@const positions = positionQuery.data}
+						{#if positions !== undefined}
+							<MoveToPosition
+								{positions}
+								lastError={moveMutation.error}
+								moveTo={(newPos: number[], speeds: number[]) => {
+									moveMutation.mutate([newPos, speeds], {})
+								}}
+							/>
+						{/if}
+					</Query>
+				</ApiSection>
+				<div class="flex grow flex-col divide-y">
+					<ApiSection
+						title="Quick move"
+						bottomText="Press a button to execute"
+					>
+						<Query
+							query={positionQuery}
+							contentCx="h-6"
+						>
+							{@const positions = positionQuery.data}
+							{#if positions !== undefined}
+								<QuickMove
+									{positions}
+									lastError={quickMoveMutation.error}
+									moveTo={(newPos: number[], speeds: number[]) => {
+										quickMoveMutation.mutate([newPos, speeds], {})
+									}}
+								/>
+							{/if}
+						</Query>
+					</ApiSection>
+					<ApiSection
+						title="Home"
+						description="Run the homing sequence"
+					>
+						<Home
+							{partID}
+							{resourceName}
+						/>
+					</ApiSection>
+				</div>
+			</div>
+			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
+				<ApiSection title="Stop">
+					<StopButton
+						error={stopMutation.error}
+						onStop={() => {
+							stopMutation.mutate([])
+						}}
+					/>
+				</ApiSection>
+				<IsMoving
+					client={GantryClient}
+					{partID}
+					{resourceName}
+				/>
+			</div>
+		</div>
+	{/snippet}
+</ConnectionStatus>

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

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

package/dist/components/widgets/gantry/home.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Button } from '@viamrobotics/prime-core'
+	import { GantryClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GantryClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const homeMutation = createResourceMutation(client, 'home')
+</script>
+
+<Button
+	class="w-fit"
+	icon="play-circle-outline"
+	onclick={() => {
+		homeMutation.mutate([], {})
+	}}
+>
+	Execute
+</Button>
+<ErrorDisplay lastError={homeMutation.error} />

package/dist/components/widgets/gantry/home.svelte.d.ts

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

package/dist/components/widgets/gantry/match-array-length.d.ts

@@ -0,0 +1 @@
+export declare const matchArrayLength: (source: number[], target: number[], padValue: number) => number[];

package/dist/components/widgets/gantry/match-array-length.js

@@ -0,0 +1,13 @@
+export const matchArrayLength = (source, target, padValue) => {
+    const sourceLength = source.length;
+    const targetLength = target.length;
+    // If the source array is longer, truncate it to the size of the target array
+    if (sourceLength > targetLength) {
+        return source.slice(0, targetLength);
+    }
+    // If the source array is shorter, calculate the number of elements to pad
+    const paddingLength = targetLength - sourceLength;
+    const paddingArray = Array.from({ length: paddingLength }).fill(padValue);
+    // Concatenate the original array with the padding array
+    return [...source, ...paddingArray];
+};