Fix tracing graph (#9782)

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

@@ -21,8 +21,7 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) graphStart?: boolean;
 
-  @property({ reflect: true, type: Boolean, attribute: "nofocus" })
+  @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
-  noFocus = false;
 
   @property({ reflect: true, type: Number }) badge?: number;
 
@@ -41,8 +40,6 @@ export class HatGraphNode extends LitElement {
     const width = SPACING + NODE_SIZE;
     return html`
       <svg
-        width="${width}px"
-        height="${height}px"
         viewBox="-${Math.ceil(width / 2)} -${this.graphStart
           ? Math.ceil(height / 2)
           : Math.ceil((NODE_SIZE + SPACING * 2) / 2)} ${width} ${height}"
@@ -92,6 +89,11 @@ export class HatGraphNode extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
+        width: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing));
+        height: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing) + 1);
+      }
+      :host([graphStart]) {
+        height: calc(var(--hat-graph-node-size) + 2);
       }
       :host([track]) {
         --stroke-clr: var(--track-clr);
@@ -111,13 +113,9 @@ export class HatGraphNode extends LitElement {
       :host([disabled]) circle {
         stroke: var(--disabled-clr);
       }
-      :host-context([disabled]) {
+      svg {
-        --stroke-clr: var(--disabled-clr);
+        width: 100%;
-      }
+        height: 100%;
-      :host([nofocus]):host-context([active]),
-      :host([nofocus]):host-context(:focus) {
-        --circle-clr: var(--active-clr);
-        --icon-clr: var(--default-icon-clr);
       }
       circle,
       path.connector {

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

@@ -149,6 +149,7 @@ export class HatScriptGraph extends LitElement {
           .graphStart=${graphStart}
           .iconPath=${mdiCallSplit}
           ?track=${trace !== undefined}
+          ?active=${this.selected === path}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -228,6 +229,7 @@ export class HatScriptGraph extends LitElement {
           .graphStart=${graphStart}
           slot="head"
           ?track=${track}
+          ?active=${this.selected === path}
           .iconPath=${mdiAbTesting}
           nofocus
         ></hat-graph-node>
@@ -241,6 +243,7 @@ export class HatScriptGraph extends LitElement {
           .iconPath=${mdiClose}
           nofocus
           ?track=${trackFailed}
+          ?active=${this.selected === path}
         ></hat-graph-node>
       </hat-graph-branch>
     `;
@@ -315,12 +318,14 @@ export class HatScriptGraph extends LitElement {
           .graphStart=${graphStart}
           .iconPath=${mdiRefresh}
           ?track=${path in this.trace.trace}
+          ?active=${this.selected === path}
           slot="head"
           nofocus
         ></hat-graph-node>
         <hat-graph-node
           .iconPath=${mdiArrowUp}
           ?track=${repeats > 1}
+          ?active=${this.selected === path}
           nofocus
           .badge=${repeats > 1 ? repeats : undefined}
         ></hat-graph-node>