Progress window update

Former-commit-id: 18c83683

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

@@ -27,7 +27,7 @@
 }
 
 .label-button {
-  width: 100%;
+  width: 33%;
   height: 30px;
 }
 

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

@@ -7,6 +7,7 @@
       <div class="button-holder">
         <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>
       <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
     </div>

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

@@ -41,21 +41,22 @@ export class LabelingWindowComponent implements OnInit {
     if (!this.state.lshData) {
       return;
     }
-    this.topk = this.state.lshData.samples;
-
     this.subplots = [];
     const values: number[][][] = await this.state.getWindow(this.topk);
     for (const idx in this.topk) {
       const window = values[idx];
       const data = [];
       this.state.selection.forEach((channelIndex, index) => {
-        const channel = window[channelIndex]
+        const channel = window[channelIndex];
         data.push({
           x: [...Array(channel.length).keys()],
           y: channel,
           type: 'line',
           xaxis: 'x',
           yaxis: `y${index + 2}`,
+          line: {
+            color: this.state.colors[channelIndex],
+          }
         });
       });
       const subplots = [];
@@ -110,7 +111,7 @@ export class LabelingWindowComponent implements OnInit {
 
   async showSamples() {
     this.labels = [];
-    this.topk = this.state.lshData.samples;
+    this.topk = this.state.lshData.samples.filter((index) => this.state.labels[index] === undefined);
 
     this.subplots = [];
     const values: number[][][] = await this.state.getWindow(this.topk);
@@ -125,6 +126,9 @@ export class LabelingWindowComponent implements OnInit {
           type: 'line',
           xaxis: 'x',
           yaxis: `y${index + 2}`,
+          line: {
+            color: this.state.colors[channelIndex],
+          }
         });
       });
       const subplots = [];

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

 .subplot {
-  margin-right: 20px;
-  width: 150px;
+  margin: 20px;
+  height: max-content;
+  border: 2px solid;
+  border-radius: 25px;
+  padding: 20px;
 }
 
 .good-labels {
@@ -16,3 +19,12 @@
   overflow: auto;
   background-color: rgba(244, 67, 54, 0.5);
 }
+
+.channel_header {
+  height: 20px;
+  padding: 10px;
+  color: black;
+  font-weight: 500;
+  text-align: center;
+  vertical-align: middle;
+}

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

 <div class="good-labels" *ngIf="goodLabels.length > 0">
   <div class="subplot" *ngFor="let subplot of goodLabels">
+    <div class="channel_header">
+      Index: {{ subplot.index }}
+    </div>
     <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
   </div>
 </div>
 <div class="bad-labels" *ngIf="badLabels.length > 0">
   <div class="subplot" *ngFor="let subplot of badLabels">
+    <div class="channel_header">
+      Index: {{ subplot.index }}
+    </div>
     <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
   </div>
 </div>

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

@@ -15,49 +15,76 @@ export class LabelsComponent implements OnInit {
 
   ngOnInit(): void {
     this.state.onNewLabels.subscribe(() => { this.createSubplots(); });
+    this.state.onNewSelection.subscribe(() => { this.createSubplots(); });
   }
 
   async createSubplots() {
     this.goodLabels = [];
     this.badLabels = [];
     const labelWindows: number[][][] = await this.state.getWindow(Object.keys(this.state.labels).map(Number));
-    Object.keys(this.state.labels).forEach((key, i) => {
-      const index = Number(key);
-      const plot =
-        {
-          index,
-          data: [{
-            x: [...Array(this.state.windowSize).keys()],
-            y: labelWindows[i],
-            type: 'line'
-          }],
+    for (const idx in Object.keys(this.state.labels).map(Number)) {
+      const window = labelWindows[idx];
+      const data = [];
+      this.state.selection.forEach((channelIndex, index) => {
+        const channel = window[channelIndex];
+        data.push({
+          x: [...Array(channel.length).keys()],
+          y: channel,
+          type: 'line',
+          xaxis: 'x',
+          yaxis: `y${index + 2}`,
+        });
+      });
+      const subplots = [];
+      this.state.selection.forEach((channelIndex, index) => {
+        subplots.push([`xy${index + 2}`]);
+      });
+      const plot = {
+        index: Object.keys(this.state.labels).map(Number)[idx],
+        data: data,
         layout: {
-            title: `Index: ${index.toString()}`,
+          grid: {
+            rows: this.state.selection.length,
+            columns: 1,
+            subplots: subplots,
+          },
+          showlegend: false,
           hovermode: 'closest',
           autosize: true,
           margin: {
             l: 30,
             r: 30,
             t: 30,
-              b: 5,
+            b: 0,
             pad: 4
           },
-            height: 150,
-            width: 150,
+          height: 100 * this.state.selection.length,
+          width: 300,
           titlefont: {
             size: 9
           },
           xaxis: {
+            showgrid: false,
+            zeroline: false,
+            showticklabels: false,
+          },
+          yaxis: {
+            zeroline: false,
             showticklabels: false,
           }
         }
       };
-      if (this.state.labels[key]) {
+      this.state.selection.forEach((channelIndex, index) => {
+        plot.layout[`yaxis${index + 2}`] = {
+          zeroline: false,
+          showticklabels: false,
+        };
+      });
+      if (this.state.labels[Object.keys(this.state.labels).map(Number)[idx]]) {
         this.goodLabels.push(plot);
       } else {
         this.badLabels.push(plot);
       }
-    });
     }
-
+  }
 }

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

@@ -21,7 +21,7 @@
     <as-split-area [size]="70">
 
       <as-split direction="horizontal">
-        <as-split-area [size]="70">
+        <as-split-area [size]="60">
           <div class="channel_header">
             Feedback
           </div>
@@ -29,7 +29,7 @@
             <app-training-window></app-training-window>
           </div>
         </as-split-area>
-        <as-split-area [size]="30">
+        <as-split-area [size]="40">
           <div class="channel_header">
             Results
           </div>

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

@@ -25,7 +25,7 @@
   overflow: scroll;
 }
 
-.container {
+.main-container {
   height: 100%;
   display: flex;
   justify-content: space-between;
@@ -116,3 +116,69 @@ path {
   text-align: center;
   vertical-align: middle;
 }
+
+.container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 25px;
+  width: 25px;
+  background-color: #eee;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked ~ .checkmark {
+  background-color: #2196F3;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 9px;
+  top: 5px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}

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

-<div class="container">
-  <div class="left">
+<div class="main-container">
+  <as-split direction="horizontal">
+    <as-split-area [size]="10">
       <div class="channel_header">
         Channels
       </div>
       <div class="list">
         <div class="list-element" *ngFor="let index of allChannels">
-        <mat-checkbox [checked]="isInSelection(index)"
-                      (change)="changeSelection(index)">
-          {{ names[index] }}
-        </mat-checkbox>
+          <label class="container">{{ names[index] }}
+            <input type="checkbox" [checked]="isInSelection(index)" (click)="changeSelection(index)">
+            <span class="checkmark" [ngStyle]="isInSelection(index) && {'background-color': getColor(index)} || {}"></span>
+          </label>
         </div>
       </div>
-  </div>
-  <div class="right">
+    </as-split-area>
+    <as-split-area [size]="90">
       <div class="channel_header">
-      Overview
+        Dataset overview
       </div>
       <div class="toolbar">
 
@@ -31,5 +32,6 @@
       <div class="overview">
         <zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular>
       </div>
-  </div>
+    </as-split-area>
+  </as-split>
 </div>

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

@@ -36,6 +36,7 @@ export class OverviewWindowComponent implements OnInit {
     this.state.onNewData.subscribe(() => this.initializePlot());
     this.state.onNewLshData.subscribe(() => this.updatePlot());
     this.state.onNewSelection.subscribe(() => this.updateChannels());
+    this.state.onNewSlider.subscribe(() => this.updateCandidates());
   }
 
   dostuff3() {
@@ -201,6 +202,7 @@ export class OverviewWindowComponent implements OnInit {
           values: data,
           text: 'Raw Values',
           zIndex: 5,
+          'line-color': this.state.colors[channelIndex],
           marker: {
             alpha: 0.0,
             zIndex: 10
@@ -243,8 +245,8 @@ export class OverviewWindowComponent implements OnInit {
       data: this.config
     });
     console.log("showing plot");
-    this.minx = 0;
-    this.maxx = 120;
+    this._minx = 0;
+    this._maxx = this.state.rawData[0].values.length / 10;
     // await this.debugClicked();
   }
 
@@ -255,6 +257,7 @@ export class OverviewWindowComponent implements OnInit {
 
   async updateChannels() {
     console.log('updating plot');
+    console.log(this.state.selection);
     this.graphset = this.graphset.slice(0, 1);
     this.state.selection.forEach((channelIndex, index) => {
       const channel = this.state.rawData[channelIndex];
@@ -286,6 +289,7 @@ export class OverviewWindowComponent implements OnInit {
           values: data,
           text: 'Raw Values',
           zIndex: 5,
+          'line-color': this.state.colors[channelIndex],
           marker: {
             alpha: 0.0,
             zIndex: 10
@@ -316,7 +320,7 @@ export class OverviewWindowComponent implements OnInit {
     this.markers = [];
     for (const index in this.state.labels) {
       if (this.state.labels[index]) {
-        this.goodLabels.push([Number(index), 0]);
+        this.goodLabels.push([Number(index), 1]);
         this.markers.push({
           type: 'area',
           // BUG: For some reason the range values are multiplied by 10
@@ -362,37 +366,37 @@ export class OverviewWindowComponent implements OnInit {
     console.log("zoom");
   }
 
-  async updateCandidates(sliderIndex) {
-    // let candidates = [];
-    // for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
-    //   candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
-    // }
-    // const labels = [];
-    // const markers = [];
-    // for (const index of candidates) {
-    //   labels.push([Number(index) * (12000 / 6), 0]);
-    //   markers.push({
-    //     type: 'area',
-    //     // BUG: For some reason the range values are multiplied by 10
-    //     range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
-    //     backgroundColor: '#b1a343',
-    //   });
-    // }
-    // const newSeries = this.config.series.slice(0, 3);
-    // newSeries.push({
-    //   type: 'scatter',
-    //   values: labels,
-    //   text: 'Similar windows',
-    //   marker: {
-    //     backgroundColor: '#b1a343'
-    //   },
-    //   zIndex: 20,
-    // });
-    // this.config.series = newSeries;
-    // this.config.scaleX.markers = this.markers.concat(markers);
+  async updateCandidates() {
+    let candidates = [];
+    for (let i = 0; i <= this.state.sliderValue; i++) {
+      candidates = candidates.concat(this.state.lshData.average_table[Object.keys(this.state.lshData.average_table)[i]]);
+    }
+    console.log('updating candidates');
+    console.log(candidates);
+
+    this.candidateLabels = [];
+    this.markers = [];
+
+    for (const index of candidates) {
+      this.candidateLabels.push([Number(index), 0]);
+      this.markers.push({
+        type: 'area',
+        // BUG: For some reason the range values are multiplied by 10
+        range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
+        backgroundColor: '#b1a343',
+      });
+    }
+
+    for (const channel of this.config.graphset) {
+      if (channel.type === 'line') {
+        channel.scaleX.markers = this.markers;
+      } else {
+        channel.series[2].values = this.candidateLabels;
+      }