[Lens] Performance improvements

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx

@@ -95,7 +95,6 @@ describe('Datatable Visualization', () => {
         dataType: 'string',
         isBucketed: true,
         label: '',
-        id: '',
       };
       expect(filterOperations({ ...baseOperation })).toEqual(true);
       expect(filterOperations({ ...baseOperation, dataType: 'number' })).toEqual(true);

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx

@@ -46,6 +46,8 @@ function updateColumns(
   return { ...state, layers };
 }
 
+const allOperations = () => true;
+
 export function DataTableLayer({
   layer,
   frame,
@@ -68,7 +70,7 @@ export function DataTableLayer({
             accessors={layer.columns}
             datasource={datasource}
             dragDropContext={dragDropContext}
-            filterOperations={() => true}
+            filterOperations={allOperations}
             layerId={layer.layerId}
             onAdd={() =>
               setState(updateColumns(state, layer, columns => [...columns, generateId()]))

x-pack/legacy/plugins/lens/public/indexpattern_plugin/__mocks__/operations.ts

@@ -6,13 +6,12 @@
 
 const actual = jest.requireActual('../operations');
 
-jest.spyOn(actual, 'getPotentialColumns');
 jest.spyOn(actual.operationDefinitionMap.date_histogram, 'paramEditor');
 jest.spyOn(actual.operationDefinitionMap.terms, 'onOtherColumnChanged');
 
 export const {
-  getPotentialColumns,
-  getColumnOrder,
+  getAvailableOperationsByMetadata,
+  buildColumn,
   getOperations,
   getOperationDisplay,
   getOperationTypesForField,

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx

@@ -8,9 +8,8 @@ import { shallow } from 'enzyme';
 import React, { ChangeEvent, ReactElement } from 'react';
 import { EuiComboBox, EuiFieldSearch, EuiContextMenuPanel } from '@elastic/eui';
 import { IndexPatternPrivateState } from './indexpattern';
-import { DatasourceDataPanelProps } from '../types';
 import { createMockedDragDropContext } from './mocks';
-import { IndexPatternDataPanel } from './datapanel';
+import { InnerIndexPatternDataPanel } from './datapanel';
 import { FieldItem } from './field_item';
 import { act } from 'react-dom/test-utils';
 
@@ -24,7 +23,6 @@ const initialState: IndexPatternPrivateState = {
       columnOrder: ['col1'],
       columns: {
         col1: {
-          operationId: 'op1',
           label: 'My Op',
           dataType: 'string',
           isBucketed: true,
@@ -139,31 +137,35 @@ const initialState: IndexPatternPrivateState = {
   },
 };
 describe('IndexPattern Data Panel', () => {
-  let defaultProps: DatasourceDataPanelProps<IndexPatternPrivateState>;
+  let defaultProps: Parameters<typeof InnerIndexPatternDataPanel>[0];
 
   beforeEach(() => {
     defaultProps = {
-      state: initialState,
-      setState: jest.fn(),
       dragDropContext: createMockedDragDropContext(),
+      currentIndexPatternId: '1',
+      indexPatterns: initialState.indexPatterns,
+      showIndexPatternSwitcher: false,
+      setShowIndexPatternSwitcher: jest.fn(),
+      onChangeIndexPattern: jest.fn(),
     };
   });
 
   it('should render a warning if there are no index patterns', () => {
     const wrapper = shallow(
-      <IndexPatternDataPanel
-        {...defaultProps}
-        state={{ ...initialState, currentIndexPatternId: '', indexPatterns: {} }}
-      />
+      <InnerIndexPatternDataPanel {...defaultProps} currentIndexPatternId="" indexPatterns={{}} />
     );
     expect(wrapper.find('[data-test-subj="indexPattern-no-indexpatterns"]')).toHaveLength(1);
   });
 
   it('should call setState when the index pattern is switched', async () => {
-    const wrapper = shallow(<IndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     wrapper.find('[data-test-subj="indexPattern-switch-link"]').simulate('click');
 
+    expect(defaultProps.setShowIndexPatternSwitcher).toHaveBeenCalledWith(true);
+
+    wrapper.setProps({ showIndexPatternSwitcher: true });
+
     const comboBox = wrapper.find(EuiComboBox);
 
     comboBox.prop('onChange')!([
@@ -173,14 +175,11 @@ describe('IndexPattern Data Panel', () => {
       },
     ]);
 
-    expect(defaultProps.setState).toHaveBeenCalledWith({
-      ...initialState,
-      currentIndexPatternId: '2',
-    });
+    expect(defaultProps.onChangeIndexPattern).toHaveBeenCalledWith('2');
   });
 
   it('should list all supported fields in the pattern sorted alphabetically', async () => {
-    const wrapper = shallow(<IndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     expect(wrapper.find(FieldItem).map(fieldItem => fieldItem.prop('field').name)).toEqual([
       'bytes',
@@ -191,7 +190,7 @@ describe('IndexPattern Data Panel', () => {
   });
 
   it('should filter down by name', async () => {
-    const wrapper = shallow(<IndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     act(() => {
       wrapper.find(EuiFieldSearch).prop('onChange')!({ target: { value: 'mem' } } as ChangeEvent<
@@ -205,7 +204,7 @@ describe('IndexPattern Data Panel', () => {
   });
 
   it('should filter down by type', async () => {
-    const wrapper = shallow(<IndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     act(() => {
       (wrapper
@@ -223,7 +222,7 @@ describe('IndexPattern Data Panel', () => {
   });
 
   it('should toggle type if clicked again', async () => {
-    const wrapper = shallow(<IndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     act(() => {
       (wrapper
@@ -252,7 +251,7 @@ describe('IndexPattern Data Panel', () => {
   });
 
   it('should filter down by type and by name', async () => {
-    const wrapper = shallow(<IndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     act(() => {
       wrapper.find(EuiFieldSearch).prop('onChange')!({ target: { value: 'mem' } } as ChangeEvent<

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

@@ -5,7 +5,7 @@
  */
 
 import _ from 'lodash';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, memo, useCallback } from 'react';
 import {
   EuiComboBox,
   EuiFieldSearch,
@@ -26,8 +26,8 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { DatasourceDataPanelProps, DataType } from '../types';
-import { IndexPatternPrivateState, IndexPatternField } from './indexpattern';
-import { ChildDragDropProvider } from '../drag_drop';
+import { IndexPatternPrivateState, IndexPatternField, IndexPattern } from './indexpattern';
+import { ChildDragDropProvider, DragContextState } from '../drag_drop';
 import { FieldItem } from './field_item';
 import { FieldIcon } from './field_icon';
 
@@ -50,11 +50,55 @@ const fieldTypeNames: Record<DataType, string> = {
   date: i18n.translate('xpack.lens.datatypes.date', { defaultMessage: 'date' }),
 };
 
-export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatternPrivateState>) {
+export function IndexPatternDataPanel({
+  setState,
+  state,
+  dragDropContext,
+}: DatasourceDataPanelProps<IndexPatternPrivateState>) {
+  const { indexPatterns, currentIndexPatternId } = state;
+  const [showIndexPatternSwitcher, setShowIndexPatternSwitcher] = useState(false);
+
+  const onChangeIndexPattern = useCallback(
+    (newIndexPattern: string) => {
+      setState({
+        ...state,
+        currentIndexPatternId: newIndexPattern,
+      });
+    },
+    [state, setState]
+  );
+
+  return (
+    <MemoizedDataPanel
+      showIndexPatternSwitcher={showIndexPatternSwitcher}
+      setShowIndexPatternSwitcher={setShowIndexPatternSwitcher}
+      currentIndexPatternId={currentIndexPatternId}
+      indexPatterns={indexPatterns}
+      dragDropContext={dragDropContext}
+      // only pass in the state change callback if it's actually needed to avoid re-renders
+      onChangeIndexPattern={showIndexPatternSwitcher ? onChangeIndexPattern : undefined}
+    />
+  );
+}
+
+export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
+  currentIndexPatternId,
+  indexPatterns,
+  dragDropContext,
+  showIndexPatternSwitcher,
+  setShowIndexPatternSwitcher,
+  onChangeIndexPattern,
+}: {
+  currentIndexPatternId: string;
+  indexPatterns: Record<string, IndexPattern>;
+  dragDropContext: DragContextState;
+  showIndexPatternSwitcher: boolean;
+  setShowIndexPatternSwitcher: (show: boolean) => void;
+  onChangeIndexPattern?: (newId: string) => void;
+}) {
   const [state, setState] = useState({
     nameFilter: '',
     typeFilter: [] as DataType[],
-    showIndexPatternSwitcher: false,
     isTypeFilterOpen: false,
   });
   const [pageSize, setPageSize] = useState(PAGINATION_SIZE);
@@ -76,9 +120,9 @@ export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatte
       setPageSize(PAGINATION_SIZE);
       lazyScroll();
     }
-  }, [state.nameFilter, state.typeFilter, props.state.currentIndexPatternId]);
+  }, [state.nameFilter, state.typeFilter, currentIndexPatternId]);
 
-  if (Object.keys(props.state.indexPatterns).length === 0) {
+  if (Object.keys(indexPatterns).length === 0) {
     return (
       <EuiFlexGroup gutterSize="s" className="lnsIndexPatternDataPanel" direction="column">
         <EuiFlexItem grow={null}>
@@ -102,7 +146,7 @@ export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatte
     );
   }
 
-  const allFields = props.state.indexPatterns[props.state.currentIndexPatternId].fields;
+  const allFields = indexPatterns[currentIndexPatternId].fields;
   const filteredFields = allFields
     .filter(
       (field: IndexPatternField) =>
@@ -117,24 +161,24 @@ export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatte
   );
 
   return (
-    <ChildDragDropProvider {...props.dragDropContext}>
+    <ChildDragDropProvider {...dragDropContext}>
       <EuiFlexGroup gutterSize="s" className="lnsIndexPatternDataPanel" direction="column">
         <EuiFlexItem grow={null}>
           <div className="lnsIndexPatternDataPanel__header">
-            {!state.showIndexPatternSwitcher ? (
+            {!showIndexPatternSwitcher ? (
               <>
                 <EuiTitle size="xxs">
                   <h4
                     className="lnsIndexPatternDataPanel__header"
-                    title={props.state.indexPatterns[props.state.currentIndexPatternId].title}
+                    title={indexPatterns[currentIndexPatternId].title}
                   >
-                    {props.state.indexPatterns[props.state.currentIndexPatternId].title}{' '}
+                    {indexPatterns[currentIndexPatternId].title}{' '}
                   </h4>
                 </EuiTitle>
                 <EuiButtonEmpty
                   data-test-subj="indexPattern-switch-link"
                   className="lnsIndexPatternDataPanel__changeLink"
-                  onClick={() => setState({ ...state, showIndexPatternSwitcher: true })}
+                  onClick={() => setShowIndexPatternSwitcher(true)}
                   size="xs"
                 >
                   (
@@ -148,7 +192,7 @@ export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatte
             ) : (
               <EuiComboBox
                 data-test-subj="indexPattern-switcher"
-                options={Object.values(props.state.indexPatterns).map(({ title, id }) => ({
+                options={Object.values(indexPatterns).map(({ title, id }) => ({
                   label: title,
                   value: id,
                 }))}
@@ -158,32 +202,30 @@ export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatte
                   }
                 }}
                 selectedOptions={
-                  props.state.currentIndexPatternId
+                  currentIndexPatternId
                     ? [
                         {
-                          label: props.state.indexPatterns[props.state.currentIndexPatternId].title,
-                          value: props.state.indexPatterns[props.state.currentIndexPatternId].id,
+                          label: indexPatterns[currentIndexPatternId].title,
+                          value: indexPatterns[currentIndexPatternId].id,
                         },
                       ]
                     : undefined
                 }
                 singleSelection={{ asPlainText: true }}
                 isClearable={false}
                 onBlur={() => {
-                  setState({ ...state, showIndexPatternSwitcher: false });
+                  setShowIndexPatternSwitcher(false);
                 }}
                 onChange={choices => {
-                  props.setState({
-                    ...props.state,
-                    currentIndexPatternId: choices[0].value as string,
-                  });
+                  onChangeIndexPattern!(choices[0].value as string);
 
                   setState({
                     ...state,
-                    showIndexPatternSwitcher: false,
                     nameFilter: '',
                     typeFilter: [],
                   });
+
+                  setShowIndexPatternSwitcher(false);
                 }}
               />
             )}
@@ -288,4 +330,6 @@ export function IndexPatternDataPanel(props: DatasourceDataPanelProps<IndexPatte
       </EuiFlexGroup>
     </ChildDragDropProvider>
   );
-}
+};
+
+const MemoizedDataPanel = memo(InnerIndexPatternDataPanel);