feat(deckgl): add new color controls with color breakpoints #34017

DamianPendrak · 2025-07-01T18:36:49Z

SUMMARY

Add new Controls that handle fixed colors, palette, and color breakpoints based on selection. Implement new color breakpoints Control to set colors of the Deck.gl Charts based on the Metric value.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

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 · 2025-07-01T18:36:55Z

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

korbit-ai

Review by Korbit AI

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

Category	Issue	Status
	Missing Color Breakpoints Validation ▹ view	🧠 Not in standard
	Redundant Interface Properties ▹ view	🧠 Not in scope
	Conflicting popover control props ▹ view	🧠 Not in scope
	Mixed Layer and Aggregation Logic ▹ view	🧠 Not in scope
	Misleading Component Name ▹ view	🧠 Incorrect
	Unexplained Empty Function Prop ▹ view	🧠 Incorrect
	Missing color scheme type usage guidance ▹ view	🧠 Not in scope
	Incomplete Drag and Drop Implementation ▹ view	🧠 Incorrect
	Array Indices Used As IDs ▹ view	🧠 Not in standard
	Ambiguous boolean parameter name ▹ view	🧠 Not in scope

Files scanned

Due to the exceptionally large size of this PR, I've limited my review to the following files:

File Path	Reviewed
superset-frontend/plugins/legacy-preset-chart-deckgl/src/types.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/utils.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts	✅
superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/Heatmap.tsx	✅
superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverTrigger.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/controlPanel.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx	✅
superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointOption.tsx	✅
superset-frontend/src/explore/components/controls/index.js	✅
superset-frontend/src/explore/components/controls/ColorBreakpointsControl/types.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/controlPanel.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/controlPanel.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/Hex.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx	✅
superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/controlPanel.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/common.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/controlPanel.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.tsx	✅
superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverControl.tsx	✅
superset-frontend/packages/superset-ui-chart-controls/src/types.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.tsx	✅

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

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts

-        ['color_scheme'],
+        ...generateDeckGLColorSchemeControls({
+          defaultSchemeType: COLOR_SCHEME_TYPES.categorical_palette,
+          disableCategoricalColumn: true,


superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/controlPanel.ts

+            name: 'color_scheme_type',
+            config: {
+              type: 'SelectControl',
+              label: t('Color Scheme Type'),
+              clearable: false,
+              validators: [],
+              choices: [
+                [COLOR_SCHEME_TYPES.fixed_color, t('Fixed color')],
+                [COLOR_SCHEME_TYPES.linear_palette, t('Linear palette')],
+              ],
+              default: COLOR_SCHEME_TYPES.linear_palette,
+            },


...nd/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverTrigger.tsx

+      defaultOpen={visible}
+      open={visible}


superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.tsx

+  const colorAggFunc =
+    colorSchemeType === COLOR_SCHEME_TYPES.color_breakpoints
+      ? (p: number[]) => getColorForBreakpoints(aggFunc, p, colorBreakpoints)
+      : aggFunc;


superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/Grid.tsx

  const aggFunc = getAggFunc(fd.js_agg_function, p => p.weight);

+  const colorAggFunc =
+    colorSchemeType === COLOR_SCHEME_TYPES.color_breakpoints
+      ? (p: number[]) => getColorForBreakpoints(aggFunc, p, colorBreakpoints)
+      : aggFunc;


superset-frontend/src/explore/components/controls/ColorBreakpointsControl/types.ts

+export interface ColorBreakpointsPopoverTriggerProps {
+  description?: string;
+  hovered?: boolean;
+  value?: ColorBreakpointType;
+  children?: ReactNode;
+  saveColorBreakpoint: (colorBreakpoint: ColorBreakpointType) => void;
+  isControlled?: boolean;
+  visible?: boolean;
+  toggleVisibility?: (visibility: boolean) => void;
+  colorBreakpoints: ColorBreakpointType[];
+}
+
+export interface ColorBreakpointsPopoverControlProps {
+  description?: string;
+  hovered?: boolean;
+  value?: ColorBreakpointType;
+  onSave?: (colorBreakpoint: ColorBreakpointType) => void;
+  onClose?: () => void;
+  colorBreakpoints: ColorBreakpointType[];
+}


superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx

+
+const DEFAULT_COLOR_BREAKPOINTS: ColorBreakpointType[] = [];
+
+const NewContourFormatPlaceholder = styled('div')`


superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx

+        colorBreakpoints={colorBreakpoints}
+        index={index}
+        onClose={removeColorBreakpoint}
+        onShift={() => {}}


superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx

+        onDrop={() => {}}
+        canDrop={() => true}


superset-frontend/src/explore/components/controls/ColorBreakpointsControl/index.tsx

+  const editColorBreakpoint = (
+    breakpoint: ColorBreakpointType,
+    index: number,
+  ) => {
+    const newBreakpoints = [...colorBreakpoints];
+    newBreakpoints[index] = {
+      ...breakpoint,
+      id: index,
+    };
+    setColorBreakpoints(newBreakpoints);
+  };


rusackas · 2025-07-09T08:28:46Z

Very cool! Looks like it needs a rebase, but I'll spin up a test environment in the meantime.

github-actions · 2025-07-09T08:29:07Z

@rusackas Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-07-09T08:38:02Z

@rusackas Ephemeral environment spinning up at http://34.214.104.35:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

kgabryje · 2025-07-09T11:18:24Z

Looks very cool!
A few questions:

Changing the color breakpoints and scheme types prompts to run a new query. Could we make it so that the changes are reflected immediately?
Could you add tooltips to the new controls?
After I added the breakpoints, the values that don't match any breakpoint take the color of the first breakpoint, which could be confusing (screenshot - the value 2415 and the values below 1000 use the color of 1000-1500 breakpoint). Maybe we should add a default color control?

kgabryje · 2025-07-09T11:30:54Z

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils.ts

@@ -190,3 +192,19 @@ export function getBuckets(

  return buckets;
 }
+
+export function getColorBreakpointsBuckets(fd: QueryFormData) {


nit: maybe this function could accepts only the breakpoints as the argument instead of the whole form data object? That way we might avoid some rerenders caused by passing form data to a dependency array in useEffect

kgabryje · 2025-07-09T11:32:15Z

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/utils.ts

 /* eslint camelcase: 0 */

 export function formatSelectOptions(options: (string | number)[]) {
  return options.map(opt => [opt, opt.toString()]);
 }
+
+export const getSelectedColorSchemeType = (


Do we need this function? Can't we just call formData.color_scheme_type directly?

kgabryje · 2025-07-09T11:36:40Z

...t-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointOption.tsx

+  height: ${({ theme }) => theme.sizeUnit * 3}px;
+  border-radius: ${({ theme }) => theme.sizeUnit / 2}px;
+  background: ${(props: { color: string }) => props.color};
+  margin-right: ${({ theme }) => theme.sizeUnit * 1.5}px;


Can we use the full size units? Whatever looks better, theme.sizeUnit or theme.sizeUnit *2

DamianPendrak · 2025-07-09T14:04:21Z

Very cool! Looks like it needs a rebase, but I'll spin up a test environment in the meantime.

Thanks @rusackas! It does, but the bump of the deck.gl dependencies in #33603 broke the deck.gl charts for me on local env in the master branch. Is it just me, or should I revert the deck.gl packages versions bump on this branch?

amaannawab923 · 2025-07-09T14:52:56Z

Same here , it breaks on local setup @DamianPendrak , #33603 ... tried to fix it while maintaining the changes from the open street maps ... but it keeps on breaking

…ategories for color breakpoints

…t and make "tile-providers" more configurable (apache#33603)" This reverts commit d951158.

codecov · 2025-07-10T14:54:59Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.98%. Comparing base (7d0fabe) to head (7044d15).
Report is 4 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #34017       +/-   ##
===========================================
+ Coverage        0   72.98%   +72.98%     
===========================================
  Files           0      559      +559     
  Lines           0    40516    +40516     
  Branches        0     4267     +4267     
===========================================
+ Hits            0    29571    +29571     
- Misses          0     9836     +9836     
- Partials        0     1109     +1109

Flag	Coverage Δ
hive	`47.14% <100.00%> (?)`
mysql	`71.97% <100.00%> (?)`
postgres	`72.03% <100.00%> (?)`
presto	`50.89% <100.00%> (?)`
python	`72.94% <100.00%> (?)`
sqlite	`71.56% <100.00%> (?)`
unit	`100.00% <ø> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

kgabryje · 2025-07-11T08:34:48Z

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/Hex.tsx

@@ -84,6 +84,9 @@ export const getLayer: GetLayerType<HexagonLayer> = function ({
      ? (p: number[]) => getColorForBreakpoints(aggFunc, p, colorBreakpoints)
      : aggFunc;

+  console.log('colorBreakpoints', colorBreakpoints);
+  console.log('colorRange', colorRange);


Could you remove the console logs?

github-actions · 2025-07-11T08:35:52Z

@kgabryje Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-07-11T08:48:16Z

@kgabryje Ephemeral environment spinning up at http://54.203.127.237:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

kgabryje

Works great! LGTM

mistercrunch · 2025-07-15T16:53:36Z

Looks like this PR has bad merge conflicts and reverted things that were set up in #33603 (comment).

DamianPendrak · 2025-07-15T17:11:35Z

@mistercrunch yes, I didn't manage to bring back the revert before merging to master, as I explained in #34123 (comment)

mistercrunch · 2025-07-15T17:14:07Z

Oh so this was this intentional then? Not sure if the reviewer/merger knew we were reverting a PR as part of this one.

I created #34176 thinking this was a mistake, but unclear if / what is the path forward. I'm not sure why these 2 PRs had to be mutually exclusive but you all should work on a fix, happy to review.

DamianPendrak · 2025-07-15T17:30:48Z

I'm sorry, I didn't communicate that here, my mistake. I was going to bring back the reverted PR, but it got merged before passing QA. The #33603 breaks all deck.gl Charts on local environment, but I thought it breaks on ephemeral too, so I reverted it

mistercrunch · 2025-07-15T17:45:17Z

Oh I wasn't clear on #33603 breaking deck.gl - are we sure that's the case?

DamianPendrak · 2025-07-15T18:00:21Z

Yes, only breaking local environment with Docker is confirmed. Not sure about ephemeral env, but @amaannawab923 says it should work on ephemeral as building with npm run build works

mistercrunch · 2025-07-15T18:27:57Z

Good to know, do we know more about what's happening? I think I see this in my console:

Uncaught TypeError: Cannot read properties of null (reading 'stack')
    at eval (overlay.js:608:17)

But there are so many other messages in the damn console that I can't tell if that's the actual/exact issue. We'll take on cleaning up the console, but in the meantime we should get to the bottom of this....

So somehow npm run build works and npm run dev leads to that msg?

amaannawab923 · 2025-07-16T06:20:53Z

@mistercrunch
The Reason for this is , somehow the node modules are getting deleted on local environment , some problem with versioning and it tries to find those dependancies within node modules in local dev environment and when it doesnt , it throws out the error "Module not found"
I tried patching it multiple times with missing methods and dependancies , Even going inside Node modules folder and editing the source code to make it work but it doesnt work out

amaannawab923 · 2025-07-16T06:21:46Z

But somehow if i do npm run build and use bundled code , i stopped getting those errors and thats how i was able to implement this dark theme for deck gl maps

pull-request-size bot added the size/XXL label Jul 1, 2025

github-actions bot added plugins packages labels Jul 1, 2025

sadpandajoe added the review:draft label Jul 2, 2025

DamianPendrak marked this pull request as ready for review July 3, 2025 13:51

dosubot bot added the viz:charts:deck.gl Related to deck.gl charts label Jul 3, 2025

korbit-ai bot reviewed Jul 3, 2025

View reviewed changes

DamianPendrak force-pushed the deckgl-metric-color-update branch 5 times, most recently from 0d197a2 to 2503e14 Compare July 8, 2025 16:40

sadpandajoe removed the review:draft label Jul 8, 2025

rusackas added the testenv-up label Jul 9, 2025

kgabryje reviewed Jul 9, 2025

View reviewed changes

DamianPendrak added 6 commits July 10, 2025 13:43

Update Arc Chart controls

6a17c9e

Add new color scheme controls

3417aa8

Add working Grid color breakpoints

3f38029

Add new color options to Grid, Hex, Scatter and Screengrid Charts

924560b

Add new controls to all Charts; Add linear color scheme; Add legend c…

a78d9c3

…ategories for color breakpoints

Improve the color breakpoints controls

c6d6207

DamianPendrak force-pushed the deckgl-metric-color-update branch from 11f614b to cb93580 Compare July 10, 2025 11:53

DamianPendrak added 2 commits July 10, 2025 14:23

Fix TypeScript error after rebase

9de0920

Mock deck.gl packages not used in utils tests

527340b

DamianPendrak mentioned this pull request Jul 10, 2025

fix(deckgl): Revert "feat(deckgl): add support for OpenStreetMap as our new default and make "tile-providers" more configurable" #34123

Closed

DamianPendrak added 2 commits July 10, 2025 16:31

Revert "feat(deckgl): add support for OpenStreetMap as our new defaul…

a813aa4

…t and make "tile-providers" more configurable (apache#33603)" This reverts commit d951158.

Fix after openstreetmaps revert

4a16e44

github-actions bot added doc Namespace | Anything related to documentation dependencies:npm labels Jul 10, 2025

DamianPendrak added 2 commits July 10, 2025 20:03

Checkout requiremens/base.txt from master after revert

e94f1f5

Fix default color control in Heatmap, Hex and Screengrid

71d5c7c

kgabryje reviewed Jul 11, 2025

View reviewed changes

kgabryje added testenv-up and removed testenv-up labels Jul 11, 2025

Remove console logs

7044d15

kgabryje approved these changes Jul 11, 2025

View reviewed changes

rusackas merged commit 7229e1c into apache:master Jul 11, 2025
62 checks passed

This was referenced Jul 15, 2025

feat(deckgl): add support for OpenStreetMap as our new default and make "tile-providers" more configurable #33603

Merged

feat(deckgl): REREVERT: add support for OpenStreetMap as our new default and ke "tile-providers" more configurable #34176

Open


		const DEFAULT_COLOR_BREAKPOINTS: ColorBreakpointType[] = [];

		const NewContourFormatPlaceholder = styled('div')`

feat(deckgl): add new color controls with color breakpoints #34017

feat(deckgl): add new color controls with color breakpoints #34017

Conversation

DamianPendrak commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

korbit-ai bot commented Jul 1, 2025

Uh oh!

korbit-ai bot 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

Review by Korbit AI

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

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

rusackas commented Jul 9, 2025

Uh oh!

github-actions bot commented Jul 9, 2025

Uh oh!

github-actions bot commented Jul 9, 2025

Uh oh!

kgabryje commented Jul 9, 2025

Uh oh!

kgabryje Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

kgabryje Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

kgabryje Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

DamianPendrak commented Jul 9, 2025

Uh oh!

amaannawab923 commented Jul 9, 2025

Uh oh!

codecov bot commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

kgabryje Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

DamianPendrak Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

github-actions bot commented Jul 11, 2025

Uh oh!

kgabryje left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mistercrunch commented Jul 15, 2025

Uh oh!

DamianPendrak commented Jul 15, 2025

DamianPendrak commented Jul 1, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading

codecov bot commented Jul 10, 2025 •

edited

Loading

mistercrunch commented Jul 15, 2025 •

edited

Loading