From ed4ff3b16359e50fae6b64f35b1d1dac841d7c69 Mon Sep 17 00:00:00 2001
From: Darrell <DT@Terastar.biz>
Date: Mon, 30 Dec 2024 19:01:24 -0500
Subject: [PATCH 1/2] Add 3d view (#927)

---
 .clinerules                       |   2 +-
 src/ui/package-lock.json          |  58 ++++
 src/ui/package.json               |   2 +
 src/ui/src/lib/images/cube.svg    |   3 +
 src/ui/src/routes/+layout.svelte  |   2 +
 src/ui/src/routes/3d/+page.svelte | 527 ++++++++++++++++++++++++++++++
 6 files changed, 593 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/src/lib/images/cube.svg
 create mode 100644 src/ui/src/routes/3d/+page.svelte

diff --git a/.clinerules b/.clinerules
index 3fbdcfad..4c2cf0e8 100644
--- a/.clinerules
+++ b/.clinerules
@@ -1,3 +1,3 @@
 Test via `dotnet watch --project src`
 Don't fix warnings and typescript issues unless it relates to your task
-src/ui is svelete 5 please don't use old syntax
\ No newline at end of file
+src/ui is svelete 4
diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
index 9669ed85..2791e87c 100644
--- a/src/ui/package-lock.json
+++ b/src/ui/package-lock.json
@@ -18,6 +18,7 @@
 				"@tailwindcss/forms": "^0.5.9",
 				"@types/d3": "^7.4.3",
 				"@types/node": "^22.9.1",
+				"@types/three": "^0.171.0",
 				"@typescript-eslint/eslint-plugin": "^8.15.0",
 				"@typescript-eslint/parser": "^8.15.0",
 				"autoprefixer": "^10.4.20",
@@ -35,6 +36,7 @@
 				"svelte-check": "^4.1.1",
 				"svelte-eslint-parser": "^0.43.0",
 				"svelte-table": "^0.6.3",
+				"three": "^0.171.0",
 				"tslib": "^2.8.1",
 				"typescript": "^5.7.2",
 				"typescript-eslint": "^8.18.2",
@@ -1193,6 +1195,12 @@
 				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
 			}
 		},
+		"node_modules/@tweenjs/tween.js": {
+			"version": "23.1.3",
+			"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+			"integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+			"dev": true
+		},
 		"node_modules/@types/d3": {
 			"version": "7.4.3",
 			"resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -1473,6 +1481,32 @@
 				"undici-types": "~6.19.8"
 			}
 		},
+		"node_modules/@types/stats.js": {
+			"version": "0.17.3",
+			"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+			"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+			"dev": true
+		},
+		"node_modules/@types/three": {
+			"version": "0.171.0",
+			"resolved": "https://registry.npmjs.org/@types/three/-/three-0.171.0.tgz",
+			"integrity": "sha512-oLuT1SAsT+CUg/wxUTFHo0K3NtJLnx9sJhZWQJp/0uXqFpzSk1hRHmvWvpaAWSfvx2db0lVKZ5/wV0I0isD2mQ==",
+			"dev": true,
+			"dependencies": {
+				"@tweenjs/tween.js": "~23.1.3",
+				"@types/stats.js": "*",
+				"@types/webxr": "*",
+				"@webgpu/types": "*",
+				"fflate": "~0.8.2",
+				"meshoptimizer": "~0.18.1"
+			}
+		},
+		"node_modules/@types/webxr": {
+			"version": "0.5.20",
+			"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
+			"integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "8.18.2",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.2.tgz",
@@ -1763,6 +1797,12 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/@webgpu/types": {
+			"version": "0.1.52",
+			"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.52.tgz",
+			"integrity": "sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.14.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -3176,6 +3216,12 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+			"dev": true
+		},
 		"node_modules/file-entry-cache": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3688,6 +3734,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/meshoptimizer": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+			"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+			"dev": true
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5038,6 +5090,12 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/three": {
+			"version": "0.171.0",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.171.0.tgz",
+			"integrity": "sha512-Y/lAXPaKZPcEdkKjh0JOAHVv8OOnv/NDJqm0wjfCzyQmfKxV7zvkwsnBgPBKTzJHToSOhRGQAGbPJObT59B/PQ==",
+			"dev": true
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
diff --git a/src/ui/package.json b/src/ui/package.json
index 05f1f263..1ff8b5ed 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -23,6 +23,7 @@
 		"@tailwindcss/forms": "^0.5.9",
 		"@types/d3": "^7.4.3",
 		"@types/node": "^22.9.1",
