[SIEM] Fix unnecessary re-renders on the Overview page

tsconfig.json

@@ -13,7 +13,8 @@
       "test_utils/*": [
         "src/test_utils/public/*"
       ],
-      "fixtures/*": ["src/fixtures/*"]
+      "fixtures/*": ["src/fixtures/*"],
+      "fast-deep-equal/*": ["typings/fast_deep_equal.d.ts"]
     },
     // Support .tsx files and transform JSX into calls to React.createElement
     "jsx": "react",

typings/fast_deep_equal.d.ts

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+  TODO: Remove after https://github.com/epoberezkin/fast-deep-equal/pull/48
+  is merged and fast-deep-equal version is bumped
+*/
+
+declare const equal: (a: any, b: any) => boolean;
+export = equal;

x-pack/legacy/plugins/siem/public/components/auto_sizer/index.tsx

@@ -7,6 +7,7 @@
 import isEqual from 'lodash/fp/isEqual';
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
+import deepEqual from 'fast-deep-equal/react';
 
 interface Measurement {
   width?: number;
@@ -37,7 +38,7 @@ interface AutoSizerState {
 }
 
 /** A hard-fork of the `infra` `AutoSizer` ಠ_ಠ */
-export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerState> {
+export class AutoSizer extends React.Component<AutoSizerProps, AutoSizerState> {
   public element: HTMLElement | null = null;
   public resizeObserver: ResizeObserver | null = null;
   public windowWidth: number = -1;
@@ -71,6 +72,10 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
     });
   }
 
+  public shouldComponentUpdate(nextProps: AutoSizerProps) {
+    return !deepEqual(this.props, nextProps);
+  }
+
   public componentWillUnmount() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -16,6 +16,8 @@ import {
   RecursivePartial,
 } from '@elastic/charts';
 import { getOr, get, isNull, isNumber } from 'lodash/fp';
+import deepEqual from 'fast-deep-equal/react';
+
 import { AutoSizer } from '../auto_sizer';
 import { ChartPlaceHolder } from './chart_place_holder';
 import { useTimeZone } from '../../hooks';
@@ -120,7 +122,7 @@ export const AreaChartBaseComponent = ({
 
 AreaChartBaseComponent.displayName = 'AreaChartBaseComponent';
 
-export const AreaChartBase = React.memo(AreaChartBaseComponent);
+export const AreaChartBase = React.memo(AreaChartBaseComponent, deepEqual);
 
 AreaChartBase.displayName = 'AreaChartBase';
 
@@ -156,8 +158,4 @@ export const AreaChartComponent = ({
   );
 };
 
-AreaChartComponent.displayName = 'AreaChartComponent';
-
-export const AreaChart = React.memo(AreaChartComponent);
-
-AreaChart.displayName = 'AreaChart';
+export const AreaChart = React.memo(AreaChartComponent, deepEqual);

x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 
 import { BarChartBaseComponent, BarChartComponent } from './barchart';
 import { ChartSeriesData } from './common';
-import { BarSeries, ScaleType, Axis } from '@elastic/charts';
+import { ScaleType } from '@elastic/charts';
 
 jest.mock('../../lib/kibana');
 
@@ -139,7 +139,7 @@ describe('BarChartBaseComponent', () => {
     });
 
     it('should render two bar series', () => {
-      expect(shallowWrapper.find('Chart')).toHaveLength(1);
+      expect(shallowWrapper.find('MemoChart')).toHaveLength(1);
     });
   });
 
