[Explore Vis] Fix table visualiztion issues #10754

lunalzm · 2025-10-19T17:13:34Z

Description

This PR addresses several critical issues with table visualizations in the Explore plugin:

Field Order Issue: Table columns were being displayed in type-based order (numerical → categorical → date) instead of preserving the original field order from the query response.
Column Visibility Issue: When running new queries, fields would be hidden by default.
Fix pagination not working
Changed the table cell default text alignment to left to mitigate the table cell text move issue

The fixes ensure that table visualizations now correctly respect the field order specified in queries and properly manage column visibility across query executions.

Screenshot

Field Order

Before

After

Column Visibility

Before

After

Testing the changes

Field Order Test:
SOURCE = opensearch_dashboards_sample_data_logs | FIELDS @timestamp, extension, bytes, agent
- Verify fields appear in order: @timestamp → extension → bytes → agent
- Previously would show: bytes → @timestamp → extension → agent
Column Visibility Test:
SOURCE = opensearch_dashboards_sample_data_logs | FIELDS bytes, memory, referer, url, agent
- Verify all fields are hidden

Changelog

fix: Fix table vis fields order not the same as fields order in the query
fix: table vis pagination not working due to unnecessary rerendering
fix: change the default table column alignment to left

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

codecov · 2025-10-19T17:27:50Z

Codecov Report

❌ Patch coverage is 90.90909% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 60.50%. Comparing base (46060ab) to head (ad6135e).
⚠️ Report is 12 commits behind head on main.

Files with missing lines	Patch %	Lines
...blic/components/visualizations/table/table_vis.tsx	88.88%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10754      +/-   ##
==========================================
+ Coverage   60.47%   60.50%   +0.02%     
==========================================
  Files        4484     4485       +1     
  Lines      120115   120185      +70     
  Branches    19892    19910      +18     
==========================================
+ Hits        72641    72719      +78     
+ Misses      42431    42426       -5     
+ Partials     5043     5040       -3