+		"@types/three": "^0.171.0",
 		"@typescript-eslint/eslint-plugin": "^8.15.0",
 		"@typescript-eslint/parser": "^8.15.0",
 		"autoprefixer": "^10.4.20",
@@ -40,6 +41,7 @@
 		"svelte-check": "^4.1.1",
 		"svelte-eslint-parser": "^0.43.0",
 		"svelte-table": "^0.6.3",
+		"three": "^0.171.0",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.18.2",
diff --git a/src/ui/src/lib/images/cube.svg b/src/ui/src/lib/images/cube.svg
new file mode 100644
index 00000000..8b493238
--- /dev/null
+++ b/src/ui/src/lib/images/cube.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+    <path fill="none" stroke="#fff" stroke-width="2" d="M12 48V24l20-12 20 12v24L32 60 12 48m0-24 20 12 20-12M32 36v24"/>
+</svg>
\ No newline at end of file
diff --git a/src/ui/src/routes/+layout.svelte b/src/ui/src/routes/+layout.svelte
index 3a0fe504..dd7143f3 100644
--- a/src/ui/src/routes/+layout.svelte
+++ b/src/ui/src/routes/+layout.svelte
@@ -12,6 +12,7 @@
 	import devices from '$lib/images/devices.svg';
 	import calibration from '$lib/images/calibration.svg';
 	import settings from '$lib/images/settings.svg';
+	import cube from '$lib/images/cube.svg';
 
 	initializeStores();
 
@@ -25,6 +26,7 @@
 		{ href: '/devices', name: 'devices', icon: devices, alt: 'Devices' },
 		{ href: '/nodes', name: 'nodes', icon: nodes, alt: 'Nodes' },
 		{ href: '/calibration', name: 'calibration', icon: calibration, alt: 'Calibration' },
+		{ href: '/3d', name: '3d', icon: cube, alt: '3D View' },
 	];
 </script>
 
