Revert MTS changes

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

@@ -21,12 +21,6 @@ export class ApiService {
     return {index, values};
   }
 
-  // Read input data
-  async readMtsFile(): Promise<any> {
-    const response = await fetch('http://127.0.0.1:5000/read-mts-data');
-    return await response.json();
-  }
-
 // Split data into windows and normalize
   async createWindows(parameters): Promise<any> {
     const postData = {parameters};
@@ -41,20 +35,6 @@ export class ApiService {
     return await response.json();
   }
 
-  // Split data into windows and normalize
-  async createMtsWindows(parameters): Promise<any> {
-    const postData = {parameters};
-    const response = await fetch('http://127.0.0.1:5000/create-mts-windows', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(postData)
-    });
-    return await response.json();
-  }
-
 // Generate LSH-tables by hashing each window
   async createTables(parameters): Promise<any> {
     console.log("creating tables");
@@ -70,21 +50,6 @@ export class ApiService {
     return await response.json();
   }
 
-  // Generate LSH-tables by hashing each window
-  async createMtsTables(parameters): Promise<any> {
-    console.log("creating tables");
-    const postData = {parameters};
-    const response = await fetch('http://127.0.0.1:5000/create-mts-tables', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: new Blob( [ JSON.stringify(postData) ], { type: 'text/plain' } )
-    });
-    return await response.json();
-  }
-
   async getQueryWindow(window) {
     const response = await fetch('http://127.0.0.1:5000/query', {
       method: 'POST',

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

@@ -5,8 +5,8 @@ import {ApiService, RawData} from './api.service';
   providedIn: 'root'
 })
 export class CacheService {
-  public rawValues: number[][];
-  public rawIndices: string[][];
+  public rawValues: number[];
+  public rawIndices: string[];
   public loadingProgress: number = 0;
 
   private _currentTab: number;
@@ -56,20 +56,19 @@ export class CacheService {
   }
 
   async getRawData(): Promise<void> {
-    const channels = await this.api.readMtsFile();
-    console.log(channels);
-    this.rawIndices = channels.map((channel) => channel.index);
-    this.rawValues = channels.map((channel) => channel.values);
+    const rawData: RawData = await this.api.readFile();
+    this.rawIndices = rawData.index;
+    this.rawValues = rawData.values;
     this.onNewData.emit();
   }
 
   async createWindows(): Promise<void> {
-    await this.api.createMtsWindows(this.parameters);
+    await this.api.createWindows(this.parameters);
     this.onNewWindows.emit();
   }
 
   async createTables(): Promise<void> {
-    this.tables = await this.api.createMtsTables(this.parameters);
+    this.tables = await this.api.createTables(this.parameters);
   }
 
   async getSimilarWindows(): Promise<any> {

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

@@ -2,7 +2,6 @@
   margin-right: 20px;
   display: flex;
   justify-content: center;
-  border-right: groove;
 }
 
 .subplot-container {

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

@@ -78,66 +78,45 @@ export class LabelingWindowComponent implements OnInit {
         }
     }
     this.topk = topk;
+
     this.subplots = [];
-    for (const windowIndex of this.topk) {
-      const window = this.service.rawValues.map((channel) => channel.slice(windowIndex.index, windowIndex.index + this.service.windowSize));
-      const data = [];
-      window.forEach((channel, index) => {
-        data.push({
-          x: [...Array(channel.length).keys()],
-          y: channel,
-          type: 'line',
-          xaxis: 'x',
-          yaxis: `y${index + 2}`,
-        });
-      });
-      const subplots = [];
-      window.forEach((channel, index) => {
-        subplots.push([`xy${index + 2}`]);
-      });
-      const plot = {
-        index: windowIndex.index,
-        data: data,
-        layout: {
-          grid: {
-            rows: this.service.queryWindow.length,
-            columns: 1,
-            subplots: subplots,
-          },
-          showlegend: false,
-          title: `Index: ${windowIndex.index.toString()}      Similarity: ${windowIndex.frequency.toString()}%`,
-          hovermode: 'closest',
-          autosize: true,
-          margin: {
-            l: 30,
-            r: 30,
-            t: 30,
-            b: 0,
-            pad: 4
-          },
-          height: 300,
-          width: 150,
-          titlefont: {
-            size: 9
-          },
-          xaxis: {
-            showgrid: false,
-            zeroline: false,
-            showticklabels: false,
-          },
-          yaxis: {
-            zeroline: false,
-            showticklabels: false,
+    for (const window of this.topk) {
+      this.subplots.push(
+        {
+          index: window.index,
+          data: [{
+            x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize),
+            y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize),
+            type: 'line'
+          }],
+          layout: {
+            title: `Index: ${window.index.toString()}      Similarity: ${window.frequency.toString()}%`,
+            hovermode: 'closest',
+            autosize: true,
+            margin: {
+              l: 30,
+              r: 30,
+              t: 30,
+              b: 0,
+              pad: 4
+            },
+            height: 150,
+            width: 150,
+            titlefont: {
+              size: 9
+            },
+            xaxis: {
+              showgrid: false,
+              zeroline: false,
+              showticklabels: false,
+            },
+            yaxis: {
+              zeroline: false,
+              showticklabels: false,
+            }
           }
         }
-      };
-      window.forEach((channel, index) => {
-        plot.layout[`yaxis${index + 2}`] = {
-          zeroline: false,
-          showticklabels: false,
-        };
-      });
-      this.subplots.push(plot);
+      );
     }
   }
 }

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

@@ -25,8 +25,8 @@ export class LabelsComponent implements OnInit {
         {
           index,
           data: [{
-            x: [...Array(this.service.windowSize).keys()],
-            y: this.service.rawValues[0].slice(index, index + this.service.windowSize),
+            x: this.service.rawIndices.slice(index, index + this.service.windowSize),
+            y: this.service.rawValues.slice(index, index + this.service.windowSize),
             type: 'line'
           }],
           layout: {

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

-<zingchart-angular #chart [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="300"></zingchart-angular>
-<div id="test"></div>
+<zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>

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

-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { CacheService } from '../cache.service';
 import zingchart from 'zingchart/es6';
 
@@ -9,13 +9,11 @@ import zingchart from 'zingchart/es6';
 })
 export class OverviewWindowComponent implements OnInit {
   public config;
-  public graphset = [];
   public id = "overview";
   public markers = [];
   public series = [];
   public goodLabels = [];
   public badLabels = [];
-  @ViewChild('chart') chart;
 
   public data;
   public layout;
@@ -34,122 +32,62 @@ export class OverviewWindowComponent implements OnInit {
   }
 
   async initializePlot() {
-    // Initialize label chart
-    this.graphset.push({
-      id: 'preview',
-      type: "scatter",
-      x: 0,
-      y: 0,
+    this.service.queryWindow = undefined;
+    this.data = [];
+    for (let i = 0; i < this.service.rawValues.length; 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 = {
+      type: "mixed",
+      preview: {
+        height: "30px",
+        position: "0% 100%",
+        'auto-fit': true
+      },
+      "plotarea": {
+        "margin-top": "10px",
+        "margin-bottom": "50%"
+      },
       scaleX: {
         zooming: true,
-        minValue: 0,
-        maxValue: this.service.rawValues[0].length,
         zoomTo: [0, this.service.windowSize],
         'auto-fit': true,
-        visible: false,
-        guide: {
-          visible: false
-        }
+        markers: this.markers
       },
-      height: '30px',
-      scaleY: {
-        maxValue: 1,
-        minValue: -1,
-        visible: false,
-        guide: {
-          visible: false
-        }
-      },
-      preview: {
-        x: 50,
-        y: 10,
-        height: '30px',
+      'scale-y': {
+        'auto-fit': true
       },
-      series: [
-        {
-          type: 'scatter',
-          values: [],
-          text: 'Good labels',
-          marker: {
-            backgroundColor: '#4caf50'
-          },
-          zIndex: 3,
-        },
-        {
-          type: 'scatter',
-          values: [],
-          text: 'Bad labels',
-          marker: {
-            backgroundColor: '#f44336'
-          },
-          zIndex: 2,
-        },
-        {
-          type: 'scatter',
-          values: [],
-          text: 'Candidates',
-          marker: {
-            backgroundColor: '#b1a343'
-          },
-          zIndex: 1,
-        }
-      ]
-    });
-    // Initialize channels
-    this.service.rawValues.forEach((channel, index) => {
-      const data = [];
-      for (let i = 0; i < channel.length; i++) {
-        data.push([i, channel[i]]);
-      }
-      this.graphset.push({
-        id: index,
-        x: 0,
-        y: `${75 * index + 50}px`,
-        type: 'line',
-        height: '50px',
-        scaleX: {
-          zooming: true,
-          zoomTo: [0, this.service.windowSize],
-          markers: []
-        },
-        'scale-y': {
-          zooming: false,
-          'auto-fit': true
-        },
-        plotarea: {
-          height: '50px',
-          'margin-top': '0px',
-          'margin-bot': '0px'
-        },
-        series: [{
-          type: 'line',
-          values: data,
-          text: 'Raw Values',
-          zIndex: 5,
-          marker: {
-            alpha: 0.0,
-            zIndex: 10
-          }
-        }]
-      });
-    });
-    zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
-      if (e.graphid !== `zingchart-ng-1-graph-preview`) {
-        return;
-      }
-      for (let i = 1; i < this.graphset.length; i ++) {
-        this.chart.zoomto({
-          graphid: i,
-          xmin: e.xmin,
-          xmax: e.xmax
-        });
-      }
-    });
-    this.config = {
-      layout: `${this.graphset.length}x1`,
-      graphset: this.graphset
+      series: this.series
     };
-    console.log(this.config);
     console.log("showing plot");
   }
 
@@ -158,13 +96,12 @@ export class OverviewWindowComponent implements OnInit {
       return;
     }
     this.service.querySelectionMode = false;
-    const xyInformation = JSON.parse(this.chart.getxyinfo({
+    const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
       x: clickData.x,
       y: clickData.y
-    }));
-    console.log(xyInformation);
-    const index = Math.floor(xyInformation[8].nodeidx / this.service.stepSize);
-    await this.service.getQueryWindow(this.service.rawValues.map((channel) => channel.slice(index, index + this.service.windowSize)));
+    });
+    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;
@@ -181,36 +118,32 @@ export class OverviewWindowComponent implements OnInit {
     this.markers = [];
     for (const index in this.service.labels) {
       if (this.service.labels[index]) {
-        this.goodLabels.push([Number(index), 0]);
+        this.goodLabels.push(this.data[index]);
         this.markers.push({
           type: 'area',
           // BUG: For some reason the range values are multiplied by 10
-          range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
+          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
           backgroundColor: "#4caf50",
         });
       } else {
-        this.badLabels.push([Number(index), -1]);
+        this.badLabels.push(this.data[index]);
         this.markers.push({
           type: 'area',
           // BUG: For some reason the range values are multiplied by 10
-          range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
+          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
           backgroundColor: "#f44336",
         });
       }
     }
-    for (const channel of this.config.graphset) {
-      if (channel.type === 'line') {
-        channel.scaleX.markers = this.markers;
-      } else {
-        channel.series[0].values = this.goodLabels;
-        channel.series[1].values = this.badLabels;
-        channel.series[2].values = [];
-      }
-    }
-    this.chart.setdata({
+    this.series[1].values = this.goodLabels;
+    this.series[2].values = this.badLabels;
+    this.config.scaleX.markers = this.markers;
+    zingchart.exec("zingchart-ng-1", 'setdata', {
       data: this.config
     });
+    console.log('querying');
     await this.service.getSimilarWindows();
+    console.log('done');
   }
 
   async updateCandidates(sliderIndex) {
@@ -222,22 +155,27 @@ export class OverviewWindowComponent implements OnInit {
     const labels = [];
     const markers = [];
     for (const index of candidates) {
-      labels.push([Number(index), 1]);
+      labels.push(this.data[index]);
       markers.push({
         type: 'area',
         // BUG: For some reason the range values are multiplied by 10
-        range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
+        range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
         backgroundColor: "#b1a343",
       });
     }
-    for (const channel of this.config.graphset) {
-      if (channel.type === 'line') {
-        channel.scaleX.markers = channel.scaleX.markers.concat(markers);
-      } else {
-        channel.series[2].values = labels;
-      }
-    }
-    this.chart.setdata({
+    const newSeries = this.config.series.slice(0, 3);
+    newSeries.push({
+      type: 'scatter',
+      values: labels,
+      text: 'Similar windows',
+      marker: {
+        backgroundColor: '#b1a343'
+      },
+      zIndex: 20,
+    });
+    this.config.series = newSeries;
+    this.config.scaleX.markers = this.markers.concat(markers);
+    zingchart.exec("zingchart-ng-1", 'setdata', {
       data: this.config
     });
   }
@@ -247,16 +185,13 @@ export class OverviewWindowComponent implements OnInit {
       return;
     }
     if (p.ev.wheelDelta > 0) {
-      for (let i = 0; i < this.graphset.length; i ++) {
-        this.chart.zoomin({
-          graphid: i
-        });
-      }
+      zingchart.exec("zingchart-ng-1", 'zoomin');
     } else if (p.ev.wheelDelta < 0) {
-      for (let i = 0; i < this.graphset.length; i ++) {
-        this.chart.zoomout({
-          graphid: i
-        });
-      }    }
+      zingchart.exec("zingchart-ng-1", 'zoomout');
+    }
+  }
+
+  doubleClick(e) {
+    zingchart.exec("zingchart-ng-1", 'viewall');
   }
 }

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

@@ -21,29 +21,14 @@ export class QueryWindowComponent implements OnInit {
   }
 
   initializePlot(): void {
-    const data = [];
-    this.service.queryWindow.forEach((channel, index) => {
-      data.push({
-        x: [...Array(channel.length).keys()],
-        y: channel,
-        type: 'line',
-        xaxis: 'x',
-        yaxis: `y${index + 2}`,
-      });
-    });
-    const subplots = [];
-    this.service.queryWindow.forEach((channel, index) => {
-      subplots.push([`xy${index + 2}`]);
-    });
-    const plot =
+    this.plot =
       {
-        data: data,
+        data: [{
+          x: [...Array(this.service.queryWindow.length).keys()],
+          y: this.service.queryWindow,
+          type: 'line'
+        }],
         layout: {
-          grid: {
-            rows: this.service.queryWindow.length,