diff --git a/gallery/src/pages/automation/trace-timeline.ts b/gallery/src/pages/automation/trace-timeline.ts index 638da986e0..a9a0e1a9d5 100644 --- a/gallery/src/pages/automation/trace-timeline.ts +++ b/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"; diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts index b9b6a499f0..4da3f7b7c3 100644 --- a/src/components/trace/hat-graph-node.ts +++ b/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` - } ${this.badge ? svg` @@ -81,9 +81,11 @@ export class HatGraphNode extends LitElement { >${this.badge > 9 ? "9+" : this.badge} ` - : ""} + : nothing} - ${this.iconPath ? svg`` : ""} + ${this.iconPath + ? svg`` + : 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); + } `; } } diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts index 29aad80564..7bc0cbc0d9 100644 --- a/src/components/trace/hat-script-graph.ts +++ b/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 = {}; public trackedNodes: Record = {}; @@ -415,13 +419,21 @@ export class HatScriptGraph extends LitElement { return html` + > + ${node.service + ? html`` + : nothing} + `; } @@ -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 { diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index c8188bdcaa..c752e562ed 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/src/panels/config/automation/ha-automation-trace.ts @@ -232,6 +232,7 @@ export class HaAutomationTrace extends LitElement {