diff --git a/src/ui/src/routes/3d/+page.svelte b/src/ui/src/routes/3d/+page.svelte
new file mode 100644
index 00000000..521131da
--- /dev/null
+++ b/src/ui/src/routes/3d/+page.svelte
@@ -0,0 +1,527 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+    import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+    import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
+    import { devices, nodes, config } from '$lib/stores';
+    import type { Device, Node } from '$lib/types';
+    import type { Group } from 'three';
+
+    let container: HTMLDivElement;
+    let scene: THREE.Scene;
+    let camera: THREE.PerspectiveCamera;
+    let renderer: THREE.WebGLRenderer;
+    let labelRenderer: CSS2DRenderer;
+    let controls: OrbitControls;
+    let groupPivot: THREE.Group;
+    let isAnimating = false;
+    let startTime: number;
+
+    // Position adjustments
+    const X_POS_ADJ = 1.5;
+    const Y_POS_ADJ = 5;
+
+    // Device visualization state
+    const PULSE_SPEED = 2;
+    const PULSE_MIN = 0.8;
+    const PULSE_MAX = 1.2;
+    const geoSphere = new THREE.SphereGeometry(0.2, 32, 16);
+    const trackerMaterials = [
+        new THREE.MeshStandardMaterial({
+            emissive: 0xff0000,
+            emissiveIntensity: 2,
+            transparent: true,
+            opacity: 0.8
+        }),
+        new THREE.MeshStandardMaterial({
+            emissive: 0xffbb00,
+            emissiveIntensity: 2,
+            transparent: true,
+            opacity: 0.8
+        }),
+        new THREE.MeshStandardMaterial({
+            emissive: 0xffee00,
+            emissiveIntensity: 2,
+            transparent: true,
+            opacity: 0.8
+        }),
+    ];
+    let deviceGroup: THREE.Group | null = null;
+    let trackingSpheres: THREE.Mesh[] = [];
+    let trackerLabels: { [key: string]: HTMLDivElement } = {};
+
+    // Room visualization state
+    const roomMaterials = {
+        green1: new THREE.LineBasicMaterial({
+            color: 0x03a062,
+            transparent: true,
+            opacity: 0.6
+        }),
+    };
+    const floorMaterial = new THREE.MeshBasicMaterial({
+        color: 0x03a062,
+        side: THREE.DoubleSide,
+        opacity: 0.1,
+        transparent: true
+    });
+    let roomGroup: THREE.Group | null = null;
+
+    // Node visualization state
+    const nodeMaterials = {
+        online: new THREE.MeshPhongMaterial({
+            color: 0x000000,
+            emissive: 0x5555ff,
+            emissiveIntensity: 2,
+            shininess: 100,
+            toneMapped: false
+        }),
+        offline: new THREE.MeshPhongMaterial({
+            color: 0x000000,
+            emissive: 0xff2222,
+            emissiveIntensity: 2,
+            shininess: 100,
+            toneMapped: false
+        }),
+    };
+    let nodeGroup: THREE.Group | null = null;
+    let showNodes = true;
+
+    let zRotationSpeed = 0.002;
+
+    const effectController: {
+        zRotationSpeed: number;
+        showNodes: boolean;
+    } = {
+        zRotationSpeed: 0.002,
+        showNodes: true
+    };
+
+    // Camera settings
+    const CAM_START_X = 0;
+    const CAM_START_Y = 0;
+    const CAM_START_Z = 23;
+    const CONTROLS_MIN_DISTANCE = 5;
+    const CONTROLS_MAX_DISTANCE = 40;
+
+    function initScene() {
+        // Create renderer with basic WebGL settings
+        renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            powerPreference: "high-performance",
+            stencil: false,
+            depth: true
+        });
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setClearColor(0x1e293b, 1);
+        renderer.autoClear = true;
+        renderer.autoClearColor = true;
+        renderer.autoClearDepth = true;
+        container.appendChild(renderer.domElement);
+
+        // Create and configure label renderer with proper stacking
+        labelRenderer = new CSS2DRenderer();
+        labelRenderer.setSize(container.clientWidth, container.clientHeight);
+        labelRenderer.domElement.style.position = 'absolute';
+        labelRenderer.domElement.style.top = '0px';
+        labelRenderer.domElement.style.pointerEvents = 'none';
+        labelRenderer.domElement.style.zIndex = '1';
+
+        // Remove any existing label renderer elements
+        const existingLabels = container.querySelector('.css2d-renderer');
+        if (existingLabels) {
+            container.removeChild(existingLabels);
+        }
+
+        labelRenderer.domElement.classList.add('css2d-renderer');
+        container.appendChild(labelRenderer.domElement);
+
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x1e293b);
+
+        camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
+        scene.add(camera);
+
+        controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.minDistance = CONTROLS_MIN_DISTANCE;
+        controls.maxDistance = CONTROLS_MAX_DISTANCE;
+
+        // Set up WebGL state
+        const gl = renderer.getContext();
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+
+        groupPivot = new THREE.Group();
+        scene.add(groupPivot);
+
+        groupPivot.rotation.x = 5.2;
+        groupPivot.rotation.z = 10.2;
+
+        camera.position.set(CAM_START_X, CAM_START_Y, CAM_START_Z);
+        controls.update();
+
+        // Initialize rooms, nodes, and devices
+        setupRooms();
+        setupNodes();
+        setupDevices();
+
+        doGuiSetup();
+    }
+
+    function calculateRoomCenter(points: THREE.Vector2[]) {
+        const center = new THREE.Vector2();
+        points.forEach(point => center.add(point));
+        center.divideScalar(points.length);
+        return center;
+    }
+
+    function createLabelForRoom(name: string, points: THREE.Vector2[]) {
+        const center = calculateRoomCenter(points);
+
+        const labelDivEle = document.createElement('div');
+        labelDivEle.style.color = '#ffffff';
+        labelDivEle.style.fontFamily = 'Arial';
+        labelDivEle.style.fontSize = '1rem';
+        labelDivEle.style.textAlign = 'center';
+        labelDivEle.style.pointerEvents = 'none';
+        labelDivEle.textContent = name;
+
+        const labelElement = new CSS2DObject(labelDivEle);
+        labelElement.name = "roomLabel";
+        labelElement.position.set(center.x, center.y, 0);
+
+        return labelElement;
+    }
+
+    function setupRooms() {
+        $: if ($config?.floors && groupPivot) {
+            cleanupRooms();
+            const newRoomGroup = new THREE.Group();
+            newRoomGroup.name = 'RoomGroup';
+
+            $config.floors.forEach(floor => {
+                const floor_base = floor.bounds[0][2];
+                const floor_ceiling = floor.bounds[1][2];
+
+                floor.rooms?.forEach((room: any) => {
+                    const points3d: THREE.Vector3[] = [];
+                    const pointsFloor: THREE.Vector2[] = [];
+
+                    room.points.forEach((points: number[]) => {
+                        points3d.push(new THREE.Vector3(points[0], points[1], floor_base));
+                        points3d.push(new THREE.Vector3(points[0], points[1], floor_ceiling));
+                        points3d.push(new THREE.Vector3(points[0], points[1], floor_base));
+
+                        pointsFloor.push(new THREE.Vector2(
+                            points[0] - X_POS_ADJ,
+                            points[1] - Y_POS_ADJ
+                        ));
+                    });
+
+                    room.points.forEach((points: number[]) => {
+                        points3d.push(new THREE.Vector3(points[0], points[1], floor_ceiling));
+                    });
+
+                    const lines = new THREE.BufferGeometry().setFromPoints(points3d);
+                    const roomLine = new THREE.Line(lines, roomMaterials.green1);
+                    roomLine.position.set(-X_POS_ADJ, -Y_POS_ADJ, 0);
+                    newRoomGroup.add(roomLine);
+
+                    const floorShape = new THREE.Shape(pointsFloor);
+                    const floorGeometry = new THREE.ShapeGeometry(floorShape);
+                    const plane = new THREE.Mesh(floorGeometry, floorMaterial);
+                    plane.position.z = floor_base;
+                    newRoomGroup.add(plane);
+
+                    // Add room label at center of floor
+                    const label = createLabelForRoom(room.name, pointsFloor);
+                    label.position.z = floor_base;
+                    newRoomGroup.add(label);
+                });
+            });
+
+            groupPivot.add(newRoomGroup);
+            roomGroup = newRoomGroup;
+        }
+    }
+
+    function setupNodes() {
+        $: if ($nodes && groupPivot && showNodes) {
+            updateNodes($nodes);
+        }
+
+        $: if (!showNodes) {
+            cleanupNodeGroup();
+        }
+    }
+
+    function setupDevices() {
+        $: if ($devices && groupPivot) {
+            updateDevices($devices);
+        }
+    }
+
+    function cleanupRooms() {
+        if (roomGroup) {
+            roomGroup.traverse(child => {
+                if ((child as any).geometry) {
+                    (child as any).geometry.dispose();
+                }
+                if ((child as any).material) {
+                    (child as any).material.dispose();
+                }
+            });
+            groupPivot.remove(roomGroup);
+            roomGroup = null;
+        }
+    }
+
+    function cleanupNodeGroup() {
+        if (!nodeGroup) return;
+
+        nodeGroup.traverse(child => {
+            if ((child as any).geometry) {
+                (child as any).geometry.dispose();
+            }
+            if ((child as any).material) {
+                (child as any).material.dispose();
+            }
+            if (child instanceof CSS2DObject) {
+                const element = child.element;
+                if (element && element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            }
+        });
+
+        groupPivot.remove(nodeGroup);
+        nodeGroup = null;
+    }
+
+    function cleanupDeviceGroup() {
+        if (!deviceGroup) return;
+
+        deviceGroup.traverse(child => {
+            if ((child as any).geometry) {
+                (child as any).geometry.dispose();
+            }
+            if ((child as any).material) {
+                (child as any).material.dispose();
+            }
+            if (child instanceof CSS2DObject) {
+                const element = child.element;
+                if (element && element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            }
+        });
+
+        groupPivot.remove(deviceGroup);
+        deviceGroup = null;
+        trackingSpheres = [];
+        trackerLabels = {};
+    }
+
+    function updateNodes(nodes: Node[]) {
+        cleanupNodeGroup();
+
+        const newNodeGroup = new THREE.Group();
+        newNodeGroup.name = 'NodeGroup';
+
+        nodes.forEach((node) => {
+            if (!node.location) {
+                console.warn('Node missing location:', node);
+                return;
+            }
+
+            const mesh = new THREE.Mesh(
+                new THREE.SphereGeometry(0.08, 32, 16),
+                nodeMaterials[node.online ? 'online' : 'offline']
+            );
+
+            mesh.position.set(
+                node.location.x - X_POS_ADJ,
+                node.location.y - Y_POS_ADJ,
+                node.location.z
+            );
+            mesh.name = "node#" + node.id;
+
+            newNodeGroup.add(mesh);
+            newNodeGroup.add(createLabelForNode(node));
+        });
+
+        nodeGroup = newNodeGroup;
+        groupPivot.add(nodeGroup);
+    }
+
+    function createLabelForNode(node: Node) {
+        const labelDivEle = document.createElement('div');
+        labelDivEle.style.color = node.online ? '#5555ff' : '#dc2d2d';
+        labelDivEle.style.fontFamily = 'Arial';
+        labelDivEle.style.fontSize = '0.8rem';
+        labelDivEle.style.marginTop = '-1em';
+
+        const labelDivLine1 = document.createElement('div');
+        labelDivLine1.textContent = node.name;
+        labelDivEle.append(labelDivLine1);
+
+        const labelElement = new CSS2DObject(labelDivEle);
+        labelElement.name = "nodeLabel";
+
+        // Set label position relative to node location
+        if (node.location) {
+            labelElement.position.set(
+                node.location.x - X_POS_ADJ,
+                node.location.y - Y_POS_ADJ,
+                node.location.z
+            );
+        }
+
+        return labelElement;
+    }
+
+    function updateDevices(devices: Device[]) {
+        cleanupDeviceGroup();
+
+        const newDeviceGroup = new THREE.Group();
+        newDeviceGroup.name = 'DeviceGroup';
+
+        devices.forEach(device => {
+            if (!device.location) return;
+
+            const trackName = device.id;
+            const confidence = device.confidence || 0;
+            const fixes = device.fixes || 0;
+            const position = device.location;
+
+            if (confidence <= 1) return;
+
+            const material = trackerMaterials[trackingSpheres.length % trackerMaterials.length];
+            const newSphere = new THREE.Mesh(geoSphere, material);
+            newSphere.name = trackName;
+            newSphere.position.set(position.x - X_POS_ADJ, position.y - Y_POS_ADJ, position.z);
+
+            trackingSpheres.push(newSphere);
+            newDeviceGroup.add(newSphere);
+
+            const labelDivEle = document.createElement('div');
+            labelDivEle.style.color = '#ffffff';
+            labelDivEle.style.fontFamily = 'Arial';
+            labelDivEle.style.fontSize = '0.8rem';
+            labelDivEle.style.marginTop = '-1em';
+
+            const labelDivLine1 = document.createElement('div');
+            const displayName = device.name || device.id;
+            labelDivLine1.textContent = displayName.length > 15 ? (displayName.substring(0, 14) + '...') : displayName;
+
+            const labelDivLine2 = document.createElement('div');
+            labelDivLine2.textContent = `${confidence}% (${fixes} fixes)`;
+
+            labelDivEle.append(labelDivLine1, labelDivLine2);
+            trackerLabels[trackName] = labelDivLine2;
+
+            const labelElement = new CSS2DObject(labelDivEle);
+            labelElement.name = trackName + '#label';
+            labelElement.position.set(position.x - X_POS_ADJ, position.y - Y_POS_ADJ, position.z);
+            newDeviceGroup.add(labelElement);
+        });
+
+        deviceGroup = newDeviceGroup;
+        groupPivot.add(deviceGroup);
+    }
+
+    function updatePulse() {
+        const elapsed = (performance.now() - startTime) / 1000;
+        const phase = (elapsed * PULSE_SPEED * Math.PI) % (Math.PI * 2);
+        const scale = PULSE_MIN + (Math.sin(phase) + 1) * (PULSE_MAX - PULSE_MIN) / 2;
+
+        trackingSpheres.forEach((sphere) => {
+            sphere.scale.set(scale, scale, scale);
+        });
+    }
+
+    function animate(currentTime: number) {
+        if (!isAnimating) return;
+
+        if (!startTime) startTime = currentTime;
+        const elapsedTime = currentTime - startTime;
+
+        controls.update();
+
+        // Update rotation based on elapsed time
+        groupPivot.rotation.z = (elapsedTime * zRotationSpeed * 0.001) % (Math.PI * 2);
+
+        // Update device animations
+        updatePulse();
+
+        // Ensure clean render state
+        renderer.clear(true, true, true);
+
+        // Render scene
+        renderer.render(scene, camera);
+
+        // Render labels on top
+        labelRenderer.render(scene, camera);
+
+        requestAnimationFrame(animate);
+    }
+
+    function doGuiSetup() {
+        const gui = new GUI({ title: 'Settings' });
+
+        gui.add(effectController, 'zRotationSpeed', 0, 1, 0.01)
+            .onChange((value: number) => {
+                zRotationSpeed = value;
+            });
+
+        gui.close();
+    }
+
+    onMount(() => {
+        if (container) {
+            initScene();
+            isAnimating = true;
+            requestAnimationFrame(animate);
+        }
+
+        const handleResize = () => {
+            if (!camera || !renderer || !labelRenderer) return;
+
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+
+            renderer.setSize(width, height);
+            renderer.setPixelRatio(window.devicePixelRatio);
+
+            labelRenderer.setSize(width, height);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            isAnimating = false;
+            cleanupRooms();
+            cleanupNodeGroup();
+            cleanupDeviceGroup();
+            window.removeEventListener('resize', handleResize);
+            if (renderer) {
+                renderer.dispose();
+                renderer.forceContextLoss();
+            }
+        };
+    });
+</script>
+
+<div class="w-full h-full" bind:this={container}></div>
+
+<style>
+    div {
+        background-color: rgb(30, 41, 59);
+    }
+</style>
\ No newline at end of file

From 68213546a584e6971a9ce27e5ec6afd986a7fe07 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 31 Dec 2024 00:02:30 +0000
Subject: [PATCH 2/2] Bump @types/node from 22.9.1 to 22.10.2 in /src/ui

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.9.1 to 22.10.2.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/ui/package-lock.json | 16 ++++++++--------
 src/ui/package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
index 2791e87c..7c86e47b 100644
--- a/src/ui/package-lock.json
+++ b/src/ui/package-lock.json
@@ -17,7 +17,7 @@
 				"@sveltejs/vite-plugin-svelte": "^3.1.2",
 				"@tailwindcss/forms": "^0.5.9",
 				"@types/d3": "^7.4.3",
-				"@types/node": "^22.9.1",
+				"@types/node": "^22.10.2",
 				"@types/three": "^0.171.0",
 				"@typescript-eslint/eslint-plugin": "^8.15.0",
 				"@typescript-eslint/parser": "^8.15.0",
@@ -1473,12 +1473,12 @@
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "22.9.1",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-			"integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+			"version": "22.10.2",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
+			"integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
 			"dev": true,
 			"dependencies": {
-				"undici-types": "~6.19.8"
+				"undici-types": "~6.20.0"
 			}
 		},
 		"node_modules/@types/stats.js": {
@@ -5239,9 +5239,9 @@
 			}
 		},
 		"node_modules/undici-types": {
-			"version": "6.19.8",
-			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"version": "6.20.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+			"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
 			"dev": true
 		},
 		"node_modules/update-browserslist-db": {
diff --git a/src/ui/package.json b/src/ui/package.json
index 1ff8b5ed..62aef643 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -22,7 +22,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.2",
 		"@tailwindcss/forms": "^0.5.9",
 		"@types/d3": "^7.4.3",
-		"@types/node": "^22.9.1",
+		"@types/node": "^22.10.2",
 		"@types/three": "^0.171.0",
 		"@typescript-eslint/eslint-plugin": "^8.15.0",
 		"@typescript-eslint/parser": "^8.15.0",