Fix: when clicking a plot on a touch device we won't display the annotation menu (#21479)

* Fixed so when clicking a plot on a touch device we won't display the annotation context menue.

* Refactorings after feedback.

* changed to standard-ish comment.

public/app/plugins/panel/graph/graph_tooltip.ts

@@ -172,6 +172,18 @@ export default function GraphTooltip(this: any, elem: any, dashboard: any, scope
     appEvents.emit(CoreEvents.graphClicked, { pos: pos, panel: panel, item: item });
     appEvents.emit(CoreEvents.graphClicked, { pos: pos, panel: panel, item: item });
   });
   });
 
 
+  elem.bind('plotleave', () => {
+    if (!panel.tooltip.shared) {
+      return;
+    }
+
+    const plot = elem.data().plot;
+    if (plot) {
+      $tooltip.detach();
+      plot.unhighlight();
+    }
+  });
+
   this.clear = (plot: { clearCrosshair: () => void; unhighlight: () => void }) => {
   this.clear = (plot: { clearCrosshair: () => void; unhighlight: () => void }) => {
     $tooltip.detach();
     $tooltip.detach();
     plot.clearCrosshair();
     plot.clearCrosshair();

public/vendor/flot/jquery.flot.js

@@ -1357,6 +1357,7 @@ Licensed under the MIT license.
                 // .mouseleave when we drop support for 1.2.6.
                 // .mouseleave when we drop support for 1.2.6.
 
 
                 eventHolder.bind("mouseleave", onMouseLeave);
                 eventHolder.bind("mouseleave", onMouseLeave);
+                $(document).bind("touchend", onTouch);
             }
             }
 
 
             if (options.grid.clickable)
             if (options.grid.clickable)
@@ -1372,6 +1373,7 @@ Licensed under the MIT license.
             eventHolder.unbind("mousemove", onMouseMove);
             eventHolder.unbind("mousemove", onMouseMove);
             eventHolder.unbind("mouseleave", onMouseLeave);
             eventHolder.unbind("mouseleave", onMouseLeave);
             eventHolder.unbind("click", onClick);
             eventHolder.unbind("click", onClick);
+            $(document).unbind("touchend", onTouch);
 
 
             executeHooks(hooks.shutdown, [eventHolder]);
             executeHooks(hooks.shutdown, [eventHolder]);
         }
         }
@@ -3052,6 +3054,44 @@ Licensed under the MIT license.
           triggerClickHoverEvent("plotclick", e, function (s) { return s["clickable"] != false; });
           triggerClickHoverEvent("plotclick", e, function (s) { return s["clickable"] != false; });
         }
         }
 
 
+        // grafana addon - added to support mobile devices click in plot
+        function onTouch(e) {
+            if (!e.cancelable) {
+                return;
+            }
+        
+            if (!eventHolder.is(e.target) && eventHolder.has(e.target).length === 0) {
+                triggerClickHoverEvent("plotleave", e, function (s) { false; });
+                return;
+            }
+
+            onMouseMove(mapFromTouchEvent(e));
+            e.preventDefault();
+        }
+
+        // grafana addon - added to support mobile devices and mapping touch event to click event structure
+        function mapFromTouchEvent(e) {
+            if (!e || !e.originalEvent) {
+                return e;
+            }
+
+            if (e.pageX && e.pageY) {
+                return e;
+            }
+
+            var original = e.originalEvent;
+            
+            if (original.changedTouches.length === 0) {
+                return e;
+            }
+
+            var touch = original.changedTouches[0];
+            e.pageX = touch.pageX;
+            e.pageY = touch.pageY;
+
+            return e;
+        }
+
         // trigger click or hover event (they send the same parameters
         // trigger click or hover event (they send the same parameters
         // so we share their code)
         // so we share their code)
         function triggerClickHoverEvent(eventname, event, seriesFilter) {
         function triggerClickHoverEvent(eventname, event, seriesFilter) {