url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revert: drop zigbee LQI edge coloring and path highlighting

Browse Source 
Split out of this PR — will land separately with reworked zigbee edge
capture/storage. Keeps only the floor plan + generic media upload work.

- Remove getLqiColor + LQI-derived iot edge stroke (edges/index.tsx)
- Remove zigbee path highlight effect (DetailPanel.tsx)
- Remove highlightedPath/setHighlightedPath store state (canvasStore.ts)
- Delete utils/zigbeePathfinding.ts
- Revert associated test scaffolding and package-lock churn
This commit is contained in:
Pouzor
2026-07-02 17:16:51 +02:00
parent 1ed013bde2
commit 6160090919
7 changed files with 190 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/edges/index.tsx
+4 -35
View File
@@ -9,7 +9,7 @@ import {
type EdgeProps,
type Edge,
} from '@xyflow/react'
import type { EdgeData, EdgeType, NodeData, Waypoint } from '@/types'
import type { EdgeData, EdgeType, Waypoint } from '@/types'
import { useThemeStore } from '@/stores/themeStore'
import { useCanvasStore } from '@/stores/canvasStore'
import { THEMES } from '@/utils/themes'
@@ -22,13 +22,6 @@ function getVlanColor(vlanId?: number): string {
return VLAN_COLORS[vlanId % VLAN_COLORS.length]
}
function getLqiColor(lqi: number): string {
if (lqi >= 200) return '#00cc00'
if (lqi >= 150) return '#88cc00'
if (lqi >= 100) return '#ffaa00'
return '#ff3300'
}
// ── Waypoint drag handle ─────────────────────────────────────────────────────
interface WaypointHandleProps {
@@ -296,8 +289,7 @@ export function HomelableEdge({ id, source, target, sourceHandleId, targetHandle
const activeTheme = useThemeStore((s) => s.activeTheme)
const theme = THEMES[activeTheme]
const sourceType = useStore((s) => s.nodeLookup.get(source)?.type)
const targetNode = useStore((s) => s.nodeLookup.get(target))
const targetType = targetNode?.type
const targetType = useStore((s) => s.nodeLookup.get(target)?.type)
const isBidirectional = sourceType === 'proxmox' && targetType === 'proxmox'
const waypoints: Waypoint[] = Array.isArray(data?.waypoints) && data.waypoints.length > 0
@@ -323,8 +315,6 @@ export function HomelableEdge({ id, source, target, sourceHandleId, targetHandle
const edgeType: EdgeType = data?.type ?? 'ethernet'
const edgeColors = theme.colors.edgeColors
const highlightedPath = useCanvasStore((s) => s.highlightedPath)
const isHighlighted = highlightedPath.includes(id)
const BASE_STYLES: Record<EdgeType, React.CSSProperties> = {
ethernet: { stroke: edgeColors.ethernet, strokeWidth: 2 },
@@ -338,36 +328,15 @@ export function HomelableEdge({ id, source, target, sourceHandleId, targetHandle
}
const customColor = data?.custom_color as string | undefined
// Derive LQI color from the target node's properties for iot edges
const lqiColor = (edgeType === 'iot' && targetNode?.data?.properties)
? (() => {
const props = (targetNode.data as NodeData).properties ?? []
const lqiProp = props.find(
(p: { key: string; value: string }) => p.key === 'LQI'
)
if (lqiProp) {
const lqi = parseInt(lqiProp.value, 10)
if (!isNaN(lqi)) return getLqiColor(lqi)
}
return null
})()
: null
const pathHighlightColor = '#00d4ff'
const strokeColor: string = isHighlighted
? pathHighlightColor
: selected
const strokeColor: string = selected
? theme.colors.edgeSelectedColor
: lqiColor
?? customColor
: customColor
?? (edgeType === 'vlan' ? getVlanColor(data?.vlan_id as number | undefined) : (BASE_STYLES[edgeType].stroke as string ?? edgeColors.ethernet))
const style: React.CSSProperties = {
...BASE_STYLES[edgeType],
...(edgeType === 'vlan' ? { stroke: getVlanColor(data?.vlan_id as number | undefined) } : {}),
...(customColor ? { stroke: customColor } : {}),
...(isHighlighted ? { stroke: pathHighlightColor, strokeWidth: 3, filter: `drop-shadow(0 0 6px ${pathHighlightColor}aa)` } : {}),
...(selected ? { stroke: theme.colors.edgeSelectedColor, filter: `drop-shadow(0 0 4px ${theme.colors.edgeSelectedColor}88)` } : {}),
}
frontend/src/components/panels/DetailPanel.tsx
+2 -23
View File
@@ -1,4 +1,4 @@
import { createElement, useEffect, useRef, useState } from 'react'
import { createElement, useRef, useState } from 'react'
import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
@@ -9,8 +9,6 @@ import { getServiceUrl } from '@/utils/serviceUrl'
import { splitIps } from '@/utils/maskIp'
import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '@/utils/propertyIcons'
import { formatTimestamp } from '@/utils/timeFormat'
import { findZigbeePath } from '@/utils/zigbeePathfinding'
import { isZigbeeType } from '@/utils/zigbeeProperties'
import type { Node } from '@xyflow/react'
interface DetailPanelProps {
@@ -24,7 +22,7 @@ type PropForm = { key: string; value: string; icon: string | null; visible: bool
const EMPTY_PROP: PropForm = { key: '', value: '', icon: null, visible: true }
export function DetailPanel({ onEdit }: DetailPanelProps) {
const { nodes, edges, selectedNodeId, selectedNodeIds, setSelectedNode, deleteNode, updateNode, snapshotHistory, createGroup, ungroup, removeFromGroup, setNodeSize, setHighlightedPath } = useCanvasStore()
const { nodes, selectedNodeId, selectedNodeIds, setSelectedNode, deleteNode, updateNode, snapshotHistory, createGroup, ungroup, removeFromGroup, setNodeSize } = useCanvasStore()
const serviceStatuses = useCanvasStore((s) => s.serviceStatuses)
const [addingForNode, setAddingForNode] = useState<string | null>(null)
@@ -43,25 +41,6 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
// Multi-select panel
const multiSelected = (selectedNodeIds ?? []).filter((id) => nodes.some((n) => n.id === id))
// Zigbee path highlighting: when a zigbee node is selected, compute
// the optimal route to the coordinator and highlight those edges.
useEffect(() => {
const targetNode = nodes.find((n) => n.id === selectedNodeId)
if (!targetNode || !isZigbeeType(targetNode.data.type)) {
setHighlightedPath([])
return
}
const coordinator = nodes.find((n) => n.data.type === 'zigbee_coordinator')
if (!coordinator) {
setHighlightedPath([])
return
}
const path = findZigbeePath(targetNode.id, coordinator.id, nodes, edges)
setHighlightedPath(path)
}, [selectedNodeId, nodes, edges, setHighlightedPath])
if (multiSelected.length > 1) {
return (
<MultiSelectPanel
frontend/src/components/panels/__tests__/DetailPanel.test.tsx
-32
View File
@@ -37,8 +37,6 @@ function setupStore(nodeData: Partial<NodeData> = {}, serviceStatuses: Record<st
createGroup: vi.fn(),
ungroup: vi.fn(),
setNodeSize: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
serviceStatuses,
}
// Support both the bare destructure call and the selector-based call.
@@ -59,8 +57,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
})
@@ -134,8 +130,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -163,8 +157,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -186,8 +178,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -209,8 +199,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -265,8 +253,6 @@ describe('DetailPanel', () => {
deleteNode: vi.fn(),
updateNode: vi.fn(),
snapshotHistory: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
fireEvent.click(screen.getByLabelText('Close panel'))
@@ -291,8 +277,6 @@ describe('DetailPanel', () => {
deleteNode,
updateNode: vi.fn(),
snapshotHistory,
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
vi.spyOn(window, 'confirm').mockReturnValue(true)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -311,8 +295,6 @@ describe('DetailPanel', () => {
deleteNode,
updateNode: vi.fn(),
snapshotHistory,
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
vi.spyOn(window, 'confirm').mockReturnValue(false)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -344,8 +326,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
// Two "Add" header buttons: first = properties, second = services
@@ -371,8 +351,6 @@ describe('DetailPanel', () => {
snapshotHistory: vi.fn(),
createGroup: vi.fn(),
ungroup: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
const addHeaders = screen.getAllByText('Add')
@@ -396,8 +374,6 @@ describe('DetailPanel', () => {
deleteNode: vi.fn(),
updateNode,
snapshotHistory: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
fireEvent.click(screen.getByTitle('Remove service'))
@@ -413,8 +389,6 @@ describe('DetailPanel', () => {
deleteNode: vi.fn(),
updateNode: vi.fn(),
snapshotHistory: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
expect(() => render(<DetailPanel onEdit={vi.fn()} />)).not.toThrow()
})
@@ -446,8 +420,6 @@ describe('DetailPanel', () => {
deleteNode: vi.fn(),
updateNode,
snapshotHistory: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -473,8 +445,6 @@ describe('DetailPanel', () => {
deleteNode: vi.fn(),
updateNode,
snapshotHistory: vi.fn(),
setHighlightedPath: vi.fn(),
edges: [],
} as unknown as ReturnType<typeof canvasStore.useCanvasStore>)
render(<DetailPanel onEdit={vi.fn()} />)
@@ -638,7 +608,6 @@ describe('DetailPanel', () => {
function setupSized(node: Partial<Node<NodeData>>, setNodeSize = vi.fn()) {
const state = {
nodes: [{ ...makeNode({}), ...node }],
edges: [],
selectedNodeId: 'n1',
selectedNodeIds: [],
setSelectedNode: vi.fn(),
@@ -648,7 +617,6 @@ describe('DetailPanel', () => {
createGroup: vi.fn(),
ungroup: vi.fn(),
setNodeSize,
setHighlightedPath: vi.fn(),
serviceStatuses: {},
}
vi.mocked(canvasStore.useCanvasStore).mockImplementation(
frontend/src/components/panels/__tests__/GroupPanels.test.tsx
-2
View File
@@ -34,7 +34,6 @@ function makeGroupNode(id = 'g1', label = 'My Group', showBorder = true) {
const mockStore = {
nodes: [],
edges: [],
selectedNodeId: null,
selectedNodeIds: [],
setSelectedNode: vi.fn(),
@@ -44,7 +43,6 @@ const mockStore = {
createGroup: vi.fn(),
ungroup: vi.fn(),
removeFromGroup: vi.fn(),
setHighlightedPath: vi.fn(),
}
function setupStore(overrides = {}) {
frontend/src/stores/canvasStore.ts
-5
View File
@@ -38,8 +38,6 @@ interface CanvasState {
floorMap: FloorMapConfig | null
setFloorMap: (config: FloorMapConfig | null) => void
updateFloorMap: (patch: Partial<FloorMapConfig>) => void
highlightedPath: string[]
setHighlightedPath: (edgeIds: string[]) => void
// History
past: HistoryEntry[]
@@ -105,7 +103,6 @@ export const useCanvasStore = create<CanvasState>((set) => ({
scanEventTs: 0,
serviceStatuses: {},
floorMap: null,
highlightedPath: [],
fitViewPending: false,
past: [],
@@ -763,8 +760,6 @@ export const useCanvasStore = create<CanvasState>((set) => ({
hasUnsavedChanges: true,
})),
setHighlightedPath: (edgeIds) => set({ highlightedPath: edgeIds }),
loadCanvas: (nodes, edges) => {
// React Flow requires parents before children in the array
const parents = nodes.filter((n) => !n.parentId)
frontend/src/utils/zigbeePathfinding.ts
-89
View File
@@ -1,89 +0,0 @@
import type { Node, Edge } from '@xyflow/react'
import type { NodeData, EdgeData } from '@/types'
function getNodeLqi(node: Node<NodeData>): number {
const lqiProp = node.data.properties?.find((p) => p.key === 'LQI')
if (!lqiProp) return 255
const lqi = parseInt(lqiProp.value, 10)
return isNaN(lqi) ? 255 : lqi
}
/**
* Run Dijkstra on the Zigbee `iot` edge subgraph from `startNodeId` to
* `targetNodeId`. Returns the ordered list of edge IDs forming the optimal
* path, or an empty array if no path exists.
*
* Edge cost = 255 - LQI, where LQI is read from the edge's target node
* properties (higher LQI = lower cost). For reverse traversal, the same
* cost is used.
*/
export function findZigbeePath(
startNodeId: string,
targetNodeId: string,
nodes: Node<NodeData>[],
edges: Edge<EdgeData>[],
): string[] {
if (startNodeId === targetNodeId) return []
const iotEdges = edges.filter((e) => (e.data?.type ?? 'ethernet') === 'iot')
if (iotEdges.length === 0) return []
const nodeMap = new Map(nodes.map((n) => [n.id, n]))
const adjacency = new Map<string, { neighbor: string; edgeId: string; cost: number }[]>()
for (const e of iotEdges) {
const targetLqi = nodeMap.get(e.target) ? getNodeLqi(nodeMap.get(e.target)!) : 255
const sourceLqi = nodeMap.get(e.source) ? getNodeLqi(nodeMap.get(e.source)!) : 255
const cost = 255 - Math.min(targetLqi, sourceLqi)
if (!adjacency.has(e.source)) adjacency.set(e.source, [])
if (!adjacency.has(e.target)) adjacency.set(e.target, [])
adjacency.get(e.source)!.push({ neighbor: e.target, edgeId: e.id, cost })
adjacency.get(e.target)!.push({ neighbor: e.source, edgeId: e.id, cost })
}
if (!adjacency.has(startNodeId) || !adjacency.has(targetNodeId)) return []
const dist = new Map<string, number>()
const prev = new Map<string, { node: string; edgeId: string }>()
const unvisited = new Set(adjacency.keys())
for (const nodeId of unvisited) dist.set(nodeId, Infinity)
dist.set(startNodeId, 0)
while (unvisited.size > 0) {
let current: string | null = null
let minDist = Infinity
for (const nodeId of unvisited) {
const d = dist.get(nodeId)!
if (d < minDist) { minDist = d; current = nodeId }
}
if (current === null || minDist === Infinity) break
if (current === targetNodeId) break
unvisited.delete(current)
const neighbors = adjacency.get(current) ?? []
for (const { neighbor, edgeId, cost } of neighbors) {
if (!unvisited.has(neighbor)) continue
const alt = dist.get(current)! + cost
if (alt < (dist.get(neighbor) ?? Infinity)) {
dist.set(neighbor, alt)
prev.set(neighbor, { node: current, edgeId })
}
}
}
// Reconstruct path: walk from targetNodeId back to startNodeId
const pathEdges: string[] = []
let current = targetNodeId
while (current !== startNodeId) {
const p = prev.get(current)
if (!p) return []
pathEdges.unshift(p.edgeId)
current = p.node
}
return pathEdges
}