feat: add IsHoldingSomething status to gripper widget (#64)

.changeset/bumpy-sheep-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': patch
+---
+
+Fix circular imports

.changeset/violet-pets-sleep.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': minor
+---
+
+Add `IsHoldingSomething` widget

src/lib/client-map.ts

@@ -31,7 +31,7 @@ import {
 	WorldStateStoreClient,
 } from '@viamrobotics/sdk'
 
-import { getResourceAPI } from './resource.ts'
+import { getResourceAPI } from './get-resource-api.ts'
 
 export const clientMap = {
 	'rdk:component:arm': ArmClient,

src/lib/components/widgets/do-command/do-command.svelte

@@ -6,7 +6,8 @@
 	import { PersistedState } from 'runed'
 
 	import { supportsDoCommand } from '$lib/client-map'
-	import { getResourceAPI, getResourceKey } from '$lib/resource'
+	import { getResourceAPI } from '$lib/get-resource-api'
+	import { getResourceKey } from '$lib/get-resource-key'
 
 	import ErrorDisplay from '../../error.svelte'
 	import { createDoCommandClient } from './create-do-command-client.svelte'

src/lib/components/widgets/gripper/__tests__/is-holding-something.svelte.spec.ts

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/svelte'
+import { createResourceQuery } from '@viamrobotics/svelte-sdk'
+import { describe, expect, it, vi } from 'vitest'
+
+import Subject from '../is-holding-something.svelte'
+
+vi.mock('@viamrobotics/sdk', () => ({
+	GripperClient: class {},
+}))
+
+vi.mock('@viamrobotics/svelte-sdk', () => ({
+	createResourceClient: vi.fn(() => ({ current: {} })),
+	createResourceQuery: vi.fn(() => ({
+		data: undefined,
+		isLoading: true,
+		isError: false,
+		error: null,
+	})),
+}))
+
+describe('Gripper IsHoldingSomething', () => {
+	it('renders with "Empty" status when not holding', () => {
+		vi.mocked(createResourceQuery).mockReturnValue({
+			data: false,
+			isLoading: false,
+			isError: false,
+			error: null,
+		} as ReturnType<typeof createResourceQuery>)
+
+		render(Subject, {
+			props: { partID: 'test-part', resourceName: 'test-gripper' },
+		})
+
+		expect(screen.getByText('Empty')).toBeInTheDocument()
+	})
+
+	it('renders with "Holding" status when holding something', () => {
+		vi.mocked(createResourceQuery).mockReturnValue({
+			data: true,
+			isLoading: false,
+			isError: false,
+			error: null,
+		} as ReturnType<typeof createResourceQuery>)
+
+		render(Subject, {
+			props: { partID: 'test-part', resourceName: 'test-gripper' },
+		})
+
+		expect(screen.getByText('Holding')).toBeInTheDocument()
+	})
+
+	it('creates a resource query for isHoldingSomething with polling', () => {
+		vi.mocked(createResourceQuery).mockReturnValue({
+			data: false,
+			isLoading: false,
+			isError: false,
+			error: null,
+		} as never)
+
+		render(Subject, {
+			props: { partID: 'test-part', resourceName: 'test-gripper' },
+		})
+
+		expect(createResourceQuery).toHaveBeenCalledWith(expect.anything(), 'isHoldingSomething', {
+			refetchInterval: 500,
+		})
+	})
+})

src/lib/components/widgets/gripper/gripper.svelte

@@ -8,6 +8,7 @@
 	import StopButton from '$lib/components/stop-button.svelte'
 
 	import Grab from './grab.svelte'
+	import IsHoldingSomething from './is-holding-something.svelte'
 	import Open from './open.svelte'
 
 	interface Props {
@@ -63,6 +64,10 @@
 					{partID}
 					{resourceName}
 				/>
+				<IsHoldingSomething
+					{partID}
+					{resourceName}
+				/>
 			</div>
 		</div>
 	{/snippet}

src/lib/components/widgets/gripper/is-holding-something.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Pill } from '@viamrobotics/prime-core'
+	import { GripperClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '$lib/components/api-section.svelte'
+	import Query from '$lib/components/query.svelte'
+	import StatusPill from '$lib/components/status-pill.svelte'
+
+	import ClosedGripperSvg from './closed-gripper-svg.svelte'
+	import OpenGripperSvg from './open-gripper-svg.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GripperClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'isHoldingSomething', {
+		refetchInterval: 500,
+	})
+</script>
+
+<ApiSection
+	title="IsHoldingSomething"
+	bottomText="Updates automatically"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-5"
+	>
+		<div class="flex items-center gap-2">
+			{#if query.data !== undefined}
+				{#if query.data}
+					<ClosedGripperSvg />
+				{:else}
+					<OpenGripperSvg />
+				{/if}
+				<StatusPill
+					isActive={query.data}
+					activeText="Holding"
+					inactiveText="Empty"
+				/>
+			{:else}
+				<Pill value="Loading" />
+			{/if}
+		</div>
+	</Query>
+</ApiSection>

src/lib/get-resource-api.ts

@@ -0,0 +1,4 @@
+import type { ResourceName } from '@viamrobotics/sdk'
+
+export const getResourceAPI = ({ namespace, type, subtype }: ResourceName) =>
+	`${namespace}:${type}:${subtype}`

src/lib/get-resource-key.ts

@@ -0,0 +1,5 @@
+import type { ResourceName } from '@viamrobotics/sdk'
+
+import { getResourceAPI } from './get-resource-api.ts'
+
+export const getResourceKey = (name: ResourceName) => `${getResourceAPI(name)}/${name.name}`

src/lib/index.ts

@@ -6,6 +6,7 @@ export {
 
 export { clientForResource } from './client-map'
 export * from './components'
+export { getResourceAPI } from './get-resource-api'
 
 export { providePip, usePip } from './pip/context.svelte'
-export { getResourceAPI, hasWidget, showResourceWidget, widgetForResource } from './resource'
+export { hasWidget, showResourceWidget, widgetForResource } from './resource'

src/lib/resource.ts

@@ -28,6 +28,7 @@ import {
 	SwitchWidget,
 	VisionServiceWidget,
 } from './components'
+import { getResourceAPI } from './get-resource-api.ts'
 
 export type NamedResourceStatus = ResourceStatus & {
 	name: ResourceName
@@ -102,11 +103,6 @@ const resourceMap =
 		'rdk:service:video': [clientMap['rdk:service:video'], undefined, true],
 	} as const
 
-export const getResourceAPI = ({ namespace, type, subtype }: ResourceName) =>
-	`${namespace}:${type}:${subtype}`
-
-export const getResourceKey = (name: ResourceName) => `${getResourceAPI(name)}/${name.name}`
-
 // sorts resource names by local/remote -> type -> name (alphabetical) to produce a list like
 // component a
 // component z

src/routes/widgets/card-list-item.svelte

@@ -35,13 +35,9 @@
 	import ResourceIcon from '$lib/components/resource-icon.svelte'
 	import SectionGroup from '$lib/components/section-group.svelte'
 	import DoCommandWidget from '$lib/components/widgets/do-command/do-command.svelte'
-	import {
-		getResourceAPI,
-		getResourceKey,
-		type NamedResourceStatus,
-		ResourceStatusText,
-		widgetForResource,
-	} from '$lib/resource'
+	import { getResourceAPI } from '$lib/get-resource-api'
+	import { getResourceKey } from '$lib/get-resource-key'
+	import { type NamedResourceStatus, ResourceStatusText, widgetForResource } from '$lib/resource'
 	import { scrollIntoView } from '$lib/scroll-into-view'
 
 	import ResourceStatus from './resource-status.svelte'

src/routes/widgets/card-list.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ErrorDisplay from '$lib/components/error.svelte'
-	import { getResourceKey, type NamedResourceStatus } from '$lib/resource'
+	import { getResourceKey } from '$lib/get-resource-key'
+	import { type NamedResourceStatus } from '$lib/resource'
 
 	import CardListItem from './card-list-item.svelte'
 	import NullState from './null-state.svelte'

src/routes/widgets/resource-list.svelte

@@ -3,7 +3,8 @@
 
 	import ErrorDisplay from '$lib/components/error.svelte'
 	import ResourceIcon from '$lib/components/resource-icon.svelte'
-	import { getResourceKey, type NamedResourceStatus } from '$lib/resource'
+	import { getResourceKey } from '$lib/get-resource-key'
+	import { type NamedResourceStatus } from '$lib/resource'
 
 	interface Props {
 		isLoading: boolean