[Table Visualization] add a plain datagrid component (#2390)

implement a plain OuiDataGrid component use the basic
pagenation, sort and format.

Partially resolve:
#2305

Signed-off-by: Anan Zhuang <[email protected]>

Signed-off-by: Anan Zhuang <[email protected]>

src/plugins/vis_type_table/opensearch_dashboards.json

@@ -10,6 +10,7 @@
   ],
   "requiredBundles": [
     "opensearchDashboardsUtils",
+    "opensearchDashboardsReact",
     "charts",
     "visDefaultEditor"
   ]

src/plugins/vis_type_table/public/components/table_vis_app.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { I18nProvider } from '@osd/i18n/react';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
+
+import { TableContext } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+import { TableVisComponent } from './table_vis_component';
+
+interface TableVisAppProps {
+  visData: TableContext;
+  visConfig: TableVisConfig;
+  handlers: IInterpreterRenderHandlers;
+}
+
+export const TableVisApp = ({
+  services,
+  visData: { table, tableGroups, direction },
+  visConfig,
+  handlers,
+}: TableVisAppProps & { services: CoreStart }) => {
+  return (
+    <I18nProvider>
+      <OpenSearchDashboardsContextProvider services={services}>
+        <div className="tableVis" data-test-subj="tableVisEditor">
+          {table ? (
+            <TableVisComponent table={table} visConfig={visConfig} handlers={handlers} />
+          ) : (
+            <></>
+          )}
+        </div>
+      </OpenSearchDashboardsContextProvider>
+    </I18nProvider>
+  );
+};
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TableVisApp as default };

src/plugins/vis_type_table/public/components/table_vis_component.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { EuiDataGridProps, EuiDataGrid } from '@elastic/eui';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { Table } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+
+interface TableVisComponentProps {
+  table: Table;
+  visConfig: TableVisConfig;
+  handlers: IInterpreterRenderHandlers;
+}
+
+export const TableVisComponent = ({ table, visConfig, handlers }: TableVisComponentProps) => {
+  const { rows, columns } = table;
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) => setPagination((p) => ({ ...p, pageSize, pageIndex: 0 })),
+    [setPagination]
+  );
+
+  const onChangePage = useCallback((pageIndex) => setPagination((p) => ({ ...p, pageIndex })), [
+    setPagination,
+  ]);
+
+  // toDo: it is a sample renderCellValue to render a data grid component
+  // will check on it and it might be replaced
+  const renderCellValue = useMemo(() => {
+    return (({ rowIndex, columnId }) => {
+      let adjustedRowIndex = rowIndex;
+
+      // If we are doing the pagination (instead of leaving that to the grid)
+      // then the row index must be adjusted as `data` has already been pruned to the page size
+      adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize;
+
+      return rows.hasOwnProperty(adjustedRowIndex)
+        ? rows[adjustedRowIndex][columnId] || null
+        : null;
+    }) as EuiDataGridProps['renderCellValue'];
+  }, [rows, pagination.pageIndex, pagination.pageSize]);
+
+  return (
+    <EuiDataGrid
+      aria-label="tableVis"
+      columns={columns}
+      columnVisibility={{
+        visibleColumns: columns.map(({ id }) => id),
+        setVisibleColumns: () => {},
+      }}
+      rowCount={rows.length}
+      renderCellValue={renderCellValue}
+      pagination={{
+        ...pagination,
+        onChangeItemsPerPage,
+        onChangePage,
+      }}
+    />
+  );
+};

src/plugins/vis_type_table/public/plugin.ts

@@ -17,7 +17,7 @@ import { getTableVisTypeDefinition } from './table_vis_type';
 import { DataPublicPluginStart } from '../../data/public';
 import { setFormatService } from './services';
 import { ConfigSchema } from '../config';
