Use tabs and store labeled indices

AngularApp/prototype/src/app/app.component.html

-<div style="display: flex">
-  <div style="width: 70%">
-    <app-settings></app-settings>
-    <app-overview-window></app-overview-window>
+<app-overview-window></app-overview-window>
+<mat-tab-group animationDuration="0ms">
+  <mat-tab label="Query">
+    <app-query-window></app-query-window>
+  </mat-tab>
+  <mat-tab label="Samples">
     <app-labeling-window></app-labeling-window>
-  </div>
-  <div style="width: 30%">
+  </mat-tab>
+  <mat-tab label="Hashtables">
     <app-table-overview></app-table-overview>
-  </div>
-</div>
+  </mat-tab>
+  <mat-tab label="Labeled data">
+    <app-labels></app-labels>
+  </mat-tab>
+  <mat-tab label="Settings">
+    <app-settings></app-settings>
+  </mat-tab>
+</mat-tab-group>

AngularApp/prototype/src/app/app.module.ts

@@ -12,6 +12,8 @@ import { LabelingWindowComponent } from './labeling-window/labeling-window.compo
 import { TableOverviewComponent } from './table-overview/table-overview.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatTabsModule} from '@angular/material/tabs';
+import { LabelsComponent } from './labels/labels.component';
+import { QueryWindowComponent } from './query-window/query-window.component';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -22,6 +24,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
     OverviewWindowComponent,
     LabelingWindowComponent,
     TableOverviewComponent,
+    LabelsComponent,
+    QueryWindowComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -7,16 +7,20 @@ import {ApiService, RawData} from './api.service';
 export class CacheService {
   public rawValues: number[];
   public rawIndices: string[];
-  public windows: number[][];
-  public hashFunctions;
-  public tables;
-  public windowSimilarity;
+
+  public _windows: number[][];
+  private _query = undefined;
+  public _labels = {};
+  public _tables;
+  public _windowSimilarity;
 
   public windowSize = 20;
   public nrOfTables = 10;
   public hashSize = 10;
 
-  public onQuery: EventEmitter<void> = new EventEmitter<void>();
+  public onNewSimilarity: EventEmitter<void> = new EventEmitter<void>();
+  public onNewLabels: EventEmitter<void> = new EventEmitter<void>();
+  public onNewQuery: EventEmitter<void> = new EventEmitter<void>();
   public onNewTables: EventEmitter<void> = new EventEmitter<void>();
   public onNewWindows: EventEmitter<void> = new EventEmitter<void>();
 
@@ -47,25 +51,66 @@ export class CacheService {
 
   async getWindows(): Promise<void> {
     this.windows = await this.api.createWindows(this.rawValues, this.parameters);
-    this.onNewWindows.emit();
   }
 
   async createTables(): Promise<void> {
     this.tables = await this.api.createTables(this.windows, this.parameters);
-    this.onNewTables.emit();
   }
 
   async getSimilarWindows(window): Promise<any> {
     this.windowSimilarity = await this.api.getSimilarWindows(window, this.tables);
-    this.onQuery.emit();
     return this.windowSimilarity;
   }
 
-  async updateTables(labeldata): Promise<void> {
-    this.tables = await this.api.updateTables(this.windows, labeldata, this.tables, this.parameters);
+  async updateTables(): Promise<void> {
+    this.tables = await this.api.updateTables(this.windows, this.labels, this.tables, this.parameters);
+  }
+
+  public set query(v) {
+    this._query = v;
+    this.onNewQuery.emit();
+  }
+
+  public get query(): number {
+    return this._query;
+  }
+
+  public set windows(v) {
+    this._windows = v;
+    this.onNewWindows.emit();
+  }
+
+  public get windows(): number[][] {
+    return this._windows;
+  }
+
+  public set tables(v) {
+    this._tables = v;
     this.onNewTables.emit();
   }
 
+  public get tables() {
+    return this._tables;
+  }
+
+  public set labels(v) {
+    this._labels = v;
+    this.onNewLabels.emit();
+  }
+
+  public get labels() {
+    return this._labels;
+  }
+
+  public set windowSimilarity(v) {
+    this._windowSimilarity = v;
+    this.onNewSimilarity.emit();
+  }
+
+  public get windowSimilarity() {
+    return this._windowSimilarity;
+  }
+
   public get parameters(): {[parameter: string]: any} {
     return {
       windowsize: this.windowSize,

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

@@ -3,6 +3,11 @@
   width: 150px;
 }
 
+.subplot-container {
+  display: flex;
+  overflow: auto;
+}
+
 button {
   padding: 0 20px;
 }

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

-<div *ngIf="windowSimilarity" style="display: flex">
+<div *ngIf="windowSimilarity" 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">

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

@@ -15,11 +15,12 @@ export class LabelingWindowComponent implements OnInit {
   constructor(private service: CacheService) { }
 
   ngOnInit(): void {
-    this.service.onQuery.subscribe(() => { this.getTopKSimilar(); });
+    this.service.onNewSimilarity.subscribe(() => { this.getTopKSimilar(); });
   }
 
   public changeTables() {
-    this.service.updateTables(this.labels);
+    this.service.labels = Object.assign({}, this.service.labels, this.labels);
+    this.service.updateTables();
   }
 
   public get windowSimilarity() {
@@ -42,6 +43,9 @@ export class LabelingWindowComponent implements OnInit {
 
   public getTopKSimilar() {
     this.labels = [];
+    if (!this.windowSimilarity) {
+      return;
+    }
     let topk = [];
     let k = this.k;
     const keys = Object.keys(this.windowSimilarity).map(a => Number(a)).sort((a, b) => b - a);
@@ -62,10 +66,6 @@ export class LabelingWindowComponent implements OnInit {
 
     this.subplots = [];
     for (const window of this.topk) {
-      console.log(this.service.rawValues);
-      console.log(window.index);
-      console.log(this.service.windowSize);
-      console.log(this.service.rawValues.slice(window.index, window.index + this.service.windowSize));
       this.subplots.push(
         {
           index: window.index,
@@ -93,7 +93,5 @@ export class LabelingWindowComponent implements OnInit {
         }
       );
     }
-    console.log(this.topk);
-    console.log(this.subplots);
   }
 }

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

+.subplot {
+  margin-right: 20px;
+  width: 150px;
+}
+
+.good-labels {
+  padding: 5px;
+  display: flex;
+  overflow: auto;
+  background-color: rgba(76, 175, 80, 0.5);
+}
+
+.bad-labels {
+  padding: 5px;
+  display: flex;
+  overflow: auto;
+  background-color: rgba(244, 67, 54, 0.5);
+}

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

+<div class="good-labels" *ngIf="goodLabels.length > 0">
+  <div class="subplot" *ngFor="let subplot of goodLabels">
+    <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
+  </div>
+</div>
+<div class="bad-labels" *ngIf="badLabels.length > 0">
+  <div class="subplot" *ngFor="let subplot of badLabels">
+    <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
+  </div>
+</div>

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

+import { Component, OnInit } from '@angular/core';
+import {CacheService} from '../cache.service';
+
+@Component({
+  selector: 'app-labels',
+  templateUrl: './labels.component.html',
+  styleUrls: ['./labels.component.css']
+})
+export class LabelsComponent implements OnInit {
+
+  public goodLabels = [];
+  public badLabels = [];
+  constructor(private service: CacheService) { }
+
+  ngOnInit(): void {
+    this.service.onNewLabels.subscribe(() => { this.createSubplots(); });
+  }
+
+  createSubplots(): void {
+    this.goodLabels = [];
+    this.badLabels = [];
+    console.log(this.service.labels);
+    for (const key of Object.keys(this.service.labels)) {
+      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),
+            type: 'line'
+          }],
+          layout: {
+            title: `Index: ${index.toString()}`,
+            hovermode: 'closest',
+            autosize: true,
+            margin: {
+              l: 30,
+              r: 30,
+              t: 30,
+              pad: 4
+            },
+            height: 200,
+            width: 150,
+            titlefont: {
+              size: 9
+            },
+          }
+        };
+      if (this.service.labels[key]) {
+        this.goodLabels.push(plot);
+      } else {
+        this.badLabels.push(plot);
+      }
+    }
+  }
+
+}

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

@@ -11,7 +11,6 @@ export class OverviewWindowComponent implements OnInit {
   public defaultColors: string[] = [];
   public defaultSizes: number[] = [];
   public defaultOpacity: number[] = [];
-  public selectedIndex: number;
   public showPlot = false;
 
   public data;
@@ -22,14 +21,14 @@ export class OverviewWindowComponent implements OnInit {
   async ngOnInit(): Promise<void> {
     this.service.onNewWindows.subscribe(() => { this.initializePlot(); });
     this.service.onNewTables.subscribe(() => {
-      if (this.selectedIndex) {
+      if (this.service.query) {
         this.updatePlot();
       }
     });
   }
 
   async initializePlot() {
-    this.selectedIndex = undefined;
+    this.service.query = undefined;
     for (const _ of this.service.rawValues) {
       this.defaultColors.push('#a3a7e4');
       this.defaultSizes.push(5);
@@ -55,14 +54,16 @@ export class OverviewWindowComponent implements OnInit {
         pad: 4
       },
       height: 200,
-      width: screen.width * 0.7
     };
     this.showPlot = true;
   }
 
   async clicked(clickData) {
     for (const point of clickData.points) {
-      this.selectedIndex = point.pointNumber;
+      this.service.query = point.pointNumber;
+      const temp = {};
+      temp[point.pointNumber] = true;
+      this.service.labels = temp;
     }
     await this.updatePlot();
   }
@@ -72,7 +73,7 @@ export class OverviewWindowComponent implements OnInit {
     const sizes: number[]  = [];
     const opacity: number[]  = [];
 
-    const windowSimilarity = await this.service.getSimilarWindows(this.service.windows[this.selectedIndex]);
+    const windowSimilarity = await this.service.getSimilarWindows(this.service.windows[this.service.query]);
     for (const frequency in windowSimilarity){
       for (const index of windowSimilarity[frequency]) {
         colors[index] = this.getColor(Number(frequency) / this.service.nrOfTables);

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

+<div *ngIf="!query">
+  Select a point in the data to start the similarity search.
+</div>
+<div *ngIf="query">
+  <plotly-plot [data]="plot.data" [layout]="plot.layout"></plotly-plot>
+</div>

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

+import { Component, OnInit } from '@angular/core';
+import {CacheService} from '../cache.service';
+
+@Component({
+  selector: 'app-query-window',
+  templateUrl: './query-window.component.html',
+  styleUrls: ['./query-window.component.css']
+})
+export class QueryWindowComponent implements OnInit {
+
+  public plot;
+
+  constructor(private service: CacheService) { }
+
+  ngOnInit(): void {
+    this.service.onNewQuery.subscribe(() => {
+      if (this.service.query) {
+        this.initializePlot();
+      }
+    });
+  }
+
+  initializePlot(): void {
+    this.plot =
+      {
+        index: this.service.query,
+        data: [{
+          x: this.service.rawIndices.slice(this.service.query, this.service.query + this.service.windowSize),
+          y: this.service.rawValues.slice(this.service.query, this.service.query + this.service.windowSize),
+          type: 'line'
+        }],
+        layout: {
+          title: `Index: ${this.service.query.toString()}`,
+          hovermode: 'closest',
+          autosize: true,
+          margin: {
+            l: 30,
+            r: 30,
+            t: 30,
+            pad: 4
+          },
+          height: 200,
+          width: 150,
+          titlefont: {
+            size: 9
+          },
+        }
+      };
+  }
+
+  get query(): number {
+    return this.service.query;
+  }
+}

AngularApp/prototype/src/app/table-overview/table-overview.component.css

 .window {
-  width: 450px;
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }

Flaskserver/.idea/workspace.xml

@@ -3,8 +3,14 @@
   <component name="ChangeListManager">
     <list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -17,8 +23,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/main.py">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1080">
-              <caret line="142" column="43" lean-forward="true" selection-start-line="142" selection-start-column="43" selection-end-line="142" selection-end-column="43" />
+            <state relative-caret-position="227">
+              <caret line="106" column="25" selection-start-line="106" selection-start-column="25" selection-end-line="106" selection-end-column="25" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
               </folding>
@@ -38,7 +44,7 @@
       </list>
     </option>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6">
+  <component name="ProjectFrameBounds" extendedState="7">
     <option name="x" value="12" />
     <option name="y" value="-36" />
     <option name="width" value="1890" />
@@ -116,17 +122,18 @@
       <workItem from="1594494759659" duration="1411000" />
       <workItem from="1594589515579" duration="1044000" />
       <workItem from="1594719112139" duration="10388000" />
+      <workItem from="1595247298901" duration="1773000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="16749000" />