Updated progress view

AngularApp/prototype/src/app/app.component.html

@@ -2,10 +2,8 @@
   <div class="left" style="width: 80%">
     <app-overview-window></app-overview-window>
     <mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
-      <mat-tab label="Samples">
+      <mat-tab label="Training">
         <app-labeling-window></app-labeling-window>
-      </mat-tab>
-      <mat-tab label="Hashtables">
         <app-table-overview></app-table-overview>
       </mat-tab>
       <mat-tab label="Labeled data">

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

@@ -97,9 +97,10 @@ export class LabelingWindowComponent implements OnInit {
               l: 30,
               r: 30,
               t: 30,
+              b: 0,
               pad: 4
             },
-            height: 200,
+            height: 150,
             width: 150,
             titlefont: {
               size: 9

AngularApp/prototype/src/app/labels/labels.component.ts

@@ -37,13 +37,17 @@ export class LabelsComponent implements OnInit {
               l: 30,
               r: 30,
               t: 30,
+              b: 5,
               pad: 4
             },
-            height: 200,
+            height: 150,
             width: 150,
             titlefont: {
               size: 9
             },
+            xaxis: {
+              showticklabels: false,
+            }
           }
         };
       if (this.service.labels[key]) {

AngularApp/prototype/src/app/overview-window/overview-window.component.ts

@@ -39,7 +39,11 @@ export class OverviewWindowComponent {
     this.config = {
       type: "mixed",
       preview: {
-        // 'auto-fit': true
+        height: " 30px",
+        'auto-fit': true
+      },
+      "plotarea": {
+        "margin-top": "10px"
       },
       'scale-x': {
         zooming: true,
@@ -47,7 +51,7 @@ export class OverviewWindowComponent {
         'auto-fit': true
       },
       'scale-y': {
-        zooming: true,
+        // zooming: true,
         'auto-fit': true
       },
       series: [

AngularApp/prototype/src/app/progress-view/progress-view.component.ts

@@ -15,21 +15,37 @@ export class ProgressViewComponent implements OnInit {
     this.cache.onNewSimilarity.subscribe(() => { this.initializeInfo() });
   }
 
-  averagePlot(average) {
+  averagePlot(averages) {
+    const data = averages.map((average, i) => {
       return {
-      data: [{
         x: [...Array(average.length).keys()],
         y: average,
         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: {
+        showlegend: false,
         hovermode: 'closest',
         autosize: true,
         margin: {
-          l: 10,
-          r: 10,
-          t: 10,
-          b: 10,
+          l: 50,
+          r: 30,
+          t: 30,
           pad: 4
         },
         xaxis: {
@@ -38,9 +54,22 @@ export class ProgressViewComponent implements OnInit {
         yaxis: {
           showticklabels: false
         },
-        height: 100,
-        width: screen.width * 0.1,
+        height: 300,
+        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 {
       allWindows.push(this.similarity[key]);
     }
     const averages = await this.cache.getAverageWindow(allWindows);
-    this.plots = averages.map(x => this.averagePlot(x));
+    this.plots = [this.averagePlot(averages)];
   }
 
   public get similarity() {

AngularApp/prototype/src/app/query-window/query-window.component.ts

@@ -37,9 +37,10 @@ export class QueryWindowComponent implements OnInit {
             l: 50,
             r: 30,
             t: 30,
+            b: 5,
             pad: 4
           },
-          height: 200,
+          height: 150,
           width: 150,
           titlefont: {
             size: 9