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

Progress window update

parent 1a4dfea3
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
} }
.label-button { .label-button {
width: 100%; width: 33%;
height: 30px; height: 30px;
} }
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<div class="button-holder"> <div class="button-holder">
<button class="correct-button label-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">&#10004;</button> <button class="correct-button label-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">&#10004;</button>
<button class="neutral-button label-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">&#8226;</button> <button class="neutral-button label-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">&#8226;</button>
<button class="incorrect-button label-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">&#10006;</button>
</div> </div>
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</div> </div>
......
...@@ -41,21 +41,22 @@ export class LabelingWindowComponent implements OnInit { ...@@ -41,21 +41,22 @@ export class LabelingWindowComponent implements OnInit {
if (!this.state.lshData) { if (!this.state.lshData) {
return; return;
} }
this.topk = this.state.lshData.samples;
this.subplots = []; this.subplots = [];
const values: number[][][] = await this.state.getWindow(this.topk); const values: number[][][] = await this.state.getWindow(this.topk);
for (const idx in this.topk) { for (const idx in this.topk) {
const window = values[idx]; const window = values[idx];
const data = []; const data = [];
this.state.selection.forEach((channelIndex, index) => { this.state.selection.forEach((channelIndex, index) => {
const channel = window[channelIndex] const channel = window[channelIndex];
data.push({ data.push({
x: [...Array(channel.length).keys()], x: [...Array(channel.length).keys()],
y: channel, y: channel,
type: 'line', type: 'line',
xaxis: 'x', xaxis: 'x',
yaxis: `y${index + 2}`, yaxis: `y${index + 2}`,
line: {
color: this.state.colors[channelIndex],
}
}); });
}); });
const subplots = []; const subplots = [];
...@@ -110,7 +111,7 @@ export class LabelingWindowComponent implements OnInit { ...@@ -110,7 +111,7 @@ export class LabelingWindowComponent implements OnInit {
async showSamples() { async showSamples() {
this.labels = []; this.labels = [];
this.topk = this.state.lshData.samples; this.topk = this.state.lshData.samples.filter((index) => this.state.labels[index] === undefined);
this.subplots = []; this.subplots = [];
const values: number[][][] = await this.state.getWindow(this.topk); const values: number[][][] = await this.state.getWindow(this.topk);
...@@ -125,6 +126,9 @@ export class LabelingWindowComponent implements OnInit { ...@@ -125,6 +126,9 @@ export class LabelingWindowComponent implements OnInit {
type: 'line', type: 'line',
xaxis: 'x', xaxis: 'x',
yaxis: `y${index + 2}`, yaxis: `y${index + 2}`,
line: {
color: this.state.colors[channelIndex],
}
}); });
}); });
const subplots = []; const subplots = [];
......
.subplot { .subplot {
margin-right: 20px; margin: 20px;
width: 150px; height: max-content;
border: 2px solid;
border-radius: 25px;
padding: 20px;
} }
.good-labels { .good-labels {
...@@ -16,3 +19,12 @@ ...@@ -16,3 +19,12 @@
overflow: auto; overflow: auto;
background-color: rgba(244, 67, 54, 0.5); background-color: rgba(244, 67, 54, 0.5);
} }
.channel_header {
height: 20px;
padding: 10px;
color: black;
font-weight: 500;
text-align: center;
vertical-align: middle;
}
<div class="good-labels" *ngIf="goodLabels.length > 0"> <div class="good-labels" *ngIf="goodLabels.length > 0">
<div class="subplot" *ngFor="let subplot of goodLabels"> <div class="subplot" *ngFor="let subplot of goodLabels">
<div class="channel_header">
Index: {{ subplot.index }}
</div>
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</div> </div>
</div> </div>
<div class="bad-labels" *ngIf="badLabels.length > 0"> <div class="bad-labels" *ngIf="badLabels.length > 0">
<div class="subplot" *ngFor="let subplot of badLabels"> <div class="subplot" *ngFor="let subplot of badLabels">
<div class="channel_header">
Index: {{ subplot.index }}
</div>
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</div> </div>
</div> </div>
...@@ -15,49 +15,76 @@ export class LabelsComponent implements OnInit { ...@@ -15,49 +15,76 @@ export class LabelsComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.state.onNewLabels.subscribe(() => { this.createSubplots(); }); this.state.onNewLabels.subscribe(() => { this.createSubplots(); });
this.state.onNewSelection.subscribe(() => { this.createSubplots(); });
} }
async createSubplots() { async createSubplots() {
this.goodLabels = []; this.goodLabels = [];
this.badLabels = []; this.badLabels = [];
const labelWindows: number[][][] = await this.state.getWindow(Object.keys(this.state.labels).map(Number)); const labelWindows: number[][][] = await this.state.getWindow(Object.keys(this.state.labels).map(Number));
Object.keys(this.state.labels).forEach((key, i) => { for (const idx in Object.keys(this.state.labels).map(Number)) {
const index = Number(key); const window = labelWindows[idx];
const plot = const data = [];
{ this.state.selection.forEach((channelIndex, index) => {
index, const channel = window[channelIndex];
data: [{ data.push({
x: [...Array(this.state.windowSize).keys()], x: [...Array(channel.length).keys()],
y: labelWindows[i], y: channel,
type: 'line' type: 'line',
}], xaxis: 'x',
layout: { yaxis: `y${index + 2}`,
title: `Index: ${index.toString()}`, });
hovermode: 'closest', });
autosize: true, const subplots = [];
margin: { this.state.selection.forEach((channelIndex, index) => {
l: 30, subplots.push([`xy${index + 2}`]);
r: 30, });
t: 30, const plot = {
b: 5, index: Object.keys(this.state.labels).map(Number)[idx],
pad: 4 data: data,
}, layout: {
height: 150, grid: {
width: 150, rows: this.state.selection.length,
titlefont: { columns: 1,
size: 9 subplots: subplots,
}, },
xaxis: { showlegend: false,
showticklabels: false, hovermode: 'closest',
} autosize: true,
margin: {
l: 30,
r: 30,
t: 30,
b: 0,
pad: 4
},
height: 100 * this.state.selection.length,
width: 300,
titlefont: {
size: 9
},
xaxis: {
showgrid: false,
zeroline: false,
showticklabels: false,
},
yaxis: {
zeroline: false,
showticklabels: false,
} }
}
};
this.state.selection.forEach((channelIndex, index) => {
plot.layout[`yaxis${index + 2}`] = {
zeroline: false,
showticklabels: false,
}; };
if (this.state.labels[key]) { });
if (this.state.labels[Object.keys(this.state.labels).map(Number)[idx]]) {
this.goodLabels.push(plot); this.goodLabels.push(plot);
} else { } else {
this.badLabels.push(plot); this.badLabels.push(plot);
} }
}); }
} }
} }
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<as-split-area [size]="70"> <as-split-area [size]="70">
<as-split direction="horizontal"> <as-split direction="horizontal">
<as-split-area [size]="70"> <as-split-area [size]="60">
<div class="channel_header"> <div class="channel_header">
Feedback Feedback
</div> </div>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<app-training-window></app-training-window> <app-training-window></app-training-window>
</div> </div>
</as-split-area> </as-split-area>
<as-split-area [size]="30"> <as-split-area [size]="40">
<div class="channel_header"> <div class="channel_header">
Results Results
</div> </div>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
overflow: scroll; overflow: scroll;
} }
.container { .main-container {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -116,3 +116,69 @@ path { ...@@ -116,3 +116,69 @@ path {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="container"> <div class="main-container">
<div class="left"> <as-split direction="horizontal">
<as-split-area [size]="10">
<div class="channel_header"> <div class="channel_header">
Channels Channels
</div> </div>
<div class="list"> <div class="list">
<div class="list-element" *ngFor="let index of allChannels"> <div class="list-element" *ngFor="let index of allChannels">
<mat-checkbox [checked]="isInSelection(index)" <label class="container">{{ names[index] }}
(change)="changeSelection(index)"> <input type="checkbox" [checked]="isInSelection(index)" (click)="changeSelection(index)">
{{ names[index] }} <span class="checkmark" [ngStyle]="isInSelection(index) && {'background-color': getColor(index)} || {}"></span>
</mat-checkbox> </label>
</div>
</div> </div>
</div> </as-split-area>
</div> <as-split-area [size]="90">
<div class="right"> <div class="channel_header">
<div class="channel_header"> Dataset overview
Overview </div>
</div> <div class="toolbar">
<div class="toolbar">
<label class="small-margin" for="windowsize">Start</label><br> <label class="small-margin" for="windowsize">Start</label><br>
<input class="small-margin" id="windowsize" [(ngModel)]="minx"> <input class="small-margin" id="windowsize" [(ngModel)]="minx">
<label class="small-margin" for="hashsize">End</label><br> <label class="small-margin" for="hashsize">End</label><br>
<input class="small-margin" [(ngModel)]="maxx" id="hashsize"> <input class="small-margin" [(ngModel)]="maxx" id="hashsize">
<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" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular>
</div> </div>
</div> </as-split-area>
</as-split>
</div> </div>
...@@ -36,6 +36,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -36,6 +36,7 @@ export class OverviewWindowComponent implements OnInit {
this.state.onNewData.subscribe(() => this.initializePlot()); this.state.onNewData.subscribe(() => this.initializePlot());
this.state.onNewLshData.subscribe(() => this.updatePlot()); this.state.onNewLshData.subscribe(() => this.updatePlot());
this.state.onNewSelection.subscribe(() => this.updateChannels()); this.state.onNewSelection.subscribe(() => this.updateChannels());
this.state.onNewSlider.subscribe(() => this.updateCandidates());
} }
dostuff3() { dostuff3() {
...@@ -201,6 +202,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -201,6 +202,7 @@ export class OverviewWindowComponent implements OnInit {
values: data, values: data,
text: 'Raw Values', text: 'Raw Values',
zIndex: 5, zIndex: 5,
'line-color': this.state.colors[channelIndex],
marker: { marker: {
alpha: 0.0, alpha: 0.0,
zIndex: 10 zIndex: 10
...@@ -243,8 +245,8 @@ export class OverviewWindowComponent implements OnInit { ...@@ -243,8 +245,8 @@ export class OverviewWindowComponent implements OnInit {
data: this.config data: this.config
}); });
console.log("showing plot"); console.log("showing plot");
this.minx = 0; this._minx = 0;
this.maxx = 120; this._maxx = this.state.rawData[0].values.length / 10;
// await this.debugClicked(); // await this.debugClicked();
} }
...@@ -255,6 +257,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -255,6 +257,7 @@ export class OverviewWindowComponent implements OnInit {
async updateChannels() { async updateChannels() {
console.log('updating plot'); console.log('updating plot');
console.log(this.state.selection);
this.graphset = this.graphset.slice(0, 1); this.graphset = this.graphset.slice(0, 1);
this.state.selection.forEach((channelIndex, index) => { this.state.selection.forEach((channelIndex, index) => {
const channel = this.state.rawData[channelIndex]; const channel = this.state.rawData[channelIndex];
...@@ -286,6 +289,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -286,6 +289,7 @@ export class OverviewWindowComponent implements OnInit {
values: data, values: data,
text: 'Raw Values', text: 'Raw Values',
zIndex: 5, zIndex: 5,
'line-color': this.state.colors[channelIndex],
marker: { marker: {
alpha: 0.0, alpha: 0.0,
zIndex: 10 zIndex: 10
...@@ -316,7 +320,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -316,7 +320,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers = []; this.markers = [];
for (const index in this.state.labels) { for (const index in this.state.labels) {
if (this.state.labels[index]) { if (this.state.labels[index]) {
this.goodLabels.push([Number(index), 0]); this.goodLabels.push([Number(index), 1]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
...@@ -362,37 +366,37 @@ export class OverviewWindowComponent implements OnInit { ...@@ -362,37 +366,37 @@ export class OverviewWindowComponent implements OnInit {
console.log("zoom"); console.log("zoom");
} }
async updateCandidates(sliderIndex) { async updateCandidates() {
// let candidates = []; let candidates = [];
// for (let i = sliderIndex; i < this.service.nrOfTables; i++) { for (let i = 0; i <= this.state.sliderValue; i++) {
// candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]); candidates = candidates.concat(this.state.lshData.average_table[Object.keys(this.state.lshData.average_table)[i]]);
// } }
// const labels = []; console.log('updating candidates');
// const markers = []; console.log(candidates);
// for (const index of candidates) {
// labels.push([Number(index) * (12000 / 6), 0]); this.candidateLabels = [];
// markers.push({ this.markers = [];
// type: 'area',
// // BUG: For some reason the range values are multiplied by 10 for (const index of candidates) {
// range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10], this.candidateLabels.push([Number(index), 0]);
// backgroundColor: '#b1a343', this.markers.push({
// }); type: 'area',
// } // BUG: For some reason the range values are multiplied by 10
// const newSeries = this.config.series.slice(0, 3); range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
// newSeries.push({ backgroundColor: '#b1a343',
// type: 'scatter', });
// values: labels, }