[Exploratory view] Fix too many re-renders

x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { i18n } from '@kbn/i18n';
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EuiPanel, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
 import { isEmpty } from 'lodash';
@@ -14,11 +14,12 @@ import { ObservabilityPublicPluginsStart } from '../../../plugin';
 import { ExploratoryViewHeader } from './header/header';
 import { useSeriesStorage } from './hooks/use_series_storage';
 import { useLensAttributes } from './hooks/use_lens_attributes';
-import { EmptyView } from './components/empty_view';
 import { TypedLensByValueInput } from '../../../../../lens/public';
 import { useAppIndexPatternContext } from './hooks/use_app_index_pattern';
 import { SeriesBuilder } from './series_builder/series_builder';
 import { SeriesUrl } from './types';
+import { LensEmbeddable } from './lens_embeddable';
+import { EmptyView } from './components/empty_view';
 
 export const combineTimeRanges = (
   allSeries: Record<string, SeriesUrl>,
@@ -52,14 +53,13 @@ export function ExploratoryView({
   saveAttributes?: (attr: TypedLensByValueInput['attributes'] | null) => void;
 }) {
   const {
-    services: { lens, notifications },
+    services: { lens },
   } = useKibana<ObservabilityPublicPluginsStart>();
 
   const seriesBuilderRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const [height, setHeight] = useState<string>('100vh');
-  const [seriesId, setSeriesId] = useState<string>('');
 
   const [lastUpdated, setLastUpdated] = useState<number | undefined>();
 
@@ -69,13 +69,7 @@ export function ExploratoryView({
 
   const { loadIndexPattern, loading } = useAppIndexPatternContext();
 
-  const LensComponent = lens?.EmbeddableComponent;
-
-  const { firstSeriesId, firstSeries: series, setSeries, allSeries } = useSeriesStorage();
-
-  useEffect(() => {
-    setSeriesId(firstSeriesId);
-  }, [allSeries, firstSeriesId]);
+  const { firstSeries, firstSeriesId, allSeries } = useSeriesStorage();
 
   const lensAttributesT = useLensAttributes();
 
@@ -108,49 +102,16 @@ export function ExploratoryView({
     setHeightOffset();
   });
 
-  const timeRange = combineTimeRanges(allSeries, series);
-
-  const onLensLoad = useCallback(() => {
-    setLastUpdated(Date.now());
-  }, []);
-
-  const onBrushEnd = useCallback(
-    ({ range }: { range: number[] }) => {
-      if (series?.reportType !== 'data-distribution') {
-        setSeries(seriesId, {
-          ...series,
-          time: {
-            from: new Date(range[0]).toISOString(),
-            to: new Date(range[1]).toISOString(),
-          },
-        });
-      } else {
-        notifications?.toasts.add(
-          i18n.translate('xpack.observability.exploratoryView.noBrusing', {
-            defaultMessage: 'Zoom by brush selection is only available on time series charts.',
-          })
-        );
-      }
-    },
-    [notifications?.toasts, series, seriesId, setSeries]
-  );
-
   return (
     <Wrapper>
       {lens ? (
         <>
-          <ExploratoryViewHeader lensAttributes={lensAttributes} seriesId={seriesId} />
+          <ExploratoryViewHeader lensAttributes={lensAttributes} seriesId={firstSeriesId} />
           <LensWrapper ref={wrapperRef} height={height}>
-            {lensAttributes && timeRange.to && timeRange.from ? (
-              <LensComponent
-                id="exploratoryView"
-                timeRange={timeRange}
-                attributes={lensAttributes}
-                onLoad={onLensLoad}
-                onBrushEnd={onBrushEnd}
-              />
+            {lensAttributes ? (
+              <LensEmbeddable setLastUpdated={setLastUpdated} lensAttributes={lensAttributes} />
             ) : (
-              <EmptyView series={series} loading={loading} height={height} />
+              <EmptyView series={firstSeries} loading={loading} height={height} />
             )}
           </LensWrapper>
           <SeriesBuilder

x-pack/plugins/observability/public/components/shared/exploratory_view/hooks/use_series_storage.tsx

@@ -59,13 +59,15 @@ export function UrlStorageContextProvider({
     convertAllShortSeries(storage.get(allSeriesKey) ?? {})
   );
   const [firstSeriesId, setFirstSeriesId] = useState('');
+  const [firstSeries, setFirstSeries] = useState<SeriesUrl>();
 
   useEffect(() => {
     const allSeriesIds = Object.keys(allShortSeries);
     const allSeriesN: AllSeries = convertAllShortSeries(allShortSeries ?? {});
 
     setAllSeries(allSeriesN);
     setFirstSeriesId(allSeriesIds?.[0]);
+    setFirstSeries(allSeriesN?.[0]);
     (storage as IKbnUrlStateStorage).set(allSeriesKey, allShortSeries);
   }, [allShortSeries, storage]);
 
@@ -100,7 +102,7 @@ export function UrlStorageContextProvider({
     firstSeriesId,
     allSeries,
     allSeriesIds,
-    firstSeries: allSeries?.[firstSeriesId],
+    firstSeries: firstSeries!,
   };
   return <UrlStorageContext.Provider value={value}>{children}</UrlStorageContext.Provider>;
 }

x-pack/plugins/observability/public/components/shared/exploratory_view/lens_embeddable.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import React, { Dispatch, SetStateAction, useCallback } from 'react';
+import { combineTimeRanges } from './exploratory_view';
+import { TypedLensByValueInput } from '../../../../../lens/public';
+import { useSeriesStorage } from './hooks/use_series_storage';
+import { ObservabilityPublicPluginsStart } from '../../../plugin';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+
+interface Props {
+  lensAttributes: TypedLensByValueInput['attributes'];
+  setLastUpdated: Dispatch<SetStateAction<number | undefined>>;
+}
+
+export function LensEmbeddable(props: Props) {
+  const { lensAttributes, setLastUpdated } = props;
+
+  const {
+    services: { lens, notifications },
+  } = useKibana<ObservabilityPublicPluginsStart>();
+
+  const LensComponent = lens?.EmbeddableComponent;
+
+  const { firstSeriesId, firstSeries: series, setSeries, allSeries } = useSeriesStorage();
+
+  const timeRange = combineTimeRanges(allSeries, series);
+
+  const onLensLoad = useCallback(() => {
+    setLastUpdated(Date.now());
+  }, [setLastUpdated]);
+
+  const onBrushEnd = useCallback(
+    ({ range }: { range: number[] }) => {
+      if (series?.reportType !== 'data-distribution') {
+        setSeries(firstSeriesId, {
+          ...series,
+          time: {
+            from: new Date(range[0]).toISOString(),
+            to: new Date(range[1]).toISOString(),
+          },
+        });
+      } else {
+        notifications?.toasts.add(
+          i18n.translate('xpack.observability.exploratoryView.noBrusing', {
+            defaultMessage: 'Zoom by brush selection is only available on time series charts.',
+          })
+        );
+      }
+    },
+    [notifications?.toasts, series, firstSeriesId, setSeries]
+  );
+
+  return (
+    <LensComponent
+      id="exploratoryView"
+      timeRange={timeRange}
+      attributes={lensAttributes}
+      onLoad={onLensLoad}
+      onBrushEnd={onBrushEnd}
+    />
+  );
+}