Merge pull request #12999 from alexanderzobnin/fix-12486-cherry-pick

Heatmap: fix tooltip and crosshair in firefox

public/app/plugins/panel/heatmap/heatmap_tooltip.ts

@@ -28,21 +28,9 @@ export class HeatmapTooltip {
     this.mouseOverBucket = false;
     this.mouseOverBucket = false;
     this.originalFillColor = null;
     this.originalFillColor = null;
 
 
-    elem.on('mouseover', this.onMouseOver.bind(this));
     elem.on('mouseleave', this.onMouseLeave.bind(this));
     elem.on('mouseleave', this.onMouseLeave.bind(this));
   }
   }
 
 
-  onMouseOver(e) {
-    if (!this.panel.tooltip.show || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data.buckets)) {
-      return;
-    }
-
-    if (!this.tooltip) {
-      this.add();
-      this.move(e);
-    }
-  }
-
   onMouseLeave() {
   onMouseLeave() {
     this.destroy();
     this.destroy();
   }
   }
@@ -81,11 +69,15 @@ export class HeatmapTooltip {
 
 
     let { xBucketIndex, yBucketIndex } = this.getBucketIndexes(pos, data);
     let { xBucketIndex, yBucketIndex } = this.getBucketIndexes(pos, data);
 
 
-    if (!data.buckets[xBucketIndex] || !this.tooltip) {
+    if (!data.buckets[xBucketIndex]) {
       this.destroy();
       this.destroy();
       return;
       return;
     }
     }
 
 
+    if (!this.tooltip) {
+      this.add();
+    }
+
     let boundBottom, boundTop, valuesNumber;
     let boundBottom, boundTop, valuesNumber;
     let xData = data.buckets[xBucketIndex];
     let xData = data.buckets[xBucketIndex];
     // Search in special 'zero' bucket also
     // Search in special 'zero' bucket also
@@ -158,13 +150,12 @@ export class HeatmapTooltip {
   }
   }
 
 
   getBucketIndexes(pos, data) {
   getBucketIndexes(pos, data) {
-    const xBucketIndex = this.getXBucketIndex(pos.offsetX, data);
-    const yBucketIndex = this.getYBucketIndex(pos.offsetY, data);
+    const xBucketIndex = this.getXBucketIndex(pos.x, data);
+    const yBucketIndex = this.getYBucketIndex(pos.y, data);
     return { xBucketIndex, yBucketIndex };
     return { xBucketIndex, yBucketIndex };
   }
   }
 
 
-  getXBucketIndex(offsetX, data) {
-    let x = this.scope.xScale.invert(offsetX - this.scope.yAxisWidth).valueOf();
+  getXBucketIndex(x, data) {
     // First try to find X bucket by checking x pos is in the
     // First try to find X bucket by checking x pos is in the
     // [bucket.x, bucket.x + xBucketSize] interval
     // [bucket.x, bucket.x + xBucketSize] interval
     let xBucket = _.find(data.buckets, bucket => {
     let xBucket = _.find(data.buckets, bucket => {
@@ -173,8 +164,7 @@ export class HeatmapTooltip {
     return xBucket ? xBucket.x : getValueBucketBound(x, data.xBucketSize, 1);
     return xBucket ? xBucket.x : getValueBucketBound(x, data.xBucketSize, 1);
   }
   }
 
 
-  getYBucketIndex(offsetY, data) {
-    let y = this.scope.yScale.invert(offsetY - this.scope.chartTop);
+  getYBucketIndex(y, data) {
     if (data.tsBuckets) {
     if (data.tsBuckets) {
       return Math.floor(y);
       return Math.floor(y);
     }
     }

public/app/plugins/panel/heatmap/rendering.ts

@@ -69,6 +69,7 @@ export class HeatmapRenderer {
     this.ctrl.events.on('render', this.onRender.bind(this));
     this.ctrl.events.on('render', this.onRender.bind(this));
 
 
     this.ctrl.tickValueFormatter = this.tickValueFormatter.bind(this);
     this.ctrl.tickValueFormatter = this.tickValueFormatter.bind(this);
+
     /////////////////////////////
     /////////////////////////////
     // Selection and crosshair //
     // Selection and crosshair //
     /////////////////////////////
     /////////////////////////////
@@ -678,9 +679,17 @@ export class HeatmapRenderer {
     }
     }
   }
   }
 
 
+  getEventOffset(event) {
+    const elemOffset = this.$heatmap.offset();
+    const x = Math.floor(event.clientX - elemOffset.left);
+    const y = Math.floor(event.clientY - elemOffset.top);
+    return { x, y };
+  }
+
   onMouseDown(event) {
   onMouseDown(event) {
+    const offset = this.getEventOffset(event);
     this.selection.active = true;
     this.selection.active = true;
-    this.selection.x1 = event.offsetX;
+    this.selection.x1 = offset.x;
 
 
     this.mouseUpHandler = () => {
     this.mouseUpHandler = () => {
       this.onMouseUp();
       this.onMouseUp();
@@ -718,23 +727,25 @@ export class HeatmapRenderer {
       return;
       return;
     }
     }
 
 
+    const offset = this.getEventOffset(event);
     if (this.selection.active) {
     if (this.selection.active) {
       // Clear crosshair and tooltip
       // Clear crosshair and tooltip
       this.clearCrosshair();
       this.clearCrosshair();
       this.tooltip.destroy();
       this.tooltip.destroy();
 
 
-      this.selection.x2 = this.limitSelection(event.offsetX);
+      this.selection.x2 = this.limitSelection(offset.x);
       this.drawSelection(this.selection.x1, this.selection.x2);
       this.drawSelection(this.selection.x1, this.selection.x2);
     } else {
     } else {
-      this.emitGraphHoverEvent(event);
-      this.drawCrosshair(event.offsetX);
-      this.tooltip.show(event, this.data);
+      const pos = this.getEventPos(event, offset);
+      this.drawCrosshair(offset.x);
+      this.tooltip.show(pos, this.data);
+      this.emitGraphHoverEvent(pos);
     }
     }
   }
   }
 
 
-  emitGraphHoverEvent(event) {
-    let x = this.xScale.invert(event.offsetX - this.yAxisWidth).valueOf();
-    let y = this.yScale.invert(event.offsetY);
+  getEventPos(event, offset) {
+    let x = this.xScale.invert(offset.x - this.yAxisWidth).valueOf();
+    let y = this.yScale.invert(offset.y - this.chartTop);
     let pos = {
     let pos = {
       pageX: event.pageX,
       pageX: event.pageX,
       pageY: event.pageY,
       pageY: event.pageY,
@@ -743,11 +754,15 @@ export class HeatmapRenderer {
       y: y,
       y: y,
       y1: y,
       y1: y,
       panelRelY: null,
       panelRelY: null,
+      offset,
     };
     };
 
 
-    // Set minimum offset to prevent showing legend from another panel
-    pos.panelRelY = Math.max(event.offsetY / this.height, 0.001);
+    return pos;
+  }
 
 
+  emitGraphHoverEvent(pos) {
+    // Set minimum offset to prevent showing legend from another panel
+    pos.panelRelY = Math.max(pos.offset.y / this.height, 0.001);
     // broadcast to other graph panels that we are hovering
     // broadcast to other graph panels that we are hovering
     appEvents.emit('graph-hover', { pos: pos, panel: this.panel });
     appEvents.emit('graph-hover', { pos: pos, panel: this.panel });
   }
   }