Hacky way of displaying multiple plots with preview

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

@@ -21,6 +21,12 @@ 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};

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,9 +56,10 @@ export class CacheService {
   }
 
   async getRawData(): Promise<void> {
-    const rawData: RawData = await this.api.readFile();
-    this.rawIndices = rawData.index;
-    this.rawValues = rawData.values;
+    const channels = await this.api.readMtsFile();
+    console.log(channels);
+    this.rawIndices = channels.map((channel) => channel.index);
+    this.rawValues = channels.map((channel) => channel.values);
     this.onNewData.emit();
   }
 

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

@@ -85,8 +85,8 @@ export class LabelingWindowComponent implements OnInit {
         {
           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),
+            x: [...Array(this.service.windowSize).keys()],
+            y: this.service.rawValues[0].slice(window.index, window.index + this.service.windowSize),
             type: 'line'
           }],
           layout: {

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

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

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

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

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

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

AngularApp/prototype/src/app/progress-view/progress-view.component.ts

@@ -139,6 +139,6 @@ export class ProgressViewComponent implements OnInit {
   }
 
   public get amountOfCandidates() {
-    return this.similarity[this._sliderValue.toString()].length;
+    return 1; // this.similarity[this._sliderValue.toString()].length;
   }
 }

Flaskserver/.idea/workspace.xml

@@ -2,8 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.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/overview-window/overview-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" 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" />
@@ -16,8 +18,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="2448">
-              <caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" />
+            <state relative-caret-position="-3340">
+              <caret line="62" column="36" selection-start-line="62" selection-start-column="36" selection-end-line="62" selection-end-column="36" />
               <folding>
                 <element signature="e#0#41#0" expanded="true" />
               </folding>
@@ -57,7 +59,7 @@
       </list>
     </option>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6">
+  <component name="ProjectFrameBounds" extendedState="7">
     <option name="x" value="-11" />
     <option name="y" value="-11" />
     <option name="width" value="1890" />
@@ -142,12 +144,12 @@
       <workItem from="1599487808817" duration="1192000" />
       <workItem from="1599578907139" duration="8436000" />
       <workItem from="1599661275060" duration="1249000" />
-      <workItem from="1600001984238" duration="5154000" />
+      <workItem from="1600001984238" duration="8284000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="99210000" />
+    <option name="totallyTimeSpent" value="102340000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
@@ -209,8 +211,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/main.py">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2448">
-          <caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" />
+        <state relative-caret-position="-3340">
+          <caret line="62" column="36" selection-start-line="62" selection-start-column="36" selection-end-line="62" selection-end-column="36" />
           <folding>
             <element signature="e#0#41#0" expanded="true" />
           </folding>

Flaskserver/main.py

@@ -39,6 +39,34 @@ def read_data():
     response = jsonify(response)
     return response
 
+@app.route('/read-mts-data', methods=['GET'])
+def read_mts_data():
+    filename = 'data.pkl'
+    if (not os.path.isfile(filename)):
+        print("start")
+        df = dd.read_csv("NW_Ground_Stations_2016.csv", usecols=['number_sta', 'date', 't'])
+        print("read file")
+        df = df.loc[df['number_sta'] == 14066001]
+        print("split rows")
+        df = df.compute()
+        df.to_pickle(filename)
+        print("to_pandas")
+    df = pd.read_pickle(filename)
+    df.dropna(subset=['t'], inplace=True)
+    response = [
+        {
+            "index": df.loc[:, 'date'].iloc[0:int(len(df.index)/2)].values.astype(str).tolist(),
+            "values": df.loc[:, 't'].iloc[0:int(len(df.index)/2)].values.tolist()
+        },
+        {
+            "index": df.loc[:, 'date'].iloc[int(len(df.index)/2):len(df.index)].values.astype(str).tolist(),
+            "values": df.loc[:, 't'].iloc[int(len(df.index)/2):len(df.index)].values.tolist()
+        }
+    ]
+    print("response ready")
+    response = orjson.dumps(response)
+    return response
+
 @app.route('/create-windows', methods=['POST'])
 def create_windows():
     t0 = time()