@matter-server/dashboard 0.3.3 → 0.3.5-alpha.0-20260203-66f5d74

package/src/pages/matter-node-view.ts

@@ -8,12 +8,13 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { isTestNodeId, MatterClient, MatterNode } from "@matter-server/ws-client";
 import { mdiChevronRight, mdiGraphOutline } from "@mdi/js";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import "../components/ha-svg-icon";
+import { formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 import "./components/header";
 import "./components/node-details";
 import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
@@ -54,9 +55,16 @@ class MatterNodeView extends LitElement {
         const graphViewType = networkType === "ethernet" ? "wifi" : networkType;
         const graphUrl = showGraphButton ? `#${graphViewType}/${this.node.node_id}` : null;
 
+        // Format node address for hex display
+        const fabricIndex = getEffectiveFabricIndex(
+            this.client.serverInfo.fabric_index,
+            isTestNodeId(this.node.node_id),
+        );
+        const nodeHex = formatNodeAddress(fabricIndex, this.node.node_id);
+
         return html`
             <dashboard-header
-                .title=${"Node " + this.node.node_id}
+                .title=${`Node ${this.node.node_id} ${nodeHex}`}
                 .client=${this.client}
                 backButton="#"
             ></dashboard-header>
@@ -64,7 +72,7 @@ class MatterNodeView extends LitElement {
             <!-- node details section -->
             <div class="container">
                 <div class="node-title-bar">
-                    <h2>Node ${this.node.node_id}</h2>
+                    <h2>Node ${this.node.node_id} <span class="node-id-hex">${nodeHex}</span></h2>
                     ${showGraphButton
                         ? html`
                               <a href=${graphUrl} class="show-in-graph-button" title="Show in ${graphViewType} graph">
@@ -156,6 +164,13 @@ class MatterNodeView extends LitElement {
             color: var(--md-sys-color-on-background, #333);
         }
 
+        .node-id-hex {
+            font-size: 0.75em;
+            font-weight: 400;
+            color: var(--md-sys-color-on-surface-variant, #666);
+            font-family: monospace;
+        }
+
         .show-in-graph-button {
             display: inline-flex;
             align-items: center;

package/src/pages/network/base-network-graph.ts

@@ -23,6 +23,9 @@ export abstract class BaseNetworkGraph extends LitElement {
     @state()
     protected _selectedNodeId: number | string | null = null;
 
+    @state()
+    protected _physicsEnabled = true;
+
     protected _network?: Network;
     protected _nodesDataSet?: DataSet<NetworkGraphNode>;
     protected _edgesDataSet?: DataSet<NetworkGraphEdge>;
@@ -30,6 +33,11 @@ export abstract class BaseNetworkGraph extends LitElement {
     protected _resizeObserver?: ResizeObserver;
     protected _themeUnsubscribe?: () => void;
     protected _updateDebounceTimer?: ReturnType<typeof setTimeout>;
+    protected _autoFreezeTimer?: ReturnType<typeof setTimeout>;
+    /** Whether auto-freeze has already been applied (to avoid re-freezing after user unfreezes) */
+    private _autoFreezeApplied = false;
+    /** Whether initial fit has been done (to preserve user's zoom/pan after first load) */
+    private _initialFitDone = false;
 
     /** Store original edge colors for restoration after highlighting */
     private _originalEdgeColors: Map<string, { color: string; highlight: string }> = new Map();
@@ -133,17 +141,31 @@ export abstract class BaseNetworkGraph extends LitElement {
 
         // Subscribe to theme changes - refresh entire graph to update colors
         this._themeUnsubscribe = ThemeService.subscribe(() => {
-            if (this._network) {
-                // Update font colors
+            if (this._network && this._nodesDataSet) {
+                const fontColor = this._getFontColor();
+
+                // Update default font colors for new nodes
                 this._network.setOptions({
                     nodes: {
                         font: {
-                            color: this._getFontColor(),
+                            color: fontColor,
                         },
                     },
                 });
+
                 // Regenerate node icons and edges with new theme colors
                 this._updateGraph();
+
+                // Update font color on all existing nodes in the dataset
+                const allNodes = this._nodesDataSet.get();
+                const nodeUpdates = allNodes.map((node: NetworkGraphNode) => ({
+                    id: node.id,
+                    font: { color: fontColor },
+                }));
+                this._nodesDataSet.update(nodeUpdates);
+
+                // Force redraw
+                this._network.redraw();
             }
         });
     }
@@ -152,6 +174,7 @@ export abstract class BaseNetworkGraph extends LitElement {
         super.disconnectedCallback();
         this._resizeObserver?.disconnect();
         this._themeUnsubscribe?.();
+        this._cancelAutoFreezeTimer();
         if (this._updateDebounceTimer) {
             clearTimeout(this._updateDebounceTimer);
         }
@@ -229,25 +252,21 @@ export abstract class BaseNetworkGraph extends LitElement {
             this._dispatchNodeSelected(null);
         });
 
-        // Auto-fit after stabilization completes
+        // Auto-fit after initial stabilization completes (only once)
         this._network.on("stabilizationIterationsDone", () => {
-            // Fit with padding to keep nodes away from edges
-            this._network?.fit({
-                animation: {
-                    duration: 500,
-                    easingFunction: "easeInOutQuad",
-                },
-            });
-        });
+            if (!this._initialFitDone) {
+                // Fit with padding to keep nodes away from edges
+                this._network?.fit({
+                    animation: {
+                        duration: 500,
+                        easingFunction: "easeInOutQuad",
+                    },
+                });
+                this._initialFitDone = true;
 
-        // Also fit when physics fully stops (catches any drift after initial stabilization)
-        this._network.on("stabilized", () => {
-            this._network?.fit({
-                animation: {
-                    duration: 300,
-                    easingFunction: "easeInOutQuad",
-                },
-            });
+                // Start auto-freeze timer (5 seconds after initial stabilization)
+                this._startAutoFreezeTimer();
+            }
         });
 
         this._updateGraph();
@@ -272,6 +291,99 @@ export abstract class BaseNetworkGraph extends LitElement {
         });
     }
 
+    /**
+     * Zooms in by 20%.
+     */
+    public zoomIn(): void {
+        if (!this._network) return;
+        const scale = this._network.getScale();
+        this._network.moveTo({
+            scale: scale * 1.2,
+            animation: {
+                duration: 200,
+                easingFunction: "easeInOutQuad",
+            },
+        });
+    }
+
+    /**
+     * Zooms out by 20%.
+     */
+    public zoomOut(): void {
+        if (!this._network) return;
+        const scale = this._network.getScale();
+        this._network.moveTo({
+            scale: scale / 1.2,
+            animation: {
+                duration: 200,
+                easingFunction: "easeInOutQuad",
+            },
+        });
+    }
+
+    /**
+     * Returns whether physics simulation is currently enabled.
+     */
+    public get physicsEnabled(): boolean {
+        return this._physicsEnabled;
+    }
+
+    /**
+     * Enables or disables physics simulation (node movement/settling).
+     * When disabled, nodes freeze in place; when enabled, they resume settling.
+     * @param enabled Whether to enable physics
+     * @param isManual If true, cancels any pending auto-freeze (user manually toggled)
+     */
+    public setPhysicsEnabled(enabled: boolean, isManual = true): void {
+        // If user manually toggles, cancel auto-freeze to respect their choice
+        if (isManual) {
+            this._cancelAutoFreezeTimer();
+            this._autoFreezeApplied = true; // Prevent future auto-freeze
+        }
+
+        this._physicsEnabled = enabled;
+        this._network?.setOptions({
+            physics: { enabled },
+        });
+    }
+
+    /**
+     * Starts the auto-freeze timer. Physics will be disabled after 5 seconds
+     * unless the user manually toggles physics or the timer is cancelled.
+     */
+    private _startAutoFreezeTimer(): void {
+        // Don't auto-freeze if already applied or user has manually controlled physics
+        if (this._autoFreezeApplied) {
+            return;
+        }
+
+        this._cancelAutoFreezeTimer();
+        this._autoFreezeTimer = setTimeout(() => {
+            if (!this._autoFreezeApplied && this._physicsEnabled) {
+                this.setPhysicsEnabled(false, false); // false = not manual, don't mark as applied
+                this._autoFreezeApplied = true;
+                // Dispatch event so parent can update UI state
+                this.dispatchEvent(
+                    new CustomEvent("physics-changed", {
+                        detail: { enabled: false },
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
+            }
+        }, 5000);
+    }
+
+    /**
+     * Cancels any pending auto-freeze timer.
+     */
+    private _cancelAutoFreezeTimer(): void {
+        if (this._autoFreezeTimer) {
+            clearTimeout(this._autoFreezeTimer);
+            this._autoFreezeTimer = undefined;
+        }
+    }
+
     /**
      * Selects a node by ID and focuses on it.
      */
@@ -309,16 +421,20 @@ export abstract class BaseNetworkGraph extends LitElement {
     protected _highlightConnections(nodeId: number | string): void {
         if (!this._edgesDataSet || !this._nodesDataSet) return;
 
-        // Store original colors before highlighting
         const allEdges = this._edgesDataSet.get();
+
+        // First pass: Store original colors ONLY if not already stored.
+        // We must do this BEFORE any highlighting modifies edge colors.
+        // If edges were already highlighted (switching between nodes), the colors
+        // in the DataSet might be dimmed, so we rely on previously stored values.
         for (const edge of allEdges) {
             const edgeId = String(edge.id);
             if (!this._originalEdgeColors.has(edgeId)) {
-                const colorObj = edge.color as { color: string; highlight: string };
-                this._originalEdgeColors.set(edgeId, {
-                    color: colorObj?.color ?? "#999999",
-                    highlight: colorObj?.highlight ?? "#999999",
-                });
+                const colorObj = edge.color as { color: string; highlight: string } | undefined;
+                // Extract colors, with fallbacks
+                const color = colorObj?.color ?? "#999999";
+                const highlight = colorObj?.highlight ?? color;
+                this._originalEdgeColors.set(edgeId, { color, highlight });
             }
         }
 
@@ -337,21 +453,19 @@ export abstract class BaseNetworkGraph extends LitElement {
             }
         }
 
-        // Update edges - make connected ones thicker
+        // Update edges - make connected ones thicker, dim non-connected ones
         const dimmedColor = this._getDimmedEdgeColor();
         const edgeUpdates = allEdges.map((edge: NetworkGraphEdge) => {
             const isConnected = edge.from === nodeId || edge.to === nodeId;
             const originalColor = this._originalEdgeColors.get(String(edge.id));
+            // Use stored original color for connected edges, fallback to a default if somehow missing
+            const connectedColor = originalColor ?? { color: "#999999", highlight: "#999999" };
             return {
                 id: edge.id,
                 width: isConnected ? 3 : 1,
-                // Dim non-connected edges
                 color: isConnected
-                    ? { color: originalColor?.color, highlight: originalColor?.highlight }
-                    : {
-                          color: dimmedColor,
-                          highlight: dimmedColor,
-                      },
+                    ? { color: connectedColor.color, highlight: connectedColor.highlight }
+                    : { color: dimmedColor, highlight: dimmedColor },
             };
         });
         this._edgesDataSet.update(edgeUpdates);

package/src/pages/network/device-icons.ts

@@ -278,6 +278,6 @@ export function createUnknownDeviceIconDataUrl(isRouter: boolean = false, isSele
  * @returns A data URL containing the SVG
  */
 export function createWiFiRouterIconDataUrl(isSelected: boolean = false): string {
-    const color = isSelected ? "#1976d2" : "#2196f3"; // Blue for WiFi AP
+    const color = isSelected ? "#1976d2" : "#ff9800"; // Orange for external infrastructure (same as Thread unknown)
     return createIconDataUrl(mdiWifi, color);
 }