@@ -168,13 +168,13 @@ describe('BarChartBaseComponent', () => {
 
     it(`should ${mockBarChartData.length} render BarSeries`, () => {
       expect(shallow).toMatchSnapshot();
-      expect(shallowWrapper.find(BarSeries)).toHaveLength(mockBarChartData.length);
+      expect(shallowWrapper.find('MemoBarSeries')).toHaveLength(mockBarChartData.length);
     });
 
     it('should render BarSeries with given xScaleType', () => {
       expect(
         shallowWrapper
-          .find(BarSeries)
+          .find('MemoBarSeries')
           .first()
           .prop('xScaleType')
       ).toEqual(configs.series.xScaleType);
@@ -183,7 +183,7 @@ describe('BarChartBaseComponent', () => {
     it('should render BarSeries with given yScaleType', () => {
       expect(
         shallowWrapper
-          .find(BarSeries)
+          .find('MemoBarSeries')
           .first()
           .prop('yScaleType')
       ).toEqual(configs.series.yScaleType);
@@ -192,7 +192,7 @@ describe('BarChartBaseComponent', () => {
     it('should render xAxis with given tick formatter', () => {
       expect(
         shallowWrapper
-          .find(Axis)
+          .find('MemoAxis')
           .first()
           .prop('tickFormat')
       ).toBeUndefined();
@@ -201,7 +201,7 @@ describe('BarChartBaseComponent', () => {
     it('should render yAxis with given tick formatter', () => {
       expect(
         shallowWrapper
-          .find(Axis)
+          .find('MemoAxis')
           .last()
           .prop('tickFormat')
       ).toEqual(mockNumberFormatter);
@@ -217,13 +217,13 @@ describe('BarChartBaseComponent', () => {
 
     it(`should ${mockBarChartData.length} render BarSeries`, () => {
       expect(shallow).toMatchSnapshot();
-      expect(shallowWrapper.find(BarSeries)).toHaveLength(mockBarChartData.length);
+      expect(shallowWrapper.find('MemoBarSeries')).toHaveLength(mockBarChartData.length);
     });
 
     it('should render BarSeries with default xScaleType: Linear', () => {
       expect(
         shallowWrapper
-          .find(BarSeries)
+          .find('MemoBarSeries')
           .first()
           .prop('xScaleType')
       ).toEqual(ScaleType.Linear);
@@ -232,7 +232,7 @@ describe('BarChartBaseComponent', () => {
     it('should render BarSeries with default yScaleType: Linear', () => {
       expect(
         shallowWrapper
-          .find(BarSeries)
+          .find('MemoBarSeries')
           .first()
           .prop('yScaleType')
       ).toEqual(ScaleType.Linear);
@@ -241,7 +241,7 @@ describe('BarChartBaseComponent', () => {
     it('should not format xTicks value', () => {
       expect(
         shallowWrapper
-          .find(Axis)
+          .find('MemoAxis')
           .last()
           .prop('tickFormat')
       ).toBeUndefined();
@@ -250,7 +250,7 @@ describe('BarChartBaseComponent', () => {
     it('should not format yTicks value', () => {
       expect(
         shallowWrapper
-          .find(Axis)
+          .find('MemoAxis')
           .last()
           .prop('tickFormat')
       ).toBeUndefined();

x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
 import { getOr, get, isNumber } from 'lodash/fp';
 import deepmerge from 'deepmerge';
+import deepEqual from 'fast-deep-equal/react';
 
 import { useTimeZone } from '../../hooks';
 import { AutoSizer } from '../auto_sizer';
@@ -23,6 +24,15 @@ import {
   useTheme,
 } from './common';
 
+const MemoChart = React.memo(Chart, deepEqual);
+MemoChart.displayName = 'MemoChart';
+const MemoSettings = React.memo(Settings, deepEqual);
+MemoSettings.displayName = 'MemoSettings';
+const MemoBarSeries = React.memo(BarSeries, deepEqual);
+MemoBarSeries.displayName = 'MemoBarSeries';
+const MemoAxis = React.memo(Axis, deepEqual);
+MemoAxis.displayName = 'MemoAxis';
+
 const checkIfAllTheDataInTheSeriesAreValid = (series: ChartSeriesData): series is ChartSeriesData =>
   series != null &&
   !!get('value.length', series) &&
@@ -58,12 +68,12 @@ export const BarChartBaseComponent = ({
   };
 
   return chartConfigs.width && chartConfigs.height ? (
-    <Chart>
-      <Settings {...settings} />
+    <MemoChart>
+      <MemoSettings {...settings} />
       {data.map(series => {
         const barSeriesKey = series.key;
         return checkIfAllTheDataInTheSeriesAreValid ? (
-          <BarSeries
+          <MemoBarSeries
             id={barSeriesKey}
             key={barSeriesKey}
             name={series.key}
@@ -80,22 +90,27 @@ export const BarChartBaseComponent = ({
         ) : null;
       })}
 
-      <Axis
+      <MemoAxis
         id={xAxisId}
         position={Position.Bottom}
         showOverlappingTicks={false}
         tickSize={tickSize}
         tickFormat={xTickFormatter}
       />
 
-      <Axis id={yAxisId} position={Position.Left} tickSize={tickSize} tickFormat={yTickFormatter} />
-    </Chart>
+      <MemoAxis
+        id={yAxisId}
+        position={Position.Left}
+        tickSize={tickSize}
+        tickFormat={yTickFormatter}
+      />
+    </MemoChart>
   ) : null;
 };
 
 BarChartBaseComponent.displayName = 'BarChartBaseComponent';
 
-export const BarChartBase = React.memo(BarChartBaseComponent);
+export const BarChartBase = React.memo(BarChartBaseComponent, deepEqual);
 
 BarChartBase.displayName = 'BarChartBase';
 
@@ -131,8 +146,6 @@ export const BarChartComponent = ({
   );
 };
 
-BarChartComponent.displayName = 'BarChartComponent';
-
-export const BarChart = React.memo(BarChartComponent);
-
-BarChart.displayName = 'BarChart';
+export const BarChart = React.memo(BarChartComponent, (prevProps, nextProps) =>
+  deepEqual(nextProps.barChart, prevProps.barChart)
+);

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -16,7 +16,10 @@ import {
   TickFormatter,
   Position,
 } from '@elastic/charts';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal/react';
+
 import { useUiSetting } from '../../lib/kibana';
 import { DEFAULT_DARK_MODE } from '../../../common/constants';
 
@@ -54,7 +57,7 @@ export interface ChartSeriesData {
   color?: string | undefined;
 }
 
-export const WrappedByAutoSizer = styled.div<{ height?: string }>`
+const WrappedByAutoSizerComponent = styled.div<{ height?: string }>`
   ${style =>
     `
     height: ${style.height != null ? style.height : defaultChartHeight};
@@ -66,7 +69,9 @@ export const WrappedByAutoSizer = styled.div<{ height?: string }>`
   }
 `;
 
-WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
+WrappedByAutoSizerComponent.displayName = 'WrappedByAutoSizer';
+
+export const WrappedByAutoSizer = React.memo(WrappedByAutoSizerComponent, deepEqual);
 
 export enum SeriesType {
   BAR = 'bar',
@@ -96,8 +101,9 @@ const theme: PartialTheme = {
 export const useTheme = () => {
   const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
   const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
+  const themeValue = useMemo(() => mergeWithDefaultTheme(theme, defaultTheme), []);
 
-  return mergeWithDefaultTheme(theme, defaultTheme);
+  return themeValue;
 };
 
 export const chartDefaultSettings = {

x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx

@@ -8,6 +8,7 @@ import { rgba } from 'polished';
 import React from 'react';
 import { Droppable } from 'react-beautiful-dnd';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal/react';
 
 interface Props {
   children?: React.ReactNode;
@@ -113,6 +114,7 @@ export const DroppableWrapper = React.memo<Props>(
         </ReactDndDropTarget>
       )}
     </Droppable>
-  )
+  ),
+  deepEqual
 );
 DroppableWrapper.displayName = 'DroppableWrapper';

x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.tsx

@@ -7,6 +7,7 @@
 import { EuiPanel } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal/react';
 
 const Panel = styled(EuiPanel)`
   overflow: hidden;
@@ -17,9 +18,12 @@ export interface EmbeddableProps {
   children: React.ReactNode;
 }
 
-export const Embeddable = React.memo<EmbeddableProps>(({ children }) => (
-  <section className="siemEmbeddable">
-    <Panel paddingSize="none">{children}</Panel>
-  </section>
-));
+export const Embeddable = React.memo<EmbeddableProps>(
+  ({ children }) => (
+    <section className="siemEmbeddable">
+      <Panel paddingSize="none">{children}</Panel>
+    </section>
+  ),
+  deepEqual
+);
 Embeddable.displayName = 'Embeddable';