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

* Add service icons to traces (again :D)

* Update hat-graph-node.ts
This commit is contained in:
Bram Kragten 2024-02-08 13:33:10 +01:00 committed by GitHub
parent b1e1b44c75
commit 23cbecb2c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 31 additions and 11 deletions

View File

@ -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";

View File

@ -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);
}
`;
}
}

View File

@ -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 {

View File

@ -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}

View File

@ -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}