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

package.json

@@ -117,7 +117,7 @@
     "@babel/core": "^7.5.5",
     "@babel/register": "^7.7.0",
     "@elastic/apm-rum": "^4.6.0",
-    "@elastic/charts": "^16.1.0",
+    "@elastic/charts": "^16.1.1",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
     "@elastic/eui": "18.3.0",

packages/kbn-ui-shared-deps/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "abort-controller": "^3.0.0",
     "@elastic/eui": "18.3.0",
-    "@elastic/charts": "^16.1.0",
+    "@elastic/charts": "^16.1.1",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",
     "@yarnpkg/lockfile": "^1.1.0",

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 '../../lib/kibana';
@@ -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 { Chart, BarSeries, Axis, 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(Chart)).toHaveLength(1);
     });
   });
 
@@ -167,7 +167,6 @@ describe('BarChartBaseComponent', () => {
     });
 
     it(`should ${mockBarChartData.length} render BarSeries`, () => {
-      expect(shallow).toMatchSnapshot();
       expect(shallowWrapper.find(BarSeries)).toHaveLength(mockBarChartData.length);
     });
 
@@ -265,7 +264,7 @@ describe('BarChartBaseComponent', () => {
     });
 
     it('should not render without height and width', () => {
-      expect(shallowWrapper.find('Chart')).toHaveLength(0);
+      expect(shallowWrapper.find(Chart)).toHaveLength(0);
     });
   });
 });

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

@@ -113,7 +113,7 @@ export const BarChartComponent = ({
     <AutoSizer detectAnyWindowResize={false} content>
       {({ measureRef, content: { height, width } }) => (
         <WrappedByAutoSizer ref={measureRef} height={getChartHeight(customHeight, height)}>
-          <BarChartBaseComponent
+          <BarChartBase
             height={getChartHeight(customHeight, height)}
             width={getChartWidth(customWidth, width)}
             data={barChart}
@@ -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
   )
 );

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

@@ -6,7 +6,7 @@
 
 import { EuiBadge } from '@elastic/eui';
 import { defaultTo, getOr } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import { ActionCreator } from 'typescript-fsa';
@@ -82,28 +82,39 @@ export const FlyoutComponent = React.memo<Props>(
     timelineId,
     usersViewing,
     width,
-  }) => (
-    <>
-      <Visible show={show}>
-        <Pane
-          flyoutHeight={flyoutHeight}
-          headerHeight={headerHeight}
-          onClose={() => showTimeline({ id: timelineId, show: false })}
+  }) => {
+    const handleClose = useCallback(() => showTimeline({ id: timelineId, show: false }), [
+      showTimeline,
+      timelineId,
+    ]);
+    const handleOpen = useCallback(() => showTimeline({ id: timelineId, show: true }), [
+      showTimeline,
+      timelineId,
+    ]);
+
+    return (
+      <>
+        <Visible show={show}>
+          <Pane
+            flyoutHeight={flyoutHeight}
+            headerHeight={headerHeight}
+            onClose={handleClose}
+            timelineId={timelineId}
+            usersViewing={usersViewing}
+            width={width}
+          >
+            {children}
+          </Pane>
+        </Visible>
+        <FlyoutButton
+          dataProviders={dataProviders!}
+          show={!show}
           timelineId={timelineId}
-          usersViewing={usersViewing}
-          width={width}
-        >
-          {children}
-        </Pane>
-      </Visible>
-      <FlyoutButton
-        dataProviders={dataProviders!}
-        show={!show}
-        timelineId={timelineId}
-        onOpen={() => showTimeline({ id: timelineId, show: true })}
-      />
-    </>
-  )
+          onOpen={handleOpen}
+        />
+      </>
+    );
+  }
 );
 
 FlyoutComponent.displayName = 'FlyoutComponent';
@@ -117,8 +128,10 @@ const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
   return { dataProviders, show, width };
 };
 
-export const Flyout = connect(mapStateToProps, {
+const mapDispatchToProps = {
   showTimeline: timelineActions.showTimeline,
-})(FlyoutComponent);
+};
+
+export const Flyout = connect(mapStateToProps, mapDispatchToProps)(FlyoutComponent);
 
 Flyout.displayName = 'Flyout';