@viamrobotics/motion-tools 1.12.2 → 1.13.0

package/dist/hooks/usePartConfig.svelte.js

@@ -1,25 +1,19 @@
 import { createFrame } from '../frame';
 import { createPoseFromFrame } from '../transform';
 import { Struct, Pose } from '@viamrobotics/sdk';
+import { createAppMutation, createAppQuery } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext } from 'svelte';
 const key = Symbol('part-config-context');
-export const providePartConfig = (params) => {
-    const { appEmbeddedPartConfigProps, standalonePartConfigProps } = params();
-    let _localPartConfig;
-    if (appEmbeddedPartConfigProps) {
-        _localPartConfig = new AppEmbeddedPartConfig(appEmbeddedPartConfigProps);
-    }
-    else if (standalonePartConfigProps) {
-        _localPartConfig = new StandalonePartConfig(standalonePartConfigProps);
-    }
-    else {
-        throw new Error('No part config provided');
-    }
+export const providePartConfig = (partID, params) => {
+    const props = $derived(params());
+    const config = $derived(props ? useEmbeddedPartConfig(props) : useStandalonePartConfig(partID));
+    const getCurrent = () => {
+        return (config.current.toJson?.() ?? { components: [] });
+    };
+    const current = $derived(getCurrent());
     const createFragmentFrame = (fragmentId, componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        if (newConfig.fragment_mods === undefined) {
-            newConfig.fragment_mods = [];
-        }
+        const newConfig = getCurrent();
+        newConfig.fragment_mods ??= [];
         let fragmentMod = newConfig.fragment_mods.find((mod) => mod.fragment_id === fragmentId);
         if (fragmentMod === undefined) {
             fragmentMod = {
@@ -35,23 +29,19 @@ export const providePartConfig = (params) => {
             },
         };
         fragmentMod.mods.push(frame);
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const createPartFrame = (componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
+        const newConfig = getCurrent();
         const component = newConfig?.components?.find((comp) => comp.name === componentName);
         if (component) {
             component.frame = createFrame();
         }
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const updateFragmentFrame = (fragmentId, componentName, referenceFrame, framePosition, frameGeometry) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        if (newConfig.fragment_mods === undefined) {
-            newConfig.fragment_mods = [];
-        }
+        const newConfig = getCurrent();
+        newConfig.fragment_mods ??= [];
         let fragmentMod = newConfig.fragment_mods.find((mod) => mod.fragment_id === fragmentId);
         if (fragmentMod === undefined) {
             fragmentMod = {
@@ -99,11 +89,12 @@ export const providePartConfig = (params) => {
         else {
             fragmentMod.mods.push(frame);
         }
-        _localPartConfig.setLocalPartConfig(Struct.fromJson(newConfig));
+        config.set(newConfig);
     };
     const updatePartFrame = (componentName, referenceFrame, pose, geometry) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        const component = newConfig?.components?.find((comp) => comp.name === componentName);
+        const newConfig = getCurrent();
+        const component = newConfig.components?.find(({ name }) => name === componentName);
+        console.log('hi', newConfig, componentName);
         if (!component) {
             return;
         }
@@ -131,24 +122,20 @@ export const providePartConfig = (params) => {
                 }
             }
         }
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const deletePartFrame = (componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        const component = newConfig?.components?.find((comp) => comp.name === componentName);
+        const newConfig = getCurrent();
+        const component = newConfig?.components?.find(({ name }) => name === componentName);
         if (!component) {
             return;
         }
         delete component.frame;
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const deleteFragmentFrame = (fragmentId, componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        if (newConfig.fragment_mods === undefined) {
-            newConfig.fragment_mods = [];
-        }
+        const newConfig = getCurrent();
+        newConfig.fragment_mods ??= [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let fragmentMod = newConfig.fragment_mods.find((mod) => mod.fragment_id === fragmentId);
         if (fragmentMod === undefined) {
@@ -164,12 +151,23 @@ export const providePartConfig = (params) => {
                 [modUnSetPath]: '',
             },
         });
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     setContext(key, {
+        get current() {
+            return current;
+        },
+        get componentNameToFragmentId() {
+            return config.componentNameToFragmentId;
+        },
+        get isDirty() {
+            return config.isDirty;
+        },
+        get hasEditPermissions() {
+            return config.hasEditPermissions;
+        },
         updateFrame: (componentName, referenceFrame, framePosition, frameGeometry) => {
-            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            const fragmentId = config.componentNameToFragmentId[componentName];
             if (fragmentId !== undefined) {
                 updateFragmentFrame(fragmentId, componentName, referenceFrame, framePosition, frameGeometry);
             }
@@ -178,7 +176,7 @@ export const providePartConfig = (params) => {
             }
         },
         deleteFrame: (componentName) => {
-            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            const fragmentId = config.componentNameToFragmentId[componentName];
             if (fragmentId !== undefined) {
                 deleteFragmentFrame(fragmentId, componentName);
             }
@@ -187,7 +185,7 @@ export const providePartConfig = (params) => {
             }
         },
         createFrame: (componentName) => {
-            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            const fragmentId = config.componentNameToFragmentId[componentName];
             if (fragmentId !== undefined) {
                 createFragmentFrame(fragmentId, componentName);
             }
@@ -195,137 +193,112 @@ export const providePartConfig = (params) => {
                 createPartFrame(componentName);
             }
         },
-        saveLocalPartConfig: () => {
-            _localPartConfig.saveLocalPartConfig?.();
-        },
-        resetLocalPartConfig: () => {
-            _localPartConfig.resetLocalPartConfig?.();
+        save: () => config.save?.(),
+        discardChanges: () => config.discardChanges?.(),
+    });
+};
+export const usePartConfig = () => {
+    return getContext(key);
+};
+const useEmbeddedPartConfig = (props) => {
+    return {
+        hasEditPermissions: true,
+        get isDirty() {
+            return props.isDirty;
         },
-        get localPartConfig() {
-            return _localPartConfig.getLocalPartConfig();
+        get current() {
+            return props.current ?? new Struct();
         },
         get componentNameToFragmentId() {
-            return _localPartConfig.componentNameToFragmentId();
-        },
-        get isDirty() {
-            return _localPartConfig.isDirty();
+            return props.componentToFragId;
         },
-        get hasEditPermissions() {
-            return _localPartConfig.hasEditPermissions();
+        set(config) {
+            const struct = Struct.fromJson(config);
+            return props.setLocalPartConfig(struct);
         },
-    });
-};
-export const usePartConfig = () => {
-    return getContext(key);
+    };
 };
-class AppEmbeddedPartConfig {
-    _appEmbeddedPartConfigProps;
-    constructor(appEmbeddedPartConfigProps) {
-        this._appEmbeddedPartConfigProps = appEmbeddedPartConfigProps;
-    }
-    isDirty() {
-        return this._appEmbeddedPartConfigProps.isDirty();
-    }
-    getLocalPartConfig() {
-        return this._appEmbeddedPartConfigProps.getLocalPartConfig();
-    }
-    setLocalPartConfig(config) {
-        return this._appEmbeddedPartConfigProps.setLocalPartConfig(config);
-    }
-    componentNameToFragmentId() {
-        return this._appEmbeddedPartConfigProps.getComponentToFragId();
-    }
-    hasEditPermissions() {
-        return true;
-    }
-}
-class StandalonePartConfig {
-    _standalonePartConfigProps;
-    _isDirty = $state(false);
-    _hasEditPermissions = $state(false);
-    _networkPartConfig = $state();
-    _localPartConfig = $state();
-    _partName = $state();
-    _componentNameToFragmentId = $state();
-    constructor(standalonePartConfigProps) {
-        this._standalonePartConfigProps = standalonePartConfigProps;
-        $effect.pre(() => {
-            const initLocalConfig = async () => {
-                const partResponse = await standalonePartConfigProps
-                    .viamClient()
-                    ?.appClient.getRobotPart(standalonePartConfigProps.partID());
-                if (JSON.parse(partResponse?.configJson ?? 'null') === null) {
-                    // no config returned here indicates this api key has no permission to update config
-                    return;
-                }
-                this._hasEditPermissions = true;
-                const configJson = JSON.parse(partResponse?.configJson ?? '{}');
-                this._networkPartConfig = Struct.fromJson(configJson);
-                this._localPartConfig = Struct.fromJson(configJson);
-                this._partName = partResponse?.part?.name;
-                const componentNameToFragmentId = {};
-                const fragmentRequests = [];
-                if (configJson.fragments) {
-                    for (const fragmentId of configJson.fragments) {
-                        //TODO: right now the json could be just a list of strings or an object with an id prop
-                        const fragId = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
-                        fragmentRequests.push(standalonePartConfigProps.viamClient()?.appClient.getFragment(fragId));
-                    }
-                    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;
-                                    }
-                                }
-                            }
+const useStandalonePartConfig = (partID) => {
+    const partQuery = createAppQuery('getRobotPart', () => [partID()], {
+        refetchInterval: false,
+    });
+    const partName = $derived(partQuery.data?.part?.name);
+    const configJSON = $derived.by(() => {
+        if (!partQuery.data?.configJson) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(partQuery.data.configJson);
+        }
+        catch {
+            return undefined;
+        }
+    });
+    let networkPartConfig = $derived(configJSON ? Struct.fromJson(configJSON) : undefined);
+    let current = $state.raw();
+    let isDirty = $state(false);
+    const hasEditPermissions = $derived(networkPartConfig !== undefined);
+    const fragmentQueries = $derived((configJSON?.fragments ?? []).map((fragmentId) => {
+        const id = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
+        return createAppQuery('getFragment', () => [id], { refetchInterval: false });
+    }));
+    const componentNameToFragmentId = $derived.by(() => {
+        const results = {};
+        for (const query of fragmentQueries) {
+            if (!query.data) {
+                continue;
+            }
+            const fragmentId = query.data.id;
+            const components = query.data?.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') {
+                            results[componentName.value] = fragmentId;
                         }
                     }
-                    this._componentNameToFragmentId = componentNameToFragmentId;
                 }
-            };
-            initLocalConfig();
-        });
-    }
-    getLocalPartConfig() {
-        return this._localPartConfig ?? new Struct();
-    }
-    setLocalPartConfig(config) {
-        this._localPartConfig = config;
-        this._isDirty = true;
-    }
-    isDirty() {
-        return this._isDirty;
-    }
-    hasEditPermissions() {
-        return this._hasEditPermissions;
-    }
-    componentNameToFragmentId() {
-        return this._componentNameToFragmentId ?? {};
-    }
-    async saveLocalPartConfig() {
-        if (!this._localPartConfig || !this._partName) {
-            return;
+            }
         }
-        this._networkPartConfig = this._localPartConfig;
-        await this._standalonePartConfigProps
-            .viamClient()
-            ?.appClient.updateRobotPart(this._standalonePartConfigProps.partID(), this._partName, this._localPartConfig);
-        this._isDirty = false;
-    }
-    async resetLocalPartConfig() {
-        if (!this._networkPartConfig) {
+        return results;
+    });
+    $effect.pre(() => {
+        if (!networkPartConfig) {
+            // no config returned here indicates this api key has no permission to update config
             return;
         }
-        this._localPartConfig = this._networkPartConfig;
-        this._isDirty = false;
-    }
-}
+        current = networkPartConfig;
+    });
+    const updateRobotPartMutation = createAppMutation('updateRobotPart');
+    return {
+        get current() {
+            return current ?? new Struct();
+        },
+        get isDirty() {
+            return isDirty;
+        },
+        get hasEditPermissions() {
+            return hasEditPermissions;
+        },
+        get componentNameToFragmentId() {
+            return componentNameToFragmentId;
+        },
+        set(config) {
+            current = Struct.fromJson(config);
+            isDirty = true;
+        },
+        async save() {
+            if (!current || !partName) {
+                return;
+            }
+            networkPartConfig = current;
+            await updateRobotPartMutation.mutateAsync([partID(), partName, current]);
+            isDirty = false;
+        },
+        discardChanges() {
+            current = networkPartConfig;
+            isDirty = false;
+        },
+    };
+};

package/dist/hooks/useVisibility.svelte.js

@@ -1,20 +1,8 @@
-import { get, set } from 'idb-keyval';
 import { getContext, setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 const key = Symbol('object-visibility-context');
-const idbKey = 'object-visibility';
 export const provideVisibility = () => {
     const map = new SvelteMap();
-    get(idbKey).then((entries) => {
-        if (entries) {
-            for (const [key, value] of entries) {
-                map.set(key, value);
-            }
-        }
-    });
-    $effect(() => {
-        set(idbKey, [...map.entries()]);
-    });
     setContext(key, map);
 };
 export const useVisibility = () => {

package/package.json

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

package/dist/components/overlay/left-pane/Logs.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import { useLogs } from '../../../hooks/useLogs.svelte'
-	import Drawer from './Drawer.svelte'
-
-	const logs = useLogs()
-</script>
-
-<Drawer name="Logs">
-	{#snippet titleAlert()}
-		{#if logs.warnings.length > 0}
-			<span class="mr-1 rounded bg-yellow-700 px-1 py-0.5 text-xs text-white">
-				{logs.warnings.length}
-			</span>
-		{/if}
-
-		{#if logs.errors.length > 0}
-			<span class="mr-1 rounded bg-red-700 px-1 py-0.5 text-xs text-white">
-				{logs.errors.length}
-			</span>
-		{/if}
-	{/snippet}
-
-	<div class="flex h-64 flex-col gap-2 overflow-auto p-3">
-		{#each logs.current as log (log.uuid)}
-			<div>
-				<div class="flex flex-wrap items-center gap-1.5">
-					<div
-						class={[
-							'h-2 w-2 rounded-full',
-							{
-								'bg-danger-dark': log.level === 'error',
-								'bg-amber-300': log.level === 'warn',
-								'bg-blue-400': log.level === 'info',
-							},
-						]}
-					></div>
-					<div class="text-subtle-2">{log.timestamp}</div>
-				</div>
-				<div>
-					{#if log.count > 1}
-						<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
-							{log.count}
-						</span>
-					{/if}
-					{log.message}
-				</div>
-			</div>
-		{:else}
-			No logs
-		{/each}
-	</div>
-</Drawer>