overview-window.component.ts 6.7 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
      series: [
        {
          type: 'scatter',
          values: [],
          text: 'Good labels',
          marker: {
            backgroundColor: '#4caf50'
          },
76
          zIndex: 3,
77
78
79
80
81
82
83
84
        },
        {
          type: 'scatter',
          values: [],
          text: 'Bad labels',
          marker: {
            backgroundColor: '#f44336'
          },
85
          zIndex: 2,
86
87
88
89
90
91
92
93
        },
        {
          type: 'scatter',
          values: [],
          text: 'Candidates',
          marker: {
            backgroundColor: '#b1a343'
          },
94
          zIndex: 1,
95
96
97
        }
      ]
    });
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.map((channel) => channel.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), -1]);
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
    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;
207
        channel.series[2].values = [];
208
209
210
      }
    }
    this.chart.setdata({
211
212
213
      data: this.config
    });
    await this.service.getSimilarWindows();
214
215
  }

216
217
  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
218
219
220
221
    let candidates = [];
    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    }
222
    const labels = [];
223
    const markers = [];
224
    for (const index of candidates) {
225
      labels.push([Number(index), 1]);
226
227
228
      markers.push({
        type: 'area',
        // BUG: For some reason the range values are multiplied by 10
229
        range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10],
230
231
        backgroundColor: "#b1a343",
      });
232
    }
233
234
    for (const channel of this.config.graphset) {
      if (channel.type === 'line') {
235
        channel.scaleX.markers = channel.scaleX.markers.concat(markers);
236
      } else {
237
        channel.series[2].values = labels;
238
239
240
      }
    }
    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
}