overview-window.component.ts 6.73 KB
Newer Older
1
import {Component, OnInit, ViewChild} 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;
12
  public graphset = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
13
  public id = "overview";
14
15
16
17
  public markers = [];
  public series = [];
  public goodLabels = [];
  public badLabels = [];
18
  @ViewChild('chart') chart;
19
20
21
22

  public data;
  public layout;

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

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

  async initializePlot() {
37
38
39
40
41
42
43
    // 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({
44
        type: 'line',
45
46
47
48
49
50
51
        // zoom: {
        //   shared: true
        // },
        plotarea: {
          "margin-top": "10px",
          "margin-bottom": "0px",
          height: '50px',
52
        },
53
54
55
56
        scaleX: {
          zooming: true,
          zoomTo: [0, this.service.windowSize],
          markers: []
57
        },
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
        '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,
      // },
80
      scaleX: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
81
        zooming: true,
82
83
        minValue: 0,
        maxValue: this.service.rawValues[0].length,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
84
        zoomTo: [0, this.service.windowSize],
85
        'auto-fit': true,
86
87
88
89
90
91
92
93
94
95
96
97
        visible: false,
        guide: {
          visible: false
        }
      },
      scaleY: {
        maxValue: 1,
        minValue: -1,
        visible: false,
        guide: {
          visible: false
        }
98
      },
99
100
101
      preview: {
        height: "30px",
        position: "0% 20%",
102
      },
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
      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
148
    };
149
    console.log(this.config);
150
    console.log("showing plot");
151
152
153
  }

  async clicked(clickData) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
154
155
156
157
    if (!this.service.querySelectionMode) {
      return;
    }
    this.service.querySelectionMode = false;
158
    const xyInformation = JSON.parse(this.chart.getxyinfo({
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
159
160
      x: clickData.x,
      y: clickData.y
161
162
163
    }));
    console.log(xyInformation);
    console.log(xyInformation[2]);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
164
    const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
165
166
    console.log(index);
    await this.service.getQueryWindow(this.service.rawValues[0].slice(index, index + this.service.windowSize));
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
167
168
169
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
170
171
172
173
    await this.updatePlot();
  }

  async updatePlot() {
174
    console.log('updating plot');
175
    if (!this.service.queryWindow) {
176
      return;
177
    }
178
179
180
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
181
    for (const index in this.service.labels) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
182
      if (this.service.labels[index]) {
183
        this.goodLabels.push([Number(index), 0]);
184
185
186
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
187
          range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
188
189
          backgroundColor: "#4caf50",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
190
      } else {
191
        this.badLabels.push([Number(index), 0]);
192
193
194
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
195
          range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
196
197
          backgroundColor: "#f44336",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
198
      }
199
    }
200
201
202
203
204
205
206
207
208
    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({
209
210
211
212
      data: this.config
    });
    await this.service.getSimilarWindows();
    console.log('done');
213
214
  }

215
216
  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
217
218
219
220
    let candidates = [];
    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    }
221
    const labels = [];
222
    const markers = [];
223
    for (const index of candidates) {
224
      labels.push([Number(index), 0]);
225
226
227
      markers.push({
        type: 'area',
        // BUG: For some reason the range values are multiplied by 10
228
        range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
229
230
        backgroundColor: "#b1a343",
      });
231
    }
232
233
234
235
236
237
238
239
240
    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({
241
242
      data: this.config
    });
243
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
244
245

  zoom(p) {
246
247
248
    if (!p.ev) {
      return;
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
249
    if (p.ev.wheelDelta > 0) {
250
251
252
253
254
      for (let i = 0; i < this.graphset.length; i ++) {
        this.chart.zoomin({
          graphid: i
        });
      }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
255
    } else if (p.ev.wheelDelta < 0) {
256
257
258
259
260
      for (let i = 0; i < this.graphset.length; i ++) {
        this.chart.zoomout({
          graphid: i
        });
      }    }
261
262
263
  }

  doubleClick(e) {
264
    this.chart.viewall();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
265
  }
266
}