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

GUI visual improvement

parent 660d72ed
.subplot { .subplot {
margin-right: 20px; margin-right: 20px;
width: 150px; display: flex;
justify-content: center;
} }
.subplot-container { .subplot-container {
display: flex; display: flex;
overflow: auto; overflow-x: scroll;
width: 95%;
} }
button { .container {
padding: 0 20px; display: flex;
justify-content: space-between;
} }
.label-button { .train-button {
padding: 10px 20px; height: 30px;
margin-top: 20px;
} }
.button-holder { .button-holder {
display: flex; display: flex;
justify-content: center; flex-direction: column;
} }
.label-button {
width: 30px;
height: 30px;
}
.correct-selected { .correct-selected {
background-color: #4caf50 background-color: #4caf50
} }
......
<div *ngIf="windowSimilarity" class="subplot-container"> <div class="container">
<div class="subplot" *ngFor="let subplot of subplots"> <div *ngIf="windowSimilarity" class="subplot-container">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <div class="subplot" *ngFor="let subplot of subplots">
<div class="button-holder"> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<button class="correct-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">V</button> <div class="button-holder">
<button class="neutral-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">-</button> <button class="correct-button label-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">&#10004;</button>
<button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">X</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> </div>
</div> </div>
<div class="button-holder"> <button *ngIf="windowSimilarity" (click)="changeTables()" class="train-button">Train</button>
<button *ngIf="windowSimilarity" (click)="changeTables()" class="label-button">Update tables</button>
</div>
</div> </div>
...@@ -106,6 +106,12 @@ export class LabelingWindowComponent implements OnInit { ...@@ -106,6 +106,12 @@ export class LabelingWindowComponent implements OnInit {
size: 9 size: 9
}, },
xaxis: { xaxis: {
showgrid: false,
zeroline: false,
showticklabels: false,
},
yaxis: {
zeroline: false,
showticklabels: false, showticklabels: false,
} }
} }
......
...@@ -29,3 +29,18 @@ ...@@ -29,3 +29,18 @@
.show { .show {
display: block; display: block;
} }
.left {
width: 80%;
}
.right {
width: 20%;
border-left: groove;
}
.container {
display: flex;
justify-content: space-between;
height: 100%;
}
<div style="display: flex; justify-content: space-between;"> <div class="container">
<div class="left" style="width: 80%"> <div class="left">
<app-overview-window style="z-index: 10"></app-overview-window> <app-overview-window style="z-index: 10"></app-overview-window>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)"> <mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Training"> <mat-tab label="Training">
<app-table-overview></app-table-overview>
<app-labeling-window></app-labeling-window> <app-labeling-window></app-labeling-window>
<app-table-overview></app-table-overview>
</mat-tab> </mat-tab>
<mat-tab label="Labeled data"> <mat-tab label="Labeled data">
<app-labels></app-labels> <app-labels></app-labels>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<div style="width: 20%;"> <div class="right">
<app-query-window></app-query-window> <app-query-window></app-query-window>
<app-progress-view></app-progress-view> <app-progress-view></app-progress-view>
</div> </div>
......
<zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="200"></zingchart-angular> <zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
...@@ -69,11 +69,13 @@ export class OverviewWindowComponent implements OnInit { ...@@ -69,11 +69,13 @@ export class OverviewWindowComponent implements OnInit {
this.config = { this.config = {
type: "mixed", type: "mixed",
preview: { preview: {
height: " 30px", height: "30px",
position: "0% 100%",
'auto-fit': true 'auto-fit': true
}, },
"plotarea": { "plotarea": {
"margin-top": "10px" "margin-top": "10px",
"margin-bottom": "50%"
}, },
scaleX: { scaleX: {
zooming: true, zooming: true,
......
.title {
display: flex;
justify-content: center;
}
.show-candidates-button {
display: flex;
justify-content: center;
}
.button-holder {
display: flex;
justify-content: center;
}
.window {
display: flex;
justify-content: center;
}
<div *ngIf="data" class="window"> <div class="container" *ngIf="data">
<div class="plots"> <span class="title"><b>Training Progress</b></span>
<plotly-plot [data]="data" [layout]="layout" (sliderEnd)="setSliderValue($event)"></plotly-plot> <div class="window">
<div class="plots">
<plotly-plot [data]="data" [layout]="layout" (sliderChange)="setSliderValue($event)"></plotly-plot>
</div>
</div>
<div class="button-holder">
<button class="show-candidates-button" (click)="showCandidates()">Show all {{ amountOfCandidates }} candidates</button>
</div> </div>
</div> </div>
...@@ -11,6 +11,8 @@ export class ProgressViewComponent implements OnInit { ...@@ -11,6 +11,8 @@ export class ProgressViewComponent implements OnInit {
public data; public data;
public layout; public layout;
private _sliderValue;
constructor(private cache: CacheService) { } constructor(private cache: CacheService) { }
ngOnInit(): void { ngOnInit(): void {
...@@ -70,8 +72,7 @@ export class ProgressViewComponent implements OnInit { ...@@ -70,8 +72,7 @@ export class ProgressViewComponent implements OnInit {
args: ['visible', v] args: ['visible', v]
}); });
} }
// console.log(averages.length - 1 - highest); this._sliderValue = averages.length - 1 - highest;
// visibility[averages.length - 1 - highest] = true;
this.data = data; this.data = data;
this.layout = { this.layout = {
showlegend: false, showlegend: false,
...@@ -84,10 +85,13 @@ export class ProgressViewComponent implements OnInit { ...@@ -84,10 +85,13 @@ export class ProgressViewComponent implements OnInit {
pad: 4 pad: 4
}, },
xaxis: { xaxis: {
showticklabels: false showgrid: false,
zeroline: false,
showticklabels: false,
}, },
yaxis: { yaxis: {
showticklabels: false zeroline: false,
showticklabels: false,
}, },
height: 300, height: 300,
width: 200, width: 200,
...@@ -127,6 +131,14 @@ export class ProgressViewComponent implements OnInit { ...@@ -127,6 +131,14 @@ export class ProgressViewComponent implements OnInit {
} }
public setSliderValue(v) { public setSliderValue(v) {
this.cache.sliderValue = v.slider.active; this._sliderValue = v.slider.active;
}
public showCandidates() {
this.cache.sliderValue = this._sliderValue;
}
public get amountOfCandidates() {
return this.similarity[this._sliderValue.toString()].length;
} }
} }
.query-container { .query-container {
margin: auto; margin: auto;
border: 2px solid black; border-bottom: groove;
width: 80%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
......
...@@ -44,9 +44,12 @@ export class QueryWindowComponent implements OnInit { ...@@ -44,9 +44,12 @@ export class QueryWindowComponent implements OnInit {
size: 9 size: 9
}, },
xaxis: { xaxis: {
showgrid: false,
zeroline: false,
showticklabels: false, showticklabels: false,
}, },
yaxis: { yaxis: {
zeroline: false,
showticklabels: false, showticklabels: false,
} }
} }
......
.window { .window {
width: 100%; width: 100%;
overflow: scroll; overflow-x: scroll;
} }
.plots { .plots {
display: flex; display: flex;
} }
.subplot:hover { .subplot {
cursor: pointer !important; display: grid;
}
.plotly-plot, .button-holder {
grid-column: 1;
grid-row: 1;
}
.query-button {
float: right;
}
.button-holder {
z-index: 5;
} }
<div *ngIf="tables" class="window"> <div *ngIf="visible" class="window">
<div class="plots"> <div class="plots">
<div class="subplot" *ngFor="let subplot of subplots"> <div class="subplot" *ngFor="let subplot of subplots">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
...@@ -6,8 +6,10 @@ ...@@ -6,8 +6,10 @@
</div> </div>
<div class="plots"> <div class="plots">
<div class="subplot" *ngFor="let subplot of averages"> <div class="subplot" *ngFor="let subplot of averages">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot class="plotly-plot" [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<button (click)="setQuery(subplot.data)">Use as query</button> <div class="button-holder">
<button class="query-button" (click)="setQuery(subplot.data)">&#x21c4;</button>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -17,10 +17,6 @@ export class TableOverviewComponent implements OnInit { ...@@ -17,10 +17,6 @@ export class TableOverviewComponent implements OnInit {
this.service.onNewSimilarity.subscribe(() => this.createPlots()); this.service.onNewSimilarity.subscribe(() => this.createPlots());
} }
public get tables() {
return this.service.tables;
}
averagePlot(average): object { averagePlot(average): object {
return { return {
data: [ data: [
...@@ -165,4 +161,12 @@ export class TableOverviewComponent implements OnInit { ...@@ -165,4 +161,12 @@ export class TableOverviewComponent implements OnInit {
this.service.queryWindow = await this.service.getQueryWindow(data[0].y); this.service.queryWindow = await this.service.getQueryWindow(data[0].y);
await this.service.getSimilarWindows(); await this.service.getSimilarWindows();
} }
public get tables() {
return this.service.tables;
}
public get visible() {
return !this.service.querySelectionMode;
}
} }
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<style>
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
</style>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>PSEUDo</title> <title>PSEUDo</title>
......
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment=""> <list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" afterDir="false" />
</list> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
...@@ -15,8 +16,8 @@ ...@@ -15,8 +16,8 @@
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="262"> <state relative-caret-position="2448">
<caret line="166" column="34" lean-forward="true" selection-start-line="166" selection-start-column="34" selection-end-line="166" selection-end-column="34" /> <caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
...@@ -141,15 +142,15 @@ ...@@ -141,15 +142,15 @@
<workItem from="1599487808817" duration="1192000" /> <workItem from="1599487808817" duration="1192000" />
<workItem from="1599578907139" duration="8436000" /> <workItem from="1599578907139" duration="8436000" />
<workItem from="1599661275060" duration="1249000" /> <workItem from="1599661275060" duration="1249000" />
<workItem from="1600001984238" duration="4555000" /> <workItem from="1600001984238" duration="5154000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="98611000" /> <option name="totallyTimeSpent" value="99210000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="-7" y="-7" width="1295" height="695" extended-state="6" /> <frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
<editor active="true" /> <editor active="true" />
<layout> <layout>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.28698465" /> <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.28698465" />
...@@ -208,8 +209,8 @@ ...@@ -208,8 +209,8 @@
</entry> </entry>
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="262"> <state relative-caret-position="2448">
<caret line="166" column="34" lean-forward="true" selection-start-line="166" selection-start-column="34" selection-end-line="166" selection-end-column="34" /> <caret line="168" column="22" lean-forward="true" selection-start-line="168" selection-start-column="22" selection-end-line="168" selection-end-column="22" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
......
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