[Table Visualization] make table vis column sortable #2502

ananzh · 2022-10-04T22:13:51Z

Description

add sort state (asc | desc) to column

Partially resolve:

Check List

joshuarrrr

Nice progress. I don't have all the context of how this should be working, but it seems like the state handling could be simplified a bit more.

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

joshuarrrr · 2022-10-05T18:41:08Z

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

+  // set sort and resize column state
+  const [sortColumn, setSortColumn] = useState<SortColumn>(
+    handlers.uiState.get('vis.sortColumn') || {}
+  );
+
+  const [columnsWidth, setColumnsWidth] = useState<ColumnWidth[]>(
+    handlers.uiState.get('vis.columnsWidth') || []
+  );


Do you actually need these local states? It seems like you can just use handlers.uiState getters/setters and the curColumnsState.

I think this is a similar question to Ashwin's. I post some details there:

uiState.set won’t let me to render the component. If I switch setSortColumn(updatedVisState.sortColumn); to uiState.set than it won’t re-render with corrected sorted columns. I am using an example from charts ([https://github.com/opensearch-project/OpenSearch-Dashboards/blob/d7004dc5b0392477f[…]3b/src/plugins/charts/public/static/components/color_schema.tsx](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/d7004dc5b0392477fdd54ac66b29d231975a173b/src/plugins/charts/public/static/components/color_schema.tsx#L64) ) to force it work. Regarding this part, I could open an issue as a post research topic. Currently, I couldn’t find anything meaningful now.

removed local states

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

ashwin-pc · 2022-10-05T22:39:32Z

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


  const pagination = usePagination(visConfig, rows.length);

+  // set sort and resize column state
+  const [sortColumn, setSortColumn] = useState<SortColumn>(
+    handlers.uiState.get('vis.sortColumn') || {}


From what i know about UIState, its a way to get and set state information inside a component rendered by an expression function. We should not be maintaining duplicate state here. If we want to set the new sortColumn value, just use the uiState.set function. The Visualization should rerender with the updated value automatically.

If for some reason it does not update, we need to look into that. But using the useState to trigger the rerender is a hacky workaround

Hey @ashwin-pc, regarding this feedback (#2502 (comment) ), you are right, uiState.set won’t let me to render the component. If I switch setSortColumn(updatedVisState.sortColumn); to uiState.set than it won’t re-render with corrected sorted columns. I am using an example from charts (https://github.com/opensearch-project/OpenSearch-Dashboards/blob/d7004dc5b0392477f[…]3b/src/plugins/charts/public/static/components/color_schema.tsx ) to force it work. Regarding this part, I could open an issue as a post research topic. Currently, I couldn’t find anything meaningful now.

removed local state.

* add sort state (asc | desc) to column Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]>

…opensearch-project#2279) To convert the table visualization into React & OUI DataGrid component, in this PR, we did two main things: * clean out legacy angular code * restore table vis in react * Datagrid component does not support splitted grids. For future transfer to OUI Datagrid, we create a tableGroup in visData for splitted grids. issue resolved: opensearch-project#2212 https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2213a Signed-off-by: Anan Zhuang <[email protected]> rename visTable back to opensearch_dashboards_table and add stronger type Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] add a plain datagrid component (opensearch-project#2390) implement a plain OuiDataGrid component use the basic pagenation, sort and format. Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] restore datagrid columns (opensearch-project#2411) * restore datagrid columns * display column title correctly * deangular and re-use formatted column * convert formatted column to data grid column * restore filter in and filter out value functions Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] restore pagination to table vis (opensearch-project#2461) * add pagination patically resolved: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] make table vis column resizable (opensearch-project#2464) * add resizable state to column Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] make table vis column sortable (opensearch-project#2502) * add sort state (asc | desc) to column * fix pagination issue Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] format table cell and restore showTotal feature (opensearch-project#2562) * format table cell to show Date and percent * restore showTotal feature: it allows table vis to show total, avg, min, max and count statics on count * fix some type errors Partically resolved: opensearch-project#2379 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization]restore export csv feature to table vis (opensearch-project#2568) * add addtional action in toolbar to allow export data to csv. there are two types of csv, raw and formatted. raw is the original data and formatted is to show formatted Date and percentage data when needed. * when table is not saved, export csv file will be named as unsaved-raw.csv if choose raw. when table is saved with a filename, it will be saved as [filename]-[raw/formatted].csv Partically resolved: opensearch-project#2379 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] split table in rows and columns This PR implement a group component TableVisGroupComponent utilizing TableVisComponent as sub component. It also adds a title to TableVisComponent. Partically resolved: opensearch-project#2379 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] remove local state * remove local col width state to allow split tables to fetch updated col width state * fix type errors in usePagination Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] remove repeated column from split tables Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization][BUG] partical rows option generate repeated metrics Signed-off-by: Anan Zhuang <[email protected]>

…opensearch-project#2279) To convert the table visualization into React & OUI DataGrid component, in this PR, we did two main things: * clean out legacy angular code * restore table vis in react * Datagrid component does not support splitted grids. For future transfer to OUI Datagrid, we create a tableGroup in visData for splitted grids. issue resolved: opensearch-project#2212 https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2213a Signed-off-by: Anan Zhuang <[email protected]> rename visTable back to opensearch_dashboards_table and add stronger type Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] add a plain datagrid component (opensearch-project#2390) implement a plain OuiDataGrid component use the basic pagenation, sort and format. Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] restore datagrid columns (opensearch-project#2411) * restore datagrid columns * display column title correctly * deangular and re-use formatted column * convert formatted column to data grid column * restore filter in and filter out value functions Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] restore pagination to table vis (opensearch-project#2461) * add pagination patically resolved: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] make table vis column resizable (opensearch-project#2464) * add resizable state to column Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] make table vis column sortable (opensearch-project#2502) * add sort state (asc | desc) to column * fix pagination issue Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] format table cell and restore showTotal feature (opensearch-project#2562) * format table cell to show Date and percent * restore showTotal feature: it allows table vis to show total, avg, min, max and count statics on count * fix some type errors Partically resolved: opensearch-project#2379 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization]restore export csv feature to table vis (opensearch-project#2568) * add addtional action in toolbar to allow export data to csv. there are two types of csv, raw and formatted. raw is the original data and formatted is to show formatted Date and percentage data when needed. * when table is not saved, export csv file will be named as unsaved-raw.csv if choose raw. when table is saved with a filename, it will be saved as [filename]-[raw/formatted].csv Partically resolved: opensearch-project#2379 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization] split table in rows and columns (opensearch-project#2578) This PR implement a group component TableVisGroupComponent utilizing TableVisComponent as sub component. It also adds a title to TableVisComponent. Partically resolved: opensearch-project#2379 Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization][IMPROVE] remove repeated column from split tables (opensearch-project#2583) Currently, when we split table by columns, the split column is shown both in the table title and as a separate column. This is not needed. In this PR, we remove the repeated column in split tables in col. Partically resolved: opensearch-project#2579 (comment) Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization][BUG] remove local column width state (opensearch-project#2582) * remove local col width state to allow split tables to fetch updated col width state * fix type errors in usePagination Partially resolved: opensearch-project#2579 (comment) Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization][BUG] partical rows shows metrics for all columns (opensearch-project#2648) Currently, when we enable Show partial rows in the Options panel, we see metrics been added to every column even though Show metrics for every bucket/level is not enabled. Metrics are added and returned when we enable the partial rows. This PR fixed the bug by slice the returned data to allow only the last set of metrices. Partially resolved: opensearch-project#2579 (comment) Signed-off-by: Anan Zhuang <[email protected]>

ananzh added the tableVis table visualization label Oct 4, 2022

ananzh requested review from joshuarrrr, AMoo-Miki and ashwin-pc October 4, 2022 22:13

ananzh self-assigned this Oct 4, 2022

ananzh requested a review from a team as a code owner October 4, 2022 22:13

ananzh mentioned this pull request Oct 4, 2022

[Table Visualization] add OUI Datagrid component for table vis #2305

Closed

joshuarrrr reviewed Oct 5, 2022

View reviewed changes

ashwin-pc reviewed Oct 5, 2022

View reviewed changes

This was referenced Oct 11, 2022

[Table Visualization][research][enhancement] local state management (sort and resize) #2550

Closed

[DESIGN][Table] new table visualization plugin #2187

Closed

[Table Visualization] make table vis column sortable

65181fb

* add sort state (asc | desc) to column Partially resolve: opensearch-project#2305 Signed-off-by: Anan Zhuang <[email protected]>

ananzh force-pushed the feature/add-sort branch from 8c72e36 to 65181fb Compare October 12, 2022 21:01

ananzh merged commit 7e969bc into opensearch-project:feature/tableVis Oct 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Table Visualization] make table vis column sortable #2502

[Table Visualization] make table vis column sortable #2502

ananzh commented Oct 4, 2022

joshuarrrr left a comment

joshuarrrr Oct 5, 2022

ananzh Oct 10, 2022 •

edited

Loading

ananzh Oct 12, 2022

ashwin-pc Oct 5, 2022 •

edited

Loading

ananzh Oct 10, 2022 •

edited

Loading

ananzh Oct 12, 2022

[Table Visualization] make table vis column sortable #2502

[Table Visualization] make table vis column sortable #2502

Conversation

ananzh commented Oct 4, 2022

Description

Partially resolve:

Check List

joshuarrrr left a comment

Choose a reason for hiding this comment

joshuarrrr Oct 5, 2022

Choose a reason for hiding this comment

ananzh Oct 10, 2022 • edited Loading

Choose a reason for hiding this comment

ananzh Oct 12, 2022

Choose a reason for hiding this comment

ashwin-pc Oct 5, 2022 • edited Loading

Choose a reason for hiding this comment

ananzh Oct 10, 2022 • edited Loading

Choose a reason for hiding this comment

ananzh Oct 12, 2022

Choose a reason for hiding this comment

ananzh Oct 10, 2022 •

edited

Loading

ashwin-pc Oct 5, 2022 •

edited

Loading

ananzh Oct 10, 2022 •

edited

Loading