[Table Visualization] make table vis column resizable (#2464)

* add resizable state to column Partially resolve: #2305 Signed-off-by: Anan Zhuang <[email protected]>
opensearch-project · Oct 4, 2022 · 66b6848 · 66b6848
1 parent fb4e186
commit 66b6848
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 5 deletions.
diff --git a/src/plugins/vis_type_table/public/components/table_vis_component.tsx b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { isEqual } from 'lodash';
 import { EuiDataGridProps, EuiDataGrid } from '@elastic/eui';
 
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { Table } from '../table_vis_response_handler';
-import { TableVisConfig } from '../types';
+import { TableVisConfig, ColumnWidth } from '../types';
 import { getDataGridColumns } from './table_vis_grid_columns';
 import { usePagination } from '../utils';
 
@@ -39,7 +40,56 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon
     }) as EuiDataGridProps['renderCellValue'];
   }, [rows, pagination]);
 
-  const dataGridColumns = getDataGridColumns(table, visConfig, handlers);
+  // resize column
+  const [columnsWidth, setColumnsWidth] = useState<ColumnWidth[]>(
+    handlers.uiState.get('vis.columnsWidth') || []
+  );
+  const curColumnsWidth = useRef<{
+    columnsWidth: ColumnWidth[];
+  }>({
+    columnsWidth: handlers.uiState?.get('vis.columnsWidth'),
+  });
+
+  const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
+    ({ columnId, width }) => {
+      setColumnsWidth((prevState) => {
+        const nextColIndex = columns.findIndex((c) => c.id === columnId);
+        const prevColIndex = prevState.findIndex((c) => c.colIndex === nextColIndex);
+        const nextState = [...prevState];
+        const updatedColWidth = { colIndex: nextColIndex, width };
+
+        // if updated column index is not found, then add it to nextState
+        // else reset it in nextState
+        if (prevColIndex < 0) nextState.push(updatedColWidth);
+        else nextState[prevColIndex] = updatedColWidth;
+
+        // update uiState
+        handlers.uiState?.set('vis.columnsWidth', nextState);
+        return nextState;
+      });
+    },
+    [columns, setColumnsWidth, handlers.uiState]
+  );
+
+  useEffect(() => {
+    const updateTable = () => {
+      const updatedVisState = handlers.uiState?.getChanges()?.vis;
+      if (!isEqual(updatedVisState?.columnsWidth, curColumnsWidth.current.columnsWidth)) {
+        curColumnsWidth.current.columnsWidth = updatedVisState?.columnsWidth;
+        setColumnsWidth(updatedVisState?.columnsWidth || []);
+      }
+    };
+
+    if (handlers.uiState) {
+      handlers.uiState.on('change', updateTable);
+    }
+
+    return () => {
+      handlers.uiState?.off('change', updateTable);
+    };
+  }, [handlers.uiState]);
+
+  const dataGridColumns = getDataGridColumns(table, visConfig, handlers, columnsWidth);
 
   return (
     <EuiDataGrid
@@ -51,6 +101,7 @@ export const TableVisComponent = ({ table, visConfig, handlers }: TableVisCompon
       }}
       rowCount={rows.length}
       renderCellValue={renderCellValue}
+      onColumnResize={onColumnResize}
       pagination={pagination}
     />
   );

diff --git a/src/plugins/vis_type_table/public/components/table_vis_grid_columns.tsx b/src/plugins/vis_type_table/public/components/table_vis_grid_columns.tsx
@@ -8,13 +8,14 @@ import { i18n } from '@osd/i18n';
 import { EuiDataGridColumn, EuiDataGridColumnCellActionProps } from '@elastic/eui';
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { Table } from '../table_vis_response_handler';
-import { TableVisConfig } from '../types';
+import { TableVisConfig, ColumnWidth } from '../types';
 import { convertToFormattedData } from '../utils';
 
 export const getDataGridColumns = (
   table: Table,
   visConfig: TableVisConfig,
-  handlers: IInterpreterRenderHandlers
+  handlers: IInterpreterRenderHandlers,
+  columnsWidth: ColumnWidth[]
 ) => {
   const { formattedRows, formattedColumns } = convertToFormattedData(table, visConfig);
 
@@ -117,6 +118,8 @@ export const getDataGridColumns = (
         ]
       : undefined;
 
+    const initialWidth = columnsWidth.find((c) => c.colIndex === colIndex);
+
     const dataGridColumn: EuiDataGridColumn = {
       id: col.id,
       display: col.title,
@@ -138,6 +141,9 @@ export const getDataGridColumns = (
       },
       cellActions,
     };
+    if (initialWidth) {
+      dataGridColumn.initialWidth = initialWidth.width;
+    }
     return dataGridColumn;
   });
 };
diff --git a/src/plugins/vis_type_table/public/types.ts b/src/plugins/vis_type_table/public/types.ts
@@ -64,3 +64,8 @@ export interface FormattedColumn {
   sumTotal?: number;
   total?: number;
 }
+
+export interface ColumnWidth {
+  colIndex: number;
+  width: number;
+}