feat(webui): Apply fixed, uniform label widths for SQL inputs in guided Presto UI. #1639

davemarco · 2025-11-20T16:52:01Z

Description

Previously widths for each label depended on the text. They are now fixed width.

Checklist

The PR satisfies the contribution guidelines.
This is a breaking change and that has been indicated in the PR title, OR this isn't a
breaking change.
Necessary docs have been updated, OR no docs need to be updated.

Validation performed

labels fixed

Summary by CodeRabbit

Release Notes

New Features
- Input labels now support customizable width settings for improved layout control.
Improvements
- Standardized label widths across search filter controls for consistent visual alignment.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-11-20T16:52:09Z

Walkthrough

The InputLabel component now accepts an optional width prop to control label width via minWidth styling. Four GuidedControls files (From, OrderBy, Select, Where) are updated to use this new prop with a constant LABEL_WIDTH value of 85 pixels defined in a new typings module.

Changes

Cohort / File(s)	Summary
Core InputLabel Enhancement `components/webui/client/src/components/InputLabel/index.tsx`	Added optional `width` prop (type: `string \| number`) to component signature; width value sets `minWidth` in inline style of Text element; updated JSDoc documentation.
GuidedControls Label Width Application `components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/{From,OrderBy,Select,Where}.tsx`	Each file imports `LABEL_WIDTH` from `./typings` and applies it to InputLabel component via `width={LABEL_WIDTH}` prop; no logic changes.
Label Width Constant Definition `components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts`	New file exporting constant `LABEL_WIDTH = "85px"` for consistent label sizing across GuidedControls components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

The changes follow a consistent, repetitive pattern across four similar component files
InputLabel modification is straightforward (adding a single optional prop with conditional styling)
New typings file contains only a single constant definition
No complex logic, error handling, or control-flow modifications involved

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: applying fixed, uniform label widths for SQL inputs in the guided Presto UI, which is reflected across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 21b8da6 and 5e15d07.

📒 Files selected for processing (6)

components/webui/client/src/components/InputLabel/index.tsx (2 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx (2 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx (2 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx (2 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx (2 hunks)
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}

⚙️ CodeRabbit configuration file

Prefer false == <expression> rather than !<expression>.

Files:

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx
components/webui/client/src/components/InputLabel/index.tsx
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx
components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: haiqi96
Repo: y-scope/clp PR: 0
File: :0-0
Timestamp: 2025-07-29T14:04:13.769Z
Learning: User haiqi96 requested creating a GitHub issue to document a bug fix from PR #1136, which addressed MySQL compatibility issues with invalid SQL CAST operations in the WebUI component.

🧬 Code graph analysis (4)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx (1)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts (1)

LABEL_WIDTH (6-6)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx (1)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts (1)

LABEL_WIDTH (6-6)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx (1)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts (1)

LABEL_WIDTH (6-6)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx (1)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts (1)

LABEL_WIDTH (6-6)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: package-image
GitHub Check: lint-check (ubuntu-24.04)
GitHub Check: lint-check (macos-15)

🔇 Additional comments (7)

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/typings.ts (1)

1-6: LGTM! Clean constant definition.

The fixed label width constant is well-documented and appropriately scoped to the GuidedControls module. The value of 85px provides sufficient space for SQL clause keywords (SELECT, FROM, WHERE, ORDER BY) while maintaining consistency.

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx (1)

8-8: LGTM! Consistent implementation.

The import and usage of LABEL_WIDTH correctly applies the fixed width to the ORDER BY label, maintaining consistency with the other GuidedControls components.

Also applies to: 25-25

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx (1)

4-4: LGTM! Consistent with the pattern.

The import and usage of LABEL_WIDTH properly applies the fixed width to the FROM label.

Also applies to: 15-15

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx (1)

8-8: LGTM! Follows the established pattern.

The import and usage of LABEL_WIDTH correctly applies the fixed width to the SELECT label, maintaining consistency across all SQL clause labels.

Also applies to: 25-25

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx (1)

8-8: LGTM! Completes the uniform label width implementation.

The import and usage of LABEL_WIDTH correctly applies the fixed width to the WHERE label, completing the consistent styling across all GuidedControls components.

Also applies to: 25-25

components/webui/client/src/components/InputLabel/index.tsx (2)

16-19: LGTM! Type-safe prop definition.

The optional width prop is correctly typed as string | number, which appropriately accepts both CSS string values (e.g., "85px") and numeric values. The JSDoc documentation clearly describes the new parameter.

30-30: LGTM! Appropriate use of minWidth.

Using minWidth instead of width is the correct choice here, as it ensures labels won't be smaller than the specified width while allowing them to grow if the content requires more space.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…to changeLabelSize

hoophalab

lgtm, but why making width an argument instead of hard coding it? Every label should have the same width.

Alternatively, can we accept a styles dict and do <Text styles = {{prop1: value1, ...styles}}>

davemarco · 2025-11-28T19:11:22Z

@hoophalab we are using it in the dataset selector which dosent have a fixed width. Also i guess this is a reusable component, so if used in another place in the UI with more longer text you can specify the width.

junhaoliao

deferring to @hoophalab 's review

marco added 9 commits November 18, 2025 15:28

latest

df714b5

latest

e8dd34e

latest

595b655

latest

ccc1667

latest

9a128a1

latest

f36e665

latest

6ae47c1

latest

8bb7b7d

latest

53776a5

davemarco and others added 3 commits November 25, 2025 13:13

Merge branch 'main' into changeLabelSize

1045675

latest

739d0b0

Merge branch 'changeLabelSize' of https://github.com/davemarco/clp in…

5e15d07

…to changeLabelSize

davemarco requested a review from hoophalab November 25, 2025 18:19

davemarco marked this pull request as ready for review November 25, 2025 18:19

davemarco requested a review from a team as a code owner November 25, 2025 18:19

hoophalab reviewed Nov 27, 2025

View reviewed changes

Merge branch 'main' into changeLabelSize

5a065c4

davemarco requested a review from hoophalab November 28, 2025 19:11

hoophalab approved these changes Nov 28, 2025

View reviewed changes

hoophalab requested a review from junhaoliao November 28, 2025 20:04

junhaoliao approved these changes Nov 28, 2025

View reviewed changes

Merge branch 'main' into changeLabelSize

c8ce3cc

davemarco merged commit 41ddc71 into y-scope:main Dec 1, 2025
19 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(webui): Apply fixed, uniform label widths for SQL inputs in guided Presto UI. #1639

feat(webui): Apply fixed, uniform label widths for SQL inputs in guided Presto UI. #1639

Uh oh!

davemarco commented Nov 20, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

hoophalab left a comment •

edited

Loading

Uh oh!

davemarco commented Nov 28, 2025 •

edited

Loading

Uh oh!

junhaoliao left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(webui): Apply fixed, uniform label widths for SQL inputs in guided Presto UI. #1639

feat(webui): Apply fixed, uniform label widths for SQL inputs in guided Presto UI. #1639

Uh oh!

Conversation

davemarco commented Nov 20, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Validation performed

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

hoophalab 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

Uh oh!

davemarco commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

junhaoliao left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

davemarco commented Nov 20, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 20, 2025 •

edited

Loading

hoophalab left a comment •

edited

Loading

davemarco commented Nov 28, 2025 •

edited

Loading