fix: loading examples in CI returns http error "too many requests" (#33412)

Co-authored-by: Irving Rodriguez <irodriguez@Mac.lan>

.github/labeler.yml

@@ -127,6 +127,11 @@
   - any-glob-to-any-file:
     - 'superset/translations/es/**'
 
+"i18n:persian":
+- changed-files:
+  - any-glob-to-any-file:
+    - 'superset/translations/fa/**'
+
 ############################################
 # Sub-projects and monorepo packages
 ############################################

.github/workflows/check-python-deps.yml

@@ -17,13 +17,12 @@ jobs:
   check-python-deps:
     runs-on: ubuntu-22.04
     steps:
-
       - name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
         uses: actions/checkout@v4
         with:
           persist-credentials: false
           submodules: recursive
-          depth: 1
+          fetch-depth: 1
 
       - name: Setup Python
         if: steps.check.outputs.python

.github/workflows/superset-e2e.yml

@@ -50,8 +50,8 @@ jobs:
       PYTHONPATH: ${{ github.workspace }}
       REDIS_PORT: 16379
       GITHUB_TOKEN: ${{ github.token }}
-      # use the dashboard feature when running manually OR merging to master
-      USE_DASHBOARD: ${{ github.event.inputs.use_dashboard == 'true'|| (github.ref == 'refs/heads/master' && 'true') || 'false' }}
+      # Only use dashboard when explicitly requested via workflow_dispatch
+      USE_DASHBOARD: ${{ github.event.inputs.use_dashboard == 'true' || 'false' }}
     services:
       postgres:
         image: postgres:16-alpine

.github/workflows/superset-python-unittest.yml

@@ -44,7 +44,7 @@ jobs:
           SUPERSET_TESTENV: true
           SUPERSET_SECRET_KEY: not-a-secret
         run: |
-          pytest --durations-min=0.5 --cov-report= --cov=superset ./tests/common ./tests/unit_tests --cache-clear
+          pytest --durations-min=0.5 --cov-report= --cov=superset ./tests/common ./tests/unit_tests --cache-clear --maxfail=50
       - name: Upload code coverage
         uses: codecov/codecov-action@v5
         with:

RESOURCES/INTHEWILD.md

@@ -101,6 +101,7 @@ Join our growing community!
 - [ELMO Cloud HR & Payroll](https://elmosoftware.com.au/)
 - [Endress+Hauser](https://www.endress.com/) [@rumbin]
 - [FBK - ICT center](https://ict.fbk.eu)
+- [Formbricks](https://formbricks.com)
 - [Gavagai](https://gavagai.io) [@gavagai-corp]
 - [GfK Data Lab](https://www.gfk.com/home) [@mherr]
 - [Hydrolix](https://www.hydrolix.io/)
@@ -216,6 +217,7 @@ Join our growing community!
 - [Increff](https://www.increff.com/) [@ishansinghania]
 - [komoot](https://www.komoot.com/) [@christophlingg]
 - [Let's Roam](https://www.letsroam.com/)
+- [Machrent SA](https://www.machrent.com/)
 - [Onebeat](https://1beat.com/) [@GuyAttia]
 - [X](https://x.com/)
 - [VLMedia](https://www.vlmedia.com.tr/) [@ibotheperfect]

UPDATING.md

@@ -23,7 +23,8 @@ This file documents any backwards-incompatible changes in Superset and
 assists people when migrating to a new version.
 
 ## Next
-
+- [33116](https://github.com/apache/superset/pull/33116) In Echarts Series charts (e.g. Line, Area, Bar, etc.) charts, the `x_axis_sort_series` and `x_axis_sort_series_ascending` form data items have been renamed with `x_axis_sort` and `x_axis_sort_asc`.
+There's a migration added that can potentially affect a significant number of existing charts.
 - [32317](https://github.com/apache/superset/pull/32317) The horizontal filter bar feature is now out of testing/beta development and its feature flag `HORIZONTAL_FILTER_BAR` has been removed.
 - [31976](https://github.com/apache/superset/pull/31976) Removed the `DISABLE_LEGACY_DATASOURCE_EDITOR` feature flag. The previous value of the feature flag was `True` and now the feature is permanently removed.
 - [31959](https://github.com/apache/superset/pull/32000) Removes CSV_UPLOAD_MAX_SIZE config, use your web server to control file upload size.

docker/docker-bootstrap.sh

@@ -50,7 +50,11 @@ fi
 #
 if [ -f "${REQUIREMENTS_LOCAL}" ]; then
   echo "Installing local overrides at ${REQUIREMENTS_LOCAL}"
-  uv pip install --no-cache-dir -r "${REQUIREMENTS_LOCAL}"
+  if command -v uv > /dev/null 2>&1; then
+    uv pip install --no-cache-dir -r "${REQUIREMENTS_LOCAL}"
+  else
+    pip install --no-cache-dir -r "${REQUIREMENTS_LOCAL}"
+  fi
 else
   echo "Skipping local overrides"
 fi

docs/data/countries.json

@@ -86,6 +86,7 @@
     "Israel",
     "Italy",
     "Italy (regions)",
+    "Ivory Coast",
     "Japan",
     "Jordan",
     "Kazakhstan",
@@ -143,6 +144,7 @@
     "Poland",
     "Portugal",
     "Qatar",
+    "Republic Of Serbia",
     "Romania",
     "Russia",
     "Rwanda",

docs/docs/configuration/configuring-superset.mdx

@@ -302,6 +302,15 @@ AUTH_USER_REGISTRATION = True
 AUTH_USER_REGISTRATION_ROLE = "Public"
 ```
 
+In case you want to assign the `Admin` role on new user registration, it can be assigned as follows:
+```python
+AUTH_USER_REGISTRATION_ROLE = "Admin"
+```
+If you encounter the [issue](https://github.com/apache/superset/issues/13243) of not being able to list users from the Superset main page settings, although a newly registered user has an `Admin` role, please re-run `superset init` to sync the required permissions. Below is the command to re-run `superset init` using docker compose.
+```
+docker-compose exec superset superset init
+```
+
 Then, create a `CustomSsoSecurityManager` that extends `SupersetSecurityManager` and overrides
 `oauth_user_info`:
 

docs/docs/configuration/databases.mdx

@@ -1293,6 +1293,13 @@ The connection string for SQL Server looks like this:
 mssql+pyodbc:///?odbc_connect=Driver%3D%7BODBC+Driver+17+for+SQL+Server%7D%3BServer%3Dtcp%3A%3Cmy_server%3E%2C1433%3BDatabase%3Dmy_database%3BUid%3Dmy_user_name%3BPwd%3Dmy_password%3BEncrypt%3Dyes%3BConnection+Timeout%3D30
 ```
 
+:::note
+You might have noticed that some special charecters are used in the above connection string. For example see the `odbc_connect` parameter. The value is `Driver%3D%7BODBC+Driver+17+for+SQL+Server%7D%3B` which is a URL-encoded form of `Driver={ODBC+Driver+17+for+SQL+Server};`. It's important to give the connection string is URL encoded.
+
+For more information about this check the [sqlalchemy documentation](https://docs.sqlalchemy.org/en/20/core/engines.html#escaping-special-characters-such-as-signs-in-passwords). Which says `When constructing a fully formed URL string to pass to create_engine(), special characters such as those that may be used in the user and password need to be URL encoded to be parsed correctly. This includes the @ sign.`
+:::
+
+
 #### StarRocks
 
 The [sqlalchemy-starrocks](https://pypi.org/project/starrocks/) library is the recommended

docs/docs/contributing/resources.mdx

@@ -4,9 +4,95 @@ version: 1
 ---
 
 import InteractiveSVG from '../../src/components/InteractiveERDSVG';
+import Mermaid from '@theme/Mermaid';
 
 # Resources
 
+## High Level Architecture
+<div style={{ maxWidth: "600px", margin: "0 auto",  marginLeft: 0, marginRight: "auto" }}>
+```mermaid
+flowchart TD
+
+  %% Top Level
+  LB["<b>Load Balancer(s)</b><br/>(optional)"]
+  LB -.-> WebServers
+
+  %% Web Servers
+  subgraph WebServers ["<b>Web Server(s)</b>"]
+    WS1["<b>Frontend</b><br/>(React, AntD, ECharts, AGGrid)"]
+    WS2["<b>Backend</b><br/>(Python, Flask, SQLAlchemy, Pandas, ...)"]
+  end
+
+  %% Infra
+  subgraph InfraServices ["<b>Infra</b>"]
+    DB[("<b>Metadata Database</b><br/>(Postgres / MySQL)")]
+
+    subgraph Caching ["<b>Caching Subservices<br/></b>(Redis, memcache, S3, ...)"]
+      direction LR
+      DummySpace[" "]:::invisible
+      QueryCache["<b>Query Results Cache</b><br/>(Accelerated Dashboards)"]
+      CsvCache["<b>CSV Exports Cache</b>"]
+      ThumbnailCache["<b>Thumbnails Cache</b>"]
+      AlertImageCache["<b>Alert/Report Images Cache</b>"]
+	  QueryCache -- " " --> CsvCache
+	  linkStyle 1 stroke:transparent;
+      ThumbnailCache -- " " --> AlertImageCache
+	  linkStyle 2 stroke:transparent;
+    end
+
+    Broker(("<b>Message Queue</b><br/>(Redis / RabbitMQ / SQS)"))
+  end
+
+  AsyncBackend["<b>Async Workers (Celery)</b><br>required for Alerts & Reports, thumbnails, CSV exports, long-running workloads, ..."]
+
+  %% External DBs
+  subgraph ExternalDatabases ["<b>Analytics Databases</b>"]
+    direction LR
+    BigQuery[(BigQuery)]
+    Snowflake[(Snowflake)]
+    Redshift[(Redshift)]
+    Postgres[(Postgres)]
+    Postgres[(... any ...)]
+  end
+
+  %% Connections
+  LB -.-> WebServers
+  WebServers --> DB
+  WebServers -.-> Caching
+  WebServers -.-> Broker
+  WebServers -.-> ExternalDatabases
+
+  Broker -.-> AsyncBackend
+
+  AsyncBackend -.-> ExternalDatabases
+  AsyncBackend -.-> Caching
+
+
+
+  %% Legend styling
+  classDef requiredNode stroke-width:2px,stroke:black;
+  class Required requiredNode;
+  class Optional optionalNode;
+
+  %% Hide real arrow
+  linkStyle 0 stroke:transparent;
+
+  %% Styling
+  classDef optionalNode stroke-dasharray: 5 5, opacity:0.9;
+  class LB optionalNode;
+  class Caching optionalNode;
+  class AsyncBackend optionalNode;
+  class Broker optionalNode;
+  class QueryCache optionalNode;
+  class CsvCache optionalNode;
+  class ThumbnailCache optionalNode;
+  class AlertImageCache optionalNode;
+  class Celery optionalNode;
+
+  classDef invisible fill:transparent,stroke:transparent;
+```
+</div>
+
 ## Entity-Relationship Diagram
 
 Here is our interactive ERD:

docs/docs/installation/docker-builds.mdx

@@ -1,7 +1,7 @@
 ---
 title: Docker Builds
 hide_title: true
-sidebar_position: 6
+sidebar_position: 7
 version: 1
 ---
 
@@ -44,7 +44,7 @@ Here are the build presets that are exposed through the `supersetbot docker` uti
 - `py311`, e.g., Py311: Similar to lean but with a different Python version (in this example, 3.11).
 - `ci`: For certain CI workloads.
 - `websocket`: For Superset clusters supporting advanced features.
-- `dockerize`: Used by Helm.
+- `dockerize`: Used by Helm in initContainers to wait for database dependencies to be available.
 
 ## Key tags examples
 

docs/docs/installation/docker-compose.mdx

@@ -1,7 +1,7 @@
 ---
 title: Docker Compose
 hide_title: true
-sidebar_position: 4
+sidebar_position: 5
 version: 1
 ---
 

docs/docs/installation/installation-methods.mdx

@@ -0,0 +1,58 @@
+---
+title: Installation Methods
+hide_title: true
+sidebar_position: 2
+version: 1
+---
+
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+# Installation Methods
+
+How should you install Superset? Here's a comparison of the different options. It will help if you've first read the [Architecture](/docs/installation/architecture.mdx) page to understand Superset's different components.
+
+The fundamental trade-off is between you needing to do more of the detail work yourself vs. using a more complex deployment route that handles those details.
+
+## [Docker Compose](/docs/installation/docker-compose.mdx)
+
+**Summary:** This takes advantage of containerization while remaining simpler than Kubernetes. This is the best way to try out Superset; it's also useful for developing & contributing back to Superset.
+
+If you're not just demoing the software, you'll need a moderate understanding of Docker to customize your deployment and avoid a few risks. Even when fully-optimized this is not as robust a method as Kubernetes when it comes to large-scale production deployments.
+
+You manage a superset-config.py file and a docker-compose.yml file. Docker Compose brings up all the needed services - the Superset application, a Postgres metadata DB, Redis cache, Celery worker and beat. They are automatically connected to each other.
+
+**Responsibilities**
+
+You will need to back up your metadata DB. That could mean backing up the service running as a Docker container and its volume; ideally you are running Postgres as a service outside of that container and backing up that service.
+
+You will also need to extend the Superset docker image. The default `lean` images do not contain drivers needed to access your metadata database (Postgres or MySQL), nor to access your data warehouse, nor the headless browser needed for Alerts & Reports. You could run a `-dev` image while demoing Superset, which has some of this, but you'll still need to install the driver for your data warehouse. The `-dev` images run as root, which is not recommended for production.
+
+Ideally you will build your own image of Superset that extends `lean`, adding what your deployment needs.
+
+See [Docker Build Presets](/docs/installation/docker-builds/#build-presets) for more information about the different image versions you can extend.
+
+## [Kubernetes (K8s)](/docs/installation/kubernetes.mdx)
+
+**Summary:** This is the best-practice way to deploy a production instance of Superset, but has the steepest skill requirement - someone who knows Kubernetes.
+
+You will deploy Superset into a K8s cluster. The most common method is using the community-maintained Helm chart, though work is now underway to implement [SIP-149 - a Kubernetes Operator for Superset](https://github.com/apache/superset/issues/31408).
+
+A K8s deployment can scale up and down based on usage and deploy rolling updates with zero downtime - features that big deployments appreciate.
+
+**Responsibilities**
+
+You will need to build your own Docker image, and back up your metadata DB, both as described in Docker Compose above. You'll also need to customize your Helm chart values and deploy and maintain your Kubernetes cluster.
+
+## [PyPI (Python)](/docs/installation/pypi.mdx)
+
+**Summary:** This is the only method that requires no knowledge of containers. It requires the most hands-on work to deploy, connect, and maintain each component.
+
+You install Superset as a Python package and run it that way, providing your own metadata database. Superset has documentation on how to install this way, but it is updated infrequently.
+
+If you want caching, you'll set up Redis or RabbitMQ. If you want Alerts & Reports, you'll set up Celery.
+
+**Responsibilities**
+
+You will need to get the component services running and communicating with each other. You'll need to arrange backups of your metadata database.
+
+When upgrading, you'll need to manage the system environment and packages and ensure all components have functional dependencies.

docs/docs/installation/kubernetes.mdx

@@ -1,7 +1,7 @@
 ---
 title:  Kubernetes
 hide_title: true
-sidebar_position: 2
+sidebar_position: 3
 version: 1
 ---
 

docs/docs/installation/pypi.mdx

@@ -1,7 +1,7 @@
 ---
 title: PyPI
 hide_title: true
-sidebar_position: 3
+sidebar_position: 4
 version: 1
 ---
 

docs/docs/installation/upgrading-superset.mdx

@@ -1,7 +1,7 @@
 ---
 title: Upgrading Superset
 hide_title: true
-sidebar_position: 5
+sidebar_position: 6
 version: 1
 ---
 

docs/docs/quickstart.mdx

@@ -32,7 +32,7 @@ git clone https://github.com/apache/superset
 $ cd superset
 
 # Set the repo to the state associated with the latest official version
-$ git checkout tags/4.1.1
+$ git checkout tags/4.1.2
 
 # Fire up Superset using Docker Compose
 $ docker compose -f docker-compose-image-tag.yml up

docs/docs/security/security.mdx

@@ -64,6 +64,26 @@ tables in the **Permissions** dropdown. To select the data sources you want to a
 You can then confirm with users assigned to the **Gamma** role that they see the
 objects (dashboards and slices) associated with the tables you just extended them.
 
+### SQL Execution Security Considerations
+
+Apache Superset includes features designed to provide safeguards when interacting with connected databases, such as the `DISALLOWED_SQL_FUNCTIONS` configuration setting. This aims to prevent the execution of potentially harmful database functions or system variables directly from Superset interfaces like SQL Lab.
+
+However, it is crucial to understand the following:
+
+**Superset is Not a Database Firewall**: Superset's built-in checks, like `DISALLOWED_SQL_FUNCTIONS`, provide a layer of protection but cannot guarantee complete security against all database-level threats or advanced bypass techniques (like specific comment injection methods). They should be viewed as a supplement to, not a replacement for, robust database security.
+
+**Configuration is Key**: The effectiveness of Superset's safeguards heavily depends on proper configuration by the Superset administrator. This includes maintaining the `DISALLOWED_SQL_FUNCTIONS` list, carefully managing feature flags (like `ENABLE_TEMPLATE_PROCESSING`), and configuring other security settings appropriately.
+
+**Database Security is Paramount**: The ultimate responsibility for securing database access, controlling permissions, and preventing unauthorized function execution lies with the database administrators (DBAs) and security teams managing the underlying database instance.
+
+**Recommended Database Practices**: We strongly recommend implementing security best practices at the database level, including:
+* **Least Privilege**: Connecting Superset using dedicated database user accounts with the minimum permissions required for Superset's operation (typically read-only access to necessary schemas/tables).
+* **Database Roles & Permissions**: Utilizing database-native roles and permissions to restrict access to sensitive functions, system variables (like `@@hostname`), schemas, or tables.
+* **Network Security**: Employing network-level controls like database firewalls or proxies to restrict connections.
+* **Auditing**: Enabling database-level auditing to monitor executed queries and access patterns.
+
+By combining Superset's configurable safeguards with strong database-level security practices, you can achieve a more robust and layered security posture.
+
 ### REST API for user & role management
 
 Flask-AppBuilder supports a REST API for user CRUD,

docs/docusaurus.config.ts

@@ -31,10 +31,13 @@ const config: Config = {
   baseUrl: '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'throw',
+  markdown: {
+    mermaid: true,
+  },
   favicon: '/img/favicon.ico',
   organizationName: 'apache',
   projectName: 'superset',
-  themes: ['@saucelabs/theme-github-codeblock'],
+  themes: ['@saucelabs/theme-github-codeblock', '@docusaurus/theme-mermaid'],
   plugins: [
     [
       'docusaurus-plugin-less',

docs/package.json

@@ -19,22 +19,23 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.2",
-    "@docusaurus/core": "^3.5.2",
-    "@docusaurus/plugin-client-redirects": "^3.5.2",
-    "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/plugin-client-redirects": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/theme-mermaid": "3.7.0",
     "@emotion/styled": "^10.0.27",
     "@saucelabs/theme-github-codeblock": "^0.3.0",
     "@superset-ui/style": "^0.14.23",
-    "antd": "^5.24.5",
+    "antd": "^5.24.9",
     "docusaurus-plugin-less": "^2.0.2",
-    "less": "^4.2.2",
+    "less": "^4.3.0",
     "less-loader": "^11.0.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-github-btn": "^1.4.0",
     "react-svg-pan-zoom": "^3.13.1",
-    "swagger-ui-react": "^5.20.2"
+    "swagger-ui-react": "^5.21.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.7.0",
@@ -43,12 +44,12 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint": "^8.0.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react": "^7.37.5",
     "prettier": "^2.0.0",
-    "typescript": "~5.8.2",
-    "webpack": "^5.98.0"
+    "typescript": "~5.8.3",
+    "webpack": "^5.99.7"
   },
   "browserslist": {
     "production": [

docs/src/pages/index.tsx

@@ -111,7 +111,7 @@ const StyledTitleContainer = styled('div')`
   }
 `;
 
-const StyledButton = styled(Link)`
+const StyledButton = styled(Link as React.ComponentType<any>)`
   border-radius: 10px;
   font-size: 20px;
   font-weight: bold;

pyproject.toml

@@ -44,7 +44,7 @@ dependencies = [
     "cryptography>=42.0.4, <45.0.0",
     "deprecation>=2.1.0, <2.2.0",
     "flask>=2.2.5, <3.0.0",
-    "flask-appbuilder>=4.6.1, <5.0.0",
+    "flask-appbuilder>=4.6.3, <5.0.0",
     "flask-caching>=2.1.0, <3",
     "flask-compress>=1.13, <2.0",
     "flask-talisman>=1.0.0, <2.0",
@@ -81,7 +81,7 @@ dependencies = [
     "python-dateutil",
     "python-dotenv", # optional dependencies for Flask but required for Superset, see https://flask.palletsprojects.com/en/stable/installation/#optional-dependencies
     "python-geohash",
-    "pyarrow>=14.0.1, <15",
+    "pyarrow>=18.1.0, <19",
     "pyyaml>=6.0.0, <7.0.0",
     "PyJWT>=2.4.0, <3.0",
     "redis>=4.6.0, <5.0",
@@ -125,7 +125,7 @@ denodo = ["denodo-sqlalchemy~=1.0.6"]
 dremio = ["sqlalchemy-dremio>=1.2.1, <4"]
 drill = ["sqlalchemy-drill>=1.1.4, <2"]
 druid = ["pydruid>=0.6.5,<0.7"]
-duckdb = ["duckdb-engine>=0.10", "duckdb>=1.1.0"]
+duckdb = ["duckdb-engine>=0.12.1, <0.13"]
 dynamodb = ["pydynamodb>=0.4.2"]
 solr = ["sqlalchemy-solr >= 0.2.0"]
 elasticsearch = ["elasticsearch-dbapi>=0.2.9, <0.3.0"]
@@ -146,6 +146,7 @@ hive = [
 impala = ["impyla>0.16.2, <0.17"]
 kusto = ["sqlalchemy-kusto>=3.0.0, <4"]
 kylin = ["kylinpy>=2.8.1, <2.9"]
+motherduck = ["duckdb==0.10.2", "duckdb-engine>=0.12.1, <0.13"]
 mssql = ["pymssql>=2.2.8, <3"]
 mysql = ["mysqlclient>=2.1.0, <3"]
 ocient = [
@@ -370,12 +371,14 @@ authorized_licenses = [
     "apache software",
     "apache software, bsd",
     "bsd",
+    "bsd-3-clause",
     "isc license (iscl)",
     "isc license",
     "mit",
     "mozilla public license 2.0 (mpl 2.0)",
     "osi approved",
     "osi approved",
+    "psf-2.0",
     "python software foundation",
     "the unlicense (unlicense)",
     "the unlicense",

requirements/base.txt

@@ -44,7 +44,7 @@ cachetools==5.5.2
     # via google-auth
 cattrs==24.1.2
     # via requests-cache
-celery==5.4.0
+celery==5.5.2
     # via apache-superset (pyproject.toml)
 certifi==2025.1.31
     # via
@@ -82,7 +82,7 @@ cron-descriptor==1.4.5
     # via apache-superset (pyproject.toml)
 croniter==6.0.0
     # via apache-superset (pyproject.toml)
-cryptography==44.0.2
+cryptography==44.0.3
     # via
     #   apache-superset (pyproject.toml)
     #   paramiko
@@ -118,7 +118,7 @@ flask==2.3.3
     #   flask-session
     #   flask-sqlalchemy
     #   flask-wtf
-flask-appbuilder==4.6.1
+flask-appbuilder==4.6.3
     # via apache-superset (pyproject.toml)
 flask-babel==2.0.0
     # via flask-appbuilder
@@ -158,22 +158,23 @@ greenlet==3.1.1
     # via
     #   apache-superset (pyproject.toml)
     #   shillelagh
+    #   sqlalchemy
 gunicorn==23.0.0
     # via apache-superset (pyproject.toml)
-h11==0.14.0
+h11==0.16.0
     # via wsproto
 hashids==1.3.1
     # via apache-superset (pyproject.toml)
 holidays==0.25
     # via apache-superset (pyproject.toml)
-humanize==4.12.2
+humanize==4.12.3
     # via apache-superset (pyproject.toml)
 idna==3.10
     # via
     #   email-validator
     #   requests
     #   trio
-importlib-metadata==8.6.1
+importlib-metadata==8.7.0
     # via apache-superset (pyproject.toml)
 isodate==0.7.2
     # via apache-superset (pyproject.toml)
@@ -191,17 +192,17 @@ jsonschema==4.23.0
     # via flask-appbuilder
 jsonschema-specifications==2024.10.1
     # via jsonschema
-kombu==5.5.0
+kombu==5.5.3
     # via celery
 korean-lunar-calendar==0.3.1
     # via holidays
-limits==4.4.1
+limits==5.1.0
     # via flask-limiter
-mako==1.3.9
+mako==1.3.10
     # via
     #   apache-superset (pyproject.toml)
     #   alembic
-markdown==3.7
+markdown==3.8
     # via apache-superset (pyproject.toml)
 markdown-it-py==3.0.0
     # via rich
@@ -235,7 +236,6 @@ numpy==1.26.4
     #   bottleneck
     #   numexpr
     #   pandas
-    #   pyarrow
 odfpy==1.4.1
     # via pandas
 openpyxl==3.1.5
@@ -244,7 +244,7 @@ ordered-set==4.1.0
     # via flask-limiter
 outcome==1.3.0.post0
     # via trio
-packaging==24.2
+packaging==25.0
     # via
     #   apache-superset (pyproject.toml)
     #   apispec
@@ -271,9 +271,9 @@ polyline==2.0.2
     # via apache-superset (pyproject.toml)
 prison==0.2.1
     # via flask-appbuilder
-prompt-toolkit==3.0.50
+prompt-toolkit==3.0.51
     # via click-repl
-pyarrow==14.0.2
+pyarrow==18.1.0
     # via apache-superset (pyproject.toml)
 pyasn1==0.6.1
     # via
@@ -294,7 +294,7 @@ pynacl==1.5.0
     # via paramiko
 pyopenssl==25.0.0
     # via shillelagh
-pyparsing==3.2.2
+pyparsing==3.2.3
     # via apache-superset (pyproject.toml)
 pysocks==1.7.1
     # via urllib3
@@ -307,11 +307,11 @@ python-dateutil==2.9.0.post0
     #   holidays
     #   pandas
     #   shillelagh
-python-dotenv==1.0.1
+python-dotenv==1.1.0
     # via apache-superset (pyproject.toml)
 python-geohash==0.8.5
     # via apache-superset (pyproject.toml)
-pytz==2025.1
+pytz==2025.2
     # via
     #   croniter
     #   flask-babel
@@ -373,7 +373,7 @@ sqlalchemy-utils==0.38.3
     # via
     #   apache-superset (pyproject.toml)
     #   flask-appbuilder
-sqlglot==26.11.1
+sqlglot==26.16.4
     # via apache-superset (pyproject.toml)
 sqlparse==0.5.3
     # via apache-superset (pyproject.toml)
@@ -398,9 +398,8 @@ typing-extensions==4.12.2
     #   rich
     #   selenium
     #   shillelagh
-tzdata==2025.1
+tzdata==2025.2
     # via
-    #   celery
     #   kombu
     #   pandas
 url-normalize==1.4.3

requirements/development.txt

@@ -72,7 +72,7 @@ cattrs==24.1.2
     # via
     #   -c requirements/base.txt
     #   requests-cache
-celery==5.4.0
+celery==5.5.2
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -138,7 +138,7 @@ croniter==6.0.0
     # via
     #   -c requirements/base.txt
     #   apache-superset
-cryptography==44.0.2
+cryptography==44.0.3
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -202,7 +202,7 @@ flask==2.3.3
     #   flask-sqlalchemy
     #   flask-testing
     #   flask-wtf
-flask-appbuilder==4.6.1
+flask-appbuilder==4.6.3
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -318,6 +318,7 @@ greenlet==3.1.1
     #   apache-superset
     #   gevent
     #   shillelagh
+    #   sqlalchemy
 grpcio==1.71.0
     # via
     #   apache-superset
@@ -329,7 +330,7 @@ gunicorn==23.0.0
     # via
     #   -c requirements/base.txt
     #   apache-superset
-h11==0.14.0
+h11==0.16.0
     # via
     #   -c requirements/base.txt
     #   wsproto
@@ -342,7 +343,7 @@ holidays==0.25
     #   -c requirements/base.txt
     #   apache-superset
     #   prophet
-humanize==4.12.2
+humanize==4.12.3
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -354,7 +355,7 @@ idna==3.10
     #   email-validator
     #   requests
     #   trio
-importlib-metadata==8.6.1
+importlib-metadata==8.7.0
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -395,7 +396,7 @@ jsonschema-specifications==2024.10.1
     #   openapi-schema-validator
 kiwisolver==1.4.7
     # via matplotlib
-kombu==5.5.0
+kombu==5.5.3
     # via
     #   -c requirements/base.txt
     #   celery
@@ -405,16 +406,16 @@ korean-lunar-calendar==0.3.1
     #   holidays
 lazy-object-proxy==1.10.0
     # via openapi-spec-validator
-limits==4.4.1
+limits==5.1.0
     # via
     #   -c requirements/base.txt
     #   flask-limiter
-mako==1.3.9
+mako==1.3.10
     # via
     #   -c requirements/base.txt
     #   alembic
     #   apache-superset
-markdown==3.7
+markdown==3.8
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -472,7 +473,6 @@ numpy==1.26.4
     #   pandas
     #   pandas-gbq
     #   prophet
-    #   pyarrow
 oauthlib==3.2.2
     # via requests-oauthlib
 odfpy==1.4.1
@@ -495,7 +495,7 @@ outcome==1.3.0.post0
     # via
     #   -c requirements/base.txt
     #   trio
-packaging==24.2
+packaging==25.0
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -565,7 +565,7 @@ prison==0.2.1
     #   flask-appbuilder
 progress==1.6
     # via apache-superset
-prompt-toolkit==3.0.50
+prompt-toolkit==3.0.51
     # via
     #   -c requirements/base.txt
     #   click-repl
@@ -586,7 +586,7 @@ psutil==6.1.0
     # via apache-superset
 psycopg2-binary==2.9.6
     # via apache-superset
-pyarrow==14.0.2
+pyarrow==18.1.0
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -635,7 +635,7 @@ pyopenssl==25.0.0
     # via
     #   -c requirements/base.txt
     #   shillelagh
-pyparsing==3.2.2
+pyparsing==3.2.3
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -668,7 +668,7 @@ python-dateutil==2.9.0.post0
     #   pyhive
     #   shillelagh
     #   trino
-python-dotenv==1.0.1
+python-dotenv==1.1.0
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -678,7 +678,7 @@ python-geohash==0.8.5
     #   apache-superset
 python-ldap==3.4.4
     # via apache-superset
-pytz==2025.1
+pytz==2025.2
     # via
     #   -c requirements/base.txt
     #   croniter
@@ -799,7 +799,7 @@ sqlalchemy-utils==0.38.3
     #   -c requirements/base.txt
     #   apache-superset
     #   flask-appbuilder
-sqlglot==26.11.1
+sqlglot==26.16.4
     # via
     #   -c requirements/base.txt
     #   apache-superset
@@ -850,10 +850,9 @@ typing-extensions==4.12.2
     #   rich
     #   selenium
     #   shillelagh
-tzdata==2025.1
+tzdata==2025.2
     # via
     #   -c requirements/base.txt
-    #   celery
     #   kombu
     #   pandas
 tzlocal==5.2

scripts/change_detector.py

@@ -63,7 +63,10 @@ def fetch_files_github_api(url: str):  # type: ignore
 
 def fetch_changed_files_pr(repo: str, pr_number: str) -> List[str]:
     """Fetches files changed in a PR using the GitHub API."""
-    url = f"https://api.github.com/repos/{repo}/pulls/{pr_number}/files"
+
+    # NOTE: limited to 100 files ideally should page-through but instead resorting
+    # to assuming we should trigger when 100 files have been touched
+    url = f"https://api.github.com/repos/{repo}/pulls/{pr_number}/files?per_page=100"
     files = fetch_files_github_api(url)
     return [file_info["filename"] for file_info in files]
 
@@ -103,7 +106,7 @@ def main(event_type: str, sha: str, repo: str) -> None:
     """Main function to check for file changes based on event context."""
     print("SHA:", sha)
     print("EVENT_TYPE", event_type)
-    files = None
+    files = []
     if event_type == "pull_request":
         pr_number = os.getenv("GITHUB_REF", "").split("/")[-2]
         if is_int(pr_number):
@@ -133,8 +136,11 @@ def main(event_type: str, sha: str, repo: str) -> None:
     output_path = os.getenv("GITHUB_OUTPUT") or "/tmp/GITHUB_OUTPUT.txt"  # noqa: S108
     with open(output_path, "a") as f:
         for check, changed in changes_detected.items():
-            if changed:
-                print(f"{check}={str(changed).lower()}", file=f)
+            # NOTE: as noted above, we assume that if 100 files are touched, we should
+            # trigger all checks. This is a workaround for the GitHub API limit of 100
+            # files. Using >= 99 because off-by-one errors are not uncommon
+            if changed or len(files) >= 99:
+                print(f"{check}=true", file=f)
                 print(f"Triggering group: {check}")
 
 

superset-frontend/cypress-base/cypress/e2e/dashboard/shared_dashboard_functions.ts

@@ -55,6 +55,7 @@ export function prepareDashboardFilters(
         controlValues: {
           enableEmptyFilter: false,
           defaultToFirstItem: false,
+          creatable: true,
           multiSelect: true,
           searchAllOptions: false,
           inverseSelection: false,

superset-frontend/cypress-base/cypress/e2e/explore/visualizations/big_number.test.js

@@ -56,7 +56,6 @@ describe('Visualization > Big Number with Trendline', () => {
   it('should work', () => {
     verify(BIG_NUMBER_FORM_DATA);
     cy.get('.chart-container .header-line');
-    cy.get('.chart-container .subheader-line');
     cy.get('.chart-container canvas');
   });
 
@@ -66,7 +65,7 @@ describe('Visualization > Big Number with Trendline', () => {
       compare_lag: null,
     });
     cy.get('.chart-container .header-line');
-    cy.get('.chart-container .subheader-line').should('not.exist');
+    cy.get('.chart-container .subtitle-line').should('not.exist');
     cy.get('.chart-container canvas');
   });
 
@@ -76,7 +75,6 @@ describe('Visualization > Big Number with Trendline', () => {
       show_trend_line: false,
     });
     cy.get('[data-test="chart-container"] .header-line');
-    cy.get('[data-test="chart-container"] .subheader-line');
     cy.get('[data-test="chart-container"] canvas').should('not.exist');
   });
 });

superset-frontend/cypress-base/cypress/e2e/explore/visualizations/table.test.ts

@@ -252,4 +252,215 @@ describe('Visualization > Table', () => {
     });
     cy.get('td').contains(/\d*%/);
   });
+
+  it('Test row limit with server pagination toggle', () => {
+    cy.visitChartByParams({
+      ...VIZ_DEFAULTS,
+      metrics: ['count'],
+      row_limit: 100,
+    });
+
+    // Enable server pagination
+    cy.get('[data-test="server_pagination-header"] div.pull-left').click();
+
+    // Click row limit control and select high value (200k)
+    cy.get('div[aria-label="Row limit"]').click();
+
+    // Type 200000 and press enter to select the option
+    cy.get('div[aria-label="Row limit"]')
+      .find('.ant-select-selection-search-input:visible')
+      .type('200000{enter}');
+
+    // Verify that there is no error tooltip when server pagination is enabled
+    cy.get('[data-test="error-tooltip"]').should('not.exist');
+
+    // Disable server pagination
+    cy.get('[data-test="server_pagination-header"] div.pull-left').click();
+
+    // Verify error tooltip appears
+    cy.get('[data-test="error-tooltip"]').should('be.visible');
+
+    // Trigger mouseover and verify tooltip text
+    cy.get('[data-test="error-tooltip"]').trigger('mouseover');
+
+    // Verify tooltip content
+    cy.get('.antd5-tooltip-inner').should('be.visible');
+    cy.get('.antd5-tooltip-inner').should(
+      'contain',
+      'Server pagination needs to be enabled for values over',
+    );
+
+    // Hide the tooltip by adding display:none style
+    cy.get('.antd5-tooltip').invoke('attr', 'style', 'display: none');
+
+    // Enable server pagination again
+    cy.get('[data-test="server_pagination-header"] div.pull-left').click();
+
+    cy.get('[data-test="error-tooltip"]').should('not.exist');
+
+    cy.get('div[aria-label="Row limit"]').click();
+
+    // Type 1000000
+    cy.get('div[aria-label="Row limit"]')
+      .find('.ant-select-selection-search-input:visible')
+      .type('1000000');
+
+    // Wait for 1 second
+    cy.wait(1000);
+
+    // Press enter
+    cy.get('div[aria-label="Row limit"]')
+      .find('.ant-select-selection-search-input:visible')
+      .type('{enter}');
+
+    // Wait for error tooltip to appear and verify its content
+    cy.get('[data-test="error-tooltip"]')
+      .should('be.visible')
+      .trigger('mouseover');
+
+    // Wait for tooltip content and verify
+    cy.get('.antd5-tooltip-inner').should('exist');
+    cy.get('.antd5-tooltip-inner').should('be.visible');
+
+    // Verify tooltip content separately
+    cy.get('.antd5-tooltip-inner').should('contain', 'Value cannot exceed');
+  });
+
+  it('Test sorting with server pagination enabled', () => {
+    cy.visitChartByParams({
+      ...VIZ_DEFAULTS,
+      metrics: ['count'],
+      groupby: ['name'],
+      row_limit: 100000,
+      server_pagination: true, // Enable server pagination
+    });
+
+    // Wait for the initial data load
+    cy.wait('@chartData');
+
+    // Get the first column header (name)
+    cy.get('.chart-container th').contains('name').as('nameHeader');
+
+    // Click to sort ascending
+    cy.get('@nameHeader').click();
+    cy.wait('@chartData');
+
+    // Verify first row starts with 'A'
+    cy.get('.chart-container td:first').invoke('text').should('match', /^[Aa]/);
+
+    // Click again to sort descending
+    cy.get('@nameHeader').click();
+    cy.wait('@chartData');
+
+    // Verify first row starts with 'Z'
+    cy.get('.chart-container td:first').invoke('text').should('match', /^[Zz]/);
+
+    // Test numeric sorting
+    cy.get('.chart-container th').contains('COUNT').as('countHeader');
+
+    // Click to sort ascending by count
+    cy.get('@countHeader').click();
+    cy.wait('@chartData');
+
+    // Get first two count values and verify ascending order
+    cy.get('.chart-container td:nth-child(2)').then($cells => {
+      const first = parseFloat($cells[0].textContent || '0');
+      const second = parseFloat($cells[1].textContent || '0');
+      expect(first).to.be.at.most(second);
+    });
+
+    // Click again to sort descending
+    cy.get('@countHeader').click();
+    cy.wait('@chartData');
+
+    // Get first two count values and verify descending order
+    cy.get('.chart-container td:nth-child(2)').then($cells => {
+      const first = parseFloat($cells[0].textContent || '0');
+      const second = parseFloat($cells[1].textContent || '0');
+      expect(first).to.be.at.least(second);
+    });
+  });
+
+  it('Test search with server pagination enabled', () => {
+    cy.visitChartByParams({
+      ...VIZ_DEFAULTS,
+      metrics: ['count'],
+      groupby: ['name', 'state'],
+      row_limit: 100000,
+      server_pagination: true,
+      include_search: true,
+    });
+
+    cy.wait('@chartData');
+
+    // Basic search test
+    cy.get('span.dt-global-filter input.form-control.input-sm').should(
+      'be.visible',
+    );
+
+    cy.get('span.dt-global-filter input.form-control.input-sm').type('John');
+
+    cy.wait('@chartData');
+
+    cy.get('.chart-container tbody tr').each($row => {
+      cy.wrap($row).contains(/John/i);
+    });
+
+    // Clear and test case-insensitive search
+    cy.get('span.dt-global-filter input.form-control.input-sm').clear();
+
+    cy.wait('@chartData');
+
+    cy.get('span.dt-global-filter input.form-control.input-sm').type('mary');
+
+    cy.wait('@chartData');
+
+    cy.get('.chart-container tbody tr').each($row => {
+      cy.wrap($row).contains(/Mary/i);
+    });
+
+    // Test special characters
+    cy.get('span.dt-global-filter input.form-control.input-sm').clear();
+
+    cy.get('span.dt-global-filter input.form-control.input-sm').type('Nicole');
+
+    cy.wait('@chartData');
+
+    cy.get('.chart-container tbody tr').each($row => {
+      cy.wrap($row).contains(/Nicole/i);
+    });
+
+    // Test no results
+    cy.get('span.dt-global-filter input.form-control.input-sm').clear();
+
+    cy.get('span.dt-global-filter input.form-control.input-sm').type('XYZ123');
+
+    cy.wait('@chartData');
+
+    cy.get('.chart-container').contains('No records found');
+
+    // Test column-specific search
+    cy.get('.search-select').should('be.visible');
+
+    cy.get('.search-select').click();
+
+    cy.get('.ant-select-dropdown').should('be.visible');
+
+    cy.get('.ant-select-item-option').contains('state').should('be.visible');
+
+    cy.get('.ant-select-item-option').contains('state').click();
+
+    cy.get('span.dt-global-filter input.form-control.input-sm').clear();
+
+    cy.get('span.dt-global-filter input.form-control.input-sm').type('CA');
+
+    cy.wait('@chartData');
+    cy.wait(1000);
+
+    cy.get('td[aria-labelledby="header-state"]').should('be.visible');
+
+    cy.get('td[aria-labelledby="header-state"]')
+      .first()
+      .should('contain', 'CA');
+  });
 });

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

@@ -2581,11 +2581,12 @@
       "peer": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.17.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
-      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "license": "MIT",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -9244,9 +9245,10 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -12806,11 +12808,11 @@
       "peer": true
     },
     "@babel/runtime": {
-      "version": "7.17.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
-      "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/template": {
@@ -17857,9 +17859,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regenerator-transform": {
       "version": "0.15.1",

superset-frontend/package-lock.json

@@ -23,7 +23,7 @@
         "@reduxjs/toolkit": "^1.9.3",
         "@rjsf/core": "^5.21.1",
         "@rjsf/utils": "^5.24.3",
-        "@rjsf/validator-ajv8": "^5.22.3",
+        "@rjsf/validator-ajv8": "^5.24.9",
         "@scarf/scarf": "^1.4.0",
         "@superset-ui/chart-controls": "file:./packages/superset-ui-chart-controls",
         "@superset-ui/core": "file:./packages/superset-ui-core",
@@ -115,7 +115,7 @@
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.6",
         "react-hot-loader": "^4.13.1",
-        "react-intersection-observer": "^9.10.2",
+        "react-intersection-observer": "^9.16.0",
         "react-js-cron": "^2.1.2",
         "react-json-tree": "^0.17.0",
         "react-lines-ellipsis": "^0.15.4",
@@ -162,7 +162,7 @@
         "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-transform-modules-commonjs": "^7.26.3",
-        "@babel/plugin-transform-runtime": "^7.25.9",
+        "@babel/plugin-transform-runtime": "^7.27.1",
         "@babel/preset-env": "^7.26.7",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
@@ -1146,14 +1146,14 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.27.1",
         "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1240,13 +1240,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
-      "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.1.tgz",
+      "integrity": "sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.26.5",
-        "@babel/types": "^7.26.5",
+        "@babel/parser": "^7.27.1",
+        "@babel/types": "^7.27.1",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^3.0.2"
@@ -1387,13 +1387,13 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1431,9 +1431,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
-      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1491,18 +1491,18 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -1572,12 +1572,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
-      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.1.tgz",
+      "integrity": "sha512-I0dZ3ZpCrJ1c04OqlNsQcKiZlsrXf/kkE4FXzID9rIOYICsAbA8mMDzhW/luRNAHdCNt7os/u8wenklZDlUVUQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.7"
+        "@babel/types": "^7.27.1"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -2849,16 +2849,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz",
-      "integrity": "sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.27.1.tgz",
+      "integrity": "sha512-TqGF3desVsTcp3WrJGj4HfKokfCXCLcHpt4PJF0D8/iT6LPd9RS82Upw3KPeyr6B22Lfd3DO8MVrmp0oRkUDdw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
         "babel-plugin-polyfill-corejs2": "^0.4.10",
-        "babel-plugin-polyfill-corejs3": "^0.10.6",
+        "babel-plugin-polyfill-corejs3": "^0.11.0",
         "babel-plugin-polyfill-regenerator": "^0.6.1",
         "semver": "^6.3.1"
       },
@@ -2869,6 +2869,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz",
+      "integrity": "sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.3",
+        "core-js-compat": "^3.40.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -3279,30 +3293,30 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
-      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.1.tgz",
+      "integrity": "sha512-Fyo3ghWMqkHHpHQCoBs2VnYjR4iWFFjguTDEqA5WgZDOrFesVjMhMM2FSqTKSoUSDO1VQtavj8NFpdRBEvJTtg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.25.9",
-        "@babel/parser": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz",
-      "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.1.tgz",
+      "integrity": "sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.5",
-        "@babel/parser": "^7.26.7",
-        "@babel/template": "^7.25.9",
-        "@babel/types": "^7.26.7",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.1",
+        "@babel/parser": "^7.27.1",
+        "@babel/template": "^7.27.1",
+        "@babel/types": "^7.27.1",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -3311,13 +3325,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
-      "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz",
+      "integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -8498,9 +8512,9 @@
       }
     },
     "node_modules/@rjsf/validator-ajv8": {
-      "version": "5.24.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.24.1.tgz",
-      "integrity": "sha512-p6URehglU9yFUAoQXE1ryqZjLYSjc6qdbiUfCVvEFAzUuMECsIFomz2hH3CPlt10K72sAFdzwVvrKn1iWTnxDw==",
+      "version": "5.24.9",
+      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.24.9.tgz",
+      "integrity": "sha512-leHb39Qa612QhAfvw36qi/ubWa7LQ6hrPN4Ge93QBlWywRfV/M0Wmx9bPccCGgIL4Qnn1Wmt53EWV8kQT28xTA==",
       "license": "Apache-2.0",
       "dependencies": {
         "ajv": "^8.12.0",
@@ -26682,9 +26696,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-      "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
+      "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -39476,9 +39490,9 @@
       }
     },
     "node_modules/react-intersection-observer": {
-      "version": "9.15.1",
-      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
-      "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+      "version": "9.16.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
+      "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -48975,6 +48989,7 @@
         "@types/react": "*",
         "@types/react-loadable": "*",
         "@types/tinycolor2": "*",
+        "nanoid": "^5.0.9",
         "react": "^17.0.2",
         "react-loadable": "^5.5.0",
         "tinycolor2": "*"
@@ -50863,7 +50878,7 @@
       "version": "0.20.3",
       "license": "Apache-2.0",
       "dependencies": {
-        "@types/react-redux": "^7.1.10",
+        "@types/react-redux": "^7.1.34",
         "d3-array": "^1.2.0",
         "dayjs": "^1.11.13",
         "lodash": "^4.17.21"

superset-frontend/package.json

@@ -90,7 +90,7 @@
     "@reduxjs/toolkit": "^1.9.3",
     "@rjsf/core": "^5.21.1",
     "@rjsf/utils": "^5.24.3",
-    "@rjsf/validator-ajv8": "^5.22.3",
+    "@rjsf/validator-ajv8": "^5.24.9",
     "@scarf/scarf": "^1.4.0",
     "@superset-ui/chart-controls": "file:./packages/superset-ui-chart-controls",
     "@superset-ui/core": "file:./packages/superset-ui-core",
@@ -182,7 +182,7 @@
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.6",
     "react-hot-loader": "^4.13.1",
-    "react-intersection-observer": "^9.10.2",
+    "react-intersection-observer": "^9.16.0",
     "react-js-cron": "^2.1.2",
     "react-json-tree": "^0.17.0",
     "react-lines-ellipsis": "^0.15.4",
@@ -229,7 +229,7 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-modules-commonjs": "^7.26.3",
-    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.27.1",
     "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",

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

@@ -42,7 +42,7 @@ const FlexRowContainer = styled.div`
 `;
 
 export interface MetricOptionProps {
-  metric: Omit<Metric, 'id'> & { label?: string };
+  metric: Omit<Metric, 'id' | 'uuid'> & { label?: string };
   openInNewWindow?: boolean;
   showFormula?: boolean;
   showType?: boolean;

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

@@ -97,7 +97,7 @@ export const getColumnTooltipNode = (
   );
 };
 
-type MetricType = Omit<Metric, 'id'> & { label?: string };
+type MetricType = Omit<Metric, 'id' | 'uuid'> & { label?: string };
 
 export const getMetricTooltipNode = (
   metric: MetricType,

superset-frontend/packages/superset-ui-chart-controls/src/constants.ts

@@ -26,6 +26,7 @@ import {
 import { ColumnMeta, SortSeriesData, SortSeriesType } from './types';
 
 export const DEFAULT_MAX_ROW = 100000;
+export const DEFAULT_MAX_ROW_TABLE_SERVER = 500000;
 
 // eslint-disable-next-line import/prefer-default-export
 export const TIME_FILTER_LABELS = {

superset-frontend/packages/superset-ui-chart-controls/src/fixtures.ts

@@ -21,7 +21,6 @@ import { Dataset } from './types';
 
 export const TestDataset: Dataset = {
   column_formats: {},
-  currency_formats: {},
   columns: [
     {
       advanced_data_type: undefined,
@@ -121,6 +120,7 @@ export const TestDataset: Dataset = {
   main_dttm_col: 'ds',
   metrics: [
     {
+      uuid: '123',
       certification_details: null,
       certified_by: null,
       d3format: null,

superset-frontend/packages/superset-ui-chart-controls/src/operators/renameOperator.ts

@@ -26,6 +26,7 @@ import {
 } from '@superset-ui/core';
 import { PostProcessingFactory } from './types';
 import { getMetricOffsetsMap, isTimeComparison } from './utils';
+import { TIME_COMPARISON_SEPARATOR } from './utils/constants';
 
 export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
   formData,
@@ -37,50 +38,60 @@ export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
   );
   const { truncate_metric } = formData;
   const xAxisLabel = getXAxisLabel(formData);
+  const isTimeComparisonValue = isTimeComparison(formData, queryObject);
+
   // remove or rename top level of column name(metric name) in the MultiIndex when
-  // 1) only 1 metric
+  // 1) at least 1 metric
   // 2) dimension exist
   // 3) xAxis exist
-  // 4) time comparison exist, and comparison type is "actual values"
-  // 5) truncate_metric in form_data and truncate_metric is true
+  // 4) truncate_metric in form_data and truncate_metric is true
   if (
-    metrics.length === 1 &&
+    metrics.length > 0 &&
     columns.length > 0 &&
     xAxisLabel &&
-    !(
-      // todo: we should provide an approach to handle derived metrics
-      (
-        isTimeComparison(formData, queryObject) &&
-        [
-          ComparisonType.Difference,
-          ComparisonType.Ratio,
-          ComparisonType.Percentage,
-        ].includes(formData.comparison_type)
-      )
-    ) &&
     truncate_metric !== undefined &&
     !!truncate_metric
   ) {
     const renamePairs: [string, string | null][] = [];
-
     if (
       // "actual values" will add derived metric.
       // we will rename the "metric" from the metricWithOffset label
       // for example: "count__1 year ago" =>	"1 year ago"
-      isTimeComparison(formData, queryObject) &&
-      formData.comparison_type === ComparisonType.Values
+      isTimeComparisonValue
     ) {
       const metricOffsetMap = getMetricOffsetsMap(formData, queryObject);
       const timeOffsets = ensureIsArray(formData.time_compare);
-      [...metricOffsetMap.keys()].forEach(metricWithOffset => {
-        const offsetLabel = timeOffsets.find(offset =>
-          metricWithOffset.includes(offset),
-        );
-        renamePairs.push([metricWithOffset, offsetLabel]);
-      });
+      [...metricOffsetMap.entries()].forEach(
+        ([metricWithOffset, metricOnly]) => {
+          const offsetLabel = timeOffsets.find(offset =>
+            metricWithOffset.includes(offset),
+          );
+          renamePairs.push([
+            formData.comparison_type === ComparisonType.Values
+              ? metricWithOffset
+              : [formData.comparison_type, metricOnly, metricWithOffset].join(
+                  TIME_COMPARISON_SEPARATOR,
+                ),
+            metrics.length > 1 ? `${metricOnly}, ${offsetLabel}` : offsetLabel,
+          ]);
+        },
+      );
     }
 
-    renamePairs.push([getMetricLabel(metrics[0]), null]);
+    if (
+      ![
+        ComparisonType.Difference,
+        ComparisonType.Percentage,
+        ComparisonType.Ratio,
+      ].includes(formData.comparison_type) &&
+      metrics.length === 1
+    ) {
+      renamePairs.push([getMetricLabel(metrics[0]), null]);
+    }
+
+    if (renamePairs.length === 0) {
+      return undefined;
+    }
 
     return {
       operation: 'rename',

superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx

@@ -23,8 +23,6 @@ import {
   xAxisForceCategoricalControl,
   xAxisSortAscControl,
   xAxisSortControl,
-  xAxisSortSeriesAscendingControl,
-  xAxisSortSeriesControl,
 } from '../shared-controls';
 
 const controlsWithoutXAxis: ControlSetRow[] = [
@@ -55,8 +53,6 @@ export const echartsTimeSeriesQueryWithXAxisSort: ControlPanelSectionConfig = {
     [xAxisForceCategoricalControl],
     [xAxisSortControl],
     [xAxisSortAscControl],
-    [xAxisSortSeriesControl],
-    [xAxisSortSeriesAscendingControl],
     ...controlsWithoutXAxis,
   ],
 };

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx

@@ -57,9 +57,7 @@ export const contributionModeControl = {
 };
 
 const xAxisSortVisibility = ({ controls }: { controls: ControlStateMapping }) =>
-  isSortable(controls) &&
-  ensureIsArray(controls?.groupby?.value).length === 0 &&
-  ensureIsArray(controls?.metrics?.value).length === 1;
+  isSortable(controls);
 
 // TODO: Expand this aggregation options list to include all backend-supported aggregations.
 // TODO:  Migrate existing chart types (Pivot Table, etc.) to use this shared control.
@@ -87,15 +85,6 @@ export const aggregationControl = {
   },
 };
 
-const xAxisMultiSortVisibility = ({
-  controls,
-}: {
-  controls: ControlStateMapping;
-}) =>
-  isSortable(controls) &&
-  (!!ensureIsArray(controls?.groupby?.value).length ||
-    ensureIsArray(controls?.metrics?.value).length > 1);
-
 export const xAxisSortControl = {
   name: 'x_axis_sort',
   config: {
@@ -104,7 +93,7 @@ export const xAxisSortControl = {
       state.form_data?.orientation === 'horizontal'
         ? t('Y-Axis Sort By')
         : t('X-Axis Sort By'),
-    description: t('Decides which column to sort the base axis by.'),
+    description: t('Decides which column or measure to sort the base axis by.'),
     shouldMapStateToProps: () => true,
     mapStateToProps: (state: ControlPanelState, controlState: ControlState) => {
       const { controls, datasource } = state;
@@ -112,23 +101,35 @@ export const xAxisSortControl = {
       const columns = [controls?.x_axis?.value as QueryFormColumn].filter(
         Boolean,
       );
+      const isSingleSortAvailable =
+        ensureIsArray(controls?.groupby?.value).length === 0;
+      const isMultiSortAvailable =
+        !!ensureIsArray(controls?.groupby?.value).length ||
+        ensureIsArray(controls?.metrics?.value).length > 1;
       const metrics = [
         ...ensureIsArray(controls?.metrics?.value as QueryFormMetric),
         controls?.timeseries_limit_metric?.value as QueryFormMetric,
       ].filter(Boolean);
       const metricLabels = [...new Set(metrics.map(getMetricLabel))];
       const options = [
-        ...columns.map(column => {
-          const value = getColumnLabel(column);
-          return {
-            value,
-            label: dataset?.verbose_map?.[value] || value,
-          };
-        }),
-        ...metricLabels.map(value => ({
-          value,
-          label: dataset?.verbose_map?.[value] || value,
-        })),
+        ...(isSingleSortAvailable
+          ? [
+              ...columns.map(column => {
+                const value = getColumnLabel(column);
+                return { value, label: dataset?.verbose_map?.[value] || value };
+              }),
+              ...metricLabels.map(value => ({
+                value,
+                label: dataset?.verbose_map?.[value] || value,
+              })),
+            ]
+          : []),
+        ...(isMultiSortAvailable
+          ? SORT_SERIES_CHOICES.map(choice => ({
+              value: choice[0],
+              label: choice[1],
+            }))
+          : []),
       ];
 
       const shouldReset = !(
@@ -157,7 +158,7 @@ export const xAxisSortAscControl = {
       state.form_data?.orientation === 'horizontal'
         ? t('Y-Axis Sort Ascending')
         : t('X-Axis Sort Ascending'),
-    default: true,
+    default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_ascending,
     description: t('Whether to sort ascending or descending on the base Axis.'),
     visibility: ({ controls }: { controls: ControlStateMapping }) =>
       controls?.x_axis_sort?.value !== undefined &&
@@ -184,37 +185,3 @@ export const xAxisForceCategoricalControl = {
     shouldMapStateToProps: () => true,
   },
 };
-
-export const xAxisSortSeriesControl = {
-  name: 'x_axis_sort_series',
-  config: {
-    type: 'SelectControl',
-    freeForm: false,
-    label: (state: ControlPanelState) =>
-      state.form_data?.orientation === 'horizontal'
-        ? t('Y-Axis Sort By')
-        : t('X-Axis Sort By'),
-    choices: SORT_SERIES_CHOICES,
-    default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_type,
-    renderTrigger: true,
-    description: t('Decides which measure to sort the base axis by.'),
-    visibility: xAxisMultiSortVisibility,
-  },
-};
-
-export const xAxisSortSeriesAscendingControl = {
-  name: 'x_axis_sort_series_ascending',
-  config: {
-    type: 'CheckboxControl',
-    label: (state: ControlPanelState) =>
-      state.form_data?.orientation === 'horizontal'
-        ? t('Y-Axis Sort Ascending')
-        : t('X-Axis Sort Ascending'),
-    default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_ascending,
-    description: t('Whether to sort ascending or descending on the base Axis.'),
-    renderTrigger: true,
-    visibility: ({ controls }: { controls: ControlStateMapping }) =>
-      controls?.x_axis_sort_series?.value !== undefined &&
-      xAxisMultiSortVisibility({ controls }),
-  },
-};

superset-frontend/packages/superset-ui-chart-controls/src/types.ts

@@ -69,7 +69,6 @@ export interface Dataset {
   columns: ColumnMeta[];
   metrics: Metric[];
   column_formats: Record<string, string>;
-  currency_formats: Record<string, Currency>;
   verbose_map: Record<string, string>;
   main_dttm_col: string;
   // eg. ['["ds", true]', 'ds [asc]']

superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts

@@ -43,12 +43,12 @@ const queryObject: QueryObject = {
   post_processing: [],
 };
 
-test('should skip renameOperator if exists multiple metrics', () => {
+test('should skip renameOperator for empty metrics', () => {
   expect(
     renameOperator(formData, {
       ...queryObject,
       ...{
-        metrics: ['count(*)', 'sum(sales)'],
+        metrics: [],
       },
     }),
   ).toEqual(undefined);
@@ -77,7 +77,23 @@ test('should skip renameOperator if does not exist x_axis and is_timeseries', ()
   ).toEqual(undefined);
 });
 
-test('should skip renameOperator if exists derived metrics', () => {
+test('should skip renameOperator if not is_timeseries and multi metrics', () => {
+  expect(
+    renameOperator(formData, {
+      ...queryObject,
+      ...{ is_timeseries: false, metrics: ['count(*)', 'sum(val)'] },
+    }),
+  ).toEqual(undefined);
+});
+
+test('should add renameOperator', () => {
+  expect(renameOperator(formData, queryObject)).toEqual({
+    operation: 'rename',
+    options: { columns: { 'count(*)': null }, inplace: true, level: 0 },
+  });
+});
+
+test('should add renameOperator if exists derived metrics', () => {
   [
     ComparisonType.Difference,
     ComparisonType.Ratio,
@@ -99,14 +115,14 @@ test('should skip renameOperator if exists derived metrics', () => {
           },
         },
       ),
-    ).toEqual(undefined);
-  });
-});
-
-test('should add renameOperator', () => {
-  expect(renameOperator(formData, queryObject)).toEqual({
-    operation: 'rename',
-    options: { columns: { 'count(*)': null }, inplace: true, level: 0 },
+    ).toEqual({
+      operation: 'rename',
+      options: {
+        columns: { [`${type}__count(*)__count(*)__1 year ago`]: '1 year ago' },
+        inplace: true,
+        level: 0,
+      },
+    });
   });
 });
 
@@ -170,6 +186,61 @@ test('should add renameOperator if exist "actual value" time comparison', () =>
   });
 });
 
+test('should add renameOperator if derived time comparison exists', () => {
+  expect(
+    renameOperator(
+      {
+        ...formData,
+        ...{
+          comparison_type: ComparisonType.Ratio,
+          time_compare: ['1 year ago', '1 year later'],
+        },
+      },
+      queryObject,
+    ),
+  ).toEqual({
+    operation: 'rename',
+    options: {
+      columns: {
+        'ratio__count(*)__count(*)__1 year ago': '1 year ago',
+        'ratio__count(*)__count(*)__1 year later': '1 year later',
+      },
+      inplace: true,
+      level: 0,
+    },
+  });
+});
+
+test('should add renameOperator if multiple metrics exist', () => {
+  expect(
+    renameOperator(
+      {
+        ...formData,
+        ...{
+          comparison_type: ComparisonType.Values,
+          time_compare: ['1 year ago'],
+        },
+      },
+      {
+        ...queryObject,
+        ...{
+          metrics: ['count(*)', 'sum(sales)'],
+        },
+      },
+    ),
+  ).toEqual({
+    operation: 'rename',
+    options: {
+      columns: {
+        'count(*)__1 year ago': 'count(*), 1 year ago',
+        'sum(sales)__1 year ago': 'sum(sales), 1 year ago',
+      },
+      inplace: true,
+      level: 0,
+    },
+  });
+});
+
 test('should remove renameOperator', () => {
   expect(
     renameOperator(

superset-frontend/packages/superset-ui-chart-controls/test/utils/columnChoices.test.tsx

@@ -53,7 +53,6 @@ describe('columnChoices()', () => {
         ],
         verbose_map: {},
         column_formats: { fiz: 'NUMERIC', about: 'STRING', foo: 'DATE' },
-        currency_formats: {},
         datasource_name: 'my_datasource',
         description: 'this is my datasource',
       }),
@@ -105,7 +104,6 @@ describe('columnChoices()', () => {
         ],
         verbose_map: {},
         column_formats: { fiz: 'NUMERIC', about: 'STRING', foo: 'DATE' },
-        currency_formats: {},
         datasource_name: 'my_datasource',
         description: 'this is my datasource',
       }),

superset-frontend/packages/superset-ui-chart-controls/test/utils/defineSavedMetrics.test.tsx

@@ -32,6 +32,7 @@ describe('defineSavedMetrics', () => {
         {
           metric_name: 'COUNT(*) non-default-dataset-metric',
           expression: 'COUNT(*) non-default-dataset-metric',
+          uuid: '1',
         },
       ],
       type: DatasourceType.Table,
@@ -40,7 +41,6 @@ describe('defineSavedMetrics', () => {
       columns: [],
       verbose_map: {},
       column_formats: {},
-      currency_formats: {},
       datasource_name: 'my_datasource',
       description: 'this is my datasource',
     };
@@ -48,6 +48,7 @@ describe('defineSavedMetrics', () => {
       {
         metric_name: 'COUNT(*) non-default-dataset-metric',
         expression: 'COUNT(*) non-default-dataset-metric',
+        uuid: '1',
       },
     ]);
     // @ts-ignore

superset-frontend/packages/superset-ui-chart-controls/test/utils/mainMetric.test.ts

@@ -24,15 +24,24 @@ describe('mainMetric', () => {
     expect(mainMetric(null)).toBeUndefined();
   });
   it('prefers the "count" metric when first', () => {
-    const metrics = [{ metric_name: 'count' }, { metric_name: 'foo' }];
+    const metrics = [
+      { metric_name: 'count', uuid: '1' },
+      { metric_name: 'foo', uuid: '2' },
+    ];
     expect(mainMetric(metrics)).toBe('count');
   });
   it('prefers the "count" metric when not first', () => {
-    const metrics = [{ metric_name: 'foo' }, { metric_name: 'count' }];
+    const metrics = [
+      { metric_name: 'foo', uuid: '1' },
+      { metric_name: 'count', uuid: '2' },
+    ];
     expect(mainMetric(metrics)).toBe('count');
   });
   it('selects the first metric when "count" is not an option', () => {
-    const metrics = [{ metric_name: 'foo' }, { metric_name: 'not_count' }];
+    const metrics = [
+      { metric_name: 'foo', uuid: '2' },
+      { metric_name: 'not_count', uuid: '2' },
+    ];
     expect(mainMetric(metrics)).toBe('foo');
   });
 });

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

@@ -81,6 +81,7 @@
     "@types/react": "*",
     "@types/react-loadable": "*",
     "@types/tinycolor2": "*",
+    "nanoid": "^5.0.9",
     "react": "^17.0.2",
     "react-loadable": "^5.5.0",
     "tinycolor2": "*"

superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/useCSSTextTruncation.test.tsx

@@ -59,3 +59,37 @@ test('should truncate', () => {
 
   expect(isTruncated).toBe(true);
 });
+
+test('should not truncate with vertical orientation', () => {
+  const ref = { current: document.createElement('p') };
+  Object.defineProperty(ref.current, 'offsetHeight', { get: () => 100 });
+  Object.defineProperty(ref.current, 'scrollHeight', { get: () => 50 });
+  jest.spyOn(global.React, 'useRef').mockReturnValue({ current: ref.current });
+
+  const { result } = renderHook(() =>
+    useCSSTextTruncation<HTMLParagraphElement>({
+      isVertical: true,
+      isHorizontal: false,
+    }),
+  );
+  const [, isTruncated] = result.current;
+
+  expect(isTruncated).toBe(false);
+});
+
+test('should truncate with vertical orientation', () => {
+  const ref = { current: document.createElement('p') };
+  Object.defineProperty(ref.current, 'offsetHeight', { get: () => 50 });
+  Object.defineProperty(ref.current, 'scrollHeight', { get: () => 100 });
+  jest.spyOn(global.React, 'useRef').mockReturnValue({ current: ref.current });
+
+  const { result } = renderHook(() =>
+    useCSSTextTruncation<HTMLParagraphElement>({
+      isVertical: true,
+      isHorizontal: false,
+    }),
+  );
+  const [, isTruncated] = result.current;
+
+  expect(isTruncated).toBe(true);
+});

superset-frontend/packages/superset-ui-core/src/hooks/useTruncation/useCSSTextTruncation.ts

@@ -36,24 +36,37 @@ export const truncationCSS = css`
  * to be displayed, this hook returns a ref to attach to the text
  * element and a boolean for whether that element is currently truncated.
  */
-const useCSSTextTruncation = <T extends HTMLElement>(): [
-  RefObject<T>,
-  boolean,
-] => {
+const useCSSTextTruncation = <T extends HTMLElement>(
+  { isVertical, isHorizontal } = { isVertical: false, isHorizontal: true },
+): [RefObject<T>, boolean] => {
   const [isTruncated, setIsTruncated] = useState(true);
   const ref = useRef<T>(null);
   const [offsetWidth, setOffsetWidth] = useState(0);
   const [scrollWidth, setScrollWidth] = useState(0);
+  const [offsetHeight, setOffsetHeight] = useState(0);
+  const [scrollHeight, setScrollHeight] = useState(0);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     setOffsetWidth(ref.current?.offsetWidth ?? 0);
     setScrollWidth(ref.current?.scrollWidth ?? 0);
+    setOffsetHeight(ref.current?.offsetHeight ?? 0);
+    setScrollHeight(ref.current?.scrollHeight ?? 0);
   });
 
   useEffect(() => {
-    setIsTruncated(offsetWidth < scrollWidth);
-  }, [offsetWidth, scrollWidth]);
+    setIsTruncated(
+      (isVertical && offsetHeight < scrollHeight) ||
+        (isHorizontal && offsetWidth < scrollWidth),
+    );
+  }, [
+    offsetWidth,
+    scrollWidth,
+    offsetHeight,
+    scrollHeight,
+    isVertical,
+    isHorizontal,
+  ]);
 
   return [ref, isTruncated];
 };

superset-frontend/packages/superset-ui-core/src/query/types/Datasource.ts

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { nanoid } from 'nanoid';
 import { Column } from './Column';
 import { Metric } from './Metric';
 
@@ -58,6 +59,7 @@ export const DEFAULT_METRICS: Metric[] = [
   {
     metric_name: 'COUNT(*)',
     expression: 'COUNT(*)',
+    uuid: nanoid(),
   },
 ];
 

superset-frontend/packages/superset-ui-core/src/query/types/Metric.ts

@@ -60,6 +60,7 @@ export type SavedMetric = string;
  */
 export interface Metric {
   id?: number;
+  uuid: string;
   metric_name: string;
   expression?: Maybe<string>;
   certification_details?: Maybe<string>;

superset-frontend/packages/superset-ui-core/src/translation/types/index.ts

@@ -35,7 +35,8 @@ export type Locale =
   | 'pt'
   | 'pt_BR'
   | 'ru'
-  | 'zh'; // supported locales in Superset
+  | 'zh'
+  | 'zh_TW'; // supported locales in Superset
 
 /**
  * Language pack provided to `jed`.

superset-frontend/packages/superset-ui-core/src/validator/index.ts

@@ -25,3 +25,4 @@ export { default as validateNonEmpty } from './validateNonEmpty';
 export { default as validateMaxValue } from './validateMaxValue';
 export { default as validateMapboxStylesUrl } from './validateMapboxStylesUrl';
 export { default as validateTimeComparisonRangeValues } from './validateTimeComparisonRangeValues';
+export { default as validateServerPagination } from './validateServerPagination';

superset-frontend/packages/superset-ui-core/src/validator/validateServerPagination.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 { t } from '../translation';
+
+export default function validateServerPagination(
+  v: unknown,
+  serverPagination: boolean,
+  max: number,
+) {
+  if (Number(v) > +max && !serverPagination) {
+    return t('Server pagination needs to be enabled for values over %s', max);
+  }
+  return false;
+}

superset-frontend/packages/superset-ui-core/test/query/types/Datasource.test.ts

@@ -20,10 +20,10 @@ import { DatasourceType, DEFAULT_METRICS } from '@superset-ui/core';
 
 test('DEFAULT_METRICS', () => {
   expect(DEFAULT_METRICS).toEqual([
-    {
+    expect.objectContaining({
       metric_name: 'COUNT(*)',
       expression: 'COUNT(*)',
-    },
+    }),
   ]);
 });
 

superset-frontend/packages/superset-ui-core/test/validator/validateServerPagination.test.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { validateServerPagination } from '@superset-ui/core';
+import './setup';
+
+test('validateServerPagination returns warning message when server pagination is disabled and value exceeds max', () => {
+  expect(validateServerPagination(100001, false, 100000)).toBeTruthy();
+  expect(validateServerPagination('150000', false, 100000)).toBeTruthy();
+  expect(validateServerPagination(200000, false, 100000)).toBeTruthy();
+});
+
+test('validateServerPagination returns false when server pagination is enabled', () => {
+  expect(validateServerPagination(100001, true, 100000)).toBeFalsy();
+  expect(validateServerPagination(150000, true, 100000)).toBeFalsy();
+  expect(validateServerPagination('200000', true, 100000)).toBeFalsy();
+});
+
+test('validateServerPagination returns false when value is below max', () => {
+  expect(validateServerPagination(50000, false, 100000)).toBeFalsy();
+  expect(validateServerPagination('75000', false, 100000)).toBeFalsy();
+  expect(validateServerPagination(99999, false, 100000)).toBeFalsy();
+});
+
+test('validateServerPagination handles edge cases', () => {
+  expect(validateServerPagination(undefined, false, 100000)).toBeFalsy();
+  expect(validateServerPagination(null, false, 100000)).toBeFalsy();
+  expect(validateServerPagination(NaN, false, 100000)).toBeFalsy();
+  expect(validateServerPagination('invalid', false, 100000)).toBeFalsy();
+});

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

@@ -60,7 +60,7 @@
     "@storybook/react-webpack5": "8.2.9",
     "babel-loader": "^9.1.3",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.2",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {

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

@@ -103,6 +103,7 @@ import iran from './countries/iran.geojson';
 import israel from './countries/israel.geojson';
 import italy from './countries/italy.geojson';
 import italy_regions from './countries/italy_regions.geojson';
+import ivory_coast from './countries/ivory_coast.geojson';
 import japan from './countries/japan.geojson';
 import jordan from './countries/jordan.geojson';
 import kazakhstan from './countries/kazakhstan.geojson';
@@ -160,6 +161,7 @@ import philippines_regions from './countries/philippines_regions.geojson';
 import poland from './countries/poland.geojson';
 import portugal from './countries/portugal.geojson';
 import qatar from './countries/qatar.geojson';
+import republic_of_serbia from './countries/republic_of_serbia.geojson';
 import romania from './countries/romania.geojson';
 import russia from './countries/russia.geojson';
 import rwanda from './countries/rwanda.geojson';
@@ -304,6 +306,7 @@ export const countries = {
   israel,
   italy,
   italy_regions,
+  ivory_coast,
   japan,
   jordan,
   kazakhstan,
@@ -361,6 +364,7 @@ export const countries = {
   poland,
   portugal,
   qatar,
+  republic_of_serbia,
   romania,
   russia,
   rwanda,

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

@@ -77,7 +77,7 @@ export function getLayer(
     getTargetColor: (d: any) =>
       d.targetColor || d.color || [tc.r, tc.g, tc.b, 255 * tc.a],
     id: `path-layer-${fd.slice_id}` as const,
-    strokeWidth: fd.stroke_width ? fd.stroke_width : 3,
+    getWidth: fd.stroke_width ? fd.stroke_width : 3,
     ...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
   });
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

@@ -36,13 +36,25 @@ import {
 } from './types';
 import { useOverflowDetection } from './useOverflowDetection';
 
+const MetricNameText = styled.div<{ metricNameFontSize?: number }>`
+  ${({ theme, metricNameFontSize }) => `
+    font-family: ${theme.typography.families.sansSerif};
+    font-weight: ${theme.typography.weights.normal};
+    font-size: ${metricNameFontSize || theme.typography.sizes.s * 2}px;
+    text-align: center;
+    margin-bottom: ${theme.gridUnit * 3}px;
+  `}
+`;
+
 const NumbersContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   overflow: auto;
+  padding: 12px;
 `;
 
 const ComparisonValue = styled.div<PopKPIComparisonValueStyleProps>`
@@ -73,6 +85,8 @@ export default function PopKPI(props: PopKPIProps) {
     prevNumber,
     valueDifference,
     percentDifferenceFormattedString,
+    metricName,
+    metricNameFontSize,
     headerFontSize,
     subheaderFontSize,
     comparisonColorEnabled,
@@ -81,9 +95,11 @@ export default function PopKPI(props: PopKPIProps) {
     currentTimeRangeFilter,
     startDateOffset,
     shift,
+    subtitle,
+    subtitleFontSize,
     dashboardTimeRange,
+    showMetricName,
   } = props;
-
   const [comparisonRange, setComparisonRange] = useState<string>('');
 
   useEffect(() => {
@@ -140,6 +156,16 @@ export default function PopKPI(props: PopKPIProps) {
     margin-bottom: ${theme.gridUnit * 4}px;
   `;
 
+  const SubtitleText = styled.div`
+    ${({ theme }) => `
+    font-family: ${theme.typography.families.sansSerif};
+    font-weight: ${theme.typography.weights.medium};
+    text-align: center;
+    margin-top: -10px;
+    margin-bottom: ${theme.gridUnit * 4}px;
+  `}
+  `;
+
   const getArrowIndicatorColor = () => {
     if (!comparisonColorEnabled || percentDifferenceNumber === 0) {
       return theme.colors.grayscale.base;
@@ -195,31 +221,40 @@ export default function PopKPI(props: PopKPIProps) {
   ]);
 
   const SYMBOLS_WITH_VALUES = useMemo(
-    () => [
-      {
-        symbol: '#',
-        value: prevNumber,
-        tooltipText: t('Data for %s', comparisonRange || 'previous range'),
-        columnKey: 'Previous value',
-      },
-      {
-        symbol: '△',
-        value: valueDifference,
-        tooltipText: t('Value difference between the time periods'),
-        columnKey: 'Delta',
-      },
-      {
-        symbol: '%',
-        value: percentDifferenceFormattedString,
-        tooltipText: t('Percentage difference between the time periods'),
-        columnKey: 'Percent change',
-      },
-    ],
+    () =>
+      [
+        {
+          defaultSymbol: '#',
+          value: prevNumber,
+          tooltipText: t('Data for %s', comparisonRange || 'previous range'),
+          columnKey: 'Previous value',
+        },
+        {
+          defaultSymbol: '△',
+          value: valueDifference,
+          tooltipText: t('Value difference between the time periods'),
+          columnKey: 'Delta',
+        },
+        {
+          defaultSymbol: '%',
+          value: percentDifferenceFormattedString,
+          tooltipText: t('Percentage difference between the time periods'),
+          columnKey: 'Percent change',
+        },
+      ].map(item => {
+        const config = props.columnConfig?.[item.columnKey];
+        return {
+          ...item,
+          symbol: config?.displayTypeIcon === false ? '' : item.defaultSymbol,
+          label: config?.customColumnName || item.columnKey,
+        };
+      }),
     [
       comparisonRange,
       prevNumber,
       valueDifference,
       percentDifferenceFormattedString,
+      props.columnConfig,
     ],
   );
 
@@ -239,9 +274,16 @@ export default function PopKPI(props: PopKPIProps) {
             width: fit-content;
             margin: auto;
             align-items: flex-start;
+            overflow: auto;
           `
         }
       >
+        {showMetricName && metricName && (
+          <MetricNameText metricNameFontSize={metricNameFontSize}>
+            {metricName}
+          </MetricNameText>
+        )}
+
         <div css={bigValueContainerStyles}>
           {bigNumber}
           {percentDifferenceNumber !== 0 && (
@@ -250,6 +292,15 @@ export default function PopKPI(props: PopKPIProps) {
             </span>
           )}
         </div>
+        {subtitle && (
+          <SubtitleText
+            style={{
+              fontSize: `${subtitleFontSize * height * 0.4}px`,
+            }}
+          >
+            {subtitle}
+          </SubtitleText>
+        )}
 
         {visibleSymbols.length > 0 && (
           <div
@@ -276,7 +327,7 @@ export default function PopKPI(props: PopKPIProps) {
           >
             {visibleSymbols.map((symbol_with_value, index) => (
               <ComparisonValue
-                key={`comparison-symbol-${symbol_with_value.symbol}`}
+                key={`comparison-symbol-${symbol_with_value.columnKey}`}
                 subheaderFontSize={subheaderFontSize}
               >
                 <Tooltip
@@ -284,15 +335,19 @@ export default function PopKPI(props: PopKPIProps) {
                   placement="top"
                   title={symbol_with_value.tooltipText}
                 >
-                  <SymbolWrapper
-                    backgroundColor={
-                      index > 0 ? backgroundColor : defaultBackgroundColor
-                    }
-                    textColor={index > 0 ? textColor : defaultTextColor}
-                  >
-                    {symbol_with_value.symbol}
-                  </SymbolWrapper>
-                  {symbol_with_value.value}
+                  {symbol_with_value.symbol && (
+                    <SymbolWrapper
+                      backgroundColor={
+                        index > 0 ? backgroundColor : defaultBackgroundColor
+                      }
+                      textColor={index > 0 ? textColor : defaultTextColor}
+                    >
+                      {symbol_with_value.symbol}
+                    </SymbolWrapper>
+                  )}
+                  {symbol_with_value.value}{' '}
+                  {props.columnConfig?.[symbol_with_value.columnKey]
+                    ?.customColumnName || ''}
                 </Tooltip>
               </ComparisonValue>
             ))}

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts

@@ -23,7 +23,14 @@ import {
   sharedControls,
   sections,
 } from '@superset-ui/chart-controls';
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import {
+  headerFontSize,
+  subheaderFontSize,
+  subtitleControl,
+  subtitleFontSize,
+  showMetricNameControl,
+  metricNameFontSizeWithVisibility,
+} from '../sharedControls';
 import { ColorSchemeEnum } from './types';
 
 const config: ControlPanelConfig = {
@@ -63,6 +70,10 @@ const config: ControlPanelConfig = {
             config: { ...headerFontSize.config, default: 0.2 },
           },
         ],
+        [subtitleControl],
+        [subtitleFontSize],
+        [showMetricNameControl],
+        [metricNameFontSizeWithVisibility],
         [
           {
             ...subheaderFontSize,
@@ -120,7 +131,11 @@ const config: ControlPanelConfig = {
                 [GenericDataType.Numeric]: [
                   {
                     tab: t('General'),
-                    children: [['visible']],
+                    children: [
+                      ['customColumnName'],
+                      ['displayTypeIcon'],
+                      ['visible'],
+                    ],
                   },
                 ],
               },

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts

@@ -32,6 +32,7 @@ export default class PopKPIPlugin extends ChartPlugin {
       tags: [
         t('Comparison'),
         t('Business'),
+        t('ECharts'),
         t('Percentages'),
         t('Report'),
         t('Advanced-Analytics'),

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts

@@ -26,7 +26,13 @@ import {
   SimpleAdhocFilter,
   ensureIsArray,
 } from '@superset-ui/core';
-import { getComparisonFontSize, getHeaderFontSize } from './utils';
+import {
+  getComparisonFontSize,
+  getHeaderFontSize,
+  getMetricNameFontSize,
+} from './utils';
+
+import { getOriginalLabel } from '../utils';
 
 dayjs.extend(utc);
 
@@ -83,17 +89,23 @@ export default function transformProps(chartProps: ChartProps) {
     headerFontSize,
     headerText,
     metric,
+    metricNameFontSize,
     yAxisFormat,
     currencyFormat,
     subheaderFontSize,
     comparisonColorScheme,
     comparisonColorEnabled,
     percentDifferenceFormat,
-    columnConfig,
+    subtitle = '',
+    subtitleFontSize,
+    columnConfig = {},
   } = formData;
   const { data: dataA = [] } = queriesData[0];
   const data = dataA;
   const metricName = metric ? getMetricLabel(metric) : '';
+  const metrics = chartProps.datasource?.metrics || [];
+  const originalLabel = getOriginalLabel(metric, metrics);
+  const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
   const timeComparison = ensureIsArray(chartProps.rawFormData?.time_compare)[0];
   const startDateOffset = chartProps.rawFormData?.start_date_offset;
   const currentTimeRangeFilter = chartProps.rawFormData?.adhoc_filters?.filter(
@@ -177,12 +189,16 @@ export default function transformProps(chartProps: ChartProps) {
     width,
     height,
     data,
-    metricName,
+    metricName: originalLabel,
     bigNumber,
     prevNumber,
     valueDifference,
     percentDifferenceFormattedString: percentDifference,
     boldText,
+    subtitle,
+    subtitleFontSize,
+    showMetricName,
+    metricNameFontSize: getMetricNameFontSize(metricNameFontSize),
     headerFontSize: getHeaderFontSize(headerFontSize),
     subheaderFontSize: getComparisonFontSize(subheaderFontSize),
     headerText,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts

@@ -35,6 +35,8 @@ export interface PopKPIStylesProps {
 
 export type TableColumnConfig = {
   visible?: boolean;
+  customColumnName?: string;
+  displayTypeIcon?: boolean;
 };
 
 interface PopKPICustomizeProps {
@@ -59,8 +61,12 @@ export type PopKPIProps = PopKPIStylesProps &
     data: TimeseriesDataRecord[];
     metrics: Metric[];
     metricName: string;
+    metricNameFontSize?: number;
+    showMetricName: boolean;
     bigNumber: string;
     prevNumber: string;
+    subtitle?: string;
+    subtitleFontSize: number;
     valueDifference: string;
     percentDifferenceFormattedString: string;
     compType: string;

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.ts

@@ -16,10 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import {
+  headerFontSize,
+  subheaderFontSize,
+  metricNameFontSize,
+} from '../sharedControls';
 
 const headerFontSizes = [16, 20, 30, 48, 60];
-const comparisonFontSizes = [16, 20, 26, 32, 40];
+const sharedFontSizes = [16, 20, 26, 32, 40];
+
+const metricNameProportionValues =
+  metricNameFontSize.config.options.map(
+    (option: { label: string; value: number }) => option.value,
+  ) ?? [];
 
 const headerProportionValues =
   headerFontSize.config.options.map(
@@ -40,6 +49,10 @@ const getFontSizeMapping = (
     return acc;
   }, {});
 
+const metricNameFontSizesMapping = getFontSizeMapping(
+  metricNameProportionValues,
+  sharedFontSizes,
+);
 const headerFontSizesMapping = getFontSizeMapping(
   headerProportionValues,
   headerFontSizes,
@@ -47,13 +60,17 @@ const headerFontSizesMapping = getFontSizeMapping(
 
 const comparisonFontSizesMapping = getFontSizeMapping(
   subheaderProportionValues,
-  comparisonFontSizes,
+  sharedFontSizes,
 );
 
+export const getMetricNameFontSize = (proportionValue: number) =>
+  metricNameFontSizesMapping[proportionValue] ??
+  sharedFontSizes[sharedFontSizes.length - 1];
+
 export const getHeaderFontSize = (proportionValue: number) =>
   headerFontSizesMapping[proportionValue] ??
   headerFontSizes[headerFontSizes.length - 1];
 
 export const getComparisonFontSize = (proportionValue: number) =>
   comparisonFontSizesMapping[proportionValue] ??
-  comparisonFontSizes[comparisonFontSizes.length - 1];
+  sharedFontSizes[sharedFontSizes.length - 1];

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.test.ts

@@ -0,0 +1,97 @@
+/**
+ * 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 { SqlaFormData } from '@superset-ui/core';
+import * as ChartControls from '@superset-ui/chart-controls';
+import controlPanel from './controlPanel';
+
+const { __mockShiftMetric } = ChartControls as any;
+
+jest.mock('@superset-ui/core', () => ({
+  GenericDataType: { Numeric: 'numeric' },
+  SMART_DATE_ID: 'SMART_DATE_ID',
+  t: (str: string) => str,
+}));
+
+jest.mock('@superset-ui/chart-controls', () => {
+  // Define the mock function inside the factory
+  const mockShiftMetric = jest.fn(() => 'shiftedMetric');
+  return {
+    ControlPanelConfig: {},
+    D3_FORMAT_DOCS: 'Format docs',
+    D3_TIME_FORMAT_OPTIONS: [['', 'default']],
+    getStandardizedControls: () => ({
+      shiftMetric: mockShiftMetric,
+    }),
+    // Optional export to let tests access the mock
+    __mockShiftMetric: mockShiftMetric,
+  };
+});
+
+describe('BigNumber Total Control Panel Config', () => {
+  it('should have the required control panel sections', () => {
+    expect(controlPanel).toHaveProperty('controlPanelSections');
+    const sections = controlPanel.controlPanelSections;
+    expect(Array.isArray(sections)).toBe(true);
+    expect(sections.length).toBe(2);
+
+    // First section should have label 'Query' and contain rows with metric and adhoc_filters
+    expect(sections[0]!.label).toBe('Query');
+    expect(Array.isArray(sections[0]!.controlSetRows)).toBe(true);
+    expect(sections[0]!.controlSetRows[0]).toEqual(['metric']);
+    expect(sections[0]!.controlSetRows[1]).toEqual(['adhoc_filters']);
+
+    // Second section should contain a control named subtitle
+    const secondSectionRow = sections[1]!.controlSetRows[1];
+    expect(secondSectionRow[0]).toHaveProperty('name', 'subtitle');
+
+    // Second section should include controls for time_format and conditional_formatting
+    const thirdSection = sections[1]!.controlSetRows;
+    // Check time_format control exists in one of the rows
+    const timeFormatRow = thirdSection.find(row =>
+      row.some((control: any) => control.name === 'time_format'),
+    );
+    expect(timeFormatRow).toBeTruthy();
+    // Check conditional_formatting control exists in one of the rows
+    const conditionalFormattingRow = thirdSection.find(row =>
+      row.some((control: any) => control.name === 'conditional_formatting'),
+    );
+    expect(conditionalFormattingRow).toBeTruthy();
+  });
+
+  it('should have y_axis_format override with correct label', () => {
+    expect(controlPanel).toHaveProperty('controlOverrides');
+    expect(controlPanel.controlOverrides).toHaveProperty('y_axis_format');
+    expect(controlPanel.controlOverrides!.y_axis_format!.label).toBe(
+      'Number format',
+    );
+  });
+
+  it('should override formData metric using getStandardizedControls', () => {
+    const dummyFormData = { someProp: 'test' } as unknown as SqlaFormData;
+    const newFormData = controlPanel.formDataOverrides!(dummyFormData);
+
+    // The original properties are spread correctly.
+    expect(newFormData.someProp).toBe('test');
+    // The metric property should be replaced by the output of shiftMetric.
+    expect(newFormData.metric).toBe('shiftedMetric');
+
+    // Ensure that the mockShiftMetric function was called.
+    expect(__mockShiftMetric).toHaveBeenCalled();
+  });
+});

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts

@@ -24,7 +24,13 @@ import {
   Dataset,
   getStandardizedControls,
 } from '@superset-ui/chart-controls';
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import {
+  headerFontSize,
+  subtitleFontSize,
+  subtitleControl,
+  showMetricNameControl,
+  metricNameFontSizeWithVisibility,
+} from '../sharedControls';
 
 export default {
   controlPanelSections: [
@@ -33,32 +39,15 @@ export default {
       expanded: true,
       controlSetRows: [['metric'], ['adhoc_filters']],
     },
-    {
-      label: t('Display settings'),
-      expanded: true,
-      tabOverride: 'data',
-      controlSetRows: [
-        [
-          {
-            name: 'subheader',
-            config: {
-              type: 'TextControl',
-              label: t('Subheader'),
-              renderTrigger: true,
-              description: t(
-                'Description text that shows up below your Big Number',
-              ),
-            },
-          },
-        ],
-      ],
-    },
     {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
         [headerFontSize],
-        [subheaderFontSize],
+        [subtitleControl],
+        [subtitleFontSize],
+        [showMetricNameControl],
+        [metricNameFontSizeWithVisibility],
         ['y_axis_format'],
         ['currency_format'],
         [

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts

@@ -39,6 +39,7 @@ const metadata = {
   tags: [
     t('Additive'),
     t('Business'),
+    t('ECharts'),
     t('Legacy'),
     t('Percentages'),
     t('Featured'),

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.test.ts

@@ -0,0 +1,253 @@
+/**
+ * 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 { GenericDataType } from '@superset-ui/core';
+import { getColorFormatters } from '@superset-ui/chart-controls';
+import { BigNumberTotalChartProps } from '../types';
+import transformProps from './transformProps';
+
+jest.mock('@superset-ui/chart-controls', () => ({
+  getColorFormatters: jest.fn(),
+}));
+
+jest.mock('@superset-ui/core', () => ({
+  GenericDataType: { Temporal: 2, String: 1 },
+  getMetricLabel: jest.fn(metric => metric),
+  extractTimegrain: jest.fn(() => 'P1D'),
+  getValueFormatter: jest.fn(() => (v: any) => `$${v}`),
+}));
+
+jest.mock('../utils', () => ({
+  getDateFormatter: jest.fn(() => (v: any) => `${v}pm`),
+  parseMetricValue: jest.fn(val => Number(val)),
+  getOriginalLabel: jest.fn((metric, metrics) => metric),
+}));
+
+describe('BigNumberTotal transformProps', () => {
+  const onContextMenu = jest.fn();
+  const baseFormData = {
+    headerFontSize: 20,
+    metric: 'value',
+    subheader: 'sub header text',
+    subheaderFontSize: 14,
+    forceTimestampFormatting: false,
+    timeFormat: 'YYYY-MM-DD',
+    yAxisFormat: 'SMART_NUMBER',
+    conditionalFormatting: [{ color: 'red', op: '>', value: 0 }],
+    currencyFormat: { symbol: '$', symbolPosition: 'prefix' },
+  };
+
+  const baseDatasource = {
+    currencyFormats: { value: '$0,0.00' },
+    columnFormats: { value: '$0,0.00' },
+    metrics: [{ metric_name: 'value', d3format: '.2f' }],
+  };
+
+  const baseHooks = { onContextMenu };
+
+  const baseRawFormData = { dummy: 'raw' };
+
+  it('should return null bigNumber when no data is provided', () => {
+    const chartProps = {
+      width: 400,
+      height: 300,
+      queriesData: [{ data: [], coltypes: [] }],
+      formData: baseFormData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberTotalChartProps,
+    );
+    expect(result.bigNumber).toBeNull();
+    expect(result.width).toBe(400);
+    expect(result.height).toBe(300);
+    expect(result.subtitle).toBe(baseFormData.subheader);
+    expect(result.onContextMenu).toBe(onContextMenu);
+    expect(result.refs).toEqual({});
+    // headerFormatter should be set even if there's no data
+    expect(typeof result.headerFormatter).toBe('function');
+    // colorThresholdFormatters fallback to empty array when getColorFormatters returns falsy
+    expect(result.colorThresholdFormatters).toEqual([]);
+  });
+  it('should convert subheader to subtitle', () => {
+    const chartProps = {
+      width: 400,
+      height: 300,
+      queriesData: [{ data: [], coltypes: [] }],
+      formData: { ...baseFormData, subheader: 'test' },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+    const result = transformProps(
+      chartProps as unknown as BigNumberTotalChartProps,
+    );
+    expect(result.subtitle).toBe('test');
+  });
+
+  const baseChartProps = {
+    width: 400,
+    height: 300,
+    queriesData: [{ data: [], coltypes: [] }],
+    rawFormData: { dummy: 'raw' },
+    hooks: { onContextMenu: jest.fn() },
+    datasource: {
+      currencyFormats: { value: '$0,0.00' },
+      columnFormats: { value: '$0,0.00' },
+      metrics: [{ metric_name: 'value', d3format: '.2f' }],
+    },
+  };
+
+  it('uses subtitle font size when subtitle is provided', () => {
+    const result = transformProps({
+      ...baseChartProps,
+      formData: {
+        subtitle: 'Subtitle wins',
+        subheader: 'Fallback subheader',
+        subtitleFontSize: 0.4,
+        subheaderFontSize: 0.99,
+        metric: 'value',
+        headerFontSize: 0.3,
+        yAxisFormat: 'SMART_NUMBER',
+        timeFormat: 'smart_date',
+      },
+    } as unknown as BigNumberTotalChartProps);
+
+    expect(result.subtitle).toBe('Subtitle wins');
+    expect(result.subtitleFontSize).toBe(0.4);
+  });
+
+  it('should compute bigNumber using parseMetricValue when data exists', () => {
+    const chartProps = {
+      width: 500,
+      height: 400,
+      queriesData: [
+        { data: [{ value: '456' }], coltypes: [GenericDataType.String] },
+      ],
+      formData: { ...baseFormData, forceTimestampFormatting: false },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      sortBy: 'value',
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberTotalChartProps,
+    );
+    // parseMetricValue converts '456' to number 456 by our mock
+    expect(result.bigNumber).toEqual(456);
+  });
+
+  it('should use formatTime as headerFormatter for Temporal or String types or forced formatting', () => {
+    // Case 1: Temporal type
+    const chartPropsTemporal = {
+      width: 600,
+      height: 450,
+      queriesData: [
+        { data: [{ value: '789' }], coltypes: [GenericDataType.Temporal] },
+      ],
+      formData: { ...baseFormData, forceTimestampFormatting: false },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+
+    const resultTemporal = transformProps(
+      chartPropsTemporal as unknown as BigNumberTotalChartProps,
+    );
+    expect(resultTemporal.headerFormatter(5)).toBe('5pm');
+
+    // Case 2: String type regardless of forcing formatting
+    const chartPropsString = {
+      width: 600,
+      height: 450,
+      queriesData: [
+        { data: [{ value: '789' }], coltypes: [GenericDataType.String] },
+      ],
+      formData: { ...baseFormData, forceTimestampFormatting: false },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+
+    const resultString = transformProps(
+      chartPropsString as unknown as BigNumberTotalChartProps,
+    );
+    expect(resultString.headerFormatter(5)).toBe('5pm');
+
+    // Case 3: Forced timestamp formatting
+    const chartPropsForced = {
+      width: 600,
+      height: 450,
+      queriesData: [{ data: [{ value: '789' }], coltypes: [0] }], // non-temporal/non-string
+      formData: { ...baseFormData, forceTimestampFormatting: true },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+
+    const resultForced = transformProps(
+      chartPropsForced as unknown as BigNumberTotalChartProps,
+    );
+    expect(resultForced.headerFormatter(5)).toBe('5pm');
+  });
+
+  it('should use numberFormatter as headerFormatter when not Temporal/String and no forced formatting', () => {
+    const chartProps = {
+      width: 700,
+      height: 500,
+      queriesData: [{ data: [{ value: '321' }], coltypes: [0] }], // non-temporal/non-string
+      formData: { ...baseFormData, forceTimestampFormatting: false },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberTotalChartProps,
+    );
+    expect(result.headerFormatter(500)).toBe('$500');
+  });
+
+  it('should propagate colorThresholdFormatters from getColorFormatters', () => {
+    // Override the getColorFormatters mock to return specific value
+    const mockFormatters = [{ formatter: 'red' }];
+    (getColorFormatters as jest.Mock).mockReturnValueOnce(mockFormatters);
+
+    const chartProps = {
+      width: 800,
+      height: 600,
+      queriesData: [
+        { data: [{ value: '100' }], coltypes: [GenericDataType.Temporal] },
+      ],
+      formData: baseFormData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberTotalChartProps,
+    );
+    expect(result.colorThresholdFormatters).toEqual(mockFormatters);
+  });
+});

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts

@@ -29,7 +29,7 @@ import {
   getValueFormatter,
 } from '@superset-ui/core';
 import { BigNumberTotalChartProps, BigNumberVizProps } from '../types';
-import { getDateFormatter, parseMetricValue } from '../utils';
+import { getDateFormatter, getOriginalLabel, parseMetricValue } from '../utils';
 import { Refs } from '../../types';
 
 export default function transformProps(
@@ -45,21 +45,30 @@ export default function transformProps(
     datasource: { currencyFormats = {}, columnFormats = {} },
   } = chartProps;
   const {
+    metricNameFontSize,
     headerFontSize,
     metric = 'value',
-    subheader = '',
-    subheaderFontSize,
+    subtitle,
+    subtitleFontSize,
     forceTimestampFormatting,
     timeFormat,
     yAxisFormat,
     conditionalFormatting,
     currencyFormat,
+    subheader,
+    subheaderFontSize,
   } = formData;
   const refs: Refs = {};
-  const { data = [], coltypes = [] } = queriesData[0];
+  const { data = [], coltypes = [] } = queriesData[0] || {};
   const granularity = extractTimegrain(rawFormData as QueryFormData);
+  const metrics = chartProps.datasource?.metrics || [];
+  const originalLabel = getOriginalLabel(metric, metrics);
   const metricName = getMetricLabel(metric);
-  const formattedSubheader = subheader;
+  const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
+  const formattedSubtitle = subtitle?.trim() ? subtitle : subheader || '';
+  const formattedSubtitleFontSize = subtitle?.trim()
+    ? (subtitleFontSize ?? 1)
+    : (subheaderFontSize ?? 1);
   const bigNumber =
     data.length === 0 ? null : parseMetricValue(data[0][metricName]);
 
@@ -98,7 +107,6 @@ export default function transformProps(
   const colorThresholdFormatters =
     getColorFormatters(conditionalFormatting, data, false) ??
     defaultColorFormatters;
-
   return {
     width,
     height,
@@ -106,9 +114,13 @@ export default function transformProps(
     headerFormatter,
     headerFontSize,
     subheaderFontSize,
-    subheader: formattedSubheader,
+    subtitleFontSize: formattedSubtitleFontSize,
+    subtitle: formattedSubtitle,
     onContextMenu,
     refs,
     colorThresholdFormatters,
+    metricName: originalLabel,
+    showMetricName,
+    metricNameFontSize,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { PureComponent, MouseEvent } from 'react';
+import { PureComponent, MouseEvent, createRef } from 'react';
 import {
   t,
   getNumberFormatter,
@@ -35,6 +35,7 @@ const defaultNumberFormatter = getNumberFormatter();
 
 const PROPORTION = {
   // text size: proportion of the chart container sans trendline
+  METRIC_NAME: 0.125,
   KICKER: 0.1,
   HEADER: 0.3,
   SUBHEADER: 0.125,
@@ -42,13 +43,20 @@ const PROPORTION = {
   TRENDLINE: 0.3,
 };
 
-class BigNumberVis extends PureComponent<BigNumberVizProps> {
+type BigNumberVisState = {
+  elementsRendered: boolean;
+  recalculateTrigger: boolean;
+};
+
+class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
   static defaultProps = {
     className: '',
     headerFormatter: defaultNumberFormatter,
     formatTime: getTimeFormatter(SMART_DATE_VERBOSE_ID),
     headerFontSize: PROPORTION.HEADER,
     kickerFontSize: PROPORTION.KICKER,
+    metricNameFontSize: PROPORTION.METRIC_NAME,
+    showMetricName: true,
     mainColor: BRAND_COLOR,
     showTimestamp: false,
     showTrendLine: false,
@@ -58,6 +66,40 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     timeRangeFixed: false,
   };
 
+  // Create refs for each component to measure heights
+  metricNameRef = createRef<HTMLDivElement>();
+
+  kickerRef = createRef<HTMLDivElement>();
+
+  headerRef = createRef<HTMLDivElement>();
+
+  subheaderRef = createRef<HTMLDivElement>();
+
+  subtitleRef = createRef<HTMLDivElement>();
+
+  state = {
+    elementsRendered: false,
+    recalculateTrigger: false,
+  };
+
+  componentDidMount() {
+    // Wait for elements to render and then calculate heights
+    setTimeout(() => {
+      this.setState({ elementsRendered: true });
+    }, 0);
+  }
+
+  componentDidUpdate(prevProps: BigNumberVizProps) {
+    if (
+      prevProps.height !== this.props.height ||
+      prevProps.showTrendLine !== this.props.showTrendLine
+    ) {
+      this.setState(prevState => ({
+        recalculateTrigger: !prevState.recalculateTrigger,
+      }));
+    }
+  }
+
   getClassName() {
     const { className, showTrendLine, bigNumberFallback } = this.props;
     const names = `superset-legacy-chart-big-number ${className} ${
@@ -92,6 +134,37 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     );
   }
 
+  renderMetricName(maxHeight: number) {
+    const { metricName, width, showMetricName } = this.props;
+    if (!showMetricName || !metricName) return null;
+
+    const text = metricName;
+
+    const container = this.createTemporaryContainer();
+    document.body.append(container);
+    const fontSize = computeMaxFontSize({
+      text,
+      maxWidth: width,
+      maxHeight,
+      className: 'metric-name',
+      container,
+    });
+    container.remove();
+
+    return (
+      <div
+        ref={this.metricNameRef}
+        className="metric-name"
+        style={{
+          fontSize,
+          height: 'auto',
+        }}
+      >
+        {text}
+      </div>
+    );
+  }
+
   renderKicker(maxHeight: number) {
     const { timestamp, showTimestamp, formatTime, width } = this.props;
     if (
@@ -118,6 +191,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
 
     return (
       <div
+        ref={this.kickerRef}
         className="kicker"
         style={{
           fontSize,
@@ -173,6 +247,7 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
 
     return (
       <div
+        ref={this.headerRef}
         className="header-line"
         style={{
           display: 'flex',
@@ -188,34 +263,30 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     );
   }
 
-  renderSubheader(maxHeight: number) {
-    const { bigNumber, subheader, width, bigNumberFallback } = this.props;
+  rendermetricComparisonSummary(maxHeight: number) {
+    const { subheader, width } = this.props;
     let fontSize = 0;
 
-    const NO_DATA_OR_HASNT_LANDED = t(
-      'No data after filtering or data is NULL for the latest time record',
-    );
-    const NO_DATA = t(
-      'Try applying different filters or ensuring your datasource has data',
-    );
-    let text = subheader;
-    if (bigNumber === null) {
-      text = bigNumberFallback ? NO_DATA : NO_DATA_OR_HASNT_LANDED;
-    }
+    const text = subheader;
+
     if (text) {
       const container = this.createTemporaryContainer();
       document.body.append(container);
-      fontSize = computeMaxFontSize({
-        text,
-        maxWidth: width * 0.9, // max width reduced
-        maxHeight,
-        className: 'subheader-line',
-        container,
-      });
-      container.remove();
+      try {
+        fontSize = computeMaxFontSize({
+          text,
+          maxWidth: width * 0.9,
+          maxHeight,
+          className: 'subheader-line',
+          container,
+        });
+      } finally {
+        container.remove();
+      }
 
       return (
         <div
+          ref={this.subheaderRef}
           className="subheader-line"
           style={{
             fontSize,
@@ -229,6 +300,53 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     return null;
   }
 
+  renderSubtitle(maxHeight: number) {
+    const { subtitle, width, bigNumber, bigNumberFallback } = this.props;
+    let fontSize = 0;
+
+    const NO_DATA_OR_HASNT_LANDED = t(
+      'No data after filtering or data is NULL for the latest time record',
+    );
+    const NO_DATA = t(
+      'Try applying different filters or ensuring your datasource has data',
+    );
+
+    let text = subtitle;
+    if (bigNumber === null) {
+      text =
+        subtitle || (bigNumberFallback ? NO_DATA : NO_DATA_OR_HASNT_LANDED);
+    }
+
+    if (text) {
+      const container = this.createTemporaryContainer();
+      document.body.append(container);
+      fontSize = computeMaxFontSize({
+        text,
+        maxWidth: width * 0.9,
+        maxHeight,
+        className: 'subtitle-line',
+        container,
+      });
+      container.remove();
+
+      return (
+        <>
+          <div
+            ref={this.subtitleRef}
+            className="subtitle-line subheader-line"
+            style={{
+              fontSize: `${fontSize}px`,
+              height: maxHeight,
+            }}
+          >
+            {text}
+          </div>
+        </>
+      );
+    }
+    return null;
+  }
+
   renderTrendline(maxHeight: number) {
     const { width, trendLineData, echartOptions, refs } = this.props;
 
@@ -275,12 +393,43 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     );
   }
 
+  getTotalElementsHeight() {
+    const marginPerElement = 8; // theme.gridUnit = 4, so margin-bottom = 8px
+
+    const refs = [
+      this.metricNameRef,
+      this.kickerRef,
+      this.headerRef,
+      this.subheaderRef,
+      this.subtitleRef,
+    ];
+
+    // Filter refs to only those with a current element
+    const visibleRefs = refs.filter(ref => ref.current);
+
+    const totalHeight = visibleRefs.reduce((sum, ref, index) => {
+      const height = ref.current?.offsetHeight || 0;
+      const margin = index < visibleRefs.length - 1 ? marginPerElement : 0;
+      return sum + height + margin;
+    }, 0);
+
+    return totalHeight;
+  }
+
+  shouldApplyOverflow(availableHeight: number) {
+    if (!this.state.elementsRendered) return false;
+    const totalHeight = this.getTotalElementsHeight();
+    return totalHeight > availableHeight;
+  }
+
   render() {
     const {
       showTrendLine,
       height,
       kickerFontSize,
       headerFontSize,
+      subtitleFontSize,
+      metricNameFontSize,
       subheaderFontSize,
     } = this.props;
     const className = this.getClassName();
@@ -288,11 +437,31 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
     if (showTrendLine) {
       const chartHeight = Math.floor(PROPORTION.TRENDLINE * height);
       const allTextHeight = height - chartHeight;
+      const shouldApplyOverflow = this.shouldApplyOverflow(allTextHeight);
 
       return (
         <div className={className}>
-          <div className="text-container" style={{ height: allTextHeight }}>
+          <div
+            className="text-container"
+            style={{
+              height: allTextHeight,
+              ...(shouldApplyOverflow
+                ? {
+                    display: 'block',
+                    boxSizing: 'border-box',
+                    overflowX: 'hidden',
+                    overflowY: 'auto',
+                    width: '100%',
+                  }
+                : {}),
+            }}
+          >
             {this.renderFallbackWarning()}
+            {this.renderMetricName(
+              Math.ceil(
+                (metricNameFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
+              ),
+            )}
             {this.renderKicker(
               Math.ceil(
                 (kickerFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
@@ -301,23 +470,46 @@ class BigNumberVis extends PureComponent<BigNumberVizProps> {
             {this.renderHeader(
               Math.ceil(headerFontSize * (1 - PROPORTION.TRENDLINE) * height),
             )}
-            {this.renderSubheader(
+            {this.rendermetricComparisonSummary(
               Math.ceil(
                 subheaderFontSize * (1 - PROPORTION.TRENDLINE) * height,
               ),
             )}
+            {this.renderSubtitle(
+              Math.ceil(subtitleFontSize * (1 - PROPORTION.TRENDLINE) * height),
+            )}
           </div>
           {this.renderTrendline(chartHeight)}
         </div>
       );
     }
-
+    const shouldApplyOverflow = this.shouldApplyOverflow(height);
     return (
-      <div className={className} style={{ height }}>
-        {this.renderFallbackWarning()}
-        {this.renderKicker((kickerFontSize || 0) * height)}
-        {this.renderHeader(Math.ceil(headerFontSize * height))}
-        {this.renderSubheader(Math.ceil(subheaderFontSize * height))}
+      <div
+        className={className}
+        style={{
+          height,
+          ...(shouldApplyOverflow
+            ? {
+                display: 'block',
+                boxSizing: 'border-box',
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                width: '100%',
+              }
+            : {}),
+        }}
+      >
+        <div className="text-container">
+          {this.renderFallbackWarning()}
+          {this.renderMetricName((metricNameFontSize || 0) * height)}
+          {this.renderKicker((kickerFontSize || 0) * height)}
+          {this.renderHeader(Math.ceil(headerFontSize * height))}
+          {this.rendermetricComparisonSummary(
+            Math.ceil(subheaderFontSize * height),
+          )}
+          {this.renderSubtitle(Math.ceil(subtitleFontSize * height))}
+        </div>
       </div>
     );
   }
@@ -352,7 +544,12 @@ export default styled(BigNumberVis)`
 
     .kicker {
       line-height: 1em;
-      padding-bottom: 2em;
+      margin-bottom: ${theme.gridUnit * 2}px;
+    }
+
+    .metric-name {
+      line-height: 1em;
+      margin-bottom: ${theme.gridUnit * 2}px;
     }
 
     .header-line {
@@ -368,7 +565,12 @@ export default styled(BigNumberVis)`
 
     .subheader-line {
       line-height: 1em;
-      padding-bottom: 0;
+      margin-bottom: ${theme.gridUnit * 2}px;
+    }
+
+    .subtitle-line {
+      line-height: 1em;
+      margin-bottom: ${theme.gridUnit * 2}px;
     }
 
     &.is-fallback-value {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx

@@ -26,7 +26,14 @@ import {
   getStandardizedControls,
   temporalColumnMixin,
 } from '@superset-ui/chart-controls';
-import { headerFontSize, subheaderFontSize } from '../sharedControls';
+import {
+  headerFontSize,
+  subheaderFontSize,
+  subtitleFontSize,
+  subtitleControl,
+  showMetricNameControl,
+  metricNameFontSizeWithVisibility,
+} from '../sharedControls';
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -134,6 +141,10 @@ const config: ControlPanelConfig = {
         ['color_picker', null],
         [headerFontSize],
         [subheaderFontSize],
+        [subtitleControl],
+        [subtitleFontSize],
+        [showMetricNameControl],
+        [metricNameFontSizeWithVisibility],
         ['y_axis_format'],
         ['currency_format'],
         [

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts

@@ -37,6 +37,7 @@ const metadata = {
   name: t('Big Number with Trendline'),
   tags: [
     t('Advanced-Analytics'),
+    t('ECharts'),
     t('Line'),
     t('Percentages'),
     t('Featured'),

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts

@@ -0,0 +1,197 @@
+/**
+ * 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 { GenericDataType } from '@superset-ui/core';
+import transformProps from './transformProps';
+import { BigNumberWithTrendlineChartProps, BigNumberDatum } from '../types';
+
+jest.mock('@superset-ui/core', () => ({
+  GenericDataType: { Temporal: 2, String: 1 },
+  extractTimegrain: jest.fn(() => 'P1D'),
+  getMetricLabel: jest.fn(metric => metric),
+  getXAxisLabel: jest.fn(() => '__timestamp'),
+  getValueFormatter: jest.fn(() => ({
+    format: (v: number) => `$${v}`,
+  })),
+  getNumberFormatter: jest.fn(() => (v: number) => `${(v * 100).toFixed(1)}%`),
+  t: jest.fn(v => v),
+  tooltipHtml: jest.fn(() => '<div>tooltip</div>'),
+  NumberFormats: {
+    PERCENT_SIGNED_1_POINT: '.1%',
+  },
+}));
+
+jest.mock('../utils', () => ({
+  getDateFormatter: jest.fn(() => (v: any) => `${v}pm`),
+  parseMetricValue: jest.fn(val => Number(val)),
+  getOriginalLabel: jest.fn((metric, metrics) => metric),
+}));
+
+jest.mock('../../utils/tooltip', () => ({
+  getDefaultTooltip: jest.fn(() => ({})),
+}));
+
+describe('BigNumberWithTrendline transformProps', () => {
+  const onContextMenu = jest.fn();
+  const baseFormData = {
+    headerFontSize: 20,
+    metric: 'value',
+    subtitle: 'subtitle message',
+    subtitleFontSize: 14,
+    forceTimestampFormatting: false,
+    timeFormat: 'YYYY-MM-DD',
+    yAxisFormat: 'SMART_NUMBER',
+    compareLag: 1,
+    compareSuffix: 'WoW',
+    colorPicker: { r: 0, g: 0, b: 0 },
+    currencyFormat: { symbol: '$', symbolPosition: 'prefix' },
+  };
+
+  const baseDatasource = {
+    currencyFormats: { value: '$0,0.00' },
+    columnFormats: { value: '$0,0.00' },
+    metrics: [{ metric_name: 'value', d3format: '.2f' }],
+  };
+
+  const baseHooks = { onContextMenu };
+  const baseRawFormData = { dummy: 'raw' };
+
+  it('should return null bigNumber when no data is provided', () => {
+    const chartProps = {
+      width: 400,
+      height: 300,
+      queriesData: [{ data: [] as unknown as BigNumberDatum[], coltypes: [] }],
+      formData: baseFormData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      theme: { colors: { grayscale: { light5: '#eee' } } },
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberWithTrendlineChartProps,
+    );
+    expect(result.bigNumber).toBeNull();
+    expect(result.subtitle).toBe('subtitle message');
+  });
+
+  it('should calculate subheader as percent change with suffix', () => {
+    const chartProps = {
+      width: 500,
+      height: 400,
+      queriesData: [
+        {
+          data: [
+            { __timestamp: 2, value: 110 },
+            { __timestamp: 1, value: 100 },
+          ] as unknown as BigNumberDatum[],
+          colnames: ['__timestamp', 'value'],
+          coltypes: ['TEMPORAL', 'NUMERIC'],
+        },
+      ],
+      formData: baseFormData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      theme: { colors: { grayscale: { light5: '#eee' } } },
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberWithTrendlineChartProps,
+    );
+    expect(result.subheader).toBe('10.0% WoW');
+  });
+
+  it('should compute bigNumber from parseMetricValue', () => {
+    const chartProps = {
+      width: 600,
+      height: 450,
+      queriesData: [
+        {
+          data: [
+            { __timestamp: 2, value: '456' },
+          ] as unknown as BigNumberDatum[],
+          colnames: ['__timestamp', 'value'],
+          coltypes: [GenericDataType.Temporal, GenericDataType.String],
+        },
+      ],
+      formData: baseFormData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      theme: { colors: { grayscale: { light5: '#eee' } } },
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberWithTrendlineChartProps,
+    );
+    expect(result.bigNumber).toEqual(456);
+  });
+
+  it('should use formatTime as headerFormatter for Temporal/String or forced', () => {
+    const formData = { ...baseFormData, forceTimestampFormatting: true };
+    const chartProps = {
+      width: 600,
+      height: 450,
+      queriesData: [
+        {
+          data: [
+            { __timestamp: 2, value: '123' },
+          ] as unknown as BigNumberDatum[],
+          colnames: ['__timestamp', 'value'],
+          coltypes: [0, GenericDataType.String],
+        },
+      ],
+      formData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      theme: { colors: { grayscale: { light5: '#eee' } } },
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberWithTrendlineChartProps,
+    );
+    expect(result.headerFormatter(5)).toBe('5pm');
+  });
+
+  it('should use numberFormatter when not Temporal/String and not forced', () => {
+    const formData = { ...baseFormData, forceTimestampFormatting: false };
+    const chartProps = {
+      width: 600,
+      height: 450,
+      queriesData: [
+        {
+          data: [{ __timestamp: 2, value: 500 }] as unknown as BigNumberDatum[],
+          colnames: ['__timestamp', 'value'],
+          coltypes: [0, 0],
+        },
+      ],
+      formData,
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      theme: { colors: { grayscale: { light5: '#eee' } } },
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberWithTrendlineChartProps,
+    );
+    expect(result.headerFormatter.format(500)).toBe('$500');
+  });
+});

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -35,7 +35,7 @@ import {
   BigNumberWithTrendlineChartProps,
   TimeSeriesDatum,
 } from '../types';
-import { getDateFormatter, parseMetricValue } from '../utils';
+import { getDateFormatter, parseMetricValue, getOriginalLabel } from '../utils';
 import { getDefaultTooltip } from '../../utils/tooltip';
 import { Refs } from '../../types';
 
@@ -62,10 +62,13 @@ export default function transformProps(
     compareLag: compareLag_,
     compareSuffix = '',
     timeFormat,
+    metricNameFontSize,
     headerFontSize,
     metric = 'value',
     showTimestamp,
     showTrendLine,
+    subtitle = '',
+    subtitleFontSize,
     aggregation,
     startYAxisAtZero,
     subheader = '',
@@ -94,6 +97,9 @@ export default function transformProps(
   const aggregatedData = hasAggregatedData ? aggregatedQueryData.data[0] : null;
   const refs: Refs = {};
   const metricName = getMetricLabel(metric);
+  const metrics = chartProps.datasource?.metrics || [];
+  const originalLabel = getOriginalLabel(metric, metrics);
+  const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
   const compareLag = Number(compareLag_) || 0;
   let formattedSubheader = subheader;
 
@@ -301,7 +307,12 @@ export default function transformProps(
     headerFormatter,
     formatTime,
     formData,
+    metricName: originalLabel,
+    showMetricName,
+    metricNameFontSize,
     headerFontSize,
+    subtitleFontSize,
+    subtitle,
     subheaderFontSize,
     mainColor,
     showTimestamp,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/sharedControls.ts

@@ -21,70 +21,95 @@
 import { t } from '@superset-ui/core';
 import { CustomControlItem } from '@superset-ui/chart-controls';
 
-export const headerFontSize: CustomControlItem = {
-  name: 'header_font_size',
+const FONT_SIZE_OPTIONS_SMALL = [
+  { label: t('Tiny'), value: 0.125 },
+  { label: t('Small'), value: 0.15 },
+  { label: t('Normal'), value: 0.2 },
+  { label: t('Large'), value: 0.3 },
+  { label: t('Huge'), value: 0.4 },
+];
+
+const FONT_SIZE_OPTIONS_LARGE = [
+  { label: t('Tiny'), value: 0.2 },
+  { label: t('Small'), value: 0.3 },
+  { label: t('Normal'), value: 0.4 },
+  { label: t('Large'), value: 0.5 },
+  { label: t('Huge'), value: 0.6 },
+];
+
+function makeFontSizeControl(
+  name: string,
+  label: string,
+  defaultValue: number,
+  options: { label: string; value: number }[],
+): CustomControlItem {
+  return {
+    name,
+    config: {
+      type: 'SelectControl',
+      label: t(label),
+      renderTrigger: true,
+      clearable: false,
+      default: defaultValue,
+      options,
+    },
+  };
+}
+
+export const headerFontSize = makeFontSizeControl(
+  'header_font_size',
+  'Big Number Font Size',
+  0.4,
+  FONT_SIZE_OPTIONS_LARGE,
+);
+
+export const subtitleFontSize = makeFontSizeControl(
+  'subtitle_font_size',
+  'Subtitle Font Size',
+  0.15,
+  FONT_SIZE_OPTIONS_SMALL,
+);
+
+export const subheaderFontSize = makeFontSizeControl(
+  'subheader_font_size',
+  'Subheader Font Size',
+  0.15,
+  FONT_SIZE_OPTIONS_SMALL,
+);
+
+export const metricNameFontSize = makeFontSizeControl(
+  'metric_name_font_size',
+  'Metric Name Font Size',
+  0.15,
+  FONT_SIZE_OPTIONS_SMALL,
+);
+
+export const subtitleControl: CustomControlItem = {
+  name: 'subtitle',
   config: {
-    type: 'SelectControl',
-    label: t('Big Number Font Size'),
+    type: 'TextControl',
+    label: t('Subtitle'),
     renderTrigger: true,
-    clearable: false,
-    default: 0.4,
-    // Values represent the percentage of space a header should take
-    options: [
-      {
-        label: t('Tiny'),
-        value: 0.2,
-      },
-      {
-        label: t('Small'),
-        value: 0.3,
-      },
-      {
-        label: t('Normal'),
-        value: 0.4,
-      },
-      {
-        label: t('Large'),
-        value: 0.5,
-      },
-      {
-        label: t('Huge'),
-        value: 0.6,
-      },
-    ],
+    description: t('Description text that shows up below your Big Number'),
   },
 };
 
-export const subheaderFontSize: CustomControlItem = {
-  name: 'subheader_font_size',
+export const showMetricNameControl: CustomControlItem = {
+  name: 'show_metric_name',
   config: {
-    type: 'SelectControl',
-    label: t('Subheader Font Size'),
+    type: 'CheckboxControl',
+    label: t('Show Metric Name'),
     renderTrigger: true,
-    clearable: false,
-    default: 0.15,
-    // Values represent the percentage of space a subheader should take
-    options: [
-      {
-        label: t('Tiny'),
-        value: 0.125,
-      },
-      {
-        label: t('Small'),
-        value: 0.15,
-      },
-      {
-        label: t('Normal'),
-        value: 0.2,
-      },
-      {
-        label: t('Large'),
-        value: 0.3,
-      },
-      {
-        label: t('Huge'),
-        value: 0.4,
-      },
-    ],
+    default: false,
+    description: t('Whether to display the metric name'),
+  },
+};
+
+export const metricNameFontSizeWithVisibility: CustomControlItem = {
+  ...metricNameFontSize,
+  config: {
+    ...metricNameFontSize.config,
+    visibility: ({ controls }) => controls?.show_metric_name?.value === true,
+    resetOnHide: false,
   },
 };

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts

@@ -75,10 +75,16 @@ export type BigNumberVizProps = {
   bigNumberFallback?: TimeSeriesDatum;
   headerFormatter: ValueFormatter | TimeFormatter;
   formatTime?: TimeFormatter;
+  metricName?: string;
+  friendlyMetricName?: string;
+  metricNameFontSize?: number;
+  showMetricName?: boolean;
   headerFontSize: number;
   kickerFontSize?: number;
-  subheader: string;
+  subheader?: string;
+  subtitle: string;
   subheaderFontSize: number;
+  subtitleFontSize: number;
   showTimestamp?: boolean;
   showTrendLine?: boolean;
   startYAxisAtZero?: boolean;

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts

@@ -22,6 +22,10 @@ import utc from 'dayjs/plugin/utc';
 import {
   getTimeFormatter,
   getTimeFormatterForGranularity,
+  isAdhocMetricSimple,
+  isSavedMetric,
+  Metric,
+  QueryFormMetric,
   SMART_DATE_ID,
   TimeGranularity,
 } from '@superset-ui/core';
@@ -47,3 +51,43 @@ export const getDateFormatter = (
   timeFormat === SMART_DATE_ID
     ? getTimeFormatterForGranularity(granularity)
     : getTimeFormatter(timeFormat ?? fallbackFormat);
+
+export function getOriginalLabel(
+  metric: QueryFormMetric,
+  metrics: Metric[] = [],
+): string {
+  const metricLabel = typeof metric === 'string' ? metric : metric.label || '';
+
+  if (isSavedMetric(metric)) {
+    const metricEntry = metrics.find(m => m.metric_name === metric);
+    return (
+      metricEntry?.verbose_name ||
+      metricEntry?.metric_name ||
+      metric ||
+      'Unknown Metric'
+    );
+  }
+
+  if (isAdhocMetricSimple(metric)) {
+    const column = metric.column || {};
+    const columnName = column.column_name || 'unknown_column';
+    const verboseName = column.verbose_name || columnName;
+    const aggregate = metric.aggregate || 'UNKNOWN';
+    return metric.hasCustomLabel && metric.label
+      ? metric.label
+      : `${aggregate}(${verboseName})`;
+  }
+
+  if (
+    typeof metric === 'object' &&
+    'expressionType' in metric &&
+    metric.expressionType === 'SQL' &&
+    'sqlExpression' in metric
+  ) {
+    return metric.hasCustomLabel && metric.label
+      ? metric.label
+      : metricLabel || 'Custom Metric';
+  }
+
+  return metricLabel || 'Unknown Metric';
+}

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts

@@ -150,7 +150,7 @@ export default function transformProps(
       data: data.map(row =>
         colnames.map(col => {
           const value = row[col];
-          if (!value) {
+          if (value === null || value === undefined) {
             return NULL_STRING;
           }
           if (typeof value === 'boolean' || typeof value === 'bigint') {

superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts

@@ -84,7 +84,7 @@ export default function transformProps(
     .filter(key => !groupbySet.has(key))
     .map(key => {
       const array = key.split(' - ').map(value => parseFloat(value));
-      return `${xAxisFormatter(array[0])} '-' ${xAxisFormatter(array[1])}`;
+      return `${xAxisFormatter(array[0])} - ${xAxisFormatter(array[1])}`;
     });
   const barSeries: BarSeriesOption[] = data.map(datum => {
     const seriesName =

superset-frontend/plugins/plugin-chart-echarts/src/Sankey/index.ts

@@ -57,7 +57,7 @@ export default class EchartsSankeyChartPlugin extends ChartPlugin<
         ),
         exampleGallery: [{ url: example1 }, { url: example2 }],
         name: t('Sankey Chart'),
-        tags: [t('Directional'), t('Distribution'), t('Flow')],
+        tags: [t('Directional'), t('ECharts'), t('Distribution'), t('Flow')],
         thumbnail,
       }),
       transformProps,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts

@@ -58,6 +58,7 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
         name: t('Generic Chart'),
         tags: [
           t('Advanced-Analytics'),
+          t('ECharts'),
           t('Line'),
           t('Predictive'),
           t('Time'),

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -179,8 +179,8 @@ export default function transformProps(
     xAxisBounds,
     xAxisForceCategorical,
     xAxisLabelRotation,
-    xAxisSortSeries,
-    xAxisSortSeriesAscending,
+    xAxisSort,
+    xAxisSortAsc,
     xAxisTimeFormat,
     xAxisTitle,
     xAxisTitleMargin,
@@ -242,10 +242,8 @@ export default function transformProps(
       isHorizontal,
       sortSeriesType,
       sortSeriesAscending,
-      xAxisSortSeries: isMultiSeries ? xAxisSortSeries : undefined,
-      xAxisSortSeriesAscending: isMultiSeries
-        ? xAxisSortSeriesAscending
-        : undefined,
+      xAxisSortSeries: isMultiSeries ? xAxisSort : undefined,
+      xAxisSortSeriesAscending: isMultiSeries ? xAxisSortAsc : undefined,
     },
   );
   const showValueIndexes = extractShowValueIndexes(rawSeries, {

superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx

@@ -25,6 +25,7 @@ import {
   useLayoutEffect,
   useCallback,
   Ref,
+  useState,
 } from 'react';
 
 import { useSelector } from 'react-redux';
@@ -106,6 +107,16 @@ use([
   LabelLayout,
 ]);
 
+const loadLocale = async (locale: string) => {
+  let lang;
+  try {
+    lang = await import(`echarts/lib/i18n/lang${locale}`);
+  } catch (e) {
+    console.error(`Locale ${locale} not supported in ECharts`, e);
+  }
+  return lang?.default;
+};
+
 function Echart(
   {
     width,
@@ -123,6 +134,7 @@ function Echart(
     // eslint-disable-next-line no-param-reassign
     refs.divRef = divRef;
   }
+  const [didMount, setDidMount] = useState(false);
   const chartRef = useRef<EChartsType>();
   const currentSelection = useMemo(
     () => Object.keys(selectedValues) || [],
@@ -148,20 +160,20 @@ function Echart(
   );
 
   useEffect(() => {
-    const loadLocaleAndInitChart = async () => {
-      if (!divRef.current) return;
-
-      const lang = await import(`echarts/lib/i18n/lang${locale}`).catch(e => {
-        console.error(`Locale ${locale} not supported in ECharts`, e);
-      });
-      if (lang?.default) {
-        registerLocale(locale, lang.default);
+    loadLocale(locale).then(localeObj => {
+      if (localeObj) {
+        registerLocale(locale, localeObj);
       }
-
+      if (!divRef.current) return;
       if (!chartRef.current) {
         chartRef.current = init(divRef.current, null, { locale });
       }
+      setDidMount(true);
+    });
+  }, [locale]);
 
+  useEffect(() => {
+    if (didMount) {
       Object.entries(eventHandlers || {}).forEach(([name, handler]) => {
         chartRef.current?.off(name);
         chartRef.current?.on(name, handler);
@@ -172,14 +184,14 @@ function Echart(
         chartRef.current?.getZr().on(name, handler);
       });
 
-      chartRef.current.setOption(echartOptions, true);
+      chartRef.current?.setOption(echartOptions, true);
 
       // did mount
       handleSizeChange({ width, height });
-    };
+    }
+  }, [didMount, echartOptions, eventHandlers, zrEventHandlers]);
 
-    loadLocaleAndInitChart();
-  }, [echartOptions, eventHandlers, zrEventHandlers, locale]);
+  useEffect(() => () => chartRef.current?.dispose(), []);
 
   // highlighting
   useEffect(() => {

superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts

@@ -78,7 +78,7 @@ export function getTooltipTimeFormatter(
   format?: string,
 ): TimeFormatter | StringConstructor {
   if (format === SMART_DATE_ID) {
-    return getSmartDateDetailedFormatter();
+    return getSmartDateVerboseFormatter();
   }
   if (format) {
     return getTimeFormatter(format);

superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts

@@ -149,6 +149,7 @@ describe('BigNumberWithTrendline', () => {
               label: 'value',
               metric_name: 'value',
               d3format: '.2f',
+              uuid: '1',
             },
           ],
         },
@@ -174,6 +175,7 @@ describe('BigNumberWithTrendline', () => {
               metric_name: 'value',
               d3format: '.2f',
               currency: { symbol: 'USD', symbolPosition: 'prefix' },
+              uuid: '1',
             },
           ],
         },

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   useCallback,
   useRef,
@@ -24,6 +25,7 @@ import {
   MutableRefObject,
   CSSProperties,
   DragEvent,
+  useEffect,
 } from 'react';
 
 import {
@@ -39,8 +41,9 @@ import {
   Row,
 } from 'react-table';
 import { matchSorter, rankings } from 'match-sorter';
-import { typedMemo, usePrevious } from '@superset-ui/core';
+import { styled, typedMemo, usePrevious } from '@superset-ui/core';
 import { isEqual } from 'lodash';
+import { Space } from 'antd';
 import GlobalFilter, { GlobalFilterProps } from './components/GlobalFilter';
 import SelectPageSize, {
   SelectPageSizeProps,
@@ -50,6 +53,8 @@ import SimplePagination from './components/Pagination';
 import useSticky from './hooks/useSticky';
 import { PAGE_SIZE_OPTIONS } from '../consts';
 import { sortAlphanumericCaseInsensitive } from './utils/sortAlphanumericCaseInsensitive';
+import { SearchOption, SortByItem } from '../types';
+import SearchSelectDropdown from './components/SearchSelectDropdown';
 
 export interface DataTableProps<D extends object> extends TableOptions<D> {
   tableClassName?: string;
@@ -62,7 +67,12 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
   height?: string | number;
   serverPagination?: boolean;
   onServerPaginationChange: (pageNumber: number, pageSize: number) => void;
-  serverPaginationData: { pageSize?: number; currentPage?: number };
+  serverPaginationData: {
+    pageSize?: number;
+    currentPage?: number;
+    sortBy?: SortByItem[];
+    searchColumn?: string;
+  };
   pageSize?: number;
   noResults?: string | ((filterString: string) => ReactNode);
   sticky?: boolean;
@@ -71,6 +81,14 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
   onColumnOrderChange: () => void;
   renderGroupingHeaders?: () => JSX.Element;
   renderTimeComparisonDropdown?: () => JSX.Element;
+  handleSortByChange: (sortBy: SortByItem[]) => void;
+  sortByFromParent: SortByItem[];
+  manualSearch?: boolean;
+  onSearchChange?: (searchText: string) => void;
+  initialSearchText?: string;
+  searchInputId?: string;
+  onSearchColChange: (searchCol: string) => void;
+  searchOptions: SearchOption[];
 }
 
 export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
@@ -81,6 +99,20 @@ const sortTypes = {
   alphanumeric: sortAlphanumericCaseInsensitive,
 };
 
+const StyledSpace = styled(Space)`
+  display: flex;
+  justify-content: flex-end;
+
+  .search-select-container {
+    display: flex;
+  }
+
+  .search-by-label {
+    align-self: center;
+    margin-right: 4px;
+  }
+`;
+
 // Be sure to pass our updateMyData and the skipReset option
 export default typedMemo(function DataTable<D extends object>({
   tableClassName,
@@ -105,6 +137,14 @@ export default typedMemo(function DataTable<D extends object>({
   onColumnOrderChange,
   renderGroupingHeaders,
   renderTimeComparisonDropdown,
+  handleSortByChange,
+  sortByFromParent = [],
+  manualSearch = false,
+  onSearchChange,
+  initialSearchText,
+  searchInputId,
+  onSearchColChange,
+  searchOptions,
   ...moreUseTableOptions
 }: DataTableProps<D>): JSX.Element {
   const tableHooks: PluginHook<D>[] = [
@@ -115,6 +155,7 @@ export default typedMemo(function DataTable<D extends object>({
     doSticky ? useSticky : [],
     hooks || [],
   ].flat();
+
   const columnNames = Object.keys(data?.[0] || {});
   const previousColumnNames = usePrevious(columnNames);
   const resultsSize = serverPagination ? rowCount : data.length;
@@ -127,7 +168,8 @@ export default typedMemo(function DataTable<D extends object>({
     ...initialState_,
     // zero length means all pages, the `usePagination` plugin does not
     // understand pageSize = 0
-    sortBy: sortByRef.current,
+    // sortBy: sortByRef.current,
+    sortBy: serverPagination ? sortByFromParent : sortByRef.current,
     pageSize: initialPageSize > 0 ? initialPageSize : resultsSize || 10,
   };
   const defaultWrapperRef = useRef<HTMLDivElement>(null);
@@ -188,7 +230,13 @@ export default typedMemo(function DataTable<D extends object>({
     wrapStickyTable,
     setColumnOrder,
     allColumns,
-    state: { pageIndex, pageSize, globalFilter: filterValue, sticky = {} },
+    state: {
+      pageIndex,
+      pageSize,
+      globalFilter: filterValue,
+      sticky = {},
+      sortBy,
+    },
   } = useTable<D>(
     {
       columns,
@@ -198,10 +246,46 @@ export default typedMemo(function DataTable<D extends object>({
       globalFilter: defaultGlobalFilter,
       sortTypes,
       autoResetSortBy: !isEqual(columnNames, previousColumnNames),
+      manualSortBy: !!serverPagination,
       ...moreUseTableOptions,
     },
     ...tableHooks,
   );
+
+  const handleSearchChange = useCallback(
+    (query: string) => {
+      if (manualSearch && onSearchChange) {
+        onSearchChange(query);
+      } else {
+        setGlobalFilter(query);
+      }
+    },
+    [manualSearch, onSearchChange, setGlobalFilter],
+  );
+
+  // updating the sort by to the own State of table viz
+  useEffect(() => {
+    const serverSortBy = serverPaginationData?.sortBy || [];
+
+    if (serverPagination && !isEqual(sortBy, serverSortBy)) {
+      if (Array.isArray(sortBy) && sortBy.length > 0) {
+        const [sortByItem] = sortBy;
+        const matchingColumn = columns.find(col => col?.id === sortByItem?.id);
+
+        if (matchingColumn && 'columnKey' in matchingColumn) {
+          const sortByWithColumnKey: SortByItem = {
+            ...sortByItem,
+            key: (matchingColumn as { columnKey: string }).columnKey,
+          };
+
+          handleSortByChange([sortByWithColumnKey]);
+        }
+      } else {
+        handleSortByChange([]);
+      }
+    }
+  }, [sortBy]);
+
   // make setPageSize accept 0
   const setPageSize = (size: number) => {
     if (serverPagination) {
@@ -355,6 +439,7 @@ export default typedMemo(function DataTable<D extends object>({
     resultOnPageChange = (pageNumber: number) =>
       onServerPaginationChange(pageNumber, serverPageSize);
   }
+
   return (
     <div
       ref={wrapperRef}
@@ -381,16 +466,31 @@ export default typedMemo(function DataTable<D extends object>({
               ) : null}
             </div>
             {searchInput ? (
-              <div className="col-sm-6">
+              <StyledSpace className="col-sm-6">
+                {serverPagination && (
+                  <div className="search-select-container">
+                    <span className="search-by-label">Search by: </span>
+                    <SearchSelectDropdown
+                      searchOptions={searchOptions}
+                      value={serverPaginationData?.searchColumn || ''}
+                      onChange={onSearchColChange}
+                    />
+                  </div>
+                )}
                 <GlobalFilter<D>
                   searchInput={
                     typeof searchInput === 'boolean' ? undefined : searchInput
                   }
                   preGlobalFilteredRows={preGlobalFilteredRows}
-                  setGlobalFilter={setGlobalFilter}
-                  filterValue={filterValue}
+                  setGlobalFilter={
+                    manualSearch ? handleSearchChange : setGlobalFilter
+                  }
+                  filterValue={manualSearch ? initialSearchText : filterValue}
+                  id={searchInputId}
+                  serverPagination={!!serverPagination}
+                  rowCount={rowCount}
                 />
-              </div>
+              </StyledSpace>
             ) : null}
             {renderTimeComparisonDropdown ? (
               <div

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx

@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { memo, ComponentType, ChangeEventHandler } from 'react';
+import {
+  memo,
+  ComponentType,
+  ChangeEventHandler,
+  useRef,
+  useEffect,
+} from 'react';
 import { Row, FilterValue } from 'react-table';
 import useAsyncState from '../utils/useAsyncState';
 
@@ -24,8 +30,12 @@ export interface SearchInputProps {
   count: number;
   value: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: () => void;
+  inputRef?: React.RefObject<HTMLInputElement>;
 }
 
+const isSearchFocused = new Map();
+
 export interface GlobalFilterProps<D extends object> {
   preGlobalFilteredRows: Row<D>[];
   // filter value cannot be `undefined` otherwise React will report component
@@ -33,17 +43,28 @@ export interface GlobalFilterProps<D extends object> {
   filterValue: string;
   setGlobalFilter: (filterValue: FilterValue) => void;
   searchInput?: ComponentType<SearchInputProps>;
+  id?: string;
+  serverPagination: boolean;
+  rowCount: number;
 }
 
-function DefaultSearchInput({ count, value, onChange }: SearchInputProps) {
+function DefaultSearchInput({
+  count,
+  value,
+  onChange,
+  onBlur,
+  inputRef,
+}: SearchInputProps) {
   return (
     <span className="dt-global-filter">
       Search{' '}
       <input
+        ref={inputRef}
         className="form-control input-sm"
         placeholder={`${count} records...`}
         value={value}
         onChange={onChange}
+        onBlur={onBlur}
       />
     </span>
   );
@@ -56,8 +77,13 @@ export default (memo as <T>(fn: T) => T)(function GlobalFilter<
   filterValue = '',
   searchInput,
   setGlobalFilter,
+  id = '',
+  serverPagination,
+  rowCount,
 }: GlobalFilterProps<D>) {
-  const count = preGlobalFilteredRows.length;
+  const count = serverPagination ? rowCount : preGlobalFilteredRows.length;
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const [value, setValue] = useAsyncState(
     filterValue,
     (newValue: string) => {
@@ -66,17 +92,37 @@ export default (memo as <T>(fn: T) => T)(function GlobalFilter<
     200,
   );
 
+  // Preserve focus during server-side filtering to maintain a better user experience
+  useEffect(() => {
+    if (
+      serverPagination &&
+      isSearchFocused.get(id) &&
+      document.activeElement !== inputRef.current
+    ) {
+      inputRef.current?.focus();
+    }
+  }, [value, serverPagination]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    e.preventDefault();
+    isSearchFocused.set(id, true);
+    setValue(target.value);
+  };
+
+  const handleBlur = () => {
+    isSearchFocused.set(id, false);
+  };
+
   const SearchInput = searchInput || DefaultSearchInput;
 
   return (
     <SearchInput
       count={count}
       value={value}
-      onChange={e => {
-        const target = e.target as HTMLInputElement;
-        e.preventDefault();
-        setValue(target.value);
-      }}
+      inputRef={inputRef}
+      onChange={handleChange}
+      onBlur={handleBlur}
     />
   );
 });

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/SearchSelectDropdown.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 import/no-extraneous-dependencies */
+import { styled } from '@superset-ui/core';
+import { Select } from 'antd';
+import { SearchOption } from '../../types';
+
+const StyledSelect = styled(Select)`
+  width: 120px;
+  margin-right: 8px;
+`;
+
+interface SearchSelectDropdownProps {
+  /** The currently selected search column value */
+  value?: string;
+  /** Callback triggered when a new search column is selected */
+  onChange: (searchCol: string) => void;
+  /** Available search column options to populate the dropdown */
+  searchOptions: SearchOption[];
+}
+
+function SearchSelectDropdown({
+  value,
+  onChange,
+  searchOptions,
+}: SearchSelectDropdownProps) {
+  return (
+    <StyledSelect
+      className="search-select"
+      value={value || (searchOptions?.[0]?.value ?? '')}
+      options={searchOptions}
+      onChange={onChange}
+    />
+  );
+}
+
+export default SearchSelectDropdown;

superset-frontend/plugins/plugin-chart-table/src/DataTable/types/react-table.d.ts

@@ -115,3 +115,11 @@ declare module 'react-table' {
     extends UseTableHooks<D>,
       UseSortByHooks<D> {}
 }
+
+interface TableOwnState {
+  currentPage?: number;
+  pageSize?: number;
+  sortColumn?: string;
+  sortOrder?: 'asc' | 'desc';
+  searchText?: string;
+}

superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/externalAPIs.ts

@@ -18,6 +18,7 @@
  */
 
 import { SetDataMaskHook } from '@superset-ui/core';
+import { TableOwnState } from '../types/react-table';
 
 export const updateExternalFormData = (
   setDataMask: SetDataMaskHook = () => {},
@@ -30,3 +31,11 @@ export const updateExternalFormData = (
       pageSize,
     },
   });
+
+export const updateTableOwnState = (
+  setDataMask: SetDataMaskHook = () => {},
+  modifiedOwnState: TableOwnState,
+) =>
+  setDataMask({
+    ownState: modifiedOwnState,
+  });

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -24,6 +24,7 @@ import {
   useState,
   MouseEvent,
   KeyboardEvent as ReactKeyboardEvent,
+  useEffect,
 } from 'react';
 
 import {
@@ -61,10 +62,12 @@ import {
   PlusCircleOutlined,
   TableOutlined,
 } from '@ant-design/icons';
-import { isEmpty } from 'lodash';
+import { debounce, isEmpty, isEqual } from 'lodash';
 import {
   ColorSchemeEnum,
   DataColumnMeta,
+  SearchOption,
+  SortByItem,
   TableChartTransformedProps,
 } from './types';
 import DataTable, {
@@ -77,7 +80,7 @@ import DataTable, {
 import Styles from './Styles';
 import { formatColumnValue } from './utils/formatValue';
 import { PAGE_SIZE_OPTIONS } from './consts';
-import { updateExternalFormData } from './DataTable/utils/externalAPIs';
+import { updateTableOwnState } from './DataTable/utils/externalAPIs';
 import getScrollBarSize from './DataTable/utils/getScrollBarSize';
 
 type ValueRange = [number, number];
@@ -176,20 +179,26 @@ function SortIcon<D extends object>({ column }: { column: ColumnInstance<D> }) {
   return sortIcon;
 }
 
-function SearchInput({ count, value, onChange }: SearchInputProps) {
-  return (
-    <span className="dt-global-filter">
-      {t('Search')}{' '}
-      <input
-        aria-label={t('Search %s records', count)}
-        className="form-control input-sm"
-        placeholder={tn('search.num_records', count)}
-        value={value}
-        onChange={onChange}
-      />
-    </span>
-  );
-}
+const SearchInput = ({
+  count,
+  value,
+  onChange,
+  onBlur,
+  inputRef,
+}: SearchInputProps) => (
+  <span className="dt-global-filter">
+    {t('Search')}{' '}
+    <input
+      ref={inputRef}
+      aria-label={t('Search %s records', count)}
+      className="form-control input-sm"
+      placeholder={tn('search.num_records', count)}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+    />
+  </span>
+);
 
 function SelectPageSize({
   options,
@@ -267,6 +276,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     isUsingTimeComparison,
     basicColorFormatters,
     basicColorColumnFormatters,
+    hasServerPageLengthChanged,
+    serverPageLength,
+    slice_id,
   } = props;
   const comparisonColumns = [
     { key: 'all', label: t('Display all') },
@@ -679,16 +691,41 @@ export default function TableChart<D extends DataRecord = DataRecord>(
   );
 
   const getColumnConfigs = useCallback(
-    (column: DataColumnMeta, i: number): ColumnWithLooseAccessor<D> => {
+    (
+      column: DataColumnMeta,
+      i: number,
+    ): ColumnWithLooseAccessor<D> & {
+      columnKey: string;
+    } => {
       const {
         key,
-        label,
+        label: originalLabel,
         isNumeric,
         dataType,
         isMetric,
         isPercentMetric,
         config = {},
       } = column;
+      const label = config.customColumnName || originalLabel;
+      let displayLabel = label;
+
+      const isComparisonColumn = ['#', '△', '%', t('Main')].includes(
+        column.label,
+      );
+
+      if (isComparisonColumn) {
+        if (column.label === t('Main')) {
+          displayLabel = config.customColumnName || column.originalLabel || '';
+        } else if (config.customColumnName) {
+          displayLabel =
+            config.displayTypeIcon !== false
+              ? `${column.label} ${config.customColumnName}`
+              : config.customColumnName;
+        } else if (config.displayTypeIcon === false) {
+          displayLabel = '';
+        }
+      }
+
       const columnWidth = Number.isNaN(Number(config.columnWidth))
         ? config.columnWidth
         : Number(config.columnWidth);
@@ -746,6 +783,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         // must use custom accessor to allow `.` in column names
         // typing is incorrect in current version of `@types/react-table`
         // so we ask TS not to check.
+        columnKey: key,
         accessor: ((datum: D) => datum[key]) as never,
         Cell: ({ value, row }: { value: DataRecordValue; row: Row<D> }) => {
           const [isHtml, text] = formatColumnValue(column, value);
@@ -795,6 +833,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             white-space: ${value instanceof Date ? 'nowrap' : undefined};
             position: relative;
             background: ${backgroundColor || undefined};
+            padding-left: ${column.isChildColumn
+              ? `${theme.gridUnit * 5}px`
+              : `${theme.gridUnit}px`};
           `;
 
           const cellBarStyles = css`
@@ -970,11 +1011,12 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                 alignItems: 'flex-end',
               }}
             >
-              <span data-column-name={col.id}>{label}</span>
+              <span data-column-name={col.id}>{displayLabel}</span>
               <SortIcon column={col} />
             </div>
           </th>
         ),
+
         Footer: totals ? (
           i === 0 ? (
             <th key={`footer-summary-${i}`}>
@@ -1024,18 +1066,60 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     ],
   );
 
-  const columns = useMemo(
-    () => filteredColumnsMeta.map(getColumnConfigs),
-    [filteredColumnsMeta, getColumnConfigs],
+  const visibleColumnsMeta = useMemo(
+    () => filteredColumnsMeta.filter(col => col.config?.visible !== false),
+    [filteredColumnsMeta],
   );
 
+  const columns = useMemo(
+    () => visibleColumnsMeta.map(getColumnConfigs),
+    [visibleColumnsMeta, getColumnConfigs],
+  );
+
+  const [searchOptions, setSearchOptions] = useState<SearchOption[]>([]);
+
+  useEffect(() => {
+    const options = (
+      columns as unknown as ColumnWithLooseAccessor &
+        {
+          columnKey: string;
+          sortType?: string;
+        }[]
+    )
+      .filter(col => col?.sortType === 'alphanumeric')
+      .map(column => ({
+        value: column.columnKey,
+        label: column.columnKey,
+      }));
+
+    if (!isEqual(options, searchOptions)) {
+      setSearchOptions(options || []);
+    }
+  }, [columns]);
+
   const handleServerPaginationChange = useCallback(
     (pageNumber: number, pageSize: number) => {
-      updateExternalFormData(setDataMask, pageNumber, pageSize);
+      const modifiedOwnState = {
+        ...serverPaginationData,
+        currentPage: pageNumber,
+        pageSize,
+      };
+      updateTableOwnState(setDataMask, modifiedOwnState);
     },
     [setDataMask],
   );
 
+  useEffect(() => {
+    if (hasServerPageLengthChanged) {
+      const modifiedOwnState = {
+        ...serverPaginationData,
+        currentPage: 0,
+        pageSize: serverPageLength,
+      };
+      updateTableOwnState(setDataMask, modifiedOwnState);
+    }
+  }, []);
+
   const handleSizeChange = useCallback(
     ({ width, height }: { width: number; height: number }) => {
       setTableSize({ width, height });
@@ -1071,6 +1155,42 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
   const { width: widthFromState, height: heightFromState } = tableSize;
 
+  const handleSortByChange = useCallback(
+    (sortBy: SortByItem[]) => {
+      if (!serverPagination) return;
+      const modifiedOwnState = {
+        ...serverPaginationData,
+        sortBy,
+      };
+      updateTableOwnState(setDataMask, modifiedOwnState);
+    },
+    [setDataMask, serverPagination],
+  );
+
+  const handleSearch = (searchText: string) => {
+    const modifiedOwnState = {
+      ...(serverPaginationData || {}),
+      searchColumn:
+        serverPaginationData?.searchColumn || searchOptions[0]?.value,
+      searchText,
+      currentPage: 0, // Reset to first page when searching
+    };
+    updateTableOwnState(setDataMask, modifiedOwnState);
+  };
+
+  const debouncedSearch = debounce(handleSearch, 800);
+
+  const handleChangeSearchCol = (searchCol: string) => {
+    if (!isEqual(searchCol, serverPaginationData?.searchColumn)) {
+      const modifiedOwnState = {
+        ...(serverPaginationData || {}),
+        searchColumn: searchCol,
+        searchText: '',
+      };
+      updateTableOwnState(setDataMask, modifiedOwnState);
+    }
+  };
+
   return (
     <Styles>
       <DataTable<D>
@@ -1086,6 +1206,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         serverPagination={serverPagination}
         onServerPaginationChange={handleServerPaginationChange}
         onColumnOrderChange={() => setColumnOrderToggle(!columnOrderToggle)}
+        initialSearchText={serverPaginationData?.searchText || ''}
+        sortByFromParent={serverPaginationData?.sortBy || []}
+        searchInputId={`${slice_id}-search`}
         // 9 page items in > 340px works well even for 100+ pages
         maxPageItemCount={width > 340 ? 9 : 7}
         noResults={getNoResultsMessage}
@@ -1099,6 +1222,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         renderTimeComparisonDropdown={
           isUsingTimeComparison ? renderTimeComparisonDropdown : undefined
         }
+        handleSortByChange={handleSortByChange}
+        onSearchColChange={handleChangeSearchCol}
+        manualSearch={serverPagination}
+        onSearchChange={debouncedSearch}
+        searchOptions={searchOptions}
       />
     </Styles>
   );

superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts

@@ -22,6 +22,7 @@ import {
   ensureIsArray,
   getMetricLabel,
   isPhysicalColumn,
+  QueryFormOrderBy,
   QueryMode,
   QueryObject,
   removeDuplicates,
@@ -34,7 +35,7 @@ import {
 } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
 import { TableChartFormData } from './types';
-import { updateExternalFormData } from './DataTable/utils/externalAPIs';
+import { updateTableOwnState } from './DataTable/utils/externalAPIs';
 
 /**
  * Infer query mode from form data. If `all_columns` is set, then raw records mode,
@@ -191,18 +192,40 @@ const buildQuery: BuildQuery<TableChartFormData> = (
 
     const moreProps: Partial<QueryObject> = {};
     const ownState = options?.ownState ?? {};
-    if (formDataCopy.server_pagination) {
-      moreProps.row_limit =
-        ownState.pageSize ?? formDataCopy.server_page_length;
-      moreProps.row_offset =
-        (ownState.currentPage ?? 0) * (ownState.pageSize ?? 0);
+    // Build Query flag to check if its for either download as csv, excel or json
+    const isDownloadQuery =
+      ['csv', 'xlsx'].includes(formData?.result_format || '') ||
+      (formData?.result_format === 'json' &&
+        formData?.result_type === 'results');
+
+    if (isDownloadQuery) {
+      moreProps.row_limit = Number(formDataCopy.row_limit) || 0;
+      moreProps.row_offset = 0;
+    }
+
+    if (!isDownloadQuery && formDataCopy.server_pagination) {
+      const pageSize = ownState.pageSize ?? formDataCopy.server_page_length;
+      const currentPage = ownState.currentPage ?? 0;
+
+      moreProps.row_limit = pageSize;
+      moreProps.row_offset = currentPage * pageSize;
+    }
+
+    // getting sort by in case of server pagination from own state
+    let sortByFromOwnState: QueryFormOrderBy[] | undefined;
+    if (Array.isArray(ownState?.sortBy) && ownState?.sortBy.length > 0) {
+      const sortByItem = ownState?.sortBy[0];
+      sortByFromOwnState = [[sortByItem?.key, !sortByItem?.desc]];
     }
 
     let queryObject = {
       ...baseQueryObject,
       columns,
       extras,
-      orderby,
+      orderby:
+        formData.server_pagination && sortByFromOwnState
+          ? sortByFromOwnState
+          : orderby,
       metrics,
       post_processing: postProcessing,
       time_offsets: timeOffsets,
@@ -216,11 +239,12 @@ const buildQuery: BuildQuery<TableChartFormData> = (
         JSON.stringify(queryObject.filters)
     ) {
       queryObject = { ...queryObject, row_offset: 0 };
-      updateExternalFormData(
-        options?.hooks?.setDataMask,
-        0,
-        queryObject.row_limit ?? 0,
-      );
+      const modifiedOwnState = {
+        ...(options?.ownState || {}),
+        currentPage: 0,
+        pageSize: queryObject.row_limit ?? 0,
+      };
+      updateTableOwnState(options?.hooks?.setDataMask, modifiedOwnState);
     }
     // Because we use same buildQuery for all table on the page we need split them by id
     options?.hooks?.setCachedChanges({
@@ -252,12 +276,32 @@ const buildQuery: BuildQuery<TableChartFormData> = (
     }
 
     if (formData.server_pagination) {
+      // Add search filter if search text exists
+      if (ownState.searchText && ownState?.searchColumn) {
+        queryObject = {
+          ...queryObject,
+          filters: [
+            ...(queryObject.filters || []),
+            {
+              col: ownState?.searchColumn,
+              op: 'ILIKE',
+              val: `${ownState.searchText}%`,
+            },
+          ],
+        };
+      }
+    }
+
+    // Now since row limit control is always visible even
+    // in case of server pagination
+    // we must use row limit from form data
+    if (formData.server_pagination && !isDownloadQuery) {
       return [
         { ...queryObject },
         {
           ...queryObject,
           time_offsets: [],
-          row_limit: 0,
+          row_limit: Number(formData?.row_limit) ?? 0,
           row_offset: 0,
           post_processing: [],
           is_rowcount: true,

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -28,7 +28,10 @@ import {
   ControlStateMapping,
   D3_TIME_FORMAT_OPTIONS,
   Dataset,
+  DEFAULT_MAX_ROW,
+  DEFAULT_MAX_ROW_TABLE_SERVER,
   defineSavedMetrics,
+  formatSelectOptions,
   getStandardizedControls,
   QueryModeLabel,
   sections,
@@ -37,15 +40,20 @@ import {
 import {
   ensureIsArray,
   GenericDataType,
+  getMetricLabel,
   isAdhocColumn,
   isPhysicalColumn,
+  legacyValidateInteger,
   QueryFormColumn,
+  QueryFormMetric,
   QueryMode,
   SMART_DATE_ID,
   t,
+  validateMaxValue,
+  validateServerPagination,
 } from '@superset-ui/core';
 
-import { isEmpty } from 'lodash';
+import { isEmpty, last } from 'lodash';
 import { PAGE_SIZE_OPTIONS } from './consts';
 import { ColorSchemeEnum } from './types';
 
@@ -186,6 +194,15 @@ const processComparisonColumns = (columns: any[], suffix: string) =>
     })
     .flat();
 
+/*
+Options for row limit control
+*/
+
+export const ROW_LIMIT_OPTIONS_TABLE = [
+  10, 50, 100, 250, 500, 1000, 5000, 10000, 50000, 100000, 150000, 200000,
+  250000, 300000, 350000, 400000, 450000, 500000,
+];
+
 const config: ControlPanelConfig = {
   controlPanelSections: [
     {
@@ -340,14 +357,6 @@ const config: ControlPanelConfig = {
           },
         ],
         [
-          {
-            name: 'row_limit',
-            override: {
-              default: 1000,
-              visibility: ({ controls }: ControlPanelsContainerProps) =>
-                !controls?.server_pagination?.value,
-            },
-          },
           {
             name: 'server_page_length',
             config: {
@@ -362,6 +371,47 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'row_limit',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Row limit'),
+              clearable: false,
+              mapStateToProps: state => ({
+                maxValue: state?.common?.conf?.TABLE_VIZ_MAX_ROW_SERVER,
+                server_pagination: state?.form_data?.server_pagination,
+                maxValueWithoutServerPagination:
+                  state?.common?.conf?.SQL_MAX_ROW,
+              }),
+              validators: [
+                legacyValidateInteger,
+                (v, state) =>
+                  validateMaxValue(
+                    v,
+                    state?.maxValue || DEFAULT_MAX_ROW_TABLE_SERVER,
+                  ),
+                (v, state) =>
+                  validateServerPagination(
+                    v,
+                    state?.server_pagination,
+                    state?.maxValueWithoutServerPagination || DEFAULT_MAX_ROW,
+                  ),
+              ],
+              // Re run the validations when this control value
+              validationDependancies: ['server_pagination'],
+              default: 10000,
+              choices: formatSelectOptions(ROW_LIMIT_OPTIONS_TABLE),
+              description: t(
+                'Limits the number of the rows that are computed in the query that is the source of the data used for this chart.',
+              ),
+            },
+            override: {
+              default: 1000,
+            },
+          },
+        ],
         [
           {
             name: 'order_desc',
@@ -486,38 +536,69 @@ const config: ControlPanelConfig = {
                 return true;
               },
               mapStateToProps(explore, _, chart) {
-                const timeComparisonStatus = !isEmpty(
-                  explore?.controls?.time_compare?.value,
-                );
-
+                const timeComparisonValue =
+                  explore?.controls?.time_compare?.value;
                 const { colnames: _colnames, coltypes: _coltypes } =
                   chart?.queriesResponse?.[0] ?? {};
                 let colnames: string[] = _colnames || [];
                 let coltypes: GenericDataType[] = _coltypes || [];
+                const childColumnMap: Record<string, boolean> = {};
+                const timeComparisonColumnMap: Record<string, boolean> = {};
 
-                if (timeComparisonStatus) {
+                if (!isEmpty(timeComparisonValue)) {
                   /**
                    * Replace numeric columns with sets of comparison columns.
                    */
                   const updatedColnames: string[] = [];
                   const updatedColtypes: GenericDataType[] = [];
-                  colnames.forEach((colname, index) => {
-                    if (coltypes[index] === GenericDataType.Numeric) {
-                      updatedColnames.push(
-                        ...generateComparisonColumns(colname),
-                      );
-                      updatedColtypes.push(...generateComparisonColumnTypes(4));
-                    } else {
-                      updatedColnames.push(colname);
-                      updatedColtypes.push(coltypes[index]);
-                    }
-                  });
+
+                  colnames
+                    .filter(
+                      colname =>
+                        last(colname.split('__')) !== timeComparisonValue,
+                    )
+                    .forEach((colname, index) => {
+                      if (
+                        explore.form_data.metrics?.some(
+                          metric => getMetricLabel(metric) === colname,
+                        ) ||
+                        explore.form_data.percent_metrics?.some(
+                          (metric: QueryFormMetric) =>
+                            getMetricLabel(metric) === colname,
+                        )
+                      ) {
+                        const comparisonColumns =
+                          generateComparisonColumns(colname);
+                        comparisonColumns.forEach((name, idx) => {
+                          updatedColnames.push(name);
+                          updatedColtypes.push(
+                            ...generateComparisonColumnTypes(4),
+                          );
+                          timeComparisonColumnMap[name] = true;
+                          if (idx === 0 && name.startsWith('Main ')) {
+                            childColumnMap[name] = false;
+                          } else {
+                            childColumnMap[name] = true;
+                          }
+                        });
+                      } else {
+                        updatedColnames.push(colname);
+                        updatedColtypes.push(coltypes[index]);
+                        childColumnMap[colname] = false;
+                        timeComparisonColumnMap[colname] = false;
+                      }
+                    });
 
                   colnames = updatedColnames;
                   coltypes = updatedColtypes;
                 }
                 return {
-                  columnsPropsObject: { colnames, coltypes },
+                  columnsPropsObject: {
+                    colnames,
+                    coltypes,
+                    childColumnMap,
+                    timeComparisonColumnMap,
+                  },
                 };
               },
             },

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -90,6 +90,15 @@ const processDataRecords = memoizeOne(function processDataRecords(
   return data;
 });
 
+// Create a map to store cached values per slice
+const sliceCache = new Map<
+  number,
+  {
+    cachedServerLength: number;
+    passedColumns?: DataColumnMeta[];
+  }
+>();
+
 const calculateDifferences = (
   originalValue: number,
   comparisonValue: number,
@@ -480,6 +489,7 @@ const transformProps = (
     comparison_color_enabled: comparisonColorEnabled = false,
     comparison_color_scheme: comparisonColorScheme = ColorSchemeEnum.Green,
     comparison_type,
+    slice_id,
   } = formData;
   const isUsingTimeComparison =
     !isEmpty(time_compare) &&
@@ -675,6 +685,26 @@ const transformProps = (
     conditionalFormatting,
   );
 
+  // Get cached values for this slice
+  const cachedValues = sliceCache.get(slice_id);
+  let hasServerPageLengthChanged = false;
+
+  if (
+    cachedValues?.cachedServerLength !== undefined &&
+    cachedValues.cachedServerLength !== serverPageLength
+  ) {
+    hasServerPageLengthChanged = true;
+  }
+
+  // Update cache with new values
+  sliceCache.set(slice_id, {
+    cachedServerLength: serverPageLength,
+    passedColumns:
+      Array.isArray(passedColumns) && passedColumns?.length > 0
+        ? passedColumns
+        : cachedValues?.passedColumns,
+  });
+
   const startDateOffset = chartProps.rawFormData?.start_date_offset;
   return {
     height,
@@ -682,7 +712,10 @@ const transformProps = (
     isRawRecords: queryMode === QueryMode.Raw,
     data: passedData,
     totals,
-    columns: passedColumns,
+    columns:
+      Array.isArray(passedColumns) && passedColumns?.length > 0
+        ? passedColumns
+        : cachedValues?.passedColumns || [],
     serverPagination,
     metrics,
     percentMetrics,
@@ -697,7 +730,9 @@ const transformProps = (
     includeSearch,
     rowCount,
     pageSize: serverPagination
-      ? serverPageLength
+      ? serverPaginationData?.pageSize
+        ? serverPaginationData?.pageSize
+        : serverPageLength
       : getPageSize(pageLength, data.length, columns.length),
     filters: filterState.filters,
     emitCrossFilters,
@@ -711,6 +746,9 @@ const transformProps = (
     basicColorFormatters,
     startDateOffset,
     basicColorColumnFormatters,
+    hasServerPageLengthChanged,
+    serverPageLength,
+    slice_id,
   };
 };
 

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -49,6 +49,9 @@ export type TableColumnConfig = {
   colorPositiveNegative?: boolean;
   truncateLongCells?: boolean;
   currencyFormat?: Currency;
+  visible?: boolean;
+  customColumnName?: string;
+  displayTypeIcon?: boolean;
 };
 
 export interface DataColumnMeta {
@@ -68,6 +71,7 @@ export interface DataColumnMeta {
   isPercentMetric?: boolean;
   isNumeric?: boolean;
   config?: TableColumnConfig;
+  isChildColumn?: boolean;
 }
 
 export interface TableChartData {
@@ -110,13 +114,32 @@ export type BasicColorFormatterType = {
   mainArrow: string;
 };
 
+export type SortByItem = {
+  id: string;
+  key: string;
+  desc?: boolean;
+};
+
+export type SearchOption = {
+  value: string;
+  label: string;
+};
+
+export interface ServerPaginationData {
+  pageSize?: number;
+  currentPage?: number;
+  sortBy?: SortByItem[];
+  searchText?: string;
+  searchColumn?: string;
+}
+
 export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   timeGrain?: TimeGranularity;
   height: number;
   width: number;
   rowCount?: number;
   serverPagination: boolean;
-  serverPaginationData: { pageSize?: number; currentPage?: number };
+  serverPaginationData: ServerPaginationData;
   setDataMask: SetDataMaskHook;
   isRawRecords?: boolean;
   data: D[];
@@ -148,6 +171,11 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   basicColorFormatters?: { [Key: string]: BasicColorFormatterType }[];
   basicColorColumnFormatters?: { [Key: string]: BasicColorFormatterType }[];
   startDateOffset?: string;
+  // For explore page to reset the server Pagination data
+  // if server page length is changed from control panel
+  hasServerPageLengthChanged: boolean;
+  serverPageLength: number;
+  slice_id: number;
 }
 
 export enum ColorSchemeEnum {