overview-window.component.ts 13.3 KB
Newer Older
1
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
2
import { StateService } from '../state.service';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
3
import zingchart from 'zingchart/es6';
4
import * as d3 from 'd3';
5
6
7
8
9
10

@Component({
  selector: 'app-overview-window',
  templateUrl: './overview-window.component.html',
  styleUrls: ['./overview-window.component.css']
})
11
export class OverviewWindowComponent implements OnInit {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
12
  @ViewChild('chart') chart;
13
  private initialHeight;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
14
  public config;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
15
  public graphset = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
16
  public id = 'overview';
17
18
19
20
  public markers = [];
  public series = [];
  public goodLabels = [];
  public badLabels = [];
21
  public candidateLabels = [];
22
  public pathWidth = 100;
23
  public allChannels: number[];
24
25
  private _minx;
  private _maxx;
26
27
28
29

  public data;
  public layout;

30
  constructor(private state: StateService, private el: ElementRef) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
31
  }
32
33

  async ngOnInit(): Promise<void> {
34
35
36
37
38
    this.initialHeight = this.el.nativeElement.offsetHeight;
    // this.state.onNewData.subscribe(() => this.dostuff3());
    this.state.onNewData.subscribe(() => this.initializePlot());
    this.state.onNewLshData.subscribe(() => this.updatePlot());
    this.state.onNewSelection.subscribe(() => this.updateChannels());
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
  dostuff3() {
    let y_val = 0;
    let N = 200000;
    let values = d3.range(N).map(function(x, i, arr) {
      y_val += Math.random() - 0.5;
      return {x: x, y: y_val, id: i};
    });
    console.log(values);
    let margin = {top: 30, right: 30, bottom: 30, left: 20 };
    let width = 600 - margin.left - margin.right;
    let height = 150 - margin.top - margin.bottom;

    const svg = d3.select('.test')
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

    let xscale = d3.scaleLinear().domain([0, N]).range([0, N]);
    const x2 = xscale.copy(); // reference.
    const yscale = d3.scaleLinear().domain([-10, 10]).range([height, 0]);
64

65
66
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
98
    const line = d3.line()
      .x(function(d:any) { return xscale(d.x); })
      .y(function(d:any) { return yscale(d.y); })

    const axis = d3.axisBottom(xscale);

    const axis_G = svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(axis);

    const axis_left = svg.append("g")
      .call(d3.axisLeft(yscale));

    const lines = svg.append('g')
      .data([values])
      .append('path')
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr('class', 'data')
      .attr('d', (d: any) => line(d));

    const zoomed = function() {
      console.log(d3.event.transform);
      const transform = d3.event.transform;
      // lines.attr("transform", d3.event.transform);
      xscale = transform.rescaleX(x2);
      axis.scale(xscale);
      axis_G.call(axis);
      svg.select('.data').attr('d', (d: any) => {
        return d3.line()
          .x(function(d:any) { return transform.applyX(xscale(d.x)); })
          .y(function(d:any) { return yscale(d.y); })(d);
      });
99
100
    };

101
102
103
    const zoom = d3.zoom()
      .scaleExtent([1, 10000])
      .on('zoom', zoomed);
104
105
106
107




108
109
    svg.call(zoom);
  }
110

111
112
113
114
115
116
117
118
119
120
121
122
  async initializePlot() {
    this.allChannels = [...Array(this.state.rawData.length).keys()];
    this.state.queryWindow = undefined;
    // this.debugClicked();
    this.graphset.push({
      id: 'preview',
      type: "scatter",
      x: 0,
      y: 0,
      scaleX: {
        zooming: true,
        minValue: 0,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
123
124
        maxValue: this.state.rawData[0].index[this.state.rawData[0].index.length - 1], // //this.state.rawData[0].values.length,
        zoomTo: [0, 200],
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
        'auto-fit': true,
        visible: false,
        guide: {
          visible: false
        }
      },
      height: '30px',
      scaleY: {
        maxValue: 1,
        minValue: -1,
        visible: false,
        guide: {
          visible: false
        }
      },
      preview: {
        x: 50,
        y: 10,
        height: '30px',
      },
      series: [
        {
          type: 'scatter',
          values: [],
          text: 'Good labels',
          marker: {
            backgroundColor: '#4caf50'
          },
          zIndex: 3,
        },
        {
          type: 'scatter',
          values: [],
          text: 'Bad labels',
          marker: {
            backgroundColor: '#f44336'
          },
          zIndex: 2,
        },
        {
          type: 'scatter',
          values: [],
          text: 'Candidates',
          marker: {
            backgroundColor: '#b1a343'
          },
          zIndex: 1,
        }
      ]
    });
    // Initialize channels
176

177
178
    console.log(this.state);
    console.log(this.state.selection);
179

180
181
182
183
    this.state.selection.forEach((channelIndex, index) => {
      const channel = this.state.rawData[channelIndex];
      const data = [];
      for (let i = 0; i < channel.values.length; i++) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
184
        data.push([channel.index[i].toString(), channel.values[i]]);
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
      }
      this.graphset.push({
        id: index,
        x: 0,
        y: `${75 * index + 50}px`,
        type: 'line',
        height: '50px',
        scaleX: {
          zooming: true,
          zoomTo: [0, this.state.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
          }
        }]
      });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
217
    });
