@viamrobotics/motion-tools 0.10.0 → 0.11.0

package/dist/WorldObject.svelte.d.ts

@@ -12,6 +12,7 @@ export type Geometries = Geometry['geometryType'] | PointsGeometry | LinesGeomet
 export type Metadata = {
     colors?: Float32Array;
     color?: ColorRepresentation;
+    opacity?: number;
     gltf?: {
         scene: Object3D;
     };

package/dist/WorldObject.svelte.js

@@ -1,4 +1,4 @@
-import { BatchedMesh, Box3, MathUtils, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, Color, MathUtils, Object3D, Vector3, } from 'three';
 import { createPose } from './transform';
 export class WorldObject {
     uuid;
@@ -18,8 +18,50 @@ export class WorldObject {
         }
     }
 }
+const unwrapValue = (value) => {
+    if (!value?.kind)
+        return value;
+    switch (value.kind.case) {
+        case 'numberValue':
+        case 'stringValue':
+        case 'boolValue':
+            return value.kind.value;
+        case 'structValue': {
+            // Recursively unwrap nested struct
+            const result = {};
+            for (const [key, val] of Object.entries(value.kind.value.fields || {})) {
+                result[key] = unwrapValue(val);
+            }
+            return result;
+        }
+        case 'listValue':
+            return value.kind.value.values?.map(unwrapValue) || [];
+        case 'nullValue':
+            return null;
+        default:
+            return value.kind.value;
+    }
+};
+const parseMetadata = (metadata) => {
+    let json = {};
+    for (const [k, v] of Object.entries(metadata)) {
+        const unwrappedValue = unwrapValue(v);
+        // TODO: Remove special case and add better handling for metadata
+        if (k === 'color' && unwrappedValue && typeof unwrappedValue === 'object') {
+            const { r, g, b } = unwrappedValue;
+            json[k] = new Color().setRGB(r / 255, g / 255, b / 255);
+        }
+        else {
+            json = { ...json, [k]: unwrappedValue };
+        }
+    }
+    return json;
+};
 export const fromTransform = (transform) => {
-    const metadata = { ...transform.metadata?.fields };
+    const metadata = transform.metadata
+        ? parseMetadata(transform.metadata.fields)
+        : {};
     const worldObject = new WorldObject(transform.referenceFrame, transform.poseInObserverFrame?.pose, transform.poseInObserverFrame?.referenceFrame, transform.physicalObject?.geometryType, metadata);
+    worldObject.uuid = transform.uuidString;
     return worldObject;
 };

package/dist/components/Geometry.svelte

@@ -109,7 +109,7 @@
 			{color}
 			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
 			transparent
-			opacity={0.7}
+			opacity={metadata.opacity ?? 0.7}
 		/>
 
 		{#if geo}

package/dist/components/SceneProviders.svelte

@@ -14,7 +14,7 @@
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { provideOrigin } from './xr/useOrigin.svelte'
-
+	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
 	}
@@ -37,6 +37,7 @@
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
 	provideObjects()
+	provideWorldStates()
 
 	const { focus } = provideSelection()
 </script>

package/dist/components/Tree/buildTree.d.ts

@@ -1,3 +1,4 @@
+import type { useWorldStates } from '../../hooks/useWorldState.svelte';
 import type { WorldObject } from '../../WorldObject.svelte';
 export interface TreeNode {
     id: string;
@@ -8,7 +9,4 @@ export interface TreeNode {
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
-export declare const buildTreeNodes: (objects: WorldObject[], worldStates: {
-    name: string;
-    objects: WorldObject[];
-}[]) => TreeNode[];
+export declare const buildTreeNodes: (objects: WorldObject[], worldStates: ReturnType<typeof useWorldStates>["current"]) => TreeNode[];

package/dist/components/Tree/buildTree.js

@@ -25,15 +25,14 @@ export const buildTreeNodes = (objects, worldStates) => {
             }
         }
     }
