overview-window.component.ts 5.15 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
    });
127
128
  }

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

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

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