From 713d8fb08394bb578dd43bbdef39c544fda8abff Mon Sep 17 00:00:00 2001
From: Anan Zhuang <ananzh@amazon.com>
Date: Sun, 16 Oct 2022 19:49:31 +0000
Subject: [PATCH] [Table Visualization][BUG] remove local column width state

* remove local col width state to allow split tables to fetch
updated col width state
* fix type errors in usePagination

Partially resolved:
https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2579#issuecomment-1281078065

Signed-off-by: Anan Zhuang <ananzh@amazon.com>
---
 .../public/components/table_vis_component.tsx | 40 +++++++++----------
 src/plugins/vis_type_table/public/types.ts    |  2 +-
 .../public/utils/use_pagination.ts            | 11 ++---
 3 files changed, 25 insertions(+), 28 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
index fb47e616001..385577ee165 100644
--- a/src/plugins/vis_type_table/public/components/table_vis_component.tsx
+++ b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
@@ -35,13 +35,6 @@ export const TableVisComponent = ({
 
   const pagination = usePagination(visConfig, rows.length);
 
-  // store current state
-  const currentColState = useRef<{
-    columnsWidth: ColumnWidth[];
-  }>({
-    columnsWidth: handlers.uiState.get('vis.columnsWidth') || [],
-  });
-
   const sortedRows = useMemo(() => {
     const sort = handlers.uiState.get('vis.sortColumn');
     return sort && sort.colIndex !== null && sort.direction
@@ -66,7 +59,7 @@ export const TableVisComponent = ({
     columns,
     table,
     handlers,
-    currentColState.current.columnsWidth
+    handlers.uiState.get('vis.columnsWidth') || []
   );
 
   const sortedColumns = useMemo(() => {
@@ -77,14 +70,17 @@ export const TableVisComponent = ({
   }, [handlers.uiState, dataGridColumns]);
 
   const onSort = useCallback(
-    (sortingCols: EuiDataGridSorting['columns']) => {
+    (sortingCols: EuiDataGridSorting['columns'] | []) => {
       const nextSortValue = sortingCols[sortingCols.length - 1];
-      const nextSort = {
-        colIndex: dataGridColumns.findIndex((col) => col.id === nextSortValue?.id),
-        direction: nextSortValue.direction,
-      };
+      const nextSort =
+        sortingCols.length > 0
+          ? {
+              colIndex: dataGridColumns.findIndex((col) => col.id === nextSortValue?.id),
+              direction: nextSortValue.direction,
+            }
+          : [];
       handlers.uiState.set('vis.sortColumn', nextSort);
-      handlers.uiState?.emit('reload');
+      handlers.uiState.emit('reload');
       return nextSort;
     },
     [dataGridColumns, handlers.uiState]
@@ -92,22 +88,22 @@ export const TableVisComponent = ({
 
   const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
     ({ columnId, width }) => {
-      const prevState: ColumnWidth[] = currentColState.current.columnsWidth;
+      const curState: ColumnWidth[] = handlers.uiState.get('vis.columnsWidth') || [];
+      const nextState = [...curState];
       const nextColIndex = columns.findIndex((col) => col.id === columnId);
-      const prevColIndex = prevState.findIndex((col) => col.colIndex === nextColIndex);
-      const nextState = [...prevState];
-      const updatedColWidth = { colIndex: nextColIndex, width };
+      const curColIndex = curState.findIndex((col) => col.colIndex === nextColIndex);
+      const nextColWidth = { 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;
+      if (curColIndex < 0) nextState.push(nextColWidth);
+      else nextState[curColIndex] = nextColWidth;
 
       // update uiState
-      currentColState.current.columnsWidth = nextState;
       handlers.uiState.set('vis.columnsWidth', nextState);
+      handlers.uiState.emit('reload');
     },
-    [columns, currentColState, handlers.uiState]
+    [columns, handlers.uiState]
   );
 
   const ariaLabel = title || visConfig.title || 'tableVis';
diff --git a/src/plugins/vis_type_table/public/types.ts b/src/plugins/vis_type_table/public/types.ts
index cc5a17b6cfd..6355044556a 100644
--- a/src/plugins/vis_type_table/public/types.ts
+++ b/src/plugins/vis_type_table/public/types.ts
@@ -48,7 +48,7 @@ export interface TableVisConfig extends TableVisParams {
 }
 
 export interface TableVisParams {
-  perPage: number;
+  perPage: number | '';
   showPartialRows: boolean;
   showMetricsAtAllLevels: boolean;
   showTotal: boolean;
diff --git a/src/plugins/vis_type_table/public/utils/use_pagination.ts b/src/plugins/vis_type_table/public/utils/use_pagination.ts
index 13b42314747..41bb31d3408 100644
--- a/src/plugins/vis_type_table/public/utils/use_pagination.ts
+++ b/src/plugins/vis_type_table/public/utils/use_pagination.ts
@@ -6,10 +6,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { TableVisConfig } from '../types';
 
-export const usePagination = (visConfig: TableVisConfig, nrow: number) => {
+export const usePagination = (visConfig: TableVisConfig, nRow: number) => {
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: visConfig.perPage,
+    pageSize: visConfig.perPage || 0,
   });
   const onChangeItemsPerPage = useCallback(
     (pageSize) => setPagination((p) => ({ ...p, pageSize, pageIndex: 0 })),
@@ -20,12 +20,13 @@ export const usePagination = (visConfig: TableVisConfig, nrow: number) => {
   ]);
 
   useEffect(() => {
-    const maxiPageIndex = Math.ceil(nrow / visConfig.perPage) - 1;
+    const perPage = visConfig.perPage || 0;
+    const maxiPageIndex = Math.ceil(nRow / perPage) - 1;
     setPagination((p) => ({
       pageIndex: p.pageIndex > maxiPageIndex ? maxiPageIndex : p.pageIndex,
-      pageSize: visConfig.perPage,
+      pageSize: perPage,
     }));
-  }, [nrow, visConfig.perPage]);
+  }, [nRow, visConfig.perPage]);
 
   return useMemo(
     () => ({