codeant-ai-for-open-source[bot] commented on code in PR #41931:
URL: https://github.com/apache/superset/pull/41931#discussion_r3558147306
##########
superset-frontend/src/explore/components/controls/ViewportControl.tsx:
##########
@@ -78,6 +78,7 @@ export default function ViewportControl({
value={value?.[ctrl]}
onChange={(ctrlValue: number) => handleChange(ctrl, ctrlValue)}
isFloat
+ label={ctrl}
Review Comment:
**Suggestion:** Passing `label` into `TextControl` here does more than set
an accessible name: `TextControl` forwards `label` to `ControlHeader`, which
renders an extra visible form label. Since this block already renders its own
`<FormLabel>{ctrl}</FormLabel>`, this introduces duplicated labels and a
visual/layout regression. Use a dedicated aria-label path (or update
`TextControl` to support an `ariaLabel` prop) instead of reusing `label` in
this call site. [css layout issue]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Fixed viewport popover shows duplicated labels above inputs.
- ⚠️ Deck.gl Explore controls UI becomes visually cluttered.
- ⚠️ Users may find viewport controls visually confusing.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. The deck.gl chart control configuration at
`superset-frontend/plugins/preset-chart-deckgl/src/utilities/Shared_DeckGL.tsx:7-16`
defines a control `viewport` with `config.type: 'ViewportControl'` and label
`t('Viewport')`, meaning Explore will render the `ViewportControl` React
component for
this control.
2. The control type map at
`superset-frontend/src/explore/components/controls/index.ts:20-23` exports
`ViewportControl` under the key `ViewportControl`, so when Explore renders
the deck.gl
control panel it instantiates `ViewportControl` for the `viewport` control.
3. Inside `ViewportControl` at
`superset-frontend/src/explore/components/controls/ViewportControl.tsx:74-83`,
the helper
`renderTextControl` renders, for each of the five parameters, a visible
`<FormLabel>{ctrl}</FormLabel>` followed by `<TextControl value={...}
isFloat label={ctrl}
/>`, so each row already has one explicit visible label from `FormLabel` and
now passes
the same text into the `label` prop.
4. In `TextControl` at
`superset-frontend/src/explore/components/controls/TextControl/index.tsx:130-137`,
the
component always renders `<ControlHeader name={name} label={label} ... />`
when `label` is
truthy, and `ControlHeader` at
`superset-frontend/src/explore/components/ControlHeader.tsx:124-187` renders
its own
`<FormLabel htmlFor={name}>` containing `label`, so when `ViewportControl`
passes
`label={ctrl}`, each of the five inputs gains a second visible label from
`ControlHeader`
in addition to the existing `FormLabel`, producing duplicated labels in the
fixed viewport
popover even though the original change only intended to set `aria-label`.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=75720a4a8fde47569ae3ec40b67a7bf5&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=75720a4a8fde47569ae3ec40b67a7bf5&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/explore/components/controls/ViewportControl.tsx
**Line:** 81:81
**Comment:**
*Css Layout Issue: Passing `label` into `TextControl` here does more
than set an accessible name: `TextControl` forwards `label` to `ControlHeader`,
which renders an extra visible form label. Since this block already renders its
own `<FormLabel>{ctrl}</FormLabel>`, this introduces duplicated labels and a
visual/layout regression. Use a dedicated aria-label path (or update
`TextControl` to support an `ariaLabel` prop) instead of reusing `label` in
this call site.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F41931&comment_hash=c7bbb266d6b7cdbe479d5816bf753d5c8188a48809970ed65b33e5871b5b49eb&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F41931&comment_hash=c7bbb266d6b7cdbe479d5816bf753d5c8188a48809970ed65b33e5871b5b49eb&reaction=dislike'>👎</a>
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
