fix(mcp): improve execute_sql response-too-large error to suggest limit parameter

When execute_sql responses exceed the token limit, the error message now
suggests both adding a SQL LIMIT clause and using the tool's limit
parameter. Previously only the SQL LIMIT was mentioned, and the general
"add a limit" suggestion was skipped for execute_sql entirely.

.github/workflows/claude.yml

@@ -76,7 +76,7 @@ jobs:
         fetch-depth: 1
 
     - name: Run Claude PR Action
-      uses: anthropics/claude-code-action@6e2bd52842c65e914eba5c8badd17560bd26b5de # beta
+      uses: anthropics/claude-code-action@88c168b39e7e64da0286d812b6e9fbebb6708185 # beta
       with:
         anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
         timeout_minutes: "60"

.github/workflows/ephemeral-env-pr-close.yml

@@ -58,7 +58,7 @@ jobs:
       - name: Login to Amazon ECR
         if: steps.describe-services.outputs.active == 'true'
         id: login-ecr
-        uses: aws-actions/amazon-ecr-login@f2e9fc6c2b355c1890b65e6f6f0e2ac3e6e22f78 # v2
+        uses: aws-actions/amazon-ecr-login@183a1442edf41672e66566b7fc560e297a290896 # v2
 
       - name: Delete ECR image tag
         if: steps.describe-services.outputs.active == 'true'

.github/workflows/ephemeral-env.yml

@@ -199,7 +199,7 @@ jobs:
 
       - name: Login to Amazon ECR
         id: login-ecr
-        uses: aws-actions/amazon-ecr-login@f2e9fc6c2b355c1890b65e6f6f0e2ac3e6e22f78 # v2
+        uses: aws-actions/amazon-ecr-login@183a1442edf41672e66566b7fc560e297a290896 # v2
 
       - name: Load, tag and push image to ECR
         id: push-image
@@ -235,7 +235,7 @@ jobs:
 
       - name: Login to Amazon ECR
         id: login-ecr
-        uses: aws-actions/amazon-ecr-login@f2e9fc6c2b355c1890b65e6f6f0e2ac3e6e22f78 # v2
+        uses: aws-actions/amazon-ecr-login@183a1442edf41672e66566b7fc560e297a290896 # v2
 
       - name: Check target image exists in ECR
         id: check-image

.github/workflows/superset-docs-deploy.yml

@@ -70,7 +70,7 @@ jobs:
           yarn install --check-cache
       - name: Download database diagnostics (if triggered by integration tests)
         if: github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'success'
-        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
+        uses: dawidd6/action-download-artifact@8a338493df3d275e4a7a63bcff3b8fe97e51a927 # v19
         continue-on-error: true
         with:
           workflow: superset-python-integrationtest.yml
@@ -79,7 +79,7 @@ jobs:
           path: docs/src/data/
       - name: Try to download latest diagnostics (for push/dispatch triggers)
         if: github.event_name != 'workflow_run'
-        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
+        uses: dawidd6/action-download-artifact@8a338493df3d275e4a7a63bcff3b8fe97e51a927 # v19
         continue-on-error: true
         with:
           workflow: superset-python-integrationtest.yml

.github/workflows/superset-docs-verify.yml

@@ -111,7 +111,7 @@ jobs:
         run: |
           yarn install --check-cache
       - name: Download database diagnostics from integration tests
-        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
+        uses: dawidd6/action-download-artifact@8a338493df3d275e4a7a63bcff3b8fe97e51a927 # v19
         with:
           workflow: superset-python-integrationtest.yml
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/superset-helm-lint.yml

@@ -23,7 +23,7 @@ jobs:
           fetch-depth: 0
 
       - name: Set up Helm
-        uses: azure/setup-helm@dda3372f752e03dde6b3237bc9431cdc2f7a02a2 # v5.0.0
+        uses: azure/setup-helm@1a275c3b69536ee54be43f2070a358922e12c8d4 # v4
         with:
           version: v3.16.4
 

.github/workflows/superset-helm-release.yml

@@ -42,7 +42,7 @@ jobs:
           git config user.email "$GITHUB_ACTOR@users.noreply.github.com"
 
       - name: Install Helm
-        uses: azure/setup-helm@dda3372f752e03dde6b3237bc9431cdc2f7a02a2 # v5.0.0
+        uses: azure/setup-helm@1a275c3b69536ee54be43f2070a358922e12c8d4 # v4
         with:
           version: v3.5.4
 

docker-compose-light.yml

@@ -115,10 +115,6 @@ services:
       DATABASE_HOST: db-light
       DATABASE_DB: superset_light
       POSTGRES_DB: superset_light
-      EXAMPLES_HOST: db-light
-      EXAMPLES_DB: superset_light
-      EXAMPLES_USER: superset
-      EXAMPLES_PASSWORD: superset
       SUPERSET_CONFIG_PATH: /app/docker/pythonpath_dev/superset_config_docker_light.py
       GITHUB_HEAD_REF: ${GITHUB_HEAD_REF:-}
       GITHUB_SHA: ${GITHUB_SHA:-}
@@ -141,10 +137,6 @@ services:
       DATABASE_HOST: db-light
       DATABASE_DB: superset_light
       POSTGRES_DB: superset_light
-      EXAMPLES_HOST: db-light
-      EXAMPLES_DB: superset_light
-      EXAMPLES_USER: superset
-      EXAMPLES_PASSWORD: superset
       SUPERSET_CONFIG_PATH: /app/docker/pythonpath_dev/superset_config_docker_light.py
     healthcheck:
       disable: true
@@ -165,7 +157,6 @@ services:
       BUILD_SUPERSET_FRONTEND_IN_DOCKER: true
       NPM_RUN_PRUNE: false
       SCARF_ANALYTICS: "${SCARF_ANALYTICS:-}"
-      DISABLE_TS_CHECKER: "${DISABLE_TS_CHECKER:-true}"
       # configuring the dev-server to use the host.docker.internal to connect to the backend
       superset: "http://superset-light:8088"
       # Webpack dev server must bind to 0.0.0.0 to be accessible from outside the container

docker/docker-bootstrap.sh

@@ -80,7 +80,7 @@ case "${1}" in
     ;;
   app)
     echo "Starting web app (using development server)..."
-    flask run -p $PORT --reload --debugger --host=0.0.0.0 --exclude-patterns "*/node_modules/*:*/.venv/*:*/build/*:*/__pycache__/*:*/superset-frontend/*"
+    flask run -p $PORT --reload --debugger --without-threads --host=0.0.0.0 --exclude-patterns "*/node_modules/*:*/.venv/*:*/build/*:*/__pycache__/*"
     ;;
   app-gunicorn)
     echo "Starting web app..."

docs/package.json

@@ -70,7 +70,7 @@
     "@swc/core": "^1.15.21",
     "antd": "^6.3.5",
     "baseline-browser-mapping": "^2.10.13",
-    "caniuse-lite": "^1.0.30001786",
+    "caniuse-lite": "^1.0.30001782",
     "docusaurus-plugin-openapi-docs": "^4.6.0",
     "docusaurus-theme-openapi-docs": "^4.6.0",
     "js-yaml": "^4.1.1",

docs/yarn.lock

@@ -6067,10 +6067,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001759, caniuse-lite@^1.0.30001786:
-  version "1.0.30001786"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001786.tgz#586120fc73f3c7ee82152f76acd0c37e04acefbb"
-  integrity sha512-4oxTZEvqmLLrERwxO76yfKM7acZo310U+v4kqexI2TL1DkkUEMT8UijrxxcnVdxR3qkVf5awGRX+4Z6aPHVKrA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001759, caniuse-lite@^1.0.30001782:
+  version "1.0.30001782"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001782.tgz#f2b8617f998bc134701c54ce9748af44f646e062"
+  integrity sha512-dZcaJLJeDMh4rELYFw1tvSn1bhZWYFOt468FcbHHxx/Z/dFidd1I6ciyFdi3iwfQCyOjqo9upF6lGQYtMiJWxw==
 
 ccount@^2.0.0:
   version "2.0.1"

pyproject.toml

