Commit ba241de2 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Load BigWig files


Former-commit-id: 6903c44c
parent 10dda117
...@@ -16,8 +16,8 @@ export class ApiService { ...@@ -16,8 +16,8 @@ export class ApiService {
async readFile(): Promise<RawData> { async readFile(): Promise<RawData> {
const response = await fetch('http://127.0.0.1:5000/read-data'); const response = await fetch('http://127.0.0.1:5000/read-data');
const temp = await response.json(); const temp = await response.json();
const index = JSON.parse(temp.index); const index = temp.index;
const values = JSON.parse(temp.values).map(Number); const values = temp.values;
return {index, values}; return {index, values};
} }
...@@ -62,6 +62,18 @@ export class ApiService { ...@@ -62,6 +62,18 @@ export class ApiService {
return await response.json(); 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 // Return similar windows based on an input query
async getSimilarWindows(query, tables) { async getSimilarWindows(query, tables) {
const response = await fetch('http://127.0.0.1:5000/similarity', { const response = await fetch('http://127.0.0.1:5000/similarity', {
......
...@@ -20,7 +20,7 @@ export class CacheService { ...@@ -20,7 +20,7 @@ export class CacheService {
public windowSize = 500; public windowSize = 500;
public nrOfTables = 10; public nrOfTables = 10;
public hashSize = 5; public hashSize = 5;
public stepSize = 1; public stepSize = 200;
public querySelectionMode = true; public querySelectionMode = true;
public onNewData: EventEmitter<void> = new EventEmitter<void>(); public onNewData: EventEmitter<void> = new EventEmitter<void>();
...@@ -89,6 +89,10 @@ export class CacheService { ...@@ -89,6 +89,10 @@ export class CacheService {
return this._queryWindow; return this._queryWindow;
} }
async getWindow(indices: number[]): Promise<number[][]> {
return await this.api.getWindow(indices);
}
async updateTables(): Promise<void> { async updateTables(): Promise<void> {
this.tables = await this.api.updateTables(this.queryWindow, this.labels, this.tables, this.parameters); this.tables = await this.api.updateTables(this.queryWindow, this.labels, this.tables, this.parameters);
} }
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
</div> </div>
</div> </div>
<button *ngIf="windowSimilarity" (click)="changeTables()" class="train-button">Train</button> <button *ngIf="windowSimilarity" (click)="train()" class="train-button">Train</button>
</div> </div>
...@@ -18,15 +18,11 @@ export class LabelingWindowComponent implements OnInit { ...@@ -18,15 +18,11 @@ export class LabelingWindowComponent implements OnInit {
this.service.onNewSimilarity.subscribe(() => { this.getTopKSimilar(); }); this.service.onNewSimilarity.subscribe(() => { this.getTopKSimilar(); });
} }
public changeTables() { public train() {
this.service.labels = Object.assign({}, this.service.labels, this.labels); this.service.labels = Object.assign({}, this.service.labels, this.labels);
this.service.updateTables(); this.service.updateTables();
} }
public get windowSimilarity() {
return this.service.windowSimilarity;
}
public labelCorrect(index: number) { public labelCorrect(index: number) {
this.labels[index] = true; this.labels[index] = true;
} }
...@@ -41,23 +37,12 @@ export class LabelingWindowComponent implements OnInit { ...@@ -41,23 +37,12 @@ export class LabelingWindowComponent implements OnInit {
this.labels[index] = false; this.labels[index] = false;
} }
shuffleArray(array) { async getTopKSimilar() {
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() {
this.labels = []; this.labels = [];
let abort = false; let abort = false;
if (!this.windowSimilarity) { const topk = [];
return;
}
let topk = [];
let k = this.k; let k = this.k;
const keys = Object.keys(this.windowSimilarity).map(a => Number(a)).sort((a, b) => b - a); const keys = Object.keys(this.windowSimilarity).map(a => Number(a)).sort((a, b) => b - a);
for (let i = 0; i < this.k; i++) { for (let i = 0; i < this.k; i++) {
const windows = this.windowSimilarity[keys[i]]; const windows = this.windowSimilarity[keys[i]];
...@@ -70,23 +55,28 @@ export class LabelingWindowComponent implements OnInit { ...@@ -70,23 +55,28 @@ export class LabelingWindowComponent implements OnInit {
k -= 1; k -= 1;
if (k < 1) { if (k < 1) {
abort = true; abort = true;
}
break; break;
} }
// break;
}
if (abort) { if (abort) {
break; break;
} }
} }
this.topk = topk; this.topk = topk;
await this.createPlots();
}
async createPlots() {
this.subplots = []; 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( this.subplots.push(
{ {
index: window.index, index: window.index,
data: [{ data: [{
x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize), x: [...Array(values[i].length).keys()],
y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize), y: values[i],
type: 'line' type: 'line'
}], }],
layout: { layout: {
...@@ -117,6 +107,19 @@ export class LabelingWindowComponent implements OnInit { ...@@ -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;
} }
} }
...@@ -16,17 +16,18 @@ export class LabelsComponent implements OnInit { ...@@ -16,17 +16,18 @@ export class LabelsComponent implements OnInit {
this.service.onNewLabels.subscribe(() => { this.createSubplots(); }); this.service.onNewLabels.subscribe(() => { this.createSubplots(); });
} }
createSubplots(): void { async createSubplots() {
this.goodLabels = []; this.goodLabels = [];
this.badLabels = []; 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 index = Number(key);
const plot = const plot =
{ {
index, index,
data: [{ data: [{
x: this.service.rawIndices.slice(index, index + this.service.windowSize), x: [...Array(this.service.windowSize).keys()],
y: this.service.rawValues.slice(index, index + this.service.windowSize), y: windows[i],
type: 'line' type: 'line'
}], }],
layout: { layout: {
...@@ -55,7 +56,7 @@ export class LabelsComponent implements OnInit { ...@@ -55,7 +56,7 @@ export class LabelsComponent implements OnInit {
} else { } else {
this.badLabels.push(plot); this.badLabels.push(plot);
} }
} });
} }
} }
<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>
...@@ -35,7 +35,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -35,7 +35,7 @@ export class OverviewWindowComponent implements OnInit {
this.service.queryWindow = undefined; this.service.queryWindow = undefined;
this.data = []; this.data = [];
for (let i = 0; i < this.service.rawValues.length; i++) { 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 = [ this.series = [
{ {
...@@ -91,23 +91,6 @@ export class OverviewWindowComponent implements OnInit { ...@@ -91,23 +91,6 @@ export class OverviewWindowComponent implements OnInit {
console.log("showing plot"); 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() { async updatePlot() {
console.log('updating plot'); console.log('updating plot');
if (!this.service.queryWindow) { if (!this.service.queryWindow) {
...@@ -118,19 +101,19 @@ export class OverviewWindowComponent implements OnInit { ...@@ -118,19 +101,19 @@ export class OverviewWindowComponent implements OnInit {
this.markers = []; this.markers = [];
for (const index in this.service.labels) { for (const index in this.service.labels) {
if (this.service.labels[index]) { if (this.service.labels[index]) {
this.goodLabels.push(this.data[index]); this.goodLabels.push([Number(index) * (12000 / 6), 0]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // 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", backgroundColor: "#4caf50",
}); });
} else { } else {
this.badLabels.push(this.data[index]); this.badLabels.push([Number(index) * (12000 / 6), 0]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // 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", backgroundColor: "#f44336",
}); });
} }
...@@ -155,11 +138,11 @@ export class OverviewWindowComponent implements OnInit { ...@@ -155,11 +138,11 @@ export class OverviewWindowComponent implements OnInit {
const labels = []; const labels = [];
const markers = []; const markers = [];
for (const index of candidates) { for (const index of candidates) {
labels.push(this.data[index]); labels.push([Number(index) * (12000 / 6), 0]);
markers.push({ markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // 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", backgroundColor: "#b1a343",
}); });
} }
...@@ -180,6 +163,23 @@ export class OverviewWindowComponent implements OnInit { ...@@ -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) { zoom(p) {
if (!p.ev) { if (!p.ev) {
return; return;
...@@ -190,8 +190,4 @@ export class OverviewWindowComponent implements OnInit { ...@@ -190,8 +190,4 @@ export class OverviewWindowComponent implements OnInit {
zingchart.exec("zingchart-ng-1", 'zoomout'); zingchart.exec("zingchart-ng-1", 'zoomout');
} }
} }
doubleClick(e) {
zingchart.exec("zingchart-ng-1", 'viewall');
}
} }
...@@ -10,6 +10,7 @@ export class ProgressViewComponent implements OnInit { ...@@ -10,6 +10,7 @@ export class ProgressViewComponent implements OnInit {
public plot; public plot;
public data; public data;
public layout; public layout;
public amountOfCandidates;
private _sliderValue; private _sliderValue;
...@@ -20,17 +21,24 @@ export class ProgressViewComponent implements OnInit { ...@@ -20,17 +21,24 @@ export class ProgressViewComponent implements OnInit {
} }
averagePlot(averages) { averagePlot(averages) {
let highest = 100; console.log(averages);
let data = averages.map((average, i) => { let highest = 0;
if (average.average.length !== 0 && i < highest) { averages.map((average, i) => {
if (average.average.length !== 0 && i > highest) {
highest = i; highest = i;
} }
});
let data = averages.map((average, i) => {
return [ return [
{ {
x: [...Array(average.average.length).keys()], x: [...Array(average.average.length).keys()],
y: average.average, y: average.average,
type: 'line', type: 'line',
visible: i === highest, visible: i === highest,
line: {
color: 'red',
width: 3
}
}, },
{ {
x: [...Array(average.average.length).keys()], x: [...Array(average.average.length).keys()],
...@@ -61,18 +69,18 @@ export class ProgressViewComponent implements OnInit { ...@@ -61,18 +69,18 @@ export class ProgressViewComponent implements OnInit {
data = [].concat(...data); data = [].concat(...data);
const visibility = Array(averages.length * 3).fill(false); const visibility = Array(averages.length * 3).fill(false);
const steps = []; const steps = [];
for (let i = averages.length - 1; i >= 0; i--) { for (let i = 0; i < this.cache.nrOfTables; i++) {
const v = visibility.slice(); const v = visibility.slice();
v[i * 3 + 2] = true; v[i * 3 + 2] = true;
v[i * 3 + 1] = true; v[i * 3 + 1] = true;
v[i * 3] = true; v[i * 3] = true;
steps.push({ steps.push({
label: (100 * (averages.length - i) / averages.length).toString() + '%', label: (100 * (i + 1) / this.cache.nrOfTables).toString() + '%',
method: 'restyle', method: 'restyle',
args: ['visible', v] args: ['visible', v]
}); });
} }
this._sliderValue = averages.length - 1 - highest; this._sliderValue = highest;
this.data = data; this.data = data;
this.layout = { this.layout = {
showlegend: false, showlegend: false,
...@@ -96,7 +104,7 @@ export class ProgressViewComponent implements OnInit { ...@@ -96,7 +104,7 @@ export class ProgressViewComponent implements OnInit {
height: 300, height: 300,
width: 200, width: 200,
sliders: [{ sliders: [{
active: averages.length - 1 - highest, active: highest,
pad: {t: 30}, pad: {t: 30},
currentvalue: { currentvalue: {
xanchor: 'right', xanchor: 'right',
...@@ -113,6 +121,7 @@ export class ProgressViewComponent implements OnInit { ...@@ -113,6 +121,7 @@ export class ProgressViewComponent implements OnInit {
async initializeInfo(): Promise<void> { async initializeInfo(): Promise<void> {
console.log('Updating progress view'); console.log('Updating progress view');
console.log(this.similarity);
const allWindows = []; const allWindows = [];
const keys = Object.keys(this.similarity); const keys = Object.keys(this.similarity);
for (let i = this.cache.nrOfTables; i >= 1; i--) { for (let i = this.cache.nrOfTables; i >= 1; i--) {
...@@ -124,6 +133,11 @@ export class ProgressViewComponent implements OnInit { ...@@ -124,6 +133,11 @@ export class ProgressViewComponent implements OnInit {
} }
const averages = await this.cache.getAverageProgressWindows(allWindows); const averages = await this.cache.getAverageProgressWindows(allWindows);
this.plot = this.averagePlot(averages); 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() { public get similarity() {
...@@ -132,13 +146,14 @@ export class ProgressViewComponent implements OnInit { ...@@ -132,13 +146,14 @@ export class ProgressViewComponent implements OnInit {
public setSliderValue(v) { public setSliderValue(v) {
this._sliderValue = v.slider.active; 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;
} }
public showCandidates() { public showCandidates() {
this.cache.sliderValue = this._sliderValue; this.cache.sliderValue = this._sliderValue;
} }
public get amountOfCandidates() {
return this.similarity[this._sliderValue.toString()].length;
}
} }