Commit 0744aab0 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

window size selection feature


Former-commit-id: 4b5a8fe6
parent 5418572e
...@@ -86,3 +86,7 @@ path { ...@@ -86,3 +86,7 @@ path {
overflow: scroll; overflow: scroll;
border:2px solid #000; border:2px solid #000;
} }
.toolbar {
display: flex;
}
...@@ -12,6 +12,16 @@ ...@@ -12,6 +12,16 @@
</span> </span>
</div> </div>
<div class="right"> <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>
</div> </div>
...@@ -21,6 +21,8 @@ export class OverviewWindowComponent implements OnInit { ...@@ -21,6 +21,8 @@ export class OverviewWindowComponent implements OnInit {
public candidateLabels = []; public candidateLabels = [];
public pathWidth = 100; public pathWidth = 100;
public allChannels: number[]; public allChannels: number[];
private _minx;
private _maxx;
public data; public data;
public layout; public layout;
...@@ -214,14 +216,29 @@ export class OverviewWindowComponent implements OnInit { ...@@ -214,14 +216,29 @@ export class OverviewWindowComponent implements OnInit {
}); });
}); });
zingchart.bind('zingchart-ng-1', 'zoom', (e) => { zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
if (e.graphid !== `zingchart-ng-1-graph-preview`) { if (e.stopupdate) {
return; 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 ++) { for (let i = 1; i < this.graphset.length; i ++) {
if (i === e.graphid) {
continue;
}
this.chart.zoomto({ this.chart.zoomto({
graphid: i, graphid: i,
xmin: e.xmin, xmin: e.xmin,
xmax: e.xmax xmax: e.xmax,
stopupdate: true
}); });
} }
}); });
...@@ -234,7 +251,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -234,7 +251,7 @@ export class OverviewWindowComponent implements OnInit {
}); });
console.log(this.config); console.log(this.config);
console.log("showing plot"); console.log("showing plot");
await this.debugClicked(); // await this.debugClicked();
} }
// changeSelection() { // changeSelection() {
...@@ -385,6 +402,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -385,6 +402,7 @@ export class OverviewWindowComponent implements OnInit {
} }
async clicked(clickData) { async clicked(clickData) {
console.log(clickData);
if (!this.state.querySelectionMode) { if (!this.state.querySelectionMode) {
return; return;
} }
...@@ -440,4 +458,61 @@ export class OverviewWindowComponent implements OnInit { ...@@ -440,4 +458,61 @@ export class OverviewWindowComponent implements OnInit {
get height(): number { get height(): number {
return Math.max(75 * this.state.selection.length + 50, this.initialHeight); 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
});
}
}
} }
...@@ -18,7 +18,11 @@ export class QueryWindowComponent implements OnInit { ...@@ -18,7 +18,11 @@ export class QueryWindowComponent implements OnInit {
this.initializePlot(); this.initializePlot();
} }
}); });
this.state.onNewSelection.subscribe(() => { this.updateChannels(); }); this.state.onNewSelection.subscribe(() => {
if (this.state.queryWindow) {
this.updateChannels();
}
});
} }
initializePlot(): void { initializePlot(): void {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment