[Lens] fix dimension label performance issues (#69978) (#70553)

elastic · Jul 2, 2020 · 2978536 · 2978536
1 parent 603ed13
commit 2978536
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
@@ -27,6 +27,14 @@ import { OperationMetadata } from '../../types';
 
 jest.mock('../loader');
 jest.mock('../state_helpers');
+jest.mock('lodash', () => {
+  const original = jest.requireActual('lodash');
+
+  return {
+    ...original,
+    debounce: (fn: unknown) => fn,
+  };
+});
 
 const expectedIndexPatterns = {
   1: {

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
@@ -6,7 +6,7 @@
 
 import './popover_editor.scss';
 import _ from 'lodash';
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiFlexItem,
@@ -56,6 +56,31 @@ function asOperationOptions(operationTypes: OperationType[], compatibleWithCurre
     }));
 }
 
+const LabelInput = ({ value, onChange }: { value: string; onChange: (value: string) => void }) => {
+  const [inputValue, setInputValue] = useState(value);
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value, setInputValue]);
+
+  const onChangeDebounced = useMemo(() => _.debounce(onChange, 256), [onChange]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = String(e.target.value);
+    setInputValue(val);
+    onChangeDebounced(val);
+  };
+
+  return (
+    <EuiFieldText
+      compressed
+      data-test-subj="indexPattern-label-edit"
+      value={inputValue}
+      onChange={handleInputChange}
+    />
+  );
+};
+
 export function PopoverEditor(props: PopoverEditorProps) {
   const {
     selectedColumn,
@@ -320,11 +345,9 @@ export function PopoverEditor(props: PopoverEditorProps) {
                   })}
                   display="rowCompressed"
                 >
-                  <EuiFieldText
-                    compressed
-                    data-test-subj="indexPattern-label-edit"
+                  <LabelInput
                     value={selectedColumn.label}
-                    onChange={(e) => {
+                    onChange={(value) => {
                       setState({
                         ...state,
                         layers: {
@@ -335,7 +358,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
                               ...state.layers[layerId].columns,
                               [columnId]: {
                                 ...selectedColumn,
-                                label: e.target.value,
+                                label: value,
                                 customLabel: true,
                               },
                             },