Add service icons to traces (again :D) (#19728)

* Add service icons to traces (again :D)

* Update hat-graph-node.ts

gallery/src/pages/automation/trace-timeline.ts

@@ -3,7 +3,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-script-graph";
 import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";

src/components/trace/hat-graph-node.ts

@@ -5,6 +5,7 @@ import {
   html,
   TemplateResult,
   svg,
+  nothing,
 } from "lit";
 import { customElement, property } from "lit/decorators";
 import { NODE_SIZE, SPACING } from "./hat-graph-const";
@@ -51,7 +52,7 @@ export class HatGraphNode extends LitElement {
           : Math.ceil((NODE_SIZE + SPACING * 2) / 2)} ${width} ${height}"
       >
         ${this.graphStart
-          ? ``
+          ? nothing
           : svg`
           <path
             class="connector"
@@ -64,7 +65,6 @@ export class HatGraphNode extends LitElement {
           `}
         <g class="node">
           <circle cx="0" cy="0" r=${NODE_SIZE / 2} />
-          }
           ${this.badge
             ? svg`
         <g class="number">
@@ -81,9 +81,11 @@ export class HatGraphNode extends LitElement {
           >${this.badge > 9 ? "9+" : this.badge}</text>
         </g>
       `
-            : ""}
+            : nothing}
           <g style="pointer-events: none" transform="translate(${-12} ${-12})">
-            ${this.iconPath ? svg`<path class="icon" d=${this.iconPath}/>` : ""}
+            ${this.iconPath
+              ? svg`<path class="icon" d=${this.iconPath}/>`
+              : svg`<foreignObject><span class="icon"><slot name="icon"></slot></span></foreignObject>`}
           </g>
         </g>
       </svg>
@@ -152,6 +154,13 @@ export class HatGraphNode extends LitElement {
       path.icon {
         fill: var(--icon-clr);
       }
+      foreignObject {
+        width: 24px;
+        height: 24px;
+      }
+      .icon {
+        color: var(--icon-clr);
+      }
     `;
   }
 }

src/components/trace/hat-script-graph.ts

@@ -17,11 +17,10 @@ import {
   mdiRoomService,
   mdiShuffleDisabled,
 } from "@mdi/js";
-import { LitElement, PropertyValues, css, html } from "lit";
+import { LitElement, PropertyValues, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import { ACTION_ICONS } from "../../data/action";
 import { Condition, Trigger } from "../../data/automation";
 import {
   Action,
@@ -41,11 +40,14 @@ import {
   IfActionTraceStep,
   TraceExtended,
 } from "../../data/trace";
+import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
+import "../ha-service-icon";
 import "./hat-graph-branch";
 import { BRANCH_HEIGHT, NODE_SIZE, SPACING } from "./hat-graph-const";
 import "./hat-graph-node";
 import "./hat-graph-spacer";
+import { ACTION_ICONS } from "../../data/action";
 
 export interface NodeInfo {
   path: string;
@@ -64,6 +66,8 @@ export class HatScriptGraph extends LitElement {
 
   @property({ attribute: false }) public selected?: string;
 
+  public hass!: HomeAssistant;
+
   public renderedNodes: Record<string, NodeInfo> = {};
 
   public trackedNodes: Record<string, NodeInfo> = {};
@@ -415,13 +419,21 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${mdiRoomService}
+        .iconPath=${node.service ? undefined : mdiRoomService}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
-      ></hat-graph-node>
+      >
+        ${node.service
+          ? html`<ha-service-icon
+              slot="icon"
+              .hass=${this.hass}
+              .service=${node.service}
+            ></ha-service-icon>`
+          : nothing}
+      </hat-graph-node>
     `;
   }
 
@@ -667,8 +679,6 @@ export class HatScriptGraph extends LitElement {
       }
       .parent {
         margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
         margin-top: 16px;
       }
       .error {

src/panels/config/automation/ha-automation-trace.ts

@@ -232,6 +232,7 @@ export class HaAutomationTrace extends LitElement {
                   <div class="main">
                     <div class="graph">
                       <hat-script-graph
+                        .hass=${this.hass}
                         .trace=${this._trace}
                         .selected=${this._selected?.path}
                         @graph-node-selected=${this._pickNode}

src/panels/config/script/ha-script-trace.ts

@@ -217,6 +217,7 @@ export class HaScriptTrace extends LitElement {
                   <div class="main">
                     <div class="graph">
                       <hat-script-graph
+                        .hass=${this.hass}
                         .trace=${this._trace}
                         .selected=${this._selected?.path}
                         @graph-node-selected=${this._pickNode}