Make iterating ha-timeline efficient (#8721)

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

View File

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