table-overview.component.ts 4.43 KB
Newer Older
1
2
import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service';
3
import {element} from 'protractor';
4
5
6
7
8
9
10
11

@Component({
  selector: 'app-table-overview',
  templateUrl: './table-overview.component.html',
  styleUrls: ['./table-overview.component.css']
})
export class TableOverviewComponent implements OnInit {
  public subplots;
12
  public averages;
13
14
15
16
  constructor(private service: CacheService) { }

  ngOnInit(): void {
    this.service.onNewTables.subscribe(() => this.createPlots());
17
    this.service.onNewSimilarity.subscribe(() => this.createPlots());
18
19
  }

20
21
  averagePlot(average): object {
    return {
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
      data: [
        {
          x: [...Array(average.average.length).keys()],
          y: average.average,
          type: 'line',
        },
        {
          x: [...Array(average.average.length).keys()],
          y: average.max,
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        },
        {
          x: [...Array(average.average.length).keys()],
          y: average.min,
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        }
      ],
51
      layout: {
52
        showlegend: false,
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
        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,
      }
    };
  }

74
75
76
77
78
79
80
81
82
83
84
  calculateSignature(hashFunction, window): string {
    const output = new Array(hashFunction[0].length);
    output.fill(0);
    for (const hash of hashFunction) {
      for (let i = 0; i < hash.length; i++) {
        output[i] += window[i] * hash[i];
      }
    }
    return output.map((x) => x > 0 ? '1' : '0').join('');
  }

85
86
87
88
89
90
91
92
93
94
  distanceMetric(hash) {
    let sum = 0;
    for (let i = 0; i < hash.length; i++) {
      if (hash[i] === '1') {
        sum++;
      }
    }
    return sum;
  }

95
  async createPlots() {
96
    this.subplots = [];
97
98
    this.averages = [];
    const listOfWindows = [];
99
100
    for (const tableIndex in this.tables) {
      const table = this.tables[tableIndex];
101
      let rank = undefined;
102
103
      let opacity = new Array(Object.keys(table.entries).length);
      opacity.fill(1);
104
105
106
      const orderedHashes = Object.keys(table.entries).sort((hash1, hash2) => {
        return this.distanceMetric(hash1) - this.distanceMetric(hash2);
      });
107
      if (this.service.queryWindow) {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
108
        const queryEntry = this.calculateSignature(table.hash, this.service.queryWindow);
109
        listOfWindows.push(table.entries[queryEntry]);
110
        opacity = orderedHashes.map((hash: string) => {
111
112
113
            return hash === queryEntry ? 1.0 : 0.5;
          }
        );
114
        rank = table.entries[queryEntry].length;
115
      }
116
117
      this.subplots.push(
        {
118
          rank: rank,
119
          data: [{
120
121
            x: orderedHashes.map((hash: string, i) => {
              return i; // Number('0b' + hash);
122
123
              }
            ),
124
            y: orderedHashes.map((hash: string) => table.entries[hash].length ), // / (this.service.rawValues.length - this.service.windowSize)),
125
126
            type: 'bar',
            marker: {
127
              opacity
128
            }
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
          }],
          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,
          }
        }
      );
    }
152
    this.subplots.sort((plot1, plot2) => plot1.rank - plot2.rank);
153
    if (this.service.queryWindow) {
154
      const temp = await this.service.getAverageTableWindows(listOfWindows);
155
156
      this.averages = temp.map(x => this.averagePlot(x));
    }
157
  }
158

159
  async setQuery(data) {
160
    this.service.queryWindow = await this.service.getQueryWindow(data[0].y);
161
    await this.service.getSimilarWindows();
162
  }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
163
164
165
166
167
168
169
170

  public get tables() {
    return this.service.tables;
  }

  public get visible() {
    return !this.service.querySelectionMode;
  }
171
}