@matter-server/dashboard 0.3.2 → 0.3.3

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

@@ -0,0 +1,325 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { mdiFitToScreen } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import "../components/ha-svg-icon";
+import "./components/footer";
+import "./components/header";
+import type { ActiveView } from "./components/header.js";
+import "./network/device-panel";
+import "./network/network-details";
+import "./network/thread-graph";
+import type { ThreadGraph } from "./network/thread-graph.js";
+import "./network/wifi-graph";
+import type { WiFiGraph } from "./network/wifi-graph.js";
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "matter-network-view": MatterNetworkView;
+    }
+}
+
+@customElement("matter-network-view")
+class MatterNetworkView extends LitElement {
+    public client!: MatterClient;
+
+    @property({ type: Object })
+    public nodes: Record<string, MatterNode> = {};
+
+    @property()
+    public activeView?: ActiveView;
+
+    @property()
+    public networkType: "thread" | "wifi" = "thread";
+
+    /** Initial selected node ID from URL (string to avoid BigInt precision loss) */
+    @property()
+    public initialSelectedNodeId: string | null = null;
+
+    @property({ type: Boolean })
+    public hasThreadDevices?: boolean;
+
+    @property({ type: Boolean })
+    public hasWifiDevices?: boolean;
+
+    @state()
+    private _selectedNodeId: number | string | null = null;
+
+    private _initialSelectionApplied = false;
+    private _selectRetryTimer?: ReturnType<typeof setTimeout>;
+
+    @query("thread-graph")
+    private _threadGraph?: ThreadGraph;
+
+    @query("wifi-graph")
+    private _wifiGraph?: WiFiGraph;
+
+    override willUpdate(changedProperties: Map<string, unknown>): void {
+        // Apply initial selection when the property changes
+        if (changedProperties.has("initialSelectedNodeId") && this.initialSelectedNodeId !== null) {
+            this._selectedNodeId = this.initialSelectedNodeId;
+            this._initialSelectionApplied = false;
+        }
+    }
+
+    override updated(changedProperties: Map<string, unknown>): void {
+        super.updated(changedProperties);
+
+        // After render, select the node in the graph
+        if (!this._initialSelectionApplied && this.initialSelectedNodeId !== null) {
+            this._initialSelectionApplied = true;
+            // Wait for the graph to be ready, then select and focus
+            this._selectNodeWhenReady(this.initialSelectedNodeId);
+        }
+    }
+
+    override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        if (this._selectRetryTimer) {
+            clearTimeout(this._selectRetryTimer);
+        }
+    }
+
+    /**
+     * Tries to select a node in the graph, retrying until the graph is ready.
+     */
+    private _selectNodeWhenReady(nodeId: string | number, retries: number = 10): void {
+        const graph = this.networkType === "thread" ? this._threadGraph : this._wifiGraph;
+
+        if (graph?.isReady()) {
+            graph.selectNode(nodeId);
+        } else if (retries > 0) {
+            // Graph not ready yet, retry after a short delay
+            this._selectRetryTimer = setTimeout(() => this._selectNodeWhenReady(nodeId, retries - 1), 100);
+        }
+    }
+
+    private _handleNodeSelected(event: CustomEvent<{ nodeId: number | string | null }>): void {
+        this._selectedNodeId = event.detail.nodeId;
+    }
+
+    private _handleDetailsClose(): void {
+        this._selectedNodeId = null;
+    }
+
+    private _handleSelectNode(event: CustomEvent<{ nodeId: number | string }>): void {
+        const nodeId = event.detail.nodeId;
+        this._selectedNodeId = nodeId;
+        // Select the node in the graph
+        if (this.networkType === "thread") {
+            this._threadGraph?.selectNode(nodeId);
+        } else {
+            this._wifiGraph?.selectNode(nodeId);
+        }
+    }
+
+    private _handleFitToScreen(): void {
+        if (this.networkType === "thread") {
+            this._threadGraph?.fit();
+        } else {
+            this._wifiGraph?.fit();
+        }
+    }
+
+    private _renderThreadView() {
+        return html`
+            <div class="graph-section">
+                <div class="graph-header">
+                    <h2>Thread Network Mesh</h2>
+                    <button class="fit-button" @click=${this._handleFitToScreen} title="Fit to screen">
+                        <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
+                    </button>
+                </div>
+                <thread-graph .nodes=${this.nodes} @node-selected=${this._handleNodeSelected}></thread-graph>
+            </div>
+        `;
+    }
+
+    private _renderWifiView() {
+        return html`
+            <div class="graph-section">
+                <div class="graph-header">
+                    <h2>WiFi Network</h2>
+                    <button class="fit-button" @click=${this._handleFitToScreen} title="Fit to screen">
+                        <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
+                    </button>
+                </div>
+                <wifi-graph .nodes=${this.nodes} @node-selected=${this._handleNodeSelected}></wifi-graph>
+            </div>
+        `;
+    }
+
+    override render() {
+        const showSidebar = this._selectedNodeId !== null;
+        const unknownDevices = this._threadGraph?.unknownDevicesMap ?? new Map();
+        const wifiAccessPoints = this._wifiGraph?.wifiAccessPointsMap ?? new Map();
+
+        return html`
+            <dashboard-header
+                title="Open Home Foundation Matter Server"
+                .client=${this.client}
+                .activeView=${this.activeView}
+                .hasThreadDevices=${this.hasThreadDevices}
+                .hasWifiDevices=${this.hasWifiDevices}
+            ></dashboard-header>
+
+            <div class="content">
+                <div class="main-area">
+                    ${this.networkType === "thread" ? this._renderThreadView() : this._renderWifiView()}
+                </div>
+
+                <aside class="details-sidebar ${showSidebar ? "visible" : ""}">
+                    <network-details
+                        .selectedNodeId=${this._selectedNodeId}
+                        .nodes=${this.nodes}
+                        .unknownDevices=${unknownDevices}
+                        .wifiAccessPoints=${wifiAccessPoints}
+                        @close=${this._handleDetailsClose}
+                        @select-node=${this._handleSelectNode}
+                    ></network-details>
+                </aside>
+            </div>
+
+            <dashboard-footer></dashboard-footer>
+        `;
+    }
+
+    static override styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            height: 100dvh; /* dynamic viewport height - fallback above for older browsers */
+            overflow: hidden;
+            background-color: var(--md-sys-color-background, #fafafa);
+        }
+
+        .content {
+            display: flex;
+            flex: 1 1 0;
+            padding: 8px 16px;
+            gap: 8px;
+            max-width: 1600px;
+            margin: 0 auto;
+            width: 100%;
+            box-sizing: border-box;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        .main-area {
+            flex: 1 1 0;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+        }
+
+        .graph-section {
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .graph-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+            flex-shrink: 0;
+        }
+
+        .graph-header h2 {
+            margin: 0;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-background, #333);
+        }
+
+        .fit-button {
+            background: none;
+            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+            border-radius: 4px;
+            padding: 6px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s;
+        }
+
+        .fit-button:hover {
+            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+        }
+
+        .fit-button ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+        }
+
+        .graph-section thread-graph,
+        .graph-section wifi-graph {
+            flex: 1 1 0;
+            min-height: 0;
+        }
+
+        .wifi-section {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            overflow-y: auto;
+        }
+
+        .wifi-section h2 {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-background, #333);
+        }
+
+        .wifi-section device-panel {
+            flex-shrink: 0;
+        }
+
+        .details-sidebar {
+            width: 320px;
+            flex-shrink: 0;
+            display: none;
+            min-height: 0;
+            overflow-y: auto;
+        }
+
+        .details-sidebar.visible {
+            display: block;
+        }
+
+        @media (max-width: 1024px) {
+            .content {
+                flex-direction: column;
+            }
+
+            .details-sidebar {
+                width: 100%;
+                max-height: 300px;
+            }
+
+            .details-sidebar.visible {
+                display: block;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .content {
+                padding: 8px;
+            }
+        }
+    `;
+}

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

@@ -9,7 +9,7 @@ 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 { mdiChevronRight } from "@mdi/js";
+import { mdiChevronRight, mdiGraphOutline } from "@mdi/js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
@@ -17,6 +17,7 @@ import "../components/ha-svg-icon";
 import "./components/header";
 import "./components/node-details";
 import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
+import { getNetworkType } from "./network/network-utils.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -46,6 +47,13 @@ class MatterNodeView extends LitElement {
             `;
         }
 
