fix(theming): fix TimeTable chart issues #34868

gabotorresruiz · 2025-08-27T16:46:22Z

SUMMARY

This PR addresses theming and visual issues in Time-series charts while significantly improving the TimeTable component architecture through comprehensive refactoring:

Theming Fixes:

Fixed visual styling issues in Time-series charts
Resolved functional bugs affecting chart rendering
Improved consistency with Ant Design theming tokens

Component Structure Improvements:

Converted JavaScript files to TypeScript files
Split monolithic TimeTable component into smaller, testable components
Extracted inline components into separate modules with dedicated test files
Reorganized utility functions into dedicated folders with comprehensive tests

BEFORE/AFTER SCREENSHOTS

Before:

After:

Before:

After:

Before:

After:

Before:

After:

Before:

After:

Before:

After:

TESTING INSTRUCTIONS

Navigate to a Time-series Table chart (or create a new one)
Verify charts render correctly with proper theming
Test value cell formatting and color coding functionality

You can also test that the Time-series Period Pivot chart is also rendering as expected with theming

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

korbit-ai · 2025-08-27T16:46:27Z

Korbit doesn't automatically review large (3000+ lines changed) pull requests such as this one. If you want me to review anyway, use /korbit-review.

gabotorresruiz · 2025-08-27T16:46:44Z

/korbit-review

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Inefficient Array Reversal ▹ view	✅ Fix detected
	Redundant Type Conversions Per Render ▹ view	✅ Fix detected
	Inefficient Array Length Access ▹ view	✅ Fix detected
	Suboptimal Array Slice Usage ▹ view	✅ Fix detected
	Memoize URL Template Rendering ▹ view	✅ Fix detected
	Mixed presentation and data transformation concerns ▹ view	✅ Fix detected
	Unsafe Type Assertion in MetricOption ▹ view	✅ Fix detected
	Inefficient Double Iteration for Sum Calculation ▹ view	✅ Fix detected
	Unsafe URL Template Rendering ▹ view	🧠 Not in scope
	Incorrect Time Value Sorting ▹ view	✅ Fix detected

Files scanned

Due to the exceptionally large size of this PR, I've limited my review to the following files:

File Path	Reviewed
superset-frontend/src/visualizations/TimeTable/components/LeftCell/index.ts	✅
superset-frontend/packages/superset-ui-core/src/validator/validateNonEmpty.ts	✅
superset-frontend/packages/superset-ui-core/src/components/Tooltip/index.tsx	✅
superset-frontend/src/visualizations/TimeTable/components/Sparkline/index.ts	✅
superset-frontend/src/visualizations/TimeTable/components/ValueCell/index.ts	✅
superset-frontend/src/visualizations/TimeTable/components/SparklineCell/index.ts	✅
superset-frontend/src/visualizations/TimeTable/components/FormattedNumber/index.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/colorUtils/index.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/rowProcessing/index.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/sortUtils/index.ts	✅
superset-frontend/src/visualizations/TimeTable/constants.ts	✅
superset-frontend/packages/superset-ui-core/src/components/IconTooltip/index.tsx	✅
superset-frontend/src/visualizations/TimeTable/utils/sparklineHelpers/index.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/valueCalculations/index.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/sparklineDataUtils/index.ts	✅
superset-frontend/src/visualizations/TimeTable/components/LeftCell/mustache.d.ts	✅
superset-frontend/src/visualizations/TimeTable/index.ts	✅
superset-frontend/src/visualizations/TimeTable/components/index.ts	✅
superset-frontend/src/visualizations/TimeTable/components/FormattedNumber/FormattedNumber.tsx	✅
superset-frontend/src/visualizations/TimeTable/utils/rowProcessing/rowProcessing.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/index.ts	✅
superset-frontend/src/visualizations/TimeTable/types.ts	✅
superset-frontend/src/visualizations/TimeTable/components/LeftCell/LeftCell.tsx	✅
superset-frontend/src/visualizations/TimeTable/components/Sparkline/Sparkline.tsx	✅
superset-frontend/src/visualizations/TimeTable/components/ValueCell/ValueCell.tsx	✅
superset-frontend/src/visualizations/TimeTable/utils/colorUtils/colorUtils.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/sortUtils/sortUtils.ts	✅
superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx	✅
superset-frontend/src/visualizations/TimeTable/utils/sparklineDataUtils/sparklineDataUtils.ts	✅
superset-frontend/src/visualizations/TimeTable/utils/sparklineHelpers/sparklineHelpers.ts	✅
superset-frontend/src/explore/components/ControlHeader.tsx	✅
superset-frontend/src/visualizations/TimeTable/utils/valueCalculations/valueCalculations.ts	✅
superset-frontend/src/components/SQLEditorWithValidation/index.tsx	✅
superset-frontend/src/explore/components/controls/CollectionControl/index.jsx	✅
superset-frontend/src/visualizations/TimeTable/TimeTable.tsx	✅
superset-frontend/src/explore/components/controls/OptionControls/index.tsx	✅
superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx	✅
superset-frontend/src/visualizations/TimeTable/components/SparklineCell/SparklineCell.tsx	✅
superset-frontend/src/explore/components/ControlPanelsContainer.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

