codeant-ai-for-open-source[bot] commented on code in PR #42053:
URL: https://github.com/apache/superset/pull/42053#discussion_r3699118274
##########
superset-frontend/src/explore/components/controls/ColorPickerControl.tsx:
##########
@@ -16,70 +16,156 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { getCategoricalSchemeRegistry } from '@superset-ui/core';
+import { useMemo } from 'react';
+import { getCategoricalSchemeRegistry, rgbaToHex } from '@superset-ui/core';
+import { t } from '@apache-superset/core/translation';
import {
ColorPicker,
type RGBColor,
type ColorValue,
} from '@superset-ui/core/components';
import ControlHeader from '../ControlHeader';
+import { useTheme } from '@apache-superset/core/theme';
+
+const SPECIAL_COLORS = {
+ Red: { r: 150, g: 0, b: 0, a: 0.2 },
+ Green: { r: 0, g: 150, b: 0, a: 0.2 },
+} as const;
+
+type SpecialColorKey = keyof typeof SPECIAL_COLORS;
+export type ColorPickerValue = RGBColor | SpecialColorKey | string;
export interface ColorPickerControlProps {
- onChange?: (color: RGBColor) => void;
- value?: RGBColor;
+ onChange?: (color: ColorPickerValue) => void;
+ value?: ColorPickerValue;
name?: string;
label?: string;
description?: string;
renderTrigger?: boolean;
hovered?: boolean;
warning?: string;
+ presets?: { label: string; colors: string[] }[];
+ ariaLabel?: string;
+ resolveThemeTokens?: boolean;
}
-function rgbToHex(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 getReverseThemeColorMap = (
+ themeColors: Record<string, string>,
+): Record<string, string> => {
+ const reverseMap: Record<string, string> = {};
+ if (!themeColors) return reverseMap;
+
+ Object.entries(themeColors).forEach(([name, value]) => {
+ if (typeof value === 'string') {
+ reverseMap[value.toLowerCase()] = name;
+ }
+ });
+
+ return reverseMap;
Review Comment:
**Suggestion:** The reverse lookup compares the raw theme token string with
the color picker's canonical six/eight-digit hex output. Equivalent theme
colors represented as `rgba(...)`, CSS color names, shorthand hex, or
differently normalized alpha values will not match, so selecting an existing
theme color persists an RGB object instead of the token name and loses
theme-switching behavior. Normalize both values through the same color parser
before building and querying the reverse map. [api mismatch]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Conditional formatting loses theme-token persistence for normalized
colors.
- ⚠️ Theme changes may not update saved RGB-based formatting rules.
- ⚠️ Custom themes using rgba, named, or shorthand colors are affected.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=5be561438dcd4c5ba9b353961b0fec54&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=5be561438dcd4c5ba9b353961b0fec54&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/ColorPickerControl.tsx
**Line:** 52:64
**Comment:**
*Api Mismatch: The reverse lookup compares the raw theme token string
with the color picker's canonical six/eight-digit hex output. Equivalent theme
colors represented as `rgba(...)`, CSS color names, shorthand hex, or
differently normalized alpha values will not match, so selecting an existing
theme color persists an RGB object instead of the token name and loses
theme-switching behavior. Normalize both values through the same color parser
before building and querying the reverse map.
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=d7921cb93f989c71f9dbb9d63953eaea28c94afe53b0304d3ee32a86b1041319&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42053&comment_hash=d7921cb93f989c71f9dbb9d63953eaea28c94afe53b0304d3ee32a86b1041319&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]
