@matter-server/dashboard 0.6.2 → 0.6.3

package/dist/web/js/{node-binding-dialog-9yy2LE3_.js → node-binding-dialog-B5p-gbim.js}

@@ -1,4 +1,4 @@
-import { q as i, P as c, Q as clientContext, n, d as e, i as i$1, R as showPromptDialog, J as showAlertDialog, A, j as b, K as handleAsync, t } from './matter-dashboard-app-Cj88TtbZ.js';
+import { q as i, P as c, Q as clientContext, n, d as e, i as i$1, R as showPromptDialog, J as showAlertDialog, A, j as b, K as handleAsync, t } from './matter-dashboard-app-C9zTE5uH.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/dist/web/js/{settings-dialog-Cs2xMsXb.js → settings-dialog-BMFhom0W.js}

@@ -1,4 +1,4 @@
-import { e, m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, c as mixinElementInternals, i, _ as __decorate, n as n$1, d as e$1, f as isActivationClick, g as dispatchActivationClick, A, h as e$2, j as b, r as redispatchEvent, k as getFormValue, l as getFormState, o as createValidator, C as CheckboxValidator, p as getValidityAnchor, q as i$1, t, N as NavigableKeys, s as o, u as r, v as createAnimationSignal, L as ListController, w as getActiveItem, x as getLastActivatableItem, y as getFirstActivatableItem, z as o$1, E as EASING, V as Validator, D, B as mixinOnReportValidity, F as onReportValidity, G as u, H as i$2, I as fireAndForget, J as showAlertDialog, K as handleAsync, M as DevModeService } from './matter-dashboard-app-Cj88TtbZ.js';
+import { e, m as mixinDelegatesAria, a as mixinConstraintValidation, b as mixinFormAssociated, c as mixinElementInternals, i, _ as __decorate, n as n$1, d as e$1, f as isActivationClick, g as dispatchActivationClick, A, h as e$2, j as b, r as redispatchEvent, k as getFormValue, l as getFormState, o as createValidator, C as CheckboxValidator, p as getValidityAnchor, q as i$1, t, N as NavigableKeys, s as o, u as r, v as createAnimationSignal, L as ListController, w as getActiveItem, x as getLastActivatableItem, y as getFirstActivatableItem, z as o$1, E as EASING, V as Validator, D, B as mixinOnReportValidity, F as onReportValidity, G as u, H as i$2, I as fireAndForget, J as showAlertDialog, K as handleAsync, M as DevModeService } from './matter-dashboard-app-C9zTE5uH.js';
 import { p as preventDefault } from './prevent_default-D-ohDGsN.js';
 import './main.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@matter-server/dashboard",
