From 4e6f48434d6e47ec56bafe52dbe0a9e3a6790136 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 23 Feb 2018 11:22:19 -0800
Subject: [PATCH] Only resize gauge chart if its cell is the one being resized

---
 ui/src/shared/components/GaugeChart.js      | 10 +++++++++-
 ui/src/shared/components/LayoutCell.js      |  8 +++++++-
 ui/src/shared/components/RefreshingGraph.js |  3 +++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/GaugeChart.js b/ui/src/shared/components/GaugeChart.js
index a329a89ec..b46dd031b 100644
--- a/ui/src/shared/components/GaugeChart.js
+++ b/ui/src/shared/components/GaugeChart.js
@@ -12,6 +12,7 @@ class GaugeChart extends PureComponent {
   render() {
     const {
       data,
+      cellID,
       cellHeight,
       isFetchingInitially,
       colors,
@@ -35,11 +36,17 @@ class GaugeChart extends PureComponent {
     // When a new height is passed the Gauge component resizes internally
     // Passing in a new often ensures the gauge appears sharp
 
+    let thisGaugeIsResizing = false
+    if (resizeCoords) {
+      thisGaugeIsResizing = cellID === resizeCoords.i
+    }
     const initialCellHeight =
       cellHeight && (cellHeight * DASHBOARD_LAYOUT_ROW_HEIGHT).toString()
 
     const resizeCoordsHeight =
-      resizeCoords && (resizeCoords.h * DASHBOARD_LAYOUT_ROW_HEIGHT).toString()
+      resizeCoords &&
+      thisGaugeIsResizing &&
+      (resizeCoords.h * DASHBOARD_LAYOUT_ROW_HEIGHT).toString()
 
     const height = (resizeCoordsHeight ||
       initialCellHeight ||
@@ -69,6 +76,7 @@ GaugeChart.defaultProps = {
 GaugeChart.propTypes = {
   data: arrayOf(shape()).isRequired,
   isFetchingInitially: bool,
+  cellID: string,
   cellHeight: number,
   resizerTopHeight: number,
   resizeCoords: shape(),
diff --git a/ui/src/shared/components/LayoutCell.js b/ui/src/shared/components/LayoutCell.js
index 92417b80c..48256b252 100644
--- a/ui/src/shared/components/LayoutCell.js
+++ b/ui/src/shared/components/LayoutCell.js
@@ -52,6 +52,11 @@ class LayoutCell extends Component {
     const {isDeleting} = this.state
     const queries = _.get(cell, ['queries'], [])
 
+    // Passing the cell ID into the child graph so that further along
+    // we can detect if "this cell is the one being resized"
+    const child = children.length ? children[0] : children
+    const layoutCellGraph = React.cloneElement(child, {cellID: cell.i})
+
     return (
       <div className="dash-graph">
         <Authorized requiredRole={EDITOR_ROLE}>
@@ -71,7 +76,7 @@ class LayoutCell extends Component {
         <LayoutCellHeader cellName={cell.name} isEditable={isEditable} />
         <div className="dash-graph--container">
           {queries.length
-            ? children
+            ? layoutCellGraph
             : <div className="graph-empty">
                 <Authorized requiredRole={EDITOR_ROLE}>
                   <button
@@ -92,6 +97,7 @@ const {arrayOf, bool, func, node, number, shape, string} = PropTypes
 
 LayoutCell.propTypes = {
   cell: shape({
+    i: string.isRequired,
     name: string.isRequired,
     isEditing: bool,
     x: number.isRequired,
diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index 951f6350b..78d813ca3 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/ui/src/shared/components/RefreshingGraph.js
@@ -16,6 +16,7 @@ const RefreshingGraph = ({
   type,
   colors,
   onZoom,
+  cellID,
   queries,
   templates,
   timeRange,
@@ -65,6 +66,7 @@ const RefreshingGraph = ({
         cellHeight={cellHeight}
         resizerTopHeight={resizerTopHeight}
         resizeCoords={resizeCoords}
+        cellID={cellID}
       />
     )
   }
@@ -123,6 +125,7 @@ RefreshingGraph.propTypes = {
       value: string.isRequired,
     }).isRequired
   ),
+  cellID: string,
 }
 
 RefreshingGraph.defaultProps = {