Improve error display in automation/script traces (#19920)

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

@@ -163,21 +163,22 @@ export class HaTracePathDetails extends LitElement {
               }
             )}
             <br />
+            ${error
+              ? html`<div class="error">
+                  ${this.hass!.localize(
+                    "ui.panel.config.automation.trace.path.error",
+                    {
+                      error: error,
+                    }
+                  )}
+                </div>`
+              : nothing}
             ${result
               ? html`${this.hass!.localize(
                     "ui.panel.config.automation.trace.path.result"
                   )}
                   <pre>${dump(result)}</pre>`
-              : error
-                ? html`<div class="error">
-                    ${this.hass!.localize(
-                      "ui.panel.config.automation.trace.path.error",
-                      {
-                        error: error,
-                      }
-                    )}
-                  </div>`
-                : nothing}
+              : nothing}
             ${Object.keys(rest).length === 0
               ? nothing
               : html`<pre>${dump(rest)}</pre>`}

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

@@ -1,15 +1,16 @@
+import { mdiExclamationThick } from "@mdi/js";
 import {
-  css,
   LitElement,
   PropertyValues,
-  html,
   TemplateResult,
-  svg,
+  css,
+  html,
   nothing,
+  svg,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import { NODE_SIZE, SPACING } from "./hat-graph-const";
 import { isSafari } from "../../util/is_safari";
+import { NODE_SIZE, SPACING } from "./hat-graph-const";
 
 /**
  * @attribute active
@@ -21,6 +22,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public error = false;
+
   @property({ reflect: true, type: Boolean }) notEnabled = false;
 
   @property({ reflect: true, type: Boolean }) graphStart = false;
@@ -65,16 +68,28 @@ export class HatGraphNode extends LitElement {
           `}
         <g class="node">
           <circle cx="0" cy="0" r=${NODE_SIZE / 2} />
+          ${this.error
+            ? svg`
+        <g class="error">
+          <circle
+            cx="-12"
+            cy=${-NODE_SIZE / 2}
+            r="8"
+          ></circle>
+          <path transform="translate(-18 -21) scale(.5)" class="exclamation" d=${mdiExclamationThick}/>
+        </g>
+      `
+            : nothing}
           ${this.badge
             ? svg`
         <g class="number">
           <circle
-            cx="8"
+            cx="12"
             cy=${-NODE_SIZE / 2}
             r="8"
           ></circle>
           <text
-            x="8"
+            x="12"
             y=${-NODE_SIZE / 2}
             text-anchor="middle"
             alignment-baseline="middle"
@@ -82,7 +97,7 @@ export class HatGraphNode extends LitElement {
         </g>
       `
             : nothing}
-          <g style="pointer-events: none" transform="translate(${-12} ${-12})">
+          <g style="pointer-events: none" transform="translate(-12 -12)">
             ${this.iconPath
               ? svg`<path class="icon" d=${this.iconPath}/>`
               : svg`<foreignObject><span class="icon"><slot name="icon"></slot></span></foreignObject>`}
@@ -143,13 +158,22 @@ export class HatGraphNode extends LitElement {
         fill: var(--background-clr);
         stroke: var(--circle-clr, var(--stroke-clr));
       }
+      .error circle {
+        fill: var(--error-color);
+        stroke: none;
+        stroke-width: 0;
+      }
+      .error .exclamation {
+        fill: var(--text-primary-color);
+      }
       .number circle {
         fill: var(--track-clr);
         stroke: none;
         stroke-width: 0;
       }
       .number text {
-        font-size: smaller;
+        font-size: 10px;
+        fill: var(--text-primary-color);
       }
       path.icon {
         fill: var(--icon-clr);

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

@@ -93,6 +93,7 @@ export class HatScriptGraph extends LitElement {
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
         .notEnabled=${config.enabled === false}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${track ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -171,6 +172,7 @@ export class HatScriptGraph extends LitElement {
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
           .notEnabled=${disabled || config.enabled === false}
+          .error=${this.trace.trace[path]?.some((tr) => tr.error)}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -424,6 +426,7 @@ export class HatScriptGraph extends LitElement {
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       >
         ${node.service
@@ -451,6 +454,7 @@ export class HatScriptGraph extends LitElement {
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -517,6 +521,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;

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

@@ -93,7 +93,7 @@ export class HaAutomationTrace extends LitElement {
 
     let devButtons: TemplateResult | string = "";
     if (__DEV__) {
-      devButtons = html`<div style="position: absolute; right: 0;">
+      devButtons = html`<div style="position: absolute; right: 0; z-index: 1;">
         <button @click=${this._importTrace}>Import trace</button>
         <button @click=${this._loadLocalStorageTrace}>Load stored trace</button>
       </div>`;