@@ -48,7 +48,7 @@ dependencies = [
     "cryptography>=42.0.4, <47.0.0",
     "deprecation>=2.1.0, <2.2.0",
     "flask>=2.2.5, <4.0.0",
-    "flask-appbuilder>=5.2.1, <6.0.0",
+    "flask-appbuilder>=5.0.2,<6",
     "flask-caching>=2.1.0, <3",
     "flask-compress>=1.13, <2.0",
     "flask-talisman>=1.0.0, <2.0",

requirements/base.txt

@@ -86,7 +86,7 @@ cron-descriptor==1.4.5
     # via apache-superset (pyproject.toml)
 croniter==6.0.0
     # via apache-superset (pyproject.toml)
-cryptography==46.0.6
+cryptography==46.0.5
     # via
     #   apache-superset (pyproject.toml)
     #   paramiko
@@ -120,7 +120,7 @@ flask==2.3.3
     #   flask-session
     #   flask-sqlalchemy
     #   flask-wtf
-flask-appbuilder==5.2.1
+flask-appbuilder==5.2.0
     # via
     #   apache-superset (pyproject.toml)
     #   apache-superset-core
@@ -209,7 +209,7 @@ mako==1.3.10
     # via
     #   apache-superset (pyproject.toml)
     #   alembic
-markdown==3.8.1
+markdown==3.8
     # via apache-superset (pyproject.toml)
 markdown-it-py==3.0.0
     # via rich
@@ -279,7 +279,7 @@ parsedatetime==2.6
     # via apache-superset (pyproject.toml)
 pgsanity==0.2.9
     # via apache-superset (pyproject.toml)
-pillow==12.1.1
+pillow==11.3.0
     # via apache-superset (pyproject.toml)
 platformdirs==4.3.8
     # via requests-cache
@@ -293,7 +293,7 @@ prompt-toolkit==3.0.51
     # via click-repl
 pyarrow==16.1.0
     # via apache-superset (pyproject.toml)
-pyasn1==0.6.3
+pyasn1==0.6.2
     # via
     #   pyasn1-modules
     #   rsa
@@ -309,9 +309,9 @@ pydantic-core==2.33.2
     # via pydantic
 pygeohash==3.2.2
     # via apache-superset (pyproject.toml)
-pygments==2.20.0
+pygments==2.19.1
     # via rich
-pyjwt==2.12.0
+pyjwt==2.10.1
     # via
     #   apache-superset (pyproject.toml)
     #   flask-appbuilder

requirements/development.txt

@@ -178,7 +178,7 @@ croniter==6.0.0
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
-cryptography==46.0.6
+cryptography==46.0.5
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
@@ -259,7 +259,7 @@ flask==2.3.3
     #   flask-sqlalchemy
     #   flask-testing
     #   flask-wtf
-flask-appbuilder==5.2.1
+flask-appbuilder==5.2.0
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
@@ -508,7 +508,7 @@ mako==1.3.10
     #   -c requirements/base-constraint.txt
     #   alembic
     #   apache-superset
-markdown==3.8.1
+markdown==3.8
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
@@ -655,7 +655,7 @@ pgsanity==0.2.9
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
-pillow==12.1.1
+pillow==11.3.0
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
@@ -716,7 +716,7 @@ pyarrow==16.1.0
     #   apache-superset
     #   db-dtypes
     #   pandas-gbq
-pyasn1==0.6.3
+pyasn1==0.6.2
     # via
     #   -c requirements/base-constraint.txt
     #   pyasn1-modules
@@ -756,7 +756,7 @@ pygeohash==3.2.2
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset
-pygments==2.20.0
+pygments==2.19.1
     # via
     #   -c requirements/base-constraint.txt
     #   rich
@@ -764,7 +764,7 @@ pyhive==0.7.0
     # via apache-superset
 pyinstrument==4.4.0
     # via apache-superset
-pyjwt==2.12.0
+pyjwt==2.10.1
     # via
     #   -c requirements/base-constraint.txt
     #   apache-superset

superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts

@@ -0,0 +1,171 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { CHART_LIST } from 'cypress/utils/urls';
+import { setGridMode, toggleBulkSelect } from 'cypress/utils';
+import {
+  setFilter,
+  interceptBulkDelete,
+  interceptUpdate,
+  interceptDelete,
+  interceptFiltering,
+  interceptFavoriteStatus,
+} from '../explore/utils';
+
+function orderAlphabetical() {
+  setFilter('Sort', 'Alphabetical');
+}
+
+function openProperties() {
+  cy.get('[aria-label="more"]').eq(0).click();
+  cy.getBySel('chart-list-edit-option').click();
+}
+
+function openMenu() {
+  cy.get('[aria-label="more"]').eq(0).click();
+}
+
+function confirmDelete() {
+  cy.getBySel('delete-modal-input').type('DELETE');
+  cy.getBySel('modal-confirm-button').click();
+}
+
+function visitChartList() {
+  interceptFiltering();
+  interceptFavoriteStatus();
+  cy.visit(CHART_LIST);
+  cy.wait('@filtering');
+  cy.wait('@favoriteStatus');
+}
+
+describe('Charts list', () => {
+  describe('common actions', () => {
+    beforeEach(() => {
+      visitChartList();
+    });
+
+    it('should bulk delete correctly', () => {
+      cy.createSampleCharts([0, 1, 2, 3]);
+
+      interceptBulkDelete();
+      toggleBulkSelect();
+
+      // bulk deletes in card-view
+      setGridMode('card');
+      orderAlphabetical();
+
+      cy.getBySel('skeleton-card').should('not.exist');
+      cy.getBySel('styled-card').contains('1 - Sample chart').click();
+      cy.getBySel('styled-card').contains('2 - Sample chart').click();
+      cy.getBySel('bulk-select-action').contains('Delete').click();
+      confirmDelete();
+      cy.wait('@bulkDelete');
+      cy.getBySel('styled-card')
+        .eq(1)
+        .should('not.contain', '1 - Sample chart');
+      cy.getBySel('styled-card')
+        .eq(2)
+        .should('not.contain', '2 - Sample chart');
+
+      // bulk deletes in list-view
+      setGridMode('list');
+      cy.get('.loading').should('not.exist');
+      cy.getBySel('table-row').contains('3 - Sample chart').should('exist');
+      cy.getBySel('table-row').contains('4 - Sample chart').should('exist');
+      cy.get('[data-test="table-row"] input[type="checkbox"]').eq(0).click();
+      cy.get('[data-test="table-row"] input[type="checkbox"]').eq(1).click();
+      cy.getBySel('bulk-select-action').eq(0).contains('Delete').click();
+      confirmDelete();
+      cy.wait('@bulkDelete');
+      cy.get('.loading').should('exist');
+      cy.get('.loading').should('not.exist');
+      cy.getBySel('table-row').eq(0).should('not.contain', '3 - Sample chart');
+      cy.getBySel('table-row').eq(1).should('not.contain', '4 - Sample chart');
+    });
+
+    it('should delete correctly in card mode', () => {
+      cy.createSampleCharts([0, 1]);
+      interceptDelete();
+
+      // deletes in card-view
+      setGridMode('card');
+      orderAlphabetical();
+
+      cy.getBySel('styled-card').contains('1 - Sample chart');
+      openMenu();
+      cy.getBySel('chart-list-delete-option').click();
+      confirmDelete();
+      cy.wait('@delete');
+      cy.getBySel('styled-card')
+        .contains('1 - Sample chart')
+        .should('not.exist');
+    });
+
+    it('should delete correctly in list mode', () => {
+      cy.createSampleCharts([2, 3]);
+      interceptDelete();
+      cy.getBySel('sort-header').contains('Name').click();
+
+      // Modal closes immediately without this
+      cy.wait(2000);
+
+      cy.getBySel('table-row').eq(0).contains('3 - Sample chart');
+      cy.getBySel('delete').eq(0).click();
+      confirmDelete();
+      cy.wait('@delete');
+      cy.get('.loading').should('exist');
+      cy.get('.loading').should('not.exist');
+      cy.getBySel('table-row').eq(0).should('not.contain', '3 - Sample chart');
+    });
+
+    it('should edit correctly', () => {
+      cy.createSampleCharts([0]);
+      interceptUpdate();
+
+      // edits in card-view
+      setGridMode('card');
+      orderAlphabetical();
+      cy.getBySel('skeleton-card').should('not.exist');
+      cy.getBySel('styled-card').eq(0).contains('1 - Sample chart');
+
+      // change title
+      openProperties();
+      cy.getBySel('properties-modal-name-input').type(' | EDITED');
+      cy.get('button:contains("Save")').click();
+      cy.wait('@update');
+      cy.getBySel('styled-card').eq(0).contains('1 - Sample chart | EDITED');
+
+      // edits in list-view
+      setGridMode('list');
+      // Wait for list view to fully render after mode change
+      cy.get('.loading').should('not.exist');
+      cy.getBySel('table-row').should('be.visible');
+      // Target the specific row by chart title to avoid flakiness from row ordering
+      cy.getBySel('table-row')
+        .contains('1 - Sample chart | EDITED')
+        .parents('[data-test="table-row"]')
+        .find('[data-test="edit-alt"]')
+        .click();
+      cy.getBySel('properties-modal-name-input').clear();
+      cy.getBySel('properties-modal-name-input').type('1 - Sample chart');
+      cy.get('button:contains("Save")').click();
+      cy.wait('@update');
+      cy.getBySel('table-row').contains('1 - Sample chart').should('exist');
+    });
+  });
+});

superset-frontend/cypress-base/cypress/e2e/dataset/dataset_list.test.ts

@@ -17,19 +17,26 @@
  * under the License.
  */
 
-export function getMapboxApiKey(): string {
-  if (typeof document === 'undefined') {
-    return '';
-  }
-  try {
-    const appContainer = document.getElementById('app');
-    const dataBootstrap = appContainer?.getAttribute('data-bootstrap');
-    if (dataBootstrap) {
-      const bootstrapData = JSON.parse(dataBootstrap);
-      return bootstrapData?.common?.conf?.MAPBOX_API_KEY || '';
-    }
-  } catch {
-    // If bootstrap data is unavailable or malformed, return empty string
-  }
-  return '';
-}
+import { DATASET_LIST_PATH } from 'cypress/utils/urls';
+
+describe('Dataset list', () => {
+  before(() => {
+    cy.visit(DATASET_LIST_PATH);
+  });
+
+  xit('should open Explore on dataset name click', () => {
+    cy.intercept('**/api/v1/explore/**').as('explore');
+    cy.get('[data-test="listview-table"] [data-test="internal-link"]')
+      .contains('birth_names')
+      .click();
+    cy.wait('@explore');
+    cy.get('[data-test="datasource-control"] .title-select').contains(
+      'birth_names',
+    );
+    cy.get('.metric-option-label').first().contains('COUNT(*)');
+    cy.get('.column-option-label').first().contains('ds');
+    cy.get('[data-test="fast-viz-switcher"] > div:not([role="button"]')
+      .contains('Table')
+      .should('be.visible');
+  });
+});

superset-frontend/cypress-base/cypress/e2e/explore/utils.ts

@@ -23,6 +23,18 @@ export function interceptFiltering() {
   cy.intercept('GET', `**/api/v1/chart/?q=*`).as('filtering');
 }
 
+export function interceptBulkDelete() {
+  cy.intercept('DELETE', `**/api/v1/chart/?q=*`).as('bulkDelete');
+}
+
+export function interceptDelete() {
+  cy.intercept('DELETE', `**/api/v1/chart/*`).as('delete');
+}
+
+export function interceptFavoriteStatus() {
+  cy.intercept('GET', '**/api/v1/chart/favorite_status/*').as('favoriteStatus');
+}
+
 export function interceptUpdate() {
   cy.intercept('PUT', `**/api/v1/chart/*`).as('update');
 }
@@ -31,13 +43,32 @@ export const interceptV1ChartData = (alias = 'v1Data') => {
   cy.intercept('**/api/v1/chart/data*').as(alias);
 };
 
-function interceptExploreGet() {
+export function interceptExploreJson(alias = 'getJson') {
+  cy.intercept('POST', `**/superset/explore_json/**`).as(alias);
+}
+
+export const interceptFormDataKey = () => {
+  cy.intercept('POST', '**/api/v1/explore/form_data').as('formDataKey');
+};
+
+export function interceptExploreGet() {
   cy.intercept({
     method: 'GET',
     url: /.*\/api\/v1\/explore\/\?(form_data_key|dashboard_page_id|slice_id)=.*/,
   }).as('getExplore');
 }
 
+export function setFilter(filter: string, option: string) {
+  interceptFiltering();
+
+  cy.get(`[aria-label^="${filter}"]`).first().click();
+  cy.get(`.ant-select-item-option[title="${option}"]`).first().click({
+    force: true,
+  });
+
+  cy.wait('@filtering');
+}
+
 export function saveChartToDashboard(chartName: string, dashboardName: string) {
   interceptDashboardGet();
   interceptUpdate();

superset-frontend/cypress-base/cypress/utils/index.ts

@@ -25,6 +25,28 @@ export interface ChartSpec {
   viz: string;
 }
 
+const viewTypeIcons = {
+  card: 'appstore',
+  list: 'unordered-list',
+};
+
+export function setGridMode(type: 'card' | 'list') {
+  const icon = viewTypeIcons[type];
+  cy.get(`[aria-label="${icon}"]`).click();
+}
+
+export function toggleBulkSelect() {
+  cy.getBySel('bulk-select').click();
+}
+
+export function clearAllInputs() {
+  cy.get('body').then($body => {
+    if ($body.find('.ant-select-clear').length) {
+      cy.get('.ant-select-clear').click({ multiple: true, force: true });
+    }
+  });
+}
+
 const toSlicelike = ($chart: JQuery<HTMLElement>): Slice => {
   const chartId = $chart.attr('data-test-chart-id');
   const vizType = $chart.attr('data-test-viz-type');

superset-frontend/cypress-base/cypress/utils/urls.ts

@@ -25,3 +25,8 @@ export const SUPPORTED_CHARTS_DASHBOARD =
   '/superset/dashboard/supported_charts_dash/';
 export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/';
 export const DATABASE_LIST = '/databaseview/list';
+export const DATASET_LIST_PATH = 'tablemodelview/list';
+export const ALERT_LIST = '/alert/list/';
+export const REPORT_LIST = '/report/list/';
+export const LOGIN = '/login/';
+export const REGISTER = '/register/';

superset-frontend/cypress-base/package-lock.json

@@ -5809,9 +5809,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
     },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
@@ -13072,9 +13072,9 @@
       }
     },
     "lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",

superset-frontend/package.json

@@ -128,17 +128,17 @@
     "@superset-ui/legacy-plugin-chart-chord": "file:./plugins/legacy-plugin-chart-chord",
     "@superset-ui/legacy-plugin-chart-country-map": "file:./plugins/legacy-plugin-chart-country-map",
     "@superset-ui/legacy-plugin-chart-horizon": "file:./plugins/legacy-plugin-chart-horizon",
+    "@superset-ui/legacy-plugin-chart-map-box": "file:./plugins/legacy-plugin-chart-map-box",
     "@superset-ui/legacy-plugin-chart-paired-t-test": "file:./plugins/legacy-plugin-chart-paired-t-test",
     "@superset-ui/legacy-plugin-chart-parallel-coordinates": "file:./plugins/legacy-plugin-chart-parallel-coordinates",
     "@superset-ui/legacy-plugin-chart-partition": "file:./plugins/legacy-plugin-chart-partition",
     "@superset-ui/legacy-plugin-chart-rose": "file:./plugins/legacy-plugin-chart-rose",
     "@superset-ui/legacy-plugin-chart-world-map": "file:./plugins/legacy-plugin-chart-world-map",
-    "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl",
+    "@superset-ui/legacy-preset-chart-deckgl": "file:./plugins/legacy-preset-chart-deckgl",
     "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",
     "@superset-ui/plugin-chart-ag-grid-table": "file:./plugins/plugin-chart-ag-grid-table",
     "@superset-ui/plugin-chart-cartodiagram": "file:./plugins/plugin-chart-cartodiagram",
     "@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts",
-    "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map",
     "@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars",
     "@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
     "@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
@@ -169,7 +169,7 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.3.4",
     "fuse.js": "^7.1.0",
-    "geolib": "^3.3.14",
+    "geolib": "^3.3.4",
     "geostyler": "^18.3.1",
     "geostyler-data": "^1.1.0",
     "geostyler-openlayers-parser": "^5.4.1",
@@ -182,9 +182,9 @@
     "js-levenshtein": "^1.1.6",
     "json-bigint": "^1.0.0",
     "json-stringify-pretty-compact": "^2.0.0",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.23",
     "mapbox-gl": "^3.20.0",
-    "markdown-to-jsx": "^9.7.13",
+    "markdown-to-jsx": "^9.7.6",
     "match-sorter": "^8.2.0",
     "memoize-one": "^5.2.1",
     "mousetrap": "^1.6.5",
@@ -223,7 +223,7 @@
     "redux-undo": "^1.0.0-beta9-9-7",
     "rison": "^0.1.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "simple-zstd": "^1.4.2",
+    "simple-zstd": "^2.1.0",
     "stream-browserify": "^3.0.0",
     "tinycolor2": "^1.4.2",
     "urijs": "^1.19.8",
@@ -244,7 +244,7 @@
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@babel/plugin-transform-modules-commonjs": "^7.28.6",
     "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/register": "^7.23.7",
@@ -256,7 +256,7 @@
     "@emotion/jest": "^11.14.2",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@mihkeleidast/storybook-addon-source": "^1.0.1",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.58.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@storybook/addon-actions": "^8.6.17",
     "@storybook/addon-controls": "^8.6.17",
@@ -270,8 +270,8 @@
     "@storybook/test": "^8.6.15",
     "@storybook/test-runner": "^0.17.0",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "^1.15.24",
-    "@swc/plugin-emotion": "^14.8.0",
+    "@swc/core": "^1.15.18",
+    "@swc/plugin-emotion": "^14.6.0",
     "@swc/plugin-transform-imports": "^12.5.0",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -284,7 +284,7 @@
     "@types/js-levenshtein": "^1.1.3",
     "@types/json-bigint": "^1.0.4",
     "@types/mousetrap": "^1.6.15",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.3.3",
     "@types/react": "^17.0.83",
     "@types/react-dom": "^17.0.26",
     "@types/react-loadable": "^5.5.11",
@@ -301,11 +301,11 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^30.0.2",
-    "babel-loader": "^10.1.1",
+    "babel-loader": "^10.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "babel-plugin-lodash": "^3.3.4",
-    "baseline-browser-mapping": "^2.10.13",
+    "baseline-browser-mapping": "^2.10.10",
     "cheerio": "1.2.0",
     "concurrently": "^9.2.1",
     "copy-webpack-plugin": "^14.0.0",
@@ -327,7 +327,7 @@
     "eslint-plugin-react-prefer-function-component": "^5.0.0",
     "eslint-plugin-react-you-might-not-need-an-effect": "^0.9.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^7.16.2",
+    "eslint-plugin-testing-library": "^7.16.1",
     "eslint-plugin-theme-colors": "file:eslint-rules/eslint-plugin-theme-colors",
     "fetch-mock": "^12.6.0",
     "fork-ts-checker-webpack-plugin": "^9.1.0",
@@ -337,13 +337,13 @@
     "imports-loader": "^5.0.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-html-reporter": "^4.4.0",
+    "jest-html-reporter": "^4.3.0",
     "jest-websocket-mock": "^2.5.0",
     "js-yaml-loader": "^1.2.2",
-    "jsdom": "^29.0.2",
+    "jsdom": "^28.1.0",
     "lerna": "^9.0.4",
     "lightningcss": "^1.32.0",
-    "mini-css-extract-plugin": "^2.10.2",
+    "mini-css-extract-plugin": "^2.10.1",
     "open-cli": "^9.0.0",
     "oxlint": "^1.56.0",
     "po2json": "^0.4.5",
@@ -361,7 +361,7 @@
     "swc-loader": "^0.2.7",
     "terser-webpack-plugin": "^5.4.0",
     "thread-loader": "^4.0.4",
-    "ts-jest": "^29.4.9",
+    "ts-jest": "^29.4.6",
     "tscw-config": "^1.1.2",
     "tsx": "^4.21.0",
     "typescript": "5.4.5",

superset-frontend/packages/generator-superset/package.json

@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "chalk": "^5.6.2",
-    "lodash-es": "^4.18.1",
-    "yeoman-generator": "^8.1.2",
+    "lodash-es": "^4.17.23",
+    "yeoman-generator": "^7.5.1",
     "yosay": "^3.0.0"
   },
   "devDependencies": {

superset-frontend/packages/superset-core/package.json

@@ -75,7 +75,7 @@
   "devDependencies": {
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "typescript": "^5.0.0",
@@ -102,7 +102,7 @@
     "react-dom": "^17.0.2",
     "react-loadable": "^5.5.0",
     "tinycolor2": "*",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.21",
     "antd": "^5.26.0",
     "jed": "^1.1.1"
   },

superset-frontend/packages/superset-ui-chart-controls/package.json

@@ -26,11 +26,11 @@
   "dependencies": {
     "@apache-superset/core": "*",
     "@types/react": "*",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.23",
     "tinycolor2": "*"
   },
   "peerDependencies": {
-    "@ant-design/icons": "^5.6.1",
+    "@ant-design/icons": "^5.2.6",
     "@emotion/react": "^11.4.1",
     "@superset-ui/core": "*",
     "@testing-library/dom": "^8.20.1",

superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx

@@ -21,11 +21,7 @@ import { styled, css } from '@apache-superset/core/theme';
 export const ControlSubSectionHeader = styled.div`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeightStrong};
-    margin-top: ${theme.sizeUnit * 3}px;
     margin-bottom: ${theme.sizeUnit}px;
     font-size: ${theme.fontSizeSM}px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: ${theme.colorTextSecondary};
   `}
 `;

superset-frontend/packages/superset-ui-core/package.json

@@ -24,40 +24,39 @@
     "lib"
   ],
   "dependencies": {
-    "@ant-design/icons": "^6.1.1",
     "@apache-superset/core": "*",
+    "@ant-design/icons": "^5.2.6",
     "@babel/runtime": "^7.29.2",
     "@types/json-bigint": "^1.0.4",
-    "@visx/responsive": "^3.12.0",
     "ace-builds": "^1.43.6",
     "ag-grid-community": "35.0.1",
     "ag-grid-react": "35.0.1",
     "brace": "^0.11.1",
     "classnames": "^2.5.1",
-    "core-js": "^3.49.0",
     "csstype": "^3.2.3",
+    "core-js": "^3.49.0",
     "d3-format": "^3.1.2",
+    "dayjs": "^1.11.20",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-time": "^3.1.0",
     "d3-time-format": "^4.1.0",
-    "dayjs": "^1.11.20",
     "dompurify": "^3.3.3",
     "fetch-retry": "^6.0.0",
     "handlebars": "^4.7.9",
     "jed": "^1.1.1",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.23",
     "math-expression-evaluator": "^2.0.7",
     "pretty-ms": "^9.3.0",
     "re-resizable": "^6.11.2",
     "react-ace": "^14.0.1",
-    "react-draggable": "^4.5.0",
-    "react-error-boundary": "6.0.0",
     "react-js-cron": "^5.2.0",
-    "react-markdown": "^8.0.7",
+    "react-draggable": "^4.5.0",
     "react-resize-detector": "^7.1.2",
-    "react-syntax-highlighter": "^16.1.0",
+    "react-syntax-highlighter": "^16.1.1",
     "react-ultimate-pagination": "^1.3.2",
+    "react-error-boundary": "6.0.0",
+    "react-markdown": "^8.0.7",
     "regenerator-runtime": "^0.14.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -65,6 +64,7 @@
     "reselect": "^5.1.1",
     "rison": "^0.1.1",
     "seedrandom": "^3.0.5",
+    "@visx/responsive": "^3.12.0",
     "xss": "^1.0.15"
   },
   "devDependencies": {
@@ -74,12 +74,12 @@
     "@types/d3-scale": "^2.1.1",
     "@types/d3-time": "^3.0.4",
     "@types/d3-time-format": "^4.0.3",
+    "@types/react-table": "^7.7.20",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/jquery": "^3.5.33",
     "@types/lodash": "^4.17.24",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.3.3",
     "@types/prop-types": "^15.7.15",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/react-table": "^7.7.20",
     "@types/rison": "0.1.0",
     "@types/seedrandom": "^3.0.8",
     "fetch-mock": "^12.6.0",
@@ -88,6 +88,7 @@
     "timezone-mock": "1.4.0"
   },
   "peerDependencies": {
+    "antd": "^5.26.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.14.1",
@@ -100,7 +101,6 @@
     "@types/react-loadable": "*",
     "@types/react-window": "^1.8.8",
     "@types/tinycolor2": "*",
-    "antd": "^5.26.0",
     "nanoid": "^5.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts

@@ -41,7 +41,6 @@ export enum VizType {
   LegacyBubble = 'bubble',
   Line = 'echarts_timeseries_line',
   MapBox = 'mapbox',
-  PointClusterMap = 'point_cluster_map',
   MixedTimeseries = 'mixed_timeseries',
   PairedTTest = 'paired_ttest',
   ParallelCoordinates = 'para',

superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/index.tsx

@@ -283,16 +283,6 @@ export function AsyncAceEditor(
                   color: ${token.colorText} !important;
                 }
 
-                /* Fix cursor misalignment by ensuring consistent font-family */
-                .ace_editor .ace_content {
-                  font-family: ${editorFontFamily} !important;
-                }
-
-                /* Ensure the text layer uses the same font-family */
-                .ace_editor .ace_text-layer {
-                  font-family: ${editorFontFamily} !important;
-                }
-
                 /* Adjust gutter colors */
                 .ace_editor .ace_gutter {
                   background-color: ${token.colorBgElevated} !important;
@@ -319,11 +309,6 @@ export function AsyncAceEditor(
                   opacity: 0.5;
                 }
 
-                /* Style bracket matching to blend with theme */
-                .ace_editor .ace_bracket {
-                  border-color: ${token.colorPrimaryBorderHover} !important;
-                }
-
                 /* Adjust cursor color */
                 .ace_editor .ace_cursor {
                   color: ${token.colorPrimaryText} !important;

superset-frontend/packages/superset-ui-core/src/components/Icons/AntdEnhanced.tsx

@@ -115,7 +115,6 @@ import {
   PlusSquareOutlined,
   PlusOutlined,
   ProfileOutlined,
-  PushpinFilled,
   PushpinOutlined,
   QuestionCircleOutlined,
   ReloadOutlined,
@@ -271,7 +270,6 @@ const AntdIcons = {
   PlusSquareOutlined,
   PlusOutlined,
   ProfileOutlined,
-  PushpinFilled,
   PushpinOutlined,
   ReloadOutlined,
   QuestionCircleOutlined,

superset-frontend/playwright/components/modals/index.ts

@@ -18,9 +18,6 @@
  */
 
 // Specific modal implementations
-export { ChartPropertiesModal } from './ChartPropertiesModal';
-export { ConfirmDialog } from './ConfirmDialog';
 export { DeleteConfirmationModal } from './DeleteConfirmationModal';
 export { DuplicateDatasetModal } from './DuplicateDatasetModal';
-export { EditDatasetModal } from './EditDatasetModal';
 export { ImportDatasetModal } from './ImportDatasetModal';

superset-frontend/playwright/pages/ChartListPage.ts

@@ -47,7 +47,7 @@ export class ChartListPage {
   }
 
   /**
-   * Navigate to the chart list page in table view.
+   * Navigate to the chart list page.
    * Forces table view via URL parameter to avoid card view default
    * (ListviewsDefaultCardView feature flag may enable card view).
    */
@@ -55,13 +55,6 @@ export class ChartListPage {
     await this.page.goto(`${URL.CHART_LIST}?viewMode=table`);
   }
 
-  /**
-   * Navigate to the chart list page in card view.
-   */
-  async gotoCardView(): Promise<void> {
-    await this.page.goto(`${URL.CHART_LIST}?viewMode=card`);
-  }
-
   /**
    * Wait for the table to load
    * @param options - Optional wait options
@@ -70,16 +63,6 @@ export class ChartListPage {
     await this.table.waitForVisible(options);
   }
 
-  /**
-   * Wait for card view to finish loading.
-   */
-  async waitForCardLoad(options?: { timeout?: number }): Promise<void> {
-    await this.page
-      .locator('[data-test="styled-card"]')
-      .first()
-      .waitFor({ state: 'visible', ...options });
-  }
-
   /**
    * Gets a chart row locator by name.
    * Returns a Locator that tests can use with expect().toBeVisible(), etc.
@@ -146,24 +129,4 @@ export class ChartListPage {
   async clickBulkAction(actionName: string): Promise<void> {
     await this.bulkSelect.clickAction(actionName);
   }
-
-  // --- Card view methods ---
-
-  /**
-   * Gets a chart card locator by name (card view).
-   */
-  getChartCard(chartName: string): Locator {
-    return this.page
-      .locator('[data-test="styled-card"]')
-      .filter({ hasText: chartName });
-  }
-
-  /**
-   * Clicks the edit option in a chart card's dropdown menu (card view).
-   */
-  async clickCardEditAction(chartName: string): Promise<void> {
-    const card = this.getChartCard(chartName);
-    await card.locator('[aria-label="more"]').click();
-    await this.page.locator('[data-test="chart-list-edit-option"]').click();
-  }
 }

superset-frontend/playwright/tests/experimental/chart/chart-list.spec.ts

@@ -17,20 +17,21 @@
  * under the License.
  */
 
-import { testWithAssets, expect } from '../../helpers/fixtures';
-import { ChartListPage } from '../../pages/ChartListPage';
 import {
-  ChartPropertiesModal,
-  DeleteConfirmationModal,
-} from '../../components/modals';
-import { Toast } from '../../components/core';
-import { apiGetChart, ENDPOINTS } from '../../helpers/api/chart';
+  test as testWithAssets,
+  expect,
+} from '../../../helpers/fixtures/testAssets';
+import { ChartListPage } from '../../../pages/ChartListPage';
+import { ChartPropertiesModal } from '../../../components/modals/ChartPropertiesModal';
+import { DeleteConfirmationModal } from '../../../components/modals/DeleteConfirmationModal';
+import { Toast } from '../../../components/core/Toast';
+import { apiGetChart, ENDPOINTS } from '../../../helpers/api/chart';
 import { createTestChart } from './chart-test-helpers';
-import { waitForGet, waitForPut } from '../../helpers/api/intercepts';
+import { waitForGet, waitForPut } from '../../../helpers/api/intercepts';
 import {
   expectStatusOneOf,
   expectValidExportZip,
-} from '../../helpers/api/assertions';
+} from '../../../helpers/api/assertions';
 
 /**
  * Extend testWithAssets with chartListPage navigation (beforeEach equivalent).
@@ -260,60 +261,6 @@ test('should bulk delete multiple charts', async ({
   }
 });
 
-test('should edit chart name from card view', async ({ page, testAssets }) => {
-  // Create throwaway chart for editing
-  const { id: chartId, name: chartName } = await createTestChart(
-    page,
-    testAssets,
-    test.info(),
-    { prefix: 'test_card_edit' },
-  );
-
-  // Navigate to card view (not table view)
-  const cardListPage = new ChartListPage(page);
-  await cardListPage.gotoCardView();
-  await cardListPage.waitForCardLoad();
-
-  // Verify chart card is visible
-  await expect(cardListPage.getChartCard(chartName)).toBeVisible();
-
-  // Open card dropdown and click edit
-  await cardListPage.clickCardEditAction(chartName);
-
-  // Wait for properties modal to be ready
-  const propertiesModal = new ChartPropertiesModal(page);
-  await propertiesModal.waitForReady();
-
-  // Edit the chart name
-  const newName = `card_renamed_${Date.now()}_${test.info().parallelIndex}`;
-  await propertiesModal.fillName(newName);
-
-  // Set up response intercept for save
-  const saveResponsePromise = waitForPut(page, `${ENDPOINTS.CHART}${chartId}`);
-
-  // Click Save button
-  await propertiesModal.clickSave();
-
-  // Wait for save to complete and verify success
-  expectStatusOneOf(await saveResponsePromise, [200, 201]);
-
-  // Modal should close
-  await propertiesModal.waitForHidden();
-
-  // Verify success toast appears
-  const toast = new Toast(page);
-  await expect(toast.getSuccess()).toBeVisible();
-
-  // Verify the renamed card appears in card view and old name is gone
-  await expect(cardListPage.getChartCard(newName)).toBeVisible();
-  await expect(cardListPage.getChartCard(chartName)).not.toBeVisible();
-
-  // Backend verification: API returns updated name
-  const response = await apiGetChart(page, chartId);
-  const chart = (await response.json()).result;
-  expect(chart.slice_name).toBe(newName);
-});
-
 test('should bulk export multiple charts', async ({
   page,
   chartListPage,

superset-frontend/playwright/tests/experimental/chart/chart-test-helpers.ts

@@ -18,9 +18,9 @@
  */
 
 import type { Page, TestInfo } from '@playwright/test';
-import type { TestAssets } from '../../helpers/fixtures';
-import { apiPostChart } from '../../helpers/api/chart';
-import { getDatasetByName } from '../../helpers/api/dataset';
+import type { TestAssets } from '../../../helpers/fixtures/testAssets';
+import { apiPostChart } from '../../../helpers/api/chart';
+import { getDatasetByName } from '../../../helpers/api/dataset';
 
 interface TestChartResult {
   id: number;

superset-frontend/playwright/tests/experimental/dashboard/dashboard-list.spec.ts

@@ -17,27 +17,28 @@
  * under the License.
  */
 
-import { testWithAssets, expect } from '../../helpers/fixtures';
-import { DashboardListPage } from '../../pages/DashboardListPage';
 import {
-  DeleteConfirmationModal,
-  ImportDatasetModal,
-} from '../../components/modals';
-import { Toast } from '../../components/core';
+  test as testWithAssets,
+  expect,
+} from '../../../helpers/fixtures/testAssets';
+import { DashboardListPage } from '../../../pages/DashboardListPage';
+import { DeleteConfirmationModal } from '../../../components/modals/DeleteConfirmationModal';
+import { ImportDatasetModal } from '../../../components/modals/ImportDatasetModal';
+import { Toast } from '../../../components/core/Toast';
 import {
   apiGetDashboard,
   apiDeleteDashboard,
   apiExportDashboards,
   getDashboardByName,
   ENDPOINTS,
-} from '../../helpers/api/dashboard';
+} from '../../../helpers/api/dashboard';
 import { createTestDashboard } from './dashboard-test-helpers';
-import { waitForGet, waitForPost } from '../../helpers/api/intercepts';
+import { waitForGet, waitForPost } from '../../../helpers/api/intercepts';
 import {
   expectStatusOneOf,
   expectValidExportZip,
-} from '../../helpers/api/assertions';
-import { TIMEOUT } from '../../utils/constants';
+} from '../../../helpers/api/assertions';
+import { TIMEOUT } from '../../../utils/constants';
 
 /**
  * Extend testWithAssets with dashboardListPage navigation (beforeEach equivalent).

superset-frontend/playwright/tests/experimental/dashboard/dashboard-test-helpers.ts

@@ -18,8 +18,8 @@
  */
 
 import type { Page, TestInfo } from '@playwright/test';
-import type { TestAssets } from '../../helpers/fixtures';
-import { apiPostDashboard } from '../../helpers/api/dashboard';
+import type { TestAssets } from '../../../helpers/fixtures/testAssets';
+import { apiPostDashboard } from '../../../helpers/api/dashboard';
 
 interface TestDashboardResult {
   id: number;

superset-frontend/playwright/tests/experimental/dashboard/export.spec.ts

@@ -18,9 +18,9 @@
  */
 
 import { test, expect } from '@playwright/test';
-import { DashboardPage } from '../../pages/DashboardPage';
-import { Toast } from '../../components/core';
-import { TIMEOUT } from '../../utils/constants';
+import { DashboardPage } from '../../../pages/DashboardPage';
+import { Toast } from '../../../components/core';
+import { TIMEOUT } from '../../../utils/constants';
 
 /**
  * Dashboard Export E2E tests.

superset-frontend/playwright/tests/experimental/dashboard/theme.spec.ts

@@ -18,16 +18,16 @@
  */
 
 import { test, expect } from '@playwright/test';
-import { AuthPage } from '../../pages/AuthPage';
-import { DashboardPage } from '../../pages/DashboardPage';
-import { apiPostTheme, apiDeleteTheme } from '../../helpers/api/theme';
+import { AuthPage } from '../../../pages/AuthPage';
+import { DashboardPage } from '../../../pages/DashboardPage';
+import { apiPostTheme, apiDeleteTheme } from '../../../helpers/api/theme';
 import {
   apiPostDashboard,
   apiPutDashboard,
   apiDeleteDashboard,
-} from '../../helpers/api/dashboard';
-import { apiGet } from '../../helpers/api/requests';
-import { TIMEOUT } from '../../utils/constants';
+} from '../../../helpers/api/dashboard';
+import { apiGet } from '../../../helpers/api/requests';
+import { TIMEOUT } from '../../../utils/constants';
 
 /**
  * Dashboard Theme E2E tests.

superset-frontend/playwright/tests/experimental/dataset/create-dataset.spec.ts

@@ -17,17 +17,17 @@
  * under the License.
  */
 
-import { testWithAssets as test, expect } from '../../helpers/fixtures';
-import type { TestAssets } from '../../helpers/fixtures';
+import { test, expect } from '../../../helpers/fixtures/testAssets';
+import type { TestAssets } from '../../../helpers/fixtures/testAssets';
 import type { Page, TestInfo } from '@playwright/test';
-import { ExplorePage } from '../../pages/ExplorePage';
-import { CreateDatasetPage } from '../../pages/CreateDatasetPage';
-import { DatasetListPage } from '../../pages/DatasetListPage';
-import { ChartCreationPage } from '../../pages/ChartCreationPage';
-import { ENDPOINTS } from '../../helpers/api/dataset';
-import { waitForPost } from '../../helpers/api/intercepts';
-import { expectStatusOneOf } from '../../helpers/api/assertions';
-import { apiPostDatabase } from '../../helpers/api/database';
+import { ExplorePage } from '../../../pages/ExplorePage';
+import { CreateDatasetPage } from '../../../pages/CreateDatasetPage';
+import { DatasetListPage } from '../../../pages/DatasetListPage';
+import { ChartCreationPage } from '../../../pages/ChartCreationPage';
+import { ENDPOINTS } from '../../../helpers/api/dataset';
+import { waitForPost } from '../../../helpers/api/intercepts';
+import { expectStatusOneOf } from '../../../helpers/api/assertions';
+import { apiPostDatabase } from '../../../helpers/api/database';
 
 interface GsheetsSetupResult {
   sheetName: string;

superset-frontend/playwright/tests/experimental/dataset/dataset-list.spec.ts

@@ -17,36 +17,37 @@
  * under the License.
  */
 
-import { testWithAssets, expect } from '../../helpers/fixtures';
-import path from 'path';
-import { DatasetListPage } from '../../pages/DatasetListPage';
-import { ExplorePage } from '../../pages/ExplorePage';
 import {
-  ConfirmDialog,
-  DeleteConfirmationModal,
-  DuplicateDatasetModal,
-  EditDatasetModal,
-  ImportDatasetModal,
-} from '../../components/modals';
-import { Toast } from '../../components/core';
+  test as testWithAssets,
+  expect,
+} from '../../../helpers/fixtures/testAssets';
+import path from 'path';
+import { DatasetListPage } from '../../../pages/DatasetListPage';
+import { ExplorePage } from '../../../pages/ExplorePage';
+import { ConfirmDialog } from '../../../components/modals/ConfirmDialog';
+import { DeleteConfirmationModal } from '../../../components/modals/DeleteConfirmationModal';
+import { ImportDatasetModal } from '../../../components/modals/ImportDatasetModal';
+import { DuplicateDatasetModal } from '../../../components/modals/DuplicateDatasetModal';
+import { EditDatasetModal } from '../../../components/modals/EditDatasetModal';
+import { Toast } from '../../../components/core/Toast';
 import {
   apiDeleteDataset,
   apiGetDataset,
   apiPostVirtualDataset,
   getDatasetByName,
   ENDPOINTS,
-} from '../../helpers/api/dataset';
+} from '../../../helpers/api/dataset';
 import { createTestDataset } from './dataset-test-helpers';
 import {
   waitForGet,
   waitForPost,
   waitForPut,
-} from '../../helpers/api/intercepts';
+} from '../../../helpers/api/intercepts';
 import {
   expectStatusOneOf,
   expectValidExportZip,
-} from '../../helpers/api/assertions';
-import { TIMEOUT } from '../../utils/constants';
+} from '../../../helpers/api/assertions';
+import { TIMEOUT } from '../../../utils/constants';
 
 /**
  * Extend testWithAssets with datasetListPage navigation (beforeEach equivalent).
@@ -457,12 +458,11 @@ test.describe('import dataset', () => {
     testAssets,
   }) => {
     // Dataset name from fixture (test_netflix_1768502050965)
-    // Note: Fixture contains a Google Sheets dataset backed by shillelagh[gsheetsapi],
-    // which is a base dependency — import failure fails the test hard (no skip).
+    // Note: Fixture contains a Google Sheets dataset - test will skip if gsheets connector unavailable
     const importedDatasetName = 'test_netflix_1768502050965';
     const fixturePath = path.resolve(
       __dirname,
-      '../../fixtures/dataset_export.zip',
+      '../../../fixtures/dataset_export.zip',
     );
 
     // Cleanup: Delete any existing dataset with the same name from previous runs
@@ -518,12 +518,25 @@ test.describe('import dataset', () => {
       importResponse = await importResponsePromise;
     }
 
-    // Fail hard if dataset import fails.
-    // The fixture contains a gsheets dataset; shillelagh[gsheetsapi] is a base
-    // dependency (pyproject.toml), so the engine is always available in CI.
+    // Check final import response for gsheets connector errors
     if (!importResponse.ok()) {
       const errorBody = await importResponse.json().catch(() => ({}));
-      throw new Error(`Import failed: ${JSON.stringify(errorBody)}`);
+      const errorText = JSON.stringify(errorBody);
+      // Skip test if gsheets connector not installed
+      if (
+        errorText.includes('gsheets') ||
+        errorText.includes('No such DB engine') ||
+        errorText.includes('Could not load database driver')
+      ) {
+        await test.info().attach('skip-reason', {
+          body: `Import failed due to missing gsheets connector: ${errorText}`,
+          contentType: 'text/plain',
+        });
+        test.skip();
+        return;
+      }
+      // Re-throw other errors
+      throw new Error(`Import failed: ${errorText}`);
     }
 
     // Modal should close on success

superset-frontend/playwright/tests/experimental/dataset/dataset-test-helpers.ts

@@ -18,8 +18,8 @@
  */
 
 import type { Page, TestInfo } from '@playwright/test';
-import type { TestAssets } from '../../helpers/fixtures';
-import { createTestVirtualDataset } from '../../helpers/api/dataset';
+import type { TestAssets } from '../../../helpers/fixtures/testAssets';
+import { createTestVirtualDataset } from '../../../helpers/api/dataset';
 
 interface TestDatasetResult {
   id: number;

superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.ts

@@ -21,7 +21,6 @@
 import d3 from 'd3';
 import { extent as d3Extent } from 'd3-array';
 import {
-  ValueFormatter,
   getNumberFormatter,
   getSequentialSchemeRegistry,
   CategoricalColorNamespace,
@@ -61,8 +60,7 @@ interface CountryMapProps {
   height: number;
   country: string;
   linearColorScheme: string;
-  numberFormat?: string; // left for backward compatibility
-  formatter: ValueFormatter;
+  numberFormat: string;
   colorScheme: string;
   sliceId: number;
 }
@@ -76,12 +74,13 @@ function CountryMap(element: HTMLElement, props: CountryMapProps) {
     height,
     country,
     linearColorScheme,
-    formatter,
+    numberFormat,
     colorScheme,
     sliceId,
   } = props;
 
   const container = element;
+  const format = getNumberFormatter(numberFormat);
   const rawExtents = d3Extent(data, v => v.metric);
   const extents: [number, number] =
     rawExtents[0] != null && rawExtents[1] != null
@@ -183,7 +182,7 @@ function CountryMap(element: HTMLElement, props: CountryMapProps) {
       .style('top', `${position[1] + 30}px`)
       .style('left', `${position[0]}px`)
       .html(
-        `<div><strong>${getNameOfRegion(d)}</strong><br>${result.length > 0 ? formatter(result[0].metric) : ''}</div>`,
+        `<div><strong>${getNameOfRegion(d)}</strong><br>${result.length > 0 ? format(result[0].metric) : ''}</div>`,
       );
   };
 

superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts

@@ -69,7 +69,6 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        ['currency_format'],
         ['linear_color_scheme'],
       ],
     },

superset-frontend/plugins/legacy-plugin-chart-country-map/src/transformProps.ts

@@ -16,48 +16,26 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, getValueFormatter } from '@superset-ui/core';
+import { ChartProps } from '@superset-ui/core';
 
 export default function transformProps(chartProps: ChartProps) {
-  const { width, height, formData, queriesData, datasource } = chartProps;
+  const { width, height, formData, queriesData } = chartProps;
   const {
     linearColorScheme,
     numberFormat,
-    currencyFormat,
     selectCountry,
     colorScheme,
     sliceId,
-    metric,
   } = formData;
 
-  const {
-    currencyFormats = {},
-    columnFormats = {},
-    currencyCodeColumn,
-  } = datasource;
-  const { data, detected_currency: detectedCurrency } = queriesData[0];
-
-  const formatter = getValueFormatter(
-    metric,
-    currencyFormats,
-    columnFormats,
-    numberFormat,
-    currencyFormat,
-    undefined, // key - not needed for single-metric charts
-    data,
-    currencyCodeColumn,
-    detectedCurrency,
-  );
-
   return {
     width,
     height,
     data: queriesData[0].data,
     country: selectCountry ? String(selectCountry).toLowerCase() : null,
     linearColorScheme,
-    numberFormat, // left for backward compatibility
+    numberFormat,
     colorScheme,
     sliceId,
-    formatter,
   };
 }

superset-frontend/plugins/legacy-plugin-chart-country-map/test/CountryMap.test.tsx

@@ -93,7 +93,6 @@ describe('CountryMap (legacy d3)', () => {
         linearColorScheme="bnbColors"
         colorScheme=""
         numberFormat=".2f"
-        formatter={jest.fn().mockReturnValue('100')}
       />,
     );
 
@@ -116,7 +115,6 @@ describe('CountryMap (legacy d3)', () => {
         country="canada"
         linearColorScheme="bnbColors"
         colorScheme=""
-        formatter={jest.fn().mockReturnValue('100')}
       />,
     );
 
@@ -146,7 +144,6 @@ describe('CountryMap (legacy d3)', () => {
         country="canada"
         linearColorScheme="bnbColors"
         colorScheme=""
-        formatter={jest.fn().mockReturnValue('100')}
       />,
     );
 

superset-frontend/plugins/legacy-plugin-chart-map-box/CHANGELOG.md

@@ -0,0 +1,55 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.20.0](https://github.com/apache/superset/compare/v2021.41.0...v0.20.0) (2024-09-09)
+
+### Bug Fixes
+
+- **deckgl:** deckgl unable to load map ([#17851](https://github.com/apache/superset/issues/17851)) ([52f5dcb](https://github.com/apache/superset/commit/52f5dcb58eec7b188f4387b8781dcda4252a5680))
+- **explore:** Prevent shared controls from checking feature flags outside React render ([#21315](https://github.com/apache/superset/issues/21315)) ([2285ebe](https://github.com/apache/superset/commit/2285ebe72ec4edded6d195052740b7f9f13d1f1b))
+
+### Features
+
+- apply standardized form data to tier 2 charts ([#20530](https://github.com/apache/superset/issues/20530)) ([de524bc](https://github.com/apache/superset/commit/de524bc59f011fd361dcdb7d35c2cb51f7eba442))
+- **deckgl-map:** use an arbitraty Mabpox style URL ([#26027](https://github.com/apache/superset/issues/26027)) ([#26031](https://github.com/apache/superset/issues/26031)) ([af58784](https://github.com/apache/superset/commit/af587840403d83a7da7fb0f57bc10ad2335d4eeb))
+
+# [0.19.0](https://github.com/apache/superset/compare/v2021.41.0...v0.19.0) (2024-09-07)
+
+### Bug Fixes
+
+- **deckgl:** deckgl unable to load map ([#17851](https://github.com/apache/superset/issues/17851)) ([52f5dcb](https://github.com/apache/superset/commit/52f5dcb58eec7b188f4387b8781dcda4252a5680))
+- **explore:** Prevent shared controls from checking feature flags outside React render ([#21315](https://github.com/apache/superset/issues/21315)) ([2285ebe](https://github.com/apache/superset/commit/2285ebe72ec4edded6d195052740b7f9f13d1f1b))
+
+### Features
+
+- apply standardized form data to tier 2 charts ([#20530](https://github.com/apache/superset/issues/20530)) ([de524bc](https://github.com/apache/superset/commit/de524bc59f011fd361dcdb7d35c2cb51f7eba442))
+- **deckgl-map:** use an arbitraty Mabpox style URL ([#26027](https://github.com/apache/superset/issues/26027)) ([#26031](https://github.com/apache/superset/issues/26031)) ([af58784](https://github.com/apache/superset/commit/af587840403d83a7da7fb0f57bc10ad2335d4eeb))
+
+# [0.18.0](https://github.com/apache-superset/superset-ui/compare/v0.17.87...v0.18.0) (2021-08-30)
+
+**Note:** Version bump only for package @superset-ui/legacy-plugin-chart-map-box
+
+## [0.17.61](https://github.com/apache-superset/superset-ui/compare/v0.17.60...v0.17.61) (2021-07-02)
+
+**Note:** Version bump only for package @superset-ui/legacy-plugin-chart-map-box

superset-frontend/plugins/legacy-plugin-chart-map-box/README.md

@@ -0,0 +1,52 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+## @superset-ui/legacy-plugin-chart-map-box
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-map-box.svg?style=flat)](https://www.npmjs.com/package/@superset-ui/legacy-plugin-chart-map-box)
+[![Libraries.io](https://img.shields.io/librariesio/release/npm/%40superset-ui%2Flegacy-plugin-chart-map-box?style=flat)](https://libraries.io/npm/@superset-ui%2Flegacy-plugin-chart-map-box)
+
+This plugin provides MapBox for Superset.
+
+### Usage
+
+Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
+lookup this chart throughout the app.
+
+```js
+import MapBoxChartPlugin from '@superset-ui/legacy-plugin-chart-map-box';
+
+new MapBoxChartPlugin().configure({ key: 'map-box' }).register();
+```
+
+Then use it via `SuperChart`. See
+[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-map-box)
+for more details.
+
+```js
+<SuperChart
+  chartType="map-box"
+  width={600}
+  height={600}
+  formData={...}
+  queriesData={[{
+    data: {...},
+  }]}
+/>
+```

superset-frontend/plugins/legacy-plugin-chart-map-box/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@superset-ui/plugin-chart-point-cluster-map",
-  "version": "1.0.0",
-  "description": "Superset Chart Plugin - Point Cluster Map",
+  "name": "@superset-ui/legacy-plugin-chart-map-box",
+  "version": "0.20.3",
+  "description": "Superset Legacy Chart - MapBox",
   "keywords": [
     "superset"
   ],
@@ -12,7 +12,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/apache/superset.git",
-    "directory": "superset-frontend/plugins/plugin-chart-point-cluster-map"
+    "directory": "superset-frontend/plugins/legacy-plugin-chart-map-box"
   },
   "license": "Apache-2.0",
   "author": "Superset",
@@ -27,17 +27,16 @@
   ],
   "dependencies": {
     "@math.gl/web-mercator": "^4.1.0",
-    "mapbox-gl": "^3.0.0",
-    "maplibre-gl": "^5.0.0",
-    "react-map-gl": "^8.0.0",
+    "prop-types": "^15.8.1",
+    "react-map-gl": "^6.1.19",
     "supercluster": "^8.0.1"
   },
   "peerDependencies": {
-    "@apache-superset/core": "*",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "react": "^17.0.2 || ^19.0.0",
-    "react-dom": "^17.0.2 || ^19.0.0"
+    "@apache-superset/core": "*",
+    "mapbox-gl": "*",
+    "react": "^17.0.2"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.css

@@ -16,6 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-.maplibre .slice_container div {
+.mapbox .slice_container div {
   padding-top: 0px;
 }

superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.tsx

@@ -0,0 +1,243 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable react/jsx-sort-default-props, react/sort-prop-types */
+/* eslint-disable react/forbid-prop-types, react/require-default-props */
+import { Component } from 'react';
+import MapGL from 'react-map-gl';
+import { WebMercatorViewport } from '@math.gl/web-mercator';
+import ScatterPlotGlowOverlay from './ScatterPlotGlowOverlay';
+import './MapBox.css';
+
+const NOOP = () => {};
+export const DEFAULT_MAX_ZOOM = 16;
+export const DEFAULT_POINT_RADIUS = 60;
+
+interface Viewport {
+  longitude: number;
+  latitude: number;
+  zoom: number;
+  isDragging?: boolean;
+}
+
+interface Clusterer {
+  getClusters(bbox: number[], zoom: number): GeoJSONLocation[];
+}
+
+interface GeoJSONLocation {
+  geometry: {
+    coordinates: [number, number];
+  };
+  properties: Record<string, number | string | boolean | null | undefined>;
+}
+
+interface MapBoxProps {
+  width?: number;
+  height?: number;
+  aggregatorName?: string;
+  clusterer: Clusterer; // Required - used for getClusters()
+  globalOpacity?: number;
+  hasCustomMetric?: boolean;
+  mapStyle?: string;
+  mapboxApiKey: string;
+  onViewportChange?: (viewport: Viewport) => void;
+  pointRadius?: number;
+  pointRadiusUnit?: string;
+  renderWhileDragging?: boolean;
+  rgb?: (string | number)[];
+  bounds?: [[number, number], [number, number]]; // May be undefined for empty datasets
+  viewportLongitude?: number;
+  viewportLatitude?: number;
+  viewportZoom?: number;
+}
+
+interface MapBoxState {
+  viewport: Viewport;
+}
+
+const defaultProps: Partial<MapBoxProps> = {
+  width: 400,
+  height: 400,
+  globalOpacity: 1,
+  onViewportChange: NOOP,
+  pointRadius: DEFAULT_POINT_RADIUS,
+  pointRadiusUnit: 'Pixels',
+};
+
+class MapBox extends Component<MapBoxProps, MapBoxState> {
+  static defaultProps = defaultProps;
+
+  constructor(props: MapBoxProps) {
+    super(props);
+
+    const fitBounds = this.computeFitBoundsViewport();
+
+    this.state = {
+      viewport: this.mergeViewportWithProps(fitBounds),
+    };
+    this.handleViewportChange = this.handleViewportChange.bind(this);
+  }
+
+  handleViewportChange(viewport: Viewport) {
+    this.setState({ viewport });
+    const { onViewportChange } = this.props;
+    onViewportChange!(viewport);
+  }
+
+  mergeViewportWithProps(
+    fitBounds: Viewport,
+    viewport: Viewport = fitBounds,
+    props: MapBoxProps = this.props,
+    useFitBoundsForUnset = true,
+  ): Viewport {
+    const { viewportLongitude, viewportLatitude, viewportZoom } = props;
+
+    return {
+      ...viewport,
+      longitude:
+        viewportLongitude ??
+        (useFitBoundsForUnset ? fitBounds.longitude : viewport.longitude),
+      latitude:
+        viewportLatitude ??
+        (useFitBoundsForUnset ? fitBounds.latitude : viewport.latitude),
+      zoom:
+        viewportZoom ?? (useFitBoundsForUnset ? fitBounds.zoom : viewport.zoom),
+    };
+  }
+
+  computeFitBoundsViewport(): Viewport {
+    const { width = 400, height = 400, bounds } = this.props;
+    if (bounds && bounds[0] && bounds[1]) {
+      const mercator = new WebMercatorViewport({ width, height }).fitBounds(
+        bounds,
+      );
+      return {
+        latitude: mercator.latitude,
+        longitude: mercator.longitude,
+        zoom: mercator.zoom,
+      };
+    }
+    return { latitude: 0, longitude: 0, zoom: 1 };
+  }
+
+  componentDidUpdate(prevProps: MapBoxProps) {
+    const { viewport } = this.state;
+    const fitBoundsInputsChanged =
+      prevProps.width !== this.props.width ||
+      prevProps.height !== this.props.height ||
+      prevProps.bounds !== this.props.bounds;
+    const viewportPropsChanged =
+      prevProps.viewportLongitude !== this.props.viewportLongitude ||
+      prevProps.viewportLatitude !== this.props.viewportLatitude ||
+      prevProps.viewportZoom !== this.props.viewportZoom;
+
+    if (!fitBoundsInputsChanged && !viewportPropsChanged) {
+      return;
+    }
+
+    const fitBounds = this.computeFitBoundsViewport();
+    const nextViewport = this.mergeViewportWithProps(
+      fitBounds,
+      viewport,
+      this.props,
+      fitBoundsInputsChanged || viewportPropsChanged,
+    );
+
+    const viewportChanged =
+      nextViewport.longitude !== viewport.longitude ||
+      nextViewport.latitude !== viewport.latitude ||
+      nextViewport.zoom !== viewport.zoom;
+
+    if (viewportChanged) {
+      this.setState({ viewport: nextViewport });
+    }
+  }
+
+  render() {
+    const {
+      width,
+      height,
+      aggregatorName,
+      clusterer,
+      globalOpacity,
+      mapStyle,
+      mapboxApiKey,
+      pointRadius,
+      pointRadiusUnit,
+      renderWhileDragging,
+      rgb,
+      hasCustomMetric,
+      bounds,
+    } = this.props;
+    const { viewport } = this.state;
+    const isDragging =
+      viewport.isDragging === undefined ? false : viewport.isDragging;
+
+    // Compute the clusters based on the original bounds and current zoom level. Note when zoom/pan
+    // to an area outside of the original bounds, no additional queries are made to the backend to
+    // retrieve additional data.
+    // add this variable to widen the visible area
+    const offsetHorizontal = ((width ?? 400) * 0.5) / 100;
+    const offsetVertical = ((height ?? 400) * 0.5) / 100;
+
+    // Guard against empty datasets where bounds may be undefined
+    const bbox =
+      bounds && bounds[0] && bounds[1]
+        ? [
+            bounds[0][0] - offsetHorizontal,
+            bounds[0][1] - offsetVertical,
+            bounds[1][0] + offsetHorizontal,
+            bounds[1][1] + offsetVertical,
+          ]
+        : [-180, -90, 180, 90]; // Default to world bounds
+
+    const clusters = clusterer.getClusters(bbox, Math.round(viewport.zoom));
+
+    return (
+      <MapGL
+        {...viewport}
+        mapStyle={mapStyle}
+        width={width}
+        height={height}
+        mapboxApiAccessToken={mapboxApiKey}
+        onViewportChange={this.handleViewportChange}
+        preserveDrawingBuffer
+      >
+        <ScatterPlotGlowOverlay
+          {...viewport}
+          isDragging={isDragging}
+          locations={clusters}
+          dotRadius={pointRadius}
+          pointRadiusUnit={pointRadiusUnit}
+          rgb={rgb}
+          globalOpacity={globalOpacity}
+          compositeOperation="screen"
+          renderWhileDragging={renderWhileDragging}
+          aggregation={hasCustomMetric ? aggregatorName : undefined}
+          lngLatAccessor={(location: GeoJSONLocation) => {
+            const { coordinates } = location.geometry;
+
+            return [coordinates[0], coordinates[1]];
+          }}
+        />
+      </MapGL>
+    );
+  }
+}
+
+export default MapBox;

superset-frontend/plugins/legacy-plugin-chart-map-box/src/ScatterPlotGlowOverlay.tsx

@@ -0,0 +1,425 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable react/require-default-props */
+import { PureComponent } from 'react';
+import { CanvasOverlay } from 'react-map-gl';
+import { kmToPixels, MILES_PER_KM } from './utils/geo';
+import roundDecimal from './utils/roundDecimal';
+import luminanceFromRGB from './utils/luminanceFromRGB';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+// Shared radius bounds keep cluster and point sizing in sync.
+export const MIN_CLUSTER_RADIUS_RATIO = 1 / 6;
+export const MAX_POINT_RADIUS_RATIO = 1 / 3;
+
+interface GeoJSONLocation {
+  geometry: {
+    coordinates: [number, number];
+  };
+  properties: Record<string, number | string | boolean | null | undefined>;
+}
+
+interface RedrawParams {
+  width: number;
+  height: number;
+  ctx: CanvasRenderingContext2D;
+  isDragging: boolean;
+  project: (lngLat: [number, number]) => [number, number];
+}
+
+interface DrawTextOptions {
+  fontHeight?: number;
+  label?: string | number;
+  radius?: number;
+  rgb?: (string | number)[];
+  shadow?: boolean;
+}
+
+interface ScatterPlotGlowOverlayProps {
+  aggregation?: string;
+  compositeOperation?: string;
+  dotRadius?: number;
+  globalOpacity?: number;
+  lngLatAccessor?: (location: GeoJSONLocation) => [number, number];
+  locations: GeoJSONLocation[];
+  pointRadiusUnit?: string;
+  renderWhileDragging?: boolean;
+  rgb?: (string | number)[];
+  zoom?: number;
+  isDragging?: boolean;
+}
+
+const defaultProps: Partial<ScatterPlotGlowOverlayProps> = {
+  // Same as browser default.
+  compositeOperation: 'source-over',
+  dotRadius: 4,
+  lngLatAccessor: (location: GeoJSONLocation) => [
+    location.geometry.coordinates[0],
+    location.geometry.coordinates[1],
+  ],
+  renderWhileDragging: true,
+};
+
+const computeClusterLabel = (
+  properties: Record<string, number | string | boolean | null | undefined>,
+  aggregation: string | undefined,
+): number | string => {
+  const count = properties.point_count as number;
+  if (!aggregation) {
+    return count;
+  }
+  if (aggregation === 'sum' || aggregation === 'min' || aggregation === 'max') {
+    return properties[aggregation] as number;
+  }
+  const { sum } = properties as { sum: number };
+  const mean = sum / count;
+  if (aggregation === 'mean') {
+    return Math.round(100 * mean) / 100;
+  }
+  const { squaredSum } = properties as { squaredSum: number };
+  const variance = squaredSum / count - (sum / count) ** 2;
+  if (aggregation === 'var') {
+    return Math.round(100 * variance) / 100;
+  }
+  if (aggregation === 'stdev') {
+    return Math.round(100 * Math.sqrt(variance)) / 100;
+  }
+
+  // fallback to point_count, this really shouldn't happen
+  return count;
+};
+
+class ScatterPlotGlowOverlay extends PureComponent<ScatterPlotGlowOverlayProps> {
+  static defaultProps = defaultProps;
+
+  constructor(props: ScatterPlotGlowOverlayProps) {
+    super(props);
+    this.redraw = this.redraw.bind(this);
+  }
+
+  drawText(
+    ctx: CanvasRenderingContext2D,
+    pixel: [number, number],
+    options: DrawTextOptions = {},
+  ) {
+    const IS_DARK_THRESHOLD = 110;
+    const {
+      fontHeight = 0,
+      label = '',
+      radius = 0,
+      rgb = [0, 0, 0],
+      shadow = false,
+    } = options;
+    const maxWidth = radius * 1.8;
+    const luminance = luminanceFromRGB(
+      rgb[1] as number,
+      rgb[2] as number,
+      rgb[3] as number,
+    );
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = luminance <= IS_DARK_THRESHOLD ? 'white' : 'black';
+    ctx.font = `${fontHeight}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    if (shadow) {
+      ctx.shadowBlur = 15;
+      ctx.shadowColor = luminance <= IS_DARK_THRESHOLD ? 'black' : '';
+    }
+
+    const textWidth = ctx.measureText(String(label)).width;
+    if (textWidth > maxWidth) {
+      const scale = fontHeight / textWidth;
+      ctx.font = `${scale * maxWidth}px sans-serif`;
+    }
+
+    const { compositeOperation } = this.props;
+
+    ctx.fillText(String(label), pixel[0], pixel[1]);
+    ctx.globalCompositeOperation = (compositeOperation ??
+      'source-over') as GlobalCompositeOperation;
+    ctx.shadowBlur = 0;
+    ctx.shadowColor = '';
+  }
+
+  // Modified: https://github.com/uber/react-map-gl/blob/master/overlays/scatterplot.react.js
+  redraw({ width, height, ctx, isDragging, project }: RedrawParams) {
+    const {
+      aggregation,
+      compositeOperation,
+      dotRadius,
+      globalOpacity,
+      lngLatAccessor,
+      locations,
+      pointRadiusUnit,
+      renderWhileDragging,
+      rgb,
+      zoom,
+    } = this.props;
+
+    const radius = dotRadius ?? 4;
+    const clusterLabelMap: (number | string)[] = [];
+
+    locations.forEach((location, i) => {
+      if (location.properties.cluster) {
+        clusterLabelMap[i] = computeClusterLabel(
+          location.properties,
+          aggregation,
+        );
+      }
+    });
+
+    const finiteClusterLabels = clusterLabelMap
+      .map(value => Number(value))
+      .filter(value => Number.isFinite(value));
+    const safeMaxAbsLabel =
+      finiteClusterLabels.length > 0
+        ? Math.max(
+            Math.max(...finiteClusterLabels.map(value => Math.abs(value))),
+            1,
+          )
+        : 1;
+
+    // Calculate min/max radius values for Pixels mode scaling
+    let minRadiusValue = Infinity;
+    let maxRadiusValue = -Infinity;
+    if (pointRadiusUnit === 'Pixels') {
+      locations.forEach(location => {
+        // Accept both null and undefined as "no value" and coerce potential numeric strings
+        if (
+          !location.properties.cluster &&
+          location.properties.radius != null
+        ) {
+          const radiusValueRaw = location.properties.radius;
+          const radiusValue =
+            typeof radiusValueRaw === 'string' && radiusValueRaw.trim() === ''
+              ? null
+              : Number(radiusValueRaw);
+          if (radiusValue != null && Number.isFinite(radiusValue)) {
+            minRadiusValue = Math.min(minRadiusValue, radiusValue);
+            maxRadiusValue = Math.max(maxRadiusValue, radiusValue);
+          }
+        }
+      });
+    }
+
+    ctx.clearRect(0, 0, width, height);
+    ctx.globalCompositeOperation = (compositeOperation ??
+      'source-over') as GlobalCompositeOperation;
+
+    if ((renderWhileDragging || !isDragging) && locations) {
+      locations.forEach(function _forEach(
+        this: ScatterPlotGlowOverlay,
+        location: GeoJSONLocation,
+        i: number,
+      ) {
+        const pixel = project(lngLatAccessor!(location)) as [number, number];
+        const pixelRounded: [number, number] = [
+          roundDecimal(pixel[0], 1),
+          roundDecimal(pixel[1], 1),
+        ];
+
+        if (
+          pixelRounded[0] + radius >= 0 &&
+          pixelRounded[0] - radius < width &&
+          pixelRounded[1] + radius >= 0 &&
+          pixelRounded[1] - radius < height
+        ) {
+          ctx.beginPath();
+          if (location.properties.cluster) {
+            const clusterLabel = clusterLabelMap[i];
+            // Validate clusterLabel is a finite number before using it for radius calculation
+            const numericLabel = Number(clusterLabel);
+            const safeNumericLabel = Number.isFinite(numericLabel)
+              ? numericLabel
+              : 0;
+            const minClusterRadius =
+              pointRadiusUnit === 'Pixels'
+                ? radius * MAX_POINT_RADIUS_RATIO
+                : radius * MIN_CLUSTER_RADIUS_RATIO;
+            const ratio = Math.abs(safeNumericLabel) / safeMaxAbsLabel;
+            const scaledRadius = roundDecimal(
+              minClusterRadius + ratio ** 0.5 * (radius - minClusterRadius),
+              1,
+            );
+            const fontHeight = roundDecimal(scaledRadius * 0.5, 1);
+            const [x, y] = pixelRounded;
+            const gradient = ctx.createRadialGradient(
+              x,
+              y,
+              scaledRadius,
+              x,
+              y,
+              0,
+            );
+
+            gradient.addColorStop(
+              1,
+              `rgba(${rgb![1]}, ${rgb![2]}, ${rgb![3]}, ${0.8 * (globalOpacity ?? 1)})`,
+            );
+            gradient.addColorStop(
+              0,
+              `rgba(${rgb![1]}, ${rgb![2]}, ${rgb![3]}, 0)`,
+            );
+            ctx.arc(
+              pixelRounded[0],
+              pixelRounded[1],
+              scaledRadius,
+              0,
+              Math.PI * 2,
+            );
+            ctx.fillStyle = gradient;
+            ctx.fill();
+
+            if (Number.isFinite(safeNumericLabel)) {
+              let label: string | number = clusterLabel;
+              const absLabel = Math.abs(safeNumericLabel);
+              const sign = safeNumericLabel < 0 ? '-' : '';
+              if (absLabel >= 10000) {
+                label = `${sign}${Math.round(absLabel / 1000)}k`;
+              } else if (absLabel >= 1000) {
+                label = `${sign}${Math.round(absLabel / 100) / 10}k`;
+              }
+              this.drawText(ctx, pixelRounded, {
+                fontHeight,
+                label,
+                radius: scaledRadius,
+                rgb,
+                shadow: true,
+              });
+            }
+          } else {
+            const defaultRadius = radius * MIN_CLUSTER_RADIUS_RATIO;
+            const rawRadius = location.properties.radius;
+            const numericRadiusProperty =
+              rawRadius != null &&
+              !(typeof rawRadius === 'string' && rawRadius.trim() === '')
+                ? Number(rawRadius)
+                : null;
+            const radiusProperty =
+              numericRadiusProperty != null &&
+              Number.isFinite(numericRadiusProperty)
+                ? numericRadiusProperty
+                : null;
+            const pointMetric = location.properties.metric ?? null;
+            let pointRadius: number = radiusProperty ?? defaultRadius;
+            let pointLabel: string | number | undefined;
+
+            if (radiusProperty != null) {
+              const pointLatitude = lngLatAccessor!(location)[1];
+              if (pointRadiusUnit === 'Kilometers') {
+                pointLabel = `${roundDecimal(pointRadius, 2)}km`;
+                pointRadius = kmToPixels(pointRadius, pointLatitude, zoom ?? 0);
+              } else if (pointRadiusUnit === 'Miles') {
+                pointLabel = `${roundDecimal(pointRadius, 2)}mi`;
+                pointRadius = kmToPixels(
+                  pointRadius * MILES_PER_KM,
+                  pointLatitude,
+                  zoom ?? 0,
+                );
+              } else if (pointRadiusUnit === 'Pixels') {
+                // Scale pixel values to a reasonable range (radius/6 to radius/3)
+                // This ensures points are visible and proportional to their values
+                const MIN_POINT_RADIUS = radius * MIN_CLUSTER_RADIUS_RATIO;
+                const MAX_POINT_RADIUS = radius * MAX_POINT_RADIUS_RATIO;
+
+                if (
+                  Number.isFinite(minRadiusValue) &&
+                  Number.isFinite(maxRadiusValue) &&
+                  maxRadiusValue > minRadiusValue
+                ) {
+                  // Normalize the value to 0-1 range, then scale to pixel range
+                  const numericPointRadius = Number(pointRadius);
+                  if (!Number.isFinite(numericPointRadius)) {
+                    // fallback to minimum visible size when the value is not a finite number
+                    pointRadius = MIN_POINT_RADIUS;
+                  } else {
+                    const normalizedValueRaw =
+                      (numericPointRadius - minRadiusValue) /
+                      (maxRadiusValue - minRadiusValue);
+                    const normalizedValue = Math.max(
+                      0,
+                      Math.min(1, normalizedValueRaw),
+                    );
+                    pointRadius =
+                      MIN_POINT_RADIUS +
+                      normalizedValue * (MAX_POINT_RADIUS - MIN_POINT_RADIUS);
+                  }
+                  pointLabel = `${roundDecimal(radiusProperty, 2)}`;
+                } else if (
+                  Number.isFinite(minRadiusValue) &&
+                  minRadiusValue === maxRadiusValue
+                ) {
+                  // All values are the same, use a fixed medium size
+                  pointRadius = (MIN_POINT_RADIUS + MAX_POINT_RADIUS) / 2;
+                  pointLabel = `${roundDecimal(radiusProperty, 2)}`;
+                } else {
+                  // Use raw pixel values if they're already in a reasonable range
+                  pointRadius = Math.max(
+                    MIN_POINT_RADIUS,
+                    Math.min(pointRadius, MAX_POINT_RADIUS),
+                  );
+                  pointLabel = `${roundDecimal(radiusProperty, 2)}`;
+                }
+              }
+            }
+
+            if (pointMetric !== null) {
+              const numericMetric = parseFloat(String(pointMetric));
+              pointLabel = Number.isFinite(numericMetric)
+                ? roundDecimal(numericMetric, 2)
+                : String(pointMetric);
+            }
+
+            // Fall back to default points if pointRadius wasn't a numerical column
+            if (!pointRadius) {
+              pointRadius = defaultRadius;
+            }
+
+            ctx.arc(
+              pixelRounded[0],
+              pixelRounded[1],
+              roundDecimal(pointRadius, 1),
+              0,
+              Math.PI * 2,
+            );
+            ctx.fillStyle = `rgba(${rgb![1]}, ${rgb![2]}, ${rgb![3]}, ${globalOpacity})`;
+            ctx.fill();
+
+            if (pointLabel !== undefined) {
+              this.drawText(ctx, pixelRounded, {
+                fontHeight: roundDecimal(pointRadius, 1),
+                label: pointLabel,
+                radius: pointRadius,
+                rgb,
+                shadow: false,
+              });
+            }
+          }
+        }
+      }, this);
+    }
+  }
+
+  render() {
+    return <CanvasOverlay redraw={this.redraw} />;
+  }
+}
+
+export default ScatterPlotGlowOverlay;

superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { t } from '@apache-superset/core/translation';
+import { validateMapboxStylesUrl } from '@superset-ui/core';
 import {
   columnChoices,
   ControlPanelConfig,
@@ -28,12 +29,12 @@ import {
 const columnsConfig = sharedControls.entity;
 
 const colorChoices = [
-  ['#008b8b', t('Dark Cyan')],
-  ['#800080', t('Purple')],
-  ['#ffd700', t('Gold')],
-  ['#454545', t('Dim Gray')],
-  ['#dc143c', t('Crimson')],
-  ['#228b22', t('Forest Green')],
+  ['rgb(0, 139, 139)', t('Dark Cyan')],
+  ['rgb(128, 0, 128)', t('Purple')],
+  ['rgb(255, 215, 0)', t('Gold')],
+  ['rgb(69, 69, 69)', t('Dim Gray')],
+  ['rgb(220, 20, 60)', t('Crimson')],
+  ['rgb(34, 139, 34)', t('Forest Green')],
 ];
 
 const config: ControlPanelConfig = {
@@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
                   'Either a numerical column or `Auto`, which scales the point based ' +
                   'on the largest cluster',
               ),
-              mapStateToProps: (state: any) => {
+              mapStateToProps: state => {
                 const datasourceChoices = columnChoices(state.datasource);
                 const choices: [string, string][] = [['Auto', t('Auto')]];
                 return {
@@ -144,7 +145,7 @@ const config: ControlPanelConfig = {
       controlSetRows: [
         [
           {
-            name: 'map_label',
+            name: 'mapbox_label',
             config: {
               type: 'SelectControl',
               multi: true,
@@ -156,7 +157,7 @@ const config: ControlPanelConfig = {
                   'Non-numerical columns will be used to label points. ' +
                   'Leave empty to get a count of points in each cluster.',
               ),
-              mapStateToProps: (state: any) => ({
+              mapStateToProps: state => ({
                 choices: columnChoices(state.datasource),
               }),
             },
@@ -188,66 +189,21 @@ const config: ControlPanelConfig = {
       ],
     },
     {
-      label: t('Map'),
-      tabOverride: 'customize',
-      expanded: true,
+      label: t('Visual Tweaks'),
       controlSetRows: [
         [
           {
-            name: 'map_renderer',
+            name: 'render_while_dragging',
             config: {
-              type: 'SelectControl',
-              label: t('Map Renderer'),
-              clearable: false,
-              renderTrigger: true,
-              choices: [
-                ['maplibre', t('MapLibre (open-source)')],
-                ['mapbox', t('Mapbox (API key required)')],
-              ],
-              default: 'maplibre',
+              type: 'CheckboxControl',
+              label: t('Live render'),
+              default: true,
               description: t(
-                'MapLibre is open-source and requires no API key. Mapbox requires MAPBOX_API_KEY to be configured on the server.',
+                'Points and clusters will update as the viewport is being changed',
               ),
             },
           },
         ],
-        [
-          {
-            name: 'maplibre_style',
-            config: {
-              type: 'SelectControl',
-              label: t('Map Style'),
-              clearable: false,
-              renderTrigger: true,
-              freeForm: true,
-              choices: [
-                [
-                  'https://tiles.openfreemap.org/styles/liberty',
-                  t('Liberty (OpenFreeMap)'),
-                ],
-                [
-                  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
-                  t('Light (Carto)'),
-                ],
-                [
-                  'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-                  t('Dark (Carto)'),
-                ],
-                [
-                  'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
-                  t('Streets (Carto)'),
-                ],
-              ],
-              default: 'https://tiles.openfreemap.org/styles/liberty',
-              description: t(
-                'Base layer map style. See MapLibre documentation: %s',
-                'https://maplibre.org/maplibre-style-spec/',
-              ),
-              visibility: ({ controls }: any) =>
-                controls?.map_renderer?.value !== 'mapbox',
-            },
-          },
-        ],
         [
           {
             name: 'mapbox_style',
@@ -257,42 +213,22 @@ const config: ControlPanelConfig = {
               clearable: false,
               renderTrigger: true,
               freeForm: true,
+              validators: [validateMapboxStylesUrl],
               choices: [
-                ['mapbox://styles/mapbox/streets-v12', t('Streets')],
-                ['mapbox://styles/mapbox/outdoors-v12', t('Outdoors')],
-                ['mapbox://styles/mapbox/light-v11', t('Light')],
-                ['mapbox://styles/mapbox/dark-v11', t('Dark')],
-                ['mapbox://styles/mapbox/satellite-v9', t('Satellite')],
+                ['mapbox://styles/mapbox/streets-v9', t('Streets')],
+                ['mapbox://styles/mapbox/dark-v9', t('Dark')],
+                ['mapbox://styles/mapbox/light-v9', t('Light')],
                 [
-                  'mapbox://styles/mapbox/satellite-streets-v12',
+                  'mapbox://styles/mapbox/satellite-streets-v9',
                   t('Satellite Streets'),
                 ],
+                ['mapbox://styles/mapbox/satellite-v9', t('Satellite')],
+                ['mapbox://styles/mapbox/outdoors-v9', t('Outdoors')],
               ],
-              default: 'mapbox://styles/mapbox/light-v11',
+              default: 'mapbox://styles/mapbox/light-v9',
               description: t(
-                'Base layer map style. Accepts a Mapbox style URL (mapbox://styles/...).',
-              ),
-              visibility: ({ controls }: any) =>
-                controls?.map_renderer?.value === 'mapbox',
-            },
-          },
-        ],
-      ],
-    },
-    {
-      label: t('Visual Tweaks'),
-      tabOverride: 'customize',
-      controlSetRows: [
-        [
-          {
-            name: 'render_while_dragging',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Live render'),
-              renderTrigger: true,
-              default: true,
-              description: t(
-                'Points and clusters will update as the viewport is being changed',
+                'Base layer map style. See Mapbox documentation: %s',
+                'https://docs.mapbox.com/help/glossary/style-url/',
               ),
             },
           },
@@ -303,9 +239,9 @@ const config: ControlPanelConfig = {
             config: {
               type: 'TextControl',
               label: t('Opacity'),
-              renderTrigger: true,
               default: 1,
               isFloat: true,
+              renderTrigger: true,
               description: t(
                 'Opacity of all clusters, points, and labels. Between 0 and 1.',
               ),
@@ -314,11 +250,10 @@ const config: ControlPanelConfig = {
         ],
         [
           {
-            name: 'map_color',
+            name: 'mapbox_color',
             config: {
               type: 'SelectControl',
               freeForm: true,
-              renderTrigger: true,
               label: t('RGB Color'),
               default: colorChoices[0][0],
               choices: colorChoices,
@@ -343,6 +278,7 @@ const config: ControlPanelConfig = {
               isFloat: true,
               description: t('Longitude of default viewport'),
               places: 8,
+              // Viewport longitude changes shouldn't prompt user to re-run query
               dontRefreshOnChange: true,
             },
           },
@@ -356,6 +292,7 @@ const config: ControlPanelConfig = {
               isFloat: true,
               description: t('Latitude of default viewport'),
               places: 8,
+              // Viewport latitude changes shouldn't prompt user to re-run query
               dontRefreshOnChange: true,
             },
           },
@@ -371,6 +308,7 @@ const config: ControlPanelConfig = {
               default: '',
               description: t('Zoom level of the map'),
               places: 8,
+              // Viewport zoom shouldn't prompt user to re-run query
               dontRefreshOnChange: true,
             },
           },
@@ -387,7 +325,7 @@ const config: ControlPanelConfig = {
       ),
     },
   },
-  formDataOverrides: (formData: any) => ({
+  formDataOverrides: formData => ({
     ...formData,
     groupby: getStandardizedControls().popAllColumns(),
   }),

superset-frontend/plugins/legacy-plugin-chart-map-box/src/index.ts

@@ -28,30 +28,31 @@ import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
-  credits: ['https://maplibre.org/'],
+  credits: ['https://www.mapbox.com/mapbox-gl-js/api/'],
   description: '',
   exampleGallery: [
     { url: example1, urlDark: example1Dark, caption: t('Light mode') },
     { url: example2, urlDark: example2Dark, caption: t('Dark mode') },
   ],
-  name: t('Point Cluster Map'),
+  name: t('MapBox'),
   tags: [
     t('Business'),
     t('Intensity'),
+    t('Legacy'),
     t('Density'),
     t('Scatter'),
     t('Transformable'),
   ],
   thumbnail,
   thumbnailDark,
+  useLegacyApi: true,
 });
 
-export default class ScatterMapChartPlugin extends ChartPlugin {
+export default class MapBoxChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('./MapLibre'),
+      loadChart: () => import('./MapBox'),
       loadTransformProps: () => import('./transformProps'),
-      loadBuildQuery: () => import('./buildQuery'),
       metadata,
       controlPanel,
     });

superset-frontend/plugins/legacy-plugin-chart-map-box/src/stories/MapBox.stories.tsx

@@ -0,0 +1,107 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable no-magic-numbers */
+import { SuperChart } from '@superset-ui/core';
+import { useTheme } from '@apache-superset/core/theme';
+import MapBoxChartPlugin from '@superset-ui/legacy-plugin-chart-map-box';
+import { withResizableChartDemo } from '@storybook-shared';
+import { generateData } from './data';
+
+new MapBoxChartPlugin().configure({ key: 'map-box' }).register();
+
+export default {
+  title: 'Legacy Chart Plugins/legacy-plugin-chart-map-box',
+  decorators: [withResizableChartDemo],
+  args: {
+    clusteringRadius: 60,
+    globalOpacity: 1,
+    pointRadius: 'Auto',
+    renderWhileDragging: true,
+  },
+  argTypes: {
+    clusteringRadius: {
+      control: { type: 'range', min: 0, max: 200, step: 10 },
+      description: 'Radius in pixels for clustering points',
+    },
+    globalOpacity: {
+      control: { type: 'range', min: 0, max: 1, step: 0.1 },
+      description: 'Opacity of map markers',
+    },
+    pointRadius: {
+      control: 'select',
+      options: ['Auto', 1, 2, 5, 10, 20, 50],
+      description: 'Size of point markers',
+    },
+    renderWhileDragging: {
+      control: 'boolean',
+      description: 'Render markers while dragging the map',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Note: This chart requires a Mapbox API key to display. Without a valid key, the map background will not render.',
+      },
+    },
+  },
+};
+
+export const MapBoxViz = ({
+  clusteringRadius,
+  globalOpacity,
+  pointRadius,
+  renderWhileDragging,
+  width,
+  height,
+}: {
+  clusteringRadius: number;
+  globalOpacity: number;
+  pointRadius: string | number;
+  renderWhileDragging: boolean;
+  width: number;
+  height: number;
+}) => {
+  const theme = useTheme();
+  return (
+    <SuperChart
+      chartType="map-box"
+      width={width}
+      height={height}
+      queriesData={[{ data: generateData(theme) }]}
+      formData={{
+        all_columns_x: 'LON',
+        all_columns_y: 'LAT',
+        clustering_radius: String(clusteringRadius),
+        global_opacity: globalOpacity,
+        mapbox_color: 'rgb(244, 176, 42)',
+        mapbox_label: [],
+        mapbox_style: 'mapbox://styles/mapbox/light-v9',
+        pandas_aggfunc: 'sum',
+        point_radius: pointRadius,
+        point_radius_unit: 'Pixels',
+        render_while_dragging: renderWhileDragging,
+        viewport_latitude: 37.78711146014447,
+        viewport_longitude: -122.37633433151713,
+        viewport_zoom: 10.026425338292782,
+      }}
+    />
+  );
+};

superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.ts

@@ -0,0 +1,162 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import Supercluster, {
+  type Options as SuperclusterOptions,
+} from 'supercluster';
+import { ChartProps } from '@superset-ui/core';
+import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from './MapBox';
+
+const NOOP = () => {};
+const MIN_LONGITUDE = -180;
+const MAX_LONGITUDE = 180;
+const MIN_LATITUDE = -90;
+const MAX_LATITUDE = 90;
+const MIN_ZOOM = 0;
+
+function toFiniteNumber(
+  value: string | number | null | undefined,
+): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  const normalizedValue = typeof value === 'string' ? value.trim() : value;
+  if (normalizedValue === '') return undefined;
+  const num = Number(normalizedValue);
+  return Number.isFinite(num) ? num : undefined;
+}
+
+function clampNumber(
+  value: number | undefined,
+  min: number,
+  max: number,
+): number | undefined {
+  if (value === undefined) return undefined;
+  return Math.min(max, Math.max(min, value));
+}
+
+interface ClusterProperties {
+  metric: number;
+  sum: number;
+  squaredSum: number;
+  min: number;
+  max: number;
+}
+
+export default function transformProps(chartProps: ChartProps) {
+  const { width, height, formData, hooks, queriesData } = chartProps;
+  const { onError = NOOP, setControlValue = NOOP } = hooks;
+  const { bounds, geoJSON, hasCustomMetric, mapboxApiKey } =
+    queriesData[0].data;
+  const {
+    clusteringRadius,
+    globalOpacity,
+    mapboxColor,
+    mapboxStyle,
+    pandasAggfunc,
+    pointRadiusUnit,
+    renderWhileDragging,
+    viewportLongitude,
+    viewportLatitude,
+    viewportZoom,
+  } = formData;
+
+  // Validate mapbox color
+  const rgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(mapboxColor);
+  if (rgb === null) {
+    onError("Color field must be of form 'rgb(%d, %d, %d)'");
+
+    return {};
+  }
+
+  const opts: SuperclusterOptions<ClusterProperties, ClusterProperties> = {
+    maxZoom: DEFAULT_MAX_ZOOM,
+    radius: clusteringRadius,
+  };
+  if (hasCustomMetric) {
+    opts.initial = () => ({
+      metric: 0,
+      sum: 0,
+      squaredSum: 0,
+      min: Infinity,
+      max: -Infinity,
+    });
+    opts.map = (prop: ClusterProperties) => ({
+      metric: prop.metric,
+      sum: prop.metric,
+      squaredSum: prop.metric ** 2,
+      min: prop.metric,
+      max: prop.metric,
+    });
+    opts.reduce = (accu: ClusterProperties, prop: ClusterProperties) => {
+      // Temporarily disable param-reassignment linting to work with supercluster's api
+      /* eslint-disable no-param-reassign */
+      accu.sum += prop.sum;
+      accu.squaredSum += prop.squaredSum;
+      accu.min = Math.min(accu.min, prop.min);
+      accu.max = Math.max(accu.max, prop.max);
+      /* eslint-enable no-param-reassign */
+    };
+  }
+  const clusterer = new Supercluster(opts);
+  clusterer.load(geoJSON.features);
+
+  return {
+    width,
+    height,
+    aggregatorName: pandasAggfunc,
+    bounds,
+    clusterer,
+    hasCustomMetric,
+    mapboxApiKey,
+    mapStyle: mapboxStyle,
+    onViewportChange({
+      latitude,
+      longitude,
+      zoom,
+    }: {
+      latitude: number;
+      longitude: number;
+      zoom: number;
+    }) {
+      setControlValue('viewport_longitude', longitude);
+      setControlValue('viewport_latitude', latitude);
+      setControlValue('viewport_zoom', zoom);
+    },
+    // Always use DEFAULT_POINT_RADIUS as the base radius for cluster sizing
+    // Individual point radii come from geoJSON properties.radius
+    pointRadius: DEFAULT_POINT_RADIUS,
+    pointRadiusUnit,
+    renderWhileDragging,
+    rgb,
+    viewportLongitude: clampNumber(
+      toFiniteNumber(viewportLongitude),
+      MIN_LONGITUDE,
+      MAX_LONGITUDE,
+    ),
+    viewportLatitude: clampNumber(
+      toFiniteNumber(viewportLatitude),
+      MIN_LATITUDE,
+      MAX_LATITUDE,
+    ),
+    viewportZoom: clampNumber(
+      toFiniteNumber(viewportZoom),
+      MIN_ZOOM,
+      DEFAULT_MAX_ZOOM,
+    ),
+    globalOpacity: Math.min(1, Math.max(0, toFiniteNumber(globalOpacity) ?? 1)),
+  };
+}

superset-frontend/plugins/legacy-plugin-chart-map-box/test/MapBox.test.tsx

@@ -0,0 +1,381 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { type ReactNode } from 'react';
+import { render } from '@testing-library/react';
+import MapBox from '../src/MapBox';
+
+// Capture the most recent viewport props passed to MapGL
+let lastMapGLProps: Record<string, unknown> = {};
+const mockFitBounds = jest.fn();
+
+jest.mock('react-map-gl', () => {
+  const MockMapGL = (props: Record<string, unknown>) => {
+    lastMapGLProps = props;
+    return <div data-test="map-gl">{props.children as ReactNode}</div>;
+  };
+  return { __esModule: true, default: MockMapGL };
+});
+
+jest.mock('@math.gl/web-mercator', () => ({
+  WebMercatorViewport: jest
+    .fn()
+    .mockImplementation(
+      ({ width, height }: { width: number; height: number }) => ({
+        fitBounds: (bounds: [[number, number], [number, number]]) =>
+          mockFitBounds(bounds, width, height),
+      }),
+    ),
+}));
+
+jest.mock('../src/ScatterPlotGlowOverlay', () => {
+  const MockOverlay = (props: Record<string, unknown>) => (
+    <div data-test="scatter-overlay" data-opacity={props.globalOpacity} />
+  );
+  return { __esModule: true, default: MockOverlay };
+});
+
+const defaultProps = {
+  width: 800,
+  height: 600,
+  clusterer: {
+    getClusters: jest.fn().mockReturnValue([]),
+  },
+  globalOpacity: 1,
+  mapboxApiKey: 'test-key',
+  mapStyle: 'mapbox://styles/mapbox/light-v9',
+  pointRadius: 60,
+  pointRadiusUnit: 'Pixels',
+  renderWhileDragging: true,
+  rgb: ['', 255, 0, 0] as (string | number)[],
+  hasCustomMetric: false,
+  bounds: [
+    [-74.0, 40.7],
+    [-73.9, 40.8],
+  ] as [[number, number], [number, number]],
+  onViewportChange: jest.fn(),
+};
+
+beforeEach(() => {
+  lastMapGLProps = {};
+  jest.clearAllMocks();
+  mockFitBounds.mockImplementation(
+    (
+      bounds: [[number, number], [number, number]],
+      width: number,
+      height: number,
+    ) => ({
+      latitude: Number(((bounds[0][1] + bounds[1][1]) / 2).toFixed(2)),
+      longitude: Number(((bounds[0][0] + bounds[1][0]) / 2).toFixed(2)),
+      zoom: Number((10 + width / 1000 + height / 10000).toFixed(2)),
+    }),
+  );
+});
+
+test('initializes viewport from bounds', () => {
+  render(<MapBox {...defaultProps} />);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('updates viewport when viewport props change', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-73.95}
+      viewportLatitude={40.75}
+      viewportZoom={10}
+    />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('does not loop when viewport state matches new props', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-73.95}
+      viewportLatitude={40.75}
+      viewportZoom={10}
+    />,
+  );
+
+  // Re-render with same props that match the initial viewport state
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-73.95}
+      viewportLatitude={40.75}
+      viewportZoom={10}
+    />,
+  );
+
+  // Viewport should still be the fitBounds-computed values since props didn't change
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(10);
+});
+
+test('passes globalOpacity to ScatterPlotGlowOverlay', () => {
+  const { getByTestId } = render(
+    <MapBox {...defaultProps} globalOpacity={0.5} />,
+  );
+  const overlay = getByTestId('scatter-overlay');
+  expect(overlay.dataset.opacity).toBe('0.5');
+});
+
+test('initializes viewport from props when provided', () => {
+  render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('handles undefined bounds gracefully', () => {
+  render(<MapBox {...defaultProps} bounds={undefined} />);
+  expect(lastMapGLProps.longitude).toBe(0);
+  expect(lastMapGLProps.latitude).toBe(0);
+  expect(lastMapGLProps.zoom).toBe(1);
+});
+
+test('applies partial viewport props on update', () => {
+  const { rerender } = render(<MapBox {...defaultProps} />);
+
+  rerender(<MapBox {...defaultProps} viewportLongitude={-122.4} />);
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('restores fitBounds when viewport props are cleared', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear all viewport props (simulates user clearing the controls)
+  rerender(<MapBox {...defaultProps} />);
+
+  // Should revert to fitBounds values
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('restores only cleared viewport props, keeps the rest', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear only longitude, keep lat/zoom
+  rerender(
+    <MapBox {...defaultProps} viewportLatitude={37.8} viewportZoom={5} />,
+  );
+
+  // Longitude reverts to fitBounds, lat/zoom stay
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('applies changed viewport props even when another is cleared simultaneously', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear longitude, change latitude simultaneously
+  rerender(
+    <MapBox {...defaultProps} viewportLatitude={40.0} viewportZoom={5} />,
+  );
+
+  // Longitude reverts to fitBounds, latitude should be the NEW value
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.0);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('falls back to default viewport when cleared with undefined bounds', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      bounds={undefined}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  // Clear viewport props — no bounds to fitBounds to
+  rerender(<MapBox {...defaultProps} bounds={undefined} />);
+
+  // Should fall back to {0, 0, 1}
+  expect(lastMapGLProps.longitude).toBe(0);
+  expect(lastMapGLProps.latitude).toBe(0);
+  expect(lastMapGLProps.zoom).toBe(1);
+});
+
+test('recomputes fitBounds when bounds change and no explicit viewport is set', () => {
+  const { rerender } = render(<MapBox {...defaultProps} />);
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.5);
+  expect(lastMapGLProps.latitude).toBe(37.3);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('recomputes fitBounds when chart size changes and no explicit viewport is set', () => {
+  const { rerender } = render(<MapBox {...defaultProps} />);
+
+  rerender(<MapBox {...defaultProps} width={1200} height={900} />);
+
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(40.75);
+  expect(lastMapGLProps.zoom).toBe(11.29);
+});
+
+test('recomputes only implicit viewport fields when bounds change', () => {
+  const { rerender } = render(
+    <MapBox {...defaultProps} viewportLongitude={-122.4} />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.3);
+  expect(lastMapGLProps.zoom).toBe(10.86);
+});
+
+test('recomputes only implicit viewport fields when chart size changes', () => {
+  const { rerender } = render(
+    <MapBox {...defaultProps} viewportLatitude={37.8} />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLatitude={37.8}
+      width={1200}
+      height={900}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-73.95);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(11.29);
+});
+
+test('recomputes implicit position when zoom stays explicit across bounds changes', () => {
+  const { rerender } = render(<MapBox {...defaultProps} viewportZoom={5} />);
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportZoom={5}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.5);
+  expect(lastMapGLProps.latitude).toBe(37.3);
+  expect(lastMapGLProps.zoom).toBe(5);
+});
+
+test('does not recompute fitBounds on bounds change when an explicit viewport is set', () => {
+  const { rerender } = render(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+    />,
+  );
+
+  rerender(
+    <MapBox
+      {...defaultProps}
+      viewportLongitude={-122.4}
+      viewportLatitude={37.8}
+      viewportZoom={5}
+      bounds={[
+        [-123.2, 36.5],
+        [-121.8, 38.1],
+      ]}
+    />,
+  );
+
+  expect(lastMapGLProps.longitude).toBe(-122.4);
+  expect(lastMapGLProps.latitude).toBe(37.8);
+  expect(lastMapGLProps.zoom).toBe(5);
+});

superset-frontend/plugins/legacy-plugin-chart-map-box/test/ScatterPlotGlowOverlay.test.tsx

@@ -18,11 +18,7 @@
  */
 
 import { render } from '@testing-library/react';
-import ScatterPlotOverlay from '../src/components/ScatterPlotOverlay';
-import {
-  MIN_CLUSTER_RADIUS_RATIO,
-  MAX_POINT_RADIUS_RATIO,
-} from '../src/components/ScatterPlotOverlay';
+import ScatterPlotGlowOverlay from '../src/ScatterPlotGlowOverlay';
 
 type MockGradient = {
   addColorStop: jest.Mock<void, [number, string]>;
@@ -71,20 +67,22 @@ declare global {
   var mockRedraw: unknown;
 }
 
-// Mock the CanvasOverlay component to capture the redraw function
-jest.mock('../src/components/CanvasOverlay', () => ({
-  __esModule: true,
-  default: ({ redraw }: { redraw: unknown }) => {
+// Mock react-map-gl's CanvasOverlay
+jest.mock('react-map-gl', () => ({
+  CanvasOverlay: ({ redraw }: { redraw: unknown }) => {
+    // Store the redraw function so tests can call it
     global.mockRedraw = redraw;
     return <div data-testid="canvas-overlay" />;
   },
 }));
 
+// Mock utility functions
 jest.mock('../src/utils/luminanceFromRGB', () => ({
   __esModule: true,
-  default: jest.fn(() => 150),
+  default: jest.fn(() => 150), // Return a value above the dark threshold
 }));
 
+// Test helpers
 const createMockCanvas = () => {
   const ctx: MockCanvasContext = {
     clearRect: jest.fn(),
@@ -153,10 +151,8 @@ const defaultProps = {
   rgb: ['', 255, 0, 0] as [string, number, number, number],
   globalOpacity: 1,
 };
-const MIN_VISIBLE_POINT_RADIUS =
-  defaultProps.dotRadius * MIN_CLUSTER_RADIUS_RATIO;
-const MAX_VISIBLE_POINT_RADIUS =
-  defaultProps.dotRadius * MAX_POINT_RADIUS_RATIO;
+const MIN_VISIBLE_POINT_RADIUS = 10;
+const MAX_VISIBLE_POINT_RADIUS = 20;
 
 test('renders map with varying radius values in Pixels mode', () => {
   const locations = [
@@ -166,7 +162,7 @@ test('renders map with varying radius values in Pixels mode', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       pointRadiusUnit="Pixels"
@@ -176,11 +172,13 @@ test('renders map with varying radius values in Pixels mode', () => {
 
   const arcCalls = redrawParams.ctx.arc.mock.calls;
 
+  // With dotRadius=60, pixel-sized points should map to the visible 10-20 range.
   arcCalls.forEach(call => {
     expect(call[2]).toBeGreaterThanOrEqual(MIN_VISIBLE_POINT_RADIUS);
     expect(call[2]).toBeLessThanOrEqual(MAX_VISIBLE_POINT_RADIUS);
   });
 
+  // Ordering should be preserved: radius 10 < 50 < 100
   expect(arcCalls[0][2]).toBeLessThan(arcCalls[1][2]);
   expect(arcCalls[1][2]).toBeLessThan(arcCalls[2][2]);
 });
@@ -194,7 +192,7 @@ test('handles dataset with uniform radius values', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -213,7 +211,7 @@ test('renders successfully when data contains non-finite values', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -231,7 +229,7 @@ test('handles radius values provided as strings', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       pointRadiusUnit="Pixels"
@@ -258,7 +256,7 @@ test('treats blank radius strings as missing values', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       pointRadiusUnit="Pixels"
@@ -282,7 +280,7 @@ test('renders points when radius values are missing', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -306,7 +304,7 @@ test('renders both cluster and non-cluster points correctly', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -325,7 +323,7 @@ test('renders map with multiple points with different radius values', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -343,7 +341,7 @@ test('renders map with Kilometers mode', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Kilometers"
@@ -362,7 +360,7 @@ test('renders map with Miles mode', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Miles"
@@ -380,7 +378,7 @@ test('displays metric property labels on points', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -393,7 +391,7 @@ test('displays metric property labels on points', () => {
 test('handles empty dataset without errors', () => {
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={[]}
         pointRadiusUnit="Pixels"
@@ -412,7 +410,7 @@ test('handles extreme outlier radius values without breaking', () => {
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -433,7 +431,7 @@ test('renders successfully with mixed extreme and negative radius values', () =>
 
   expect(() => {
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         pointRadiusUnit="Pixels"
@@ -458,7 +456,7 @@ test('cluster radius is always >= max individual point radius in Pixels mode', (
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -469,7 +467,9 @@ test('cluster radius is always >= max individual point radius in Pixels mode', (
 
   const arcCalls = redrawParams.ctx.arc.mock.calls;
 
+  // cluster with label=1 (index 0) should not be smaller than the largest point bubble
   expect(arcCalls[0][2]).toBeGreaterThanOrEqual(MAX_VISIBLE_POINT_RADIUS);
+  // point radii span the configured pixel range
   expect(arcCalls[1][2]).toBe(MIN_VISIBLE_POINT_RADIUS);
   expect(arcCalls[2][2]).toBe(MAX_VISIBLE_POINT_RADIUS);
   expect(arcCalls[0][2]).toBeGreaterThanOrEqual(arcCalls[2][2]);
@@ -490,7 +490,7 @@ test('largest cluster gets full dotRadius', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -500,6 +500,7 @@ test('largest cluster gets full dotRadius', () => {
   const redrawParams = triggerRedraw();
 
   const arcCalls = redrawParams.ctx.arc.mock.calls;
+  // The largest cluster (label=100, maxLabel=100) should get full radius
   expect(arcCalls[1][2]).toBe(defaultProps.dotRadius);
 });
 
@@ -523,7 +524,7 @@ test('cluster radii preserve proportional ordering', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -551,7 +552,7 @@ test('negative cluster label produces valid finite radius', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -580,7 +581,7 @@ test('ignores non-finite cluster labels when computing cluster scaling bounds',
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -605,7 +606,7 @@ test('single cluster with small maxLabel gets full dotRadius', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -614,6 +615,7 @@ test('single cluster with small maxLabel gets full dotRadius', () => {
   const redrawParams = triggerRedraw();
 
   const arcCalls = redrawParams.ctx.arc.mock.calls;
+  // When there's only one cluster, label=maxLabel, so it gets full radius
   expect(arcCalls[0][2]).toBe(defaultProps.dotRadius);
 });
 
@@ -637,7 +639,7 @@ test('all-negative cluster labels produce differentiated radii by magnitude', ()
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -650,6 +652,7 @@ test('all-negative cluster labels produce differentiated radii by magnitude', ()
   const rNeg10 = arcCalls[1][2];
   const rNeg1 = arcCalls[2][2];
 
+  // Higher magnitude = bigger circle: |-100| > |-10| > |-1|
   expect(rNeg1).toBeLessThan(rNeg10);
   expect(rNeg10).toBeLessThan(rNeg100);
   expect(Number.isFinite(rNeg100)).toBe(true);
@@ -679,7 +682,7 @@ test('mixed positive-and-negative cluster labels size by magnitude', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -692,6 +695,7 @@ test('mixed positive-and-negative cluster labels size by magnitude', () => {
   const rZero = arcCalls[1][2];
   const r100 = arcCalls[2][2];
 
+  // Magnitude ordering: |0| < |-50| < |100|
   expect(rZero).toBeLessThan(rNeg50);
   expect(rNeg50).toBeLessThan(r100);
   expect(rZero).toBeGreaterThanOrEqual(MIN_VISIBLE_POINT_RADIUS);
@@ -718,7 +722,7 @@ test('all-identical negative labels get equal full radii', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -746,7 +750,7 @@ test('single negative cluster gets full radius', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -768,7 +772,7 @@ test('large negative cluster labels are abbreviated', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -808,7 +812,7 @@ test.each([
     ];
 
     render(
-      <ScatterPlotOverlay
+      <ScatterPlotGlowOverlay
         {...defaultProps}
         locations={locations}
         aggregation={aggregation}
@@ -842,7 +846,7 @@ test('zero-value cluster is visible with minimum radius', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"
@@ -873,7 +877,7 @@ test('all-zero clusters use a finite radius', () => {
   ];
 
   render(
-    <ScatterPlotOverlay
+    <ScatterPlotGlowOverlay
       {...defaultProps}
       locations={locations}
       aggregation="sum"

superset-frontend/plugins/legacy-plugin-chart-map-box/test/transformProps.test.ts

@@ -42,23 +42,19 @@ type TransformPropsResult = {
   viewportLongitude?: number;
   viewportLatitude?: number;
   viewportZoom?: number;
-  rgb?: string[] | null;
 };
 
 const baseFormData = {
-  all_columns_x: 'lon',
-  all_columns_y: 'lat',
-  clustering_radius: 60,
-  global_opacity: 0.8,
-  map_color: 'rgb(0, 139, 139)',
-  map_renderer: 'maplibre',
-  maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
-  pandas_aggfunc: 'sum',
-  point_radius_unit: 'Pixels',
-  render_while_dragging: true,
-  viewport_longitude: -73.935242,
-  viewport_latitude: 40.73061,
-  viewport_zoom: 9,
+  clusteringRadius: 60,
+  globalOpacity: 0.8,
+  mapboxColor: 'rgb(0, 139, 139)',
+  mapboxStyle: 'mapbox://styles/mapbox/light-v9',
+  pandasAggfunc: 'sum',
+  pointRadiusUnit: 'Pixels',
+  renderWhileDragging: true,
+  viewportLongitude: -73.935242,
+  viewportLatitude: 40.73061,
+  viewportZoom: 9,
 };
 
 const baseQueriesData = [
@@ -70,6 +66,7 @@ const baseQueriesData = [
       ] as [[number, number], [number, number]],
       geoJSON: { features: [] },
       hasCustomMetric: false,
+      mapboxApiKey: 'test-api-key',
     },
   },
 ];
@@ -91,15 +88,15 @@ function getTransformPropsResult(
 }
 
 test('extracts globalOpacity from formData', () => {
-  const result = getTransformPropsResult({ global_opacity: 0.5 });
+  const result = getTransformPropsResult({ globalOpacity: 0.5 });
   expect(result.globalOpacity).toBe(0.5);
 });
 
 test('extracts viewport values from formData', () => {
   const result = getTransformPropsResult({
-    viewport_longitude: -122.4,
-    viewport_latitude: 37.8,
-    viewport_zoom: 12,
+    viewportLongitude: -122.4,
+    viewportLatitude: 37.8,
+    viewportZoom: 12,
   });
   expect(result).toEqual(
     expect.objectContaining({
@@ -112,9 +109,9 @@ test('extracts viewport values from formData', () => {
 
 test('clamps viewport values to safe map ranges', () => {
   const result = getTransformPropsResult({
-    viewport_longitude: 190,
-    viewport_latitude: -100,
-    viewport_zoom: 99,
+    viewportLongitude: 190,
+    viewportLatitude: -100,
+    viewportZoom: 99,
   });
   expect(result).toEqual(
     expect.objectContaining({
@@ -151,9 +148,9 @@ test('provides onViewportChange callback that updates control values', () => {
 
 test('normalizes string viewport values to numbers', () => {
   const result = getTransformPropsResult({
-    viewport_longitude: '-122.4',
-    viewport_latitude: '37.8',
-    viewport_zoom: '12',
+    viewportLongitude: '-122.4',
+    viewportLatitude: '37.8',
+    viewportZoom: '12',
   });
   expect(result.viewportLongitude).toBe(-122.4);
   expect(result.viewportLatitude).toBe(37.8);
@@ -162,9 +159,9 @@ test('normalizes string viewport values to numbers', () => {
 
 test('normalizes empty viewport values to undefined', () => {
   const result = getTransformPropsResult({
-    viewport_longitude: '',
-    viewport_latitude: '',
-    viewport_zoom: '',
+    viewportLongitude: '',
+    viewportLatitude: '',
+    viewportZoom: '',
   });
   expect(result.viewportLongitude).toBeUndefined();
   expect(result.viewportLatitude).toBeUndefined();
@@ -173,9 +170,9 @@ test('normalizes empty viewport values to undefined', () => {
 
 test('normalizes whitespace-only viewport values to undefined', () => {
   const result = getTransformPropsResult({
-    viewport_longitude: '   ',
-    viewport_latitude: '\t',
-    viewport_zoom: ' \n ',
+    viewportLongitude: '   ',
+    viewportLatitude: '\t',
+    viewportZoom: ' \n ',
   });
   expect(result.viewportLongitude).toBeUndefined();
   expect(result.viewportLatitude).toBeUndefined();
@@ -183,31 +180,31 @@ test('normalizes whitespace-only viewport values to undefined', () => {
 });
 
 test('normalizes string opacity to number', () => {
-  const result = getTransformPropsResult({ global_opacity: '0.5' });
+  const result = getTransformPropsResult({ globalOpacity: '0.5' });
   expect(result.globalOpacity).toBe(0.5);
 });
 
 test('defaults empty opacity to 1', () => {
-  const result = getTransformPropsResult({ global_opacity: '' });
+  const result = getTransformPropsResult({ globalOpacity: '' });
   expect(result.globalOpacity).toBe(1);
 });
 
 test('defaults whitespace-only opacity to 1', () => {
-  const result = getTransformPropsResult({ global_opacity: '   ' });
+  const result = getTransformPropsResult({ globalOpacity: '   ' });
   expect(result.globalOpacity).toBe(1);
 });
 
 test('clamps opacity to [0, 1] range', () => {
-  expect(getTransformPropsResult({ global_opacity: 5 }).globalOpacity).toBe(1);
-  expect(getTransformPropsResult({ global_opacity: -1 }).globalOpacity).toBe(0);
+  expect(getTransformPropsResult({ globalOpacity: 5 }).globalOpacity).toBe(1);
+  expect(getTransformPropsResult({ globalOpacity: -1 }).globalOpacity).toBe(0);
 });
 
 test('passes through numeric values unchanged', () => {
   const result = getTransformPropsResult({
-    viewport_longitude: -122.4,
-    viewport_latitude: 37.8,
-    viewport_zoom: 12,
-    global_opacity: 0.8,
+    viewportLongitude: -122.4,
+    viewportLatitude: 37.8,
+    viewportZoom: 12,
+    globalOpacity: 0.8,
   });
   expect(result.viewportLongitude).toBe(-122.4);
   expect(result.viewportLatitude).toBe(37.8);
@@ -215,18 +212,19 @@ test('passes through numeric values unchanged', () => {
   expect(result.globalOpacity).toBe(0.8);
 });
 
-test('calls onError and falls back to black for invalid color', () => {
+test('calls onError and returns empty object for invalid color', () => {
   const onError = jest.fn();
   const chartProps = new ChartProps({
-    formData: { ...baseFormData, map_color: 'invalid-color' },
+    formData: { ...baseFormData, mapboxColor: 'invalid-color' },
     width: 800,
     height: 600,
     queriesData: baseQueriesData,
     hooks: { onError },
     theme: supersetTheme,
   });
-  const result = transformProps(chartProps) as TransformPropsResult;
-  expect(onError).toHaveBeenCalled();
-  // Falls back to black instead of returning empty object
-  expect(result.rgb).toEqual(['', '0', '0', '0']);
+  const result = transformProps(chartProps);
+  expect(onError).toHaveBeenCalledWith(
+    "Color field must be of form 'rgb(%d, %d, %d)'",
+  );
+  expect(result).toEqual({});
 });

superset-frontend/plugins/legacy-plugin-chart-map-box/test/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": false,
+    "emitDeclarationOnly": false,
+    "rootDir": "."
+  },
+  "extends": "../../../tsconfig.json",
+  "include": ["**/*", "../types/**/*", "../../../types/**/*"]
+}

superset-frontend/plugins/legacy-plugin-chart-map-box/test/utils/roundDecimal.test.ts

@@ -17,12 +17,12 @@
  * under the License.
  */
 
-declare module '*.png' {
-  const value: string;
-  export default value;
-}
+import roundDecimal from '../../src/utils/roundDecimal';
 
-declare module '*.jpg' {
-  const value: string;
-  export default value;
-}
+describe('roundDecimal', () => {
+  test('rounding method to limit the number of decimal digits', () => {
+    expect(roundDecimal(1.139, 2)).toBe(1.14);
+    expect(roundDecimal(1.13929, 3)).toBe(1.139);
+    expect(roundDecimal(1.13929)).toBe(1);
+  });
+});

superset-frontend/plugins/legacy-plugin-chart-map-box/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    // Path Resolution: Override baseUrl to maintain correct path mappings from parent config
+    // (e.g., "@apache-superset/core" -> "./packages/superset-core/src")
+    "baseUrl": "../..",
+
+    // Directory Overrides: Parent config paths are relative to frontend root,
+    // but packages need paths relative to their own directory
+    "outDir": "lib",
+    "rootDir": "src",
+    "declarationDir": "lib"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "types/**/*"],
+  "exclude": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.test.*",
+    "src/**/*.stories.*"],
+  "references": [
+    { "path": "../../packages/superset-core" },
+    { "path": "../../packages/superset-ui-core" },
+    { "path": "../../packages/superset-ui-chart-controls" }
+  ]
+}

superset-frontend/plugins/legacy-plugin-chart-map-box/types/external.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module 'supercluster' {
+  interface Options<P = Record<string, unknown>, C = Record<string, unknown>> {
+    minZoom?: number;
+    maxZoom?: number;
+    minPoints?: number;
+    radius?: number;
+    extent?: number;
+    nodeSize?: number;
+    log?: boolean;
+    initial?: () => C;
+    map?: (props: P) => C;
+    reduce?: (accumulated: C, props: C) => void;
+  }
+
+  interface GeoJSONFeature {
+    type: string;
+    geometry: {
+      type: string;
+      coordinates: [number, number];
+    };
+    properties: Record<string, unknown>;
+  }
+
+  class Supercluster<P = Record<string, unknown>, C = Record<string, unknown>> {
+    constructor(options?: Options<P, C>);
+    load(points: GeoJSONFeature[]): Supercluster<P, C>;
+    getClusters(bbox: number[], zoom: number): GeoJSONFeature[];
+    getTile(z: number, x: number, y: number): GeoJSONFeature[] | null;
+    getChildren(clusterId: number): GeoJSONFeature[];
+    getLeaves(
+      clusterId: number,
+      limit?: number,
+      offset?: number,
+    ): GeoJSONFeature[];
+    getClusterExpansionZoom(clusterId: number): number;
+  }
+
+  export default Supercluster;
+  export { Options, GeoJSONFeature };
+}
+
+declare module 'react-map-gl' {
+  import { Component, ReactNode } from 'react';
+
+  interface MapGLProps {
+    width?: number;
+    height?: number;
+    latitude?: number;
+    longitude?: number;
+    zoom?: number;
+    mapStyle?: string;
+    mapboxApiAccessToken?: string;
+    onViewportChange?: Function;
+    preserveDrawingBuffer?: boolean;
+    children?: ReactNode;
+    [key: string]: unknown;
+  }
+
+  export default class MapGL extends Component<MapGLProps> {}
+
+  interface CanvasOverlayProps {
+    redraw: (params: {
+      width: number;
+      height: number;
+      ctx: CanvasRenderingContext2D;
+      isDragging: boolean;
+      project: (lngLat: [number, number]) => [number, number];
+    }) => void;
+  }
+
+  export class CanvasOverlay extends Component<CanvasOverlayProps> {}
+}

superset-frontend/plugins/legacy-preset-chart-deckgl/CHANGELOG.md

@@ -0,0 +1,89 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.20.4](https://github.com/apache/superset/compare/v0.20.3...v0.20.4) (2024-12-10)
+
+**Note:** Version bump only for package @superset-ui/legacy-preset-chart-deckgl
+
+# [0.20.0](https://github.com/apache/superset/compare/v2021.41.0...v0.20.0) (2024-09-09)
+
+### Bug Fixes
+
+- **Dashboard:** Color inconsistency on refreshes and conflicts ([#27439](https://github.com/apache/superset/issues/27439)) ([313ee59](https://github.com/apache/superset/commit/313ee596f5435894f857d72be7269d5070c8c964))
+- deck.gl Geojson path not visible ([#24428](https://github.com/apache/superset/issues/24428)) ([6bb930e](https://github.com/apache/superset/commit/6bb930ef4ed26ea381e7f8e889851aa7867ba0eb))
+- deck.gl GeoJsonLayer Autozoom & fill/stroke options ([#19778](https://github.com/apache/superset/issues/19778)) ([d65b77e](https://github.com/apache/superset/commit/d65b77ec7dac4c2368fcaa1fe6e98db102966198))
+- **deck.gl Multiple Layer Chart:** Add Contour and Heatmap Layer as options ([#25923](https://github.com/apache/superset/issues/25923)) ([64ba579](https://github.com/apache/superset/commit/64ba5797df92d0f8067ccd2b30ba6ff58e0bd791))
+- deck.gl Scatterplot min/max radius ([#24363](https://github.com/apache/superset/issues/24363)) ([c728cdf](https://github.com/apache/superset/commit/c728cdf501ec292beb14a0982265052bf2274bec))
+- **deck.gl:** multiple layers map size is shrunk ([#18939](https://github.com/apache/superset/issues/18939)) ([2cb3635](https://github.com/apache/superset/commit/2cb3635256ee8e91f0bac2f3091684673c04ff2b))
+- **deck.gl:** update view state on property changes ([#17720](https://github.com/apache/superset/issues/17720)) ([#17826](https://github.com/apache/superset/issues/17826)) ([97d918b](https://github.com/apache/superset/commit/97d918b6927f572dca3b33c61b89c8b3ebdc4376))
+- DeckGL legend layout ([#30140](https://github.com/apache/superset/issues/30140)) ([af066a4](https://github.com/apache/superset/commit/af066a46306f2f476aa2944b14df3de1faf1e96d))
+- **deckgl:** deckgl unable to load map ([#17851](https://github.com/apache/superset/issues/17851)) ([52f5dcb](https://github.com/apache/superset/commit/52f5dcb58eec7b188f4387b8781dcda4252a5680))
+- **explore:** Fix chart standalone URL for report/thumbnail generation ([#20673](https://github.com/apache/superset/issues/20673)) ([84d4302](https://github.com/apache/superset/commit/84d4302628d18aa19c13cc5322e68abbc690ea4d))
+- **explore:** Prevent shared controls from checking feature flags outside React render ([#21315](https://github.com/apache/superset/issues/21315)) ([2285ebe](https://github.com/apache/superset/commit/2285ebe72ec4edded6d195052740b7f9f13d1f1b))
+- weight tooltip issue ([#19397](https://github.com/apache/superset/issues/19397)) ([f6d550b](https://github.com/apache/superset/commit/f6d550b7fc3643350483850064e65dbd3d026dc4))
+
+### Features
+
+- Add Deck.gl Contour Layer ([#24154](https://github.com/apache/superset/issues/24154)) ([512fb9a](https://github.com/apache/superset/commit/512fb9a0bdd428b94b0c121158b8b15b7631e0fb))
+- Add deck.gl Heatmap Visualization ([#23551](https://github.com/apache/superset/issues/23551)) ([fc8c537](https://github.com/apache/superset/commit/fc8c537118ce6c7b3a4624f88a31e2e7fb287327))
+- Add line width unit control in deckgl Polygon and Path ([#24755](https://github.com/apache/superset/issues/24755)) ([d26ea98](https://github.com/apache/superset/commit/d26ea980acc7d2a20757efc360d810afe83d5c65))
+- apply standardized form data to deckgl ([#20579](https://github.com/apache/superset/issues/20579)) ([290b89c](https://github.com/apache/superset/commit/290b89c7b4ae702c55f611bfac9cedb245ea8bd8))
+- **deck.gl:** add color range for deck.gl 3D ([#19520](https://github.com/apache/superset/issues/19520)) ([c0a00fd](https://github.com/apache/superset/commit/c0a00fd302ec66fbe0ca766cf73978c99ba00d82))
+- **deckgl-map:** use an arbitraty Mabpox style URL ([#26027](https://github.com/apache/superset/issues/26027)) ([#26031](https://github.com/apache/superset/issues/26031)) ([af58784](https://github.com/apache/superset/commit/af587840403d83a7da7fb0f57bc10ad2335d4eeb))
+- **explore:** Frontend implementation of dataset creation from infobox ([#19855](https://github.com/apache/superset/issues/19855)) ([ba0c37d](https://github.com/apache/superset/commit/ba0c37d3df85b1af39404af1d578daeb0ff2d278))
+- improve color consistency (save all labels) ([#19038](https://github.com/apache/superset/issues/19038)) ([dc57508](https://github.com/apache/superset/commit/dc575080d7e43d40b1734bb8f44fdc291cb95b11))
+- **legacy-preset-chart-deckgl:** Add ,.1f and ,.2f value formats to deckgl charts ([#18945](https://github.com/apache/superset/issues/18945)) ([c56dc8e](https://github.com/apache/superset/commit/c56dc8eace6a71b45240d1bb6768d75661052a2e))
+- make data tables support html ([#24368](https://github.com/apache/superset/issues/24368)) ([d2b0b8e](https://github.com/apache/superset/commit/d2b0b8eac52ad8b68639c6581a1ed174a593f564))
+- **viz picker:** Remove some tags, refactor Recommended section ([#27708](https://github.com/apache/superset/issues/27708)) ([c314999](https://github.com/apache/superset/commit/c3149994ac0d4392e0462421b62cd0c034142082))
+
+# [0.19.0](https://github.com/apache/superset/compare/v2021.41.0...v0.19.0) (2024-09-07)
+
+### Bug Fixes
+
+- **Dashboard:** Color inconsistency on refreshes and conflicts ([#27439](https://github.com/apache/superset/issues/27439)) ([313ee59](https://github.com/apache/superset/commit/313ee596f5435894f857d72be7269d5070c8c964))
+- deck.gl Geojson path not visible ([#24428](https://github.com/apache/superset/issues/24428)) ([6bb930e](https://github.com/apache/superset/commit/6bb930ef4ed26ea381e7f8e889851aa7867ba0eb))
+- deck.gl GeoJsonLayer Autozoom & fill/stroke options ([#19778](https://github.com/apache/superset/issues/19778)) ([d65b77e](https://github.com/apache/superset/commit/d65b77ec7dac4c2368fcaa1fe6e98db102966198))
+- **deck.gl Multiple Layer Chart:** Add Contour and Heatmap Layer as options ([#25923](https://github.com/apache/superset/issues/25923)) ([64ba579](https://github.com/apache/superset/commit/64ba5797df92d0f8067ccd2b30ba6ff58e0bd791))
+- deck.gl Scatterplot min/max radius ([#24363](https://github.com/apache/superset/issues/24363)) ([c728cdf](https://github.com/apache/superset/commit/c728cdf501ec292beb14a0982265052bf2274bec))
+- **deck.gl:** multiple layers map size is shrunk ([#18939](https://github.com/apache/superset/issues/18939)) ([2cb3635](https://github.com/apache/superset/commit/2cb3635256ee8e91f0bac2f3091684673c04ff2b))
+- **deck.gl:** update view state on property changes ([#17720](https://github.com/apache/superset/issues/17720)) ([#17826](https://github.com/apache/superset/issues/17826)) ([97d918b](https://github.com/apache/superset/commit/97d918b6927f572dca3b33c61b89c8b3ebdc4376))
+- DeckGL legend layout ([#30140](https://github.com/apache/superset/issues/30140)) ([af066a4](https://github.com/apache/superset/commit/af066a46306f2f476aa2944b14df3de1faf1e96d))
+- **deckgl:** deckgl unable to load map ([#17851](https://github.com/apache/superset/issues/17851)) ([52f5dcb](https://github.com/apache/superset/commit/52f5dcb58eec7b188f4387b8781dcda4252a5680))
+- **explore:** Fix chart standalone URL for report/thumbnail generation ([#20673](https://github.com/apache/superset/issues/20673)) ([84d4302](https://github.com/apache/superset/commit/84d4302628d18aa19c13cc5322e68abbc690ea4d))
+- **explore:** Prevent shared controls from checking feature flags outside React render ([#21315](https://github.com/apache/superset/issues/21315)) ([2285ebe](https://github.com/apache/superset/commit/2285ebe72ec4edded6d195052740b7f9f13d1f1b))
+- weight tooltip issue ([#19397](https://github.com/apache/superset/issues/19397)) ([f6d550b](https://github.com/apache/superset/commit/f6d550b7fc3643350483850064e65dbd3d026dc4))
+
+### Features
+
+- Add Deck.gl Contour Layer ([#24154](https://github.com/apache/superset/issues/24154)) ([512fb9a](https://github.com/apache/superset/commit/512fb9a0bdd428b94b0c121158b8b15b7631e0fb))
+- Add deck.gl Heatmap Visualization ([#23551](https://github.com/apache/superset/issues/23551)) ([fc8c537](https://github.com/apache/superset/commit/fc8c537118ce6c7b3a4624f88a31e2e7fb287327))
+- Add line width unit control in deckgl Polygon and Path ([#24755](https://github.com/apache/superset/issues/24755)) ([d26ea98](https://github.com/apache/superset/commit/d26ea980acc7d2a20757efc360d810afe83d5c65))
+- apply standardized form data to deckgl ([#20579](https://github.com/apache/superset/issues/20579)) ([290b89c](https://github.com/apache/superset/commit/290b89c7b4ae702c55f611bfac9cedb245ea8bd8))
+- **deck.gl:** add color range for deck.gl 3D ([#19520](https://github.com/apache/superset/issues/19520)) ([c0a00fd](https://github.com/apache/superset/commit/c0a00fd302ec66fbe0ca766cf73978c99ba00d82))
+- **deckgl-map:** use an arbitraty Mabpox style URL ([#26027](https://github.com/apache/superset/issues/26027)) ([#26031](https://github.com/apache/superset/issues/26031)) ([af58784](https://github.com/apache/superset/commit/af587840403d83a7da7fb0f57bc10ad2335d4eeb))
+- **explore:** Frontend implementation of dataset creation from infobox ([#19855](https://github.com/apache/superset/issues/19855)) ([ba0c37d](https://github.com/apache/superset/commit/ba0c37d3df85b1af39404af1d578daeb0ff2d278))
+- improve color consistency (save all labels) ([#19038](https://github.com/apache/superset/issues/19038)) ([dc57508](https://github.com/apache/superset/commit/dc575080d7e43d40b1734bb8f44fdc291cb95b11))
+- **legacy-preset-chart-deckgl:** Add ,.1f and ,.2f value formats to deckgl charts ([#18945](https://github.com/apache/superset/issues/18945)) ([c56dc8e](https://github.com/apache/superset/commit/c56dc8eace6a71b45240d1bb6768d75661052a2e))
+- make data tables support html ([#24368](https://github.com/apache/superset/issues/24368)) ([d2b0b8e](https://github.com/apache/superset/commit/d2b0b8eac52ad8b68639c6581a1ed174a593f564))
+- **viz picker:** Remove some tags, refactor Recommended section ([#27708](https://github.com/apache/superset/issues/27708)) ([c314999](https://github.com/apache/superset/commit/c3149994ac0d4392e0462421b62cd0c034142082))

superset-frontend/plugins/legacy-preset-chart-deckgl/README.md

@@ -0,0 +1,57 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+## @superset-ui/legacy-preset-chart-deckgl
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-preset-chart-deckgl.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/legacy-preset-chart-deckgl.svg?style=flat-square)
+[![Libraries.io](https://img.shields.io/librariesio/release/npm/%40superset-ui%2Flegacy-preset-chart-deckgl?style=flat)](https://libraries.io/npm/@superset-ui%2Flegacy-preset-chart-deckgl)
+
+This plugin provides `deck.gl` for Superset.
+
+### Usage
+
+Import the preset and register. This will register all the chart plugins under `deck.gl`.
+
+```js
+import { DeckGLChartPreset } from '@superset-ui/legacy-preset-chart-deckgl';
+
+new DeckGLChartPreset().register();
+```
+
+or register charts one by one. Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.
+
+```js
+import { ArcChartPlugin } from '@superset-ui/legacy-preset-chart-deckgl';
+
+new ArcChartPlugin().configure({ key: 'deck_arc' }).register();
+```
+
+Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins-deckgl) for more details.
+
+```js
+<SuperChart
+  chartType="deck_arc"
+  width={600}
+  height={600}
+  formData={...}
+  queriesData={[{
+    data: {...},
+  }]}
+/>
+```

superset-frontend/plugins/legacy-preset-chart-deckgl/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@superset-ui/preset-chart-deckgl",
-  "version": "1.0.0",
-  "description": "Superset Chart Plugin - deck.gl (MapLibre)",
+  "name": "@superset-ui/legacy-preset-chart-deckgl",
+  "version": "0.20.4",
+  "description": "Superset Legacy Chart - deck.gl",
   "keywords": [
     "superset"
   ],
@@ -12,7 +12,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/apache/superset.git",
-    "directory": "superset-frontend/plugins/preset-chart-deckgl"
+    "directory": "superset-frontend/packages/legacy-preset-chart-deckgl"
   },
   "license": "Apache-2.0",
   "author": "Superset",
@@ -24,18 +24,19 @@
     "lib"
   ],
   "dependencies": {
-    "@deck.gl/aggregation-layers": "~9.2.11",
+    "@deck.gl/aggregation-layers": "~9.2.5",
     "@deck.gl/core": "~9.2.5",
-    "@deck.gl/extensions": "~9.2.9",
+    "@deck.gl/extensions": "~9.2.5",
     "@deck.gl/geo-layers": "~9.2.5",
     "@deck.gl/layers": "~9.2.5",
-    "@deck.gl/mapbox": "~9.2.5",
     "@deck.gl/mesh-layers": "~9.2.5",
+    "@deck.gl/react": "~9.2.5",
     "@luma.gl/constants": "~9.2.5",
     "@luma.gl/core": "~9.2.5",
     "@luma.gl/engine": "~9.2.6",
     "@luma.gl/shadertools": "~9.2.6",
     "@luma.gl/webgl": "~9.2.6",
+    "@mapbox/tiny-sdf": "^2.0.7",
     "@mapbox/geojson-extent": "^1.0.1",
     "@math.gl/web-mercator": "^4.1.0",
     "@types/d3-array": "^3.2.2",
@@ -45,13 +46,11 @@
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
     "handlebars": "^4.7.9",
-    "lodash": "^4.18.1",
-    "maplibre-gl": "^5.0.0",
+    "lodash": "^4.17.23",
     "mousetrap": "^1.6.5",
     "ngeohash": "^0.6.3",
     "prop-types": "^15.8.1",
-    "react-map-gl": "^8.0.0",
-    "underscore": "^1.13.7",
+    "underscore": "^1.13.8",
     "urijs": "^1.19.11",
     "xss": "^1.0.15"
   },
@@ -66,14 +65,10 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "dayjs": "^1.11.19",
-    "mapbox-gl": ">=1.0.0",
-    "react": "^17.0.2 || ^19.0.0",
-    "react-dom": "^17.0.2 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "mapbox-gl": {
-      "optional": true
-    }
+    "mapbox-gl": "*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-map-gl": "^6.1.19"
   },
   "publishConfig": {
     "access": "public"

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

@@ -38,7 +38,6 @@ import {
 import type { Layer } from '@deck.gl/core';
 import Legend from './components/Legend';
 import { hexToRGB } from './utils/colors';
-import { getMapboxApiKey } from './utils/mapbox';
 import sandboxedEval from './utils/sandbox';
 import fitViewport, { Viewport } from './utils/fitViewport';
 import {
@@ -84,6 +83,7 @@ function getCategories(fd: QueryFormData, data: JsonObject[]) {
 export type CategoricalDeckGLContainerProps = {
   datasource: Datasource;
   formData: QueryFormData;
+  mapboxApiKey: string;
   getPoints: (data: JsonObject[]) => Point[];
   height: number;
   width: number;
@@ -155,7 +155,7 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
 
       switch (selectedColorScheme) {
         case COLOR_SCHEME_TYPES.fixed_color: {
-          color = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
+          color = fd.color_picker || { r: 0, g: 0, b: 0, a: 100 };
           const colorArray = [color.r, color.g, color.b, color.a * 255];
 
           return data.map(d => ({ ...d, color: colorArray }));
@@ -166,7 +166,7 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
               r: 0,
               g: 0,
               b: 0,
-              a: 1,
+              a: 100,
             };
             const colorArray = [
               fallbackColor.r,
@@ -325,15 +325,8 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
         viewport={viewport}
         layers={getLayers()}
         setControlValue={props.setControlValue}
-        mapStyle={
-          props.formData.map_renderer === 'mapbox'
-            ? props.formData.mapbox_style
-            : props.formData.maplibre_style
-        }
-        mapProvider={
-          props.formData.map_renderer === 'mapbox' ? 'mapbox' : 'maplibre'
-        }
-        mapboxApiKey={getMapboxApiKey()}
+        mapStyle={props.formData.mapbox_style}
+        mapboxApiAccessToken={props.mapboxApiKey}
         width={props.width}
         height={props.height}
       />

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

@@ -1,3 +1,7 @@
+/* eslint-disable react/jsx-sort-default-props */
+/* eslint-disable react/sort-prop-types */
+/* eslint-disable react/jsx-handler-names */
+/* eslint-disable react/forbid-prop-types */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -26,32 +30,32 @@ import {
   useImperativeHandle,
   useState,
   isValidElement,
+  useRef,
 } from 'react';
 import { isEqual } from 'lodash';
-import { Map as MapLibreMap } from 'react-map-gl/maplibre';
-import { Map as MapboxMap } from 'react-map-gl/mapbox';
-import mapboxgl from 'mapbox-gl';
+import { StaticMap } from 'react-map-gl';
+import DeckGL from '@deck.gl/react';
 import type { Layer } from '@deck.gl/core';
 import { JsonObject, JsonValue, usePrevious } from '@superset-ui/core';
-import { styled, useTheme } from '@apache-superset/core/theme';
-import { t } from '@apache-superset/core/translation';
-import DeckGLOverlayMapLibre from './components/DeckGLOverlayMapLibre';
-import DeckGLOverlayMapbox from './components/DeckGLOverlayMapbox';
+import { styled } from '@apache-superset/core/theme';
+import { Device } from '@luma.gl/core';
 import Tooltip, { TooltipProps } from './components/Tooltip';
-import 'maplibre-gl/dist/maplibre-gl.css';
+import 'mapbox-gl/dist/mapbox-gl.css';
 import { Viewport } from './utils/fitViewport';
+import {
+  MAPBOX_LAYER_PREFIX,
+  OSM_LAYER_KEYWORDS,
+  TILE_LAYER_PREFIX,
+  buildTileLayer,
+} from './utils';
 
 const TICK = 250; // milliseconds
 
-const DEFAULT_MAP_STYLE =
-  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
-
 export type DeckGLContainerProps = {
   viewport: Viewport;
   setControlValue?: (control: string, value: JsonValue) => void;
   mapStyle?: string;
-  mapProvider?: 'maplibre' | 'mapbox';
-  mapboxApiKey?: string;
+  mapboxApiAccessToken: string;
   children?: ReactNode;
   width: number;
   height: number;
@@ -65,6 +69,14 @@ export const DeckGLContainer = memo(
     const [lastUpdate, setLastUpdate] = useState<number | null>(null);
     const [viewState, setViewState] = useState(props.viewport);
     const prevViewport = usePrevious(props.viewport);
+    const glContextRef = useRef<WebGL2RenderingContext | null>(null);
+
+    useEffect(
+      () => () => {
+        glContextRef.current?.getExtension('WEBGL_lose_context')?.loseContext();
+      },
+      [],
+    );
 
     useImperativeHandle(ref, () => ({ setTooltip }), []);
 
@@ -81,7 +93,7 @@ export const DeckGLContainer = memo(
 
     useEffect(() => {
       const timer = setInterval(tick, TICK);
-      return () => clearInterval(timer);
+      return clearInterval(timer);
     }, [tick]);
 
     useEffect(() => {
@@ -90,12 +102,31 @@ export const DeckGLContainer = memo(
       }
     }, [prevViewport, props.viewport]);
 
-    const onMove = useCallback((evt: { viewState: JsonObject }) => {
-      setViewState(evt.viewState as Viewport);
-      setLastUpdate(Date.now());
-    }, []);
+    const onViewStateChange = useCallback(
+      ({ viewState }: { viewState: JsonObject }) => {
+        setViewState(viewState as Viewport);
+        setLastUpdate(Date.now());
+      },
+      [],
+    );
 
     const layers = useCallback(() => {
+      if (
+        (props.mapStyle?.startsWith(TILE_LAYER_PREFIX) ||
+          OSM_LAYER_KEYWORDS.some((tilek: string) =>
+            props.mapStyle?.includes(tilek),
+          )) &&
+        props.layers.some(
+          l => typeof l !== 'function' && l?.id === 'tile-layer',
+        ) === false
+      ) {
+        props.layers.unshift(
+          buildTileLayer(
+            (props.mapStyle ?? '').replace(TILE_LAYER_PREFIX, ''),
+            'tile-layer',
+          ),
+        );
+      }
       // Support for layer factory
       if (props.layers.some(l => typeof l === 'function')) {
         return props.layers.map(l =>
@@ -104,7 +135,7 @@ export const DeckGLContainer = memo(
       }
 
       return props.layers as Layer[];
-    }, [props.layers]);
+    }, [props.layers, props.mapStyle]);
 
     const isCustomTooltip = (content: ReactNode): boolean =>
       isValidElement(content) &&
@@ -120,35 +151,7 @@ export const DeckGLContainer = memo(
       return <Tooltip tooltip={tooltipState} />;
     };
 
-    const theme = useTheme();
     const { children = null, height, width } = props;
-    const isMapbox = props.mapProvider === 'mapbox';
-    const mapStyle = props.mapStyle || DEFAULT_MAP_STYLE;
-
-    if (isMapbox && !props.mapboxApiKey) {
-      return (
-        <div
-          style={{
-            width,
-            height,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: 16,
-            textAlign: 'center',
-            color: theme.colorTextSecondary,
-          }}
-        >
-          {t(
-            'Mapbox requires a MAPBOX_API_KEY to be configured on the server.',
-          )}
-        </div>
-      );
-    }
-
-    if (isMapbox && props.mapboxApiKey) {
-      mapboxgl.accessToken = props.mapboxApiKey;
-    }
 
     return (
       <>
@@ -159,25 +162,28 @@ export const DeckGLContainer = memo(
             e.stopPropagation();
           }}
         >
-          {isMapbox ? (
-            <MapboxMap
-              {...viewState}
-              onMove={onMove}
-              mapStyle={mapStyle}
-              style={{ width, height }}
-            >
-              <DeckGLOverlayMapbox layers={layers()} />
-            </MapboxMap>
-          ) : (
-            <MapLibreMap
-              {...viewState}
-              onMove={onMove}
-              mapStyle={mapStyle}
-              style={{ width, height }}
-            >
-              <DeckGLOverlayMapLibre layers={layers()} />
-            </MapLibreMap>
-          )}
+          <DeckGL
+            controller
+            width={width}
+            height={height}
+            layers={layers()}
+            viewState={viewState}
+            onViewStateChange={onViewStateChange}
+            onAfterRender={(context: {
+              device: Device;
+              gl: WebGL2RenderingContext;
+            }) => {
+              glContextRef.current = context.gl;
+            }}
+          >
+            {props.mapStyle?.startsWith(MAPBOX_LAYER_PREFIX) && (
+              <StaticMap
+                preserveDrawingBuffer
+                mapStyle={props.mapStyle || 'light'}
+                mapboxApiAccessToken={props.mapboxApiAccessToken}
+              />
+            )}
+          </DeckGL>
           {children}
         </div>
         {renderTooltip(tooltip)}

superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/Multi.test.tsx

@@ -58,7 +58,7 @@ const baseMockProps = {
     viz_type: 'deck_multi',
     deck_slices: [1, 2],
     autozoom: false,
-    map_style: 'mapbox://styles/mapbox/light-v9',
+    mapbox_style: 'mapbox://styles/mapbox/light-v9',
   },
   payload: {
     data: {

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

@@ -50,7 +50,6 @@ import {
 import { getExploreLongUrl } from '../utils/explore';
 import layerGenerators from '../layers';
 import fitViewport, { Viewport } from '../utils/fitViewport';
-import { getMapboxApiKey } from '../utils/mapbox';
 import { TooltipProps } from '../components/Tooltip';
 
 import { getPoints as getPointsArc } from '../layers/Arc/Arc';
@@ -378,7 +377,7 @@ const DeckMulti = (props: DeckMultiProps) => {
     );
 
     if (deckSlicesChanged || visibilityFilterChanged) {
-      loadLayers(formData, payload, visibleDeckLayersFromRedux);
+      loadLayers(formData, payload, undefined);
     }
   }, [
     loadLayers,
@@ -388,7 +387,7 @@ const DeckMulti = (props: DeckMultiProps) => {
     props,
   ]);
 
-  const { formData, setControlValue, height, width } = props;
+  const { payload, formData, setControlValue, height, width } = props;
 
   const layers = useMemo(
     () =>
@@ -402,15 +401,10 @@ const DeckMulti = (props: DeckMultiProps) => {
     <MultiWrapper height={height} width={width}>
       <DeckGLContainerStyledWrapper
         ref={containerRef}
+        mapboxApiAccessToken={payload.data.mapboxApiKey}
         viewport={viewport}
         layers={layers}
-        mapStyle={
-          formData.map_renderer === 'mapbox'
-            ? formData.mapbox_style
-            : formData.maplibre_style
-        }
-        mapProvider={formData.map_renderer === 'mapbox' ? 'mapbox' : 'maplibre'}
-        mapboxApiKey={getMapboxApiKey()}
+        mapStyle={formData.mapbox_style}
         setControlValue={setControlValue}
         onViewportChange={setViewport}
         height={height}

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

@@ -18,13 +18,7 @@
  */
 import { t } from '@apache-superset/core/translation';
 import { validateNonEmpty } from '@superset-ui/core';
-import {
-  viewport,
-  mapboxStyle,
-  maplibreStyle,
-  mapProvider,
-  autozoom,
-} from '../utilities/Shared_DeckGL';
+import { viewport, mapboxStyle, autozoom } from '../utilities/Shared_DeckGL';
 
 export default {
   controlPanelSections: [
@@ -32,9 +26,7 @@ export default {
       label: t('Map'),
       expanded: true,
       controlSetRows: [
-        [mapProvider],
         [mapboxStyle],
-        [maplibreStyle],
         [viewport],
         [autozoom],
         [

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx

@@ -113,14 +113,8 @@ const Legend = ({
         <a
           href="#"
           role="button"
-          onClick={e => {
-            e.preventDefault();
-            toggleCategory(k);
-          }}
-          onDoubleClick={e => {
-            e.preventDefault();
-            showSingleCategory(k);
-          }}
+          onClick={() => toggleCategory(k)}
+          onDoubleClick={() => showSingleCategory(k)}
         >
           <span style={style}>{icon}</span> {formatCategoryLabel(k)}
         </a>

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx

@@ -42,8 +42,8 @@ const StyledDiv = styled.div<{
     position: absolute;
     top: ${top}px;
     left: ${left}px;
-    z-index: 9;
-    pointer-events: none;
+    zIndex: 9;
+    pointerEvents: none;
     ${
       variant === 'default'
         ? `
@@ -51,8 +51,8 @@ const StyledDiv = styled.div<{
       margin: ${theme.sizeUnit * 2}px;
       background: ${theme.colorBgElevated};
       color: ${theme.colorText};
-      max-width: 300px;
-      font-size: ${theme.fontSizeSM}px;
+      maxWidth: 300px;
+      fontSize: ${theme.fontSizeSM}px;
       border: 1px solid ${theme.colorBorder};
       border-radius: ${theme.borderRadius}px;
       box-shadow: ${theme.boxShadowSecondary};

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

@@ -19,7 +19,6 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { isEqual } from 'lodash';
 import type { Layer } from '@deck.gl/core';
-import { getMapboxApiKey } from './utils/mapbox';
 import {
   Datasource,
   QueryFormData,
@@ -183,23 +182,16 @@ export function createDeckGLComponent(
       }
     }, [computeLayers, prevFormData, prevFilterState, prevPayload, props]);
 
-    const { formData, setControlValue, height, width } = props;
+    const { formData, payload, setControlValue, height, width } = props;
 
     return (
       <div style={{ position: 'relative' }}>
         <DeckGLContainerStyledWrapper
           ref={containerRef}
+          mapboxApiAccessToken={payload.data.mapboxApiKey}
           viewport={viewport}
           layers={layers}
-          mapStyle={
-            formData.map_renderer === 'mapbox'
-              ? formData.mapbox_style
-              : formData.maplibre_style
-          }
-          mapProvider={
-            formData.map_renderer === 'mapbox' ? 'mapbox' : 'maplibre'
-          }
-          mapboxApiKey={getMapboxApiKey()}
+          mapStyle={formData.mapbox_style}
           setControlValue={setControlValue}
           width={width}
           height={height}
@@ -240,6 +232,7 @@ export function createCategoricalDeckGLComponent(
       <CategoricalDeckGLContainer
         datasource={datasource}
         formData={formData}
+        mapboxApiKey={payload.data.mapboxApiKey}
         setControlValue={setControlValue}
         viewport={viewport}
         getLayer={getLayer}

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

@@ -39,8 +39,6 @@ import {
   legendPosition,
   viewport,
   mapboxStyle,
-  maplibreStyle,
-  mapProvider,
   tooltipContents,
   tooltipTemplate,
   deckGLCategoricalColor,
@@ -88,12 +86,7 @@ const config: ControlPanelConfig = {
     },
     {
       label: t('Map'),
-      controlSetRows: [
-        [mapProvider],
-        [mapboxStyle],
-        [maplibreStyle],
-        [autozoom, viewport],
-      ],
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
     },
     {
       label: t('Arc'),