chore: Explore: Remove inner AutoSizer, spread the size-object to width/height,…

chore: Explore: Remove inner AutoSizer, spread the size-object to width/height, change height type to number

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

public/app/features/explore/Graph.tsx

 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;

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>
     );

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}