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

Fix average calculated + performance boost

parent eb452310
...@@ -50,9 +50,21 @@ export class ApiService { ...@@ -50,9 +50,21 @@ export class ApiService {
return await response.json(); return await response.json();
} }
async getQueryWindow(window) {
const response = await fetch('http://127.0.0.1:5000/query', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({window})
});
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/query', { const response = await fetch('http://127.0.0.1:5000/similarity', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
...@@ -63,8 +75,20 @@ export class ApiService { ...@@ -63,8 +75,20 @@ export class ApiService {
return await response.json(); return await response.json();
} }
async getAverageWindow(windows): Promise<number[][]> { async getAverageProgressWindows(windows): Promise<number[][]> {
const response = await fetch('http://127.0.0.1:5000/average', { const response = await fetch('http://127.0.0.1:5000/average-progress', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({windows})
});
return await response.json();
}
async getAverageTableWindows(windows): Promise<number[][]> {
const response = await fetch('http://127.0.0.1:5000/average-table', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
......
...@@ -17,6 +17,7 @@ import { QueryWindowComponent } from './query-window/query-window.component'; ...@@ -17,6 +17,7 @@ import { QueryWindowComponent } from './query-window/query-window.component';
import {ZingchartAngularModule} from 'zingchart-angular'; import {ZingchartAngularModule} from 'zingchart-angular';
import { ProgressViewComponent } from './progress-view/progress-view.component'; import { ProgressViewComponent } from './progress-view/progress-view.component';
import { MainComponent } from './main/main.component'; import { MainComponent } from './main/main.component';
import { MatProgressBarModule} from '@angular/material/progress-bar';
PlotlyModule.plotlyjs = PlotlyJS; PlotlyModule.plotlyjs = PlotlyJS;
...@@ -38,6 +39,7 @@ PlotlyModule.plotlyjs = PlotlyJS; ...@@ -38,6 +39,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
PlotlyModule, PlotlyModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatTabsModule, MatTabsModule,
MatProgressBarModule,
ZingchartAngularModule ZingchartAngularModule
], ],
providers: [], providers: [],
......
...@@ -7,6 +7,7 @@ import {ApiService, RawData} from './api.service'; ...@@ -7,6 +7,7 @@ import {ApiService, RawData} from './api.service';
export class CacheService { export class CacheService {
public rawValues: number[]; public rawValues: number[];
public rawIndices: string[]; public rawIndices: string[];
public loadingProgress: number = 0;
private _currentTab: number; private _currentTab: number;
private _query = undefined; private _query = undefined;
...@@ -14,6 +15,7 @@ export class CacheService { ...@@ -14,6 +15,7 @@ export class CacheService {
private _tables; private _tables;
private _windowSimilarity; private _windowSimilarity;
private _sliderValue; private _sliderValue;
private _queryWindow = [];
public windowSize = 500; public windowSize = 500;
public nrOfTables = 10; public nrOfTables = 10;
...@@ -30,23 +32,27 @@ export class CacheService { ...@@ -30,23 +32,27 @@ export class CacheService {
public onNewTab: EventEmitter<void> = new EventEmitter<void>(); public onNewTab: EventEmitter<void> = new EventEmitter<void>();
public onNewSlider: EventEmitter<void> = new EventEmitter<void>(); public onNewSlider: EventEmitter<void> = new EventEmitter<void>();
public initialized: Promise<void>;
constructor(private api: ApiService) { constructor(private api: ApiService) {
this.initialized = this.initialize(); this.initialize();
} }
async initialize(): Promise<void> { async initialize(): Promise<void> {
this.loadingProgress = 0;
await this.getRawData(); await this.getRawData();
this.loadingProgress = 30;
await this.createWindows(); await this.createWindows();
this.loadingProgress = 60;
await this.createTables(); await this.createTables();
this.loadingProgress = 100;
} }
async reset(): Promise<void> { async reset(): Promise<void> {
this.windowSimilarity = undefined; this.windowSimilarity = undefined;
this.loadingProgress = 30;
await this.createWindows(); await this.createWindows();
this.loadingProgress = 60;
await this.createTables(); await this.createTables();
this.loadingProgress = 100;
} }
async getRawData(): Promise<void> { async getRawData(): Promise<void> {
...@@ -65,13 +71,24 @@ export class CacheService { ...@@ -65,13 +71,24 @@ export class CacheService {
this.tables = await this.api.createTables(this.parameters); this.tables = await this.api.createTables(this.parameters);
} }
async getSimilarWindows(query): Promise<any> { async getSimilarWindows(): Promise<any> {
this.windowSimilarity = await this.api.getSimilarWindows(query, this.tables); this.windowSimilarity = await this.api.getSimilarWindows(this._queryWindow, this.tables);
console.log(this.windowSimilarity);
return this.windowSimilarity; return this.windowSimilarity;
} }
async getAverageWindow(windows): Promise<number[][]> { async getAverageProgressWindows(windows): Promise<number[][]> {
return await this.api.getAverageWindow(windows); return await this.api.getAverageProgressWindows(windows);
}
async getAverageTableWindows(windows): Promise<number[][]> {
return await this.api.getAverageTableWindows(windows);
}
async getQueryWindow(queryIndex): Promise<number[]> {
this._queryWindow = await this.api.getQueryWindow(this.rawValues.slice(queryIndex, queryIndex + this.windowSize));
console.log(this._queryWindow);
return this._queryWindow;
} }
async updateTables(): Promise<void> { async updateTables(): Promise<void> {
...@@ -92,7 +109,6 @@ export class CacheService { ...@@ -92,7 +109,6 @@ export class CacheService {
} }
public set tables(v) { public set tables(v) {
console.log(v);
this._tables = v; this._tables = v;
this.onNewTables.emit(); this.onNewTables.emit();
} }
...@@ -112,7 +128,6 @@ export class CacheService { ...@@ -112,7 +128,6 @@ export class CacheService {
public set windowSimilarity(v) { public set windowSimilarity(v) {
this._windowSimilarity = v; this._windowSimilarity = v;
console.log(v);
this.onNewSimilarity.emit(); this.onNewSimilarity.emit();
} }
...@@ -138,6 +153,11 @@ export class CacheService { ...@@ -138,6 +153,11 @@ export class CacheService {
return this._sliderValue; return this._sliderValue;
} }
public set queryWindow(v) {
this._queryWindow = v;
this.onNewQuery.emit();
}
public get parameters(): {[parameter: string]: any} { public get parameters(): {[parameter: string]: any} {
return { return {
windowsize: this.windowSize, windowsize: this.windowSize,
......
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
<button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">X</button> <button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">X</button>
</div> </div>
</div> </div>
<div class="button-holder">
<button *ngIf="windowSimilarity" (click)="changeTables()" class="label-button">Update tables</button>
</div>
</div> </div>
<div class="button-holder">
<button *ngIf="windowSimilarity" (click)="changeTables()" class="label-button">Update tables</button>
</div>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
display: none; display: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 200px; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
...@@ -12,6 +12,20 @@ ...@@ -12,6 +12,20 @@
cursor: pointer; cursor: pointer;
} }
.loading-progress {
background-color: white;
z-index: 3;
width: 400px;
height: 200px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.show { .show {
display: block; display: block;
} }
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<app-overview-window style="z-index: 10"></app-overview-window> <app-overview-window style="z-index: 10"></app-overview-window>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)"> <mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Training"> <mat-tab label="Training">
<app-labeling-window></app-labeling-window>
<app-table-overview></app-table-overview> <app-table-overview></app-table-overview>
<app-labeling-window></app-labeling-window>
</mat-tab> </mat-tab>
<mat-tab label="Labeled data"> <mat-tab label="Labeled data">
<app-labels></app-labels> <app-labels></app-labels>
...@@ -19,4 +19,12 @@ ...@@ -19,4 +19,12 @@
<app-progress-view></app-progress-view> <app-progress-view></app-progress-view>
</div> </div>
</div> </div>
<div class="overlay" [class.show]="greyOut"></div> <div class="overlay" [class.show]="greyOut" *ngIf="loadingProgress != 100"></div>
<div class="loading-progress" *ngIf="loadingProgress != 100">
<span *ngIf="loadingProgress == 0">Retrieving data</span>
<span *ngIf="loadingProgress == 30">Creating windows</span>
<span *ngIf="loadingProgress == 60">Creating initial tables</span>
<mat-progress-bar mode="determinate" [value]="loadingProgress">
</mat-progress-bar>
</div>
...@@ -18,4 +18,8 @@ export class MainComponent { ...@@ -18,4 +18,8 @@ export class MainComponent {
public get greyOut() { public get greyOut() {
return this.service.querySelectionMode; return this.service.querySelectionMode;
} }
public get loadingProgress(): number {
return this.service.loadingProgress;
}
} }
<div style="overflow: auto"> <zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="200"></zingchart-angular>
<!-- <plotly-plot *ngIf="showPlot" [data]="data" [layout]="layout" (plotly_click)="clicked($event)"></plotly-plot>-->
</div>
<!--<div id="overview"></div>-->
<zingchart-angular [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="200" [series]="series"></zingchart-angular>
import { Component} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { CacheService } from '../cache.service'; import { CacheService } from '../cache.service';
import zingchart from 'zingchart/es6'; import zingchart from 'zingchart/es6';
...@@ -7,11 +7,13 @@ import zingchart from 'zingchart/es6'; ...@@ -7,11 +7,13 @@ import zingchart from 'zingchart/es6';
templateUrl: './overview-window.component.html', templateUrl: './overview-window.component.html',
styleUrls: ['./overview-window.component.css'] styleUrls: ['./overview-window.component.css']
}) })
export class OverviewWindowComponent { export class OverviewWindowComponent implements OnInit {
public config; public config;
public series;
public showPlot = false;
public id = "overview"; public id = "overview";
public markers = [];
public series = [];
public goodLabels = [];
public badLabels = [];
public data; public data;
public layout; public layout;
...@@ -21,7 +23,6 @@ export class OverviewWindowComponent { ...@@ -21,7 +23,6 @@ export class OverviewWindowComponent {
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
this.service.onNewData.subscribe(() => this.initializePlot()); this.service.onNewData.subscribe(() => this.initializePlot());
this.service.onNewWindows.subscribe(() => { });
this.service.onNewTables.subscribe(() => { this.service.onNewTables.subscribe(() => {
if (this.service.query) { if (this.service.query) {
this.updatePlot(); this.updatePlot();
...@@ -32,13 +33,39 @@ export class OverviewWindowComponent { ...@@ -32,13 +33,39 @@ export class OverviewWindowComponent {
async initializePlot() { async initializePlot() {
this.service.query = undefined; this.service.query = undefined;
// this.data = this.service.rawIndices.map((e, i) => {
// return [e, values[i]];
// });
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([i, this.service.rawValues[i]]);
} }
this.series = [
{
type: 'line',
values: this.data,
text: 'Raw Values',
zIndex: 5,
marker: {
alpha: 0.0,
zIndex: 10
}
},
{
type: 'scatter',
values: [],
text: 'Good labels',
marker: {
backgroundColor: '#4caf50'
},
zIndex: 20,
},
{
type: 'scatter',
values: [],
text: 'Bad labels',
marker: {
backgroundColor: '#f44336'
},
zIndex: 20,
}];
this.config = { this.config = {
type: "mixed", type: "mixed",
preview: { preview: {
...@@ -48,58 +75,17 @@ export class OverviewWindowComponent { ...@@ -48,58 +75,17 @@ export class OverviewWindowComponent {
"plotarea": { "plotarea": {
"margin-top": "10px" "margin-top": "10px"
}, },
'scale-x': { scaleX: {
zooming: true, zooming: true,
zoomTo: [0, this.service.windowSize], zoomTo: [0, this.service.windowSize],
'auto-fit': true 'auto-fit': true,
markers: this.markers
}, },
'scale-y': { 'scale-y': {
// zooming: true,
'auto-fit': true 'auto-fit': true
}, },
series: [ series: this.series
{
type: 'line',
values: this.data,
text: 'Raw Values',
zIndex: 5,
marker: {
alpha: 0.0,
zIndex: 10
}
},
{
type: 'scatter',
values: [],
text: 'Good labels',
marker: {
backgroundColor: '#4caf50'
},
zIndex: 20,
},
{
type: 'scatter',
values: [],
text: 'Bad labels',
marker: {
backgroundColor: '#f44336'
},
zIndex: 20,
}]
}; };
// zingchart.render({
// id: 'overview',
// data: this.config,
// height: 200,
// width: '100%'
// });
// zingchart.bind('overview', 'click', (e) => {
// const xyInformation = zingchart.exec('overview', 'getxyinfo', {
// x: e.x,
// y: e.y
// });
// this.clicked({nodeindex: xyInformation[2].nodeidx});
// });
console.log("showing plot"); console.log("showing plot");
} }
...@@ -112,8 +98,6 @@ export class OverviewWindowComponent { ...@@ -112,8 +98,6 @@ export class OverviewWindowComponent {
x: clickData.x, x: clickData.x,
y: clickData.y y: clickData.y
}); });
console.log('clicked node');
console.log(xyInformation);
const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize); const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
this.service.query = index; this.service.query = index;
const temp = {}; const temp = {};
...@@ -123,62 +107,65 @@ export class OverviewWindowComponent { ...@@ -123,62 +107,65 @@ export class OverviewWindowComponent {
} }
async updatePlot() { async updatePlot() {
if (this.service.query) { console.log('updating plot');
const windowSimilarity = await this.service.getSimilarWindows(this.service.query); if (!this.service.query) {
return;
} }
let goodLabels = []; this.goodLabels = [];
let badLabels = []; this.badLabels = [];
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]) {
goodLabels.push(this.data[index]); this.goodLabels.push(this.data[index]);
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],
backgroundColor: "#4caf50",
});
} else { } else {
badLabels.push(this.data[index]); this.badLabels.push(this.data[index]);
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],
backgroundColor: "#f44336",
});
} }
} }
this.series = [ this.series[1].values = this.goodLabels;
{ this.series[2].values = this.badLabels;
type: 'line', this.config.scaleX.markers = this.markers;
values: this.data, console.log(this.config);
text: 'Raw Values', zingchart.exec("zingchart-ng-1", 'setdata', {
zIndex: 5, data: this.config
marker: { });
alpha: 0.0, console.log('querying');
zIndex: 10 await this.service.getQueryWindow(this.service.query);
} await this.service.getSimilarWindows();
}, console.log('done');
{
type: 'scatter',
values: goodLabels,