andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

zoom in by selecting the range

Browse Source
This commit is contained in:
Andreas Huber
2018-08-10 12:47:30 +02:00
parent 14d9216e40
commit 6932438ec9
2 changed files with 145 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
pdb-ui/src/main/resources/resources/css/design.css
View File

@@ -90,9 +90,16 @@ textarea {
position:relative;
}
#result-view {
#result-view img{
-webkit-user-drag: none; /* prevent Chrome's default behavior, when dragging on an image */
}
#zoom-in-slider {
background: #ccc;
opacity:0.4;
}
#filter-bar {
grid-area: filter_bar;
}

139
pdb-ui/src/main/resources/resources/js/ui.js
View File

@@ -13,6 +13,11 @@ function ffHasParentWithId(el, id) {
window.onload=function(){
const gnuplotLMargin = 110; // The left margin configured for gnuplot
const gnuplotRMargin = 110; // The right margin configured for gnuplot
const gnuplotTMargin = 57; // The top margin configured for gnuplot
const gnuplotBMargin = 76; // The bottom margin configured for gnuplot
Vue.config.keyCodes.arrowUp = 38;
Vue.config.keyCodes.arrowDown = 40;
@@ -181,6 +186,14 @@ Vue.component('proposal-item', {
Vue.component('result-view', {
props: ['searchBar', 'resultView'],
data: function() {
return {
in_drag_mode: false,
drag_start_x: 0,
drag_end_x: 0,
zoomInSliderStyle: "display: none;",
};
},
methods: {
prev_image: function()
{
@@ -199,6 +212,116 @@ Vue.component('result-view', {
splitBy['index'] = (splitBy['index']+1) % splitBy['values'].length;
plotCurrent();
}
},
isInPlot: function(x){
const imageWith = Math.floor($('#result').width());
return x > gnuplotLMargin && x < imageWith - gnuplotRMargin;
},
drag_start: function(event) {
if (event.buttons == 1 && this.isInPlot(event.x) && !data.searchBar.imageLastUsedParams.keyOutside) {
//console.log("drag-start " +event.x+ " " + event.buttons);
this.in_drag_mode = true;
this.drag_start_x = event.x;
this.drag_end_x = event.x;
}
},
dragging: function(event) {
if (this.in_drag_mode && event.buttons == 1 && this.isInPlot(event.x) && !data.searchBar.imageLastUsedParams.keyOutside){
//console.log("dragging " + event.layerX+ " " + event.x + " button: " + event.buttons);
this.drag_end_x = event.x;
const left = this.drag_start_x < this.drag_end_x ? this.drag_start_x : this.drag_end_x;
const width = Math.abs(this.drag_start_x - this.drag_end_x);
this.zoomInSliderStyle="position: absolute; left: "+left+"px; width: "+width+"px; top:"+gnuplotTMargin+"px; bottom: "+gnuplotBMargin+"px;";
//console.log(this.zoomInSliderStyle);
}
},
drag_stop: function(event) {
if (this.in_drag_mode && !data.searchBar.imageLastUsedParams.keyOutside){
this.in_drag_mode = false;
this.zoomInSliderStyle="display: none;";
// Zoom in if the selected area has some arbitrary minimal size
if (Math.abs(this.drag_start_x - this.drag_end_x) > 10) {
const dateFrom = data.searchBar.imageLastUsedParams.dateFrom;
const dateRange = data.searchBar.imageLastUsedParams.dateRange;
const startPxInImage = Math.min(this.drag_start_x, this.drag_end_x);
const endPxInImage = Math.max(this.drag_start_x, this.drag_end_x);
const imageWidth = Math.floor($('#result').width());
const widthPlotArea = imageWidth - gnuplotLMargin - gnuplotRMargin;
const startPxWithinPlotArea = startPxInImage - gnuplotLMargin;
const endPxWithinPlotArea = endPxInImage - gnuplotLMargin;
const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea;
const intervalPercentOfDateRange = (endPxWithinPlotArea- startPxWithinPlotArea) / widthPlotArea;
const dateRangeInSeconds = this.dateRangeToSeconds(dateRange);
const newStartDate = this.shiftDateBySeconds(dateFrom, dateRangeInSeconds * startPercentOfDateRange);
const newDateRangeInSeconds = Math.max(60, dateRangeInSeconds * intervalPercentOfDateRange);
const newDateRange = Math.ceil(newDateRangeInSeconds) + " seconds";
console.log("new range: "+newStartDate+" with interval "+newDateRange);
data.searchBar.dateFrom = newStartDate;
data.searchBar.dateRange = newDateRange;
plotCurrent();
}
}
},
drag_abort: function() {
this.in_drag_mode = false;
this.drag_start_x = 0;
this.drag_end_x = 0;
this.zoomInSliderStyle="display: none;";
},
shiftDateBySeconds: function(date, shiftInSeconds) {
var oldDate = Date.parse(date);
var newDate = oldDate.add({seconds: shiftInSeconds});
return newDate.toString("yyyy-MM-dd HH:mm");
},
dateRangeToSeconds: function(dateRange){
var tokens = dateRange.split(/ +/,2);
var newValue = -1;
if(tokens.length == 2)
{
var value = parseInt(tokens[0]);
var period = tokens[1];
switch (period) {
case "second":
case "seconds":
newValue = value;
break;
case "minute":
case "minutes":
newValue = value * 60;
break;
case "hour":
case "hours":
newValue = value * 60*60;
break;
case "day":
case "days":
newValue = value * 24*60*60;
break;
case "week":
case "weeks":
newValue = value * 7*24*60*60;
break;
case "month":
case "months":
newValue = value * 30*7*24*60*60;
break;
default:
console.log("unhandled value: "+ period);
break;
}
}
return newValue;
}
},
computed: {
@@ -207,7 +330,17 @@ Vue.component('result-view', {
}
},
template: `
<div id="result-view" v-if="resultView.imageUrl || resultView.errorMessage">
<div id="result-view"
v-if="resultView.imageUrl || resultView.errorMessage"
v-on:mousedown="drag_start"
v-on:mousemove="dragging"
v-on:mouseup="drag_stop"
v-on:click="drag_abort">
<div
id="zoom-in-slider"
v-if="in_drag_mode"
v-bind:style="this.zoomInSliderStyle"
></div>
<div id="prev_image" v-if="showPrevNext" v-on:click="prev_image" title="Previous Plot"><i class="fa fa-angle-double-left" aria-hidden="true"></i></div>
<div id="next_image" v-if="showPrevNext" v-on:click="next_image" title="Next Plot"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div>
<div id="result-image"><img v-bind:src="resultView.imageUrl" v-if="resultView.imageUrl"/></div>
@@ -910,7 +1043,8 @@ var data = {
values: [],
index: 0
},
imagelink: ""
imagelink: "",
imageLastUsedParams: {}
},
resultView: {
imageUrl: '',
@@ -1075,6 +1209,7 @@ function updateImageLink(query) {
};
data.searchBar.imagelink = window.location.origin+ window.location.pathname + "plots?" + jQuery.param(params);
data.searchBar.imageLastUsedParams = params;
}
function createGallery(vm){