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

Scrollable overview


Former-commit-id: 56da1762
parent ae0aef53
......@@ -13,24 +13,26 @@
</div>
</div>
</as-split-area>
<as-split-area [size]="90">
<as-split-area [size]="90" [style]="{'overflow-y': 'hidden'}">
<div class="channel_header">
Dataset overview
</div>
<div class="toolbar">
<label class="small-margin" for="windowsize">Start</label><br>
<input class="small-margin" id="windowsize" [(ngModel)]="minx">
<label class="small-margin" for="min">Start</label><br>
<input class="small-margin" id="min" [(ngModel)]="minx">
<label class="small-margin" for="hashsize">End</label><br>
<input class="small-margin" [(ngModel)]="maxx" id="hashsize">
<label class="small-margin" for="max">End</label><br>
<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()">
Set as query
</button>
</div>
<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>
</as-split-area>
</as-split>
......
......@@ -211,6 +211,7 @@ export class OverviewWindowComponent implements OnInit {
});
});
zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
console.log("zoom");
if (e.stopupdate) {
return;
} else {
......@@ -363,7 +364,7 @@ export class OverviewWindowComponent implements OnInit {
}
ping() {
console.log("zoom");
console.log("ping");
}
async updateCandidates() {
......@@ -375,8 +376,29 @@ export class OverviewWindowComponent implements OnInit {
console.log(candidates);
this.candidateLabels = [];
this.goodLabels = [];
this.badLabels = [];
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) {
this.candidateLabels.push([Number(index), 0]);
this.markers.push({
......@@ -391,6 +413,8 @@ export class OverviewWindowComponent implements OnInit {
if (channel.type === 'line') {
channel.scaleX.markers = this.markers;
} else {
channel.series[0].values = this.goodLabels;
channel.series[1].values = this.badLabels;
channel.series[2].values = this.candidateLabels;
}
}
......@@ -428,15 +452,24 @@ export class OverviewWindowComponent implements OnInit {
// this.state.labels = temp;
// }
zoom(p) {
if (!p.ev) {
return;
}
if (p.ev.wheelDelta > 0) {
zingchart.exec("zingchart-ng-1", 'zoomin');
} else if (p.ev.wheelDelta < 0) {
zingchart.exec("zingchart-ng-1", 'zoomout');
scroll(p) {
p.stopPropagation();
console.log('mousewheel');
console.log(p);
console.log(p.deltaY);
const q = Math.round((this._maxx - this._minx) / 10);
if (p.deltaY > 0) {
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 {
......
......@@ -44,5 +44,10 @@ mat-slider {
width: 400px;
}
.button {
display: flex;
justify-content: center;
}
line { stroke: #5e4646; }
circle { stroke: #fff; stroke-width: 1.5px; }
......@@ -2,13 +2,13 @@
<div class="main-container">
<mat-tab-group mat-stretch-tabs animationDuration="0ms">
<mat-tab label="Classifier">
<div *ngIf="data" class="container">
<div *ngIf="data" class="container button">
<button (click)="showCandidates()">
Show {{ nrOfCandidates }} similar candidates
</button>
</div>
<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 *ngIf="data" class="info">
<div class="histogram">
......@@ -20,7 +20,8 @@
<div class="container">
<fieldset>
<legend>Info</legend>
# Candidates found: {{1000000}}
<div>Candidates pruned: {{pruned}}%</div>
<div>Computing time: {{computingTime}} seconds</div>
</fieldset>
</div>
</div>
......
......@@ -305,4 +305,12 @@ export class ProgressViewComponent implements OnInit {
public showCandidates() {
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 {
private _labels = {};
private _lshParameters: number[];
private _selection: number[];
public computedTime = 0;
public windowSize = 120;
public nrOfTables = 5;
public hashSize = 5;
......@@ -95,7 +96,9 @@ export class StateService {
*/
async lshInitial(): Promise<void> {
this._weights = Array(this._queryWindow.length).fill(1);
const t0 = new Date().getTime();
this.lshData = await this.api.lshInitial(this._queryWindow);
this.computedTime = new Date().getTime() - t0;
this._lshParameters = this.lshData.parameters;
}
......@@ -104,7 +107,9 @@ export class StateService {
*/
async update(labels, hashFunctions): Promise<void> {
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.computedTime = new Date().getTime() - t0;
}
/**
......
Markdown is supported
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