You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/08/23 16:22:29 UTC

[superset] branch chore/e2e-tests-drilltodetail-modal updated (e82832937d -> caebf71cd3)

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a change to branch chore/e2e-tests-drilltodetail-modal
in repository https://gitbox.apache.org/repos/asf/superset.git


 discard e82832937d Add example ECharts Dashboard
 discard 6987b165ef Merge branch 'codyml/sc-52488/apply-drill-to-detail-modal-filters-gathered' of https://github.com/codyml/superset into chore/e2e-tests-drilltodetail-modal
 discard 5d9c4266ab Merge branch 'master' of https://github.com/apache/superset
 discard 621ea7314f Fix modal layout issues.
 discard bd21c5ea2e Fix endless re-requests on request failure.
 discard 1c7fa8f366 Reset page index on reload.
 discard e65e4483d8 Rearrange/refactor DrillDetailPane.
 discard 24c079adb6 Set force=false for all requests.
 discard bf463961e9 Show formattedVal in clearable filter tag.
 discard 8a9d448014 Fix double requests on modal open, controls disappearing on filter update.
 discard b25c44330e Open modal on right-click.
 discard 5980017c53 Disable option in chart menu unless feature flag is set.
 discard 0e931e620c Fix height of modal.
 discard eab75a7766 Fix incorrect argument order in getDatasourceSamples invocation.
 discard 17cad5122a One-line import/export.
 discard e20dc8be3c Update getDatasourceSamples signature.
 discard 91d9b9c6ee Set page cache size to be approximately equal to memory usage of Samples pane.
 discard 8ab13c96ff Include additional filters from dashboard context in request.
 discard e0e703820f Add drill-to-detail modal.
     add d79b0bfc74 fix(native filters): groupby filter issue (#21084)
     add d44202f03c docs: added timescaledb (#21128)
     add bdcc0a9bcf fix(charts): Hide Values greater than Max Y Axis Bound on Mixed Time Series with Bar series (#21015)
     add 0bf4e56dc3 fix: Drill to detail on values with comma (#21151)
     add ca98fd8468 docs: Format the same size of picture for better part of "Supported Databases" document (#21037)
     add 52648ecd7f feat(dashboard): Add Drill to Detail modal w/ chart menu + right-click support (#20728)
     add 6094274f0b feat: Create dataset blank state (#21058)
     add 51e567ffef chore(deps): bump async from 2.6.3 to 2.6.4 in /superset-frontend (#21062)
     new dfaaa1b4b1 Add example ECharts Dashboard
     new caebf71cd3 [WIP] E2E test

This update added new revisions after undoing existing revisions.
That is to say, some revisions that were in the old version of the
branch are not in the new version.  This situation occurs
when a user --force pushes a change and generates a repository
containing something like this:

 * -- * -- B -- O -- O -- O   (e82832937d)
            \
             N -- N -- N   refs/heads/chore/e2e-tests-drilltodetail-modal (caebf71cd3)

You should already have received notification emails for all of the O
revisions, and so the following emails describe only the N revisions
from the common base, B.

Any revisions marked "omit" are not gone; other references still
refer to them.  Any revisions marked "discard" are gone forever.

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 README.md                                          |  63 +++--
 .../docs/databases/installing-database-drivers.mdx |   4 +-
 docs/docs/databases/timescaledb.mdx                |  38 +++
 docs/src/resources/data.js                         |   5 +
 .../integration/dashboard/dashboard.helper.ts      |  13 +-
 .../integration/dashboard/drilltodetail.test.ts    | 288 +++++++++++++++++++++
 superset-frontend/package-lock.json                |  36 +--
 .../src/number-format/NumberFormats.ts             |   2 +
 .../superset-ui-core/src/query/types/Query.ts      |   4 +-
 .../src/query/types/QueryResponse.ts               |   1 +
 .../src/Gauge/EchartsGauge.tsx                     |  48 +---
 .../src/MixedTimeseries/EchartsMixedTimeseries.tsx |   4 +-
 .../src/MixedTimeseries/transformProps.ts          | 127 ++++-----
 .../src/Timeseries/EchartsTimeseries.tsx           |   4 +-
 .../src/Timeseries/transformProps.ts               |  17 +-
 .../src/utils/eventHandlers.ts                     |  11 +-
 .../plugin-chart-echarts/src/utils/series.ts       |  22 ++
 .../plugin-chart-echarts/test/utils/series.test.ts |  13 +
 .../src/assets/images/apache-kylin.png             | Bin 13694 -> 9780 bytes
 superset-frontend/src/assets/images/clickhouse.png | Bin 7651 -> 9841 bytes
 superset-frontend/src/assets/images/databricks.png | Bin 20293 -> 11073 bytes
 superset-frontend/src/assets/images/db2.png        | Bin 9010 -> 7493 bytes
 superset-frontend/src/assets/images/druid.png      | Bin 12839 -> 11845 bytes
 .../src/assets/images/empty-dataset.svg            |  38 +++
 .../src/assets/images/empty-table.svg              |  22 ++
 superset-frontend/src/assets/images/exasol.png     | Bin 8582 -> 8965 bytes
 superset-frontend/src/assets/images/firebird.png   | Bin 10895 -> 7953 bytes
 superset-frontend/src/assets/images/firebolt.png   | Bin 27249 -> 9061 bytes
 .../src/assets/images/google-biquery.png           | Bin 16418 -> 15539 bytes
 superset-frontend/src/assets/images/greenplum.png  | Bin 17811 -> 18956 bytes
 superset-frontend/src/assets/images/hologres.png   | Bin 23843 -> 4529 bytes
 superset-frontend/src/assets/images/mariadb.png    | Bin 16770 -> 9663 bytes
 superset-frontend/src/assets/images/monet-db.png   | Bin 21830 -> 14327 bytes
 .../src/assets/images/mssql-server.png             | Bin 21970 -> 10710 bytes
 superset-frontend/src/assets/images/mysql.png      | Bin 14453 -> 9362 bytes
 superset-frontend/src/assets/images/netezza.png    | Bin 54596 -> 8460 bytes
 superset-frontend/src/assets/images/oracle.png     | Bin 8231 -> 8577 bytes
 superset-frontend/src/assets/images/pinot.png      | Bin 68618 -> 7127 bytes
 superset-frontend/src/assets/images/postgresql.png | Bin 18364 -> 16942 bytes
 superset-frontend/src/assets/images/presto.png     | Bin 18505 -> 10865 bytes
 superset-frontend/src/assets/images/redshift.png   | Bin 9168 -> 10885 bytes
 superset-frontend/src/assets/images/rockset.png    | Bin 23189 -> 8570 bytes
 superset-frontend/src/assets/images/snowflake.png  | Bin 21654 -> 15635 bytes
 superset-frontend/src/assets/images/sqlite.png     | Bin 11330 -> 10972 bytes
 superset-frontend/src/assets/images/sybase.png     | Bin 11992 -> 18309 bytes
 superset-frontend/src/assets/images/teradata.png   | Bin 93361 -> 9993 bytes
 superset-frontend/src/assets/images/timescale.png  | Bin 16120 -> 15319 bytes
 superset-frontend/src/assets/images/trino.png      | Bin 23773 -> 10322 bytes
 superset-frontend/src/assets/images/vertica.png    | Bin 6800 -> 11479 bytes
 superset-frontend/src/assets/images/yugabyte.png   | Bin 6460 -> 12123 bytes
 .../src/components/EmptyState/index.tsx            |   4 +-
 .../components/DrillDetailPane/TableControls.tsx   |   3 +-
 .../components/ExploreChartHeader/index.jsx        |   4 +-
 .../src/explore/components/RowCountLabel/index.tsx |  12 +-
 .../components/GroupBy/GroupByFilterPlugin.tsx     |   2 +-
 .../data/dataset/AddDataset/AddDataset.test.tsx}   |  32 +--
 .../AddDataset/DatasetPanel/DatasetPanel.test.tsx} |  40 ++-
 .../DatasetPanel/index.tsx                         |  34 ++-
 .../dataset/AddDataset/Footer/Footer.test.tsx}     |  11 +-
 .../{DatasetPage => AddDataset}/Footer/index.tsx   |   0
 .../dataset/AddDataset/Header/Header.test.tsx}     |  11 +-
 .../{DatasetPage => AddDataset}/Header/index.tsx   |   0
 .../AddDataset/LeftPanel/LeftPanel.test.tsx}       |  14 +-
 .../LeftPanel/index.tsx                            |  12 +-
 .../AddDataset/RightPanel/RightPanel.test.tsx}     |  11 +-
 .../RightPanel/index.tsx                           |   0
 .../dataset/{DatasetPage => AddDataset}/index.tsx  |  20 +-
 .../dataset/{DatasetPage => AddDataset}/types.tsx  |   0
 .../dataset/DatasetLayout/DatasetLayout.test.tsx   |  70 +++++
 .../CRUD/data/dataset/DatasetLayout/index.tsx      |  72 ++++++
 .../src/views/CRUD/data/dataset/styles.ts          |  95 +++++++
 superset-frontend/src/views/routes.tsx             |   8 +-
 72 files changed, 948 insertions(+), 267 deletions(-)
 create mode 100644 docs/docs/databases/timescaledb.mdx
 create mode 100644 superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
 create mode 100644 superset-frontend/src/assets/images/empty-dataset.svg
 create mode 100644 superset-frontend/src/assets/images/empty-table.svg
 copy superset-frontend/src/{components/CachedLabel/CachedLabel.test.tsx => views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx} (56%)
 copy superset-frontend/src/{SqlLab/components/QueryHistory/QueryHistory.test.tsx => views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx} (51%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/DatasetPanel/index.tsx (51%)
 copy superset-frontend/src/{explore/components/DataTableControl/CopyButton.test.tsx => views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx} (79%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/Footer/index.tsx (100%)
 copy superset-frontend/src/{explore/components/DataTableControl/CopyButton.test.tsx => views/CRUD/data/dataset/AddDataset/Header/Header.test.tsx} (79%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/Header/index.tsx (100%)
 copy superset-frontend/src/{explore/components/controls/MetricControl/AggregateOption.test.tsx => views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx} (69%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/LeftPanel/index.tsx (74%)
 copy superset-frontend/src/{explore/components/DataTableControl/CopyButton.test.tsx => views/CRUD/data/dataset/AddDataset/RightPanel/RightPanel.test.tsx} (78%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/RightPanel/index.tsx (100%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/index.tsx (87%)
 rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/types.tsx (100%)
 create mode 100644 superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/index.tsx
 create mode 100644 superset-frontend/src/views/CRUD/data/dataset/styles.ts


[superset] 01/02: Add example ECharts Dashboard

Posted by di...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch chore/e2e-tests-drilltodetail-modal
in repository https://gitbox.apache.org/repos/asf/superset.git

commit dfaaa1b4b1cf02fbc9e7731a1da3bf9967c42446
Author: geido <di...@gmail.com>
AuthorDate: Mon Aug 22 20:59:22 2022 +0300

    Add example ECharts Dashboard
---
 superset/cli/examples.py               |   3 +
 superset/examples/data_loading.py      |   1 +
 superset/examples/echarts_dashboard.py | 161 +++++++++++++++++++++++++++++++++
 3 files changed, 165 insertions(+)

diff --git a/superset/cli/examples.py b/superset/cli/examples.py
index cad87da9d3..cdee3747a8 100755
--- a/superset/cli/examples.py
+++ b/superset/cli/examples.py
@@ -54,6 +54,9 @@ def load_examples_run(
     if load_test_data:
         print("Loading [Tabbed dashboard]")
         examples.load_tabbed_dashboard(only_metadata)
+
+        print("Loading [ECharts Dashboard]")
+        examples.load_echarts_dashboard()
     else:
         print("Loading [Random long/lat data]")
         examples.load_long_lat_data(only_metadata, force)
diff --git a/superset/examples/data_loading.py b/superset/examples/data_loading.py
index 6eae82a799..6b1346623e 100644
--- a/superset/examples/data_loading.py
+++ b/superset/examples/data_loading.py
@@ -33,3 +33,4 @@ from .sf_population_polygons import load_sf_population_polygons
 from .tabbed_dashboard import load_tabbed_dashboard
 from .utils import load_examples_from_configs
 from .world_bank import load_world_bank_health_n_pop
+from .echarts_dashboard import load_echarts_dashboard
\ No newline at end of file
diff --git a/superset/examples/echarts_dashboard.py b/superset/examples/echarts_dashboard.py
new file mode 100644
index 0000000000..25d6b0e112
--- /dev/null
+++ b/superset/examples/echarts_dashboard.py
@@ -0,0 +1,161 @@
+# 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 json
+import textwrap
+
+from superset import db
+from superset.models.dashboard import Dashboard
+
+from .helpers import update_slice_ids
+
+DASH_SLUG = "echarts_dash"
+
+
+def load_echarts_dashboard() -> None:
+    """Loading a dashboard featuring EChart charts"""
+
+    print("Creating the dashboard")
+    db.session.expunge_all()
+    dash = db.session.query(Dashboard).filter_by(slug=DASH_SLUG).first()
+
+    if not dash:
+        dash = Dashboard()
+    js = textwrap.dedent(
+        """\
+{
+    "CHART-dxV7Il74hH": {
+      "children": [],
+      "id": "CHART-dxV7Il74hH",
+      "meta": {
+        "chartId": 597,
+        "height": 50,
+        "sliceName": "Box plot",
+        "width": 6
+      },
+      "type": "CHART"
+    },
+    "CHART-YyHWQacdcj": {
+      "children": [],
+      "id": "CHART-YyHWQacdcj",
+      "meta": {
+          "chartId": 15,
+          "height": 50,
+          "sliceName": "Participants",
+          "width": 6
+      },
+      "type": "CHART"
+    },
+    "CHART-oWKBOJ6Ydh": {
+      "children": [],
+      "id": "CHART-oWKBOJ6Ydh",
+      "meta":{
+          "chartId": 16,
+          "height": 50,
+          "sliceName": "Genders",
+          "width": 6
+        },
+      "type": "CHART"
+    },
+    "CHART-06Kg-rUggO": {
+      "children": [],
+      "id": "CHART-06Kg-rUggO",
+      "meta": {
+        "chartId": 617,
+        "height": 50,
+        "sliceName": "Number of Girls",
+        "width": 6
+      },
+      "type": "CHART"
+    },
+    "CHART--wEhS-MDSg": {
+      "children": [],
+      "id": "CHART--wEhS-MDS",
+      "meta": {
+        "chartId": 2,
+        "height": 50,
+        "sliceName": "Energy Force Layout",
+        "width": 6
+      },
+      "type": "CHART"
+    },
+    "GRID_ID": {
+        "children": [
+            "ROW-SytNzNA4X",
+            "ROW-HkFFEzVRVm",
+            "ROW-BytNzNA4Y"
+        ],
+        "id": "GRID_ID",
+        "type": "GRID"
+    },
+    "HEADER_ID": {
+        "id": "HEADER_ID",
+        "meta": {
+            "text": "ECharts Charts"
+        },
+        "type": "HEADER"
+    },
+    "ROOT_ID": {
+        "children": [
+            "GRID_ID"
+        ],
+        "id": "ROOT_ID",
+        "type": "ROOT"
+    },
+    "ROW-HkFFEzVRVm": {
+        "children": [
+            "CHART-dxV7Il74hH",
+            "CHART-oWKBOJ6Ydh"
+        ],
+        "id": "ROW-HkFFEzVRVm",
+        "meta": {
+            "background": "BACKGROUND_TRANSPARENT"
+        },
+        "type": "ROW"
+    },
+    "ROW-SytNzNA4X": {
+        "children": [
+            "CHART-06Kg-rUggO",
+            "CHART-YyHWQacdcj"
+        ],
+        "id": "ROW-SytNzNA4X",
+        "meta": {
+            "background": "BACKGROUND_TRANSPARENT"
+        },
+        "type": "ROW"
+    },
+    "ROW-BytNzNA4Y": {
+        "children": [
+            "CHART--wEhS-MDSg"
+        ],
+        "id": "ROW-BytNzNA4Y",
+        "meta": {
+            "background": "BACKGROUND_TRANSPARENT"
+        },
+        "type": "ROW"
+    },
+    "DASHBOARD_VERSION_KEY": "v2"
+}
+    """
+    )
+    pos = json.loads(js)
+    slices = update_slice_ids(pos)
+    dash.dashboard_title = "ECharts Dashboard"
+    dash.position_json = json.dumps(pos, indent=4)
+    dash.slug = DASH_SLUG
+    dash.slices = slices
+    db.session.merge(dash)
+    db.session.commit()


[superset] 02/02: [WIP] E2E test

Posted by di...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch chore/e2e-tests-drilltodetail-modal
in repository https://gitbox.apache.org/repos/asf/superset.git

commit caebf71cd3c7501fd4e0f4441d0224be74eb4286
Author: geido <di...@gmail.com>
AuthorDate: Tue Aug 23 19:21:48 2022 +0300

    [WIP] E2E test
---
 .../integration/dashboard/dashboard.helper.ts      |  13 +-
 .../integration/dashboard/drilltodetail.test.ts    | 288 +++++++++++++++++++++
 .../components/DrillDetailPane/TableControls.tsx   |   3 +-
 .../src/explore/components/RowCountLabel/index.tsx |  12 +-
 4 files changed, 309 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
index 498853164e..486833c72b 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
@@ -23,6 +23,7 @@ export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health/';
 export const USA_BIRTH_NAMES_DASHBOARD = '/superset/dashboard/births/';
 export const testDashboard = '/superset/dashboard/538/';
 export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/';
+export const ECHARTS_DASHBOARD = '/superset/dashboard/echarts_dash/';
 
 export const testItems = {
   dashboard: 'Cypress test Dashboard',
@@ -73,6 +74,14 @@ export const WORLD_HEALTH_CHARTS = [
   { name: 'Box plot', viz: 'box_plot' },
 ] as const;
 
+export const ECHARTS_CHARTS = [
+  { name: 'Number of Girls', viz: 'big_number_total' },
+  { name: 'Participants', viz: 'big_number' },
+  { name: 'Box plot', viz: 'box_plot' },
+  { name: 'Genders', viz: 'pie' },
+  { name: 'Energy Force Layout', viz: 'graph_chart' },
+] as const;
+
 /** Used to specify charts expected by the test suite */
 export interface ChartSpec {
   name: string;
@@ -81,7 +90,7 @@ export interface ChartSpec {
 
 export function getChartGridComponent({ name, viz }: ChartSpec) {
   return cy
-    .get(`[data-test="chart-grid-component"][data-test-chart-name="${name}"]`)
+    .get(`[data-test-chart-name="${name}"]`)
     .should('have.attr', 'data-test-viz-type', viz);
 }
 
@@ -92,7 +101,7 @@ export function waitForChartLoad(chart: ChartSpec) {
     return (
       cy
         // this id only becomes visible when the chart is loaded
-        .get(`[data-test="chart-grid-component"] #chart-id-${chartId}`, {
+        .get(`#chart-id-${chartId}`, {
           timeout: 30000,
         })
         .should('be.visible')
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
new file mode 100644
index 0000000000..8a844f32b2
--- /dev/null
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts
@@ -0,0 +1,288 @@
+/**
+ * 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 {
+  waitForChartLoad,
+  ECHARTS_CHARTS,
+  ECHARTS_DASHBOARD,
+} from './dashboard.helper';
+
+function interceptSamples() {
+  cy.intercept(`/datasource/samples*`).as('samples');
+}
+
+describe('Drill to detail modal', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit(ECHARTS_DASHBOARD);
+    ECHARTS_CHARTS.forEach(waitForChartLoad);
+  });
+
+  describe('Box plot', () => {
+    it('opens the modal with the correct data', () => {
+      interceptSamples();
+
+      // opens the modal from context menu
+      cy.get(
+        "[data-test-viz-type='box_plot'] [aria-label='More Options']",
+      ).click();
+      cy.get('.ant-dropdown')
+        .not('.ant-dropdown-hidden')
+        .find("[role='menu'] [role='menuitem']")
+        .eq(5)
+        .should('contain', 'Drill to detail').click();
+      cy.get("[role='dialog'] .draggable-trigger").should(
+        'contain',
+        'Drill to detail: Box plot',
+      );
+      cy.get("[aria-label='Close']").eq(1).click();
+
+      // opens the modal by clicking on the chart
+      cy.get("[data-test-viz-type='box_plot'] canvas").then($canvas => {
+        const canvasWidth = $canvas.width() || 0;
+        const canvasHeight = $canvas.height() || 0;
+        const canvasCenterX = canvasWidth / 6;
+        const canvasCenterY = canvasHeight / 6;
+
+        cy.wrap($canvas)
+          .scrollIntoView()
+          .rightclick(canvasCenterX, canvasCenterY, { force: true });
+        cy.get('.ant-dropdown')
+          .not('.ant-dropdown-hidden')
+          .find("[role='menu'] [role='menuitem']")
+          .should('contain', 'Drill to detail by East Asia & Pacific')
+          .click();
+        cy.wait('@samples');
+
+        // checking the filtered data
+        cy.get("[data-test='filter-val']").should('contain', 'East Asia & Pacific');
+        cy.get("[data-test='row-count-label']").should('contain', '1.98k rows');
+        cy.get("[role='rowgroup'] [role='row']")
+          .should('have.length', 50)
+          .then($rows => {
+            expect($rows).to.contain('American Samoa');
+          });
+        cy.get(".pagination-container [role='navigation'] [role='button']")
+          .should('have.length', 9)
+          .then($pages => {
+            expect($pages).to.contain('1');
+            expect($pages).to.contain('40');
+          });
+
+          // clear the filter and test data was reloaded
+          // @TODO
+      });
+    });
+  });
+
+  describe('Big number total', () => {
+    it('opens the modal with the correct data', () => {
+      interceptSamples();
+
+      // opens the modal from context menu
+      cy.get(
+        "[data-test-viz-type='big_number_total'] [aria-label='More Options']",
+      ).click();
+      cy.get('.ant-dropdown')
+        .not('.ant-dropdown-hidden')
+        .find("[role='menu'] [role='menuitem']")
+        .eq(5)
+        .should('contain', 'Drill to detail').click();
+      cy.get("[role='dialog'] .draggable-trigger").should(
+        'contain',
+        'Drill to detail: Number of Girls',
+      );
+      cy.get("[aria-label='Close']").eq(1).click();
+
+      // opens the modal by clicking on the number
+      cy.get(
+        "[data-test-viz-type='big_number_total'] .header-line",
+      ).rightclick();
+      cy.get('.ant-dropdown')
+        .not('.ant-dropdown-hidden')
+        .find("[role='menu'] [role='menuitem']")
+        .should('contain', 'Drill to detail')
+        .click();
+      cy.wait('@samples');
+
+      // checking the data
+      cy.get("[data-test='row-count-label']").should('contain', '36.4k rows');
+      cy.get("[role='table']")
+        .find("[role='columnheader']")
+        .should('have.length', 8)
+        .then($columnheaders => {
+          expect($columnheaders).to.contain('ds');
+          expect($columnheaders).to.contain('gender');
+          expect($columnheaders).to.contain('name');
+          expect($columnheaders).to.contain('state');
+          expect($columnheaders).to.contain('num_boys');
+          expect($columnheaders).to.contain('num_girls');
+          expect($columnheaders).to.contain('num_california');
+        });
+      cy.get("[role='rowgroup'] [role='row']")
+        .should('have.length', 50)
+        .then($rows => {
+          expect($rows).to.contain('Amy');
+        });
+
+      // checking paginated data
+      cy.get(".pagination-container [role='navigation'] [role='button']")
+        .should('have.length', 9)
+        .then($pages => {
+          expect($pages).to.contain('1');
+          expect($pages).to.contain('729');
+        });
+      cy.get(".pagination-container [role='navigation'] [role='button']")
+        .eq(7)
+        .click();
+      cy.wait('@samples');
+      cy.get("[role='rowgroup'] [role='row']")
+        .should('have.length', 46)
+        .then($rows => {
+          expect($rows).to.contain('Victoria');
+        });
+
+      // checking refreshed data
+      cy.get("[aria-label='reload']").click();
+      cy.wait('@samples');
+      cy.get(".pagination-container [role='navigation'] li.active").should(
+        'contain',
+        '1',
+      );
+      cy.get("[role='rowgroup'] [role='row']")
+        .should('have.length', 50)
+        .then($rows => {
+          expect($rows).to.contain('Amy');
+        });
+    });
+  });
+
+  describe('Big number with trendline', () => {
+    it('opens the modal with the correct data', () => {
+      interceptSamples();
+
+      // opens the modal from context menu
+      cy.get(
+        "[data-test-viz-type='big_number'] [aria-label='More Options']",
+      ).click();
+      cy.get('.ant-dropdown')
+        .not('.ant-dropdown-hidden')
+        .find("[role='menu'] [role='menuitem']")
+        .eq(5)
+        .should('contain', 'Drill to detail').click();
+      cy.get("[role='dialog'] .draggable-trigger").should(
+        'contain',
+        'Drill to detail: Participants',
+      );
+      cy.get("[aria-label='Close']").eq(1).click();
+
+      // opens the modal by clicking on the number
+      cy.get("[data-test-viz-type='big_number'] .header-line").rightclick();
+      cy.get('.ant-dropdown')
+        .not('.ant-dropdown-hidden')
+        .find("[role='menu'] [role='menuitem']")
+        .should('contain', 'Drill to detail')
+        .click();
+      cy.wait('@samples');
+
+      // checking the data
+      cy.get('.ant-tag').should('contain', '75.7k rows');
+      cy.get("[role='table']")
+        .find("[role='columnheader']")
+        .should('have.length', 8)
+        .then($columnheaders => {
+          expect($columnheaders).to.contain('ds');
+          expect($columnheaders).to.contain('gender');
+          expect($columnheaders).to.contain('name');
+          expect($columnheaders).to.contain('state');
+          expect($columnheaders).to.contain('num_boys');
+          expect($columnheaders).to.contain('num_girls');
+          expect($columnheaders).to.contain('num_california');
+        });
+      cy.get("[role='rowgroup'] [role='row']")
+        .should('have.length', 50)
+        .then($rows => {
+          expect($rows).to.contain('Aaron');
+        });
+
+      // checking paginated data
+      cy.get(".pagination-container [role='navigation'] [role='button']")
+        .should('have.length', 9)
+        .then($pages => {
+          expect($pages).to.contain('1');
+          expect($pages).to.contain('1514');
+        });
+      cy.get(".pagination-container [role='navigation'] [role='button']")
+        .eq(7)
+        .click();
+      cy.wait('@samples');
+      cy.get("[role='rowgroup'] [role='row']")
+        .should('have.length', 41)
+        .then($rows => {
+          expect($rows).to.contain('Zachary');
+        });
+
+      // checking refreshed data
+      cy.get("[aria-label='reload']").click();
+      cy.wait('@samples');
+      cy.get(".pagination-container [role='navigation'] li.active").should(
+        'contain',
+        '1',
+      );
+      cy.get("[role='rowgroup'] [role='row']")
+        .should('have.length', 50)
+        .then($rows => {
+          expect($rows).to.contain('Aaron');
+        });
+      cy.get("[aria-label='Close']").eq(1).click();
+
+      // opens the modal by clicking on the trendline
+      cy.get("[data-test-viz-type='big_number'] canvas").then($canvas => {
+        const canvasWidth = $canvas.width() || 0;
+        const canvasHeight = $canvas.height() || 0;
+        const canvasCenterX = canvasWidth / 2;
+        // @TODO
+        cy.wrap($canvas).scrollIntoView().rightclick(canvasCenterX, 1);
+        cy.get('.ant-dropdown')
+          .not('.ant-dropdown-hidden')
+          .find("[role='menu'] [role='menuitem']")
+          .should('contain', 'Drill to detail by 1987-01-01')
+          .click();
+        cy.wait('@samples');
+
+        // checking the filtered data
+        cy.get("[data-test='filter-val']").should('contain', '1987-01-01');
+        cy.get("[data-test='row-count-label']").should('contain', '1.85k rows');
+        cy.get("[role='rowgroup'] [role='row']")
+          .should('have.length', 50)
+          .then($rows => {
+            expect($rows).to.contain('Aaron');
+          });
+        cy.get(".pagination-container [role='navigation'] [role='button']")
+          .should('have.length', 9)
+          .then($pages => {
+            expect($pages).to.contain('1');
+            expect($pages).to.contain('37');
+          });
+
+          // clear and check the filtered data
+          // @TODO
+      });
+    });
+  });
+});
diff --git a/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx b/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx
index 9b0e072379..025d7ea4c9 100644
--- a/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx
+++ b/superset-frontend/src/dashboard/components/DrillDetailPane/TableControls.tsx
@@ -107,13 +107,14 @@ export default function TableControls({
             `}
           >
             <span
+              data-test="filter-col"
               css={css`
                 margin-right: ${theme.gridUnit}px;
               `}
             >
               {colName}
             </span>
-            <strong>{val}</strong>
+            <strong data-test="filter-val">{val}</strong>
           </Tag>
         ))}
       </div>
diff --git a/superset-frontend/src/explore/components/RowCountLabel/index.tsx b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
index 3597e49724..be41be0ba6 100644
--- a/superset-frontend/src/explore/components/RowCountLabel/index.tsx
+++ b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
@@ -35,10 +35,14 @@ export default function RowCountLabel(props: RowCountLabelProps) {
     limitReached || (rowcount === 0 && !loading) ? 'danger' : 'default';
   const formattedRowCount = getNumberFormatter()(rowcount);
   const label = (
-    <Label type={type} data-test="row-count-label">
-      {loading
-        ? t('Loading...')
-        : tn('%s row', '%s rows', rowcount, formattedRowCount)}
+    <Label type={type}>
+      {loading ? (
+        t('Loading...')
+      ) : (
+        <span data-test="row-count-label">
+          {tn('%s row', '%s rows', rowcount, formattedRowCount)}
+        </span>
+      )}
     </Label>
   );
   return limitReached ? (