overview-window.component.ts 3.12 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
import { CacheService } from '../cache.service';
import {throwError} from 'rxjs';

@Component({
  selector: 'app-overview-window',
  templateUrl: './overview-window.component.html',
  styleUrls: ['./overview-window.component.css']
})
export class OverviewWindowComponent implements OnInit {
11
12
13
  public defaultColors: string[];
  public defaultSizes: number[];
  public defaultOpacity: number[];
14
15
16
17
18
19
20
21
22
23
  public showPlot = false;

  public data;
  public layout;

  constructor(private service: CacheService) { }

  async ngOnInit(): Promise<void> {
    this.service.onNewWindows.subscribe(() => { this.initializePlot(); });
    this.service.onNewTables.subscribe(() => {
24
      if (this.service.query) {
25
26
27
28
29
30
        this.updatePlot();
      }
    });
  }

  async initializePlot() {
31
    this.service.query = undefined;
32
33
34
35
    const size = this.service.rawValues.length;
    this.defaultColors = Array(size).fill('#a3a7e4');
    this.defaultSizes = Array(size).fill(5);
    this.defaultOpacity = Array(size).fill(1);
36
37
38
    this.data = [{
      x: this.service.rawIndices,
      y: this.service.rawValues,
39
      type: 'scattergl',
40
41
42
43
      // mode: 'markers',
      // marker: {
      //   size: this.defaultSizes.slice(),
      //   color: this.defaultColors.slice()}
44
45
46
47
48
    }];
    this.layout = {
      hovermode: 'closest',
      autosize: true,
      margin: {
49
        l: 40,
50
51
52
53
54
        r: 0,
        b: 40,
        t: 0,
        pad: 4
      },
55
      height: 200,
56
57
58
59
      xaxis: {
        showticklabels: false,
        // rangeslider: {}
      },
60
61
    };
    this.showPlot = true;
62
    console.log("showing plot");
63
64
65
66
  }

  async clicked(clickData) {
    for (const point of clickData.points) {
67
68
69
70
      this.service.query = point.pointNumber;
      const temp = {};
      temp[point.pointNumber] = true;
      this.service.labels = temp;
71
72
73
74
75
76
77
78
79
    }
    await this.updatePlot();
  }

  async updatePlot() {
    const colors: string[] = [];
    const sizes: number[]  = [];
    const opacity: number[]  = [];

80
    // Similarity
81
    const windowSimilarity = await this.service.getSimilarWindows(this.service.windows[this.service.query]);
82
83
84
    for (const frequency in windowSimilarity){
      for (const index of windowSimilarity[frequency]) {
        colors[index] = this.getColor(Number(frequency) / this.service.nrOfTables);
85
86
        sizes[index] = 5;
        opacity[index] = Math.max(Number(frequency) / this.service.nrOfTables, 0.5);
87
88
      }
    }
89
90
91
92
93
94
95
96
97
98
99
100
101

    // Labeled
    for (const index in this.service.labels) {
      colors[Number(index)] = this.service.labels[index] ? '#4caf50' : '#f44336';
      sizes[Number(index)] = 10;
      opacity[Number(index)] = 1;
    }

    // Query
    colors[this.service.query] = '#cf00ff';
    sizes[this.service.query] = 10;
    opacity[this.service.query] = 1;

102
    this.data[0].marker.color = colors;
103
104
    this.data[0].marker.size = sizes;
    this.data[0].marker.opacity = opacity;
105
106
107
108
109
110
111
112
113
114
  }

  public getColor(value: number) {
    // value from 0 to 1
    const hueValue = Math.min((1 - value) , 1);
    const hue = ((1 - hueValue) * 120).toString(10);
    const sat = value * 100;
    return `hsl(${hue}, ${sat}%, 50%)`;
  }
}