CSS Grid based masonry layout

TBH, it's buggy and I don't like it.

ui/app/components/topo-viz.js

@@ -43,6 +43,32 @@ export default class TopoViz extends Component {
       .range([15, 30])
       .domain([0, max(this.args.nodes.map(node => node.resources.memory))]);
     this.isLoaded = true;
+
+    // schedule masonry
+    run.schedule('afterRender', () => {
+      this.masonry();
+    });
+  }
+
+  @action
+  masonry() {
+    run.next(() => {
+      const datacenterSections = this.element.querySelectorAll('.topo-viz-datacenter');
+      const elementStyles = window.getComputedStyle(this.element);
+      if (!elementStyles) return;
+
+      const rowHeight = parseInt(elementStyles.getPropertyValue('grid-auto-rows')) || 0;
+      const rowGap = parseInt(elementStyles.getPropertyValue('grid-row-gap')) || 0;
+
+      if (!rowHeight) return;
+
+      for (let dc of datacenterSections) {
+        const contents = dc.querySelector('.masonry-container');
+        const height = contents.getBoundingClientRect().height;
+        const rowSpan = Math.ceil((height + rowGap) / (rowHeight + rowGap));
+        dc.style.gridRowEnd = `span ${rowSpan}`;
+      }
+    });
   }
 
   @action

ui/app/components/topo-viz/datacenter.js

@@ -42,5 +42,6 @@ export default class TopoVizNode extends Component {
     );
 
     this.isLoaded = true;
+    this.args.onLoad && this.args.onLoad();
   }
 }

ui/app/styles/charts.scss

@@ -3,8 +3,9 @@
 @import './charts/line-chart';
 @import './charts/tooltip';
 @import './charts/colors';
-@import './charts/chart-annotation.scss';
-@import './charts/topo-viz-node.scss';
+@import './charts/chart-annotation';
+@import './charts/topo-viz';
+@import './charts/topo-viz-node';
 
 .inline-chart {
   height: 1.5rem;

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

@@ -0,0 +1,11 @@
+.topo-viz {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 1.5em;
+  row-gap: 1.5em;
+  grid-auto-rows: 10px;
+
+  &.is-single-column {
+    grid-template-columns: 100%;
+  }
+}

ui/app/styles/core/typography.scss

@@ -23,3 +23,7 @@ code {
 .is-interactive {
   cursor: pointer;
 }
+
+.is-faded {
+  color: darken($grey-blue, 20%);
+}

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

@@ -1,4 +1,4 @@
-<div class="topo-viz" {{did-insert this.loadNodes}} {{did-insert this.captureElement}}>
+<div class="topo-viz {{if (eq this.datacenters.length 1) "is-single-column"}}" {{did-insert this.loadNodes}} {{did-insert this.captureElement}}>
   {{#if this.isLoaded}}
     {{#each this.datacenters as |dc|}}
       <TopoViz::Datacenter
@@ -7,7 +7,8 @@
         @heightScale={{this.heightScale}}
         @onAllocationSelect={{this.associateAllocations}}
         @activeTaskGroup={{this.activeTaskGroup}}
-        @activeJobId={{this.activeJobId}} />
+        @activeJobId={{this.activeJobId}}
+        @onLoad={{action this.masonry}}/>
     {{/each}}
 
     {{#if this.activeAllocation}}

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

@@ -1,21 +1,23 @@
 <div class="boxed-section topo-viz-datacenter" {{did-insert this.loadAllocations}}>
-  <div class="boxed-section-head is-hollow">
-    {{@datacenter}}
-    {{this.scheduledAllocations.length}} Allocs,
-    {{@nodes.length}} Nodes,
-    {{this.aggregatedAllocationResources.memory}}/{{this.aggregatedNodeResources.memory}} MiB,
-    {{this.aggregatedAllocationResources.cpu}}/{{this.aggregatedNodeResources.cpu}} Mhz
-  </div>
-  <div class="boxed-section-body">
-    {{#if this.isLoaded}}
-      {{#each @nodes as |node|}}
-        <TopoViz::Node
-          @node={{node}}
-          @heightScale={{@heightScale}}
-          @onAllocationSelect={{@onAllocationSelect}}
-          @activeTaskGroup={{@activeTaskGroup}}
-          @activeJobId={{@activeJobId}} />
-      {{/each}}
-    {{/if}}
+  <div class="masonry-container">
+    <div class="boxed-section-head is-hollow">
+      <strong>{{@datacenter}}</strong>
+      <span class="bumper-left">{{this.scheduledAllocations.length}} Allocs</span>
+      <span class="bumper-left">{{@nodes.length}} Nodes</span>
+      <span class="bumper-left is-faded">{{this.aggregatedAllocationResources.memory}}/{{this.aggregatedNodeResources.memory}} MiB,
+        {{this.aggregatedAllocationResources.cpu}}/{{this.aggregatedNodeResources.cpu}} Mhz</span>
+    </div>
+    <div class="boxed-section-body">
+      {{#if this.isLoaded}}
+        {{#each @nodes as |node|}}
+          <TopoViz::Node
+            @node={{node}}
+            @heightScale={{@heightScale}}
+            @onAllocationSelect={{@onAllocationSelect}}
+            @activeTaskGroup={{@activeTaskGroup}}
+            @activeJobId={{@activeJobId}} />
+        {{/each}}
+      {{/if}}
+    </div>
   </div>
 </div>

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

@@ -1,5 +1,9 @@
 <div class="chart topo-viz-node {{unless this.allocations.length "is-empty"}}" {{did-insert this.reloadNode}}>
-  <p><strong>{{@node.name}}</strong> ({{this.count}} allocs) ({{@node.resources.memory}} MiB, {{@node.resources.cpu}} Mhz) (% reserved would be nice)</p>
+  <p>
+    <strong>{{@node.name}}</strong>
+    <span class="bumper-left">{{this.count}} Allocs</span>
+    <span class="bumper-left is-faded">{{@node.resources.memory}} MiB, {{@node.resources.cpu}} Mhz</span>
+  </p>
   <svg class="chart" height="{{this.totalHeight}}px" {{did-insert this.render}} {{did-update this.render @activeTaskGroup @activeJobId}} {{window-resize this.render}}>
     <defs>
       <clipPath id="{{this.maskId}}">