# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1496248403 -3600
# Node ID c1cedba9557bdff0a6d081f4d2d255b3d3f77657
# Parent  b220ed78a25086a6606dc79e27f4bf36bd3e7b34
Basic grid, bringing in old code from waveform.component.ts. Issues with display when rendered when zoom level / offset is non zero. Same for some other components too, probably needs to be solved upstream in waves-ui-piper.

diff -r b220ed78a250 -r c1cedba9557b src/app/analysis-item/analysis-item.component.html
--- a/src/app/analysis-item/analysis-item.component.html	Wed May 31 17:09:36 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Wed May 31 17:33:23 2017 +0100
@@ -64,6 +64,14 @@
                 [onSeek]="onSeek"
                 [instants]="item.collected"
               ></ugly-instants>
+              <ugly-grid
+                *ngSwitchCase="'matrix'"
+                [timeline]="timeline"
+                [width]="contentWidth"
+                [onSeek]="onSeek"
+                [grid]="item.collected"
+              ></ugly-grid>
+
               <div *ngSwitchDefault>Feature cannot be visualised.</div>
             </div>
           </div>
diff -r b220ed78a250 -r c1cedba9557b src/app/app.module.ts
--- a/src/app/app.module.ts	Wed May 31 17:09:36 2017 +0100
+++ b/src/app/app.module.ts	Wed May 31 17:33:23 2017 +0100
@@ -35,6 +35,7 @@
 import {TracksComponent} from './visualisations/tracks/tracks.components';
 import {NotesComponent} from './visualisations/notes/notes.component';
 import {InstantsComponent} from './visualisations/instants/instants.component';
+import {GridComponent} from './visualisations/grid/grid.component';
 
 export function createAudioContext(): AudioContext {
   return new (
@@ -126,7 +127,8 @@
     CurveComponent,
     TracksComponent,
     NotesComponent,
-    InstantsComponent
+    InstantsComponent,
+    GridComponent
   ],
   imports: [
     BrowserModule,
diff -r b220ed78a250 -r c1cedba9557b src/app/visualisations/grid/grid.component.ts
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/visualisations/grid/grid.component.ts	Wed May 31 17:33:23 2017 +0100
@@ -0,0 +1,79 @@
+/**
+ * Created by lucast on 31/05/2017.
+ */
+import {WavesComponent} from '../waves-base.component';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild
+} from '@angular/core';
+import Waves from 'waves-ui-piper';
+import {MatrixFeature} from 'piper/HigherLevelUtilities';
+import {iceMapper} from '../../spectrogram/ColourMap';
+import {estimatePercentile} from '../../spectrogram/MatrixUtils';
+
+@Component({
+  selector: 'ugly-grid',
+  templateUrl: '../waves-template.html',
+  styleUrls: ['../waves-template.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GridComponent extends WavesComponent implements AfterViewInit {
+  @ViewChild('track') trackDiv: ElementRef;
+
+  private mFeature: MatrixFeature;
+  private height: number; // As it stands, height is fixed. Store once onInit.
+
+  @Input() set grid(grid: MatrixFeature) {
+    this.mFeature = grid;
+    this.update();
+  }
+
+  get grid(): MatrixFeature {
+    return this.mFeature;
+  }
+
+  ngAfterViewInit(): void {
+    this.height = this.trackDiv.nativeElement.getBoundingClientRect().height;
+    this.renderTimeline(this.trackDiv);
+    this.update();
+  }
+
+  update(): void {
+    if (!this.waveTrack || !this.grid) { return; }
+    this.clearTimeline(this.trackDiv);
+
+    const startTime = this.grid.startTime; // !!! + make use of
+    const stepDuration = this.grid.stepDuration;
+    const matrixData = this.grid.data;
+
+    if (matrixData.length === 0) {
+      return;
+    }
+
+    const targetValue = estimatePercentile(matrixData, 95);
+    const gain = (targetValue > 0.0 ? (1.0 / targetValue) : 1.0);
+    const matrixEntity = new Waves.utils.PrefilledMatrixEntity(
+      matrixData,
+      0, // startTime
+      stepDuration
+    );
+
+    this.addLayer(
+      new Waves.helpers.MatrixLayer(
+        matrixEntity,
+        {
+          gain: gain,
+          height: this.height,
+          normalise: 'none',
+          mapper: iceMapper()
+        }
+      ),
+      this.waveTrack,
+      this.timeline.timeContext
+    );
+  }
+}