Add parallel action to trace timeline

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220502.0
+version      = 20220429.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/components/trace/hat-graph-node.ts

@@ -19,8 +19,6 @@ 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;
@@ -116,8 +114,7 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([notEnabled]) circle,
-      :host([notEnabled]) path.connector {
+      :host([disabled]) circle {
         stroke: var(--disabled-clr);
       }
       svg {

src/components/trace/hat-script-graph.ts

@@ -96,7 +96,6 @@ 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>
     `;
@@ -131,31 +130,20 @@ export class HatScriptGraph extends LitElement {
     other: this.render_other_node,
   };
 
-  private render_action_node(
-    node: Action,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
+  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,
-      disabled
-    );
+    return this.typeRenderers[type].bind(this)(node, path, graphStart);
   }
 
   private render_choose_node(
     config: ChooseAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
     const trace_path = trace
@@ -172,14 +160,12 @@ 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>
@@ -202,15 +188,12 @@ 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}`,
-                          false,
-                          disabled || config.enabled === false
+                          `${branch_path}/sequence/${j}`
                         )
                       )
                     : ""}
@@ -222,12 +205,7 @@ 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}`,
-                  false,
-                  disabled || config.enabled === false
-                )
+                this.render_action_node(action, `${path}/default/${i}`)
               )
             : ""}
         </div>
@@ -235,12 +213,7 @@ export class HatScriptGraph extends LitElement {
     `;
   }
 
-  private render_if_node(
-    config: IfAction,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
+  private render_if_node(config: IfAction, path: string, graphStart = false) {
     const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
     let trackThen = false;
     let trackElse = false;
@@ -261,14 +234,12 @@ 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>
@@ -278,16 +249,10 @@ 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}`,
-                  false,
-                  disabled || config.enabled === false
-                )
+                this.render_action_node(action, `${path}/else/${j}`)
               )}
             </div>`
           : html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`}
@@ -296,16 +261,10 @@ 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}`,
-              false,
-              disabled || config.enabled === false
-            )
+            this.render_action_node(action, `${path}/then/${j}`)
           )}
         </div>
       </hat-graph-branch>
@@ -315,8 +274,7 @@ export class HatScriptGraph extends LitElement {
   private render_condition_node(
     node: Condition,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
     let track = false;
@@ -342,7 +300,6 @@ 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
       >
@@ -351,7 +308,6 @@ export class HatScriptGraph extends LitElement {
           slot="head"
           ?track=${track}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
           .iconPath=${mdiAbTesting}
           nofocus
         ></hat-graph-node>
@@ -366,7 +322,6 @@ export class HatScriptGraph extends LitElement {
           nofocus
           ?track=${trackFailed}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
         ></hat-graph-node>
       </hat-graph-branch>
     `;
@@ -375,8 +330,7 @@ export class HatScriptGraph extends LitElement {
   private render_delay_node(
     node: DelayAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -385,7 +339,6 @@ 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>
     `;
@@ -394,8 +347,7 @@ export class HatScriptGraph extends LitElement {
   private render_device_node(
     node: DeviceAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -404,7 +356,6 @@ 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>
     `;
@@ -413,8 +364,7 @@ export class HatScriptGraph extends LitElement {
   private render_event_node(
     node: EventAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -423,7 +373,6 @@ 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>
     `;
@@ -432,8 +381,7 @@ export class HatScriptGraph extends LitElement {
   private render_repeat_node(
     node: RepeatAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace: any = this.trace.trace[path];
     const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
@@ -443,14 +391,12 @@ 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>
@@ -458,18 +404,12 @@ 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}`,
-              false,
-              disabled || node.enabled === false
-            )
+            this.render_action_node(action, `${path}/repeat/sequence/${i}`)
           )}
         </div>
       </hat-graph-branch>
@@ -479,8 +419,7 @@ export class HatScriptGraph extends LitElement {
   private render_scene_node(
     node: SceneAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -489,7 +428,6 @@ 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>
     `;
@@ -498,8 +436,7 @@ export class HatScriptGraph extends LitElement {
   private render_service_node(
     node: ServiceAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -508,7 +445,6 @@ 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>
     `;
@@ -517,8 +453,7 @@ export class HatScriptGraph extends LitElement {
   private render_wait_node(
     node: WaitAction | WaitForTriggerAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -527,7 +462,6 @@ 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>
     `;
@@ -536,8 +470,7 @@ export class HatScriptGraph extends LitElement {
   private render_parallel_node(
     node: ParallelAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace: any = this.trace.trace[path];
     return html`
@@ -546,14 +479,12 @@ 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>
@@ -564,29 +495,20 @@ export class HatScriptGraph extends LitElement {
                   (sAction, j) =>
                     this.render_action_node(
                       sAction,
-                      `${path}/parallel/${i}/sequence/${j}`,
-                      false,
-                      disabled || node.enabled === false
+                      `${path}/parallel/${i}/sequence/${j}`
                     )
                 )}
               </div>`
             : this.render_action_node(
                 action,
-                `${path}/parallel/${i}/sequence/0`,
-                false,
-                disabled || node.enabled === false
+                `${path}/parallel/${i}/sequence/0`
               )
         )}
       </hat-graph-branch>
     `;
   }
 
-  private render_stop_node(
-    node: Action,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
+  private render_stop_node(node: Action, path: string, graphStart = false) {
     const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
     return html`
       <hat-graph-node
@@ -597,17 +519,11 @@ 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,
-    disabled = false
-  ) {
+  private render_other_node(node: Action, path: string, graphStart = false) {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
@@ -615,7 +531,6 @@ 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>
     `;
   }