Scrollable overview

AngularApp/prototype/src/app/overview-window/overview-window.component.html

@@ -13,24 +13,26 @@
         </div>
       </div>
     </as-split-area>
-    <as-split-area [size]="90">
+    <as-split-area [size]="90" [style]="{'overflow-y': 'hidden'}">
       <div class="channel_header">
         Dataset overview
       </div>
       <div class="toolbar">
 
-        <label class="small-margin" for="windowsize">Start</label><br>
-        <input class="small-margin" id="windowsize" [(ngModel)]="minx">
+        <label class="small-margin" for="min">Start</label><br>
+        <input class="small-margin" id="min" [(ngModel)]="minx">
 
-        <label class="small-margin" for="hashsize">End</label><br>
-        <input class="small-margin" [(ngModel)]="maxx" id="hashsize">
+        <label class="small-margin" for="max">End</label><br>
+        <input class="small-margin" [(ngModel)]="maxx" id="max">
 
+        <label class="small-margin" for="w">Window Size</label><br>
+        <input class="small-margin" [disabled]="true" [value]="maxx - minx" id="w">
         <button (click)="setquery()">
           Set as query
         </button>
       </div>
       <div class="overview">
-        <zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular>
+        <zingchart-angular #chart [id]="id" (wheel)="scroll($event)" [height]="height"></zingchart-angular>
       </div>
     </as-split-area>
   </as-split>

AngularApp/prototype/src/app/overview-window/overview-window.component.ts

@@ -211,6 +211,7 @@ export class OverviewWindowComponent implements OnInit {
       });
     });
     zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
+      console.log("zoom");
       if (e.stopupdate) {
         return;
       } else {
@@ -363,7 +364,7 @@ export class OverviewWindowComponent implements OnInit {
   }
 
   ping() {
-    console.log("zoom");
+    console.log("ping");
   }
 
   async updateCandidates() {
@@ -375,8 +376,29 @@ export class OverviewWindowComponent implements OnInit {
     console.log(candidates);
 
     this.candidateLabels = [];
+    this.goodLabels = [];
+    this.badLabels = [];
     this.markers = [];
 
+    for (const index in this.state.labels) {
+      if (this.state.labels[index]) {
+        this.goodLabels.push([Number(index), 1]);
+        this.markers.push({
+          type: 'area',
+          // BUG: For some reason the range values are multiplied by 10
+          range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
+          backgroundColor: "#4caf50",
+        });
+      } else {
+        this.badLabels.push([Number(index), -1]);
+        this.markers.push({
+          type: 'area',
+          // BUG: For some reason the range values are multiplied by 10
+          range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
+          backgroundColor: "#f44336",
+        });
+      }
+    }
     for (const index of candidates) {
       this.candidateLabels.push([Number(index), 0]);
       this.markers.push({
@@ -391,6 +413,8 @@ export class OverviewWindowComponent implements OnInit {
       if (channel.type === 'line') {
         channel.scaleX.markers = this.markers;
       } else {
+        channel.series[0].values = this.goodLabels;
+        channel.series[1].values = this.badLabels;
         channel.series[2].values = this.candidateLabels;
       }
     }
@@ -428,15 +452,24 @@ export class OverviewWindowComponent implements OnInit {
   //   this.state.labels = temp;
   // }
 
-  zoom(p) {
-    if (!p.ev) {
-      return;
-    }
-    if (p.ev.wheelDelta > 0) {
-      zingchart.exec("zingchart-ng-1", 'zoomin');
-    } else if (p.ev.wheelDelta < 0) {
-      zingchart.exec("zingchart-ng-1", 'zoomout');
+  scroll(p) {
+    p.stopPropagation();
+    console.log('mousewheel');
+    console.log(p);
+    console.log(p.deltaY);
+    const q = Math.round((this._maxx - this._minx) / 10);
+    if (p.deltaY > 0) {
+      this._minx = Math.max(this._minx - q, 0);
+      this._maxx = Math.max(this._maxx - q, 0);
+    } else if (p.deltaY < 0) {
+      this._minx = Math.min(this._minx + q, this.state.rawData[0].values.length - 1);
+      this._maxx = Math.min(this._maxx + q, this.state.rawData[0].values.length - 1);
     }
+    this.chart.zoomto({
+      graphid: `zingchart-ng-1-graph-preview`,
+      xmin: this._minx,
+      xmax: this._maxx,
+    });
   }
 
   isInSelection(i): boolean {

AngularApp/prototype/src/app/progress-view/progress-view.component.css

@@ -44,5 +44,10 @@ mat-slider {
   width: 400px;
 }
 
+.button {
+  display: flex;
+  justify-content: center;
+}
+
 line { stroke: #5e4646; }
 circle { stroke: #fff; stroke-width: 1.5px; }

AngularApp/prototype/src/app/progress-view/progress-view.component.html

@@ -2,13 +2,13 @@
 <div class="main-container">
   <mat-tab-group mat-stretch-tabs animationDuration="0ms">
     <mat-tab label="Classifier">
-      <div *ngIf="data" class="container">
+      <div *ngIf="data" class="container button">
         <button (click)="showCandidates()">
           Show {{ nrOfCandidates }} similar candidates
         </button>
       </div>
       <div *ngIf="data" class="slider">
-        <mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" thumbLabel tickInterval="5"></mat-slider>
+        <mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" tickInterval="1"></mat-slider>
       </div>
       <div *ngIf="data" class="info">
         <div class="histogram">
@@ -20,7 +20,8 @@
             <div class="container">
               <fieldset>
                 <legend>Info</legend>
-                # Candidates found: {{1000000}}
+                <div>Candidates pruned: {{pruned}}%</div>
+                <div>Computing time: {{computingTime}} seconds</div>
               </fieldset>
             </div>
           </div>

AngularApp/prototype/src/app/progress-view/progress-view.component.ts

@@ -305,4 +305,12 @@ export class ProgressViewComponent implements OnInit {
   public showCandidates() {
     this.state.sliderValue = this._sliderValue;
   }
+
+  public get pruned(): string {
+    return (100 - 100 * this.state.lshData.average_candidates.length / this.state.rawData[0].values.length).toPrecision(2);
+  }
+
+  public get computingTime(): number {
+    return this.state.computedTime / 1000;
+  }
 }

AngularApp/prototype/src/app/state.service.ts

@@ -22,6 +22,7 @@ export class StateService {
   private _labels = {};
   private _lshParameters: number[];
   private _selection: number[];
+  public computedTime = 0;
   public windowSize = 120;
   public nrOfTables = 5;
   public hashSize = 5;
@@ -95,7 +96,9 @@ export class StateService {
    */
   async lshInitial(): Promise<void> {
     this._weights = Array(this._queryWindow.length).fill(1);
+    const t0 = new Date().getTime();
     this.lshData = await this.api.lshInitial(this._queryWindow);
+    this.computedTime = new Date().getTime() - t0;
     this._lshParameters = this.lshData.parameters;
   }
 
@@ -104,7 +107,9 @@ export class StateService {
    */
   async update(labels, hashFunctions): Promise<void> {
     this._weights = await this.api.getWeights(this._queryWindow, labels, this._weights, hashFunctions);
+    const t0 = new Date().getTime();
     this.lshData = await this.api.lshUpdate(this._queryWindow, this._weights, this._lshParameters);
+    this.computedTime = new Date().getTime() - t0;
   }
 
   /**