-import { tableVisRenderer } from './table_vis_renderer';
+import { getTableVisRenderer } from './table_vis_renderer';
 
 /** @internal */
 export interface TableVisPluginSetupDependencies {
@@ -30,6 +30,16 @@ export interface TableVisPluginStartDependencies {
   data: DataPublicPluginStart;
 }
 
+const setupTableVis = async (
+  core: CoreSetup,
+  { expressions, visualizations }: TableVisPluginSetupDependencies
+) => {
+  const [coreStart] = await core.getStartServices();
+  expressions.registerFunction(createTableVisFn);
+  expressions.registerRenderer(getTableVisRenderer(coreStart));
+  visualizations.createBaseVisualization(getTableVisTypeDefinition());
+};
+
 /** @internal */
 export class TableVisPlugin implements Plugin<void, void> {
   initializerContext: PluginInitializerContext<ConfigSchema>;
@@ -38,10 +48,8 @@ export class TableVisPlugin implements Plugin<void, void> {
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations }: TableVisPluginSetupDependencies) {
-    expressions.registerFunction(createTableVisFn);
-    expressions.registerRenderer(tableVisRenderer);
-    visualizations.createBaseVisualization(getTableVisTypeDefinition());
+  public async setup(core: CoreSetup, dependencies: TableVisPluginSetupDependencies) {
+    setupTableVis(core, dependencies);
   }
 
   public start(core: CoreStart, { data }: TableVisPluginStartDependencies) {

src/plugins/vis_type_table/public/table_vis_renderer.tsx

@@ -6,11 +6,15 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
+import { CoreStart } from 'opensearch-dashboards/public';
 import { VisualizationContainer } from '../../visualizations/public';
 import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
 import { TableVisRenderValue } from './table_vis_fn';
+import { TableVisApp } from './components/table_vis_app';
 
-export const tableVisRenderer: () => ExpressionRenderDefinition<TableVisRenderValue> = () => ({
+export const getTableVisRenderer: (
+  core: CoreStart
+) => ExpressionRenderDefinition<TableVisRenderValue> = (core) => ({
   name: 'table_vis',
   displayName: 'table visualization',
   reuseDomNode: true,
@@ -25,7 +29,7 @@ export const tableVisRenderer: () => ExpressionRenderDefinition<TableVisRenderVa
 
     render(
       <VisualizationContainer className="tableVis" showNoResult={showNoResult}>
-        <></> //toDo: add TableVisComponent
+        <TableVisApp services={core} visData={visData} visConfig={visConfig} handlers={handlers} />
       </VisualizationContainer>,
       domNode
     );

yarn.lock

@@ -11640,10 +11640,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/leaflet-responsive-popup/-/leaflet-responsive-popup-0.6.4.tgz#b93d9368ef9f96d6dc911cf5b96d90e08601c6b3"
   integrity sha512-2D8G9aQA6NHkulDBPN9kqbUCkCpWQQ6dF0xFL11AuEIWIbsL4UC/ZPP5m8GYM0dpU6YTlmyyCh1Tz+cls5Q4dg==
 
-"leaflet-vega@npm:@amoo-miki/[email protected].7":
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.7.tgz#8faca1b4b8e2ef7d48667ac6faad9204f4da7153"
-  integrity sha512-T4M5yziwj3Fi9Adsbce+cdWqPjON0BRwEjwqLlPMoirU1vhifA6YKrlZkVzJrK0IIm+hdfMCLkBz33gD8fdxzQ==
+"leaflet-vega@npm:@amoo-miki/[email protected].8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/leaflet-vega/-/leaflet-vega-0.8.8.tgz#675abf37d72fbea859755e982f4fd19dea776557"
+  integrity sha512-W2gGgFDxzy/XUx+fQJfz0NYVXsKl7V+G6QywiMcOV5NEodDId9c60up7NNf+cfM7ggpo+5BuLqrKmosuGO1CsA==
   dependencies:
     vega-spec-injector "^0.0.2"
 
@@ -18000,10 +18000,10 @@ vega-hierarchy@~4.1.0:
     vega-dataflow "^5.7.3"
     vega-util "^1.15.2"
 
-"vega-interpreter@npm:@amoo-miki/[email protected].5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.5.tgz#49970be9b00ca7e45ced0617fbf373c77a28aab4"
-  integrity sha512-lfeU77lVoUbSCC6N1ywdKg+I6K08xpkd82TLon+LebtKyC8aLCe7P5Dd/89zAPyFwRyobKftHu8z0xpV7R7a4Q==
+"vega-interpreter@npm:@amoo-miki/[email protected].6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/vega-forced-csp-compliant-interpreter/-/vega-forced-csp-compliant-interpreter-1.0.6.tgz#5cffdf12b7fe12dc936194edd9e8519506c38716"
+  integrity sha512-9S5nTTVd8JVKobcWp5iwirIeePiamwH1J9uSZPuG5kcF0TUBvGu++ERKjNdst5Qck7e4R6/7vjx2wVf58XUarg==
 
 vega-label@~1.2.0:
   version "1.2.0"