updating paragraph components

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Jan 3, 2024 · 89b2feb · 89b2feb
1 parent 8b23033
commit 89b2feb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -7,7 +7,7 @@ import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
 import MarkdownRender from '@nteract/markdown';
 import { Media } from '@nteract/outputs';
 import moment from 'moment';
-import React, { useState } from 'react';
+import React from 'react';
 import { CoreStart } from '../../../../../../../src/core/public';
 import {
   DashboardContainerInput,
@@ -76,7 +76,6 @@ const OutputBody = ({
    */
 
   const dateFormat = uiSettingsService.get('dateFormat');
-  const [visibleColumns, setVisibleColumns] = useState<string[]>([]);
 
   if (typeOut !== undefined) {
     switch (typeOut) {
@@ -88,7 +87,6 @@ const OutputBody = ({
         } else {
           const columns = createQueryColumns(queryObject.schema);
           const data = getQueryOutputData(queryObject);
-          setVisibleColumns(columns.map(({ id }) => id));
           return (
             <div>
               <EuiText key={'query-input-key'} className="wrapAll">
@@ -99,8 +97,6 @@ const OutputBody = ({
                 key={key}
                 rowCount={queryObject.datarows.length}
                 queryColumns={columns}
-                visibleColumns={visibleColumns}
-                setVisibleColumns={setVisibleColumns}
                 dataValues={data}
               />
             </div>

diff --git a/public/components/notebooks/components/paragraph_components/para_query_grid.tsx b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx
@@ -10,8 +10,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 interface QueryDataGridProps {
   rowCount: number;
   queryColumns: any[];
-  visibleColumns: any[];
-  setVisibleColumns: (visibleColumns: string[]) => void;
   dataValues: any[];
 }
 
@@ -21,31 +19,33 @@ interface RenderCellValueProps {
 }
 
 function QueryDataGrid(props: QueryDataGridProps) {
-  const { rowCount, queryColumns, visibleColumns, setVisibleColumns, dataValues } = props;
+  const { rowCount, queryColumns, dataValues } = props;
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
   // ** Sorting config
   const [sortingColumns, setSortingColumns] = useState([]);
+  const [visibleColumns, setVisibleColumns] = useState<string[]>([]);
+
   const [isVisible, setIsVisible] = useState(false);
 
   const onSort = useCallback(
-    (sortColumns) => {
-      setSortingColumns(sortColumns);
+    (newColumns) => {
+      setSortingColumns(newColumns);
     },
     [setSortingColumns]
   );
 
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
-      setPagination((paginate) => ({
-        ...paginate,
+      setPagination((newPagination) => ({
+        ...newPagination,
         pageSize,
         pageIndex: 0,
       })),
     [setPagination]
   );
 
   const onChangePage = useCallback(
-    (pageIndex) => setPagination((paginate) => ({ ...paginate, pageIndex })),
+    (pageIndex) => setPagination((newPagination) => ({ ...newPagination, pageIndex })),
     [setPagination]
   );
 
@@ -55,10 +55,10 @@ function QueryDataGrid(props: QueryDataGridProps) {
     };
   }, []);
 
-  const getUpdatedVisibleColumns = (queryCols: any[]) => {
+  const getUpdatedVisibleColumns = () => {
     const updatedVisibleColumns = [];
-    for (let index = 0; index < queryCols.length; ++index) {
-      updatedVisibleColumns.push(queryCols[index].displayAsText);
+    for (let index = 0; index < queryColumns.length; ++index) {
+      updatedVisibleColumns.push(queryColumns[index].displayAsText);
     }
     return updatedVisibleColumns;
   };
@@ -72,8 +72,8 @@ function QueryDataGrid(props: QueryDataGridProps) {
         setIsVisible(true);
       }
     }, 1000);
-    setVisibleColumns(getUpdatedVisibleColumns(queryColumns));
-  }, [queryColumns, setVisibleColumns]);
+    setVisibleColumns(getUpdatedVisibleColumns());
+  }, []);
 
   const displayLoadingSpinner = !isVisible ? (
     <>
@@ -108,7 +108,6 @@ function queryDataGridPropsAreEqual(prevProps: QueryDataGridProps, nextProps: Qu
   return (
     prevProps.rowCount === nextProps.rowCount &&
     JSON.stringify(prevProps.queryColumns) === JSON.stringify(nextProps.queryColumns) &&
-    JSON.stringify(prevProps.visibleColumns) === JSON.stringify(nextProps.visibleColumns) &&
     JSON.stringify(prevProps.dataValues) === JSON.stringify(nextProps.dataValues)
   );
 }