Render autogenerated step descriptions in trace path viewer (#24886)

src/components/trace/ha-trace-path-details.ts

@@ -19,9 +19,16 @@ import "../../panels/logbook/ha-logbook-renderer";
 import { traceTabStyles } from "./trace-tab-styles";
 import type { HomeAssistant } from "../../types";
 import type { NodeInfo } from "./hat-script-graph";
-import { describeCondition } from "../../data/automation_i18n";
+import { describeCondition, describeTrigger } from "../../data/automation_i18n";
 import type { EntityRegistryEntry } from "../../data/entity_registry";
-import { fullEntitiesContext } from "../../data/context";
+import type { LabelRegistryEntry } from "../../data/label_registry";
+import type { FloorRegistryEntry } from "../../data/floor_registry";
+import {
+  floorsContext,
+  fullEntitiesContext,
+  labelsContext,
+} from "../../data/context";
+import { describeAction } from "../../data/script_i18n";
 
 const TRACE_PATH_TABS = [
   "step_config",
@@ -52,6 +59,14 @@ export class HaTracePathDetails extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelReg!: LabelRegistryEntry[];
+
+  @state()
+  @consume({ context: floorsContext, subscribe: true })
+  _floorReg!: Record<string, FloorRegistryEntry>;
+
   protected render(): TemplateResult {
     return html`
       <div class="padded-box trace-info">
@@ -151,11 +166,46 @@ export class HaTracePathDetails extends LitElement {
             )}`;
           }
 
+          const selectedType = this.selected.type;
+
           return html`
             ${curPath === this.selected.path
               ? currentDetail.alias
                 ? html`<h2>${currentDetail.alias}</h2>`
-                : nothing
+                : selectedType === "trigger"
+                  ? html`<h2>
+                      ${describeTrigger(
+                        currentDetail,
+                        this.hass,
+                        this._entityReg
+                      )}
+                    </h2>`
+                  : selectedType === "condition"
+                    ? html`<h2>
+                        ${describeCondition(
+                          currentDetail,
+                          this.hass,
+                          this._entityReg
+                        )}
+                      </h2>`
+                    : selectedType === "action"
+                      ? html`<h2>
+                          ${describeAction(
+                            this.hass,
+                            this._entityReg,
+                            this._labelReg,
+                            this._floorReg,
+                            currentDetail
+                          )}
+                        </h2>`
+                      : selectedType === "chooseOption"
+                        ? html`<h2>
+                            ${this.hass.localize(
+                              "ui.panel.config.automation.editor.actions.type.choose.option",
+                              { number: pathParts[pathParts.length - 1] }
+                            )}
+                          </h2>`
+                        : nothing
               : html`<h2>
                   ${curPath.substring(this.selected.path.length + 1)}
                 </h2>`}

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

@@ -53,9 +53,12 @@ import "./hat-graph-node";
 import "./hat-graph-spacer";
 import { ACTION_ICONS } from "../../data/action";
 
+type NodeType = "trigger" | "condition" | "action" | "chooseOption" | undefined;
+
 export interface NodeInfo {
   path: string;
   config: any;
+  type?: NodeType;
 }
 
 declare global {
@@ -76,16 +79,16 @@ export class HatScriptGraph extends LitElement {
 
   public trackedNodes: Record<string, NodeInfo> = {};
 
-  private _selectNode(config, path) {
+  private _selectNode(config, path, type?) {
     return () => {
-      fireEvent(this, "graph-node-selected", { config, path });
+      fireEvent(this, "graph-node-selected", { config, path, type });
     };
   }
 
   private _renderTrigger(config: Trigger, i: number) {
     const path = `trigger/${i}`;
     const track = this.trace && path in this.trace.trace;
-    this.renderedNodes[path] = { config, path };
+    this.renderedNodes[path] = { config, path, type: "trigger" };
     if (track) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
@@ -93,7 +96,7 @@ export class HatScriptGraph extends LitElement {
       <hat-graph-node
         graph-start
         ?track=${track}
-        @focus=${this._selectNode(config, path)}
+        @focus=${this._selectNode(config, path, "trigger")}
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
         .notEnabled=${"enabled" in config && config.enabled === false}
@@ -105,7 +108,7 @@ export class HatScriptGraph extends LitElement {
 
   private _renderCondition(config: Condition, i: number) {
     const path = `condition/${i}`;
-    this.renderedNodes[path] = { config, path };
+    this.renderedNodes[path] = { config, path, type: "condition" };
     if (this.trace && path in this.trace.trace) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
@@ -136,7 +139,7 @@ export class HatScriptGraph extends LitElement {
   ) {
     const type =
       Object.keys(this._typeRenderers).find((key) => key in node) || "other";
-    this.renderedNodes[path] = { config: node, path };
+    this.renderedNodes[path] = { config: node, path, type: "action" };
     if (this.trace && path in this.trace.trace) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
@@ -166,7 +169,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-branch
         tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this._selectNode(config, path)}
+        @focus=${this._selectNode(config, path, "action")}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
         .notEnabled=${disabled || config.enabled === false}
@@ -189,6 +192,7 @@ export class HatScriptGraph extends LitElement {
               this.renderedNodes[branchPath] = {
                 config: branch,
                 path: branchPath,
+                type: "chooseOption",
               };
               if (trackThis) {
                 this.trackedNodes[branchPath] = this.renderedNodes[branchPath];
@@ -199,7 +203,11 @@ export class HatScriptGraph extends LitElement {
                     .iconPath=${!trace || trackThis
                       ? mdiCheckboxMarkedOutline
                       : mdiCheckboxBlankOutline}
-                    @focus=${this._selectNode(branch, branchPath)}
+                    @focus=${this._selectNode(
+                      branch,
+                      branchPath,
+                      "chooseOption"
+                    )}
                     ?track=${trackThis}
                     ?active=${this.selected === branchPath}
                     .notEnabled=${disabled || config.enabled === false}
@@ -259,7 +267,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-branch
         tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this._selectNode(config, path)}
+        @focus=${this._selectNode(config, path, "action")}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
         .notEnabled=${disabled || config.enabled === false}
@@ -340,7 +348,7 @@ export class HatScriptGraph extends LitElement {
     }
     return html`
       <hat-graph-branch
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "condition")}
         ?track=${track}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
@@ -384,7 +392,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-branch
         tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "action")}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
@@ -430,7 +438,7 @@ export class HatScriptGraph extends LitElement {
       <hat-graph-node
         .graphStart=${graphStart}
         .iconPath=${node.action ? undefined : mdiRoomService}
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "action")}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
@@ -458,7 +466,7 @@ export class HatScriptGraph extends LitElement {
       <hat-graph-node
         .graphStart=${graphStart}
         .iconPath=${mdiCodeBraces}
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "action")}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
@@ -478,7 +486,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-branch
         tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "action")}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
@@ -516,7 +524,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-branch
         tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "action")}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
@@ -565,7 +573,7 @@ export class HatScriptGraph extends LitElement {
       <hat-graph-node
         .graphStart=${graphStart}
         .iconPath=${ACTION_ICONS[getActionType(node)] || mdiCodeBrackets}
-        @focus=${this._selectNode(node, path)}
+        @focus=${this._selectNode(node, path, "action")}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .error=${this.trace.trace[path]?.some((tr) => tr.error)}