[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

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import isEqual from 'lodash/fp/isEqual';
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
+import deepEqual from 'fast-deep-equal/es6/react';
 
 interface Measurement {
   width?: number;
@@ -37,7 +37,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;
@@ -126,9 +126,9 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
         : previousContentMeasurement;
 
     if (
-      isEqual(boundsMeasurement, previousBoundsMeasurement) &&
-      isEqual(contentMeasurement, previousContentMeasurement) &&
-      isEqual(windowMeasurement, previousWindowMeasurement)
+      deepEqual(boundsMeasurement, previousBoundsMeasurement) &&
+      deepEqual(contentMeasurement, previousContentMeasurement) &&
+      deepEqual(windowMeasurement, previousWindowMeasurement)
     ) {
       return;
     }

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

@@ -16,6 +16,7 @@ import {
   RecursivePartial,
 } from '@elastic/charts';
 import { getOr, get, isNull, isNumber } from 'lodash/fp';
+
 import { AutoSizer } from '../auto_sizer';
 import { ChartPlaceHolder } from './chart_place_holder';
 import { useTimeZone } from '../../hooks';
@@ -156,8 +157,4 @@ export const AreaChartComponent = ({
   );
 };
 
-AreaChartComponent.displayName = 'AreaChartComponent';
-
 export const AreaChart = React.memo(AreaChartComponent);
-
-AreaChart.displayName = 'AreaChart';

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

@@ -131,8 +131,4 @@ export const BarChartComponent = ({
   );
 };
 
-BarChartComponent.displayName = 'BarChartComponent';
-
 export const BarChart = React.memo(BarChartComponent);
-
-BarChart.displayName = 'BarChart';

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

@@ -16,7 +16,9 @@ import {
   TickFormatter,
   Position,
 } from '@elastic/charts';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
+
 import { useUiSetting } from '../../lib/kibana';
 import { DEFAULT_DARK_MODE } from '../../../common/constants';
 
@@ -54,7 +56,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 +68,9 @@ export const WrappedByAutoSizer = styled.div<{ height?: string }>`
   }
 `;
 
-WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
+WrappedByAutoSizerComponent.displayName = 'WrappedByAutoSizer';
+
+export const WrappedByAutoSizer = React.memo(WrappedByAutoSizerComponent);
 
 export enum SeriesType {
   BAR = 'bar',
@@ -96,8 +100,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/draggable_wrapper.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
 import React, { createContext, useContext, useEffect } from 'react';
 import {
   Draggable,
@@ -15,6 +14,7 @@ import {
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import { ActionCreator } from 'typescript-fsa';
+import deepEqual from 'fast-deep-equal/es6/react';
 
 import { EuiPortal } from '@elastic/eui';
 import { dragAndDropActions } from '../../store/drag_and_drop';
@@ -132,7 +132,7 @@ const DraggableWrapperComponent = React.memo<Props>(
   },
   (prevProps, nextProps) => {
     return (
-      isEqual(prevProps.dataProvider, nextProps.dataProvider) &&
+      deepEqual(prevProps.dataProvider, nextProps.dataProvider) &&
       prevProps.render !== nextProps.render &&
       prevProps.truncate === nextProps.truncate
     );

x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx

@@ -5,10 +5,10 @@
  */
 
 import { EuiPanel } from '@elastic/eui';
-import deepEqual from 'fast-deep-equal';
-import { getOr, isEmpty, isEqual, union } from 'lodash/fp';
+import { getOr, isEmpty, union } from 'lodash/fp';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal/es6/react';
 
 import { BrowserFields } from '../../containers/source';
 import { TimelineQuery } from '../../containers/timeline';
@@ -236,7 +236,7 @@ const EventsViewerComponent: React.FC<Props> = ({
 export const EventsViewer = React.memo(
   EventsViewerComponent,
   (prevProps, nextProps) =>
-    isEqual(prevProps.browserFields, nextProps.browserFields) &&
+    deepEqual(prevProps.browserFields, nextProps.browserFields) &&
     prevProps.columns === nextProps.columns &&
     prevProps.dataProviders === nextProps.dataProviders &&
     prevProps.deletedEventIds === nextProps.deletedEventIds &&
@@ -249,9 +249,9 @@ export const EventsViewer = React.memo(
     prevProps.itemsPerPage === nextProps.itemsPerPage &&
     prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions &&
     prevProps.kqlMode === nextProps.kqlMode &&
-    isEqual(prevProps.query, nextProps.query) &&
+    deepEqual(prevProps.query, nextProps.query) &&
     prevProps.start === nextProps.start &&
     prevProps.sort === nextProps.sort &&
-    isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
+    deepEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
     prevProps.utilityBar === nextProps.utilityBar
 );

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

@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
 import React, { useCallback, useMemo, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
+import deepEqual from 'fast-deep-equal/es6/react';
+
 import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
 import { inputsActions, timelineActions } from '../../store/actions';
 import { KqlMode, SubsetTimelineModel, TimelineModel } from '../../store/timeline/model';
@@ -235,24 +236,24 @@ export const StatefulEventsViewer = connect(makeMapStateToProps, {
     StatefulEventsViewerComponent,
     (prevProps, nextProps) =>
       prevProps.id === nextProps.id &&
-      isEqual(prevProps.columns, nextProps.columns) &&
-      isEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      deepEqual(prevProps.columns, nextProps.columns) &&
+      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
       prevProps.deletedEventIds === nextProps.deletedEventIds &&
       prevProps.end === nextProps.end &&
-      isEqual(prevProps.filters, nextProps.filters) &&
+      deepEqual(prevProps.filters, nextProps.filters) &&
       prevProps.isLive === nextProps.isLive &&
       prevProps.itemsPerPage === nextProps.itemsPerPage &&
-      isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
       prevProps.kqlMode === nextProps.kqlMode &&
-      isEqual(prevProps.query, nextProps.query) &&
+      deepEqual(prevProps.query, nextProps.query) &&
       prevProps.pageCount === nextProps.pageCount &&
-      isEqual(prevProps.sort, nextProps.sort) &&
+      deepEqual(prevProps.sort, nextProps.sort) &&
       prevProps.start === nextProps.start &&
-      isEqual(prevProps.pageFilters, nextProps.pageFilters) &&
+      deepEqual(prevProps.pageFilters, nextProps.pageFilters) &&
       prevProps.showCheckboxes === nextProps.showCheckboxes &&
       prevProps.showRowRenderers === nextProps.showRowRenderers &&
       prevProps.start === nextProps.start &&
-      isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
+      deepEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
       prevProps.utilityBar === nextProps.utilityBar
   )
 );