overview-window.component.ts 5.06 KB
Newer Older
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
1
import {Component, OnInit} 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
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
  constructor(private state: StateService) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
22
  }
23
24

  async ngOnInit(): Promise<void> {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
25
26
    this.state.onNewData.subscribe(() => this.initializePlot());
    this.state.onNewTable.subscribe(() => this.updatePlot());
27
28
29
  }

  async initializePlot() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
30
    this.state.queryWindow = undefined;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
31
    this.debugClicked();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
32
    this.data = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
33
34
    for (let i = 0; i < this.state.rawData.values.length; i++) {
      this.data.push([this.state.rawData.index[i], this.state.rawData.values[i]]);
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
    }
    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 = {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
66
      type: 'mixed',
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
67
      preview: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
68
69
        height: '30px',
        position: '0% 100%',
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
70
71
        'auto-fit': true
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
72
73
74
      plotarea: {
        'margin-top': '10px',
        'margin-bottom': '50%'
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
75
      },
76
      scaleX: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
77
        zooming: true,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
78
        zoomTo: [0, this.state.windowSize],
79
        'auto-fit': true,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
80
        markers: this.markers
81
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
82
83
      'scale-y': {
        'auto-fit': true
84
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
85
      series: this.series
86
87
88
89
    };
  }

  async updatePlot() {
90
91
92
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
93
94
    for (const index in this.state.labels) {
      if (this.state.labels[index]) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
95
        this.goodLabels.push([Number(index) * (12000 / 6), 0]);
96
97
98
        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
99
100
          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
          backgroundColor: '#4caf50',
101
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
102
      } else {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
103
        this.badLabels.push([Number(index) * (12000 / 6), 0]);
104
105
106
        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
107
108
          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
          backgroundColor: '#f44336',
109
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
110
      }
111
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
112
113
114
    this.series[1].values = this.goodLabels;
    this.series[2].values = this.badLabels;
    this.config.scaleX.markers = this.markers;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
115
    zingchart.exec('zingchart-ng-1', 'setdata', {
116
117
      data: this.config
    });
118
119
  }

120
  async updateCandidates(sliderIndex) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
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
148
149
150
    // 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
    // });
151
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
152

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
153
  async clicked(clickData) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
154
    if (!this.state.querySelectionMode) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
155
156
      return;
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
157
158
    this.state.querySelectionMode = false;
    const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
159
160
161
      x: clickData.x,
      y: clickData.y
    });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
    const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
163
164
165
166
167
    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
168
169
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
170
  async debugClicked() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
171
172
173
    const index = 80503;
    await this.state.getQueryWindow(index);
    await this.state.lshInitial();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
174
175
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
176
  zoom(p) {
177
178
179
    if (!p.ev) {
      return;
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
180
    if (p.ev.wheelDelta > 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
181
      zingchart.exec("zingchart-ng-1", 'zoomin');
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
182
    } else if (p.ev.wheelDelta < 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
183
184
185
      zingchart.exec("zingchart-ng-1", 'zoomout');
    }
  }
186
}