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

Cleaned up code

parent e3815982
...@@ -5,6 +5,22 @@ export interface RawData { ...@@ -5,6 +5,22 @@ export interface RawData {
values: number[]; values: number[];
} }
export interface LshData {
candidates: number[];
distances: number[];
hash_functions: number[][][][];
parameters?: number[];
}
export interface TableInfoData {
prototypes: {
average: number[];
min: number[];
max: number[];
}[];
distances: number[][];
}
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
...@@ -15,13 +31,10 @@ export class ApiService { ...@@ -15,13 +31,10 @@ export class ApiService {
// Read input data // Read input data
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(); return await response.json();
const index = temp.index;
const values = temp.values;
return {index, values};
} }
// Split data into windows and normalize // Split data into windows and normalize
async createWindows(parameters): Promise<any> { async createWindows(parameters): Promise<any> {
const postData = {parameters}; const postData = {parameters};
const response = await fetch('http://127.0.0.1:5000/create-windows', { const response = await fetch('http://127.0.0.1:5000/create-windows', {
...@@ -32,11 +45,10 @@ export class ApiService { ...@@ -32,11 +45,10 @@ export class ApiService {
}, },
body: JSON.stringify(postData) body: JSON.stringify(postData)
}); });
return await response.json();
} }
// Generate LSH-tables by hashing each window // Calculate parameters for LSH + find candidates using LSH
async initialize(query): Promise<any> { async lshInitial(query): Promise<LshData> {
const response = await fetch('http://127.0.0.1:5000/initialize', { const response = await fetch('http://127.0.0.1:5000/initialize', {
method: 'POST', method: 'POST',
headers: { headers: {
...@@ -48,8 +60,8 @@ export class ApiService { ...@@ -48,8 +60,8 @@ export class ApiService {
return await response.json(); return await response.json();
} }
// Update // Find candidates using LSH with weights
async update(query, hashFunctions, parameters): Promise<any> { async lshUpdate(query, hashFunctions, parameters): Promise<LshData> {
const response = await fetch('http://127.0.0.1:5000/update', { const response = await fetch('http://127.0.0.1:5000/update', {
method: 'POST', method: 'POST',
headers: { headers: {
...@@ -61,7 +73,8 @@ export class ApiService { ...@@ -61,7 +73,8 @@ export class ApiService {
return await response.json(); return await response.json();
} }
async getQueryWindow(window) { // Get query window based on windows labeled correct
async getQueryWindow(window): Promise<number[]> {
const response = await fetch('http://127.0.0.1:5000/query', { const response = await fetch('http://127.0.0.1:5000/query', {
method: 'POST', method: 'POST',
headers: { headers: {
...@@ -73,7 +86,8 @@ export class ApiService { ...@@ -73,7 +86,8 @@ export class ApiService {
return await response.json(); return await response.json();
} }
async getWindow(indices: number[]) { // Get data of a window by indices
async getWindowByIndices(indices: number[]): Promise<number[][]> {
const response = await fetch('http://127.0.0.1:5000/window', { const response = await fetch('http://127.0.0.1:5000/window', {
method: 'POST', method: 'POST',
headers: { headers: {
...@@ -85,8 +99,8 @@ export class ApiService { ...@@ -85,8 +99,8 @@ export class ApiService {
return await response.json(); return await response.json();
} }
async getAverageWindows(windows): Promise<any> { async getTableInfo(windows): Promise<TableInfoData> {
const response = await fetch('http://127.0.0.1:5000/average', { const response = await fetch('http://127.0.0.1:5000/table-info', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
......
<div class="container"> <div class="container">
<div *ngIf="candidates" class="subplot-container"> <div *ngIf="show" class="subplot-container">
<div class="subplot" *ngFor="let subplot of subplots"> <div class="subplot" *ngFor="let subplot of subplots">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<div class="button-holder"> <div class="button-holder">
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
</div> </div>
</div> </div>
<div class="button-holder"> <div class="button-holder">
<button *ngIf="candidates" (click)="updateQuery()" class="train-button">Query</button> <button *ngIf="show" (click)="updateQuery()" class="train-button">Query</button>
<button *ngIf="candidates" (click)="train()" class="train-button">Train</button> <button *ngIf="show" (click)="train()" class="train-button">Train</button>
</div> </div>
</div> </div>
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service'; import {StateService} from '../state.service';
@Component({ @Component({
selector: 'app-labeling-window', selector: 'app-labeling-window',
...@@ -7,25 +7,26 @@ import {CacheService} from '../cache.service'; ...@@ -7,25 +7,26 @@ import {CacheService} from '../cache.service';
styleUrls: ['./labeling-window.component.css'] styleUrls: ['./labeling-window.component.css']
}) })
export class LabelingWindowComponent implements OnInit { export class LabelingWindowComponent implements OnInit {
public topk; public topk: number[];
public subplots = []; public subplots = [];
public labels: boolean[] = []; public labels: boolean[] = [];
private k = 12; private k = 12;
constructor(private service: CacheService) { } constructor(private state: StateService) { }
ngOnInit(): void { ngOnInit(): void {
this.service.onNewTables.subscribe(() => { this.getTopKSimilar(); }); this.state.onNewTable.subscribe(() => this.showSamples());
} }
public train() { async train() {
this.service.labels = Object.assign({}, this.service.labels, this.labels); this.state.labels = Object.assign({}, this.state.labels, this.labels);
this.service.update(); await this.state.getQueryWindow(this.state.labels);
await this.state.update();
} }
public updateQuery() { async updateQuery() {
this.service.labels = Object.assign({}, this.service.labels, this.labels); this.state.labels = Object.assign({}, this.state.labels, this.labels);
this.service.getQueryWindow(this.service.labels); await this.state.getQueryWindow(this.state.labels);
} }
public labelCorrect(index: number) { public labelCorrect(index: number) {
...@@ -42,14 +43,10 @@ export class LabelingWindowComponent implements OnInit { ...@@ -42,14 +43,10 @@ export class LabelingWindowComponent implements OnInit {
this.labels[index] = false; this.labels[index] = false;
} }
async getTopKSimilar() { async showSamples() {
this.topk = this.service.candidates.slice(0, 12); this.topk = this.state.lshData.candidates.slice(0, this.k);
await this.createPlots();
}
async createPlots() {
this.subplots = []; this.subplots = [];
const values = await this.service.getWindow(this.topk); const values = await this.state.getWindow(this.topk);
this.topk.forEach((index, i) => { this.topk.forEach((index, i) => {
this.subplots.push( this.subplots.push(
{ {
...@@ -90,7 +87,7 @@ export class LabelingWindowComponent implements OnInit { ...@@ -90,7 +87,7 @@ export class LabelingWindowComponent implements OnInit {
}); });
} }
public get candidates() { public get show() {
return this.service.candidates; return !!this.state.lshData;
} }
} }
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service'; import {StateService} from '../state.service';
@Component({ @Component({
selector: 'app-labels', selector: 'app-labels',
...@@ -10,24 +10,25 @@ export class LabelsComponent implements OnInit { ...@@ -10,24 +10,25 @@ export class LabelsComponent implements OnInit {
public goodLabels = []; public goodLabels = [];
public badLabels = []; public badLabels = [];
constructor(private service: CacheService) { }
constructor(private state: StateService) { }
ngOnInit(): void { ngOnInit(): void {
this.service.onNewLabels.subscribe(() => { this.createSubplots(); }); this.state.onNewLabels.subscribe(() => { this.createSubplots(); });
} }
async createSubplots() { async createSubplots() {
this.goodLabels = []; this.goodLabels = [];
this.badLabels = []; this.badLabels = [];
const windows = await this.service.getWindow(Object.keys(this.service.labels).map(Number)); const labelWindows: number[][] = await this.state.getWindow(Object.keys(this.state.labels).map(Number));
Object.keys(this.service.labels).forEach((key, i) => { Object.keys(this.state.labels).forEach((key, i) => {
const index = Number(key); const index = Number(key);
const plot = const plot =
{ {
index, index,
data: [{ data: [{
x: [...Array(this.service.windowSize).keys()], x: [...Array(this.state.windowSize).keys()],
y: windows[i], y: labelWindows[i],
type: 'line' type: 'line'
}], }],
layout: { layout: {
...@@ -51,7 +52,7 @@ export class LabelsComponent implements OnInit { ...@@ -51,7 +52,7 @@ export class LabelsComponent implements OnInit {
} }
} }
}; };
if (this.service.labels[key]) { if (this.state.labels[key]) {
this.goodLabels.push(plot); this.goodLabels.push(plot);
} else { } else {
this.badLabels.push(plot); this.badLabels.push(plot);
......
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {CacheService} from '../cache.service'; import {StateService} from '../state.service';
@Component({ @Component({
selector: 'app-main', selector: 'app-main',
...@@ -8,18 +8,18 @@ import {CacheService} from '../cache.service'; ...@@ -8,18 +8,18 @@ import {CacheService} from '../cache.service';
}) })
export class MainComponent { export class MainComponent {
constructor(private service: CacheService) { constructor(private state: StateService) {
} }
changeTab(tab) { changeTab(tab) {
this.service.currentTab = tab.index; this.state.currentTab = tab.index;
} }
public get greyOut() { public get greyOut() {
return this.service.querySelectionMode; return this.state.querySelectionMode;
} }
public get loadingProgress(): number { public get loadingProgress(): number {
return this.service.loadingProgress; return this.state.loadingProgress;
} }
} }
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { CacheService } from '../cache.service'; import { StateService } from '../state.service';
import zingchart from 'zingchart/es6'; import zingchart from 'zingchart/es6';
@Component({ @Component({
...@@ -9,7 +9,7 @@ import zingchart from 'zingchart/es6'; ...@@ -9,7 +9,7 @@ import zingchart from 'zingchart/es6';
}) })
export class OverviewWindowComponent implements OnInit { export class OverviewWindowComponent implements OnInit {
public config; public config;
public id = "overview"; public id = 'overview';
public markers = []; public markers = [];
public series = []; public series = [];
public goodLabels = []; public goodLabels = [];
...@@ -18,25 +18,20 @@ export class OverviewWindowComponent implements OnInit { ...@@ -18,25 +18,20 @@ export class OverviewWindowComponent implements OnInit {
public data; public data;
public layout; public layout;
constructor(private service: CacheService) { constructor(private state: StateService) {
} }
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
this.service.onNewData.subscribe(() => this.initializePlot()); this.state.onNewData.subscribe(() => this.initializePlot());
this.service.onNewTables.subscribe(() => { this.state.onNewTable.subscribe(() => this.updatePlot());
if (this.service.queryWindow) {
this.updatePlot();
}
});
this.service.onNewSlider.subscribe((v) => this.updateCandidates(v));
} }
async initializePlot() { async initializePlot() {
this.state.queryWindow = undefined;
this.debugClicked(); this.debugClicked();
this.service.queryWindow = undefined;
this.data = []; this.data = [];
for (let i = 0; i < this.service.rawValues.length; i++) { for (let i = 0; i < this.state.rawData.values.length; i++) {
this.data.push([this.service.rawIndices[i], this.service.rawValues[i]]); this.data.push([this.state.rawData.index[i], this.state.rawData.values[i]]);
} }
this.series = [ this.series = [
{ {
...@@ -68,19 +63,19 @@ export class OverviewWindowComponent implements OnInit { ...@@ -68,19 +63,19 @@ export class OverviewWindowComponent implements OnInit {
zIndex: 20, zIndex: 20,
}]; }];
this.config = { this.config = {
type: "mixed", type: 'mixed',
preview: { preview: {
height: "30px", height: '30px',
position: "0% 100%", position: '0% 100%',
'auto-fit': true 'auto-fit': true
}, },
"plotarea": { plotarea: {
"margin-top": "10px", 'margin-top': '10px',
"margin-bottom": "50%" 'margin-bottom': '50%'
}, },
scaleX: { scaleX: {
zooming: true, zooming: true,
zoomTo: [0, this.service.windowSize], zoomTo: [0, this.state.windowSize],
'auto-fit': true, 'auto-fit': true,
markers: this.markers markers: this.markers
}, },
...@@ -89,99 +84,93 @@ export class OverviewWindowComponent implements OnInit { ...@@ -89,99 +84,93 @@ export class OverviewWindowComponent implements OnInit {
}, },
series: this.series series: this.series
}; };
console.log("showing plot");
} }
async updatePlot() { async updatePlot() {
console.log('updating plot');
if (!this.service.queryWindow) {
return;
}
this.goodLabels = []; this.goodLabels = [];
this.badLabels = []; this.badLabels = [];
this.markers = []; this.markers = [];
for (const index in this.service.labels) { for (const index in this.state.labels) {
if (this.service.labels[index]) { if (this.state.labels[index]) {
this.goodLabels.push([Number(index) * (12000 / 6), 0]); 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: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10], range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
backgroundColor: "#4caf50", backgroundColor: '#4caf50',
}); });
} else { } else {
this.badLabels.push([Number(index) * (12000 / 6), 0]); 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: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10], range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
backgroundColor: "#f44336", backgroundColor: '#f44336',
}); });
} }
} }
this.series[1].values = this.goodLabels; this.series[1].values = this.goodLabels;
this.series[2].values = this.badLabels; this.series[2].values = this.badLabels;
this.config.scaleX.markers = this.markers; this.config.scaleX.markers = this.markers;
zingchart.exec("zingchart-ng-1", 'setdata', { zingchart.exec('zingchart-ng-1', 'setdata', {
data: this.config data: this.config
}); });
} }
async updateCandidates(sliderIndex) { async updateCandidates(sliderIndex) {
console.log("Updating chart"); // let candidates = [];
let candidates = []; // for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
for (let i = sliderIndex; i < this.service.nrOfTables; i++) { // candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]); // }
} // const labels = [];
const labels = []; // const markers = [];
const markers = []; // for (const index of candidates) {
for (const index of candidates) { // labels.push([Number(index) * (12000 / 6), 0]);
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: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10], // backgroundColor: '#b1a343',
backgroundColor: "#b1a343", // });
}); // }
} // const newSeries = this.config.series.slice(0, 3);
const newSeries = this.config.series.slice(0, 3); // newSeries.push({
newSeries.push({ // type: 'scatter',
type: 'scatter', // values: labels,
values: labels, // text: 'Similar windows',
text: 'Similar windows', // marker: {
marker: { // backgroundColor: '#b1a343'