@viamrobotics/motion-tools 0.14.0 → 0.14.1

package/dist/components/Details.svelte

@@ -13,7 +13,7 @@
 <script lang="ts">
 	import { Check, Copy } from 'lucide-svelte'
 	import { useTask } from '@threlte/core'
-	import { Button, Icon } from '@viamrobotics/prime-core'
+	import { Button, Icon, Select, Input } from '@viamrobotics/prime-core'
 	import {
 		useSelectedObject,
 		useFocusedObject,
@@ -106,15 +106,18 @@
 	value,
 	ariaLabel,
 }: {
-	label: string
+	label?: string
 	value: string
 	ariaLabel: string
 })}
 	<div>
 		<span
 			class="text-subtle-2"
-			aria-label={`immutable ${ariaLabel}`}>{label}</span
+			aria-label={`immutable ${ariaLabel}`}
 		>
+			{label}
+		</span>
+
 		{value}
 	</div>
 {/snippet}
@@ -130,14 +133,16 @@
 	ariaLabel: string
 	onInput: (value: string) => void
 })}
-	<span class="text-subtle-2">{label}</span>
-	<input
-		type="number"
-		aria-label={`mutable ${ariaLabel}`}
-		class="max-w-24 min-w-0 flex-1 rounded border px-1 py-0.5 text-xs"
-		{value}
-		oninput={(e) => onInput((e.target as HTMLInputElement).value)}
-	/>
+	<div class="flex items-center gap-1">
+		<span class="text-subtle-2">{label}</span>
+		<Input
+			type="number"
+			aria-label={`mutable ${ariaLabel}`}
+			class="max-w-24 min-w-0 flex-1 rounded border px-1 py-0.5 text-xs"
+			{value}
+			on:input={(event) => onInput((event.target as HTMLInputElement).value)}
+		/>
+	</div>
 {/snippet}
 
 {#snippet DropDownField({
@@ -151,16 +156,15 @@
 	options: string[]
 	onChange: (value: string) => void
 })}
-	<select
+	<Select
 		aria-label={`dropdown ${ariaLabel}`}
-		class="w-full rounded border border-gray-300 px-2 py-1 text-sm"
 		{value}
