Load BigWig files

Former-commit-id: 6903c44c

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

@@ -16,8 +16,8 @@ export class ApiService {
   async readFile(): Promise<RawData> {
     const response = await fetch('http://127.0.0.1:5000/read-data');
     const temp = await response.json();
-    const index = JSON.parse(temp.index);
-    const values = JSON.parse(temp.values).map(Number);
+    const index = temp.index;
+    const values = temp.values;
     return {index, values};
   }
 
@@ -62,6 +62,18 @@ export class ApiService {
     return await response.json();
   }
 
+  async getWindow(indices: number[]) {
+    const response = await fetch('http://127.0.0.1:5000/window', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({indices})
+    });
+    return await response.json();
+  }
+
 // Return similar windows based on an input query
   async getSimilarWindows(query, tables) {
     const response = await fetch('http://127.0.0.1:5000/similarity', {

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

@@ -20,7 +20,7 @@ export class CacheService {
   public windowSize = 500;
   public nrOfTables = 10;
   public hashSize = 5;
-  public stepSize = 1;
+  public stepSize = 200;
   public querySelectionMode = true;
 
   public onNewData: EventEmitter<void> = new EventEmitter<void>();
@@ -89,6 +89,10 @@ export class CacheService {
     return this._queryWindow;
   }
 
+  async getWindow(indices: number[]): Promise<number[][]> {
+    return await this.api.getWindow(indices);
+  }
+
   async updateTables(): Promise<void> {
     this.tables = await this.api.updateTables(this.queryWindow, this.labels, this.tables, this.parameters);
   }

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

@@ -9,7 +9,7 @@
       </div>
     </div>
   </div>
-  <button *ngIf="windowSimilarity" (click)="changeTables()" class="train-button">Train</button>
+  <button *ngIf="windowSimilarity" (click)="train()" class="train-button">Train</button>
 </div>
 
 

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

@@ -18,15 +18,11 @@ export class LabelingWindowComponent implements OnInit {
     this.service.onNewSimilarity.subscribe(() => { this.getTopKSimilar(); });
   }
 
-  public changeTables() {
+  public train() {
     this.service.labels = Object.assign({}, this.service.labels, this.labels);
     this.service.updateTables();
   }
 
-  public get windowSimilarity() {
-    return this.service.windowSimilarity;
-  }
-
   public labelCorrect(index: number) {
     this.labels[index] = true;
   }
@@ -41,52 +37,46 @@ export class LabelingWindowComponent implements OnInit {
     this.labels[index] = false;
   }
 
-  shuffleArray(array) {
-    for (var i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      const temp = array[i];
-      array[i] = array[j];
-      array[j] = temp;
-    }
-  }
-
-  public getTopKSimilar() {
+  async getTopKSimilar() {
     this.labels = [];
     let abort = false;
-    if (!this.windowSimilarity) {
-      return;
-    }
-    let topk = [];
+    const topk = [];
     let k = this.k;
+
     const keys = Object.keys(this.windowSimilarity).map(a => Number(a)).sort((a, b) => b - a);
     for (let i = 0; i < this.k; i++) {
       const windows = this.windowSimilarity[keys[i]];
       this.shuffleArray(windows);
-        for (const index of windows) {
-          if (this.service.labels[index] !== undefined) {
-            continue;
-          }
-          topk.push({index, frequency: 100 * keys[i] / this.service.nrOfTables});
-          k -= 1;
-          if (k < 1) {
-            abort = true;
-          }
-          break;
+      for (const index of windows) {
+        if (this.service.labels[index] !== undefined) {
+          continue;
         }
-        if (abort) {
+        topk.push({index, frequency: 100 * keys[i] / this.service.nrOfTables});
+        k -= 1;
+        if (k < 1) {
+          abort = true;
           break;
         }
+        // break;
+      }
+      if (abort) {
+        break;
+      }
     }
     this.topk = topk;
+    await this.createPlots();
+  }
 
+  async createPlots() {
     this.subplots = [];
-    for (const window of this.topk) {
+    const values = await this.service.getWindow(this.topk.map((window) => window.index));
+    this.topk.forEach((window, i) => {
       this.subplots.push(
         {
           index: window.index,
           data: [{
-            x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize),
-            y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize),
+            x: [...Array(values[i].length).keys()],
+            y: values[i],
             type: 'line'
           }],
           layout: {
@@ -117,6 +107,19 @@ export class LabelingWindowComponent implements OnInit {
           }
         }
       );
+    });
+  }
+
+  shuffleArray(array) {
+    for (var i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const temp = array[i];
+      array[i] = array[j];
+      array[j] = temp;
     }
   }
+
+  public get windowSimilarity() {
+    return this.service.windowSimilarity;
+  }
 }

AngularApp/prototype/src/app/labels/labels.component.ts

@@ -16,17 +16,18 @@ export class LabelsComponent implements OnInit {
     this.service.onNewLabels.subscribe(() => { this.createSubplots(); });
   }
 
-  createSubplots(): void {
+  async createSubplots() {
     this.goodLabels = [];
     this.badLabels = [];
-    for (const key of Object.keys(this.service.labels)) {
+    const windows = await this.service.getWindow(Object.keys(this.service.labels).map(Number));
+    Object.keys(this.service.labels).forEach((key, i) => {
       const index = Number(key);
       const plot =
         {
           index,
           data: [{
-            x: this.service.rawIndices.slice(index, index + this.service.windowSize),
-            y: this.service.rawValues.slice(index, index + this.service.windowSize),
+            x: [...Array(this.service.windowSize).keys()],
+            y: windows[i],
             type: 'line'
           }],
           layout: {
@@ -55,7 +56,7 @@ export class LabelsComponent implements OnInit {
       } else {
         this.badLabels.push(plot);
       }
-    }
+    });
   }
 
 }

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

-<zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
+<zingchart-angular [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>

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

@@ -35,7 +35,7 @@ export class OverviewWindowComponent implements OnInit {
     this.service.queryWindow = undefined;
     this.data = [];
     for (let i = 0; i < this.service.rawValues.length; i++) {
-      this.data.push([i, this.service.rawValues[i]]);
+      this.data.push([this.service.rawIndices[i], this.service.rawValues[i]]);
     }
     this.series = [
       {
@@ -91,23 +91,6 @@ export class OverviewWindowComponent implements OnInit {
     console.log("showing plot");
   }
 
-  async clicked(clickData) {
-    if (!this.service.querySelectionMode) {
-      return;
-    }
-    this.service.querySelectionMode = false;
-    const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
-      x: clickData.x,
-      y: clickData.y
-    });
-    const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
-    await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize));
-    const temp = {};
-    temp[index] = true;
-    this.service.labels = temp;
-    await this.updatePlot();
-  }
-
   async updatePlot() {
     console.log('updating plot');
     if (!this.service.queryWindow) {
@@ -118,19 +101,19 @@ export class OverviewWindowComponent implements OnInit {
     this.markers = [];
     for (const index in this.service.labels) {
       if (this.service.labels[index]) {
-        this.goodLabels.push(this.data[index]);
+        this.goodLabels.push([Number(index) * (12000 / 6), 0]);
         this.markers.push({
           type: 'area',
           // BUG: For some reason the range values are multiplied by 10
-          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
+          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
           backgroundColor: "#4caf50",
         });
       } else {
-        this.badLabels.push(this.data[index]);
+        this.badLabels.push([Number(index) * (12000 / 6), 0]);
         this.markers.push({
           type: 'area',
           // BUG: For some reason the range values are multiplied by 10
-          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
+          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
           backgroundColor: "#f44336",
         });
       }
@@ -155,11 +138,11 @@ export class OverviewWindowComponent implements OnInit {
     const labels = [];
     const markers = [];
     for (const index of candidates) {
-      labels.push(this.data[index]);
+      labels.push([Number(index) * (12000 / 6), 0]);
       markers.push({
         type: 'area',
         // BUG: For some reason the range values are multiplied by 10
-        range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
+        range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
         backgroundColor: "#b1a343",
       });
     }
@@ -180,6 +163,23 @@ export class OverviewWindowComponent implements OnInit {
     });
   }
 
+  async clicked(clickData) {
+    if (!this.service.querySelectionMode) {
+      return;
+    }
+    this.service.querySelectionMode = false;
+    const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
+      x: clickData.x,
+      y: clickData.y
+    });
+    const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
+    this.service.queryWindow = await this.service.getQueryWindow(index);
+    const temp = {};
+    temp[index] = true;
+    this.service.labels = temp;
+    await this.updatePlot();
+  }
+
   zoom(p) {
     if (!p.ev) {
       return;
@@ -190,8 +190,4 @@ export class OverviewWindowComponent implements OnInit {
       zingchart.exec("zingchart-ng-1", 'zoomout');
     }
   }
-
-  doubleClick(e) {
-    zingchart.exec("zingchart-ng-1", 'viewall');
-  }
 }

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

@@ -10,6 +10,7 @@ export class ProgressViewComponent implements OnInit {
   public plot;
   public data;
   public layout;
+  public amountOfCandidates;
 
   private _sliderValue;
 
@@ -20,17 +21,24 @@ export class ProgressViewComponent implements OnInit {
   }
 
   averagePlot(averages) {
-    let highest = 100;
-    let data = averages.map((average, i) => {
-      if (average.average.length !== 0 && i < highest) {
+    console.log(averages);
+    let highest = 0;
+    averages.map((average, i) => {
+      if (average.average.length !== 0 && i > highest) {
         highest = i;
       }
+    });
+    let data = averages.map((average, i) => {
       return [
         {
           x: [...Array(average.average.length).keys()],
           y: average.average,
           type: 'line',
           visible: i === highest,
+          line: {
+            color: 'red',
+            width: 3
+          }
         },
         {
           x: [...Array(average.average.length).keys()],
@@ -61,18 +69,18 @@ export class ProgressViewComponent implements OnInit {
     data = [].concat(...data);
     const visibility = Array(averages.length * 3).fill(false);
     const steps = [];
-    for (let i = averages.length - 1; i >= 0; i--) {
+    for (let i = 0; i < this.cache.nrOfTables; i++) {
       const v = visibility.slice();
       v[i * 3 + 2] = true;
       v[i * 3 + 1] = true;
       v[i * 3] = true;
       steps.push({
-        label: (100 * (averages.length - i) / averages.length).toString() + '%',
+        label: (100 * (i + 1) / this.cache.nrOfTables).toString() + '%',
         method: 'restyle',
         args: ['visible', v]
       });
     }
-    this._sliderValue = averages.length - 1 - highest;
+    this._sliderValue = highest;
     this.data = data;
     this.layout = {
       showlegend: false,
@@ -96,7 +104,7 @@ export class ProgressViewComponent implements OnInit {
       height: 300,
       width: 200,
       sliders: [{
-        active: averages.length - 1 - highest,
+        active: highest,
         pad: {t: 30},
         currentvalue: {
           xanchor: 'right',
@@ -113,6 +121,7 @@ export class ProgressViewComponent implements OnInit {
 
   async initializeInfo(): Promise<void> {
     console.log('Updating progress view');
+    console.log(this.similarity);
     const allWindows = [];
     const keys = Object.keys(this.similarity);
     for (let i = this.cache.nrOfTables; i >= 1; i--) {
@@ -124,6 +133,11 @@ export class ProgressViewComponent implements OnInit {
     }
     const averages = await this.cache.getAverageProgressWindows(allWindows);
     this.plot = this.averagePlot(averages);
+    let candidates = [];
+    for (let i = this._sliderValue; i < this.cache.nrOfTables; i++) {
+      candidates = candidates.concat(this.cache.windowSimilarity[i.toString()]);
+    }
+    this.amountOfCandidates = candidates.length;
   }
 
   public get similarity() {
@@ -132,13 +146,14 @@ export class ProgressViewComponent implements OnInit {
 
   public setSliderValue(v) {
     this._sliderValue = v.slider.active;
+    let candidates = [];
+    for (let i = this._sliderValue; i < this.cache.nrOfTables; i++) {
+      candidates = candidates.concat(this.cache.windowSimilarity[i.toString()]);
+    }
+    this.amountOfCandidates = candidates.length;
   }