You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "eschutho (via GitHub)" <gi...@apache.org> on 2025/09/11 23:57:58 UTC
[PR] feat: Add comprehensive dark mode support for chart thumbnails and examples [superset]
eschutho opened a new pull request, #35111:
URL: https://github.com/apache/superset/pull/35111
## SUMMARY
This PR adds comprehensive dark mode support for chart thumbnails and examples across 80+ chart types in Apache Superset. It also introduces keyboard navigation improvements for the chart gallery and fixes geographical contrast issues in deck.gl charts.
## BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
### Chart Gallery Keyboard Navigation
- **Before**: Tab navigation required pressing Enter to select charts
- **After**: Charts are automatically selected when tabbed to, with clean focus styling
### Dark Mode Chart Examples
- **Before**: Many chart types lacked dark mode thumbnails and examples
- **After**: All chart types have proper dark mode assets with appropriate contrast
### Deck.gl Geographical Contrast
- **Before**: Water and land had poor contrast, maps were barely visible in dark mode
- **After**: Water is clearly darker than land, with visible street details and geographical context
## TEST PLAN
1. **Chart Gallery Navigation**:
- Navigate to chart selection page
- Use Tab key to move between chart thumbnails
- Verify charts are auto-selected without pressing Enter
- Verify clean focus styling (no browser outline)
2. **Dark Mode Assets**:
- Switch to dark theme
- Browse through all chart types in gallery
- Verify all charts have appropriate dark mode thumbnails
- Check example images for proper contrast and visibility
3. **Deck.gl Chart Contrast**:
- Create deck.gl visualizations (path, heatmap, multi-layers, etc.)
- Switch to dark mode
- Verify water areas are darker than land areas
- Confirm geographical features (streets, labels) are visible
- Ensure data visualizations remain prominent
## ADDITIONAL INFORMATION
### Charts Enhanced:
- **Legacy Charts**: Calendar, Chord, Country Map, Horizon, Map Box, Paired T-Test, Parallel Coordinates, Partition, Rose, World Map
- **Deck.gl Charts**: Arc, Contour, Geojson, Grid, Heatmap, Hex, Path, Polygon, Scatter, Screengrid, Multi Layers
- **NVD3 Charts**: Bubble, Bullet, Compare, Time Pivot
- **ECharts**: All variants including BigNumber, BoxPlot, Pie, Radar, Sankey, Sunburst, Timeseries, etc.
- **Other**: AG Grid Table, Cartodiagram, Handlebars, Pivot Table, Table, Word Cloud, Time Table
### Technical Changes:
- Added `onFocus` and `onKeyDown` handlers to chart thumbnails for keyboard navigation
- Implemented proper dark theme color hierarchies for geographical charts
- Fixed thumbnail inconsistencies (swapped light/dark usage)
- Enhanced street visibility in map-based visualizations
- Improved contrast ratios for accessibility compliance
### Files Modified:
- 222 files total (new dark mode assets + code updates)
- Chart metadata files updated to reference dark mode images
- VizTypeGallery component enhanced with keyboard navigation
🤖 Generated with [Claude Code](https://claude.ai/code)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat: Add comprehensive dark mode support for chart thumbnails and examples [superset]
Posted by "korbit-ai[bot] (via GitHub)" <gi...@apache.org>.
korbit-ai[bot] commented on code in PR #35111:
URL: https://github.com/apache/superset/pull/35111#discussion_r2342611864
##########
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx:
##########
@@ -334,9 +338,22 @@ const Thumbnail: FC<ThumbnailProps> = ({
onDoubleClick,
}) => {
const theme = useTheme();
+ const isDarkMode = isThemeDark(theme);
const { key, value: type } = entry;
const isSelected = selectedViz === entry.key;
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ setSelectedViz(key);
+ }
+ };
+
+ const handleFocus = () => {
+ // Auto-select chart when tabbed to
+ setSelectedViz(key);
+ };
Review Comment:
### Disruptive Auto-Selection on Focus <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
The handleFocus auto-selection behavior can cause unintended selections when users are just tabbing through UI elements for navigation purposes.
###### Why this matters
Auto-selecting charts on focus can disrupt keyboard navigation as users may want to explore available options without making a selection, leading to a confusing user experience.
###### Suggested change ∙ *Feature Preview*
Remove the auto-selection on focus or add a user preference setting to control this behavior:
```typescript
const handleFocus = () => {
// Let users explore with keyboard navigation without auto-selecting
// Only handle actual selection via keyboard with handleKeyDown
};
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a42e839-7bc2-4cd6-aa7d-5c80c5568d77/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a42e839-7bc2-4cd6-aa7d-5c80c5568d77?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a42e839-7bc2-4cd6-aa7d-5c80c5568d77?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a42e839-7bc2-4cd6-aa7d-5c80c5568d77?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a42e839-7bc2-4cd6-aa7d-5c80c5568d77)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:c55b7c49-a5da-45d2-b8bd-731c7d0549bb -->
[](c55b7c49-a5da-45d2-b8bd-731c7d0549bb)
##########
superset-frontend/packages/superset-ui-core/src/theme/index.tsx:
##########
@@ -62,7 +62,7 @@ const styled: CreateStyled = emotionStyled;
// launching in in dark mode for now while iterating
const themeObject: Theme = Theme.fromConfig({
- algorithm: ThemeAlgorithm.DEFAULT,
+ algorithm: ThemeAlgorithm.DARK,
});
Review Comment:
### Static Theme Initialization Performance Impact <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Theme initialization is hardcoded to dark mode without considering system preferences or user settings, which requires unnecessary theme recalculations when switching modes.
###### Why this matters
Each time the theme needs to change, the entire theme object must be recalculated and rerendered, impacting performance especially in larger applications with many styled components.
###### Suggested change ∙ *Feature Preview*
Initialize theme based on system/user preferences and implement memoization to cache theme calculations:
```typescript
const themeObject = useMemo(() => Theme.fromConfig({
algorithm: getUserPreferredTheme() || getSystemTheme(),
}), [userPreference]);
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5a6cfa3a-9a80-43b1-9bf8-206d23a7535b/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5a6cfa3a-9a80-43b1-9bf8-206d23a7535b?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5a6cfa3a-9a80-43b1-9bf8-206d23a7535b?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5a6cfa3a-9a80-43b1-9bf8-206d23a7535b?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5a6cfa3a-9a80-43b1-9bf8-206d23a7535b)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:d4995936-db7a-40a4-836b-9d795260d780 -->
[](d4995936-db7a-40a4-836b-9d795260d780)
##########
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts:
##########
@@ -27,9 +27,13 @@ import buildQuery from '../../buildQuery';
import controlPanel from './controlPanel';
import transformProps from '../../transformProps';
import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
import example1 from './images/Bar1.png';
+import example1Dark from './images/Bar1-dark.png';
import example2 from './images/Bar2.png';
+import example2Dark from './images/Bar2-dark.png';
import example3 from './images/Bar3.png';
+import example3Dark from './images/Bar3-dark.png';
Review Comment:
### Eager Loading of Example Images <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Multiple image imports are loaded eagerly, increasing initial bundle size and load time.
###### Why this matters
Loading all example images at startup unnecessarily increases the initial page load time and memory usage when these images might not be immediately needed.
###### Suggested change ∙ *Feature Preview*
Implement lazy loading for example images:
```typescript
const example1 = () => import('./images/Bar1.png');
const example1Dark = () => import('./images/Bar1-dark.png');
// ... similar for other images
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/3fc5f92d-44fa-4db7-a5ae-923be66a32e6/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/3fc5f92d-44fa-4db7-a5ae-923be66a32e6?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/3fc5f92d-44fa-4db7-a5ae-923be66a32e6?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/3fc5f92d-44fa-4db7-a5ae-923be66a32e6?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/3fc5f92d-44fa-4db7-a5ae-923be66a32e6)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:57fbb9f6-41d3-47f4-afe2-3ebb56aa5d8e -->
[](57fbb9f6-41d3-47f4-afe2-3ebb56aa5d8e)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat: Add comprehensive dark mode support for chart thumbnails and examples [superset]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #35111:
URL: https://github.com/apache/superset/pull/35111#issuecomment-3287150301
🎪 [Showtime](https://github.com/mistercrunch/superset-showtime) deployed environment on [GHA](https://github.com/apache/superset/actions/runs/17688331026) for [687781c](https://github.com/apache/superset/commit/687781c)
• **Environment:** http://44.248.139.38:8080 (admin/admin)
• **Lifetime:** 24h auto-cleanup
• **Updates:** New commits create fresh environments automatically
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat: Add comprehensive dark mode support for chart thumbnails and examples [superset]
Posted by "eschutho (via GitHub)" <gi...@apache.org>.
eschutho merged PR #35111:
URL: https://github.com/apache/superset/pull/35111
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] feat: Add comprehensive dark mode support for chart thumbnails and examples [superset]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #35111:
URL: https://github.com/apache/superset/pull/35111#issuecomment-3287133555
🎪 [Showtime](https://github.com/mistercrunch/superset-showtime) is building environment on [GHA](https://github.com/apache/superset/actions/runs/17688331026) for [687781c](https://github.com/apache/superset/commit/687781c)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org