-    for (const worldState of worldStates) {
+    for (const worldState of Object.values(worldStates)) {
         const node = {
             name: worldState.name,
             id: worldState.name,
             children: [],
             href: `/world-state/${worldState.name}`,
         };
-        console.log('worldState', worldState);
-        for (const object of worldState.objects) {
+        for (const object of worldState.worldObjects) {
             const child = {
                 name: object.name,
                 id: object.uuid,
@@ -42,7 +41,6 @@ export const buildTreeNodes = (objects, worldStates) => {
             };
             nodeMap.set(object.name, child);
             node.children?.push(child);
-            console.log('child', child);
         }
         nodeMap.set(worldState.name, node);
         rootNodes.push(node);

package/dist/components/WorldObjects.svelte

@@ -68,8 +68,8 @@
 	</Portal>
 {/each}
 
-{#each worldStates.current as { name, objects } (name)}
-	<WorldState {objects} />
+{#each worldStates.names as { name } (name)}
+	<WorldState worldObjects={worldStates.current[name].worldObjects} />
 {/each}
 
 {#each points.current as object (object.uuid)}

package/dist/components/WorldState.svelte

@@ -6,13 +6,13 @@
 	import { WorldObject } from '../WorldObject.svelte'
 
 	interface Props {
-		objects: WorldObject[]
+		worldObjects: WorldObject[]
 	}
 
-	let { objects }: Props = $props()
+	let { worldObjects }: Props = $props()
 </script>
 
-{#each objects as object (object.uuid)}
+{#each worldObjects as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Frame
 			uuid={object.uuid}

package/dist/components/WorldState.svelte.d.ts

@@ -1,6 +1,6 @@
 import { WorldObject } from '../WorldObject.svelte';
 interface Props {
-    objects: WorldObject[];
+    worldObjects: WorldObject[];
 }
 declare const WorldState: import("svelte").Component<Props, {}, "">;
 type WorldState = ReturnType<typeof WorldState>;

package/dist/hooks/useWorldState.svelte.d.ts

@@ -1,19 +1,58 @@
-import { type TransformChangeEvent } from '@viamrobotics/sdk';
-import { WorldObject } from '../WorldObject.svelte';
-export declare const useWorldStates: () => {
-    readonly names: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").ResourceName>[];
-    readonly current: {
-        readonly name: string;
-        readonly objects: WorldObject<import("../WorldObject.svelte").Geometries>[];
-        readonly listUUIDs: import("@tanstack/svelte-query").QueryObserverResult<string[]>;
-        readonly getTransforms: import("@tanstack/svelte-query").QueryObserverResult<import("@viamrobotics/sdk").TransformWithUUID>[] | undefined;
-        readonly changeStream: import("@tanstack/svelte-query").DefinedQueryObserverResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverLoadingErrorResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverLoadingResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverPendingResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverPlaceholderResult<TransformChangeEvent[], Error>;
-    }[];
+import { type TransformWithUUID, ResourceName } from '@viamrobotics/sdk';
+interface Context {
+    names: ResourceName[];
+    current: Record<string, ReturnType<typeof createWorldState>>;
+}
+export declare const provideWorldStates: () => void;
+export declare const useWorldStates: () => Context;
+export declare const useWorldState: (resourceName: () => string) => {
+    readonly name: string;
+    readonly transforms: TransformWithUUID[];
+    readonly worldObjects: import("../WorldObject.svelte").WorldObject<{
+        case: undefined;
+        value?: undefined;
+    } | {
+        case: "sphere";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Sphere>;
+    } | {
+        case: "box";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").RectangularPrism>;
+    } | {
+        case: "capsule";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Capsule>;
+    } | {
+        case: "mesh";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Mesh>;
+    } | {
+        case: "pointcloud";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").PointCloud>;
+    }>[];
+    readonly listUUIDs: import("@tanstack/svelte-query").QueryObserverResult<string[]>;
+    readonly getTransforms: import("@tanstack/svelte-query").QueryObserverResult<TransformWithUUID>[] | undefined;
 };
-export declare const useWorldState: (partID: () => string, resourceName: () => string) => {
+declare const createWorldState: (partID: () => string, resourceName: () => string) => {
     readonly name: string;
-    readonly objects: WorldObject<import("../WorldObject.svelte").Geometries>[];
+    readonly transforms: TransformWithUUID[];
+    readonly worldObjects: import("../WorldObject.svelte").WorldObject<{
+        case: undefined;
+        value?: undefined;
+    } | {
+        case: "sphere";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Sphere>;
+    } | {
+        case: "box";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").RectangularPrism>;
+    } | {
+        case: "capsule";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Capsule>;
+    } | {
+        case: "mesh";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Mesh>;
+    } | {
+        case: "pointcloud";
+        value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").PointCloud>;
+    }>[];
     readonly listUUIDs: import("@tanstack/svelte-query").QueryObserverResult<string[]>;
-    readonly getTransforms: import("@tanstack/svelte-query").QueryObserverResult<import("@viamrobotics/sdk").TransformWithUUID>[] | undefined;
-    readonly changeStream: import("@tanstack/svelte-query").DefinedQueryObserverResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverLoadingErrorResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverLoadingResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverPendingResult<TransformChangeEvent[], Error> | import("@tanstack/svelte-query").QueryObserverPlaceholderResult<TransformChangeEvent[], Error>;
+    readonly getTransforms: import("@tanstack/svelte-query").QueryObserverResult<TransformWithUUID>[] | undefined;
 };
+export {};

package/dist/hooks/useWorldState.svelte.js

@@ -1,88 +1,145 @@
-import { toPath, getInUnsafe, mutInUnsafe } from '@thi.ng/paths';
-import { WorldStateStoreClient, TransformChangeType, } from '@viamrobotics/sdk';
+import { WorldStateStoreClient, TransformChangeType, ResourceName, } from '@viamrobotics/sdk';
 import { createResourceClient, createResourceQuery, createResourceStream, useResourceNames, } from '@viamrobotics/svelte-sdk';
-import { fromTransform, WorldObject } from '../WorldObject.svelte';
+import { fromTransform } from '../WorldObject.svelte';
 import { usePartID } from './usePartID.svelte';
-export const useWorldStates = () => {
+import { setInUnsafe } from '@thi.ng/paths';
+import { getContext, setContext } from 'svelte';
+const key = Symbol('world-state-context');
+const worker = new Worker(new URL('../workers/worldStateWorker.ts', import.meta.url), {
+    type: 'module',
+});
+export const provideWorldStates = () => {
     const partID = usePartID();
     const resourceNames = useResourceNames(() => partID.current, 'world_state_store');
-    const current = $derived.by(() => resourceNames.current.map(({ name }) => useWorldState(() => partID.current, () => name)));
-    return {
+    const current = $derived.by(() => Object.fromEntries(resourceNames.current.map(({ name }) => [
+        name,
+        createWorldState(() => partID.current, () => name),
+    ])));
+    setContext(key, {
         get names() {
             return resourceNames.current;
         },
         get current() {
             return current;
         },
-    };
+    });
 };
-export const useWorldState = (partID, resourceName) => {
+export const useWorldStates = () => {
+    return getContext(key);
+};
+export const useWorldState = (resourceName) => {
+    return useWorldStates().current[resourceName()];
+};
+const createWorldState = (partID, resourceName) => {
     const client = createResourceClient(WorldStateStoreClient, partID, resourceName);
-    let initialized = false;
+    let initialized = $state(false);
+    let transforms = $state.raw({});
+    const transformsList = $derived.by(() => Object.values(transforms));
+    const worldObjectsList = $derived.by(() => transformsList.map(fromTransform));
+    let pendingEvents = [];
+    let flushScheduled = false;
     const listUUIDs = createResourceQuery(client, 'listUUIDs');
     const getTransforms = $derived(listUUIDs.current.data?.map((uuid) => {
         return createResourceQuery(client, 'getTransform', () => [uuid], () => ({ refetchInterval: false }));
     }));
-    const changeStream = createResourceStream(client, 'streamTransformChanges');
-    const worldObjects = $state({});
-    const initializeCurrent = (objects) => {
-        for (const object of objects) {
-            worldObjects[object.uuid] = object;
+    const changeStream = createResourceStream(client, 'streamTransformChanges', {
+        refetchMode: 'replace',
+    });
+    const initialize = (initial) => {
+        const next = { ...transforms };
+        for (const transform of initial) {
+            next[transform.uuidString] = transform;
         }
+        transforms = next;
         initialized = true;
     };
-    $effect(() => {
-        if (!getTransforms) {
+    const applyEvents = (events) => {
+        if (events.length === 0)
             return;
+        const next = { ...transforms };
+        for (const event of events) {
+            switch (event.type) {
+                case TransformChangeType.ADDED:
+                    next[event.uuidString] = event.transform;
+                    break;
+                case TransformChangeType.REMOVED:
+                    delete next[event.uuidString];
+                    break;
+                case TransformChangeType.UPDATED: {
+                    if (event.changes.length === 0)
+                        continue;
+                    let toUpdate = next[event.uuidString];
+                    if (!toUpdate)
+                        continue;
+                    for (const [path, value] of event.changes) {
+                        toUpdate = setInUnsafe(toUpdate, path, value);
+                    }
+                    next[event.uuidString] = toUpdate;
+                    break;
+                }
+            }
         }
-        if (initialized) {
+        transforms = next;
+    };
+    const scheduleFlush = () => {
+        if (flushScheduled)
+            return;
+        flushScheduled = true;
+        requestAnimationFrame(() => {
+            const toApply = pendingEvents;
+            if (toApply.length === 0)
+                return;
+            applyEvents(toApply);
+            flushScheduled = false;
+            pendingEvents = [];
+        });
+    };
+    $effect(() => {
+        if (!getTransforms)
+            return;
+        if (initialized)
             return;
-        }
         const queries = getTransforms.map((query) => query.current);
-        if (queries.some((query) => query?.isLoading)) {
+        if (queries.some((query) => query?.isLoading))
             return;
-        }
-        const objects = [];
-        for (const transform of queries.flatMap((query) => query.data) ?? []) {
-            if (transform === undefined) {
-                continue;
-            }
-            objects.push(fromTransform(transform));
-        }
-        initializeCurrent(objects);
-    });
-    const processChangeEvent = async (event) => {
-        if (event.transform === undefined) {
+        const data = queries
+            .flatMap((query) => query?.data ?? [])
+            .filter((transform) => transform !== undefined);
+        if (data.length === 0)
             return;
-        }
-        switch (event.changeType) {
-            case TransformChangeType.ADDED:
-                worldObjects[event.transform.uuidString] = fromTransform(event.transform);
-                break;
-            case TransformChangeType.UPDATED:
-                for (const path of event.updatedFields?.paths ?? []) {
-                    // Type inference is tough here, so we use unsafe APIs
-                    const paths = toPath(path);
-                    const next = getInUnsafe(event.transform, paths);
-                    mutInUnsafe(worldObjects[event.transform.uuidString], paths, next);
-                }
-                break;
-            case TransformChangeType.REMOVED:
-                delete worldObjects[event.transform.uuidString];
-                break;
-        }
-    };
+        initialize(data);
+    });
     $effect(() => {
-        for (const event of changeStream.current?.data ?? []) {
-            void processChangeEvent(event);
-        }
+        worker.onmessage = (e) => {
+            if (e.data.type !== 'process')
+                return;
+            const { events } = e.data ?? { events: [] };
+            if (events.length === 0)
+                return;
+            pendingEvents.push(...events);
+            scheduleFlush();
+        };
+        return () => {
+            worker.terminate();
+        };
+    });
+    $effect.pre(() => {
+        if (changeStream.current?.data === undefined)
+            return;
+        const events = changeStream.current.data.filter((event) => event.transform !== undefined);
+        if (events.length === 0)
+            return;
+        worker.postMessage({ type: 'change', events });
     });
     return {
         get name() {
             return resourceName();
         },
-        get objects() {
-            return Object.values(worldObjects);
+        get transforms() {
+            return transformsList;
+        },
+        get worldObjects() {
+            return worldObjectsList;
         },
         get listUUIDs() {
             return listUUIDs.current;
@@ -90,8 +147,5 @@ export const useWorldState = (partID, resourceName) => {
         get getTransforms() {
             return getTransforms?.map((query) => query.current);
         },
-        get changeStream() {
-            return changeStream.current;
-        },
     };
 };

package/dist/workers/worldStateWorker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/workers/worldStateWorker.js

@@ -0,0 +1,109 @@
+import { getInUnsafe, toPath } from '@thi.ng/paths';
+import { TransformChangeType, } from '@viamrobotics/sdk';
+const createEntry = (event) => {
+    if (!event.transform)
+        return undefined;
+    switch (event.changeType) {
+        case TransformChangeType.ADDED:
+            return {
+                type: event.changeType,
+                uuidString: event.transform.uuidString,
+                transform: event.transform,
+            };
+        case TransformChangeType.REMOVED:
+            return {
+                type: event.changeType,
+                uuidString: event.transform.uuidString,
+            };
+        case TransformChangeType.UPDATED: {
+            const changes = {};
+            const paths = toPath(event.updatedFields?.paths ?? []);
+            for (const path of paths) {
+                changes[path.toString()] = getInUnsafe(event.transform, path);
+            }
+            return {
+                type: event.changeType,
+                uuidString: event.transform.uuidString,
+                transform: event.transform,
+                changes,
+            };
+        }
+    }
+};
+self.onmessage = (e) => {
+    const { events } = e.data;
+    if (events.length === 0)
+        return;
+    const eventsByUUID = new Map();
+    for (const event of events) {
+        const entry = createEntry(event);
+        if (!entry)
+            continue;
+        const uuid = entry.uuidString;
+        const existing = eventsByUUID.get(uuid);
+        if (!existing) {
+            eventsByUUID.set(uuid, entry);
+            continue;
+        }
+        switch (entry.type) {
+            case TransformChangeType.REMOVED:
+                eventsByUUID.set(uuid, entry);
+                break;
+            case TransformChangeType.ADDED:
+                if (existing.type !== TransformChangeType.REMOVED)
+                    eventsByUUID.set(uuid, entry);
+                break;
+            case TransformChangeType.UPDATED:
+                // merge with existing updated event
+                if (existing.type === TransformChangeType.UPDATED) {
+                    const paths = toPath(event.updatedFields?.paths ?? []);
+                    if (paths.length === 0)
+                        continue;
+                    for (const path of paths) {
+                        if (!existing.changes)
+                            existing.changes = {};
+                        existing.changes[path.toString()] = getInUnsafe(entry.transform, path);
+                    }
+                    existing.transform = event.transform;
+                }
+                break;
+        }
+    }
+    const processedEvents = [];
+    for (const entry of eventsByUUID.values()) {
+        switch (entry.type) {
+            case TransformChangeType.ADDED:
+                if (!entry.transform)
+                    continue;
+                processedEvents.push({
+                    type: TransformChangeType.ADDED,
+                    uuidString: entry.uuidString,
+                    transform: entry.transform,
+                });
+                break;
+            case TransformChangeType.REMOVED:
+                processedEvents.push({
+                    type: TransformChangeType.REMOVED,
+                    uuidString: entry.uuidString,
+                });
+                break;
+            case TransformChangeType.UPDATED: {
+                const changes = Object.entries(entry.changes ?? {});
+                if (changes.length === 0)
+                    continue;
+                processedEvents.push({
+                    type: TransformChangeType.UPDATED,
+                    uuidString: entry.uuidString,
+                    changes,
+                });
+                break;
+            }
+        }
+    }
+    const message = {
+        type: 'process',
+        events: processedEvents,
+    };
+    self.postMessage(message);
+};
+export {};

package/dist/world-state-messages.d.ts

@@ -0,0 +1,23 @@
+import type { TransformChangeEvent, TransformChangeType, TransformWithUUID } from '@viamrobotics/sdk';
+export type ChangeMessage = {
+    type: 'change';
+    events: TransformChangeEvent[];
+};
+export type AddedEvent = {
+    type: TransformChangeType.ADDED;
+    uuidString: string;
+    transform: TransformWithUUID;
+};
+export type RemovedEvent = {
+    type: TransformChangeType.REMOVED;
+    uuidString: string;
+};
+export type UpdatedEvent = {
+    type: TransformChangeType.UPDATED;
+    uuidString: string;
+    changes: [path: string, value: unknown][];
+};
+export type ProcessMessage = {
+    type: 'process';
+    events: (AddedEvent | RemovedEvent | UpdatedEvent)[];
+};

package/dist/world-state-messages.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -22,8 +22,8 @@
     "@sveltejs/vite-plugin-svelte": "6.1.4",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/vite": "4.1.13",
-    "@tanstack/svelte-query": "5.86.0",
-    "@tanstack/svelte-query-devtools": "5.86.0",
+    "@tanstack/svelte-query": "5.87.1",
+    "@tanstack/svelte-query-devtools": "5.87.3",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@thi.ng/paths": "5.2.21",
@@ -37,8 +37,8 @@
     "@typescript-eslint/eslint-plugin": "8.42.0",
     "@typescript-eslint/parser": "8.42.0",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.50.0",
-    "@viamrobotics/svelte-sdk": "0.6.0",
+    "@viamrobotics/sdk": "0.51.0",
+    "@viamrobotics/svelte-sdk": "0.6.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "@zag-js/svelte": "1.22.1",
     "@zag-js/tree-view": "1.22.1",