table-overview.component.ts 4.6 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

@Component({
  selector: 'app-table-overview',
  templateUrl: './table-overview.component.html',
  styleUrls: ['./table-overview.component.css']
})
export class TableOverviewComponent implements OnInit {
  public subplots;
11
  public averages;
12
  public layout;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
13
  constructor(private state: StateService) { }
14
15

  ngOnInit(): void {
16
17
18
19
    this.state.onNewTable.subscribe(() => {
      this.createHistograms();
      this.createPrototypes();
    });
20
21
  }

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
  async createPrototypes(): Promise<void> {
    const representatives: number[][] = [];
    this.state.lshData.candidates.forEach((grouphash) => {
      grouphash.forEach((candidates) => {
        representatives.push(candidates.slice(0, 20));
      });
    });
    const prototypes = await this.state.getTableInfo(representatives);
    const subplots = [];
    this.averages = prototypes.prototypes.map((prototype) => {
      const channelData = [];
      prototype.max.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        });
      });
      prototype.min.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
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
101
102
103
104
105
106
107
108
109
110
111
        });
      });
      prototype.average.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'line',
          line: {
            color: 'red',
            width: 3
          }
        });
      });
      return channelData;
    });
    for (let index = 0; index < this.state.queryWindow.length; index++) {
      subplots.push([`xy${index + 2}`]);
    }
    this.layout = {
      grid: {
        rows: this.state.queryWindow.length,
        columns: 1,
        subplots: subplots,
      },
      showlegend: false,
      hovermode: 'closest',
      autosize: true,
      margin: {
        l: 10,
        r: 10,
        t: 30,
        pad: 4
      },
      xaxis: {
        showgrid: false,
        zeroline: false,
        showticklabels: false,
      },
      yaxis: {
        zeroline: false,
        showticklabels: false,
      },
      height: 300,
      width: screen.width * 0.1,
    };
    this.state.queryWindow.forEach((channel: number[], index: number) => {
      this.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
112
113
      };
    });
114
115
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
116
  async createHistograms() {
117
    console.log('creating table histograms');
118
    this.subplots = [];
119
    this.averages = [];
120
    const tables = this.state.table;
121
122
123
    console.log('start of table histograms');
    tables.forEach((table, index) => {
      console.log(index);
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
      this.subplots.push(
        {
          data: [{
            x: Object.keys(table),
            y: Object.values(table).map((values: number[]) => values.length), // / (this.service.rawValues.length - this.service.windowSize)),
            type: 'bar',
            opacity: 0.5,
            marker: {
              color: Object.keys(table).map((key) => {
                return this.getColor(Number(key) / Number(Object.keys(table)[Object.keys(table).length - 1]));
              })
            }
          }],
          layout: {
            hovermode: 'closest',
            autosize: true,
            margin: {
              l: 10,
              r: 10,
              t: 10,
              b: 10,
              pad: 4
            },
            xaxis: {
              showticklabels: false
            },
            yaxis: {
              showticklabels: false
            },
            height: 100,
            width: screen.width * 0.1,
          }
156
        }
157
158
      );
    });
159
    console.log('tables histogram created');
160
  }
161

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
162
163
164
165
  // async setQuery(data) {
  //   this.state.queryWindow = await this.state.getQueryWindow(data[0].y);
  //   await this.state.update();
  // }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
166
167

  public get tables() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
168
    return this.state.table;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
169
170
171
  }

  public get visible() {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
172
    return !this.state.querySelectionMode;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
173
  }
174
175
176
177
178

  getColor(value) {
    const hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
  }
179
}