+        const networkType = getNetworkType(this.node);
+        // Show graph button for Thread, WiFi, and Ethernet (Ethernet devices are shown in WiFi graph)
+        const showGraphButton = networkType === "thread" || networkType === "wifi" || networkType === "ethernet";
+        // Ethernet devices go to WiFi graph since they're displayed there
+        const graphViewType = networkType === "ethernet" ? "wifi" : networkType;
+        const graphUrl = showGraphButton ? `#${graphViewType}/${this.node.node_id}` : null;
+
         return html`
             <dashboard-header
                 .title=${"Node " + this.node.node_id}
@@ -55,6 +63,17 @@ class MatterNodeView extends LitElement {
 
             <!-- node details section -->
             <div class="container">
+                <div class="node-title-bar">
+                    <h2>Node ${this.node.node_id}</h2>
+                    ${showGraphButton
+                        ? html`
+                              <a href=${graphUrl} class="show-in-graph-button" title="Show in ${graphViewType} graph">
+                                  <ha-svg-icon .path=${mdiGraphOutline}></ha-svg-icon>
+                                  <span class="button-text">Show in graph</span>
+                              </a>
+                          `
+                        : ""}
+                </div>
                 <node-details .node=${this.node} .client=${this.client}></node-details>
             </div>
 
@@ -122,5 +141,60 @@ class MatterNodeView extends LitElement {
             font-weight: bold;
             font-size: 0.8em;
         }
+
+        .node-title-bar {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 16px;
+        }
+
+        .node-title-bar h2 {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--md-sys-color-on-background, #333);
+        }
+
+        .show-in-graph-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            text-decoration: none;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            transition: opacity 0.2s;
+            white-space: nowrap;
+        }
+
+        .show-in-graph-button:hover {
+            opacity: 0.9;
+        }
+
+        .show-in-graph-button ha-svg-icon {
+            --icon-primary-color: var(--md-sys-color-on-primary);
+            width: 16px;
+            height: 16px;
+        }
+
+        @media (max-width: 768px) {
+            .show-in-graph-button {
+                display: none;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .show-in-graph-button .button-text {
+                display: none;
+            }
+
+            .show-in-graph-button {
+                padding: 6px;
+            }
+        }
     `;
 }

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

@@ -16,6 +16,7 @@ import "../components/ha-svg-icon";
 import { formatNodeAddress } from "../util/format_hex.js";
 import "./components/footer";
 import "./components/header";
+import type { ActiveView } from "./components/header.js";
 import "./components/server-details";
 
 declare global {
@@ -31,6 +32,15 @@ class MatterServerView extends LitElement {
     @property()
     public nodes!: MatterClient["nodes"];
 
+    @property()
+    public activeView?: ActiveView;
+
+    @property({ type: Boolean })
+    public hasThreadDevices?: boolean;
+
+    @property({ type: Boolean })
+    public hasWifiDevices?: boolean;
+
     private _cachedNodes?: MatterClient["nodes"];
     private _cachedNodeEntries?: [string, MatterNode][];
 
@@ -46,7 +56,13 @@ class MatterServerView extends LitElement {
         const nodes = this.getNodeEntries(this.nodes);
 
         return html`
-            <dashboard-header title="Open Home Foundation Matter Server" .client=${this.client}></dashboard-header>
+            <dashboard-header
+                title="Open Home Foundation Matter Server"
+                .client=${this.client}
+                .activeView=${this.activeView}
+                .hasThreadDevices=${this.hasThreadDevices}
+                .hasWifiDevices=${this.hasWifiDevices}
+            ></dashboard-header>
 
             <!-- server details section -->
             <div class="container">