multiple topology modes to toggle between

src/lib/utils/zigbee_devices.js

@@ -8567,16 +8567,7 @@ function getNeighbors(data) {
 				return hassData.filter((n) => n.ieee === neigh[0].ieee);
 			})
 			?.flat()
-			?.map((target) => {
-				if (target === 29) {
-					return;
-				} else if (target === undefined) {
-					return;
-				}
-
-				return target;
-			})
-			.filter((_) => _ !== undefined) ?? []
+			?.filter((_) => _ !== undefined) ?? []
 	);
 }
 
@@ -8600,18 +8591,24 @@ let firstNode = [
 	}
 ];
 
-const moreNodes = hassData
-	.filter((d) => d?.user_given_name && d.user_given_name !== '')
+let nodes = hassData
 	.map((d) => {
-		const group = d.device_type === 'EndDevice' ? 2 : 1;
+		let group = 1;
+		let neighbors = getNeighbors(d);
+
+		if (d?.device_type === 'EndDevice') group = 2;
+		if (d?.available === false) {
+			group = 3;
+			neighbors = [];
+		}
 
 		return {
-			name: d.user_given_name,
+			name: d.user_given_name || d.name,
 			ieee: d.ieee,
 			device: d.name,
 			area: d.area_id,
 			type: d.device_type,
-			neighbors: getNeighbors(d),
+			neighbors,
 			group
 		};
 	})
@@ -8619,11 +8616,17 @@ const moreNodes = hassData
 	.map((n, id) => {
 		return {
 			...n,
-			id: id + 1
+			id
 		};
 	});
 
-const nodes = firstNode.concat(moreNodes);
+const hubMac = '00:21:2e:ff:ff:09:44:73';
+const hubNode = nodes.findIndex((n) => n.ieee === hubMac);
+nodes[hubNode].neighbors = getNeighbors(hubMac);
+nodes[hubNode].group = 0;
+
+// const nodes = firstNode.concat(moreNodes);
+// const nodes = moreNodes;
 
 const link = firstNode
 	.map((d, source) => {
@@ -8646,8 +8649,6 @@ const moreLinks = nodes
 	.map((d, source) => {
 		return (
 			d?.neighbors?.map((n) => {
-				if (n.ieee === '00:21:2e:ff:ff:09:44:73') return;
-
 				const matching = nodes.findIndex((node) => node.ieee === n.ieee);
 				if (matching === -1) return;
 
@@ -8662,5 +8663,6 @@ const moreLinks = nodes
 	.filter((el) => el !== undefined);
 
 const links = link.concat(moreLinks);
+// const links = moreLinks;
 
-export const data = { nodes, links };
+export let data = { nodes, links };

src/routes/zigbee/+page.svelte

@@ -5,9 +5,11 @@
 	import { data } from '$lib/utils/zigbee_devices';
 
 	let width = 650;
+	let originalData = { ...data };
 	let element;
 	let hovering;
 	let Graph;
+	let state = 0;
 	export const ssr = false;
 
 	function nodeCanvasObject(node, ctx, globalScale) {
@@ -24,7 +26,7 @@
 		let color = groupToColor(node.group);
 		if (hovering) {
 			const hoveredNeighbor = hovering?.neighbors?.findIndex((n) => n.ieee === node.ieee);
-			color = hoveredNeighbor > -1 ? hexToRgba(color, 0.2) : color;
+			color = hoveredNeighbor === -1 && hovering.ieee !== node.ieee ? hexToRgba(color, 0.2) : color;
 		}
 
 		ctx.fillStyle = color || 'blue';
@@ -59,6 +61,7 @@
 		el.style.display = 'flex';
 		el.style.flexDirection = 'column';
 		const ob = {
+			Name: node.name,
 			IEEE: node.ieee,
 			'Device type': node.type,
 			NWK: '0x3cf1',
@@ -74,10 +77,7 @@
 		return el;
 	}
 
-	onMount(async function () {
-		// window.addEventListener('mousemove', trackMouse, false);
-		console.log(data);
-
+	async function draw() {
 		const ForceGraph = (await import('force-graph')).default;
 		Graph = new ForceGraph(element)
 			.width(800)
@@ -98,12 +98,42 @@
 				console.log(node);
 			});
 
-		setTimeout(() => Graph.zoomToFit(0, 140), 2);
+		setTimeout(() => Graph?.zoomToFit(0, 140), 20);
+	}
+
+	onMount(() => {
+		draw();
+		// window.addEventListener('mousemove', trackMouse, false);
+		console.log(data);
 	});
+
+	function toggleView() {
+		if (state === 0) {
+			data.links = originalData.links.filter(
+				(l) => l.source.ieee === '00:21:2e:ff:ff:09:44:73'
+			);
+		} else if (state === 1) {
+			data.links = originalData.links;
+		} else if (state === 2) {
+			data.links = originalData.links;
+			data.links.shift();
+		}
+
+		state += 1;
+		if (state === 3) state = 0;
+
+		console.log(data);
+		Graph.graphData(data);
+		draw();
+	}
 </script>
 
 <PageHeader>Zigbee</PageHeader>
 
+<div>
+	<button class="affirmative" on:click={toggleView}><span>Toggle topology</span></button>
+</div>
+
 <div class="container">
 	<div class="header">
 		<span>Coordinator</span>
@@ -114,7 +144,17 @@
 	<div id="graph" bind:this={element}></div>
 </div>
 
+
 <style lang="scss">
+	button span {
+		padding: 0.25rem 0.5rem;
+		margin-bottom: 1.5rem;
+		font-size: 1rem;
+		font-weight: 400;
+		letter-spacing: 1px;
+		font-style: italic;
+	}
+
 	.container {
 		display: inline-block;
 		border: 3px solid black;

static/style.css

@@ -128,7 +128,9 @@ button.affirmative span {
 }
 
 button.affirmative:hover span {
-	background-color: #363132;
+	border-color: var(--highlight);
+	background-color: var(--highlight);
+	color: var(--theme);
 }
 
 button:disabled {