overview-window.component.ts 5.24 KB
Newer Older
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
1
import {Component, OnInit} from '@angular/core';
2
import { CacheService } from '../cache.service';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
3
import zingchart from 'zingchart/es6';
4
5
6
7
8
9

@Component({
  selector: 'app-overview-window',
  templateUrl: './overview-window.component.html',
  styleUrls: ['./overview-window.component.css']
})
10
export class OverviewWindowComponent implements OnInit {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
11
  public config;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
12
  public id = "overview";
13
14
15
16
  public markers = [];
  public series = [];
  public goodLabels = [];
  public badLabels = [];
17
18
19
20

  public data;
  public layout;

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
21
22
  constructor(private service: CacheService) {
  }
23
24

  async ngOnInit(): Promise<void> {
25
    this.service.onNewData.subscribe(() => this.initializePlot());
26
    this.service.onNewTables.subscribe(() => {
27
      if (this.service.queryWindow) {
28
29
30
        this.updatePlot();
      }
    });
31
    this.service.onNewSlider.subscribe((v) => this.updateCandidates(v));
32
33
34
  }

  async initializePlot() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
    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%"
      },
80
      scaleX: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
81
82
        zooming: true,
        zoomTo: [0, this.service.windowSize],
83
        'auto-fit': true,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
84
        markers: this.markers
85
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
86
87
      'scale-y': {
        'auto-fit': true
88
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
89
      series: this.series
90
    };
91
    console.log("showing plot");
92
93
94
  }

  async clicked(clickData) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
95
96
97
98
    if (!this.service.querySelectionMode) {
      return;
    }
    this.service.querySelectionMode = false;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
99
    const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
100
101
      x: clickData.x,
      y: clickData.y
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
102
103
104
    });
    const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
    await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize));
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
105
106
107
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
108
109
110
111
    await this.updatePlot();
  }

  async updatePlot() {
112
    console.log('updating plot');
113
    if (!this.service.queryWindow) {
114
      return;
115
    }
116
117
118
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
119
    for (const index in this.service.labels) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
120
      if (this.service.labels[index]) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
121
        this.goodLabels.push(this.data[index]);
122
123
124
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
125
          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
126
127
          backgroundColor: "#4caf50",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
128
      } else {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
129
        this.badLabels.push(this.data[index]);
130
131
132
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
133
          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
134
135
          backgroundColor: "#f44336",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
136
      }
137
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
138
139
140
141
    this.series[1].values = this.goodLabels;
    this.series[2].values = this.badLabels;
    this.config.scaleX.markers = this.markers;
    zingchart.exec("zingchart-ng-1", 'setdata', {
142
143
      data: this.config
    });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
144
    console.log('querying');
145
    await this.service.getSimilarWindows();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
146
    console.log('done');
147
148
  }

149
150
  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
151
152
153
154
    let candidates = [];
    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    }
155
    const labels = [];
156
    const markers = [];
157
    for (const index of candidates) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
158
      labels.push(this.data[index]);
159
160
161
      markers.push({
        type: 'area',
        // BUG: For some reason the range values are multiplied by 10
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
        range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
163
164
        backgroundColor: "#b1a343",
      });
165
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
166
167
168
169
170
171
172
173
174
175
176
177
178
    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', {
179
180
      data: this.config
    });
181
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
182
183

  zoom(p) {
184
185
186
    if (!p.ev) {
      return;
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
187
    if (p.ev.wheelDelta > 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
188
      zingchart.exec("zingchart-ng-1", 'zoomin');
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
189
    } else if (p.ev.wheelDelta < 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
190
191
192
193
194
195
      zingchart.exec("zingchart-ng-1", 'zoomout');
    }
  }

  doubleClick(e) {
    zingchart.exec("zingchart-ng-1", 'viewall');
196
  }
197
}