labeling-window.component.ts 2.24 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

@Component({
  selector: 'app-labeling-window',
  templateUrl: './labeling-window.component.html',
  styleUrls: ['./labeling-window.component.css']
})
export class LabelingWindowComponent implements OnInit {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
10
  public topk: number[];
11
12
  public subplots = [];
  public labels: boolean[] = [];
13
  private k = 12;
14

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

  ngOnInit(): void {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
18
    this.state.onNewTable.subscribe(() => this.showSamples());
19
20
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
21
22
23
24
  async train() {
    this.state.labels = Object.assign({}, this.state.labels, this.labels);
    await this.state.getQueryWindow(this.state.labels);
    await this.state.update();
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
25
26
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
27
28
29
  async updateQuery() {
    this.state.labels = Object.assign({}, this.state.labels, this.labels);
    await this.state.getQueryWindow(this.state.labels);
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  }

  public labelCorrect(index: number) {
    this.labels[index] = true;
  }

  public labelUndefined(index: number) {
    if (this.labels[index] !== undefined) {
      delete this.labels[index];
    }
  }

  public labelIncorrect(index: number) {
    this.labels[index] = false;
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
46
47
  async showSamples() {
    this.topk = this.state.lshData.candidates.slice(0, this.k);
48
    this.subplots = [];
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
49
    const values = await this.state.getWindow(this.topk);
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
50
    this.topk.forEach((index, i) => {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
51
52
      this.subplots.push(
        {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
53
          index,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
54
          data: [{
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
55
56
            x: [...Array(values[i].length).keys()],
            y: values[i],
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
57
58
59
            type: 'line'
          }],
          layout: {
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
60
            title: `Index: ${index.toString()}`,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
61
62
63
64
65
66
67
68
69
70
            hovermode: 'closest',
            autosize: true,
            margin: {
              l: 30,
              r: 30,
              t: 30,
              b: 0,
              pad: 4
            },
            height: 150,
71
            width: 300,
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
72
73
74
75
76
77
78
79
80
81
82
83
            titlefont: {
              size: 9
            },
            xaxis: {
              showgrid: false,
              zeroline: false,
              showticklabels: false,
            },
            yaxis: {
              zeroline: false,
              showticklabels: false,
            }
84
85
          }
        }
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
86
      );
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
87
88
89
    });
  }

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
90
91
  public get show() {
    return !!this.state.lshData;
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
92
  }
93
}