GUI visual improvement

AngularApp/prototype/src/app/labeling-window/labeling-window.component.css

 .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

-<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

@@ -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

@@ -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

-<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

-<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

@@ -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

+.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

-<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

@@ -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

 .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

@@ -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

 .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

-<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

@@ -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

 <!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

@@ -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>