Explore: Remove nested auto sizer and pass width from main Explore component (#35919)

public/app/features/explore/Explore.tsx

@@ -229,13 +229,14 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     );
   }
 
-  renderGraphPanel() {
-    const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading } = this.props;
+  renderGraphPanel(width: number) {
+    const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading, theme } = this.props;
     return (
       <Collapse label="Graph" loading={loading} isOpen>
         <ExploreGraphNGPanel
           data={graphResult!}
           height={400}
+          width={width - theme.panelPadding * 2}
           tooltipDisplayMode={TooltipDisplayMode.Single}
           absoluteRange={absoluteRange}
           timeZone={timeZone}
@@ -259,12 +260,14 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     );
   }
 
-  renderLogsPanel() {
-    const { exploreId, syncedTimes } = this.props;
+  renderLogsPanel(width: number) {
+    const { exploreId, syncedTimes, theme } = this.props;
+
     return (
       <LogsContainer
         exploreId={exploreId}
         syncedTimes={syncedTimes}
+        width={width - theme.panelPadding * 2}
         onClickFilterLabel={this.onClickFilterLabel}
         onClickFilterOutLabel={this.onClickFilterOutLabel}
         onStartScanning={this.onStartScanning}
@@ -357,10 +360,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                       {showPanels && (
                         <>
                           {showMetrics && graphResult && (
-                            <ErrorBoundaryAlert>{this.renderGraphPanel()}</ErrorBoundaryAlert>
+                            <ErrorBoundaryAlert>{this.renderGraphPanel(width)}</ErrorBoundaryAlert>
                           )}
                           {showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>}
-                          {showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel()}</ErrorBoundaryAlert>}
+                          {showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
                           {showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>}
                           {showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>}
                         </>

public/app/features/explore/ExploreGraphNGPanel.tsx

@@ -35,7 +35,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { splitOpen } from './state/main';
 import { getFieldLinksForExplore } from './utils/links';
 import { usePrevious } from 'react-use';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import appEvents from 'app/core/app_events';
 import { seriesVisibilityConfigFactory } from '../dashboard/dashgrid/SeriesVisibilityConfigFactory';
 import { identity } from 'lodash';
@@ -45,6 +44,7 @@ const MAX_NUMBER_OF_TIME_SERIES = 20;
 interface Props {
   data: DataFrame[];
   height: number;
+  width: number;
   annotations?: DataFrame[];
   absoluteRange: AbsoluteTimeRange;
   timeZone: TimeZone;
@@ -57,6 +57,7 @@ interface Props {
 export function ExploreGraphNGPanel({
   data,
   height,
+  width,
   timeZone,
   absoluteRange,
   onUpdateTimeRange,
@@ -156,42 +157,33 @@ export function ExploreGraphNGPanel({
           >{`Show all ${dataWithConfig.length}`}</span>
         </div>
       )}
-      <AutoSizer disableHeight>
-        {({ width }) => (
-          <TimeSeries
-            frames={seriesToShow}
-            structureRev={structureRev}
-            width={width}
-            height={height}
-            timeRange={timeRange}
-            legend={{ displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }}
-            timeZone={timeZone}
-          >
-            {(config, alignedDataFrame) => {
-              return (
-                <>
-                  <ZoomPlugin config={config} onZoom={onUpdateTimeRange} />
-                  <TooltipPlugin
-                    config={config}
-                    data={alignedDataFrame}
-                    mode={tooltipDisplayMode}
-                    timeZone={timeZone}
-                  />
-                  <ContextMenuPlugin config={config} data={alignedDataFrame} timeZone={timeZone} />
-                  {annotations && (
-                    <ExemplarsPlugin
-                      config={config}
-                      exemplars={annotations}
-                      timeZone={timeZone}
-                      getFieldLinks={getFieldLinks}
-                    />
-                  )}
-                </>
-              );
-            }}
-          </TimeSeries>
-        )}
-      </AutoSizer>
+      <TimeSeries
+        frames={seriesToShow}
+        structureRev={structureRev}
+        width={width}
+        height={height}
+        timeRange={timeRange}
+        legend={{ displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }}
+        timeZone={timeZone}
+      >
+        {(config, alignedDataFrame) => {
+          return (
+            <>
+              <ZoomPlugin config={config} onZoom={onUpdateTimeRange} />
+              <TooltipPlugin config={config} data={alignedDataFrame} mode={tooltipDisplayMode} timeZone={timeZone} />
+              <ContextMenuPlugin config={config} data={alignedDataFrame} timeZone={timeZone} />
+              {annotations && (
+                <ExemplarsPlugin
+                  config={config}
+                  exemplars={annotations}
+                  timeZone={timeZone}
+                  getFieldLinks={getFieldLinks}
+                />
+              )}
+            </>
+          );
+        }}
+      </TimeSeries>
     </PanelContextProvider>
   );
 }

public/app/features/explore/Logs.tsx

@@ -45,6 +45,7 @@ const SETTINGS_KEYS = {
 };
 
 interface Props {
+  width: number;
   logRows: LogRowModel[];
   logsMeta?: LogsMetaItem[];
   logsSeries?: DataFrame[];
@@ -233,6 +234,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
 
   render() {
     const {
+      width,
       logRows,
       logsMeta,
       logsSeries,
@@ -284,6 +286,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
           <ExploreGraphNGPanel
             data={logsSeries}
             height={150}
+            width={width}
             tooltipDisplayMode={TooltipDisplayMode.Multi}
             absoluteRange={visibleRange || absoluteRange}
             timeZone={timeZone}

public/app/features/explore/LogsContainer.tsx

@@ -17,6 +17,7 @@ import { LiveTailControls } from './useLiveTailControls';
 import { getFieldLinksForExplore } from './utils/links';
 
 interface LogsContainerProps extends PropsFromRedux {
+  width: number;
   exploreId: ExploreId;
   scanRange?: RawTimeRange;
   syncedTimes: boolean;
@@ -74,6 +75,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
       visibleRange,
       scanning,
       range,
+      width,
       isLive,
       exploreId,
       addResultsToCache,
@@ -119,6 +121,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
               logsMeta={logsMeta}
               logsSeries={logsSeries}
               logsQueries={logsQueries}
+              width={width}
               highlighterExpressions={logsHighlighterExpressions}
               loading={loading}
               onChangeTime={this.onChangeTime}