From ae0b027d69ce0fe2946aabfe55267150151a4038 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 5 Feb 2019 09:34:04 +0100
Subject: [PATCH 1/8] chore: Replace sizeMe with AutoSizer in DashboardGrid

---
 .../dashboard/dashgrid/DashboardGrid.tsx      | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 658bfad3816..5a65fadd74b 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -5,13 +5,12 @@ import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core
 import { DashboardPanel } from './DashboardPanel';
 import { DashboardModel, PanelModel } from '../state';
 import classNames from 'classnames';
-import sizeMe from 'react-sizeme';
+import { AutoSizer } from 'react-virtualized';
 
 let lastGridWidth = 1200;
 let ignoreNextWidthChange = false;
 
-interface GridWrapperProps {
-  size: { width: number; };
+interface SizedReactLayoutGridProps {
   layout: ReactGridLayout.Layout[];
   onLayoutChange: (layout: ReactGridLayout.Layout[]) => void;
   children: JSX.Element | JSX.Element[];
@@ -25,8 +24,12 @@ interface GridWrapperProps {
   isFullscreen?: boolean;
 }
 
+interface GridWrapperProps extends SizedReactLayoutGridProps {
+  sizedWidth: number;
+}
+
 function GridWrapper({
-  size,
+  sizedWidth,
   layout,
   onLayoutChange,
   children,
@@ -38,8 +41,8 @@ function GridWrapper({
   isResizable,
   isDraggable,
   isFullscreen,
-}: GridWrapperProps)  {
-  const width = size.width > 0 ? size.width : lastGridWidth;
+}: GridWrapperProps) {
+  const width = sizedWidth > 0 ? sizedWidth : lastGridWidth;
 
   // logic to ignore width changes (optimization)
   if (width !== lastGridWidth) {
@@ -74,7 +77,16 @@ function GridWrapper({
   );
 }
 
-const SizedReactLayoutGrid = sizeMe({ monitorWidth: true })(GridWrapper);
+const SizedReactLayoutGrid = (props: SizedReactLayoutGridProps) => (
+  <AutoSizer disableHeight>
+    {({width}) => (
+      <GridWrapper
+        sizedWidth={width}
+        {...props}
+      />
+    )}
+  </AutoSizer>
+);
 
 export interface DashboardGridProps {
   dashboard: DashboardModel;

From 097396c517e1db4e5633f7625168c255511deb1c Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 5 Feb 2019 09:57:54 +0100
Subject: [PATCH 2/8] chore: Replace withSize with AutoSizer in
 explore/Graph.tsx

---
 public/app/features/explore/Graph.test.tsx |  1 +
 public/app/features/explore/Graph.tsx      | 27 ++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/public/app/features/explore/Graph.test.tsx b/public/app/features/explore/Graph.test.tsx
index fe4deaf17aa..8976c677592 100644
--- a/public/app/features/explore/Graph.test.tsx
+++ b/public/app/features/explore/Graph.test.tsx
@@ -5,6 +5,7 @@ import { mockData } from './__mocks__/mockData';
 
 const setup = (propOverrides?: object) => {
   const props = {
+    size: { width: 10, height: 20 },
     data: mockData().slice(0, 19),
     range: { from: 'now-6h', to: 'now' },
     ...propOverrides,
diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx
index 5d64dde28ce..b087f6a457d 100644
--- a/public/app/features/explore/Graph.tsx
+++ b/public/app/features/explore/Graph.tsx
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import React, { PureComponent } from 'react';
 import moment from 'moment';
-import { withSize } from 'react-sizeme';
+import { AutoSizer } from 'react-virtualized';
 
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
@@ -80,12 +80,15 @@ interface GraphProps {
   id?: string;
   range: RawTimeRange;
   split?: boolean;
-  size?: { width: number; height: number };
   userOptions?: any;
   onChangeTime?: (range: RawTimeRange) => void;
   onToggleSeries?: (alias: string, hiddenSeries: Set<string>) => void;
 }
 
+interface SizedGraphProps extends GraphProps {
+  size: { width: number; height: number };
+}
+
 interface GraphState {
   /**
    * Type parameter refers to the `alias` property of a `TimeSeries`.
@@ -95,7 +98,7 @@ interface GraphState {
   showAllTimeSeries: boolean;
 }
 
-export class Graph extends PureComponent<GraphProps, GraphState> {
+export class Graph extends PureComponent<SizedGraphProps, GraphState> {
   $el: any;
   dynamicOptions = null;
 
@@ -116,7 +119,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
     this.$el.bind('plotselected', this.onPlotSelected);
   }
 
-  componentDidUpdate(prevProps: GraphProps, prevState: GraphState) {
+  componentDidUpdate(prevProps: SizedGraphProps, prevState: GraphState) {
     if (
       prevProps.data !== this.props.data ||
       prevProps.range !== this.props.range ||
@@ -261,4 +264,18 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
   }
 }
 
-export default withSize()(Graph);
+export default (props: GraphProps) => (
+  <AutoSizer>
+    {({width, height}) => {
+      return (
+        <Graph
+          size={{
+            width: width,
+            height: height
+          }}
+          {...props}
+        />
+      );
+    }}
+  </AutoSizer>
+);

From d68df9d704d2fb637ba302c86e11107fe5e1953e Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 5 Feb 2019 12:09:24 +0100
Subject: [PATCH 3/8] fix: Calculation issue with AutoSizer in explore

---
 public/app/features/explore/Graph.tsx | 28 ++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx
index b087f6a457d..10006557349 100644
--- a/public/app/features/explore/Graph.tsx
+++ b/public/app/features/explore/Graph.tsx
@@ -265,17 +265,19 @@ export class Graph extends PureComponent<SizedGraphProps, GraphState> {
 }
 
 export default (props: GraphProps) => (
-  <AutoSizer>
-    {({width, height}) => {
-      return (
-        <Graph
-          size={{
-            width: width,
-            height: height
-          }}
-          {...props}
-        />
-      );
-    }}
-  </AutoSizer>
+  <div>{/* div needed for AutoSizer to calculate, https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#observation */}
+    <AutoSizer disableHeight>
+      {({width, height}) => (
+        <div style={{width}}>
+          {width > 0 && <Graph
+            size={{
+              width: width,
+              height: height
+            }}
+            {...props}
+          />}
+        </div>
+      )}
+    </AutoSizer>
+  </div>
 );

From 260b6f5de83133f668aa15a3874eeeb20d46cbe7 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 5 Feb 2019 12:12:24 +0100
Subject: [PATCH 4/8] chore: Remove react-sizeme

---
 package.json |  1 -
 yarn.lock    | 28 ----------------------------
 2 files changed, 29 deletions(-)

diff --git a/package.json b/package.json
index 77fd92baf57..18c0a56f0c4 100644
--- a/package.json
+++ b/package.json
@@ -177,7 +177,6 @@
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
     "react-redux": "^5.0.7",
-    "react-sizeme": "^2.3.6",
     "react-table": "^6.8.6",
     "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.21.0",
diff --git a/yarn.lock b/yarn.lock
index 169abd40ee4..fd0c446fbce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3972,11 +3972,6 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
-batch-processor@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
-
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -6613,13 +6608,6 @@ elegant-spinner@^1.0.1:
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
-element-resize-detector@^1.1.12:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.0.tgz#63344fd6f4e5ecff6f018d027e17b281fd4fa338"
-  integrity sha512-UmhNB8sIJVZeg56gEjgmMd6p37sCg8j8trVW0LZM7Wzv+kxQ5CnRHcgRKBTB/kFUSn3e7UP59kl2V2U8Du1hmg==
-  dependencies:
-    batch-processor "1.0.0"
-
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -10900,11 +10888,6 @@ lodash.tail@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-
 lodash.union@4.6.0, lodash.union@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
@@ -14215,17 +14198,6 @@ react-resizable@1.x:
     prop-types "15.x"
     react-draggable "^2.2.6 || ^3.0.3"
 
-react-sizeme@^2.3.6:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.5.2.tgz#e7041390cfb895ed15d896aa91d76e147e3b70b5"
-  integrity sha512-hYvcncV1FxVzPm2EhVwlOLf7Tk+k/ttO6rI7bfKUL/aL1gYzrY3DXJsdZ6nFaFgGSU/i8KC6gCoptOhBbRJpXQ==
-  dependencies:
-    element-resize-detector "^1.1.12"
-    invariant "^2.2.2"
-    lodash.debounce "^4.0.8"
-    lodash.throttle "^4.1.1"
-    shallowequal "^1.0.2"
-
 react-split-pane@^0.1.84:
   version "0.1.85"
   resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.85.tgz#64819946a99b617ffa2d20f6f45a0056b6ee4faa"

From f5431f521082743d930f54d1d93f6dcaface7f7a Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 5 Feb 2019 13:48:00 +0100
Subject: [PATCH 5/8] chore: Explore: Remove inner AutoSizer, spread the
 size-object to width/height, change height type to number

---
 public/app/features/explore/Explore.tsx       |  2 +-
 public/app/features/explore/Graph.tsx         | 38 +++++--------------
 .../app/features/explore/GraphContainer.tsx   |  6 ++-
 public/app/features/explore/Logs.tsx          |  2 +-
 4 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index b210bcccc18..437b50db63c 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -211,7 +211,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
                       {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
                       {!showingStartPage && (
                         <>
-                          {supportsGraph && !supportsLogs && <GraphContainer exploreId={exploreId} />}
+                          {supportsGraph && !supportsLogs && <GraphContainer width={width} exploreId={exploreId} />}
                           {supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
                           {supportsLogs && (
                             <LogsContainer
diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx
index 10006557349..3a641697781 100644
--- a/public/app/features/explore/Graph.tsx
+++ b/public/app/features/explore/Graph.tsx
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import React, { PureComponent } from 'react';
 import moment from 'moment';
-import { AutoSizer } from 'react-virtualized';
 
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
@@ -76,7 +75,8 @@ const FLOT_OPTIONS = {
 
 interface GraphProps {
   data: any[];
-  height?: string; // e.g., '200px'
+  height?: number;
+  width?: number;
   id?: string;
   range: RawTimeRange;
   split?: boolean;
@@ -85,10 +85,6 @@ interface GraphProps {
   onToggleSeries?: (alias: string, hiddenSeries: Set<string>) => void;
 }
 
-interface SizedGraphProps extends GraphProps {
-  size: { width: number; height: number };
-}
-
 interface GraphState {
   /**
    * Type parameter refers to the `alias` property of a `TimeSeries`.
@@ -98,7 +94,7 @@ interface GraphState {
   showAllTimeSeries: boolean;
 }
 
-export class Graph extends PureComponent<SizedGraphProps, GraphState> {
+export class Graph extends PureComponent<GraphProps, GraphState> {
   $el: any;
   dynamicOptions = null;
 
@@ -119,13 +115,13 @@ export class Graph extends PureComponent<SizedGraphProps, GraphState> {
     this.$el.bind('plotselected', this.onPlotSelected);
   }
 
-  componentDidUpdate(prevProps: SizedGraphProps, prevState: GraphState) {
+  componentDidUpdate(prevProps: GraphProps, prevState: GraphState) {
     if (
       prevProps.data !== this.props.data ||
       prevProps.range !== this.props.range ||
       prevProps.split !== this.props.split ||
       prevProps.height !== this.props.height ||
-      (prevProps.size && prevProps.size.width !== this.props.size.width) ||
+      prevProps.width !== this.props.width ||
       !equal(prevState.hiddenSeries, this.state.hiddenSeries)
     ) {
       this.draw();
@@ -147,8 +143,8 @@ export class Graph extends PureComponent<SizedGraphProps, GraphState> {
   };
 
   getDynamicOptions() {
-    const { range, size } = this.props;
-    const ticks = (size.width || 0) / 100;
+    const { range, width } = this.props;
+    const ticks = (width || 0) / 100;
     let { from, to } = range;
     if (!moment.isMoment(from)) {
       from = dateMath.parse(from, false);
@@ -240,7 +236,7 @@ export class Graph extends PureComponent<SizedGraphProps, GraphState> {
   }
 
   render() {
-    const { height = '100px', id = 'graph' } = this.props;
+    const { height = 100, id = 'graph' } = this.props;
     const { hiddenSeries } = this.state;
     const data = this.getGraphData();
 
@@ -264,20 +260,4 @@ export class Graph extends PureComponent<SizedGraphProps, GraphState> {
   }
 }
 
-export default (props: GraphProps) => (
-  <div>{/* div needed for AutoSizer to calculate, https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#observation */}
-    <AutoSizer disableHeight>
-      {({width, height}) => (
-        <div style={{width}}>
-          {width > 0 && <Graph
-            size={{
-              width: width,
-              height: height
-            }}
-            {...props}
-          />}
-        </div>
-      )}
-    </AutoSizer>
-  </div>
-);
+export default Graph;
diff --git a/public/app/features/explore/GraphContainer.tsx b/public/app/features/explore/GraphContainer.tsx
index 7263fd09288..3950d89c11f 100644
--- a/public/app/features/explore/GraphContainer.tsx
+++ b/public/app/features/explore/GraphContainer.tsx
@@ -20,6 +20,7 @@ interface GraphContainerProps {
   split: boolean;
   toggleGraph: typeof toggleGraph;
   changeTime: typeof changeTime;
+  width: number;
 }
 
 export class GraphContainer extends PureComponent<GraphContainerProps> {
@@ -32,8 +33,8 @@ export class GraphContainer extends PureComponent<GraphContainerProps> {
   };
 
   render() {
-    const { exploreId, graphResult, loading, showingGraph, showingTable, range, split } = this.props;
-    const graphHeight = showingGraph && showingTable ? '200px' : '400px';
+    const { exploreId, graphResult, loading, showingGraph, showingTable, range, split, width } = this.props;
+    const graphHeight = showingGraph && showingTable ? 200 : 400;
 
     if (!graphResult) {
       return null;
@@ -48,6 +49,7 @@ export class GraphContainer extends PureComponent<GraphContainerProps> {
           onChangeTime={this.onChangeTime}
           range={range}
           split={split}
+          width={width}
         />
       </Panel>
     );
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 490257cb9a9..b6c903bc504 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -214,7 +214,7 @@ export default class Logs extends PureComponent<Props, State> {
         <div className="logs-panel-graph">
           <Graph
             data={timeSeries}
-            height="100px"
+            height={100}
             range={range}
             id={`explore-logs-graph-${exploreId}`}
             onChangeTime={this.props.onChangeTime}

From e1031436349232756e44263d6c3c94f8b7c79c2f Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 5 Feb 2019 14:09:25 +0100
Subject: [PATCH 6/8] fix: Update snapshot

---
 .../app/features/explore/__snapshots__/Graph.test.tsx.snap  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
index a7ec6deb22c..c38fb26a252 100644
--- a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Render should render component 1`] = `
     id="graph"
     style={
       Object {
-        "height": "100px",
+        "height": 100,
       }
     }
   />
@@ -480,7 +480,7 @@ exports[`Render should render component with disclaimer 1`] = `
     id="graph"
     style={
       Object {
-        "height": "100px",
+        "height": 100,
       }
     }
   />
@@ -962,7 +962,7 @@ exports[`Render should show query return no time series 1`] = `
     id="graph"
     style={
       Object {
-        "height": "100px",
+        "height": 100,
       }
     }
   />

From 9c64e3b4b98b1ad3b7c89d814554e58c1370033d Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 6 Feb 2019 09:45:03 +0100
Subject: [PATCH 7/8] Revert "chore: Remove react-sizeme"

This reverts commit 260b6f5de83133f668aa15a3874eeeb20d46cbe7.
---
 package.json |  1 +
 yarn.lock    | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/package.json b/package.json
index 18c0a56f0c4..77fd92baf57 100644
--- a/package.json
+++ b/package.json
@@ -177,6 +177,7 @@
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
     "react-redux": "^5.0.7",
+    "react-sizeme": "^2.3.6",
     "react-table": "^6.8.6",
     "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.21.0",
diff --git a/yarn.lock b/yarn.lock
index fd0c446fbce..169abd40ee4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3972,6 +3972,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -6608,6 +6613,13 @@ elegant-spinner@^1.0.1:
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
+element-resize-detector@^1.1.12:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.0.tgz#63344fd6f4e5ecff6f018d027e17b281fd4fa338"
+  integrity sha512-UmhNB8sIJVZeg56gEjgmMd6p37sCg8j8trVW0LZM7Wzv+kxQ5CnRHcgRKBTB/kFUSn3e7UP59kl2V2U8Du1hmg==
+  dependencies:
+    batch-processor "1.0.0"
+
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -10888,6 +10900,11 @@ lodash.tail@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.union@4.6.0, lodash.union@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
@@ -14198,6 +14215,17 @@ react-resizable@1.x:
     prop-types "15.x"
     react-draggable "^2.2.6 || ^3.0.3"
 
+react-sizeme@^2.3.6:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.5.2.tgz#e7041390cfb895ed15d896aa91d76e147e3b70b5"
+  integrity sha512-hYvcncV1FxVzPm2EhVwlOLf7Tk+k/ttO6rI7bfKUL/aL1gYzrY3DXJsdZ6nFaFgGSU/i8KC6gCoptOhBbRJpXQ==
+  dependencies:
+    element-resize-detector "^1.1.12"
+    invariant "^2.2.2"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    shallowequal "^1.0.2"
+
 react-split-pane@^0.1.84:
   version "0.1.85"
   resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.85.tgz#64819946a99b617ffa2d20f6f45a0056b6ee4faa"

From c47c2528aa9d5075a7c3ddc0a3a22220140652c3 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 6 Feb 2019 09:45:09 +0100
Subject: [PATCH 8/8] Revert "chore: Replace sizeMe with AutoSizer in
 DashboardGrid"

This reverts commit ae0b027d69ce0fe2946aabfe55267150151a4038.
---
 .../dashboard/dashgrid/DashboardGrid.tsx      | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 5a65fadd74b..658bfad3816 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -5,12 +5,13 @@ import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core
 import { DashboardPanel } from './DashboardPanel';
 import { DashboardModel, PanelModel } from '../state';
 import classNames from 'classnames';
-import { AutoSizer } from 'react-virtualized';
+import sizeMe from 'react-sizeme';
 
 let lastGridWidth = 1200;
 let ignoreNextWidthChange = false;
 
-interface SizedReactLayoutGridProps {
+interface GridWrapperProps {
+  size: { width: number; };
   layout: ReactGridLayout.Layout[];
   onLayoutChange: (layout: ReactGridLayout.Layout[]) => void;
   children: JSX.Element | JSX.Element[];
@@ -24,12 +25,8 @@ interface SizedReactLayoutGridProps {
   isFullscreen?: boolean;
 }
 
-interface GridWrapperProps extends SizedReactLayoutGridProps {
-  sizedWidth: number;
-}
-
 function GridWrapper({
-  sizedWidth,
+  size,
   layout,
   onLayoutChange,
   children,
@@ -41,8 +38,8 @@ function GridWrapper({
   isResizable,
   isDraggable,
   isFullscreen,
-}: GridWrapperProps) {
-  const width = sizedWidth > 0 ? sizedWidth : lastGridWidth;
+}: GridWrapperProps)  {
+  const width = size.width > 0 ? size.width : lastGridWidth;
 
   // logic to ignore width changes (optimization)
   if (width !== lastGridWidth) {
@@ -77,16 +74,7 @@ function GridWrapper({
   );
 }
 
-const SizedReactLayoutGrid = (props: SizedReactLayoutGridProps) => (
-  <AutoSizer disableHeight>
-    {({width}) => (
-      <GridWrapper
-        sizedWidth={width}
-        {...props}
-      />
-    )}
-  </AutoSizer>
-);
+const SizedReactLayoutGrid = sizeMe({ monitorWidth: true })(GridWrapper);
 
 export interface DashboardGridProps {
   dashboard: DashboardModel;