overview-window.component.ts 5.35 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
    this.debugClicked();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
36
37
38
    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
39
      this.data.push([this.service.rawIndices[i], this.service.rawValues[i]]);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
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
80
    }
    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%"
      },
81
      scaleX: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
82
83
        zooming: true,
        zoomTo: [0, this.service.windowSize],
84
        'auto-fit': true,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
85
        markers: this.markers
86
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
87
88
      'scale-y': {
        'auto-fit': true
89
      },
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
90
      series: this.series
91
    };
92
    console.log("showing plot");
93
94
95
  }

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

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

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
164
165
166
167
168
169
170
171
172
  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
    });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
173
    const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
174
175
176
177
178
    await this.service.getQueryWindow(index);
    await this.service.initial();
    // const temp = {};
    // temp[index] = true;
    // this.service.labels = temp;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
179
180
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
181
182
183
184
185
186
  async debugClicked() {
    const index = 80503;// Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
    await this.service.getQueryWindow(index);
    await this.service.initial();
  }

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