mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-09 19:09:48 +00:00
Cleanup of tracing graph (#9564)
This commit is contained in:
Bram Kragten
@@ -19,7 +19,6 @@ import {
|
||||
} from "@mdi/js";
|
||||
import { css, html, LitElement, PropertyValues } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { ensureArray } from "../../common/ensure-array";
|
||||
import { Condition, Trigger } from "../../data/automation";
|
||||
@@ -41,9 +40,15 @@ import {
|
||||
TraceExtended,
|
||||
} from "../../data/trace";
|
||||
import "../ha-svg-icon";
|
||||
import { NodeInfo, NODE_SIZE, SPACING } from "./hat-graph";
|
||||
import "./hat-graph-node";
|
||||
import "./hat-graph-spacer";
|
||||
import "./hat-graph-branch";
|
||||
import { NODE_SIZE, SPACING, BRANCH_HEIGHT } from "./hat-graph-const";
|
||||
|
||||
export interface NodeInfo {
|
||||
path: string;
|
||||
config: any;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
@@ -52,14 +57,14 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement("hat-script-graph")
|
||||
class HatScriptGraph extends LitElement {
|
||||
export class HatScriptGraph extends LitElement {
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
@property({ attribute: false }) public selected;
|
||||
@property({ attribute: false }) public selected?: string;
|
||||
|
||||
@property() renderedNodes: Record<string, any> = {};
|
||||
public renderedNodes: Record<string, NodeInfo> = {};
|
||||
|
||||
@property() trackedNodes: Record<string, any> = {};
|
||||
public trackedNodes: Record<string, NodeInfo> = {};
|
||||
|
||||
private selectNode(config, path) {
|
||||
return () => {
|
||||
@@ -69,72 +74,54 @@ class HatScriptGraph extends LitElement {
|
||||
|
||||
private render_trigger(config: Trigger, i: number) {
|
||||
const path = `trigger/${i}`;
|
||||
const tracked = this.trace && path in this.trace.trace;
|
||||
const track = this.trace && path in this.trace.trace;
|
||||
this.renderedNodes[path] = { config, path };
|
||||
if (tracked) {
|
||||
if (track) {
|
||||
this.trackedNodes[path] = this.renderedNodes[path];
|
||||
}
|
||||
return html`
|
||||
<hat-graph-node
|
||||
graphStart
|
||||
?track=${track}
|
||||
@focus=${this.selectNode(config, path)}
|
||||
class=${classMap({
|
||||
track: tracked,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?active=${this.selected === path}
|
||||
.iconPath=${mdiAsterisk}
|
||||
tabindex=${tracked ? "0" : "-1"}
|
||||
tabindex=${track ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
}
|
||||
|
||||
private render_condition(config: Condition, i: number) {
|
||||
const path = `condition/${i}`;
|
||||
const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
|
||||
const track_path =
|
||||
trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
|
||||
this.renderedNodes[path] = { config, path };
|
||||
if (trace) {
|
||||
if (this.trace && path in this.trace.trace) {
|
||||
this.trackedNodes[path] = this.renderedNodes[path];
|
||||
}
|
||||
return html`
|
||||
<hat-graph
|
||||
branching
|
||||
@focus=${this.selectNode(config, path)}
|
||||
class=${classMap({
|
||||
track: track_path,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
.track_start=${[track_path]}
|
||||
.track_end=${[track_path]}
|
||||
tabindex=${trace ? "-1" : "0"}
|
||||
short
|
||||
>
|
||||
<hat-graph-node
|
||||
slot="head"
|
||||
class=${classMap({
|
||||
track: trace !== undefined,
|
||||
})}
|
||||
.iconPath=${mdiAbTesting}
|
||||
nofocus
|
||||
graphEnd
|
||||
></hat-graph-node>
|
||||
<div
|
||||
style=${`width: ${NODE_SIZE + SPACING}px;`}
|
||||
graphStart
|
||||
graphEnd
|
||||
></div>
|
||||
<div></div>
|
||||
<hat-graph-node
|
||||
.iconPath=${mdiClose}
|
||||
graphEnd
|
||||
nofocus
|
||||
class=${classMap({
|
||||
track: track_path === 2,
|
||||
})}
|
||||
></hat-graph-node>
|
||||
</hat-graph>
|
||||
`;
|
||||
return this.render_condition_node(config, path);
|
||||
}
|
||||
|
||||
private typeRenderers = {
|
||||
condition: this.render_condition_node,
|
||||
delay: this.render_delay_node,
|
||||
event: this.render_event_node,
|
||||
scene: this.render_scene_node,
|
||||
service: this.render_service_node,
|
||||
wait_template: this.render_wait_node,
|
||||
wait_for_trigger: this.render_wait_node,
|
||||
repeat: this.render_repeat_node,
|
||||
choose: this.render_choose_node,
|
||||
device_id: this.render_device_node,
|
||||
other: this.render_other_node,
|
||||
};
|
||||
|
||||
private render_action_node(node: Action, path: string, graphStart = false) {
|
||||
const type =
|
||||
Object.keys(this.typeRenderers).find((key) => key in node) || "other";
|
||||
this.renderedNodes[path] = { config: node, path };
|
||||
if (this.trace && path in this.trace.trace) {
|
||||
this.trackedNodes[path] = this.renderedNodes[path];
|
||||
}
|
||||
return this.typeRenderers[type].bind(this)(node, path, graphStart);
|
||||
}
|
||||
|
||||
private render_choose_node(
|
||||
@@ -143,30 +130,25 @@ class HatScriptGraph extends LitElement {
|
||||
graphStart = false
|
||||
) {
|
||||
const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
|
||||
const trace_path =
|
||||
trace !== undefined
|
||||
? trace[0].result === undefined || trace[0].result.choice === "default"
|
||||
? [Array.isArray(config.choose) ? config.choose.length : 0]
|
||||
: [trace[0].result.choice]
|
||||
: [];
|
||||
const trace_path = trace
|
||||
? trace.map((trc) =>
|
||||
trc.result === undefined || trc.result.choice === "default"
|
||||
? "default"
|
||||
: trc.result.choice
|
||||
)
|
||||
: [];
|
||||
const track_default = trace_path.includes("default");
|
||||
return html`
|
||||
<hat-graph
|
||||
<hat-graph-branch
|
||||
tabindex=${trace === undefined ? "-1" : "0"}
|
||||
branching
|
||||
.track_start=${trace_path}
|
||||
.track_end=${trace_path}
|
||||
@focus=${this.selectNode(config, path)}
|
||||
class=${classMap({
|
||||
track: trace !== undefined,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${trace !== undefined}
|
||||
?active=${this.selected === path}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiCallSplit}
|
||||
class=${classMap({
|
||||
track: trace !== undefined,
|
||||
})}
|
||||
?track=${trace !== undefined}
|
||||
slot="head"
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
@@ -174,46 +156,39 @@ class HatScriptGraph extends LitElement {
|
||||
${config.choose
|
||||
? ensureArray(config.choose)?.map((branch, i) => {
|
||||
const branch_path = `${path}/choose/${i}`;
|
||||
const track_this =
|
||||
trace !== undefined && trace[0].result?.choice === i;
|
||||
const track_this = trace_path.includes(i);
|
||||
this.renderedNodes[branch_path] = { config, path: branch_path };
|
||||
if (track_this) {
|
||||
this.trackedNodes[branch_path] =
|
||||
this.renderedNodes[branch_path];
|
||||
}
|
||||
return html`
|
||||
<hat-graph>
|
||||
<div class="graph-container" ?track=${track_this}>
|
||||
<hat-graph-node
|
||||
.iconPath=${!trace || track_this
|
||||
? mdiCheckBoxOutline
|
||||
: mdiCheckboxBlankOutline}
|
||||
@focus=${this.selectNode(config, branch_path)}
|
||||
class=${classMap({
|
||||
active: this.selected === branch_path,
|
||||
track: track_this,
|
||||
})}
|
||||
?track=${track_this}
|
||||
?active=${this.selected === branch_path}
|
||||
></hat-graph-node>
|
||||
${ensureArray(branch.sequence).map((action, j) =>
|
||||
this.render_node(action, `${branch_path}/sequence/${j}`)
|
||||
this.render_action_node(
|
||||
action,
|
||||
`${branch_path}/sequence/${j}`
|
||||
)
|
||||
)}
|
||||
</hat-graph>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
: ""}
|
||||
<hat-graph>
|
||||
<hat-graph-spacer
|
||||
class=${classMap({
|
||||
track:
|
||||
trace !== undefined &&
|
||||
(trace[0].result === undefined ||
|
||||
trace[0].result.choice === "default"),
|
||||
})}
|
||||
></hat-graph-spacer>
|
||||
<div ?track=${track_default}>
|
||||
<hat-graph-spacer ?track=${track_default}></hat-graph-spacer>
|
||||
${ensureArray(config.default)?.map((action, i) =>
|
||||
this.render_node(action, `${path}/default/${i}`)
|
||||
this.render_action_node(action, `${path}/default/${i}`)
|
||||
)}
|
||||
</hat-graph>
|
||||
</hat-graph>
|
||||
</div>
|
||||
</hat-graph-branch>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -222,41 +197,52 @@ class HatScriptGraph extends LitElement {
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
const trace = (this.trace.trace[path] as ConditionTraceStep[]) || undefined;
|
||||
const track_path =
|
||||
trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
|
||||
const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
|
||||
let track = false;
|
||||
let trackPass = false;
|
||||
let trackFailed = false;
|
||||
if (trace) {
|
||||
for (const trc of trace) {
|
||||
if (trc.result) {
|
||||
track = true;
|
||||
if (trc.result.result) {
|
||||
trackPass = true;
|
||||
} else {
|
||||
trackFailed = true;
|
||||
}
|
||||
}
|
||||
if (trackPass && trackFailed) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return html`
|
||||
<hat-graph
|
||||
branching
|
||||
<hat-graph-branch
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: track_path,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
.track_start=${[track_path]}
|
||||
.track_end=${[track_path]}
|
||||
?track=${track}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${trace === undefined ? "-1" : "0"}
|
||||
short
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
slot="head"
|
||||
class=${classMap({
|
||||
track: Boolean(trace),
|
||||
})}
|
||||
?track=${track}
|
||||
.iconPath=${mdiAbTesting}
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
<div style=${`width: ${NODE_SIZE + SPACING}px;`}></div>
|
||||
<div></div>
|
||||
<div
|
||||
style=${`width: ${NODE_SIZE + SPACING}px;`}
|
||||
graphStart
|
||||
graphEnd
|
||||
></div>
|
||||
<div ?track=${trackPass}></div>
|
||||
<hat-graph-node
|
||||
.iconPath=${mdiClose}
|
||||
nofocus
|
||||
class=${classMap({
|
||||
track: track_path === 2,
|
||||
})}
|
||||
?track=${trackFailed}
|
||||
></hat-graph-node>
|
||||
</hat-graph>
|
||||
</hat-graph-branch>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -270,10 +256,8 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiTimerOutline}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@@ -289,10 +273,8 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiDevices}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@@ -308,10 +290,8 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiExclamation}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@@ -323,43 +303,33 @@ class HatScriptGraph extends LitElement {
|
||||
graphStart = false
|
||||
) {
|
||||
const trace: any = this.trace.trace[path];
|
||||
const track_path = trace ? [0, 1] : [];
|
||||
const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
|
||||
return html`
|
||||
<hat-graph
|
||||
.track_start=${track_path}
|
||||
.track_end=${track_path}
|
||||
<hat-graph-branch
|
||||
tabindex=${trace === undefined ? "-1" : "0"}
|
||||
branching
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiRefresh}
|
||||
class=${classMap({
|
||||
track: trace,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
slot="head"
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
<hat-graph-node
|
||||
.iconPath=${mdiArrowUp}
|
||||
?track=${repeats > 1}
|
||||
nofocus
|
||||
class=${classMap({
|
||||
track: track_path.includes(1),
|
||||
})}
|
||||
.badge=${repeats}
|
||||
.badge=${repeats > 1 ? repeats : undefined}
|
||||
></hat-graph-node>
|
||||
<hat-graph>
|
||||
<div ?track=${trace}>
|
||||
${ensureArray(node.repeat.sequence).map((action, i) =>
|
||||
this.render_node(action, `${path}/repeat/sequence/${i}`)
|
||||
this.render_action_node(action, `${path}/repeat/sequence/${i}`)
|
||||
)}
|
||||
</hat-graph>
|
||||
</hat-graph>
|
||||
</div>
|
||||
</hat-graph-branch>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -373,10 +343,8 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiExclamation}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@@ -392,10 +360,8 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiChevronRight}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@@ -411,10 +377,8 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiTrafficLight}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@@ -426,95 +390,55 @@ class HatScriptGraph extends LitElement {
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiCodeBrackets}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
track: path in this.trace.trace,
|
||||
active: this.selected === path,
|
||||
})}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
}
|
||||
|
||||
private render_node(node: Action, path: string, graphStart = false) {
|
||||
const NODE_TYPES = {
|
||||
choose: this.render_choose_node,
|
||||
condition: this.render_condition_node,
|
||||
delay: this.render_delay_node,
|
||||
device_id: this.render_device_node,
|
||||
event: this.render_event_node,
|
||||
repeat: this.render_repeat_node,
|
||||
scene: this.render_scene_node,
|
||||
service: this.render_service_node,
|
||||
wait_template: this.render_wait_node,
|
||||
wait_for_trigger: this.render_wait_node,
|
||||
other: this.render_other_node,
|
||||
};
|
||||
|
||||
const type = Object.keys(NODE_TYPES).find((key) => key in node) || "other";
|
||||
const nodeEl = NODE_TYPES[type].bind(this)(node, path, graphStart);
|
||||
this.renderedNodes[path] = { config: node, path };
|
||||
if (this.trace && path in this.trace.trace) {
|
||||
this.trackedNodes[path] = this.renderedNodes[path];
|
||||
}
|
||||
return nodeEl;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
const paths = Object.keys(this.trackedNodes);
|
||||
const manual_triggered = this.trace && "trigger" in this.trace.trace;
|
||||
let track_path = manual_triggered ? undefined : [0];
|
||||
const trigger_nodes =
|
||||
"trigger" in this.trace.config
|
||||
? ensureArray(this.trace.config.trigger).map((trigger, i) => {
|
||||
if (this.trace && `trigger/${i}` in this.trace.trace) {
|
||||
track_path = [i];
|
||||
}
|
||||
return this.render_trigger(trigger, i);
|
||||
})
|
||||
? ensureArray(this.trace.config.trigger).map((trigger, i) =>
|
||||
this.render_trigger(trigger, i)
|
||||
)
|
||||
: undefined;
|
||||
try {
|
||||
return html`
|
||||
<hat-graph class="parent">
|
||||
<div></div>
|
||||
<div class="parent graph-container">
|
||||
${trigger_nodes
|
||||
? html`<hat-graph
|
||||
branching
|
||||
id="trigger"
|
||||
.short=${trigger_nodes.length < 2}
|
||||
.track_start=${track_path}
|
||||
.track_end=${track_path}
|
||||
>
|
||||
? html`<hat-graph-branch start .short=${trigger_nodes.length < 2}>
|
||||
${trigger_nodes}
|
||||
</hat-graph>`
|
||||
</hat-graph-branch>`
|
||||
: ""}
|
||||
${"condition" in this.trace.config
|
||||
? html`<hat-graph id="condition">
|
||||
${ensureArray(this.trace.config.condition)?.map(
|
||||
(condition, i) => this.render_condition(condition!, i)
|
||||
)}
|
||||
</hat-graph>`
|
||||
? html`${ensureArray(this.trace.config.condition)?.map(
|
||||
(condition, i) => this.render_condition(condition, i)
|
||||
)}`
|
||||
: ""}
|
||||
${"action" in this.trace.config
|
||||
? html`${ensureArray(this.trace.config.action).map((action, i) =>
|
||||
this.render_node(action, `action/${i}`)
|
||||
this.render_action_node(action, `action/${i}`)
|
||||
)}`
|
||||
: ""}
|
||||
${"sequence" in this.trace.config
|
||||
? html`${ensureArray(this.trace.config.sequence).map((action, i) =>
|
||||
this.render_node(action, `sequence/${i}`, i === 0)
|
||||
this.render_action_node(action, `sequence/${i}`, i === 0)
|
||||
)}`
|
||||
: ""}
|
||||
</hat-graph>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<mwc-icon-button
|
||||
.disabled=${paths.length === 0 || paths[0] === this.selected}
|
||||
@click=${this.previousTrackedNode}
|
||||
@click=${this._previousTrackedNode}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiChevronUp}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
.disabled=${paths.length === 0 ||
|
||||
paths[paths.length - 1] === this.selected}
|
||||
@click=${this.nextTrackedNode}
|
||||
@click=${this._nextTrackedNode}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiChevronDown}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
@@ -545,44 +469,39 @@ class HatScriptGraph extends LitElement {
|
||||
protected updated(changedProps: PropertyValues<this>) {
|
||||
super.updated(changedProps);
|
||||
|
||||
// Select first node if new trace loaded but no selection given.
|
||||
if (changedProps.has("trace")) {
|
||||
const tracked = this.trackedNodes;
|
||||
const paths = Object.keys(tracked);
|
||||
if (!changedProps.has("trace")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If trace changed and we have no or an invalid selection, select first option.
|
||||
if (this.selected === "" || !(this.selected in paths)) {
|
||||
// Find first tracked node with node info
|
||||
for (const path of paths) {
|
||||
if (tracked[path]) {
|
||||
fireEvent(this, "graph-node-selected", tracked[path]);
|
||||
break;
|
||||
}
|
||||
// If trace changed and we have no or an invalid selection, select first option.
|
||||
if (!this.selected || !(this.selected in this.trackedNodes)) {
|
||||
const firstNode = this.trackedNodes[Object.keys(this.trackedNodes)[0]];
|
||||
if (firstNode) {
|
||||
fireEvent(this, "graph-node-selected", firstNode);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.trace) {
|
||||
const sortKeys = Object.keys(this.trace.trace);
|
||||
const keys = Object.keys(this.renderedNodes).sort(
|
||||
(a, b) => sortKeys.indexOf(a) - sortKeys.indexOf(b)
|
||||
);
|
||||
const sortedTrackedNodes = {};
|
||||
const sortedRenderedNodes = {};
|
||||
for (const key of keys) {
|
||||
sortedRenderedNodes[key] = this.renderedNodes[key];
|
||||
if (key in this.trackedNodes) {
|
||||
sortedTrackedNodes[key] = this.trackedNodes[key];
|
||||
}
|
||||
}
|
||||
|
||||
if (this.trace) {
|
||||
const sortKeys = Object.keys(this.trace.trace);
|
||||
const keys = Object.keys(this.renderedNodes).sort(
|
||||
(a, b) => sortKeys.indexOf(a) - sortKeys.indexOf(b)
|
||||
);
|
||||
const sortedTrackedNodes = {};
|
||||
const sortedRenderedNodes = {};
|
||||
for (const key of keys) {
|
||||
sortedRenderedNodes[key] = this.renderedNodes[key];
|
||||
if (key in this.trackedNodes) {
|
||||
sortedTrackedNodes[key] = this.trackedNodes[key];
|
||||
}
|
||||
}
|
||||
this.renderedNodes = sortedRenderedNodes;
|
||||
this.trackedNodes = sortedTrackedNodes;
|
||||
}
|
||||
this.renderedNodes = sortedRenderedNodes;
|
||||
this.trackedNodes = sortedTrackedNodes;
|
||||
}
|
||||
}
|
||||
|
||||
public previousTrackedNode() {
|
||||
private _previousTrackedNode() {
|
||||
const nodes = Object.keys(this.trackedNodes);
|
||||
const prevIndex = nodes.indexOf(this.selected) - 1;
|
||||
const prevIndex = nodes.indexOf(this.selected!) - 1;
|
||||
if (prevIndex >= 0) {
|
||||
fireEvent(
|
||||
this,
|
||||
@@ -592,9 +511,9 @@ class HatScriptGraph extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
public nextTrackedNode() {
|
||||
private _nextTrackedNode() {
|
||||
const nodes = Object.keys(this.trackedNodes);
|
||||
const nextIndex = nodes.indexOf(this.selected) + 1;
|
||||
const nextIndex = nodes.indexOf(this.selected!) + 1;
|
||||
if (nextIndex < nodes.length) {
|
||||
fireEvent(
|
||||
this,
|
||||
@@ -608,6 +527,25 @@ class HatScriptGraph extends LitElement {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, var(--secondary-text-color));
|
||||
--active-clr: var(--active-color, var(--primary-color));
|
||||
--track-clr: var(--track-color, var(--accent-color));
|
||||
--hover-clr: var(--hover-color, var(--primary-color));
|
||||
--disabled-clr: var(--disabled-color, var(--disabled-text-color));
|
||||
--default-trigger-color: 3, 169, 244;
|
||||
--rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
|
||||
--background-clr: var(--background-color, white);
|
||||
--default-icon-clr: var(--icon-color, black);
|
||||
--icon-clr: var(--stroke-clr);
|
||||
|
||||
--hat-graph-spacing: ${SPACING}px;
|
||||
--hat-graph-node-size: ${NODE_SIZE}px;
|
||||
--hat-graph-branch-height: ${BRANCH_HEIGHT}px;
|
||||
}
|
||||
.graph-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user