overview-window.component.ts 6.67 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
    // Initialize label chart
    this.graphset.push({
39
      id: 'preview',
40
      type: "scatter",
41
42
      x: 0,
      y: 0,
43
      scaleX: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
44
        zooming: true,
45
46
        minValue: 0,
        maxValue: this.service.rawValues[0].length,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
47
        zoomTo: [0, this.service.windowSize],
48
        'auto-fit': true,
49
50
51
52
53
        visible: false,
        guide: {
          visible: false
        }
      },
54
      height: '30px',
55
56
57
58
59
60
61
      scaleY: {
        maxValue: 1,
        minValue: -1,
        visible: false,
        guide: {
          visible: false
        }
62
      },
63
      preview: {
64
65
66
        x: 50,
        y: 10,
        height: '30px',
67
      },
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
      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,
        }
      ]
    });
98
99
100
101
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
    // 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
          }
        }]
      });
    });
136
    zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
137
      if (e.graphid !== `zingchart-ng-1-graph-preview`) {
138
139
        return;
      }
140
      for (let i = 1; i < this.graphset.length; i ++) {
141
142
143
144
145
146
147
148
        this.chart.zoomto({
          graphid: i,
          xmin: e.xmin,
          xmax: e.xmax
        });
      }
    });
    this.config = {
149
      layout: `${this.graphset.length}x1`,
150
      graphset: this.graphset
151
    };
152
    console.log(this.config);
153
    console.log("showing plot");
154
155
156
  }

  async clicked(clickData) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
157
158
159
160
    if (!this.service.querySelectionMode) {
      return;
    }
    this.service.querySelectionMode = false;
161
    const xyInformation = JSON.parse(this.chart.getxyinfo({
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
163
      x: clickData.x,
      y: clickData.y
164
165
    }));
    console.log(xyInformation);
166
    const index = Math.floor(xyInformation[8].nodeidx / this.service.stepSize);
167
    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
168
169
170
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
171
172
173
174
    await this.updatePlot();
  }

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