[Table Visualization] add a plain datagrid component

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

Partially resolve:
opensearch-project#2305

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

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 @@ leaflet-responsive-popup@0.6.4:
  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/leaflet-vega@0.8.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/leaflet-vega@0.8.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/vega-forced-csp-compliant-interpreter@1.0.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/vega-forced-csp-compliant-interpreter@1.0.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"