Flag	Coverage Δ
Linux_1	`26.58% <ø> (ø)`
Linux_2	`38.82% <ø> (ø)`
Linux_3	`39.07% <ø> (+<0.01%)`	⬆️
Linux_4	`33.29% <90.90%> (+0.06%)`	⬆️
Windows_1	`26.59% <ø> (ø)`
Windows_2	`38.79% <ø> (ø)`
Windows_3	`39.07% <ø> (+<0.01%)`	⬆️
Windows_4	`33.29% <90.90%> (+0.06%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ruanyl · 2025-10-20T06:00:43Z

src/plugins/explore/public/components/visualizations/table/table_vis.tsx

      }
    }, [styleOptions?.showColumnFilter]);

+    useEffect(() => {


Could you leave a comment on this useEffect to describe the logic?

is this just a replacement by new columns?

@lunalzm How do you reproduce the issue?

@Hailong-am @lunalzm I removed this useEffect, and pushed a commit that fix the column visibility issue from the root

I just read the comment for this method and didn't read the logic fully, so i think it just a replacement by new columns. There have different property in VisColumn interface, i see we are using id, name and column, not sure what's the difference.

const sortedColumns = useMemo(() => [...columns].sort((a, b) => a.id - b.id), [columns]);

const newColumnIds = sortedColumns.map(({ column }) => column);

This issue sometimes happens when I run a new query or refresh the page. Some columns get hidden by default.

Screen.Recording.2025-10-21.at.16.54.54.mov

Signed-off-by: Luna Liu <[email protected]>

ruanyl · 2025-10-20T08:45:35Z

src/plugins/explore/public/components/visualizations/visualization_render.tsx

      ...(visualizationData?.dateColumns ?? []),
    ];
+
+    return allColumns.sort((a, b) => a.id - b.id);


Can you also check explore_embeddable.tsx to see if the same logic should apply there? or perhaps move this logic to table_vis component?

…embeddables Signed-off-by: Yulong Ruan <[email protected]>

Signed-off-by: Yulong Ruan <[email protected]>

wanglam · 2025-10-21T08:32:16Z

src/plugins/explore/public/components/visualizations/table/table_vis.tsx


 export const TableVis = React.memo(
  ({ rows, columns, styleOptions, pageSizeOptions, showStyleSelector }: TableVisProps) => {
+    const sortedColumns = useMemo(() => columns.sort((a, b) => a.id - b.id), [columns]);


Sort will update the original columns, I prefer to construct a new array for sorting.

good point, I will update

ruanyl · 2025-10-21T08:32:20Z

src/plugins/explore/public/components/visualizations/visualization_render.tsx

-        rows={visualizationData.transformedData ?? []}
-        columns={columns}
-      />
+      <TableVis styleOptions={visConfig.styles as TableChartStyle} rows={rows} columns={columns} />


I changed it to rows which is defined as this, should be the same

const rows = useMemo(() => { return visualizationData?.transformedData ?? []; }, [visualizationData?.transformedData]);

Signed-off-by: Yulong Ruan <[email protected]>

wanglam · 2025-10-21T08:41:51Z

src/plugins/explore/public/components/visualizations/table/table_vis.tsx

+    // If there are common fields, preserve existing visible columns and add any new ones
+    useEffect(() => {
+      const currentFieldNames = sortedColumns.map(({ name }) => name);
+      const prevFieldNames = prevFieldNamesRef.current;


I prefer to delete this ref, can we calculate the new columns based prevVisibleColumns in setVisibleColumns callback and sortedColumns?

The overall implementation has changed, this useEffect no longer exists now

Hailong-am · 2025-10-21T08:47:42Z

src/plugins/explore/public/components/visualizations/table/table_vis.tsx


    const renderFooterCellValue = useCallback(
      ({ columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
        const alignment = styleOptions?.globalAlignment || 'auto';


should this be left as well?

that's right

Signed-off-by: Yulong Ruan <[email protected]>

Hailong-am · 2025-10-21T09:12:33Z

src/plugins/explore/public/components/visualizations/table/table_vis.tsx


 export const TableVis = React.memo(
  ({ rows, columns, styleOptions, pageSizeOptions, showStyleSelector }: TableVisProps) => {
+    const sortedColumns = useMemo(() => [...columns].sort((a, b) => a.id - b.id), [columns]);


nit: we can make the columns is ordered in props in parent component, that could reduce the change.

This component is used at different places, having the sorting here is to avoid having the same logic at multiple places

ruanyl · 2025-10-21T23:41:40Z

Checked the failed test is unrelated, merging now

lunalzm requested review from paulstn and sumukhswamy as code owners October 19, 2025 17:13

github-actions bot added the seasoned-contributor label Oct 19, 2025

opensearch-changeset-bot bot added a commit to lunalzm/OpenSearch-Dashboards that referenced this pull request Oct 19, 2025

Changeset file for PR opensearch-project#10754 created/updated

f1b57ff

lunalzm changed the title ~~[Explore] Fix fields order issue~~ [Explore Vis] Fix fields order issue Oct 20, 2025

ruanyl reviewed Oct 20, 2025

View reviewed changes

lunalzm and others added 3 commits October 20, 2025 15:44

Fix fields order issue

ce11838

Signed-off-by: Luna Liu <[email protected]>

Changeset file for PR opensearch-project#10754 created/updated

baf9b73

Fix fields order issue

3a9c07d

Signed-off-by: Luna Liu <[email protected]>

lunalzm force-pushed the fix-table-fields-order branch from f1b57ff to 3a9c07d Compare October 20, 2025 07:44

ruanyl reviewed Oct 20, 2025

View reviewed changes

ruanyl and others added 5 commits October 21, 2025 13:10

refactor(vis): table vis columns should also be sorted correctly for …

23f1ebb

…embeddables Signed-off-by: Yulong Ruan <[email protected]>

refactor(vis): change default table cell alignment to left

f685e22

Signed-off-by: Yulong Ruan <[email protected]>

fix(vis): fix table vis pagination not working

55e1791

Signed-off-by: Yulong Ruan <[email protected]>

fix(vis): remove console.log

3a80e2d

Signed-off-by: Yulong Ruan <[email protected]>

Changeset file for PR opensearch-project#10754 created/updated

55fd811

ruanyl changed the title ~~[Explore Vis] Fix fields order issue~~ [Explore Vis] Fix table visualiztion issues Oct 21, 2025

wanglam reviewed Oct 21, 2025

View reviewed changes

ruanyl reviewed Oct 21, 2025

View reviewed changes

refactor(vis): avoid sorting array in-place

9e01a75

Signed-off-by: Yulong Ruan <[email protected]>

wanglam reviewed Oct 21, 2025

View reviewed changes

Hailong-am reviewed Oct 21, 2025

View reviewed changes

ruanyl added 2 commits October 21, 2025 16:58

refactor: fix the root cause of the table column visibility issue

6f42a06

Signed-off-by: Yulong Ruan <[email protected]>

fix: update table footer default alignment to left

ad6135e

Signed-off-by: Yulong Ruan <[email protected]>

Hailong-am reviewed Oct 21, 2025

View reviewed changes

Hailong-am approved these changes Oct 21, 2025

View reviewed changes

wanglam approved these changes Oct 21, 2025

View reviewed changes

ruanyl merged commit 3848a76 into opensearch-project:main Oct 21, 2025
101 of 104 checks passed

[Explore Vis] Fix table visualiztion issues #10754

[Explore Vis] Fix table visualiztion issues #10754

Conversation

lunalzm commented Oct 19, 2025 • edited by ruanyl Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshot

Field Order

Before

After

Column Visibility

Before

After

Testing the changes

Changelog

Check List

Uh oh!

codecov bot commented Oct 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ruanyl commented Oct 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lunalzm commented Oct 19, 2025 •

edited by ruanyl

Loading

codecov bot commented Oct 19, 2025 •

edited

Loading