Associate sibling allocations by drawing lines

ui/app/components/topo-viz.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { run } from '@ember/runloop';
 import { scaleLinear } from 'd3-scale';
 import { max } from 'd3-array';
 import RSVP from 'rsvp';
@@ -8,9 +9,18 @@ import RSVP from 'rsvp';
 export default class TopoViz extends Component {
   @tracked heightScale = null;
   @tracked isLoaded = false;
+  @tracked element = null;
 
-  @tracked activeTaskGroup = null;
-  @tracked activeJobId = null;
+  @tracked activeAllocation = null;
+  @tracked activeEdges = [];
+
+  get activeTaskGroup() {
+    return this.activeAllocation && this.activeAllocation.taskGroupName;
+  }
+
+  get activeJobId() {
+    return this.activeAllocation && this.activeAllocation.belongsTo('job').id();
+  }
 
   get datacenters() {
     const datacentersMap = this.args.nodes.reduce((datacenters, node) => {
@@ -35,18 +45,54 @@ export default class TopoViz extends Component {
     this.isLoaded = true;
   }
 
+  @action
+  captureElement(element) {
+    this.element = element;
+  }
+
   @action
   associateAllocations(allocation) {
-    const taskGroup = allocation.taskGroupName;
-    const jobId = allocation.belongsTo('job').id();
-    if (this.activeTaskGroup === taskGroup && this.activeJobId === jobId) {
-      this.activeTaskGroup = null;
-      this.activeJobId = null;
-      if (this.args.onAllocationSelect) this.args.onAllocationSelect(null);
+    if (this.activeAllocation === allocation) {
+      this.activeAllocation = null;
+      this.activeEdges = [];
     } else {
-      this.activeTaskGroup = taskGroup;
-      this.activeJobId = jobId;
-      if (this.args.onAllocationSelect) this.args.onAllocationSelect(allocation);
+      this.activeAllocation = allocation;
+      this.computedActiveEdges();
     }
+    if (this.args.onAllocationSelect) this.args.onAllocationSelect(this.activeAllocation);
+  }
+
+  computedActiveEdges() {
+    // Wait a render cycle
+    run.next(() => {
+      const activeEl = this.element.querySelector(
+        `[data-allocation-id="${this.activeAllocation.id}"]`
+      );
+      const selectedAllocations = this.element.querySelectorAll('.memory .bar.is-selected');
+      const activeBBox = activeEl.getBoundingClientRect();
+      console.log('bb', activeBBox);
+      console.log('win', window.visualViewport);
+
+      const vLeft = window.visualViewport.pageLeft;
+      const vTop = window.visualViewport.pageTop;
+
+      const edges = [];
+      for (let allocation of selectedAllocations) {
+        if (allocation !== activeEl) {
+          const bbox = allocation.getBoundingClientRect();
+          edges.push({
+            x1: activeBBox.x + activeBBox.width / 2 + vLeft,
+            y1: activeBBox.y + activeBBox.height / 2 + vTop,
+            x2: bbox.x + bbox.width / 2 + vLeft,
+            y2: bbox.y + bbox.height / 2 + vTop,
+          });
+        }
+      }
+
+      this.activeEdges = edges;
+    });
+    // get element for active alloc
+    // get element for all selected allocs
+    // draw lines between centroid of each
   }
 }

ui/app/styles/charts/topo-viz-node.scss

@@ -61,3 +61,18 @@
     }
   }
 }
+
+.chart.topo-viz-edges {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  overflow: visible;
+
+  .edge {
+    stroke-width: 2;
+    stroke: $blue;
+  }
+}

ui/app/templates/components/topo-viz.hbs

@@ -1,4 +1,4 @@
-<div class="topo-viz" {{did-insert this.loadNodes}}>
+<div class="topo-viz" {{did-insert this.loadNodes}} {{did-insert this.captureElement}}>
   {{#if this.isLoaded}}
     {{#each this.datacenters as |dc|}}
       <TopoViz::Datacenter
@@ -9,5 +9,13 @@
         @activeTaskGroup={{this.activeTaskGroup}}
         @activeJobId={{this.activeJobId}} />
     {{/each}}
+
+    {{#if this.activeAllocation}}
+    <svg class="chart topo-viz-edges" {{window-resize this.computedActiveEdges}}>
+        {{#each this.activeEdges as |edge|}}
+          <line class="edge" x1={{edge.x1}} y1={{edge.y1}} x2={{edge.x2}} y2={{edge.y2}} />
+        {{/each}}
+      </svg>
+    {{/if}}
   {{/if}}
 </div>

ui/app/templates/components/topo-viz/node.hbs

@@ -17,7 +17,9 @@
         {{on "mouseout" this.clearHighlight}}
       >
         <g class="memory">
-          <text class="label" aria-label="Memory" transform="translate({{this.data.memoryLabel.x}},{{this.data.memoryLabel.y}})">M</text>
+          {{#if this.data.memoryLabel}}
+            <text class="label" aria-label="Memory" transform="translate({{this.data.memoryLabel.x}},{{this.data.memoryLabel.y}})">M</text>
+          {{/if}}
           {{#if this.data.memoryRemainder}}
             <rect
               class="dimension-background"
@@ -29,6 +31,7 @@
             <g
               class="bar {{memory.className}} {{if (eq this.activeAllocation memory.allocation) "is-active"}} {{if memory.isSelected "is-selected"}}"
               clip-path="url(#{{this.maskId}})"
+              data-allocation-id="{{memory.allocation.id}}"
               {{on "mouseenter" (fn this.highlightAllocation memory.allocation)}}
               {{on "click" (fn this.selectAllocation memory.allocation)}}>
               <rect
@@ -49,7 +52,9 @@
           {{/each}}
         </g>
         <g class="cpu">
-          <text class="label" aria-label="CPU" transform="translate({{this.data.cpuLabel.x}},{{this.data.cpuLabel.y}})">C</text>
+          {{#if this.data.cpuLabel}}
+            <text class="label" aria-label="CPU" transform="translate({{this.data.cpuLabel.x}},{{this.data.cpuLabel.y}})">C</text>
+          {{/if}}
           {{#if this.data.cpuRemainder}}
             <rect
               class="dimension-background"
@@ -62,6 +67,7 @@
             <g
               class="bar {{cpu.className}} {{if (eq this.activeAllocation cpu.allocation) "is-active"}} {{if cpu.isSelected "is-selected"}}"
               clip-path="url(#{{this.maskId}})"
+              data-allocation-id="{{cpu.allocation.id}}"
               {{on "mouseenter" (fn this.highlightAllocation cpu.allocation)}}
               {{on "click" (fn this.selectAllocation cpu.allocation)}}>
               <rect