updated graph functionality

* ctrl+click on the graph will lock the crosshair
  - also locks time and path marker
  - to unlock, just click again
* graph path marker is now clickable to display position infobox
* fixed graph not redrawing after change of follow target while graph is
  minimized

Author: rossengeorgiev

js/app.js

@@ -407,7 +407,9 @@ $(window).ready(function() {
         $('#map').stop(null,null).animate({'height': h}, function() {
             if(map) google.maps.event.trigger(map, 'resize');
 
-            if(plot_open && follow_vehicle !== null && vehicles[follow_vehicle].graph_data_updated) updateGraph(follow_vehicle, true);
+            if(plot_open &&
+               follow_vehicle !== null &&
+               (follow_vehicle != graph_vehicle || vehicles[follow_vehicle].graph_data_updated)) updateGraph(follow_vehicle, true);
         });
     });
 
@@ -449,12 +451,9 @@ $(window).ready(function() {
 
     // reset nite-overlay and timebox when mouse goes out of the graph box
     $("#telemetry_graph").on('mouseout','.holder', function() {
-        nite.setDate(null);
-        nite.refresh();
-        if(polyMarker) polyMarker.setMap(null);
+        if(plot_crosshair_locked) return;
 
-        $("#timebox").removeClass('past').addClass('present');
-        updateTimebox(new Date());
+        updateGraph(null, true);
     });
 
     // hand cursor for dragging the vehicle list

js/plot_config.js

@@ -55,12 +55,13 @@ function updateLegend(pos) {
 
     if(!polyMarker) {
         polyMarker = new google.maps.Marker({
-            clickable: false,
+            clickable: true,
             flat: true,
             map: map,
             visible: true,
             icon: null
         });
+        google.maps.event.addListener(polyMarker, 'click', function() { mapInfoBox_handle_path({latLng: this.getPosition()}); });
     }
 
     // this loop finds an existing data point, so we can get coordinates
@@ -98,11 +99,22 @@ function updateLegend(pos) {
     }
 }
 
+var plot_crosshair_locked = false;
+
+$(plot_holder).bind("click",  function (event) {
+    if(plot_crosshair_locked) {
+        plot_crosshair_locked = false;
+    } else if(event.ctrlKey) {
+        plot_crosshair_locked = true;
+    }
+});
 // update legend values on mouse hover
 $(plot_holder).bind("plothover",  function (event, pos, item) {
-    plot.lockCrosshair();
-    plot.setCrosshair(pos);
+    if(plot_crosshair_locked) return;
+
     if (!updateLegendTimeout) {
+        plot.lockCrosshair();
+        plot.setCrosshair(pos);
         updateLegend(pos);
         updateLegendTimeout = setTimeout(function() { updateLegendTimeout = null; }, 40);
     }

js/tracker.js

@@ -20,6 +20,7 @@ var got_positions = false;
 var zoomed_in = false;
 var max_positions = 0; // maximum number of positions that ajax request should return (0 means no maximum)
 var follow_vehicle = null;
+var graph_vehicle = null;
 var manual_pan = false;
 
 var car_index = 0;
@@ -398,6 +399,7 @@ function load() {
                 '<div class="row vehicle'+elm_uuid+'"><div class="header empty">' +
                 '<img style="width:90px;height:30px" src="img/hab-spinner.gif"/></div></div>'
             );
+            listScroll.refresh();
 
             refresh();
 
@@ -669,13 +671,11 @@ function stopFollow() {
 
         if(follow_vehicle in vehicles) vehicles[follow_vehicle].follow = false;
         follow_vehicle = null;
+        graph_vehicle = null;
 
         // clear graph
-        plot = $.plot(plot_holder, {}, plot_options);
-
-        // reset nite overlay
-        nite.setDate(null);
-        nite.refresh();
+        if(plot) plot = $.plot(plot_holder, {}, plot_options);
+        updateGraph(null, true);
 
         // update lookangles box
         if(GPS_ts !== null) $("#lookanglesbox span").hide().parent().find(".nofollow").show();
@@ -1143,7 +1143,7 @@ var mapInfoBox_handle_prediction_path = function(event) {
 };
 
 var mapInfoBox_handle_path = function(event) {
-    var vehicle = this.vehicle;
+    var vehicle = this.vehicle || vehicles[follow_vehicle];
     var target = event.latLng;
     var p = vehicle.positions;
 
@@ -1820,16 +1820,23 @@ function addPosition(position) {
 function updateGraph(vcallsign, reset_selection) {
     if(!plot || !plot_open) return;
 
-    if(polyMarker) polyMarker.setPosition(null);
 
     if(reset_selection) {
         delete plot_options.xaxis;
 
+        if(polyMarker) polyMarker.setPosition(null);
+        plot_crosshair_locked = false;
+
         // reset nite overlay
         nite.setDate(null);
         nite.refresh();
+
+        $("#timebox").removeClass('past').addClass('present');
+        updateTimebox(new Date());
     }
 
+    if(vcallsign === null) return;
+
     var series = vehicles[vcallsign].graph_data;
 
     // if we are drawing the plot for the fisrt time
@@ -1849,6 +1856,7 @@ function updateGraph(vcallsign, reset_selection) {
 
     // replot graph, with this vehicle data, and this vehicles yaxes config
     plot = $.plot(plot_holder, series, $.extend(false, plot_options, {yaxes:vehicles[vcallsign].graph_yaxes}));
+    graph_vehicle = follow_vehicle;
 
     vehicles[vcallsign].graph_data_updated = false;
 }