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

GUI visual improvement

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