superset-frontend/src/visualizations/TimeTable/utils/rowProcessing/rowProcessing.ts

superset-frontend/src/visualizations/TimeTable/components/FormattedNumber/FormattedNumber.tsx

superset-frontend/src/visualizations/TimeTable/components/LeftCell/LeftCell.tsx

superset-frontend/src/visualizations/TimeTable/utils/valueCalculations/valueCalculations.ts

github-actions · 2025-08-27T22:11:23Z

@sadpandajoe Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

sadpandajoe · 2025-08-27T22:12:16Z

superset-frontend/packages/superset-ui-core/src/validator/validateNonEmpty.ts

    (Array.isArray(v) && v.length === 0)
  ) {
-    return t('cannot be empty');
+    return t('Cannot be empty');


Did we confirm that this isn't in any translation files that need to be updated?

You’re right, but I don’t think we should handle this here. I’ll revert the change, and we can address it later in a separate ticket along with the necessary translation updates.

github-actions · 2025-08-27T22:21:26Z

@sadpandajoe Ephemeral environment spinning up at http://50.112.49.144:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

sadpandajoe · 2025-08-28T00:57:08Z

superset-frontend/packages/superset-ui-core/src/components/Tooltip/index.tsx

+      body: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'center',


Doesn't this affect all tooltips? Do we want everything to be center aligned?

yup careful on touching core components as will ripple through the app...

Sorry, my bad @sadpandajoe @mistercrunch. I was just testing something. I still think tooltip texts looks better center-aligned lol, but that’s not my call to make. Reverting this change

sadpandajoe · 2025-08-28T01:04:16Z

@kasiazjc @yousoph i've spun up an ephemeral if you'd like to take a look at it

… component

… text

github-actions · 2025-08-28T04:44:14Z

@sadpandajoe Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-08-28T04:56:56Z

@sadpandajoe Ephemeral environment spinning up at http://44.251.1.215:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

msyavuz · 2025-09-01T17:17:34Z

superset-frontend/packages/superset-ui-core/src/components/IconTooltip/index.tsx

-        mouseEnterDelay={0.3}
-        mouseLeaveDelay={0.15}


Do we not need these delays anymore?

Hey @msyavuz! If we want this to behave the same as the other tooltips, we don’t need those delays. If we prefer to keep two different behaviors, we can leave it as is.

Looping in @kasiazjc and @yousoph to hear their thoughts

Hey @msyavuz, I went a step further, I added support for configuring those delays when needed, while keeping the same default values if nothing is passed. This way, the problem should be solved without changing the existing behavior. Please take a look at my latest commit --> 6281e5f

github-actions · 2025-09-01T19:28:53Z

🎪 Showtime is building environment on GHA for 6281e5f

github-actions · 2025-09-01T19:42:13Z

🎪 Showtime deployed environment on GHA for 6281e5f

• Environment: http://34.219.194.154:8080 (admin/admin)
• Lifetime: 24h auto-cleanup
• Updates: New commits create fresh environments automatically

msyavuz

LGTM! Tested and works fine.

(cherry picked from commit d183969)

gabotorresruiz added 3 commits August 25, 2025 17:20

fix(theming): visual bugs on Time-series charts

a6c55c8

fix(theming): functional bugs on Time-series charts

5f08d22

fix(TimeTable): reorganize component structure

066b13c

pull-request-size bot added the size/XXL label Aug 27, 2025

github-actions bot added plugins packages and removed size/XXL labels Aug 27, 2025

dosubot bot added change:frontend Requires changing the frontend viz:charts:timetable Related to the Time Table chart labels Aug 27, 2025

korbit-ai bot reviewed Aug 27, 2025

View reviewed changes

pull-request-size bot added the size/XXL label Aug 27, 2025

gabotorresruiz force-pushed the fix/time-series-table-visuals branch from 30871f0 to 887ccb9 Compare August 27, 2025 18:49

fix(TimeTable): fix korbit PR comments

ab7d74f

gabotorresruiz force-pushed the fix/time-series-table-visuals branch from 887ccb9 to ab7d74f Compare August 27, 2025 19:09

sadpandajoe added the testenv-up label Aug 27, 2025

sadpandajoe requested review from eschutho, mistercrunch, msyavuz and rusackas August 27, 2025 22:11

sadpandajoe reviewed Aug 27, 2025

View reviewed changes

sadpandajoe reviewed Aug 28, 2025

View reviewed changes

gabotorresruiz added 2 commits August 27, 2025 23:00

fix(theming): reverting 'textAligned: center' change for Tooltip core…

b12c427

… component

fix(theming): reverting uppercase change to 'cannot be empty' tooltip…

8ae1898

… text

gabotorresruiz force-pushed the fix/time-series-table-visuals branch from b04dabd to 8ae1898 Compare August 28, 2025 02:31

sadpandajoe removed the testenv-up label Aug 28, 2025

gabotorresruiz requested a review from sadpandajoe August 29, 2025 15:38

msyavuz reviewed Sep 1, 2025

View reviewed changes

fix(IconTooltip): add configurable tooltip delay

6281e5f

gabotorresruiz requested a review from msyavuz September 1, 2025 19:20

msyavuz added 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR and removed testenv-up labels Sep 1, 2025

github-actions bot added the 🎪 6281e5f 🌐 34.219.194.154:8080 Environment 6281e5f URL: http://34.219.194.154:8080 (click to visit) label Sep 1, 2025

msyavuz approved these changes Sep 2, 2025

View reviewed changes

msyavuz merged commit d183969 into apache:master Sep 2, 2025
70 checks passed

msyavuz mentioned this pull request Sep 2, 2025

fix(TimeTable): use type-only export for TableChartProps to resolve webpack warnings #34989

Merged

9 tasks

sadpandajoe pushed a commit that referenced this pull request Sep 2, 2025

fix(theming): fix TimeTable chart issues (#34868)

2f08647

(cherry picked from commit d183969)

sadpandajoe added this to Apache Superset 6.0.0 Release Bugs Sep 2, 2025

sadpandajoe moved this to Cherried in Apache Superset 6.0.0 Release Bugs Sep 2, 2025

fix(theming): fix TimeTable chart issues #34868

fix(theming): fix TimeTable chart issues #34868

Uh oh!

Conversation

gabotorresruiz commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

korbit-ai bot commented Aug 27, 2025

Uh oh!

gabotorresruiz commented Aug 27, 2025

Uh oh!

korbit-ai bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 27, 2025

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!

sadpandajoe commented Aug 28, 2025

Uh oh!

github-actions bot commented Aug 28, 2025

Uh oh!

github-actions bot commented Aug 28, 2025

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!

github-actions bot commented Sep 1, 2025

Uh oh!

github-actions bot commented Sep 1, 2025

Uh oh!

msyavuz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gabotorresruiz commented Aug 27, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading