Add related entities to more info dialog

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -62,6 +62,11 @@ export class MoreInfoDialog extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  private _relatedEntityClicked(ev: CustomEvent) {
+    ev.stopPropagation();
+    this._entityId = ev.detail.entityId;
+  }
+
   protected shouldShowEditIcon(
     domain: string,
     stateObj: HassEntity | undefined
@@ -160,6 +165,7 @@ export class MoreInfoDialog extends LitElement {
                   <ha-more-info-info
                     .hass=${this.hass}
                     .entityId=${this._entityId}
+                    @related-entity=${this._relatedEntityClicked}
                   ></ha-more-info-info>
                 `
               : this._currTab === "history"

src/dialogs/more-info/ha-more-info-history.ts

@@ -94,7 +94,7 @@ export class MoreInfoHistory extends LitElement {
         this.entityId
       }&start_date=${startOfYesterday().toISOString()}`;
 
-      this._throttleGetStateHistory();
+      this._getStateHistory();
       return;
     }
 

src/dialogs/more-info/ha-more-info-info.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { subscribeOne } from "../../common/util/subscribe-one";
@@ -15,6 +15,7 @@ import {
 } from "./const";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
+import "./more-info-related-info";
 
 @customElement("ha-more-info-info")
 export class MoreInfoInfo extends LitElement {
@@ -74,6 +75,8 @@ export class MoreInfoInfo extends LitElement {
         .stateObj=${stateObj}
         .hass=${this.hass}
       ></more-info-content>
+      <more-info-related-info .stateObj=${stateObj} .hass=${this.hass}>
+      </more-info-related-info>
     `;
   }
 

src/dialogs/more-info/more-info-related-info.ts

@@ -0,0 +1,122 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeStateDisplay } from "../../common/entity/compute_state_display";
+import { stateIconPath } from "../../common/entity/state_icon_path";
+import "../../components/ha-chip";
+import "../../components/ha-chip-set";
+import "../../components/ha-icon";
+import { HomeAssistant } from "../../types";
+
+declare global {
+  interface HASSDomEvents {
+    "related-entity": { entityId: string };
+  }
+}
+
+@customElement("more-info-related-info")
+class MoreInfoContent extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  private _relatedEntities = memoizeOne((entityId: string) => {
+    const deviceId = this.hass!.entities[entityId].device_id;
+
+    if (!deviceId) return [];
+
+    return Object.values(this.hass!.entities).filter(
+      (entity) =>
+        entity.device_id === deviceId &&
+        entity.entity_id !== entityId &&
+        !entity.hidden_by &&
+        !entity.disabled_by
+    );
+  });
+
+  private _handleChipClick(ev: Event) {
+    const entityId = (ev.target as any).entityId as string;
+    fireEvent(this, "related-entity", { entityId });
+  }
+
+  protected render(): TemplateResult | null {
+    if (!this.hass || !this.stateObj) {
+      return null;
+    }
+
+    const relatedEntities = this._relatedEntities(this.stateObj.entity_id);
+
+    return html`
+      <div class="container">
+        ${relatedEntities.map((entry) => {
+          const entity = this.hass!.states[entry.entity_id];
+
+          const icon = entity.attributes.icon;
+          const iconPath = stateIconPath(entity);
+          const state = computeStateDisplay(
+            this.hass!.localize,
+            entity,
+            this.hass!.locale
+          );
+
+          return html`
+            <button
+              type="button"
+              class="chip"
+              @click=${this._handleChipClick}
+              .entityId=${entry.entity_id}
+            >
+              ${icon
+                ? html`<ha-icon slot="icon" icon=${icon}></ha-icon>`
+                : html`
+                    <ha-svg-icon slot="icon" path=${iconPath}></ha-svg-icon>
+                  `}
+              ${state}
+            </button>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .container {
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+      .container > * {
+        margin: 4px;
+      }
+      .chip {
+        border: 1px solid var(--secondary-text-color);
+        border-radius: 8px;
+        cursor: pointer;
+        background: none;
+        color: var(--primary-text-color);
+        padding: 6px 16px 6px 8px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+      }
+      .chip ha-icon,
+      .chip ha-svg-icon {
+        pointer-events: none;
+        --mdc-icon-size: 18px;
+        color: rgb(var(--rgb-primary-color));
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-related-info": MoreInfoContent;
+  }
+}