Add spacer for default of choose (#8827)

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

@@ -10,6 +10,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) graphstart?: boolean;
 
+  @property({ reflect: true, type: Boolean }) spacer?: boolean;
+
   @property({ reflect: true, type: Boolean }) nofocus?: boolean;
 
   @property({ reflect: true, type: Number }) badge?: number;
@@ -25,6 +27,12 @@ export class HatGraphNode extends LitElement {
     if (!svgEl) {
       return;
     }
+    if (this.spacer) {
+      svgEl.setAttribute("width", "10px");
+      svgEl.setAttribute("height", "41px");
+      svgEl.setAttribute("viewBox", "-5 -40 10 26");
+      return;
+    }
     const bbox = svgEl.getBBox();
     const extra_height = this.graphstart ? 2 : 1;
     const extra_width = SPACING;
@@ -50,7 +58,11 @@ export class HatGraphNode extends LitElement {
           <path
             class="connector"
             d="
-              M 0 ${-SPACING - NODE_SIZE / 2}
+              M 0 ${
+                this.spacer
+                  ? -SPACING * 2 - NODE_SIZE
+                  : -SPACING - NODE_SIZE / 2
+              }
               L 0 0
             "
             line-caps="round"
@@ -58,11 +70,15 @@ export class HatGraphNode extends LitElement {
           `
       }
     <g class="node">
-      <circle
+      ${
+        !this.spacer
+          ? svg`<circle
         cx="0"
         cy="0"
         r="${NODE_SIZE / 2}"
-      />
+      />`
+          : ""
+      }
       ${
         this.badge
           ? svg`