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

Updated progress view

parent 1fee93d4
...@@ -2,10 +2,8 @@ ...@@ -2,10 +2,8 @@
<div class="left" style="width: 80%"> <div class="left" style="width: 80%">
<app-overview-window></app-overview-window> <app-overview-window></app-overview-window>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)"> <mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Samples"> <mat-tab label="Training">
<app-labeling-window></app-labeling-window> <app-labeling-window></app-labeling-window>
</mat-tab>
<mat-tab label="Hashtables">
<app-table-overview></app-table-overview> <app-table-overview></app-table-overview>
</mat-tab> </mat-tab>
<mat-tab label="Labeled data"> <mat-tab label="Labeled data">
......
...@@ -97,9 +97,10 @@ export class LabelingWindowComponent implements OnInit { ...@@ -97,9 +97,10 @@ export class LabelingWindowComponent implements OnInit {
l: 30, l: 30,
r: 30, r: 30,
t: 30, t: 30,
b: 0,
pad: 4 pad: 4
}, },
height: 200, height: 150,
width: 150, width: 150,
titlefont: { titlefont: {
size: 9 size: 9
......
...@@ -37,13 +37,17 @@ export class LabelsComponent implements OnInit { ...@@ -37,13 +37,17 @@ export class LabelsComponent implements OnInit {
l: 30, l: 30,
r: 30, r: 30,
t: 30, t: 30,
b: 5,
pad: 4 pad: 4
}, },
height: 200, height: 150,
width: 150, width: 150,
titlefont: { titlefont: {
size: 9 size: 9
}, },
xaxis: {
showticklabels: false,
}
} }
}; };
if (this.service.labels[key]) { if (this.service.labels[key]) {
......
...@@ -39,7 +39,11 @@ export class OverviewWindowComponent { ...@@ -39,7 +39,11 @@ export class OverviewWindowComponent {
this.config = { this.config = {
type: "mixed", type: "mixed",
preview: { preview: {
// 'auto-fit': true height: " 30px",
'auto-fit': true
},
"plotarea": {
"margin-top": "10px"
}, },
'scale-x': { 'scale-x': {
zooming: true, zooming: true,
...@@ -47,7 +51,7 @@ export class OverviewWindowComponent { ...@@ -47,7 +51,7 @@ export class OverviewWindowComponent {
'auto-fit': true 'auto-fit': true
}, },
'scale-y': { 'scale-y': {
zooming: true, // zooming: true,
'auto-fit': true 'auto-fit': true
}, },
series: [ series: [
......
...@@ -15,21 +15,37 @@ export class ProgressViewComponent implements OnInit { ...@@ -15,21 +15,37 @@ export class ProgressViewComponent implements OnInit {
this.cache.onNewSimilarity.subscribe(() => { this.initializeInfo() }); this.cache.onNewSimilarity.subscribe(() => { this.initializeInfo() });
} }
averagePlot(average) { averagePlot(averages) {
const data = averages.map((average, i) => {
return { return {
data: [{
x: [...Array(average.length).keys()], x: [...Array(average.length).keys()],
y: average, y: average,
type: 'line', type: 'line',
}], visible: i === 0
};
});
const visibility = Array(averages.length).fill(false);
const steps = [];
for (let i = averages.length - 1; i >= 0; i--) {
const v = visibility.slice();
v[i] = true;
steps.push({
label: (100 * (averages.length - i) / averages.length).toString() + '%',
method: 'restyle',
args: ['visible', v]
});
}
visibility[averages.length - 1] = true;
return {
data,
layout: { layout: {
showlegend: false,
hovermode: 'closest', hovermode: 'closest',
autosize: true, autosize: true,
margin: { margin: {
l: 10, l: 50,
r: 10, r: 30,
t: 10, t: 30,
b: 10,
pad: 4 pad: 4
}, },
xaxis: { xaxis: {
...@@ -38,9 +54,22 @@ export class ProgressViewComponent implements OnInit { ...@@ -38,9 +54,22 @@ export class ProgressViewComponent implements OnInit {
yaxis: { yaxis: {
showticklabels: false showticklabels: false
}, },
height: 100, height: 300,
width: screen.width * 0.1, width: 200,
sliders: [{
active: averages.length - 1,
pad: {t: 30},
currentvalue: {
xanchor: 'right',
prefix: 'Similarity: ',
font: {
color: '#888',
size: 10
} }
},
steps
}]
},
}; };
} }
...@@ -52,7 +81,7 @@ export class ProgressViewComponent implements OnInit { ...@@ -52,7 +81,7 @@ export class ProgressViewComponent implements OnInit {
allWindows.push(this.similarity[key]); allWindows.push(this.similarity[key]);
} }
const averages = await this.cache.getAverageWindow(allWindows); const averages = await this.cache.getAverageWindow(allWindows);
this.plots = averages.map(x => this.averagePlot(x)); this.plots = [this.averagePlot(averages)];
} }
public get similarity() { public get similarity() {
......
...@@ -37,9 +37,10 @@ export class QueryWindowComponent implements OnInit { ...@@ -37,9 +37,10 @@ export class QueryWindowComponent implements OnInit {
l: 50, l: 50,
r: 30, r: 30,
t: 30, t: 30,
b: 5,
pad: 4 pad: 4
}, },
height: 200, height: 150,
width: 150, width: 150,
titlefont: { titlefont: {
size: 9 size: 9
......
This diff is collapsed.
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