APP-8006 add world state hook (#105)

* add world state hook

* trying out the world state hook

* Add use world state hook

* bump and do targeted updates

* fix

* remove test setup

* Add world state connection

Author: DTCurrie

.changeset/happy-parks-say.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/motion-tools': patch
+---
+
+Add useWorldState hook

package.json

@@ -43,6 +43,7 @@
 		"@tanstack/svelte-query-devtools": "5.84.0",
 		"@testing-library/jest-dom": "6.6.4",
 		"@testing-library/svelte": "5.2.8",
+		"@thi.ng/paths": "^5.2.21",
 		"@threlte/core": "8.1.4",
 		"@threlte/extras": "9.4.4",
 		"@threlte/rapier": "3.1.5",
@@ -53,8 +54,8 @@
 		"@typescript-eslint/eslint-plugin": "8.39.0",
 		"@typescript-eslint/parser": "8.39.0",
 		"@viamrobotics/prime-core": "0.1.5",
-		"@viamrobotics/sdk": "0.46.0",
-		"@viamrobotics/svelte-sdk": "0.4.5",
+		"@viamrobotics/sdk": "0.50.0",
+		"@viamrobotics/svelte-sdk": "0.6.0",
 		"@vitejs/plugin-basic-ssl": "2.1.0",
 		"@zag-js/svelte": "1.21.1",
 		"@zag-js/tree-view": "1.21.1",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import type { Geometry, Pose } from '@viamrobotics/sdk'
+import type { Geometry, Pose, TransformWithUUID } from '@viamrobotics/sdk'
 import { BatchedMesh, Box3, MathUtils, Object3D, Vector3, type ColorRepresentation } from 'three'
 import { createPose } from './transform'
 
@@ -39,3 +39,15 @@ export class WorldObject<T extends Geometries = Geometries> {
 		this.metadata = metadata ?? {}
 	}
 }
+
+export const fromTransform = (transform: TransformWithUUID) => {
+	const metadata: Metadata = { ...transform.metadata?.fields }
+	const worldObject = new WorldObject(
+		transform.referenceFrame,
+		transform.poseInObserverFrame?.pose,
+		transform.poseInObserverFrame?.referenceFrame,
+		transform.physicalObject?.geometryType,
+		metadata
+	)
+	return worldObject
+}

src/lib/WorldObject.ts

@@ -37,6 +37,7 @@
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
 	provideObjects()
+
 	const { focus } = provideSelection()
 </script>
 

src/lib/components/SceneProviders.svelte

@@ -9,6 +9,7 @@
 	import Settings from './Settings.svelte'
 	import Logs from './Logs.svelte'
 	import { useDraggable } from '$lib/hooks/useDraggable.svelte'
+	import { useWorldStates } from '$lib/hooks/useWorldState.svelte'
 
 	const { ...rest } = $props()
 
@@ -17,6 +18,7 @@
 	const selected = useSelected()
 	const objects = useObjects()
 	const draggable = useDraggable('treeview')
+	const worldStates = useWorldStates()
 
 	let rootNode = $state<TreeNode>({
 		id: 'world',
@@ -25,7 +27,7 @@
 		href: '/',
 	})
 
-	const nodes = $derived(buildTreeNodes(objects.current))
+	const nodes = $derived(buildTreeNodes(objects.current, worldStates.current))
 
 	$effect.pre(() => {
 		if (!isEqual(rootNode.children, nodes)) {

src/lib/components/Tree/TreeContainer.svelte

@@ -10,7 +10,10 @@ export interface TreeNode {
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
-export const buildTreeNodes = (objects: WorldObject[]): TreeNode[] => {
+export const buildTreeNodes = (
+	objects: WorldObject[],
+	worldStates: { name: string; objects: WorldObject[] }[]
+): TreeNode[] => {
 	const nodeMap = new Map<string, TreeNode>()
 	const rootNodes = []
 
@@ -39,5 +42,32 @@ export const buildTreeNodes = (objects: WorldObject[]): TreeNode[] => {
 		}
 	}
 
+	for (const worldState of worldStates) {
+		const node: TreeNode = {
+			name: worldState.name,
+			id: worldState.name,
+			children: [],
+			href: `/world-state/${worldState.name}`,
+		}
+
+		console.log('worldState', worldState)
+
+		for (const object of worldState.objects) {
+			const child: TreeNode = {
+				name: object.name,
+				id: object.uuid,
+				children: [],
+				href: `/world-state/${worldState.name}/${object.name}`,
+			}
+
+			nodeMap.set(object.name, child)
+			node.children?.push(child)
+			console.log('child', child)
+		}
+
+		nodeMap.set(worldState.name, node)
+		rootNodes.push(node)
+	}
+
 	return rootNodes
 }

src/lib/components/Tree/buildTree.ts

@@ -11,11 +11,14 @@
 	import Pointcloud from './Pointcloud.svelte'
 	import Model from './WorldObject.svelte'
 	import Label from './Label.svelte'
+	import { useWorldStates } from '$lib/hooks/useWorldState.svelte'
+	import WorldState from './WorldState.svelte'
 
 	const points = usePointClouds()
 	const drawAPI = useDrawAPI()
 	const frames = useFrames()
 	const geometries = useGeometries()
+	const worldStates = useWorldStates()
 </script>
 
 {#each frames.current as object (object.uuid)}
@@ -65,6 +68,10 @@
 	</Portal>
 {/each}
 
+{#each worldStates.current as { name, objects } (name)}
+	<WorldState {objects} />
+{/each}
+
 {#each points.current as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Pointcloud {object}>

src/lib/components/WorldObjects.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Frame from './Frame.svelte'
+	import Label from './Label.svelte'
+	import Portal from './portal/Portal.svelte'
+	import PortalTarget from './portal/PortalTarget.svelte'
+	import { WorldObject } from '$lib/WorldObject'
+
+	interface Props {
+		objects: WorldObject[]
+	}
+
+	let { objects }: Props = $props()
+</script>
+
+{#each objects as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Frame
+			uuid={object.uuid}
+			name={object.name}
+			pose={object.pose}
+			geometry={object.geometry}
+			metadata={object.metadata}
+		>
+			<PortalTarget id={object.name} />
+			<Label text={object.name} />
+		</Frame>
+	</Portal>
+{/each}