only allow zoom by mouse wheel or selection when time axis is available
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
||||||
|
import { DataType, AxesTypes } from '../plot.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'pdb-plot-view',
|
selector: 'pdb-plot-view',
|
||||||
@@ -16,6 +17,8 @@ export class PlotViewComponent implements OnInit {
|
|||||||
|
|
||||||
imageUrl : string;
|
imageUrl : string;
|
||||||
|
|
||||||
|
axes: AxesTypes;
|
||||||
|
|
||||||
@Output()
|
@Output()
|
||||||
zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
|
zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
|
||||||
|
|
||||||
@@ -89,7 +92,7 @@ export class PlotViewComponent implements OnInit {
|
|||||||
//console.log("dragStart inPlot: " + this.isInPlot(event));
|
//console.log("dragStart inPlot: " + this.isInPlot(event));
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (event.buttons == 1 && this.isInPlot(event)) {
|
if (event.buttons == 1 && this.isInPlot(event) && this.axes.hasXAxis(DataType.Time)) {
|
||||||
const pos = this.positionInImage(event);
|
const pos = this.positionInImage(event);
|
||||||
this.in_drag_mode = true;
|
this.in_drag_mode = true;
|
||||||
this.drag_start_x = pos.x;
|
this.drag_start_x = pos.x;
|
||||||
@@ -157,7 +160,7 @@ export class PlotViewComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
zoomByScroll(event) {
|
zoomByScroll(event) {
|
||||||
if (this.isInImage(event) && event.deltaY != 0) {
|
if (this.isInImage(event) && event.deltaY != 0 && this.axes.hasXAxis(DataType.Time)) {
|
||||||
this.in_drag_mode = false;
|
this.in_drag_mode = false;
|
||||||
this.hideZoomInSlider();
|
this.hideZoomInSlider();
|
||||||
|
|
||||||
|
|||||||
@@ -93,14 +93,11 @@ export class PlotType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
compatible(others: Array<PlotType>) : boolean {
|
compatible(others: Array<PlotType>) : boolean {
|
||||||
var result = true;
|
|
||||||
var other : PlotType;
|
|
||||||
|
|
||||||
var xAxisTypes = new Set([this.xAxis]);
|
var xAxisTypes = new Set([this.xAxis]);
|
||||||
var yAxisTypes = new Set([this.yAxis]);
|
var yAxisTypes = new Set([this.yAxis]);
|
||||||
|
|
||||||
for(var i = 0; i < others.length; i++){
|
for(var i = 0; i < others.length; i++){
|
||||||
other = others[i];
|
var other = others[i];
|
||||||
xAxisTypes.add(other.xAxis);
|
xAxisTypes.add(other.xAxis);
|
||||||
yAxisTypes.add(other.yAxis);
|
yAxisTypes.add(other.yAxis);
|
||||||
}
|
}
|
||||||
@@ -129,6 +126,24 @@ export enum DataType {
|
|||||||
Other
|
Other
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class AxesTypes {
|
||||||
|
x : Set<DataType>;
|
||||||
|
y : Set<DataType>;
|
||||||
|
|
||||||
|
constructor(x: Set<DataType>, y : Set<DataType>) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
hasXAxis(type : DataType){
|
||||||
|
return this.x.has(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
hasYAxis(type : DataType){
|
||||||
|
return this.y.has(type);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export class Suggestion {
|
export class Suggestion {
|
||||||
value: string;
|
value: string;
|
||||||
newQuery: string;
|
newQuery: string;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults } from '../plot.service';
|
import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, AxesTypes } from '../plot.service';
|
||||||
import { Observable } from 'rxjs/Observable';
|
import { Observable } from 'rxjs/Observable';
|
||||||
import { FormControl, Validators } from '@angular/forms';
|
import { FormControl, Validators } from '@angular/forms';
|
||||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||||
@@ -99,11 +99,27 @@ export class VisualizationPageComponent implements OnInit {
|
|||||||
const request = this.createPlotRequest();
|
const request = this.createPlotRequest();
|
||||||
this.galleryView.renderGallery(request, this.splitBy.name);
|
this.galleryView.renderGallery(request, this.splitBy.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getAxes() : AxesTypes {
|
||||||
|
|
||||||
|
var x = new Set<DataType>();
|
||||||
|
var y = new Set<DataType>();
|
||||||
|
|
||||||
|
for(var i = 0; i < this.selectedPlotType.length; i++){
|
||||||
|
var plotType = this.selectedPlotType[i];
|
||||||
|
x.add(plotType.xAxis);
|
||||||
|
y.add(plotType.yAxis);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new AxesTypes(x,y);
|
||||||
|
}
|
||||||
|
|
||||||
plot(){
|
plot(){
|
||||||
const that = this;
|
const that = this;
|
||||||
|
|
||||||
that.plotView.imageUrl = '';
|
that.plotView.imageUrl = '';
|
||||||
|
this.plotView.axes = this.getAxes();
|
||||||
|
console.log(JSON.stringify(this.getAxes()));
|
||||||
that.galleryView.show=false;
|
that.galleryView.show=false;
|
||||||
document.dispatchEvent(new Event("invadersStart", {}));
|
document.dispatchEvent(new Event("invadersStart", {}));
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user