# HG changeset patch
# User Chris Cannam <cannam@all-day-breakfast.com>
# Date 1498820930 -3600
# Node ID de23ea6bcd0d91fdd58c77b7768f6c668ad6e8c4
# Parent  9251232b689e0867d35d58671502e83077f909cf
Add vertical binned scale for matrix shapes. Requires waves-ui-piper
update

diff -r 9251232b689e -r de23ea6bcd0d src/app/analysis-item/analysis-item.component.html
--- a/src/app/analysis-item/analysis-item.component.html	Fri Jun 30 09:07:12 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Fri Jun 30 12:08:50 2017 +0100
@@ -78,7 +78,7 @@
               [duration]="getDuration()"
             ></ugly-notes>
           </ugly-cross-hair-inspector>
-          <ugly-vertical-scale
+          <ugly-vertical-binned
             *ngSwitchCase="'matrix'"
           >
             <ugly-grid
@@ -89,7 +89,7 @@
               [grid]="item.collected"
               [duration]="getDuration()"
             ></ugly-grid>
-          </ugly-vertical-scale>
+          </ugly-vertical-binned>
           <ugly-instants
             *ngSwitchCase="'instants'"
             [colour]="getNextColour()"
diff -r 9251232b689e -r de23ea6bcd0d src/app/app.module.ts
--- a/src/app/app.module.ts	Fri Jun 30 09:07:12 2017 +0100
+++ b/src/app/app.module.ts	Fri Jun 30 12:08:50 2017 +0100
@@ -36,6 +36,7 @@
 import {InstantsComponent} from './visualisations/instants/instants.component';
 import {GridComponent} from './visualisations/grid/grid.component';
 import {VerticalScaleComponent} from './visualisations/vertical-scale.component';
+import {VerticalBinnedComponent} from './visualisations/vertical-binned.component';
 import {CrossHairInspectorComponent} from './visualisations/cross-hair-inspector.component';
 import {RenderLoopService} from './services/render-loop/render-loop.service';
 import {WavesPlayHeadComponent} from './playhead/waves-ui-play-head.component';
@@ -137,6 +138,7 @@
     InstantsComponent,
     GridComponent,
     VerticalScaleComponent,
+    VerticalBinnedComponent,
     CrossHairInspectorComponent,
     WavesPlayHeadComponent,
     ActionTrayComponent
diff -r 9251232b689e -r de23ea6bcd0d src/app/visualisations/grid/grid.component.ts
--- a/src/app/visualisations/grid/grid.component.ts	Fri Jun 30 09:07:12 2017 +0100
+++ b/src/app/visualisations/grid/grid.component.ts	Fri Jun 30 12:08:50 2017 +0100
@@ -2,10 +2,9 @@
  * Created by lucast on 31/05/2017.
  */
 import {
-  InspectableVerticallyBoundedComponent,
-  VerticallyBounded,
-  VerticallyBoundedWavesComponent,
-  VerticalScaleRenderer,
+  VerticallyBinned,
+  VerticallyBinnedWavesComponent,
+  VerticalBinNameRenderer,
   VerticalValueInspectorRenderer,
   WavesComponent
 } from '../waves-base.component';
@@ -25,13 +24,13 @@
   styleUrls: ['../waves-template.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
-    {provide: VerticallyBounded, useExisting: GridComponent },
-    {provide: VerticalScaleRenderer, useExisting: GridComponent },
+    {provide: VerticallyBinned, useExisting: GridComponent },
+    {provide: VerticalBinNameRenderer, useExisting: GridComponent },
     {provide: WavesComponent, useExisting: GridComponent}
   ]
 })
 
-export class GridComponent extends VerticallyBoundedWavesComponent<AugmentedMatrixFeature> {
+export class GridComponent extends VerticallyBinnedWavesComponent<AugmentedMatrixFeature> {
 
   @Input() set grid(grid: AugmentedMatrixFeature) {
     this.feature = grid;
@@ -67,11 +66,7 @@
     ];
   }
     
-  get range(): [number, number] {
-
-    const bins = this.feature.binNames;
-    console.log("have " + bins.length + " bins");
-    
-    return [0, this.feature.data.length > 0 ? this.feature.data[0].length : 0];
+  get binNames(): string[] {
+    return this.feature.binNames;
   }
 }
diff -r 9251232b689e -r de23ea6bcd0d src/app/visualisations/vertical-binned.component.ts
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/visualisations/vertical-binned.component.ts	Fri Jun 30 12:08:50 2017 +0100
@@ -0,0 +1,33 @@
+/**
+ * Created by lucas on 01/06/2017.
+ */
+import {VerticalBinNameRenderer} from './waves-base.component';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  QueryList,
+  AfterViewInit
+} from '@angular/core';
+
+@Component({
+  selector: 'ugly-vertical-binned',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VerticalBinnedComponent implements AfterViewInit {
+
+  @ContentChildren(
+    VerticalBinNameRenderer
+  ) bounded: QueryList<VerticalBinNameRenderer>;
+  protected cachedBinNames: string[];
+
+  ngAfterViewInit(): void {
+    this.bounded.forEach(component => {
+      this.cachedBinNames = component.binNames;
+      if (this.cachedBinNames) {
+        component.renderNames(this.cachedBinNames);
+      }
+    });
+  }
+}
diff -r 9251232b689e -r de23ea6bcd0d src/app/visualisations/waves-base.component.ts
--- a/src/app/visualisations/waves-base.component.ts	Fri Jun 30 09:07:12 2017 +0100
+++ b/src/app/visualisations/waves-base.component.ts	Fri Jun 30 12:08:50 2017 +0100
@@ -19,6 +19,14 @@
   abstract renderScale(range: [number, number]): void;
 }
 
+export abstract class VerticallyBinned {
+  abstract get binNames(): string[];
+}
+
+export abstract class VerticalBinNameRenderer extends VerticallyBinned {
+  abstract renderNames(binNames: string[]): void;
+}
+
 export abstract class VerticalValueInspectorRenderer
   extends VerticalScaleRenderer {
   // TODO how do I know these layers are actually 'describable'?
@@ -212,6 +220,21 @@
   }
 }
 
+export abstract class VerticallyBinnedWavesComponent
+<T extends ShapedFeatureData> extends WavesComponent<T>
+  implements VerticalBinNameRenderer {
+  abstract binNames: string[];
+
+  renderNames(binNames: string[]): void {
+    this.addLayer(new Waves.helpers.DiscreteScaleLayer({
+      tickColor: this.colour,
+      textColor: this.colour,
+      height: this.height,
+      binNames
+    }));
+  }
+}
+
 export abstract class InspectableVerticallyBoundedComponent
 <T extends ShapedFeatureData> extends VerticallyBoundedWavesComponent<T>
   implements VerticalValueInspectorRenderer {