218
    zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
219
      if (e.stopupdate) {
220
        return;
221
222
223
224
225
226
227
228
229
230
231
      } else {
        this._minx = e.xmin;
        this._maxx = e.xmax;
      }
      if (e.graphid !== `zingchart-ng-1-graph-preview`) {
        this.chart.zoomto({
          graphid: `zingchart-ng-1-graph-preview`,
          xmin: e.xmin,
          xmax: e.xmax,
          stopupdate: true
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
232
      }
233
      for (let i = 1; i < this.graphset.length; i ++) {
234
235
236
        if (i === e.graphid) {
          continue;
        }
237
238
239
        this.chart.zoomto({
          graphid: i,
          xmin: e.xmin,
240
241
          xmax: e.xmax,
          stopupdate: true
242
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
243
244
      }
    });
245
246
247
248
249
250
251
252
253
    this.config = {
      layout: `${this.graphset.length}x1`,
      graphset: this.graphset
    };
    this.chart.setdata({
      data: this.config
    });
    console.log(this.config);
    console.log("showing plot");
254
    // await this.debugClicked();
255
  }
256

257
258
259
  // changeSelection() {
  //   this.state.selection = [0, 1, 2];
  // }
260
261


262
263
264
265
266
267
268
  async updateChannels() {
    console.log('updating plot');
    this.graphset = this.graphset.slice(0, 1);
    this.state.selection.forEach((channelIndex, index) => {
      const channel = this.state.rawData[channelIndex];
      const data = [];
      for (let i = 0; i < channel.values.length; i++) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
269
        data.push([channel.index[i].toString(), channel.values[i]]);
270
      }
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
      this.graphset.push({
        id: channelIndex,
        x: 0,
        y: `${75 * index + 50}px`,
        type: 'line',
        height: '50px',
        scaleX: {
          zooming: true,
          zoomTo: [0, this.state.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
          }
        }]
301
302
      });
    });
303
304
305
306
307
308
    this.config = {
      layout: `${this.graphset.length}x1`,
      graphset: this.graphset
    };
    this.chart.setdata({
      data: this.config
309
    });
310
311
312
    // this.chart.addgraph(this.graphset[4]);
    console.log(this.config);
    console.log("showing plot");
313
314
315
  }

  async updatePlot() {
316
317
318
319
    console.log('updating plot');
    if (!this.state.queryWindow) {
      return;
    }
320
321
322
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
323
324
    for (const index in this.state.labels) {
      if (this.state.labels[index]) {
325
        this.goodLabels.push([Number(index), 0]);
326
327
328
        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
329
          range: [Number(index) / 100, (Number(index) + this.state.windowSize) / 100],
330
          backgroundColor: "#4caf50",
331
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
332
      } else {
333
        this.badLabels.push([Number(index), -1]);
334
335
336
        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
337
          range: [Number(index) / 100, (Number(index) + this.state.windowSize) / 100],
338
          backgroundColor: "#f44336",
339
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
340
      }
341
    }
342
    for (const index of this.state.lshData.samples) {
343
344
345
346
      this.candidateLabels.push([Number(index), 0]);
      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
347
        range: [Number(index) / 100, (Number(index) + this.state.windowSize) / 100],
348
349
350
        backgroundColor: '#b1a343',
      });
    }
