Cleaned up code

Former-commit-id: 65a2a2ee

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

@@ -5,6 +5,22 @@ export interface RawData {
   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({
   providedIn: 'root'
 })
@@ -15,13 +31,10 @@ export class ApiService {
   // Read input data
   async readFile(): Promise<RawData> {
     const response = await fetch('http://127.0.0.1:5000/read-data');
-    const temp = await response.json();
-    const index = temp.index;
-    const values = temp.values;
-    return {index, values};
+    return await response.json();
   }
 
-// Split data into windows and normalize
+  // Split data into windows and normalize
   async createWindows(parameters): Promise<any> {
     const postData = {parameters};
     const response = await fetch('http://127.0.0.1:5000/create-windows', {
@@ -32,11 +45,10 @@ export class ApiService {
       },
       body: JSON.stringify(postData)
     });
-    return await response.json();
   }
 
-// Generate LSH-tables by hashing each window
-  async initialize(query): Promise<any> {
+  // Calculate parameters for LSH + find candidates using LSH
+  async lshInitial(query): Promise<LshData> {
     const response = await fetch('http://127.0.0.1:5000/initialize', {
       method: 'POST',
       headers: {
@@ -48,8 +60,8 @@ export class ApiService {
     return await response.json();
   }
 
-  // Update
-  async update(query, hashFunctions, parameters): Promise<any> {
+  // Find candidates using LSH with weights
+  async lshUpdate(query, hashFunctions, parameters): Promise<LshData> {
     const response = await fetch('http://127.0.0.1:5000/update', {
       method: 'POST',
       headers: {
@@ -61,7 +73,8 @@ export class ApiService {
     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', {
       method: 'POST',
       headers: {
@@ -73,7 +86,8 @@ export class ApiService {
     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', {
       method: 'POST',
       headers: {
@@ -85,8 +99,8 @@ export class ApiService {
     return await response.json();
   }
 
-  async getAverageWindows(windows): Promise<any> {
-    const response = await fetch('http://127.0.0.1:5000/average', {
+  async getTableInfo(windows): Promise<TableInfoData> {
+    const response = await fetch('http://127.0.0.1:5000/table-info', {
       method: 'POST',
       headers: {
         'Accept': 'application/json',

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

 <div class="container">
-  <div *ngIf="candidates" class="subplot-container">
+  <div *ngIf="show" class="subplot-container">
     <div class="subplot" *ngFor="let subplot of subplots">
       <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
       <div class="button-holder">
@@ -10,8 +10,8 @@
     </div>
   </div>
   <div class="button-holder">
-    <button *ngIf="candidates" (click)="updateQuery()" class="train-button">Query</button>
-    <button *ngIf="candidates" (click)="train()" class="train-button">Train</button>
+    <button *ngIf="show" (click)="updateQuery()" class="train-button">Query</button>
+    <button *ngIf="show" (click)="train()" class="train-button">Train</button>
   </div>
 </div>
 

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

 import { Component, OnInit } from '@angular/core';
-import {CacheService} from '../cache.service';
+import {StateService} from '../state.service';
 
 @Component({
   selector: 'app-labeling-window',
@@ -7,25 +7,26 @@ import {CacheService} from '../cache.service';
   styleUrls: ['./labeling-window.component.css']
 })
 export class LabelingWindowComponent implements OnInit {
-  public topk;
+  public topk: number[];
   public subplots = [];
   public labels: boolean[] = [];
   private k = 12;
 
-  constructor(private service: CacheService) { }
+  constructor(private state: StateService) { }
 
   ngOnInit(): void {
-    this.service.onNewTables.subscribe(() => { this.getTopKSimilar(); });
+    this.state.onNewTable.subscribe(() => this.showSamples());
   }
 
-  public train() {
-    this.service.labels = Object.assign({}, this.service.labels, this.labels);
-    this.service.update();
+  async train() {
+    this.state.labels = Object.assign({}, this.state.labels, this.labels);
+    await this.state.getQueryWindow(this.state.labels);
+    await this.state.update();
   }
 
-  public updateQuery() {
-    this.service.labels = Object.assign({}, this.service.labels, this.labels);
-    this.service.getQueryWindow(this.service.labels);
+  async updateQuery() {
+    this.state.labels = Object.assign({}, this.state.labels, this.labels);
+    await this.state.getQueryWindow(this.state.labels);
   }
 
   public labelCorrect(index: number) {
@@ -42,14 +43,10 @@ export class LabelingWindowComponent implements OnInit {
     this.labels[index] = false;
   }
 
-  async getTopKSimilar() {
-    this.topk = this.service.candidates.slice(0, 12);
-    await this.createPlots();
-  }
-
-  async createPlots() {
+  async showSamples() {
+    this.topk = this.state.lshData.candidates.slice(0, this.k);
     this.subplots = [];
-    const values = await this.service.getWindow(this.topk);
+    const values = await this.state.getWindow(this.topk);
     this.topk.forEach((index, i) => {
       this.subplots.push(
         {
@@ -90,7 +87,7 @@ export class LabelingWindowComponent implements OnInit {
     });
   }
 
-  public get candidates() {
-    return this.service.candidates;
+  public get show() {
+    return !!this.state.lshData;
   }
 }

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

 import { Component, OnInit } from '@angular/core';
-import {CacheService} from '../cache.service';
+import {StateService} from '../state.service';
 
 @Component({
   selector: 'app-labels',
@@ -10,24 +10,25 @@ export class LabelsComponent implements OnInit {
 
   public goodLabels = [];
   public badLabels = [];
-  constructor(private service: CacheService) { }
+
+  constructor(private state: StateService) { }
 
   ngOnInit(): void {
-    this.service.onNewLabels.subscribe(() => { this.createSubplots(); });
+    this.state.onNewLabels.subscribe(() => { this.createSubplots(); });
   }
 
   async createSubplots() {
     this.goodLabels = [];
     this.badLabels = [];
-    const windows = await this.service.getWindow(Object.keys(this.service.labels).map(Number));
-    Object.keys(this.service.labels).forEach((key, i) => {
+    const labelWindows: number[][] = await this.state.getWindow(Object.keys(this.state.labels).map(Number));
+    Object.keys(this.state.labels).forEach((key, i) => {
       const index = Number(key);
       const plot =
         {
           index,
           data: [{
-            x: [...Array(this.service.windowSize).keys()],
-            y: windows[i],
+            x: [...Array(this.state.windowSize).keys()],
+            y: labelWindows[i],
             type: 'line'
           }],
           layout: {
@@ -51,7 +52,7 @@ export class LabelsComponent implements OnInit {
             }
           }
         };
-      if (this.service.labels[key]) {
+      if (this.state.labels[key]) {
         this.goodLabels.push(plot);
       } else {
         this.badLabels.push(plot);

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

 import { Component } from '@angular/core';
-import {CacheService} from '../cache.service';
+import {StateService} from '../state.service';
 
 @Component({
   selector: 'app-main',
@@ -8,18 +8,18 @@ import {CacheService} from '../cache.service';
 })
 export class MainComponent {
 
-  constructor(private service: CacheService) {
+  constructor(private state: StateService) {
   }
 
   changeTab(tab) {
-    this.service.currentTab = tab.index;
+    this.state.currentTab = tab.index;
   }
 
   public get greyOut() {
-    return this.service.querySelectionMode;
+    return this.state.querySelectionMode;
   }
 
   public get loadingProgress(): number {
-    return this.service.loadingProgress;
+    return this.state.loadingProgress;
   }
 }

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

 import {Component, OnInit} from '@angular/core';
-import { CacheService } from '../cache.service';
+import { StateService } from '../state.service';
 import zingchart from 'zingchart/es6';
 
 @Component({
@@ -9,7 +9,7 @@ import zingchart from 'zingchart/es6';
 })
 export class OverviewWindowComponent implements OnInit {
   public config;
-  public id = "overview";
+  public id = 'overview';
   public markers = [];
   public series = [];
   public goodLabels = [];
@@ -18,25 +18,20 @@ export class OverviewWindowComponent implements OnInit {
   public data;
   public layout;
 
-  constructor(private service: CacheService) {
+  constructor(private state: StateService) {
   }
 
   async ngOnInit(): Promise<void> {
-    this.service.onNewData.subscribe(() => this.initializePlot());
-    this.service.onNewTables.subscribe(() => {
-      if (this.service.queryWindow) {
-        this.updatePlot();
-      }
-    });
-    this.service.onNewSlider.subscribe((v) => this.updateCandidates(v));
+    this.state.onNewData.subscribe(() => this.initializePlot());
+    this.state.onNewTable.subscribe(() => this.updatePlot());
   }
 
   async initializePlot() {
+    this.state.queryWindow = undefined;
     this.debugClicked();
-    this.service.queryWindow = undefined;
     this.data = [];
-    for (let i = 0; i < this.service.rawValues.length; i++) {
-      this.data.push([this.service.rawIndices[i], this.service.rawValues[i]]);
+    for (let i = 0; i < this.state.rawData.values.length; i++) {
+      this.data.push([this.state.rawData.index[i], this.state.rawData.values[i]]);
     }
     this.series = [
       {
@@ -68,19 +63,19 @@ export class OverviewWindowComponent implements OnInit {
         zIndex: 20,
       }];
     this.config = {
-      type: "mixed",
+      type: 'mixed',
       preview: {
-        height: "30px",
-        position: "0% 100%",
+        height: '30px',
+        position: '0% 100%',
         'auto-fit': true
       },
-      "plotarea": {
-        "margin-top": "10px",
-        "margin-bottom": "50%"
+      plotarea: {
+        'margin-top': '10px',
+        'margin-bottom': '50%'
       },
       scaleX: {
         zooming: true,
-        zoomTo: [0, this.service.windowSize],
+        zoomTo: [0, this.state.windowSize],
         'auto-fit': true,
         markers: this.markers
       },
@@ -89,99 +84,93 @@ export class OverviewWindowComponent implements OnInit {
       },
       series: this.series
     };
-    console.log("showing plot");
   }
 
   async updatePlot() {
-    console.log('updating plot');
-    if (!this.service.queryWindow) {
-      return;
-    }
     this.goodLabels = [];
     this.badLabels = [];
     this.markers = [];
-    for (const index in this.service.labels) {
-      if (this.service.labels[index]) {
+    for (const index in this.state.labels) {
+      if (this.state.labels[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: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
-          backgroundColor: "#4caf50",
+          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
+          backgroundColor: '#4caf50',
         });
       } else {
         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: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
-          backgroundColor: "#f44336",
+          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
+          backgroundColor: '#f44336',
         });
       }
     }
     this.series[1].values = this.goodLabels;
     this.series[2].values = this.badLabels;
     this.config.scaleX.markers = this.markers;
-    zingchart.exec("zingchart-ng-1", 'setdata', {
+    zingchart.exec('zingchart-ng-1', 'setdata', {
       data: this.config
     });
   }
 
   async updateCandidates(sliderIndex) {
-    console.log("Updating chart");
-    let candidates = [];
-    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
-      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
-    }
-    const labels = [];
-    const markers = [];
-    for (const index of candidates) {
-      labels.push([Number(index) * (12000 / 6), 0]);
-      markers.push({
-        type: 'area',
-        // 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],
-        backgroundColor: "#b1a343",
-      });
-    }
-    const newSeries = this.config.series.slice(0, 3);
-    newSeries.push({
-      type: 'scatter',
-      values: labels,
-      text: 'Similar windows',
-      marker: {
+    // let candidates = [];
+    // for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
+    //   candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
+    // }
+    // const labels = [];
+    // const markers = [];
+    // for (const index of candidates) {
+    //   labels.push([Number(index) * (12000 / 6), 0]);
+    //   markers.push({
+    //     type: 'area',
+    //     // 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],
+    //     backgroundColor: '#b1a343',
+    //   });
+    // }
+    // const newSeries = this.config.series.slice(0, 3);
+    // newSeries.push({
+    //   type: 'scatter',
+    //   values: labels,
+    //   text: 'Similar windows',
+    //   marker: {
+    //     backgroundColor: '#b1a343'