jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 17:56:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make iterating ha-timeline efficient (#8721)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-03-25 14:59:21 -07:00 committed by GitHub
parent 40cf4c8d32
commit f229e4e12a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/trace/hat-trace.ts
View File

@ -6,6 +6,7 @@ import {
internalProperty,
LitElement,
property,
PropertyValues,
TemplateResult,
} from "lit-element";
import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@ -449,7 +450,7 @@ export class HaAutomationTracer extends LitElement {
return html`${entries}`;
}
protected updated(props) {
protected updated(props: PropertyValues) {
super.updated(props);
// Pick first path when we load a new trace.
@ -463,28 +464,30 @@ export class HaAutomationTracer extends LitElement {
}
}
this.shadowRoot!.querySelectorAll<HaTimeline>(
"ha-timeline[data-path]"
).forEach((el) => {
el.style.setProperty(
"--timeline-ball-color",
this._selectedPath === el.dataset.path ? "var(--primary-color)" : null
);
if (el.dataset.upgraded) {
return;
}
el.dataset.upgraded = "1";
el.addEventListener("click", () => {
this._selectedPath = el.dataset.path;
fireEvent(this, "value-changed", { value: el.dataset.path });
if (props.has("trace") || props.has("_selectedPath")) {
this.shadowRoot!.querySelectorAll<HaTimeline>(
"ha-timeline[data-path]"
).forEach((el) => {
el.style.setProperty(
"--timeline-ball-color",
this._selectedPath === el.dataset.path ? "var(--primary-color)" : null
);
if (el.dataset.upgraded) {
return;
}
el.dataset.upgraded = "1";
el.addEventListener("click", () => {
this._selectedPath = el.dataset.path;
fireEvent(this, "value-changed", { value: el.dataset.path });
});
el.addEventListener("mouseover", () => {
el.raised = true;
});
el.addEventListener("mouseout", () => {
el.raised = false;
});
});
el.addEventListener("mouseover", () => {
el.raised = true;
});
el.addEventListener("mouseout", () => {
el.raised = false;
});
});
}
}
static get styles(): CSSResult[] {