Add inputs for horizontal scaling.

frontend/src/app/overview-window/overview-window.component.css

@@ -53,8 +53,9 @@ html, body {
   overflow-y: scroll;
 }
 
-.small-margin {
+.parameter {
   margin: auto;
+  padding: 2px;
 }
 
 button {

frontend/src/app/overview-window/overview-window.component.html

@@ -21,15 +21,27 @@
         Dataset overview
       </div>
       <div class="toolbar">
+        <label class="parameter" for="min">Start</label><br>
+        <input type="number" class="parameter" id="min" [(ngModel)]="minx">
 
-        <label class="small-margin" for="min">Start</label><br>
-        <input type="number" class="small-margin" id="min" [(ngModel)]="minx">
+        <label class="parameter" for="max">End</label><br>
+        <input type="number" class="parameter" [(ngModel)]="maxx" id="max">
 
-        <label class="small-margin" for="max">End</label><br>
-        <input type="number" class="small-margin" [(ngModel)]="maxx" id="max">
+        <label class="parameter" for="w">Length</label><br>
+        <input type="number" class="parameter" [(ngModel)]="windowsize" id="w">
+
+        <label class="parameter" for="length-scaling">x scaling</label><br>
+        <input type="checkbox" class="parameter" [(ngModel)]="hasHorizontalScaling" id="length-scaling">
+
+        <label class="parameter" for="relWidth-min">Min</label><br>
+        <input type="number" class="parameter" [(ngModel)]="relwidthMin" id="relWidth-min" step="0.1" min="0.1" max="1" [disabled]="!hasHorizontalScaling">
+
+        <label class="parameter" for="relWidth-min">Max</label><br>
+        <input type="number" class="parameter" [(ngModel)]="relwidthMax" id="relWidth-max" step="1" min="1" [disabled]="!hasHorizontalScaling">
+
+        <label class="parameter" for="resolution">Resolution</label><br>
+        <input type="number" class="parameter" [(ngModel)]="resolution" id="resolution" step="1" min="3" [disabled]="!hasHorizontalScaling">
 
-        <label class="small-margin" for="w">Window Size</label><br>
-        <input type="number" class="small-margin" [(ngModel)]="windowsize" id="w">
         <button (click)="setquery()">
           Set as query
         </button>

frontend/src/app/overview-window/overview-window.component.ts

@@ -22,6 +22,10 @@ export class OverviewWindowComponent implements OnInit {
   public allChannels: number[];
   private _minx;
   private _maxx;
+  private _hasHorizontalScaling = false;
+  private _relwidthMin = 0.5;
+  private _relwidthMax = 2;
+  private _resolution = 7;
   public currentSelection;
   private showingCandidates = false;
 
@@ -229,7 +233,6 @@ export class OverviewWindowComponent implements OnInit {
     });
   }
 
-
   async updateChannels() {
     console.log('updating plot');
     console.log(this.state.selection);
@@ -525,6 +528,36 @@ export class OverviewWindowComponent implements OnInit {
     this.maxx = this.minx + size;
   }
 
+  get relwidthMax() {
+    return this._relwidthMax;
+  }
+
+  set relwidthMax(value) {
+    this._relwidthMax = value;
+  }
+  get relwidthMin() {
+    return this._relwidthMin;
+  }
+
+  set relwidthMin(value) {
+    this._relwidthMin = value;
+  }
+
+  get resolution(): number {
+    return this._resolution;
+  }
+
+  set resolution(value: number) {
+    this._resolution = value;
+  }
+  get hasHorizontalScaling(): boolean {
+    return this._hasHorizontalScaling;
+  }
+
+  set hasHorizontalScaling(value: boolean) {
+    this._hasHorizontalScaling = value;
+  }
+
   get names(): string[] {
     return this.state.rawData.map((data, index) => data.name ? data.name : 'Channel ' + index.toString());
   }

frontend/src/app/state.service.ts

@@ -89,7 +89,6 @@ export class StateService {
     this.onNewWindows.emit();
   }
 
-
   /**
    * This function performs the first iteration of LSH
    */