# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1498835466 -3600
# Node ID 5df3ce3574e5f7a441a0557b3fbf6d25d5714618
# Parent  2142e78207067d678bf78b8e5cd3bd4e30b556ba# Parent  f2b62195a5a6d1d3fa3fe5494af9c0f2d7580cad
Merge branch 'more-vertical-scales' of github.com:cannam/ugly-duckling into feature/undo-redo

diff -r 2142e7820706 -r 5df3ce3574e5 src/app/analysis-item/analysis-item.component.html
--- a/src/app/analysis-item/analysis-item.component.html	Fri Jun 30 16:01:10 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Fri Jun 30 16:11:06 2017 +0100
@@ -78,6 +78,18 @@
               [duration]="getDuration()"
             ></ugly-notes>
           </ugly-cross-hair-inspector>
+          <ugly-vertical-binned
+            *ngSwitchCase="'matrix'"
+          >
+            <ugly-grid
+              [colour]="getNextColour()"
+              [timeline]="timeline"
+              [width]="contentWidth"
+              [onSeek]="onSeek"
+              [grid]="item.collected"
+              [duration]="getDuration()"
+            ></ugly-grid>
+          </ugly-vertical-binned>
           <ugly-instants
             *ngSwitchCase="'instants'"
             [colour]="getNextColour()"
@@ -87,14 +99,6 @@
             [instants]="item.collected"
             [duration]="getDuration()"
           ></ugly-instants>
-          <ugly-grid
-            *ngSwitchCase="'matrix'"
-            [timeline]="timeline"
-            [width]="contentWidth"
-            [onSeek]="onSeek"
-            [grid]="item.collected"
-            [duration]="getDuration()"
-          ></ugly-grid>
 
           <div *ngSwitchDefault>Feature cannot be visualised.</div>
         </ugly-waves-play-head>
diff -r 2142e7820706 -r 5df3ce3574e5 src/app/app.module.ts
--- a/src/app/app.module.ts	Fri Jun 30 16:01:10 2017 +0100
+++ b/src/app/app.module.ts	Fri Jun 30 16:11:06 2017 +0100
@@ -35,6 +35,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';
@@ -141,6 +142,7 @@
     InstantsComponent,
     GridComponent,
     VerticalScaleComponent,
+    VerticalBinnedComponent,
     CrossHairInspectorComponent,
     WavesPlayHeadComponent,
     ActionTrayComponent
diff -r 2142e7820706 -r 5df3ce3574e5 src/app/visualisations/FeatureUtilities.ts
--- a/src/app/visualisations/FeatureUtilities.ts	Fri Jun 30 16:01:10 2017 +0100
+++ b/src/app/visualisations/FeatureUtilities.ts	Fri Jun 30 16:11:06 2017 +0100
@@ -74,9 +74,13 @@
 type ShapeDeducedFromList = 'instants' | 'notes';
 export type HigherLevelFeatureShape = CollectedShape | ShapeDeducedFromList;
 
+export interface AugmentedMatrixFeature extends MatrixFeature {
+  binNames: string[];
+}
+
 export type ShapedFeatureData =
   VectorFeature
-  | MatrixFeature
+  | AugmentedMatrixFeature
   | TracksFeature
   | Note[]
   | Instant[];
@@ -89,7 +93,7 @@
 }
 
 export class Vector extends ShapedFeature<'vector', VectorFeature> {}
-export class Matrix extends ShapedFeature<'matrix', MatrixFeature> {}
+export class Matrix extends ShapedFeature<'matrix', AugmentedMatrixFeature> {}
 export class Tracks extends ShapedFeature<'tracks', TracksFeature> {}
 export class Notes extends ShapedFeature<'notes', Note[]> {}
 export class Instants extends ShapedFeature<'instants', Instant[]> {}
@@ -148,7 +152,12 @@
     case 'vector':
       return response.features as Vector;
     case 'matrix':
-      return response.features as Matrix;
+      return {
+        shape: deducedShape,
+        collected: Object.assign(response.features.collected, {
+          binNames: response.outputDescriptor.configured.binNames || []
+        })
+      } as Matrix;
     case 'tracks':
       return response.features as Tracks;
     case 'notes':
diff -r 2142e7820706 -r 5df3ce3574e5 src/app/visualisations/grid/grid.component.ts
--- a/src/app/visualisations/grid/grid.component.ts	Fri Jun 30 16:01:10 2017 +0100
+++ b/src/app/visualisations/grid/grid.component.ts	Fri Jun 30 16:11:06 2017 +0100
@@ -1,14 +1,20 @@
 /**
  * Created by lucast on 31/05/2017.
  */
-import {WavesComponent} from '../waves-base.component';
+import {
+  VerticallyBinned,
+  VerticallyBinnedWavesComponent,
+  VerticalBinNameRenderer,
+  VerticalValueInspectorRenderer,
+  WavesComponent
+} from '../waves-base.component';
 import {
   ChangeDetectionStrategy,
   Component,
   Input,
 } from '@angular/core';
 import Waves from 'waves-ui-piper';
-import {MatrixFeature} from 'piper/HigherLevelUtilities';
+import {AugmentedMatrixFeature} from '../FeatureUtilities';
 import {iceMapper} from '../../spectrogram/ColourMap';
 import {estimatePercentile} from '../../spectrogram/MatrixUtils';
 
@@ -18,17 +24,20 @@
   styleUrls: ['../waves-template.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
+    {provide: VerticallyBinned, useExisting: GridComponent },
+    {provide: VerticalBinNameRenderer, useExisting: GridComponent },
     {provide: WavesComponent, useExisting: GridComponent}
   ]
 })
-export class GridComponent extends WavesComponent<MatrixFeature> {
 
-  @Input() set grid(grid: MatrixFeature) {
+export class GridComponent extends VerticallyBinnedWavesComponent<AugmentedMatrixFeature> {
+
+  @Input() set grid(grid: AugmentedMatrixFeature) {
     this.feature = grid;
   }
 
   protected get featureLayers(): Layer[] {
-    const startTime = this.feature.startTime; // !!! + make use of
+    const startTime = this.feature.startTime;
     const stepDuration = this.feature.stepDuration;
     const matrixData = this.feature.data;
 
@@ -40,7 +49,7 @@
     const gain = (targetValue > 0.0 ? (1.0 / targetValue) : 1.0);
     const matrixEntity = new Waves.utils.PrefilledMatrixEntity(
       matrixData,
-      0, // startTime
+      startTime,
       stepDuration
     );
 
@@ -56,4 +65,15 @@
       )
     ];
   }
+    
+  get binNames(): string[] {
+    if (!this.feature.binNames || this.feature.binNames.length === 0) {
+      const binCount = (this.feature.data.length > 0 ?
+                        this.feature.data[0].length : 0);
+      for (let i = 0; i < binCount; ++i) {
+        this.feature.binNames.push("" + (i + 1));
+      }
+    }
+    return this.feature.binNames;
+  }
 }
diff -r 2142e7820706 -r 5df3ce3574e5 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 16:11:06 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 2142e7820706 -r 5df3ce3574e5 src/app/visualisations/waves-base.component.ts
--- a/src/app/visualisations/waves-base.component.ts	Fri Jun 30 16:01:10 2017 +0100
+++ b/src/app/visualisations/waves-base.component.ts	Fri Jun 30 16:11:06 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 {