Commit 56da1762 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Scrollable overview

parent 18c83683
...@@ -13,24 +13,26 @@ ...@@ -13,24 +13,26 @@
</div> </div>
</div> </div>
</as-split-area> </as-split-area>
<as-split-area [size]="90"> <as-split-area [size]="90" [style]="{'overflow-y': 'hidden'}">
<div class="channel_header"> <div class="channel_header">
Dataset overview Dataset overview
</div> </div>
<div class="toolbar"> <div class="toolbar">
<label class="small-margin" for="windowsize">Start</label><br> <label class="small-margin" for="min">Start</label><br>
<input class="small-margin" id="windowsize" [(ngModel)]="minx"> <input class="small-margin" id="min" [(ngModel)]="minx">
<label class="small-margin" for="hashsize">End</label><br> <label class="small-margin" for="max">End</label><br>
<input class="small-margin" [(ngModel)]="maxx" id="hashsize"> <input class="small-margin" [(ngModel)]="maxx" id="max">
<label class="small-margin" for="w">Window Size</label><br>
<input class="small-margin" [disabled]="true" [value]="maxx - minx" id="w">
<button (click)="setquery()"> <button (click)="setquery()">
Set as query Set as query
</button> </button>
</div> </div>
<div class="overview"> <div class="overview">
<zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular> <zingchart-angular #chart [id]="id" (wheel)="scroll($event)" [height]="height"></zingchart-angular>
</div> </div>
</as-split-area> </as-split-area>
</as-split> </as-split>
......
...@@ -211,6 +211,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -211,6 +211,7 @@ export class OverviewWindowComponent implements OnInit {
}); });
}); });
zingchart.bind('zingchart-ng-1', 'zoom', (e) => { zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
console.log("zoom");
if (e.stopupdate) { if (e.stopupdate) {
return; return;
} else { } else {
...@@ -363,7 +364,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -363,7 +364,7 @@ export class OverviewWindowComponent implements OnInit {
} }
ping() { ping() {
console.log("zoom"); console.log("ping");
} }
async updateCandidates() { async updateCandidates() {
...@@ -375,8 +376,29 @@ export class OverviewWindowComponent implements OnInit { ...@@ -375,8 +376,29 @@ export class OverviewWindowComponent implements OnInit {
console.log(candidates); console.log(candidates);
this.candidateLabels = []; this.candidateLabels = [];
this.goodLabels = [];
this.badLabels = [];
this.markers = []; this.markers = [];
for (const index in this.state.labels) {
if (this.state.labels[index]) {
this.goodLabels.push([Number(index), 1]);
this.markers.push({
type: 'area',
// BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
backgroundColor: "#4caf50",
});
} else {
this.badLabels.push([Number(index), -1]);
this.markers.push({
type: 'area',
// BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
backgroundColor: "#f44336",
});
}
}
for (const index of candidates) { for (const index of candidates) {
this.candidateLabels.push([Number(index), 0]); this.candidateLabels.push([Number(index), 0]);
this.markers.push({ this.markers.push({
...@@ -391,6 +413,8 @@ export class OverviewWindowComponent implements OnInit { ...@@ -391,6 +413,8 @@ export class OverviewWindowComponent implements OnInit {
if (channel.type === 'line') { if (channel.type === 'line') {
channel.scaleX.markers = this.markers; channel.scaleX.markers = this.markers;
} else { } else {
channel.series[0].values = this.goodLabels;
channel.series[1].values = this.badLabels;
channel.series[2].values = this.candidateLabels; channel.series[2].values = this.candidateLabels;
} }
} }
...@@ -428,15 +452,24 @@ export class OverviewWindowComponent implements OnInit { ...@@ -428,15 +452,24 @@ export class OverviewWindowComponent implements OnInit {
// this.state.labels = temp; // this.state.labels = temp;
// } // }
zoom(p) { scroll(p) {
if (!p.ev) { p.stopPropagation();
return; console.log('mousewheel');
} console.log(p);
if (p.ev.wheelDelta > 0) { console.log(p.deltaY);
zingchart.exec("zingchart-ng-1", 'zoomin'); const q = Math.round((this._maxx - this._minx) / 10);
} else if (p.ev.wheelDelta < 0) { if (p.deltaY > 0) {
zingchart.exec("zingchart-ng-1", 'zoomout'); this._minx = Math.max(this._minx - q, 0);
this._maxx = Math.max(this._maxx - q, 0);
} else if (p.deltaY < 0) {
this._minx = Math.min(this._minx + q, this.state.rawData[0].values.length - 1);
this._maxx = Math.min(this._maxx + q, this.state.rawData[0].values.length - 1);
} }
this.chart.zoomto({
graphid: `zingchart-ng-1-graph-preview`,
xmin: this._minx,
xmax: this._maxx,
});
} }
isInSelection(i): boolean { isInSelection(i): boolean {
......
...@@ -44,5 +44,10 @@ mat-slider { ...@@ -44,5 +44,10 @@ mat-slider {
width: 400px; width: 400px;
} }
.button {
display: flex;
justify-content: center;
}
line { stroke: #5e4646; } line { stroke: #5e4646; }
circle { stroke: #fff; stroke-width: 1.5px; } circle { stroke: #fff; stroke-width: 1.5px; }
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
<div class="main-container"> <div class="main-container">
<mat-tab-group mat-stretch-tabs animationDuration="0ms"> <mat-tab-group mat-stretch-tabs animationDuration="0ms">
<mat-tab label="Classifier"> <mat-tab label="Classifier">
<div *ngIf="data" class="container"> <div *ngIf="data" class="container button">
<button (click)="showCandidates()"> <button (click)="showCandidates()">
Show {{ nrOfCandidates }} similar candidates Show {{ nrOfCandidates }} similar candidates
</button> </button>
</div> </div>
<div *ngIf="data" class="slider"> <div *ngIf="data" class="slider">
<mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" thumbLabel tickInterval="5"></mat-slider> <mat-slider [min]="0" [max]="maxLength" step="1" [value]="sliderValue" (input)="setSliderValue($event)" tickInterval="1"></mat-slider>
</div> </div>
<div *ngIf="data" class="info"> <div *ngIf="data" class="info">
<div class="histogram"> <div class="histogram">
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
<div class="container"> <div class="container">
<fieldset> <fieldset>
<legend>Info</legend> <legend>Info</legend>
# Candidates found: {{1000000}} <div>Candidates pruned: {{pruned}}%</div>
<div>Computing time: {{computingTime}} seconds</div>
</fieldset> </fieldset>
</div> </div>
</div> </div>
......
...@@ -305,4 +305,12 @@ export class ProgressViewComponent implements OnInit { ...@@ -305,4 +305,12 @@ export class ProgressViewComponent implements OnInit {
public showCandidates() { public showCandidates() {
this.state.sliderValue = this._sliderValue; this.state.sliderValue = this._sliderValue;
} }
public get pruned(): string {
return (100 - 100 * this.state.lshData.average_candidates.length / this.state.rawData[0].values.length).toPrecision(2);
}
public get computingTime(): number {
return this.state.computedTime / 1000;
}
} }
...@@ -22,6 +22,7 @@ export class StateService { ...@@ -22,6 +22,7 @@ export class StateService {
private _labels = {}; private _labels = {};
private _lshParameters: number[]; private _lshParameters: number[];
private _selection: number[]; private _selection: number[];
public computedTime = 0;
public windowSize = 120; public windowSize = 120;
public nrOfTables = 5; public nrOfTables = 5;
public hashSize = 5; public hashSize = 5;
...@@ -95,7 +96,9 @@ export class StateService { ...@@ -95,7 +96,9 @@ export class StateService {
*/ */
async lshInitial(): Promise<void> { async lshInitial(): Promise<void> {
this._weights = Array(this._queryWindow.length).fill(1); this._weights = Array(this._queryWindow.length).fill(1);
const t0 = new Date().getTime();
this.lshData = await this.api.lshInitial(this._queryWindow); this.lshData = await this.api.lshInitial(this._queryWindow);
this.computedTime = new Date().getTime() - t0;
this._lshParameters = this.lshData.parameters; this._lshParameters = this.lshData.parameters;
} }
...@@ -104,7 +107,9 @@ export class StateService { ...@@ -104,7 +107,9 @@ export class StateService {
*/ */
async update(labels, hashFunctions): Promise<void> { async update(labels, hashFunctions): Promise<void> {
this._weights = await this.api.getWeights(this._queryWindow, labels, this._weights, hashFunctions); this._weights = await this.api.getWeights(this._queryWindow, labels, this._weights, hashFunctions);
const t0 = new Date().getTime();
this.lshData = await this.api.lshUpdate(this._queryWindow, this._weights, this._lshParameters); this.lshData = await this.api.lshUpdate(this._queryWindow, this._weights, this._lshParameters);
this.computedTime = new Date().getTime() - t0;
} }
/** /**
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment