Fix ZHA visualization (#9337)

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -9,7 +9,12 @@ import {
 } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../../../types";
-import { Network, Edge, Node, EdgeOptions } from "vis-network/peer";
+import {
+  Network,
+  Edge,
+  Node,
+  EdgeOptions,
+} from "vis-network/peer/esm/vis-network";
 import "../../../../../common/search/search-input";
 import "../../../../../components/device/ha-device-picker";
 import "../../../../../components/ha-button-menu";
@@ -21,6 +26,7 @@ import "../../../../../components/ha-checkbox";
 import type { HaCheckbox } from "../../../../../components/ha-checkbox";
 import { zhaTabs } from "./zha-config-dashboard";
 import { customElement, property, query, state } from "lit/decorators";
+import "../../../../../components/ha-formfield";
 
 @customElement("zha-network-visualization-page")
 export class ZHANetworkVisualizationPage extends LitElement {
@@ -28,7 +34,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
   @property({ type: Boolean }) public isWide!: boolean;
 
@@ -67,8 +73,6 @@ export class ZHANetworkVisualizationPage extends LitElement {
       {},
       {
         autoResize: true,
-        height: window.innerHeight + "px",
-        width: window.innerWidth + "px",
         layout: {
           improvedLayout: true,
         },
@@ -135,10 +139,13 @@ export class ZHANetworkVisualizationPage extends LitElement {
           "ui.panel.config.zha.visualization.header"
         )}
       >
-        <div class="table-header">
+        ${this.narrow
+          ? html`
+              <div slot="header">
                 <search-input
                   no-label-float
                   no-underline
+                  class="header"
                   @value-changed=${this._handleSearchChange}
                   .filter=${this._filter}
                   .label=${this.hass.localize(
@@ -146,6 +153,21 @@ export class ZHANetworkVisualizationPage extends LitElement {
                   )}
                 >
                 </search-input>
+              </div>
+            `
+          : ""}
+        <div class="header">
+          ${!this.narrow
+            ? html`<search-input
+                no-label-float
+                no-underline
+                @value-changed=${this._handleSearchChange}
+                .filter=${this._filter}
+                .label=${this.hass.localize(
+                  "ui.panel.config.zha.visualization.highlight_label"
+                )}
+              ></search-input>`
+            : ""}
           <ha-device-picker
             .hass=${this.hass}
             .value=${this.zoomedDeviceId}
@@ -155,16 +177,24 @@ export class ZHANetworkVisualizationPage extends LitElement {
             .deviceFilter=${(device) => this._filterDevices(device)}
             @value-changed=${this._onZoomToDevice}
           ></ha-device-picker>
+          <div class="controls">
+            <ha-formfield
+              .label=${this.hass!.localize(
+                "ui.panel.config.zha.visualization.auto_zoom"
+              )}
+            >
               <ha-checkbox
                 @change=${this._handleCheckboxChange}
                 .checked=${this._autoZoom}
-          ></ha-checkbox
-          >${this.hass!.localize("ui.panel.config.zha.visualization.auto_zoom")}
-          <mwc-button @click=${this._refreshTopology}
-            >${this.hass!.localize(
-              "ui.panel.config.zha.visualization.refresh_topology"
-            )}</mwc-button
               >
+              </ha-checkbox>
+            </ha-formfield>
+            <mwc-button @click=${this._refreshTopology}>
+              ${this.hass!.localize(
+                "ui.panel.config.zha.visualization.refresh_topology"
+              )}
+            </mwc-button>
+          </div>
         </div>
         <div id="visualization"></div>
       </hass-tabs-subpage>
@@ -352,30 +382,23 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return [
       css`
         .header {
-          font-family: var(--paper-font-display1_-_font-family);
+          border-bottom: 1px solid var(--divider-color);
-          -webkit-font-smoothing: var(
+          padding: 0 8px;
-            --paper-font-display1_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-display1_-_font-size);
-          font-weight: var(--paper-font-display1_-_font-weight);
-          letter-spacing: var(--paper-font-display1_-_letter-spacing);
-          line-height: var(--paper-font-display1_-_line-height);
-          opacity: var(--dark-primary-opacity);
-        }
-
-        .table-header {
-          border-bottom: 1px solid --divider-color;
-          padding: 0 16px;
           display: flex;
           align-items: center;
-          flex-direction: row;
+          justify-content: space-between;
           height: var(--header-height);
+          box-sizing: border-box;
         }
 
-        :host([narrow]) .table-header {
+        .header > * {
+          padding: 0 8px;
+        }
+
+        :host([narrow]) .header {
           flex-direction: column;
           align-items: stretch;
-          height: var(--header-height) * 3;
+          height: var(--header-height) * 2;
         }
 
         .search-toolbar {
@@ -386,34 +409,34 @@ export class ZHANetworkVisualizationPage extends LitElement {
         }
 
         search-input {
-          position: relative;
-          top: 2px;
           flex: 1;
         }
 
-        :host(:not([narrow])) search-input {
-          margin: 5px;
-        }
-
         search-input.header {
-          left: -8px;
+          display: block;
+          position: relative;
+          top: -2px;
+          color: var(--secondary-text-color);
         }
 
         ha-device-picker {
           flex: 1;
+          position: relative;
+          top: -4px;
         }
 
-        :host(:not([narrow])) ha-device-picker {
+        .controls {
-          margin: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
 
-        mwc-button {
+        #visualization {
-          font-weight: 500;
+          height: calc(100% - var(--header-height));
-          color: var(--primary-color);
+          width: 100%;
         }
-
+        :host([narrow]) #visualization {
-        :host(:not([narrow])) mwc-button {
+          height: calc(100% - (var(--header-height) * 2));
-          margin: 5px;
         }
       `,
     ];