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

  async clicked(clickData) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
93
94
95
96
97
98
99
100
101
    if (!this.service.querySelectionMode) {
      return;
    }
    this.service.querySelectionMode = false;
    const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
      x: clickData.x,
      y: clickData.y
    });
    const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
102
    await this.service.getQueryWindow(index);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
103
104
105
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
106
107
108
109
    await this.updatePlot();
  }

  async updatePlot() {
110
    console.log('updating plot');
111
    if (!this.service.queryWindow) {
112
      return;
113
    }
114
115
116
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
117
    for (const index in this.service.labels) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
118
      if (this.service.labels[index]) {
119
120
121
122
123
124
125
        this.goodLabels.push(this.data[index]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
          backgroundColor: "#4caf50",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
126
      } else {
127
128
129
130
131
132
133
        this.badLabels.push(this.data[index]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
          backgroundColor: "#f44336",
        });
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
134
      }
135
    }
136
137
138
139
140
141
142
143
144
145
    this.series[1].values = this.goodLabels;
    this.series[2].values = this.badLabels;
    this.config.scaleX.markers = this.markers;
    console.log(this.config);
    zingchart.exec("zingchart-ng-1", 'setdata', {
      data: this.config
    });
    console.log('querying');
    await this.service.getSimilarWindows();
    console.log('done');
146
147
  }

148
149
  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
150
151
152
153
154
    let candidates = [];
    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
      console.log(i);
      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    }
155
156
    console.log(candidates);
    const labels = [];
157
    const markers = [];
158
159
    for (const index of candidates) {
      labels.push(this.data[index]);
160
161
162
163
164
165
      markers.push({
        type: 'area',
        // BUG: For some reason the range values are multiplied by 10
        range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
        backgroundColor: "#b1a343",
      });
166
    }
167
    const newSeries = this.config.series.slice(0, 3);
168
169
170
171
172
173
174
175
176
    newSeries.push({
      type: 'scatter',
      values: labels,
      text: 'Similar windows',
      marker: {
        backgroundColor: '#b1a343'
      },
      zIndex: 20,
    });
177
178
179
180
181
    this.config.series = newSeries;
    this.config.scaleX.markers = this.markers.concat(markers);
    zingchart.exec("zingchart-ng-1", 'setdata', {
      data: this.config
    });
182
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
183
184

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

  doubleClick(e) {
    zingchart.exec("zingchart-ng-1", 'viewall');
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
197
  }
198
}