fix(explore/data-table-pane): intuitive caret icons to expand/collapse data table pane

[hainenber]

fix(explore/data-table-pane): intuitive caret icons to expand/collapse data table pane

SUMMARY

The caret icons shown in the footer's data table pane is quite confusing: it should be up when someone needs to expand the pane and vice versa for collapse case.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

After

TESTING INSTRUCTIONS

1. Setup dev Superset
2. Go to any Pivot table
3. Expand/collapse the data table pane in the bottom right direction to see the caret icon

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]

Review by Korbit AI

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

Category	Issue	Fix Detected
	Counter-intuitive caret direction ▹ view

Files scanned

​

File Path	Reviewed
superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx	✅

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

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

• You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
• You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
• Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
• Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
• Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

• Check out our docs on how you can make Korbit work best for you and your team.
• Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

​

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Issue Categories

​

Category	Enabled
Documentation	✅
Logging	✅
Error Handling	✅
Readability	✅
Design	✅
Performance	✅
Security	✅
Functionality	✅

Feedback and Support

• Tell us what you think of Korbit
• Schedule a call with our team
• Email us @ [email protected]

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

[korbit-ai]

Counter-intuitive caret direction

Tell me more

What is the issue?

The caret icon direction is counterintuitive to the panel's state. When the panel is open, a downward caret suggests closing, but here it's reversed.

Why this matters

This creates a confusing user experience as the visual cue (caret direction) contradicts the standard UI pattern where up means expand and down means collapse.

Suggested change ∙ Feature Preview

const caretIcon = panelOpen ? (
  <Icons.CaretUp
    iconColor={theme.colors.grayscale.base}
    aria-label={t('Collapse data panel')}
  />
) : (
  <Icons.CaretDown
    iconColor={theme.colors.grayscale.base}
    aria-label={t('Expand data panel')}
  />
);

💬 Chat with Korbit by mentioning @korbit-ai.

[hainenber]

@korbit-ai if the panel is currently collapsed, caret direction should give the visual cue that user can expand it and vice versa.

It's the case with VSCode's terminal pane, notice the caret icon second one from left

Not yet expand to fullscreen

Expanded and can collapse to previous size

[korbit-ai]

Thanks for your response @hainenber. That's a valid point, and having consistency with VSCode's visualization is a good reason to stick to the current icon direction. We should make sure to keep the design consistent with what users are familiar with. This will give us more leverage on improving user experience. However, in most UI design patterns you'll find that the downward caret is used to signify 'dropdown' or 'expand'. This is to cater to new users or those who are not familiar with this behavior in VSCode, which was my initial consideration. Maybe a user study or A/B testing can help us better evaluate this change.

[kasiazjc]

Hi! I am Kasia and I am UX/UI designer contributing to Superset and working in Preset.

In this case caret is an action trigger/button. I agree with AI response to the PR, that these are patterns that are widely used in UX and intuitive for the general audience. The same pattern is used across the app in selects, dropdown triggers or similar collapsible sections (not including legacy components):


So I would argue that the current implementation is the pattern that we should go with.

[hainenber]

thanks for reply, Kasia. I'm still kinda confused as the header SQL dropdown example doesn't toggle caret icon. The following example from Edit database modal actually aligns with what the PR proposes: by clicking the "up" caret icon, you want to expand advanced options to see further and vice versa.

The data table pane is at the bottom so it's much more intuitive, at least for me, to see a collapsed pane with an "up" caret. The expansion would go upward as hinted by the "up" icon

Screen.Recording.2025-02-19.at.08.44.19.mov