progress-view.component.html 1.8 KB
Newer Older
1
<!--<svg id="visual" width='500' height='300'></svg>-->
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
2
<div class="main-container">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
3
  <mat-tab-group mat-stretch-tabs animationDuration="0ms">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
4
    <mat-tab label="Classifier">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
5
      <div *ngIf="data" class="container button">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
6
7
8
9
10
        <button (click)="showCandidates()">
          Show {{ nrOfCandidates }} similar candidates
        </button>
      </div>
      <div *ngIf="data" class="slider">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
11
        <mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" tickInterval="1"></mat-slider>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
12
13
14
      </div>
      <div *ngIf="data" class="info">
        <div class="histogram">
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
15
16
17
18
19
          <div class="container">
            <fieldset>
              <legend>Similarity distribution</legend>
              <plotly-plot (hover)="onHover($event)" [data]="hist.data" [layout]="hist.layout"></plotly-plot>
            </fieldset>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
20
21
22
            <div class="container">
              <fieldset>
                <legend>Info</legend>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
23
24
                <div>Candidates pruned: {{pruned}}%</div>
                <div>Computing time: {{computingTime}} seconds</div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
25
26
              </fieldset>
            </div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
27
          </div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
28
        </div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
29
30
31
32
33
34
35
36
        <div *ngIf="data" class="container">
          <div class="window">
            <fieldset>
              <legend>Uncertainty</legend>
              <div class="plots">
                <plotly-plot *ngFor="let data of this.data; index as i;" [class.hide]="i != sliderValue" [data]="data" [layout]="layout"></plotly-plot>
              </div>
            </fieldset>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
37
38
39
          </div>
        </div>
      </div>
Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
40
41
42
43
44
45
46
47
48
    </mat-tab>
    <mat-tab label="History">
      <ng-template matTabContent>
        <app-state-management></app-state-management>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
49

Kruyff,D.L.W. (Dylan)'s avatar
Kruyff,D.L.W. (Dylan) committed
50
51

<script src='https://d3js.org/d3.v4.min.js'></script>