-    "version": "0.6.2",
+    "version": "0.6.3",
     "description": "Dashboard for OHF Matter Server",
     "homepage": "https://github.com/matter-js/matterjs-server",
     "bugs": {
@@ -33,8 +33,8 @@
     "dependencies": {
         "@lit/context": "^1.1.6",
         "@material/web": "^2.4.1",
-        "@matter-server/custom-clusters": "0.6.2",
-        "@matter-server/ws-client": "0.6.2",
+        "@matter-server/custom-clusters": "0.6.3",
+        "@matter-server/ws-client": "0.6.3",
         "@mdi/js": "^7.4.47",
         "lit": "^3.3.2",
         "tslib": "^2.8.1",
@@ -42,7 +42,7 @@
     },
     "devDependencies": {
         "@babel/preset-env": "^7.29.2",
-        "@matter/main": "0.17.0-alpha.0-20260426-5bf9dab53",
+        "@matter/main": "0.17.0-alpha.0-20260429-8fd498888",
         "@rollup/plugin-babel": "^7.0.0",
         "@rollup/plugin-commonjs": "^29.0.2",
         "@rollup/plugin-json": "^6.1.0",

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

@@ -5,7 +5,7 @@
  */
 
 import type { MatterClient, MatterNode } from "@matter-server/ws-client";
-import { mdiFitToScreen, mdiMagnifyMinus, mdiMagnifyPlus, mdiPause, mdiPlay } from "@mdi/js";
+import { mdiEyeOff, mdiFitToScreen, mdiMagnifyMinus, mdiMagnifyPlus, mdiPause, mdiPlay } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import "../components/ha-svg-icon";
@@ -13,6 +13,7 @@ import { reducedMotionStyles } from "../util/shared-styles.js";
 import "./components/footer";
 import "./components/header";
 import type { ActiveView } from "./components/header.js";
+import { BorderRouterStore } from "./network/border-router-store.js";
 import "./network/device-panel";
 import "./network/network-details";
 import "./network/thread-graph";
@@ -26,6 +27,15 @@ declare global {
     }
 }
 
+type HideOptionKey = "_hideOfflineNodes" | "_hideWeakSignalEdges" | "_hideMediumSignalEdges" | "_hideStrongSignalEdges";
+
+const HIDE_OPTIONS: readonly { key: HideOptionKey; label: string }[] = [
+    { key: "_hideOfflineNodes", label: "Offline nodes" },
+    { key: "_hideWeakSignalEdges", label: "Weak signal edges" },
+    { key: "_hideMediumSignalEdges", label: "Medium signal edges" },
+    { key: "_hideStrongSignalEdges", label: "Strong signal edges" },
+];
+
 @customElement("matter-network-view")
 class MatterNetworkView extends LitElement {
     public client!: MatterClient;
@@ -61,6 +71,24 @@ class MatterNetworkView extends LitElement {
     @state()
     private _threadAddressSearchStatus: "idle" | "found" | "not-found" = "idle";
 
+    @state()
+    private _borderRouterStore = new BorderRouterStore();
+
+    @state()
+    private _showHideMenu = false;
+
+    @state()
+    private _hideOfflineNodes = false;
+
+    @state()
+    private _hideWeakSignalEdges = false;
+
+    @state()
+    private _hideMediumSignalEdges = false;
+
+    @state()
+    private _hideStrongSignalEdges = false;
+
     private _initialSelectionApplied = false;
     private _selectRetryTimer?: ReturnType<typeof setTimeout>;
 
@@ -78,9 +106,37 @@ class MatterNetworkView extends LitElement {
         }
     }
 
+    override firstUpdated(): void {
+        if (this.networkType === "thread") {
+            void this._refreshBorderRouters();
+        }
+    }
+
+    private async _refreshBorderRouters(): Promise<void> {
+        try {
+            await this._borderRouterStore.refresh(this.client);
+            this.requestUpdate();
+        } catch (err) {
+            console.warn("Failed to refresh border router store:", err);
+        }
+    }
+
+    private _handleConnectionsUpdated(): void {
+        // Skip the BR snapshot refresh when the user updated a WiFi node — the dialog fires
+        // the same event for both network types but BR data is Thread-only.
+        if (this.networkType !== "thread") return;
+        void this._refreshBorderRouters();
+    }
+
     override updated(changedProperties: Map<string, unknown>): void {
         super.updated(changedProperties);
 
+        // Lazily refresh the BR snapshot the first time the user switches into the Thread
+        // view, in case firstUpdated() fired while the WiFi view was active.
+        if (changedProperties.has("networkType") && this.networkType === "thread") {
+            void this._refreshBorderRouters();
+        }
+
         // After render, select the node in the graph
         if (!this._initialSelectionApplied && this.initialSelectedNodeId !== null) {
             this._initialSelectionApplied = true;
@@ -89,8 +145,16 @@ class MatterNetworkView extends LitElement {
         }
     }
 
+    override connectedCallback(): void {
+        super.connectedCallback();
+        document.addEventListener("click", this._documentClickHandler);
+        document.addEventListener("keydown", this._documentKeyHandler);
+    }
+
     override disconnectedCallback(): void {
         super.disconnectedCallback();
+        document.removeEventListener("click", this._documentClickHandler);
+        document.removeEventListener("keydown", this._documentKeyHandler);
         if (this._selectRetryTimer) {
             clearTimeout(this._selectRetryTimer);
         }
@@ -116,6 +180,12 @@ class MatterNetworkView extends LitElement {
 
     private _handleDetailsClose(): void {
         this._selectedNodeId = null;
+        // Tell the graph to deselect and clear highlights
+        if (this.networkType === "thread") {
+            this._threadGraph?.deselectAll();
+        } else {
+            this._wifiGraph?.deselectAll();
+        }
     }
 
     private _handleSelectNode(event: CustomEvent<{ nodeId: number | string }>): void {
@@ -153,6 +223,31 @@ class MatterNetworkView extends LitElement {
         }
     }
 
+    private _handleToggleHideMenu(): void {
+        this._showHideMenu = !this._showHideMenu;
+    }
+
+    private readonly _documentClickHandler = (event: MouseEvent): void => {
+        const path = event.composedPath();
+        if (!path.some(el => el instanceof HTMLElement && el.classList.contains("hide-menu-container"))) {
+            this._showHideMenu = false;
+        }
+    };
+
+    private readonly _documentKeyHandler = (event: KeyboardEvent): void => {
+        if (event.key === "Escape" && this._showHideMenu) {
+            this._showHideMenu = false;
+        }
+    };
+
+    private _handleToggleHideOption(option: HideOptionKey): void {
+        this[option] = !this[option];
+    }
+
+    private _isAnyHideOptionActive(): boolean {
+        return HIDE_OPTIONS.some(option => this[option.key]);
+    }
+
     private _handleTogglePhysics(): void {
         const newState = !this._physicsEnabled;
         this._physicsEnabled = newState;
@@ -231,6 +326,41 @@ class MatterNetworkView extends LitElement {
                             <button class="control-button" @click=${this._handleFitToScreen} title="Fit to screen">
                                 <ha-svg-icon .path=${mdiFitToScreen}></ha-svg-icon>
                             </button>
+                            <div class="hide-menu-container">
+                                <button
+                                    class="control-button ${this._isAnyHideOptionActive() ? "active" : ""}"
+                                    @click=${this._handleToggleHideMenu}
+                                    title="Hide options"
+                                    aria-haspopup="true"
+                                    aria-expanded=${this._showHideMenu}
+                                    aria-controls="hide-options-menu"
+                                >
+                                    <ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
+                                </button>
+                                ${this._showHideMenu
+                                    ? html`
+                                          <div
+                                              id="hide-options-menu"
+                                              class="hide-dropdown"
+                                              role="group"
+                                              aria-label="Hide options"
+                                          >
+                                              ${HIDE_OPTIONS.map(
+                                                  option => html`
+                                                      <label class="hide-option">
+                                                          <input
+                                                              type="checkbox"
+                                                              .checked=${this[option.key]}
+                                                              @change=${() => this._handleToggleHideOption(option.key)}
+                                                          />
+                                                          <span>${option.label}</span>
+                                                      </label>
+                                                  `,
+                                              )}
+                                          </div>
+                                      `
+                                    : ""}
+                            </div>
                             <button
                                 class="control-button ${this._physicsEnabled ? "" : "active"}"
                                 @click=${this._handleTogglePhysics}
@@ -250,6 +380,11 @@ class MatterNetworkView extends LitElement {
                       </div>`}
                 <thread-graph
                     .nodes=${this.nodes}
+                    .borderRouters=${this._borderRouterStore.entries}
+                    .hideOfflineNodes=${this._hideOfflineNodes}
+                    .hideWeakSignalEdges=${this._hideWeakSignalEdges}
+                    .hideMediumSignalEdges=${this._hideMediumSignalEdges}
+                    .hideStrongSignalEdges=${this._hideStrongSignalEdges}
                     @node-selected=${this._handleNodeSelected}
                     @physics-changed=${this._handlePhysicsChanged}
                 ></thread-graph>
@@ -294,6 +429,7 @@ class MatterNetworkView extends LitElement {
         const showSidebar = this._selectedNodeId !== null;
         const unknownDevices = this._threadGraph?.unknownDevicesMap ?? new Map();
         const wifiAccessPoints = this._wifiGraph?.wifiAccessPointsMap ?? new Map();
+        const threadEdgePairs = this._threadGraph?.edgePairs ?? new Map();
 
         return html`
             <dashboard-header
@@ -314,9 +450,16 @@ class MatterNetworkView extends LitElement {
                         .selectedNodeId=${this._selectedNodeId}
                         .nodes=${this.nodes}
                         .unknownDevices=${unknownDevices}
+                        .borderRouters=${this._borderRouterStore.entries}
                         .wifiAccessPoints=${wifiAccessPoints}
+                        .threadEdgePairs=${threadEdgePairs}
+                        .hideOfflineNodes=${this._hideOfflineNodes}
+                        .hideWeakSignalEdges=${this._hideWeakSignalEdges}
+                        .hideMediumSignalEdges=${this._hideMediumSignalEdges}
+                        .hideStrongSignalEdges=${this._hideStrongSignalEdges}
                         @close=${this._handleDetailsClose}
                         @select-node=${this._handleSelectNode}
+                        @connections-updated=${this._handleConnectionsUpdated}
                     ></network-details>
                 </aside>
             </div>
@@ -480,6 +623,47 @@ class MatterNetworkView extends LitElement {
                 --icon-primary-color: var(--md-sys-color-on-primary-container, #21005d);
             }
 
+            .hide-menu-container {
+                position: relative;
+            }
+
+            .hide-dropdown {
+                position: absolute;
+                top: calc(100% + 4px);
+                right: 0;
+                background: var(--md-sys-color-surface-container, #fff);
+                border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+                border-radius: 4px;
+                box-shadow: var(--md-sys-elevation-level2, 0 2px 6px var(--md-sys-color-shadow, rgba(0, 0, 0, 0.15)));
+                min-width: 150px;
+                z-index: 100;
+                padding: 4px 0;
+            }
+
+            .hide-option {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding: 8px 12px;
+                cursor: pointer;
+                color: var(--md-sys-color-on-surface, #1c1b1f);
+                font-size: 0.9rem;
+                user-select: none;
+            }
+
+            .hide-option:hover {
+                background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+            }
+
+            .hide-option input[type="checkbox"] {
+                cursor: pointer;
+                margin: 0;
+            }
+
+            .hide-option span {
+                flex: 1;
+            }
+
             .graph-section thread-graph,
             .graph-section wifi-graph {
                 flex: 1 1 0;

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

@@ -406,6 +406,16 @@ export abstract class BaseNetworkGraph extends LitElement {
         });
     }
 
+    /**
+     * Deselects all nodes, clears highlights, and restores default styling.
+     */
+    public deselectAll(): void {
+        if (!this._network) return;
+        this._selectedNodeId = null;
+        this._network.unselectAll();
+        this._clearHighlights();
+    }
+
     protected _dispatchNodeSelected(nodeId: number | string | null): void {
         this.dispatchEvent(
             new CustomEvent("node-selected", {

package/src/pages/network/border-router-store.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { BorderRouterEntry, MatterClient } from "@matter-server/ws-client";
+
+/**
+ * Snapshot of mDNS-discovered Thread Border Routers.
+ *
+ * Refreshed on Thread-graph mount and on the reload-button click. The map is keyed by the
+ * uppercase 16-char xa hex so callers can join against neighbor-table extended addresses
+ * normalized to the same casing.
+ */
+export class BorderRouterStore {
+    // Replaced (not mutated) on every refresh so Lit consumers passing this map as a
+    // @property() detect the snapshot change via the default `===` identity compare and
+    // re-render. Mutating in place would keep the same reference and silently skip updates.
+    #entries: ReadonlyMap<string, BorderRouterEntry> = new Map();
+
+    get entries(): ReadonlyMap<string, BorderRouterEntry> {
+        return this.#entries;
+    }
+
+    async refresh(client: MatterClient): Promise<void> {
+        const list = await client.sendCommand("get_thread_border_routers", 0, {});
+        const next = new Map<string, BorderRouterEntry>();
+        for (const entry of list) {
+            next.set(entry.extAddressHex.toUpperCase(), entry);
+        }
+        this.#entries = next;
+    }
+
+    reset(): void {
+        this.#entries = new Map();
+    }
+}