-		onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
+		on:input={(event) => onChange((event.target as HTMLSelectElement).value)}
 	>
 		{#each options as option (option)}
 			<option value={option}>{option}</option>
 		{/each}
-	</select>
+	</Select>
 {/snippet}
 
 {#if object}
@@ -259,7 +263,6 @@
 					<strong class="font-semibold">parent frame</strong>
 					<div class="flex gap-3">
 						{@render ParentFrame({
-							label: 'name',
 							ariaLabel: 'parent frame name',
 							value: referenceFrame,
 							options: referenceFrameOptions,
@@ -494,16 +497,6 @@
 
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 
-		<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
-			{#if isFrameNode}
-				<Button
-					variant="danger"
-					class="mb-2 w-full"
-					onclick={() => detailConfigUpdater.deleteFrame()}>Delete Frame</Button
-				>
-			{/if}
-		</WeblabActive>
-
 		{#if focused.current}
 			<Button
 				class="w-full"
@@ -522,5 +515,15 @@
 				Enter object view
 			</Button>
 		{/if}
+
+		<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
+			{#if isFrameNode}
+				<Button
+					variant="danger"
+					class="mt-2 w-full"
+					onclick={() => detailConfigUpdater.deleteFrame()}>Delete Frame</Button
+				>
+			{/if}
+		</WeblabActive>
 	</div>
 {/if}

package/dist/components/SceneProviders.svelte

@@ -17,6 +17,7 @@
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
 	import { provideArrows } from '../hooks/useArrows.svelte'
+	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
 	}
@@ -42,6 +43,7 @@
 	provideObjects()
 	provideWorldStates()
 	provideArmClient(() => partID.current)
+	provideFramelessComponents()
 
 	const { focus } = provideSelection()
 </script>

package/dist/components/Tree/AddFrames.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { IconButton } from '@viamrobotics/prime-core'
 	import Drawer from './Drawer.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { useFramelessComponents } from '../../hooks/useFramelessComponents.svelte'
@@ -12,12 +13,13 @@
 		{#if framelessComponents.current.length > 0}
 			<ul class="space-y-1">
 				{#each framelessComponents.current as component (component)}
-					<li class="text-sm text-gray-700">
+					<li class="flex items-center gap-2 text-xs text-gray-700">
 						{component}
-						<button
-							class="focus:ring-opacity-50 ml-2 rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-							onclick={() => partConfig.createFrame(component)}>Add Frame</button
-						>
+						<IconButton
+							label="Add frame"
+							icon="plus"
+							onclick={() => partConfig.createFrame(component)}
+						/>
 					</li>
 				{/each}
 			</ul>

package/dist/components/Tree/Tree.svelte

@@ -156,10 +156,7 @@
 			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
 		</div>
 
-		<div
-			{...api.getTreeProps()}
-			class="w-60"
-		>
+		<div {...api.getTreeProps()}>
 			{#if rootChildren.length === 0}
 				<p class="text-subtle-2 px-2 py-4">No objects displayed</p>
 			{:else if rootChildren.length > 200}

package/dist/hooks/useFrames.svelte.js

@@ -19,10 +19,8 @@ export const provideFrames = (partID) => {
     const partConfig = usePartConfig();
     const environment = useEnvironment();
     observe.pre(() => [revision], () => {
-        if (!partConfig.isDirty) {
-            untrack(() => query.current).refetch();
-            logs.add('Fetching frames...');
-        }
+        untrack(() => query.current).refetch();
+        logs.add('Fetching frames...');
     });
     observe.pre(() => [partConfig.isDirty], () => {
         if (partConfig.isDirty) {

package/dist/hooks/usePartConfig.svelte.js

@@ -254,30 +254,35 @@ export class StandalonePartConfig {
                 this._localPartConfig = Struct.fromJson(configJson);
                 this._partName = partResponse?.part?.name;
                 const componentNameToFragmentId = {};
-                const fragementRequests = [];
+                const fragmentRequests = [];
                 if (configJson.fragments) {
                     for (const fragmentId of configJson.fragments) {
-                        fragementRequests.push(standalonePartConfigProps.viamClient()?.appClient.getFragment(fragmentId));
+                        fragmentRequests.push(standalonePartConfigProps.viamClient()?.appClient.getFragment(fragmentId));
                     }
-                    const fragementResponses = await Promise.all(fragementRequests);
-                    for (const fragmentResponse of fragementResponses) {
-                        const fragmentId = fragmentResponse?.id;
-                        if (!fragmentId) {
-                            continue;
-                        }
-                        const components = fragmentResponse?.fragment?.fields['components'].kind;
-                        if (components?.case === 'listValue') {
-                            for (const component of components.value.values) {
-                                if (component.kind.case === 'structValue') {
-                                    const componentName = component.kind.value.fields['name'].kind;
-                                    if (componentName.case === 'stringValue') {
-                                        componentNameToFragmentId[componentName.value] = fragmentId;
+                    try {
+                        const fragementResponses = await Promise.all(fragmentRequests);
+                        for (const fragmentResponse of fragementResponses) {
+                            const fragmentId = fragmentResponse?.id;
+                            if (!fragmentId) {
+                                continue;
+                            }
+                            const components = fragmentResponse?.fragment?.fields['components'].kind;
+                            if (components?.case === 'listValue') {
+                                for (const component of components.value.values) {
+                                    if (component.kind.case === 'structValue') {
+                                        const componentName = component.kind.value.fields['name'].kind;
+                                        if (componentName.case === 'stringValue') {
+                                            componentNameToFragmentId[componentName.value] = fragmentId;
+                                        }
                                     }
                                 }
                             }
                         }
+                        this._componentNameToFragmentId = componentNameToFragmentId;
+                    }
+                    catch {
+                        /* Do nothing */
                     }
-                    this._componentNameToFragmentId = componentNameToFragmentId;
                 }
             };
             initLocalConfig();

package/dist/hooks/usePose.svelte.js

@@ -6,6 +6,8 @@ import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
 import { fromStore, toStore } from 'svelte/store';
 import { useMotionClient } from './useMotionClient.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
+import { observe } from '@threlte/core';
+import { untrack } from 'svelte';
 export const usePose = (name, parent) => {
     const { refreshRates } = useMachineSettings();
     const partID = usePartID();
@@ -40,6 +42,11 @@ export const usePose = (name, parent) => {
         },
     }));
     const query = fromStore(createQuery(toStore(() => options)));
+    observe.pre(() => [environment.current.viewerMode], () => {
+        if (environment.current.viewerMode === 'monitor') {
+            untrack(() => query.current).refetch();
+        }
+    });
     return {
         get current() {
             if (resource?.subtype === 'arm') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",