fix(explore): align viz type gallery thumbnails and Featured tag by yousoph · Pull Request #43373 · apache/superset

yousoph · 2026-08-21T03:55:09Z

SUMMARY

Two layout problems in the "Select a visualization type" gallery:

Chart names longer than one line wrapped, changing tile height. Since the grid rows size to their tallest tile, a wrapped name pushed the thumbnails of neighbouring tiles in the same row upward, so thumbnails in a row no longer lined up.
The "Featured" badge was absolutely positioned against the whole tile at a hardcoded top: sizeUnit * 19 offset (dating back to when the badge was introduced in feat(viz-gallery): add 'feature' tag and fuzzy search weighting #18662), so it drifted as tile height varied.

Fix: clamp the chart-name label to a fixed two-line block with ellipsis overflow so every tile is the same height (full name preserved via a title tooltip), top-align the grid items, and anchor the Featured badge to a new position: relative wrapper around the thumbnail image so it sits consistently at the image's top-right.

TESTING INSTRUCTIONS

Create a new chart and open the viz type gallery. Confirm all thumbnails in a row line up regardless of chart-name length, and the Featured badge sits at the thumbnail's top-right on every featured type. Long names truncate with an ellipsis and reveal the full name on hover.

A unit test asserts every label carries a title matching its full name.

🤖 Generated with Claude Code

The 'Select a visualization type' gallery had two layout problems: - Long chart names wrapped to multiple lines, changing tile height. Because the grid rows size to their tallest tile, a wrapped name pushed the thumbnails of neighbouring tiles in the same row upward, so thumbnails no longer lined up. - The 'Featured' badge was positioned with a hardcoded `top: sizeUnit * 19` offset anchored to the whole tile, so it landed in the wrong spot once tile height varied. Fixes: - Clamp the chart-name label to a fixed two-line block (ellipsis overflow) so every tile is the same height; the full name stays available via a title tooltip. Top-align grid items as a defensive measure. - Anchor the Featured badge to a position:relative wrapper around the thumbnail image (top-right corner) instead of the magic offset, so it sits consistently regardless of name length. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

bito-code-review · 2026-08-21T03:55:20Z

Code Review Agent Run #4ffac3

Actionable Suggestions - 0

Filtered by Review Rules

Bito filtered these suggestions based on rules created automatically for your feedback. Manage rules.

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx - 1
- Missing return type and docstring · Line 281-281

Review Details

Files reviewed - 2 · Commit Range: 4517f7d..4517f7d
- superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
- superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

github-actions · 2026-08-21T04:04:39Z

🎪 Showtime is building environment on GHA for 4517f7d

Copilot

Pull request overview

Fixes two UI layout issues in Explore’s “Select a visualization type” gallery so thumbnail tiles stay visually aligned regardless of visualization name length, and ensures the “Featured” badge consistently anchors to the thumbnail image area.

Changes:

Top-aligns grid items and clamps visualization names to a fixed two-line label height (with tooltip via title).
Re-anchors the “Featured” badge by introducing a relative-positioned wrapper around the thumbnail image.
Adds a unit test to ensure each thumbnail label exposes the full name via a title attribute.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx	Adjusts gallery grid alignment, clamps label height, and repositions the Featured badge relative to the thumbnail image.
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx	Adds a regression test asserting thumbnail labels include a `title` attribute matching the full chart name.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+    expect(labels.length).toBeGreaterThan(0);
+    labels.forEach(label => {
+      expect(label).toHaveAttribute('title', label.textContent);
+    });


bito-code-review · 2026-08-21T04:06:18Z

The assertion expect(label).toHaveAttribute('title', label.textContent); is indeed problematic because textContent can be null, while toHaveAttribute expects a string or RegExp. To fix this, you should coerce the value to a string or provide a fallback, such as expect(label).toHaveAttribute('title', label.textContent ?? '');.

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx

labels.forEach(label => {
      expect(label).toHaveAttribute('title', label.textContent ?? '');
    });

codecov · 2026-08-21T04:07:02Z

Codecov Report

❌ Patch coverage is 66.66667% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.83%. Comparing base (18fc2c6) to head (59a53ed).
⚠️ Report is 3 commits behind head on master.

Files with missing lines	Patch %	Lines
...ponents/controls/VizTypeControl/VizTypeGallery.tsx	66.66%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #43373      +/-   ##
==========================================
- Coverage   66.83%   66.83%   -0.01%     
==========================================
  Files        2876     2876              
  Lines      164061   164065       +4     
  Branches    37860    37862       +2     
==========================================
- Hits       109657   109654       -3     
- Misses      52230    52237       +7     
  Partials     2174     2174

Flag	Coverage Δ
javascript	`74.11% <66.66%> (-0.01%)`	⬇️

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

☔ View full report in Codecov by Harness.
📢 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.

label.textContent is string | null; toHaveAttribute expects string | RegExp. Coerce with ?? '' to satisfy strictNullChecks. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-08-21T04:11:08Z

🎪 Showtime is building environment on GHA for 59a53ed

github-actions · 2026-08-21T04:20:30Z

🎪 Showtime deployed environment on GHA for 4517f7d

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

github-actions · 2026-08-21T06:57:23Z

🎪 Showtime is building environment on GHA for 59a53ed

bito-code-review · 2026-08-21T07:15:19Z

Code Review Agent Run #d7e288

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: 4517f7d..59a53ed
- superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

github-actions · 2026-08-21T07:18:07Z

🎪 Showtime deployed environment on GHA for 59a53ed

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

pull-request-size Bot added the size/M label Aug 21, 2026

dosubot Bot added change:frontend Requires changing the frontend explore:design Related to the Explore UI/UX labels Aug 21, 2026

github-actions Bot added the preset-io label Aug 21, 2026

yousoph requested a lite review from Copilot August 21, 2026 04:03

yousoph added the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Aug 21, 2026

Copilot started reviewing on behalf of yousoph August 21, 2026 04:03 View session

Copilot AI reviewed Aug 21, 2026

View reviewed changes

Comment thread superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx

Comment on lines +293 to +296

expect(labels.length).toBeGreaterThan(0);

labels.forEach(label => {

expect(label).toHaveAttribute('title', label.textContent);

});

github-actions Bot added 🎪 4517f7d 🚦 deploying Environment 4517f7d status: deploying and removed 🎪 4517f7d 🚦 building Environment 4517f7d status: building labels Aug 21, 2026

test: coerce textContent to string in title assertion

59a53ed

label.textContent is string | null; toHaveAttribute expects string | RegExp. Coerce with ?? '' to satisfy strictNullChecks. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions Bot added 🎪 59a53ed 🚦 building Environment 59a53ed status: building 🎪 59a53ed 📅 2026-08-21T04-11 Environment 59a53ed created at 2026-08-21T04-11 🎪 59a53ed 🤡 yousoph Environment 59a53ed requested by yousoph labels Aug 21, 2026

github-actions Bot added 🎪 59a53ed 🚦 deploying Environment 59a53ed status: deploying and removed 🎪 59a53ed 🚦 building Environment 59a53ed status: building labels Aug 21, 2026

Navigation Menu

Uh oh!

fix(explore): align viz type gallery thumbnails and Featured tag - #43373

fix(explore): align viz type gallery thumbnails and Featured tag#43373
yousoph wants to merge 2 commits into
masterfrom
sc-117891-viz-gallery-alignment

yousoph commented Aug 21, 2026

Uh oh!

bito-code-review Bot commented Aug 21, 2026 •

edited

Loading

Code Review Agent Run #4ffac3

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

bito-code-review Bot commented Aug 21, 2026

Uh oh!

codecov Bot commented Aug 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

bito-code-review Bot commented Aug 21, 2026 •

edited

Loading

Code Review Agent Run #d7e288

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

yousoph commented Aug 21, 2026

SUMMARY

TESTING INSTRUCTIONS

Uh oh!

bito-code-review Bot commented Aug 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #4ffac3

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

bito-code-review Bot commented Aug 21, 2026

Uh oh!

codecov Bot commented Aug 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

bito-code-review Bot commented Aug 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #d7e288

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bito-code-review Bot commented Aug 21, 2026 •

edited

Loading

codecov Bot commented Aug 21, 2026 •

edited

Loading

bito-code-review Bot commented Aug 21, 2026 •

edited

Loading