Force directed graph labels

.changeset/cuddly-sails-attend.md

@@ -0,0 +1,5 @@
+---
+"@viamrobotics/motion-tools": patch
+---
+
+Feat: force directed graph labels

eslint.config.js

@@ -123,6 +123,7 @@ export default defineConfig(
 			'unicorn/prefer-add-event-listener': 'off',
 			'unicorn/prefer-blob-reading-methods': 'off',
 			'unicorn/prefer-code-point': 'off',
+			'unicorn/prefer-modern-math-apis': 'off',
 			'unicorn/prefer-string-replace-all': 'error',
 			'unicorn/prefer-switch': 'off',
 			'unicorn/prefer-top-level-await': 'off',

package.json

@@ -67,6 +67,7 @@
 		"@threlte/rapier": "3.4.1",
 		"@threlte/xr": "1.6.0",
 		"@types/bun": "1.2.21",
+		"@types/d3-force": "^3.0.10",
 		"@types/earcut": "^3.0.0",
 		"@types/lodash-es": "4.17.12",
 		"@types/node": "^25.6.0",
@@ -209,6 +210,7 @@
 	"dependencies": {
 		"@bufbuild/protobuf": "1.10.1",
 		"@neodrag/svelte": "^2.3.3",
+		"d3-force": "^3.0.0",
 		"filtrex": "^3.1.0",
 		"koota": "0.6.5",
 		"lodash-es": "4.18.1",

src/lib/components/Entities/Entities.svelte

@@ -2,12 +2,13 @@
 	import { Not, Or } from 'koota'
 
 	import { traits, useQuery } from '$lib/ecs'
+	import { useSettings } from '$lib/hooks/useSettings.svelte'
 
 	import Arrows from './Arrows/ArrowGroups.svelte'
 	import Frame from './Frame.svelte'
 	import Geometry from './Geometry.svelte'
 	import GLTF from './GLTF.svelte'
-	import Label from './Label.svelte'
+	import Labels from './Labels.svelte'
 	import Line from './Line.svelte'
 	import Points from './Points.svelte'
 	import Pose from './Pose.svelte'
@@ -60,56 +61,48 @@
 	const points = useQuery(traits.Points)
 	const lines = useQuery(traits.LinePositions)
 	const gltfs = useQuery(traits.GLTF)
+
+	const settings = useSettings()
+
+	const enableLabels = $derived(settings.current.enableLabels)
 </script>
 
 {#each machineFramesEntities.current as entity (entity)}
 	<Pose {entity}>
-		<Frame {entity}>
-			<Label text={entity.get(traits.Name)} />
-		</Frame>
+		<Frame {entity} />
 	</Pose>
 {/each}
 
 {#each resourceGeometriesEntities.current as entity (entity)}
-	<Geometry {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Geometry>
+	<Geometry {entity} />
 {/each}
 
 {#each worldStateEntities.current as entity (entity)}
-	<Frame {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	<Frame {entity} />
 {/each}
 
 {#each drawServiceEntities.current as entity (entity)}
-	<Frame {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	<Frame {entity} />
 {/each}
 
 {#each meshEntities.current as entity (entity)}
-	<Frame {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	<Frame {entity} />
 {/each}
 
 {#each points.current as entity (entity)}
-	<Points {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Points>
+	<Points {entity} />
 {/each}
 
 {#each lines.current as entity (entity)}
-	<Line {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Line>
+	<Line {entity} />
 {/each}
 
 {#each gltfs.current as entity (entity)}
-	<GLTF {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</GLTF>
+	<GLTF {entity} />
 {/each}
 
 <Arrows />
+
+{#if enableLabels}
+	<Labels />
+{/if}

src/lib/components/Entities/Label.svelte

@@ -1,25 +1,91 @@
 <script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
 	import { HTML } from '@threlte/extras'
+	import { untrack } from 'svelte'
+	import { Group } from 'three'
+
+	import { traits, useTag, useTrait } from '$lib/ecs'
 
-	import { useSettings } from '$lib/hooks/useSettings.svelte'
+	import { labels } from './labelLayout/labelStore.svelte'
 
 	interface Props {
-		text?: string
+		entity: Entity
 	}
 
-	let { text }: Props = $props()
+	let { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+
+	const matrix = useTrait(() => entity, traits.WorldMatrix)
+	const name = useTrait(() => entity, traits.Name)
+	const color = useTrait(() => entity, traits.Color)
+	const selected = useTag(() => entity, traits.Selected)
+
+	let element = $state.raw<HTMLElement>()
+
+	$effect(() => {
+		const el = element
+
+		if (!el) return
+
+		return untrack(() => {
+			labels.add(el)
+			return () => labels.remove(el)
+		})
+	})
+
+	// Re-measure when the label text changes (its width drives slot geometry).
+	$effect(() => {
+		if (name.current) {
+			untrack(() => labels.touch())
+		}
+	})
 
-	const settings = useSettings()
+	let ref = $state<Group>()
 
-	const labels = $derived(settings.current.enableLabels)
+	$effect(() => {
+		if (matrix.current && ref) {
+			ref.matrix.copy(matrix.current)
+			ref.updateMatrixWorld()
+			invalidate()
+		}
+	})
 </script>
 
-{#if labels && text}
-	<HTML
-		center
-		zIndexRange={[3, 0]}
-		class="border-gray-7 border bg-white px-2 py-1 text-xs"
+<HTML
+	center
+	zIndexRange={[3, 0]}
+	matrixAutoUpdate={false}
+	bind:ref
+>
+	<div
+		class="label relative h-0 w-0"
+		bind:this={element}
 	>
-		{text}
-	</HTML>
-{/if}
+		<svg class="link pointer-events-none absolute top-0 left-0 overflow-visible">
+			<line class="stroke-gray-9 stroke-1" />
+		</svg>
+		<div
+			class="dot border-gray-9 pointer-events-none absolute -top-1 -left-0 z-1 h-2 w-2 -translate-1/2 rounded-full border"
+		></div>
+		<button
+			class={[
+				'border-gray-9 text absolute z-2 border px-2 py-1 text-xs text-nowrap',
+				{
+					'bg-gray-9 text-white': selected.current,
+					'bg-white': !selected.current,
+				},
+			]}
+			style={color.current
+				? `border-color-left: rgb(${color.current.r}, ${color.current.g}, ${color.current.b})`
+				: undefined}
+			onclick={() => {
+				entity.add(traits.Selected)
+			}}
+		>
+			{name.current}
+		</button>
+	</div>
+</HTML>

src/lib/components/Entities/Labels.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { useTask, useThrelte } from '@threlte/core'
+
+	import { traits, useQuery } from '$lib/ecs'
+
+	import Label from './Label.svelte'
+	import { createLabelLayout } from './labelLayout/createLabelLayout'
+	import { labels } from './labelLayout/labelStore.svelte'
+
+	const { camera, invalidate, size } = useThrelte()
+
+	const entities = useQuery(traits.Name)
+
+	const layout = createLabelLayout({ camera, size, invalidate, labels })
+
+	// Wake the on-demand render loop when labels are added/removed or their text
+	// changes, so the engine re-solves even while the camera is still. Reading
+	// `version` registers the reactive dependency.
+	$effect(() => {
+		if (labels.version >= 0) invalidate()
+	})
+
+	// `autoInvalidate: false` — the engine drives its own invalidation (camera
+	// motion, the version effect above, and while animating), so the task can run
+	// without pinning the on-demand Canvas to render every frame.
+	useTask(
+		(delta) => {
+			layout.frame(delta)
+		},
+		{ autoInvalidate: false }
+	)
+</script>
+
+{#each entities.current as entity (entity)}
+	<Label {entity} />
+{/each}