progress-view.component.ts 8.08 KB
Newer Older
1
import {Component, 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 * as d3 from 'd3';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
4
import {TableInfoData} from '../api.service';
5
6
7
8
9
10
11

@Component({
  selector: 'app-progress-view',
  templateUrl: './progress-view.component.html',
  styleUrls: ['./progress-view.component.css']
})
export class ProgressViewComponent implements OnInit {
12
  @ViewChild('chart') chart;
13
  public plot;
14
15
  public data;
  public layout;
16
  public hist;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
17
  public amountOfCandidates;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
18
  public hover = 0;
19
  public prototypes;
20

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
21
  private _sliderValue = 0;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
22

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

  ngOnInit(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
26
27
28
29
    this.state.onNewLshData.subscribe(() => {
      this.showgraph();
      this.showHistogram();
    });
30
    this.state.onNewSelection.subscribe(() => { this.updateChannels(); });
31
32
33
  }

  showHistogram() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
34
    const table = this.state.lshData.average_table;
35
36
37
38
39
40
41
42
43
    this.hist = {
      data: [{
        x: Object.keys(table),
        y: Object.values(table).map((values: number[]) => values.length), // / (this.service.rawValues.length - this.service.windowSize)),
        type: 'bar',
        opacity: 0.5,
        marker: {
          color: Object.keys(table).map((key) => {
            return this.getColor(Number(key) / Number(Object.keys(table)[Object.keys(table).length - 1]));
44
45
46
47
48
          }),
          line: {
            color: 'black',
            width: 0,
          }
49
50
51
52
53
54
        }
      }],
      layout: {
        hovermode: 'closest',
        autosize: true,
        margin: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
55
56
57
58
          l: 0,
          r: 0,
          t: 0,
          b: 0,
59
60
61
62
63
64
65
66
67
          pad: 4
        },
        xaxis: {
          showticklabels: false
        },
        yaxis: {
          showticklabels: false
        },
        height: 200,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
68
        width: 300,
69
70
71
72
73
      }
    };
  }

  onHover(data) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
74
75
76
    const x = data.points[0].x;
    const value = Object.keys(this.state.lshData.average_table).indexOf(x.toString());
    this.setSliderValue({value: Number(value)});
77
78
  }

79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
  updateChannels() {
    if (!this.prototypes) {
      return;
    }
    const subplots = [];
    this.data = this.prototypes.map((prototype) => {
      const channelData = [];
      this.state.selection.forEach((channelIndex, index) => {
        const channel = prototype.max[channelIndex];
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
97
            color: this.state.colors[channelIndex],
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
            width: 3
          }
        });
      });
      this.state.selection.forEach((channelIndex, index) => {
        const channel = prototype.min[channelIndex];
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
113
            color: this.state.colors[channelIndex],
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
            width: 3
          }
        });
      });
      this.state.selection.forEach((channelIndex, index) => {
        const channel = prototype.average[channelIndex];
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'line',
          line: {
            color: 'red',
            width: 3
          }
        });
      });
      return channelData;
    });
    for (let index = 0; index < this.state.selection.length; index++) {
      subplots.push([`xy${index + 2}`]);
    }
    this.layout = {
      grid: {
        rows: this.state.selection.length,
        columns: 1,
        subplots: subplots,
      },
      showlegend: false,
      hovermode: 'closest',
      autosize: true,
      margin: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
147
148
149
150
        l: 0,
        r: 0,
        t: 0,
        b: 0,
151
152
153
154
155
156
157
158
159
160
161
        pad: 4
      },
      xaxis: {
        showgrid: false,
        zeroline: false,
        showticklabels: false,
      },
      yaxis: {
        zeroline: false,
        showticklabels: false,
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
163
      height: 200 * this.state.selection.length,
      width: 300,
164
165
166
167
168
169
170
171
172
    };
    this.state.selection.forEach((channelIndex, index) => {
      this.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
173
  hoverPlot(averages) {
174
    const subplots = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
175
    this.data = averages.map((prototype) => {
176
      const channelData = [];
177
178
      this.state.selection.forEach((channelIndex, index) => {
        const channel = prototype.max[channelIndex];
179
180
181
182
183
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
184
185
186
187
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
188
            color: this.state.colors[channelIndex],
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
189
190
            width: 3
          }
191
192
        });
      });
193
194
      this.state.selection.forEach((channelIndex, index) => {
        const channel = prototype.min[channelIndex];
195
196
197
198
199
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
200
201
202
203
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
204
            color: this.state.colors[channelIndex],
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
205
206
            width: 3
          }
207
208
        });
      });
209
210
      this.state.selection.forEach((channelIndex, index) => {
        const channel = prototype.average[channelIndex];
211
212
213
214
215
216
217
218
219
220
221
222
223
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'line',
          line: {
            color: 'red',
            width: 3
          }
        });
      });
      return channelData;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
224
    });
225
    for (let index = 0; index < this.state.selection.length; index++) {
226
227
      subplots.push([`xy${index + 2}`]);
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
228
    this.layout = {
229
      grid: {
230
        rows: this.state.selection.length,
231
232
233
        columns: 1,
        subplots: subplots,
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
234
235
236
237
      showlegend: false,
      hovermode: 'closest',
      autosize: true,
      margin: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
238
239
240
241
        l: 0,
        r: 0,
        t: 0,
        b: 0,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
242
243
244
245
246
247
248
249
250
251
252
        pad: 4
      },
      xaxis: {
        showgrid: false,
        zeroline: false,
        showticklabels: false,
      },
      yaxis: {
        zeroline: false,
        showticklabels: false,
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
253
254
      height: 200 * this.state.selection.length,
      width: 300,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
255
    };
256
    this.state.selection.forEach((channelIndex, index) => {
257
258
259
260
261
      this.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
262
263
  }

264
265
  public setSliderValue(v) {
    this._sliderValue = v.value;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
266
    const tableKey = Object.keys(this.state.lshData.average_table)[this._sliderValue];
267
    const data = this.hist;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
268
    data.data[0].marker.line.width = Object.keys(this.state.lshData.average_table).map((key) => {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
269
      return Number(key) === Number(tableKey) ? 4 : 0;
270
271
    });
    this.hist = data;
272
  }
273

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
274
275
  public get sliderValue(): number {
    return this._sliderValue;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
276
277
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
278
  public get nrOfCandidates(): number {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
279
280
281
282
283
    let output = 0;
    for (let i = 0; i <= this.sliderValue; i++) {
      output += this.state.lshData.average_table[Object.keys(this.state.lshData.average_table)[i]].length;
    }
    return output;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
284
285
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
286
  public get maxLength(): number {
287
    return Object.keys(this.table).length - 1;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
288
289
}

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
290
  public get table() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
291
    return this.state.lshData.average_table;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
292
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
293

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
294
  async showgraph() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
295
    const tableInfo: TableInfoData = await this.state.getTableInfo(Object.values(this.state.lshData.average_table));
296
    this.prototypes = tableInfo.prototypes;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
297
    this.hoverPlot(tableInfo.prototypes);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
298
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
299

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
300
301
302
303
  getColor(value) {
    const hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
304
305
306
307

  public showCandidates() {
    this.state.sliderValue = this._sliderValue;
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
308
309
310
311
312
313
314
315

  public get pruned(): string {
    return (100 - 100 * this.state.lshData.average_candidates.length / this.state.rawData[0].values.length).toPrecision(2);
  }

  public get computingTime(): number {
    return this.state.computedTime / 1000;
  }
316
}