@viamrobotics/test-widgets 0.11.2 → 0.11.3

package/dist/components/widgets/arm/move-to-joint-positions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Icon, Tooltip } from '@viamrobotics/prime-core'
+	import { Icon, ToggleButtons, Tooltip } from '@viamrobotics/prime-core'
 
 	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
 	import CopyButton from '../../copy-button.svelte'
@@ -11,7 +11,9 @@
 	import { type JointLimit } from './joint-position-limits'
 	import JointPositionQuickMove from './joint-position-quick-move.svelte'
 
-	type ControlMode = 'jointPositions' | 'quickMove'
+	type ControlMode = 'Joint Positions' | 'Quick Move'
+
+	const CONTROL_MODES: ControlMode[] = ['Joint Positions', 'Quick Move']
 
 	interface Props {
 		positions: number[]
@@ -32,9 +34,9 @@
 	// svelte-ignore state_referenced_locally
 	let desiredPositions = $state([...positions]) // in degrees
 	let useRadians = $state(false)
-	let controlMode = $state<ControlMode>('jointPositions')
+	let controlMode = $state<ControlMode>('Joint Positions')
 
-	const isQuickMoveMode = $derived(controlMode === 'quickMove')
+	const isQuickMoveMode = $derived(controlMode === 'Quick Move')
 
 	const getJointMin = (index: number): number => jointLimitsDegrees[index]?.minDegrees ?? -180
 	const getJointMax = (index: number): number => jointLimitsDegrees[index]?.maxDegrees ?? 180
@@ -44,8 +46,11 @@
 	const displayPositions = $derived(desiredPositions.map((degrees) => toDisplayAngle(degrees)))
 	const copyData = $derived(`[${displayPositions.map((v) => formatNumeric(v)).join(', ')}]`)
 
-	const toggleMode = () => {
-		controlMode = isQuickMoveMode ? 'jointPositions' : 'quickMove'
+	const handleModeChange = ({ detail }: CustomEvent<string>) => {
+		const nextMode = CONTROL_MODES.find((mode) => mode === detail)
+		if (nextMode) {
+			controlMode = nextMode
+		}
 	}
 
 	const handlePaste = (data: string): boolean => {
@@ -63,48 +68,35 @@
 </script>
 
 <div class="flex min-w-0 flex-col gap-4">
-	<div class="flex items-center justify-between">
-		<span class="flex flex-row items-center gap-1 text-sm">
-			Joint Positions
-			<Tooltip>
-				<Icon
-					name="information-outline"
-					cx="text-gray-6"
-				/>
-				<span slot="description">
-					Joint position limits are based solely on the arm kinematics and do not take into account
-					motion service limit overrides.
-				</span>
-			</Tooltip>
-		</span>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<ToggleButtons
+			role="group"
+			aria-label="Control mode"
+			options={CONTROL_MODES}
+			selected={controlMode}
+			on:input={handleModeChange}
+		/>
 		<div class="flex items-center gap-1">
-			<div class="flex gap-1">
-				{#if !isQuickMoveMode}
-					<CopyButton data={copyData} />
-					<PasteButton onPaste={handlePaste} />
-				{/if}
-				<AngleUnitToggle
-					{useRadians}
-					onToggle={() => {
-						useRadians = !useRadians
-					}}
-				/>
-			</div>
-			<Tooltip>
-				<button
-					onclick={toggleMode}
-					aria-label={isQuickMoveMode ? 'Exit quick move mode' : 'Enter quick move mode'}
-					class={[
-						'hover:border-medium hover:bg-medium active:bg-gray-2 rounded p-0.5',
-						isQuickMoveMode ? 'text-amber-600' : 'text-gray-6',
-					]}
-				>
-					<Icon name="lightning-bolt-outline" />
-				</button>
-				<span slot="description">
-					{isQuickMoveMode ? 'Exit quick move mode' : 'Enter quick move mode'}
-				</span>
-			</Tooltip>
+			{#if !isQuickMoveMode}
+				<Tooltip>
+					<Icon
+						name="information-outline"
+						cx="text-gray-6"
+					/>
+					<span slot="description">
+						Joint position limits are based solely on the arm kinematics and do not take into
+						account motion service limit overrides.
+					</span>
+				</Tooltip>
+				<CopyButton data={copyData} />
+				<PasteButton onPaste={handlePaste} />
+			{/if}
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
 		</div>
 	</div>
 

package/dist/components/widgets/movement-sensor/map.svelte

@@ -24,7 +24,7 @@
 	const lng = $derived(safeReadCoordinate(coordinate?.longitude))
 </script>
 
-<div class="relative h-[300px] w-full lg:h-auto lg:w-1/2">
+<div class="relative h-[300px] w-full @4xl:h-auto @4xl:w-1/2">
 	<MapLibre
 		zoom={15}
 		options={{ attributionControl: { compact: false } }}

package/dist/components/widgets/movement-sensor/movement-sensor.svelte

@@ -103,150 +103,152 @@
 			query={propertiesQuery}
 			contentCx="p-4 h-14"
 		>
-			<div class="flex flex-wrap text-xs lg:flex-nowrap">
-				<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 lg:w-1/4">
-					{#if propertiesQuery.data?.positionSupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetPosition"
-								api={MS_API}
-							/>
-							<Query
-								query={positionQuery}
-								contentCx="h-6"
-							>
-								{#if positionQuery.data !== undefined}
-									<Position data={positionQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+			<div class="@container">
+				<div class="flex flex-wrap text-xs @4xl:flex-nowrap">
+					<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 @4xl:w-1/4">
+						{#if propertiesQuery.data?.positionSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetPosition"
+									api={MS_API}
+								/>
+								<Query
+									query={positionQuery}
+									contentCx="h-6"
+								>
+									{#if positionQuery.data !== undefined}
+										<Position data={positionQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.orientationSupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetOrientation"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={orientationQuery}
-								contentCx="h-6"
-							>
-								{#if orientationQuery.data !== undefined}
-									<Orientation data={orientationQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+						{#if propertiesQuery.data?.orientationSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetOrientation"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={orientationQuery}
+									contentCx="h-6"
+								>
+									{#if orientationQuery.data !== undefined}
+										<Orientation data={orientationQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.compassHeadingSupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetCompassHeading"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={compassHeadingQuery}
-								contentCx="h-6"
-							>
-								{#if compassHeadingQuery.data !== undefined}
-									<CompassHeading data={compassHeadingQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
-				</div>
+						{#if propertiesQuery.data?.compassHeadingSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetCompassHeading"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={compassHeadingQuery}
+									contentCx="h-6"
+								>
+									{#if compassHeadingQuery.data !== undefined}
+										<CompassHeading data={compassHeadingQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
+					</div>
 
-				<div class="flex w-full flex-col gap-5 p-4 lg:w-1/4">
-					{#if propertiesQuery.data?.angularVelocitySupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetAngularVelocity"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º/s)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={angularVelocityQuery}
-								contentCx="h-6"
-							>
-								{#if angularVelocityQuery.data !== undefined}
-									<Vector3 data={angularVelocityQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+					<div class="flex w-full flex-col gap-5 p-4 @4xl:w-1/4">
+						{#if propertiesQuery.data?.angularVelocitySupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetAngularVelocity"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º/s)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={angularVelocityQuery}
+									contentCx="h-6"
+								>
+									{#if angularVelocityQuery.data !== undefined}
+										<Vector3 data={angularVelocityQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.linearVelocitySupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetLinearVelocity"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(m/s)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={linearVelocityQuery}
-								contentCx="h-6"
-							>
-								{#if linearVelocityQuery.data !== undefined}
-									<Vector3 data={linearVelocityQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+						{#if propertiesQuery.data?.linearVelocitySupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetLinearVelocity"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(m/s)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={linearVelocityQuery}
+									contentCx="h-6"
+								>
+									{#if linearVelocityQuery.data !== undefined}
+										<Vector3 data={linearVelocityQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
+
+						{#if propertiesQuery.data?.linearAccelerationSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetLinearAcceleration"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal"
+											>(m/s<sup>2</sup>)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={linearAccelerationQuery}
+									contentCx="h-6"
+								>
+									{#if linearAccelerationQuery.data !== undefined}
+										<Vector3 data={linearAccelerationQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.linearAccelerationSupported}
 						<div class="flex flex-col gap-2">
 							<SectionTitle
-								title="GetLinearAcceleration"
+								title="GetAccuracy"
 								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal"
-										>(m/s<sup>2</sup>)</span
-									>{/snippet}
-							</SectionTitle>
+							/>
 							<Query
-								query={linearAccelerationQuery}
+								query={accuracyQuery}
 								contentCx="h-6"
 							>
-								{#if linearAccelerationQuery.data !== undefined}
-									<Vector3 data={linearAccelerationQuery.data} />
+								{#if accuracyQuery.data !== undefined}
+									<Accuracy data={accuracyQuery.data} />
 								{/if}
 							</Query>
 						</div>
-					{/if}
+					</div>
 
-					<div class="flex flex-col gap-2">
-						<SectionTitle
-							title="GetAccuracy"
-							api={MS_API}
+					{#if propertiesQuery.data?.positionSupported}
+						<Map
+							coordinate={positionQuery.data?.coordinate}
+							rotation={orientationQuery.data?.oZ}
 						/>
-						<Query
-							query={accuracyQuery}
-							contentCx="h-6"
-						>
-							{#if accuracyQuery.data !== undefined}
-								<Accuracy data={accuracyQuery.data} />
-							{/if}
-						</Query>
-					</div>
+					{/if}
 				</div>
-
-				{#if propertiesQuery.data?.positionSupported}
-					<Map
-						coordinate={positionQuery.data?.coordinate}
-						rotation={orientationQuery.data?.oZ}
-					/>
-				{/if}
 			</div>
 		</Query>
 

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

@@ -134,7 +134,7 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex w-full justify-between p-4">
+		<div class="flex w-full flex-wrap justify-between gap-2 p-4">
 			<RefetchController
 				{refetchInterval}
 				queries={[locationQuery, obstaclesQuery, waypointsQuery]}
@@ -152,85 +152,89 @@
 			</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}
+		<div class="@container">
+			<div class="relative flex w-full flex-col items-stretch p-2 @2xl:h-120 @2xl:flex-row">
+				<div class="w-full p-2 @2xl:max-w-62.5">
+					<TabsBar variant="secondary">
+						<Tab
+							title="Obstacles"
+							selected={tab.current === 'obstacles'}
+							selectTab={() => (tab.current = 'obstacles')}
 						/>
-					{:else if tab.current === 'waypoints'}
-						<WaypointsLegend
-							{map}
-							{hovered}
-							{waypoints}
-							onEnter={setHovered}
-							onLeave={setHovered}
-							onRemove={async (id) => {
-								await removeWaypointMutation.mutateAsync([id])
-								await waypointsQuery.refetch()
-							}}
+						<Tab
+							title="Waypoints"
+							selected={tab.current === 'waypoints'}
+							selectTab={() => (tab.current = 'waypoints')}
 						/>
-					{/if}
-				</ul>
-			</div>
+					</TabsBar>
+
+					<ul class="max-h-60 overflow-auto @2xl:h-[calc(100%-32px)] @2xl:max-h-none">
+						{#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="relative h-80 @2xl:h-auto @2xl:grow">
+					<MapLibre
+						class="relative"
+						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}
+						/>
 
-				<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 />
+						{#snippet layer()}
+							<Obstacles
+								{obstacles}
+								{hovered}
+								{setHovered}
+								{view}
+							/>
+						{/snippet}
+					</MapLibre>
 				</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>
 		</div>
 	{/snippet}
 </ConnectionStatus>

package/dist/components/widgets/slam/move-on-map.svelte

@@ -49,7 +49,7 @@
 			End position
 			<abbr class="text-disabled">(m)</abbr>
 		</h4>
-		<div class="flex flex-row gap-2 px-3 py-2.5">
+		<div class="flex flex-wrap gap-2 px-3 py-2.5">
 			<Label>
 				X
 

package/dist/components/widgets/slam/slam.svelte

@@ -191,78 +191,86 @@
 					>.
 				</div>
 			{:else}
-				<div class="flex divide-x">
-					<div class="divide-y">
-						<div class="m-4">
-							<RefetchController
-								{refetchInterval}
-								queries={[positionQuery, pointCloudMapQuery]}
+				<div class="@container">
+					<div class="flex flex-col @2xl:flex-row @2xl:divide-x">
+						<div class="divide-y">
+							<div class="m-4">
+								<RefetchController
+									{refetchInterval}
+									queries={[positionQuery, pointCloudMapQuery]}
+								/>
+							</div>
+
+							<ApiSection
+								title="GetPosition"
+								api="rdk:service:slam"
+							>
+								<Queries
+									queries={[propertiesQuery, positionQuery]}
+									contentCx="h-6"
+								>
+									{#if positionQuery.data !== undefined}
+										<Position position={positionQuery.data} />
+									{/if}
+								</Queries>
+							</ApiSection>
+
+							<ApiSection title="Motion">
+								<Label>
+									Base name
+
+									<Input
+										slot="input"
+										bind:value={baseName}
+									/>
+								</Label>
+								<Label>
+									Motion name
+
+									<Input
+										slot="input"
+										placeholder="builtin"
+										bind:value={motionName}
+									/>
+								</Label>
+							</ApiSection>
+
+							<MoveOnMap
+								{destination}
+								{updateDestination}
+								{moveOnMap}
+								{stopPlan}
+								lastError={moveOnMapMutation.error ?? stopPlanMutation.error}
 							/>
 						</div>
 
-						<ApiSection
-							title="GetPosition"
-							api="rdk:service:slam"
-						>
+						<div class="flex w-full">
 							<Queries
-								queries={[propertiesQuery, positionQuery]}
-								contentCx="h-6"
+								queries={[propertiesQuery, positionQuery, pointCloudMapQuery]}
+								contentCx="p-4 h-auto"
 							>
-								{#if positionQuery.data !== undefined}
-									<Position position={positionQuery.data} />
+								{#if positionQuery.data?.pose !== undefined && pointCloudMapQuery.data !== undefined}
+									<div class="h-80 w-full @2xl:h-full">
+										<SlamMap2D
+											pointcloud={pointCloudMapQuery.data}
+											basePose={{
+												// Position is returned in millimeters, but the map uses meters
+												x: positionQuery.data.pose.x / 1000,
+												y: positionQuery.data.pose.y / 1000,
+												theta: positionQuery.data.pose.theta,
+											}}
+											{motionPath}
+											destination={destination
+												? new Vector2(destination.x, destination.y)
+												: undefined}
+											helpers={true}
+											onClick={handleClick}
+										/>
+									</div>
 								{/if}
 							</Queries>
-						</ApiSection>
-
-						<ApiSection title="Motion">
-							<Label>
-								Base name
-
-								<Input
-									slot="input"
-									bind:value={baseName}
-								/>
-							</Label>
-							<Label>
-								Motion name
-
-								<Input
-									slot="input"
-									placeholder="builtin"
-									bind:value={motionName}
-								/>
-							</Label>
-						</ApiSection>
-
-						<MoveOnMap
-							{destination}
-							{updateDestination}
-							{moveOnMap}
-							{stopPlan}
-							lastError={moveOnMapMutation.error ?? stopPlanMutation.error}
-						/>
+						</div>
 					</div>
-
-					<Queries
-						queries={[propertiesQuery, positionQuery, pointCloudMapQuery]}
-						contentCx="p-4 h-auto"
-					>
-						{#if positionQuery.data?.pose !== undefined && pointCloudMapQuery.data !== undefined}
-							<SlamMap2D
-								pointcloud={pointCloudMapQuery.data}
-								basePose={{
-									// Position is returned in millimeters, but the map uses meters
-									x: positionQuery.data.pose.x / 1000,
-									y: positionQuery.data.pose.y / 1000,
-									theta: positionQuery.data.pose.theta,
-								}}
-								{motionPath}
-								destination={destination ? new Vector2(destination.x, destination.y) : undefined}
-								helpers={true}
-								onClick={handleClick}
-							/>
-						{/if}
-					</Queries>
 				</div>
 			{/if}
 		</Query>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "license": "Apache-2.0",
   "type": "module",
   "wireit": {