diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts index 203419657b..1350479e3c 100644 --- a/src/components/trace/hat-graph-node.ts +++ b/src/components/trace/hat-graph-node.ts @@ -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 { diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts index cab2f87c33..432e8a4f98 100644 --- a/src/components/trace/hat-script-graph.ts +++ b/src/components/trace/hat-script-graph.ts @@ -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"} > `; @@ -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} > @@ -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} > ${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 { ${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 + ) ) : ""} @@ -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} > @@ -249,10 +278,16 @@ export class HatScriptGraph extends LitElement { .iconPath=${mdiCallMissed} ?track=${trackElse} ?active=${this.selected === path} + .notEnabled=${disabled || config.enabled === false} nofocus >${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 + ) )} ` : html``} @@ -261,10 +296,16 @@ export class HatScriptGraph extends LitElement { .iconPath=${mdiCallReceived} ?track=${trackThen} ?active=${this.selected === path} + .notEnabled=${disabled || config.enabled === false} nofocus > ${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 + ) )} @@ -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 > @@ -322,6 +366,7 @@ export class HatScriptGraph extends LitElement { nofocus ?track=${trackFailed} ?active=${this.selected === path} + .notEnabled=${disabled || node.enabled === false} > `; @@ -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` `; @@ -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` `; @@ -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` `; @@ -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} > @@ -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} >
${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 + ) )}
@@ -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` `; @@ -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` `; @@ -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` `; @@ -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} > @@ -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 ) )} ` : this.render_action_node( action, - `${path}/parallel/${i}/sequence/0` + `${path}/parallel/${i}/sequence/0`, + false, + disabled || node.enabled === false ) )} `; } - 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` `; } - private render_other_node(node: Action, path: string, graphStart = false) { + private render_other_node( + node: Action, + path: string, + graphStart = false, + disabled = false + ) { return html` `; }