codeant-ai-for-open-source[bot] commented on code in PR #42053:
URL: https://github.com/apache/superset/pull/42053#discussion_r3678114563
##########
superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx:
##########
@@ -1094,7 +1095,7 @@ export default function TableChart<D extends DataRecord =
DataRecord>(
formatter.objectFormatting === ObjectFormattingEnum.CELL_BAR
) {
if (generalShowCellBars)
- backgroundColorCellBar = formatterResult.slice(0, -2);
+ backgroundColorCellBar = forceHexAlpha(formatterResult);
Review Comment:
**Suggestion:** Cell-bar formatter results are not guaranteed to be
hexadecimal colors. The table transform passes legacy `Green` and `Red`
conditional-formatting rules into `getColorFormatters`, which returns those
scheme names unchanged, so `forceHexAlpha` converts them to invalid CSS such as
`#Green99`. Because this value is truthy, it prevents the normal cell-bar
fallback color from being used. Exclude special schemes from these formatters
or only apply `forceHexAlpha` to valid hex/RGB colors. [api mismatch]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Cell bars disappear for Green/Red conditional-formatting rules.
- ❌ Normal positive/negative cell-bar fallback is bypassed.
- ⚠️ Affects legacy named-scheme configurations using cell bars.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=d1113636049b467db19cfa0493948c99&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=d1113636049b467db19cfa0493948c99&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/plugins/plugin-chart-table/src/TableChart.tsx
**Line:** 1098:1098
**Comment:**
*Api Mismatch: Cell-bar formatter results are not guaranteed to be
hexadecimal colors. The table transform passes legacy `Green` and `Red`
conditional-formatting rules into `getColorFormatters`, which returns those
scheme names unchanged, so `forceHexAlpha` converts them to invalid CSS such as
`#Green99`. Because this value is truthy, it prevents the normal cell-bar
fallback color from being used. Exclude special schemes from these formatters
or only apply `forceHexAlpha` to valid hex/RGB colors.
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%2F42053&comment_hash=f838d066a0352ff5f0c16e4bb6e846c72de434c784d3865f327eaee0067911cb&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42053&comment_hash=f838d066a0352ff5f0c16e4bb6e846c72de434c784d3865f327eaee0067911cb&reaction=dislike'>👎</a>
##########
superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts:
##########
@@ -270,19 +274,35 @@ export const getColorFunction = (
if (compareResult === false) return undefined;
const { cutoffValue, extremeValue } = compareResult;
+ if (typeof colorScheme === 'string') {
+ if (isSpecialColor(colorScheme)) {
+ return colorScheme;
+ }
+ if (useGradient === false) {
+ return colorScheme;
+ }
+ if (alpha === undefined || alpha) {
+ return addAlpha(
+ colorScheme,
+ getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity),
+ );
+ }
+ return colorScheme;
+ }
+ const baseHexColor = rgbaToHex(colorScheme);
// If useGradient is explicitly false, return solid color
if (useGradient === false) {
- return colorScheme;
+ return baseHexColor;
}
// Otherwise apply gradient (default behavior for backward compatibility)
if (alpha === undefined || alpha) {
return addAlpha(
- colorScheme,
+ baseHexColor,
getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity),
Review Comment:
**Suggestion:** The RGB color can already contain an alpha channel, but
`addAlpha` appends another alpha value to `baseHexColor` when gradients are
enabled. For example, a color with `a: 0.5` becomes a 10-digit value such as
`#ff000080FF`, which is not a valid CSS color and causes the conditional
formatting color to be ignored. Replace the existing alpha channel before
applying the gradient opacity rather than concatenating a second one. [logic
error]
<details>
<summary><b>Severity Level:</b> Critical 🚨</summary>
```mdx
- ❌ Conditional-formatting gradients fail for translucent picker colors.
- ❌ Table and AG Grid cell backgrounds may be ignored.
- ⚠️ Users see missing colors after selecting picker transparency.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=46673bc14db54ae7bc51df8ced9142bd&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=46673bc14db54ae7bc51df8ced9142bd&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/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
**Line:** 292:302
**Comment:**
*Logic Error: The RGB color can already contain an alpha channel, but
`addAlpha` appends another alpha value to `baseHexColor` when gradients are
enabled. For example, a color with `a: 0.5` becomes a 10-digit value such as
`#ff000080FF`, which is not a valid CSS color and causes the conditional
formatting color to be ignored. Replace the existing alpha channel before
applying the gradient opacity rather than concatenating a second one.
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%2F42053&comment_hash=ba2f225cc22d1f101082f810dc838358556d919e2fdf59d65d1e271aa53cf1af&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42053&comment_hash=ba2f225cc22d1f101082f810dc838358556d919e2fdf59d65d1e271aa53cf1af&reaction=dislike'>👎</a>
##########
superset-frontend/packages/superset-ui-core/src/color/utils.ts:
##########
@@ -120,3 +121,30 @@ export function rgbToHex(red: number, green: number, blue:
number) {
return `#${r}${g}${b}`;
}
+
+export function rgbaToHex(rgb: RGBColor): string {
+ const { r, g, b, a = 1 } = rgb;
+ const toHex = (value: number) => {
+ const hex = Math.round(value).toString(16);
+ return hex.length === 1 ? `0${hex}` : hex;
+ };
+ const hexColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+ if (a !== 1) {
+ return `${hexColor}${toHex(Math.round(a * 255))}`;
+ }
Review Comment:
**Suggestion:** `rgbaToHex` accepts arbitrary numeric channel values but
does not clamp them to the valid 0–255 range or clamp alpha to 0–1.
Out-of-range persisted or externally supplied values produce malformed
variable-length hex strings, such as a channel encoded as `12c` or an alpha
encoded as `1fe`, which are subsequently used as CSS colors. Clamp each RGB
channel and alpha before converting them. [type error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Persisted malformed colors render invalid CSS values.
- ⚠️ Table and chart conditional formatting becomes unreliable.
- ⚠️ Color-picker consumers receive malformed hex output.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=dfd879ac6c5b4d6fb7c3608dd72c99b1&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=dfd879ac6c5b4d6fb7c3608dd72c99b1&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/packages/superset-ui-core/src/color/utils.ts
**Line:** 127:134
**Comment:**
*Type Error: `rgbaToHex` accepts arbitrary numeric channel values but
does not clamp them to the valid 0–255 range or clamp alpha to 0–1.
Out-of-range persisted or externally supplied values produce malformed
variable-length hex strings, such as a channel encoded as `12c` or an alpha
encoded as `1fe`, which are subsequently used as CSS colors. Clamp each RGB
channel and alpha before converting them.
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%2F42053&comment_hash=21d6f4ed72d02afc2eeaacf8439a0da2e6363ef1a427359bba5b1cd5bf36bc93&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42053&comment_hash=21d6f4ed72d02afc2eeaacf8439a0da2e6363ef1a427359bba5b1cd5bf36bc93&reaction=dislike'>👎</a>
##########
superset-frontend/packages/superset-ui-core/src/color/utils.ts:
##########
@@ -120,3 +121,30 @@ export function rgbToHex(red: number, green: number, blue:
number) {
return `#${r}${g}${b}`;
}
+
+export function rgbaToHex(rgb: RGBColor): string {
+ const { r, g, b, a = 1 } = rgb;
+ const toHex = (value: number) => {
+ const hex = Math.round(value).toString(16);
+ return hex.length === 1 ? `0${hex}` : hex;
+ };
+ const hexColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+ if (a !== 1) {
+ return `${hexColor}${toHex(Math.round(a * 255))}`;
+ }
+ return hexColor;
+}
+
+export const forceHexAlpha = (color: string | RGBColor): string => {
+ if (typeof color === 'object' && color !== null) {
+ return rgbaToHex({ ...color, a: 0.6 });
+ }
+
+ const hex = color.startsWith('#') ? color : `#${color}`;
+
+ if (hex.length === 9) {
+ return `${hex.slice(0, -2)}99`;
+ }
+
+ return `${hex}99`;
Review Comment:
**Suggestion:** `forceHexAlpha` only handles six- and eight-digit hex
strings. A valid shorthand color such as `#fff` is converted to `#fff99`, which
is not a valid six- or eight-digit CSS hex color, so cell-bar formatting
silently produces an invalid background color. Expand shorthand notation before
replacing or appending the alpha channel. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Table cell-bar backgrounds fail for shorthand colors.
- ⚠️ Legacy conditional-formatting configurations may lose colors.
- ⚠️ Invalid CSS reaches the table renderer.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=d6c788c88a6f4393a074a0364fcf7090&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=d6c788c88a6f4393a074a0364fcf7090&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/packages/superset-ui-core/src/color/utils.ts
**Line:** 143:149
**Comment:**
*Logic Error: `forceHexAlpha` only handles six- and eight-digit hex
strings. A valid shorthand color such as `#fff` is converted to `#fff99`, which
is not a valid six- or eight-digit CSS hex color, so cell-bar formatting
silently produces an invalid background color. Expand shorthand notation before
replacing or appending the alpha channel.
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%2F42053&comment_hash=7c7e59d356c628fd8ab5755e943a3dd3792a453cde160cc442388fc00f1def34&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42053&comment_hash=7c7e59d356c628fd8ab5755e943a3dd3792a453cde160cc442388fc00f1def34&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]
