mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 05:47:20 +00:00
Indicate things are disabled in trace graph (#12550)
* Indicate things are disabled in trace graph * Update hat-script-graph.ts
This commit is contained in:
Bram Kragten
GitHub
parent
43e80f1a2e
commit
ba8621fa2c
@ -19,6 +19,8 @@ export class HatGraphNode extends LitElement {
|
||||
|
||||
@property({ reflect: true, type: Boolean }) disabled?: boolean;
|
||||
|
||||
@property({ reflect: true, type: Boolean }) notEnabled = false;
|
||||
|
||||
@property({ reflect: true, type: Boolean }) graphStart?: boolean;
|
||||
|
||||
@property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
|
||||
@ -114,7 +116,8 @@ export class HatGraphNode extends LitElement {
|
||||
--stroke-clr: var(--hover-clr);
|
||||
--icon-clr: var(--default-icon-clr);
|
||||
}
|
||||
:host([disabled]) circle {
|
||||
:host([notEnabled]) circle,
|
||||
:host([notEnabled]) path.connector {
|
||||
stroke: var(--disabled-clr);
|
||||
}
|
||||
svg {
|
||||
|
||||
@ -96,6 +96,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(config, path)}
|
||||
?active=${this.selected === path}
|
||||
.iconPath=${mdiAsterisk}
|
||||
.notEnabled=${config.enabled === false}
|
||||
tabindex=${track ? "0" : "-1"}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
@ -130,20 +131,31 @@ export class HatScriptGraph extends LitElement {
|
||||
other: this.render_other_node,
|
||||
};
|
||||
|
||||
private render_action_node(node: Action, path: string, graphStart = false) {
|
||||
private render_action_node(
|
||||
node: Action,
|
||||
path: string,
|
||||
graphStart = false,
|
||||
disabled = 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);
|
||||
return this.typeRenderers[type].bind(this)(
|
||||
node,
|
||||
path,
|
||||
graphStart,
|
||||
disabled
|
||||
);
|
||||
}
|
||||
|
||||
private render_choose_node(
|
||||
config: ChooseAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
|
||||
const trace_path = trace
|
||||
@ -160,12 +172,14 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(config, path)}
|
||||
?track=${trace !== undefined}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiArrowDecision}
|
||||
?track=${trace !== undefined}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
slot="head"
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
@ -188,12 +202,15 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(config, branch_path)}
|
||||
?track=${track_this}
|
||||
?active=${this.selected === branch_path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
></hat-graph-node>
|
||||
${branch.sequence !== null
|
||||
? ensureArray(branch.sequence).map((action, j) =>
|
||||
this.render_action_node(
|
||||
action,
|
||||
`${branch_path}/sequence/${j}`
|
||||
`${branch_path}/sequence/${j}`,
|
||||
false,
|
||||
disabled || config.enabled === false
|
||||
)
|
||||
)
|
||||
: ""}
|
||||
@ -205,7 +222,12 @@ export class HatScriptGraph extends LitElement {
|
||||
<hat-graph-spacer ?track=${track_default}></hat-graph-spacer>
|
||||
${config.default !== null
|
||||
? ensureArray(config.default)?.map((action, i) =>
|
||||
this.render_action_node(action, `${path}/default/${i}`)
|
||||
this.render_action_node(
|
||||
action,
|
||||
`${path}/default/${i}`,
|
||||
false,
|
||||
disabled || config.enabled === false
|
||||
)
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
@ -213,7 +235,12 @@ export class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_if_node(config: IfAction, path: string, graphStart = false) {
|
||||
private render_if_node(
|
||||
config: IfAction,
|
||||
path: string,
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
|
||||
let trackThen = false;
|
||||
let trackElse = false;
|
||||
@ -234,12 +261,14 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(config, path)}
|
||||
?track=${trace !== undefined}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiCallSplit}
|
||||
?track=${trace !== undefined}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
slot="head"
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
@ -249,10 +278,16 @@ export class HatScriptGraph extends LitElement {
|
||||
.iconPath=${mdiCallMissed}
|
||||
?track=${trackElse}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
nofocus
|
||||
></hat-graph-node
|
||||
>${ensureArray(config.else).map((action, j) =>
|
||||
this.render_action_node(action, `${path}/else/${j}`)
|
||||
this.render_action_node(
|
||||
action,
|
||||
`${path}/else/${j}`,
|
||||
false,
|
||||
disabled || config.enabled === false
|
||||
)
|
||||
)}
|
||||
</div>`
|
||||
: html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`}
|
||||
@ -261,10 +296,16 @@ export class HatScriptGraph extends LitElement {
|
||||
.iconPath=${mdiCallReceived}
|
||||
?track=${trackThen}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || config.enabled === false}
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
${ensureArray(config.then).map((action, j) =>
|
||||
this.render_action_node(action, `${path}/then/${j}`)
|
||||
this.render_action_node(
|
||||
action,
|
||||
`${path}/then/${j}`,
|
||||
false,
|
||||
disabled || config.enabled === false
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</hat-graph-branch>
|
||||
@ -274,7 +315,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_condition_node(
|
||||
node: Condition,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
|
||||
let track = false;
|
||||
@ -300,6 +342,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(node, path)}
|
||||
?track=${track}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
tabindex=${trace === undefined ? "-1" : "0"}
|
||||
short
|
||||
>
|
||||
@ -308,6 +351,7 @@ export class HatScriptGraph extends LitElement {
|
||||
slot="head"
|
||||
?track=${track}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
.iconPath=${mdiAbTesting}
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
@ -322,6 +366,7 @@ export class HatScriptGraph extends LitElement {
|
||||
nofocus
|
||||
?track=${trackFailed}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
></hat-graph-node>
|
||||
</hat-graph-branch>
|
||||
`;
|
||||
@ -330,7 +375,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_delay_node(
|
||||
node: DelayAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -339,6 +385,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@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>
|
||||
`;
|
||||
@ -347,7 +394,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_device_node(
|
||||
node: DeviceAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -356,6 +404,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@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>
|
||||
`;
|
||||
@ -364,7 +413,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_event_node(
|
||||
node: EventAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -373,6 +423,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@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>
|
||||
`;
|
||||
@ -381,7 +432,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_repeat_node(
|
||||
node: RepeatAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
const trace: any = this.trace.trace[path];
|
||||
const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
|
||||
@ -391,12 +443,14 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(node, path)}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiRefresh}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
slot="head"
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
@ -404,12 +458,18 @@ export class HatScriptGraph extends LitElement {
|
||||
.iconPath=${mdiArrowUp}
|
||||
?track=${repeats > 1}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
nofocus
|
||||
.badge=${repeats > 1 ? repeats : undefined}
|
||||
></hat-graph-node>
|
||||
<div ?track=${trace}>
|
||||
${ensureArray(node.repeat.sequence).map((action, i) =>
|
||||
this.render_action_node(action, `${path}/repeat/sequence/${i}`)
|
||||
this.render_action_node(
|
||||
action,
|
||||
`${path}/repeat/sequence/${i}`,
|
||||
false,
|
||||
disabled || node.enabled === false
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</hat-graph-branch>
|
||||
@ -419,7 +479,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_scene_node(
|
||||
node: SceneAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -428,6 +489,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@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>
|
||||
`;
|
||||
@ -436,7 +498,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_service_node(
|
||||
node: ServiceAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -445,6 +508,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@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>
|
||||
`;
|
||||
@ -453,7 +517,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_wait_node(
|
||||
node: WaitAction | WaitForTriggerAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -462,6 +527,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@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>
|
||||
`;
|
||||
@ -470,7 +536,8 @@ export class HatScriptGraph extends LitElement {
|
||||
private render_parallel_node(
|
||||
node: ParallelAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
const trace: any = this.trace.trace[path];
|
||||
return html`
|
||||
@ -479,12 +546,14 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(node, path)}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiShuffleDisabled}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
slot="head"
|
||||
nofocus
|
||||
></hat-graph-node>
|
||||
@ -495,20 +564,29 @@ export class HatScriptGraph extends LitElement {
|
||||
(sAction, j) =>
|
||||
this.render_action_node(
|
||||
sAction,
|
||||
`${path}/parallel/${i}/sequence/${j}`
|
||||
`${path}/parallel/${i}/sequence/${j}`,
|
||||
false,
|
||||
disabled || node.enabled === false
|
||||
)
|
||||
)}
|
||||
</div>`
|
||||
: this.render_action_node(
|
||||
action,
|
||||
`${path}/parallel/${i}/sequence/0`
|
||||
`${path}/parallel/${i}/sequence/0`,
|
||||
false,
|
||||
disabled || node.enabled === false
|
||||
)
|
||||
)}
|
||||
</hat-graph-branch>
|
||||
`;
|
||||
}
|
||||
|
||||
private render_stop_node(node: Action, path: string, graphStart = false) {
|
||||
private render_stop_node(
|
||||
node: Action,
|
||||
path: string,
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
|
||||
return html`
|
||||
<hat-graph-node
|
||||
@ -519,11 +597,17 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(node, path)}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
}
|
||||
|
||||
private render_other_node(node: Action, path: string, graphStart = false) {
|
||||
private render_other_node(
|
||||
node: Action,
|
||||
path: string,
|
||||
graphStart = false,
|
||||
disabled = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
@ -531,6 +615,7 @@ export class HatScriptGraph extends LitElement {
|
||||
@focus=${this.selectNode(node, path)}
|
||||
?track=${path in this.trace.trace}
|
||||
?active=${this.selected === path}
|
||||
.notEnabled=${disabled || node.enabled === false}
|
||||
></hat-graph-node>
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user