window size selection feature

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

@@ -86,3 +86,7 @@ path {
   overflow: scroll;
   border:2px solid #000;
 }
+
+.toolbar {
+  display: flex;
+}

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

@@ -12,6 +12,16 @@
   </span>
   </div>
   <div class="right">
-    <zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="height" (complete)="ping()"></zingchart-angular>
+    <div class="toolbar">
+      <button (click)="setquery()">
+        Set as query
+      </button>
+      <label class="small-margin" for="windowsize">Start</label><br>
+      <input class="small-margin" id="windowsize" [(ngModel)]="minx">
+
+      <label class="small-margin" for="hashsize">End</label><br>
+      <input class="small-margin" [(ngModel)]="maxx" id="hashsize">
+    </div>
+    <zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" (click)="clicked($event)" [height]="height" (complete)="ping()"></zingchart-angular>
   </div>
 </div>

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

@@ -21,6 +21,8 @@ export class OverviewWindowComponent implements OnInit {
   public candidateLabels = [];
   public pathWidth = 100;
   public allChannels: number[];
+  private _minx;
+  private _maxx;
 
   public data;
   public layout;
@@ -214,14 +216,29 @@ export class OverviewWindowComponent implements OnInit {
       });
     });
     zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
-      if (e.graphid !== `zingchart-ng-1-graph-preview`) {
+      if (e.stopupdate) {
         return;
+      } else {
+        this._minx = e.xmin;
+        this._maxx = e.xmax;
+      }
+      if (e.graphid !== `zingchart-ng-1-graph-preview`) {
+        this.chart.zoomto({
+          graphid: `zingchart-ng-1-graph-preview`,
+          xmin: e.xmin,
+          xmax: e.xmax,
+          stopupdate: true
+        });
       }
       for (let i = 1; i < this.graphset.length; i ++) {
+        if (i === e.graphid) {
+          continue;
+        }
         this.chart.zoomto({
           graphid: i,
           xmin: e.xmin,
-          xmax: e.xmax
+          xmax: e.xmax,
+          stopupdate: true
         });
       }
     });
@@ -234,7 +251,7 @@ export class OverviewWindowComponent implements OnInit {
     });
     console.log(this.config);
     console.log("showing plot");
-    await this.debugClicked();
+    // await this.debugClicked();
   }
 
   // changeSelection() {
@@ -385,6 +402,7 @@ export class OverviewWindowComponent implements OnInit {
   }
 
   async clicked(clickData) {
+    console.log(clickData);
     if (!this.state.querySelectionMode) {
       return;
     }
@@ -440,4 +458,61 @@ export class OverviewWindowComponent implements OnInit {
   get height(): number {
     return Math.max(75 * this.state.selection.length + 50, this.initialHeight);
   }
+
+  setquery() {
+    console.log(zingchart.exec('zingchart-ng-1-graph-0', 'getscales'));
+    console.log(zingchart.exec('zingchart-ng-1-graph-1', 'getscales'));
+    console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 0, name: 'scale-x' }));
+    console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 1, name: 'scale-x' }));
+    console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: '1', name: 'scale-x' }));
+    console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 'preview', name: 'scale-x' }));
+    console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { name: 'scale-x' }));
+    console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo'));
+    console.log(this.minx);
+    console.log(this.maxx);
+  }
+
+  get maxx(): number {
+    return this._maxx * 10;
+  }
+
+  set maxx(max: number) {
+    this._maxx = max / 10;
+    this.chart.zoomto({
+      graphid: `zingchart-ng-1-graph-preview`,
+      xmin: this._minx,
+      xmax: this._maxx,
+      stopupdate: true
+    });
+    for (let i = 1; i < this.graphset.length; i ++) {
+      this.chart.zoomto({
+        graphid: i,
+        xmin: this._minx,
+        xmax: this._maxx,
+        stopupdate: true
+      });
+    }
+  }
+
+  get minx(): number {
+    return this._minx * 10;
+  }
+
+  set minx(min: number) {
+    this._minx = min / 10;
+    this.chart.zoomto({
+      graphid: `zingchart-ng-1-graph-preview`,
+      xmin: this._minx,
+      xmax: this._maxx,
+      stopupdate: true
+    });
+    for (let i = 1; i < this.graphset.length; i ++) {
+      this.chart.zoomto({
+        graphid: i,
+        xmin: this._minx,
+        xmax: this._maxx,
+        stopupdate: true
+      });
+    }
+  }
 }

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

@@ -18,7 +18,11 @@ export class QueryWindowComponent implements OnInit {
         this.initializePlot();
       }
     });
-    this.state.onNewSelection.subscribe(() => { this.updateChannels(); });
+    this.state.onNewSelection.subscribe(() => {
+      if (this.state.queryWindow) {
+        this.updateChannels();
+      }
+    });
   }
 
   initializePlot(): void {