fix(wirepas): do not redraw on update

src/chart/DeviceHistory.tsx

@@ -64,11 +64,12 @@ const findLowerLimit = (v: Array<Reading>): number =>
  */
 export const DeviceHistory = () => {
 	const { devices } = useDevices()
-	const deviceId = useDetails()
 
+	const deviceId = useDetails()
 	if (deviceId === undefined) return null
 
 	const history = devices[deviceId]?.history
+	if (history === undefined) return null
 
 	const charts: ChartInfo[] = []
 

src/wirepas/WirepasTopology.tsx

@@ -1,35 +1,45 @@
 import type { Ref } from 'preact'
 import { ChartContainer, Button } from '../chart/DeviceHistory.js'
 import { isWirepasGateway, useDevices } from '../context/Devices.js'
-import { parseWirepasNodes } from './parseWirepasNodes.js'
-import { useRef } from 'preact/hooks'
+import { parseWirepasNodes, type Connection } from './parseWirepasNodes.js'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import { WirepasTopologyDiagram } from './WirepasTopologyDiagram.js'
 import { X } from 'lucide-preact'
 import { useDetails, hideDetails } from '../hooks/useDetails.js'
+import { isEqual } from 'lodash-es'
 
 export const WirepasTopology = () => {
 	const deviceId = useDetails()
 	const { devices, type } = useDevices()
-	const containerRef = useRef<HTMLDivElement>()
+
 	if (deviceId === undefined) return null
 	const maybeDevice = devices[deviceId]
 	if (maybeDevice === undefined) return null
 	const gw = { ...maybeDevice, type: type(maybeDevice.id) }
 	if (!isWirepasGateway(gw)) return null
+	const connections = parseWirepasNodes(gw.state.nodes)
+	if (connections.length === 0) return null
 
-	const parsedWirepasTopology = parseWirepasNodes(gw.state.nodes)
+	return <Chart connections={connections} key={deviceId} />
+}
 
-	const [width, height] = [500, 500]
+const Chart = ({ connections }: { connections: Connection[] }) => {
+	const [c, setC] = useState<Connection[]>(connections)
 
+	useEffect(() => {
+		if (!isEqual(c, connections)) {
+			setC(connections)
+		}
+	}, [])
+
+	const [width, height] = [500, 500]
+	const containerRef = useRef<HTMLDivElement>()
 	return (
 		<ChartContainer
 			ref={containerRef as Ref<HTMLElement>}
 			style={{ height: `${height}px`, width: `${width}px` }}
 		>
-			<WirepasTopologyDiagram
-				connections={parsedWirepasTopology}
-				size={{ width: 500, height: 500 }}
-			/>
+			<WirepasTopologyDiagram connections={c} size={{ width, height }} />
 			<Button type={'button'} onClick={() => hideDetails()}>
 				<X />
 			</Button>

src/wirepas/WirepasTopologyDiagram.tsx

@@ -15,6 +15,11 @@ export const WirepasTopologyDiagram = ({
 	size: { width: number; height: number }
 	distance?: number
 }) => {
+	if (connections.length === 0) {
+		console.warn(`[WirepasTopology]`, `No connections.`)
+		return null
+	}
+
 	const targets = connections.map(({ to }) => to)
 	const sources = connections.map(({ from }) => from)