query-window.component.ts 3.41 KB
Newer Older
1
import { Component, OnInit } from '@angular/core';
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
2
import {StateService} from '../state.service';
3
4
5
6
7
8
9
10
11
12

@Component({
  selector: 'app-query-window',
  templateUrl: './query-window.component.html',
  styleUrls: ['./query-window.component.css']
})
export class QueryWindowComponent implements OnInit {

  public plot;

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
13
  constructor(private state: StateService) { }
14
15

  ngOnInit(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
16
17
    this.state.onNewQuery.subscribe(() => {
      if (this.state.queryWindow) {
18
19
20
        this.initializePlot();
      }
    });
21
22
23
24
25
    this.state.onNewSelection.subscribe(() => {
      if (this.state.queryWindow) {
        this.updateChannels();
      }
    });
26
27
28
  }

  initializePlot(): void {
29
30
    const subplots = [];
    const data = [];
31
32
    this.state.selection.forEach((channelIndex: number, index: number) => {
      const channel = this.state.queryWindow[channelIndex];
33
34
35
36
37
38
39
40
41
      data.push({
        x: [...Array(channel.length).keys()],
        y: channel,
        type: 'line',
        xaxis: 'x',
        yaxis: `y${index + 2}`,
      });
      subplots.push([`xy${index + 2}`]);
    });
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

    const plot = {
      data: data,
      layout: {
        grid: {
          rows: this.state.selection.length,
          columns: 1,
          subplots: subplots,
        },
        showlegend: false,
        hovermode: 'closest',
        autosize: true,
        margin: {
          l: 30,
          r: 30,
          t: 30,
          b: 0,
          pad: 4
        },
        height: 100 * this.state.selection.length,
        width: 300,
        titlefont: {
          size: 9
        },
        xaxis: {
          showgrid: false,
          zeroline: false,
          showticklabels: false,
        },
        yaxis: {
          zeroline: false,
          showticklabels: false,
        }
      }
    };
    this.state.selection.forEach((channel: number, index: number) => {
      plot.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
    this.plot = plot;
  }

  async updateChannels() {
    const subplots = [];
    const data = [];
    this.state.selection.forEach((channelIndex: number, index: number) => {
      const channel = this.state.queryWindow[channelIndex];
      data.push({
        x: [...Array(channel.length).keys()],
        y: channel,
        type: 'line',
        xaxis: 'x',
        yaxis: `y${index + 2}`,
      });
      subplots.push([`xy${index + 2}`]);
    });

101
102
103
104
    const plot = {
      data: data,
      layout: {
        grid: {
105
          rows: this.state.selection.length,
106
107
108
109
110
111
112
113
114
115
116
117
118
          columns: 1,
          subplots: subplots,
        },
        showlegend: false,
        hovermode: 'closest',
        autosize: true,
        margin: {
          l: 30,
          r: 30,
          t: 30,
          b: 0,
          pad: 4
        },
119
        height: 100 * this.state.selection.length,
120
121
122
123
124
125
126
127
128
129
130
131
        width: 300,
        titlefont: {
          size: 9
        },
        xaxis: {
          showgrid: false,
          zeroline: false,
          showticklabels: false,
        },
        yaxis: {
          zeroline: false,
          showticklabels: false,
132
        }
133
134
      }
    };
135
    this.state.selection.forEach((channel: number, index: number) => {
136
137
138
      plot.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
139
      };
140
141
    });
    this.plot = plot;
142
143
  }

144
    get isQuerySet(): boolean {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
145
    return !!this.state.queryWindow;
146
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
147
148

  public newQuery() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
149
    this.state.querySelectionMode = true;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
150
  }
151
}