351
352
353
354
355
356
357
358
359
360
361
    console.log(this.markers);
    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;
        channel.series[2].values = this.candidateLabels;
      }
    }
    this.chart.setdata({
362
363
      data: this.config
    });
364

365
366
  }

367
368
369
370
  ping() {
    console.log("ping");
  }

371
  async updateCandidates(sliderIndex) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
    // let candidates = [];
    // for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
    //   candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    // }
    // const labels = [];
    // const markers = [];
    // for (const index of candidates) {
    //   labels.push([Number(index) * (12000 / 6), 0]);
    //   markers.push({
    //     type: 'area',
    //     // BUG: For some reason the range values are multiplied by 10
    //     range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.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', {
    //   data: this.config
    // });
402
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
403

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
  // async clicked(clickData) {
  //   console.log(clickData);
  //   if (!this.state.querySelectionMode) {
  //     return;
  //   }
  //   this.state.querySelectionMode = false;
  //   await this.debugClicked();
  //   return;
  //   const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', {
  //     x: clickData.x,
  //     y: clickData.y
  //   });
  //   const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
  //   await this.state.getQueryWindow(index);
  //   await this.state.lshInitial();
  //   const temp = {};
  //   temp[index] = true;
  //   this.state.labels = temp;
  // }
  //
  // async debugClicked() {
  //   const index = 6713;
  //   await this.state.getQueryWindow(index);
  //   await this.state.lshInitial();
  //   const temp = {};
  //   temp[index] = true;
  //   this.state.labels = temp;
  // }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
432

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
433
  zoom(p) {
434
435
436
    if (!p.ev) {
      return;
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
437
    if (p.ev.wheelDelta > 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
438
      zingchart.exec("zingchart-ng-1", 'zoomin');
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
439
    } else if (p.ev.wheelDelta < 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
440
441
442
      zingchart.exec("zingchart-ng-1", 'zoomout');
    }
  }
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460

  isInSelection(i): boolean {
    return i in this.state.selection;
  }

  changeSelection(i: number): void {
    if (i in this.state.selection) {
      this.state.selection = this.state.selection.filter((v) => v !== i);
    } else {
      const selection = this.state.selection;
      selection.push(i);
      this.state.selection = selection;
    }
  }

  get height(): number {
    return Math.max(75 * this.state.selection.length + 50, this.initialHeight);
  }
461

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
462
463
464
465
  async setquery() {
    this.state.windowSize = this.maxx - this.minx;
    await this.state.getQueryWindow(null, this.maxx - this.minx, this.minx);
    await this.state.lshInitial();
466
467
468
  }

  get maxx(): number {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
469
    return this._maxx * 100;
470
471
472
  }

  set maxx(max: number) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
473
    this._maxx = max / 100;
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
    this.chart.zoomto({
      graphid: `zingchart-ng-1-graph-preview`,
      xmin: this._minx,
      xmax: this._maxx,
      stopupdate: true
    });
    for (let i = 1; i < this.graphset.length; i ++) {
      this.chart.zoomto({
        graphid: i,
        xmin: this._minx,
        xmax: this._maxx,
        stopupdate: true
      });
    }
  }

  get minx(): number {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
491
    return this._minx * 100;
492
493
494
  }

  set minx(min: number) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
495
    this._minx = min / 100;
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
    this.chart.zoomto({
      graphid: `zingchart-ng-1-graph-preview`,
      xmin: this._minx,
      xmax: this._maxx,
      stopupdate: true
    });
    for (let i = 1; i < this.graphset.length; i ++) {
      this.chart.zoomto({
        graphid: i,
        xmin: this._minx,
        xmax: this._maxx,
        stopupdate: true
      });
    }
  }
511
}