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

  async ngOnInit(): Promise<void> {
25
    this.service.onNewData.subscribe(() => this.initializePlot());
26
    this.service.onNewTables.subscribe(() => {
27
      if (this.service.queryWindow) {
28
29
30
        this.updatePlot();
      }
    });
31
    this.service.onNewSlider.subscribe((v) => this.updateCandidates(v));
32
33
34
  }

  async initializePlot() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
35
36
37
    this.service.queryWindow = undefined;
    this.data = [];
    for (let i = 0; i < this.service.rawValues.length; i++) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
38
      this.data.push([this.service.rawIndices[i], this.service.rawValues[i]]);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
    }
    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 = {
      type: "mixed",
      preview: {
        height: "30px",
        position: "0% 100%",
        'auto-fit': true
      },
      "plotarea": {
        "margin-top": "10px",
        "margin-bottom": "50%"
      },
80
      scaleX: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
81
82
        zooming: true,
        zoomTo: [0, this.service.windowSize],
83
        'auto-fit': true,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
84
        markers: this.markers
85
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
86
87
      'scale-y': {
        'auto-fit': true
88
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
89
      series: this.series
90
    };
91
    console.log("showing plot");
92
93
94
  }

  async updatePlot() {
95
    console.log('updating plot');
96
    if (!this.service.queryWindow) {
97
      return;
98
    }
99
100
101
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
102
    for (const index in this.service.labels) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
103
      if (this.service.labels[index]) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
104
        this.goodLabels.push([Number(index) * (12000 / 6), 0]);
105
106
107
        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
108
          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
109
110
          backgroundColor: "#4caf50",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
111
      } else {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
112
        this.badLabels.push([Number(index) * (12000 / 6), 0]);
113
114
115
        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
116
          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
117
118
          backgroundColor: "#f44336",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
119
      }
120
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
121
122
123
124
    this.series[1].values = this.goodLabels;
    this.series[2].values = this.badLabels;
    this.config.scaleX.markers = this.markers;
    zingchart.exec("zingchart-ng-1", 'setdata', {
125
126
      data: this.config
    });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
127
    console.log('querying');
128
    await this.service.getSimilarWindows();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
129
    console.log('done');
130
131
  }

132
133
  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
134
135
136
137
    let candidates = [];
    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    }
138
    const labels = [];
139
    const markers = [];
140
    for (const index of candidates) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
141
      labels.push([Number(index) * (12000 / 6), 0]);
142
143
144
      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
145
        range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.service.windowSize) / 10],
146
147
        backgroundColor: "#b1a343",
      });
148
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
149
150
151
152
153
154
155
156
157
158
159
160
161
    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', {
162
163
      data: this.config
    });
164
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
165

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
166
167
168
169
170
171
172
173
174
  async clicked(clickData) {
    if (!this.service.querySelectionMode) {
      return;
    }
    this.service.querySelectionMode = false;
    const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
      x: clickData.x,
      y: clickData.y
    });
175
    const index = 80503;// Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
176
177
178
179
180
181
182
    this.service.queryWindow = await this.service.getQueryWindow(index);
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
    await this.updatePlot();
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
183
  zoom(p) {
184
185
186
    if (!p.ev) {
      return;
    }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
187
    if (p.ev.wheelDelta > 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
188
      zingchart.exec("zingchart-ng-1", 'zoomin');
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
189
    } else if (p.ev.wheelDelta < 0) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
190
191
192
      zingchart.exec("zingchart-ng-1", 'zoomout');
    }
  }
193
}