From 89df2fcf76bdaca34dfef19a9d5bb752a9859c6d Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Tue, 25 Oct 2016 10:44:29 -0700
Subject: [PATCH] Adjusted top margin of heatmap plot to get it working in V2
 (#1361)

* Adjusted top margin of heatmap plot to get it working in V2

Problem:
The heatmap in V2 was shifted towards the top margin of slice
container, this was because in v2 slice name header was part of the
container body, while in v1 the header was separately defined in
explore.html template.

Solution:
To get heatmap properly shown in V2, we need to
take into account the height of the slice_name header. Adding to
margin_top will shift the plot in V1 too, but it won't make a big
difference to the look.

Ideally when we renovate slice container in future PR we would defined a
height for slice_name header and take it into account for all
visualization files.

* Added panel header height to margin_top for explore v2

* Use getBoundingClientRect to get header height

* Use slice-header for id of panel-title
---
 .../javascripts/explorev2/components/ChartContainer.jsx    | 7 ++++++-
 caravel/assets/visualizations/heatmap.js                   | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
index a3a7a45e031fa..8c8cf38f2d21a 100644
--- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -67,7 +67,12 @@ class ChartContainer extends React.Component {
         <Panel
           style={{ height: this.props.height }}
           header={
-            <div className="panel-title">{this.props.sliceName}</div>
+            <div
+              id="slice-header"
+              className="panel-title"
+            >
+              {this.props.sliceName}
+            </div>
           }
         >
           <div
diff --git a/caravel/assets/visualizations/heatmap.js b/caravel/assets/visualizations/heatmap.js
index 2cd4df237b10b..271befd4d9200 100644
--- a/caravel/assets/visualizations/heatmap.js
+++ b/caravel/assets/visualizations/heatmap.js
@@ -10,8 +10,11 @@ require('./heatmap.css');
 // https://jsfiddle.net/cyril123/h0reyumq/
 function heatmapVis(slice) {
   function refresh() {
+    // Header for panel in explore v2
+    const header = document.getElementById('slice-header');
+    const headerHeight = header ? header.getBoundingClientRect().height : 0;
     const margin = {
-      top: 10,
+      top: 20 + headerHeight,
       right: 10,
       bottom: 35,
       left: 35,