Explore: decouple ExploreGraph and GraphContainer series limit implementation (#75806)

* Explore: decouple ExploreGraph and GraphContainer series limit implementation

* slice data up

public/app/features/explore/Graph/ExploreGraph.tsx

@@ -37,8 +37,6 @@ import { useExploreDataLinkPostProcessor } from '../hooks/useExploreDataLinkPost
 import { applyGraphStyle, applyThresholdsConfig } from './exploreGraphStyleUtils';
 import { useStructureRev } from './useStructureRev';
 
-export const MAX_NUMBER_OF_TIME_SERIES = 20;
-
 interface Props {
   data: DataFrame[];
   height: number;
@@ -57,7 +55,6 @@ interface Props {
   thresholdsConfig?: ThresholdsConfig;
   thresholdsStyle?: GraphThresholdsStyleConfig;
   eventBus: EventBus;
-  showAllTimeSeries: boolean;
 }
 
 export function ExploreGraph({
@@ -78,7 +75,6 @@ export function ExploreGraph({
   thresholdsConfig,
   thresholdsStyle,
   eventBus,
-  showAllTimeSeries,
 }: Props) {
   const theme = useTheme2();
 
@@ -125,14 +121,14 @@ export function ExploreGraph({
   const dataWithConfig = useMemo(() => {
     return applyFieldOverrides({
       fieldConfig: styledFieldConfig,
-      data: showAllTimeSeries ? data : data.slice(0, MAX_NUMBER_OF_TIME_SERIES),
+      data,
       timeZone,
       replaceVariables: (value) => value, // We don't need proper replace here as it is only used in getLinks and we use getFieldLinks
       theme,
       fieldConfigRegistry,
       dataLinkPostProcessor,
     });
-  }, [fieldConfigRegistry, data, timeZone, theme, styledFieldConfig, showAllTimeSeries, dataLinkPostProcessor]);
+  }, [fieldConfigRegistry, data, timeZone, theme, styledFieldConfig, dataLinkPostProcessor]);
 
   const annotationsWithConfig = useMemo(() => {
     return applyFieldOverrides({

public/app/features/explore/Graph/GraphContainer.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useToggle } from 'react-use';
 
 import {
   DataFrame,
@@ -24,10 +25,12 @@ import { ExploreGraphStyle } from 'app/types';
 
 import { storeGraphStyle } from '../state/utils';
 
-import { ExploreGraph, MAX_NUMBER_OF_TIME_SERIES } from './ExploreGraph';
+import { ExploreGraph } from './ExploreGraph';
 import { ExploreGraphLabel } from './ExploreGraphLabel';
 import { loadGraphStyle } from './utils';
 
+const MAX_NUMBER_OF_TIME_SERIES = 20;
+
 interface Props extends Pick<PanelChromeProps, 'statusMessage'> {
   width: number;
   height: number;
@@ -58,7 +61,7 @@ export const GraphContainer = ({
   loadingState,
   statusMessage,
 }: Props) => {
-  const [showAllTimeSeries, setShowAllTimeSeries] = useState(false);
+  const [showAllSeries, toggleShowAllSeries] = useToggle(false);
   const [graphStyle, setGraphStyle] = useState(loadGraphStyle);
   const styles = useStyles2(getStyles);
 
@@ -67,16 +70,21 @@ export const GraphContainer = ({
     setGraphStyle(graphStyle);
   }, []);
 
+  const slicedData = useMemo(() => {
+    return showAllSeries ? data : data.slice(0, MAX_NUMBER_OF_TIME_SERIES);
+  }, [data, showAllSeries]);
+
   return (
     <PanelChrome
       title="Graph"
       titleItems={[
-        MAX_NUMBER_OF_TIME_SERIES < data.length && !showAllTimeSeries && (
+        !showAllSeries && MAX_NUMBER_OF_TIME_SERIES < data.length && (
           <div key="disclaimer" className={styles.timeSeriesDisclaimer}>
             <Tooltip content={`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series`}>
               <Icon className={styles.disclaimerIcon} name="exclamation-triangle" />
             </Tooltip>
-            <Button variant="secondary" size="sm" onClick={() => setShowAllTimeSeries(true)}>
+
+            <Button variant="secondary" size="sm" onClick={toggleShowAllSeries}>
               Show all {data.length} series
             </Button>
           </div>
@@ -91,7 +99,7 @@ export const GraphContainer = ({
       {(innerWidth, innerHeight) => (
         <ExploreGraph
           graphStyle={graphStyle}
-          data={data}
+          data={slicedData}
           height={innerHeight}
           width={innerWidth}
           absoluteRange={absoluteRange}
@@ -103,7 +111,6 @@ export const GraphContainer = ({
           thresholdsConfig={thresholdsConfig}
           thresholdsStyle={thresholdsStyle}
           eventBus={eventBus}
-          showAllTimeSeries={showAllTimeSeries}
         />
       )}
     </PanelChrome>

public/app/features/explore/Logs/LogsVolumePanel.tsx

@@ -80,7 +80,6 @@ export function LogsVolumePanel(props: Props) {
         anchorToZero
         yAxisMaximum={allLogsVolumeMaximum}
         eventBus={props.eventBus}
-        showAllTimeSeries
       />
       {extraInfoComponent && <div className={styles.extraInfoContainer}>{extraInfoComponent}</div>}
     </div>