From 48fb8c0b7793e6b618db8c229101075c44c2bac2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Gigi=C4=87?= <nik.gigic@gmail.com>
Date: Wed, 16 Dec 2020 15:35:12 +0100
Subject: [PATCH] fix(dataset): Page blanks on large data load (#11979)

* Implement pagination in <TableView> for Samples preview

* Increase page size

* Fix lint

* Render cells based on width

* Fix lint errors

* Additional tests and changes

* Search bar fix

* Additional fixes

* Suggested changes
---
 .../spec/javascripts/explore/utils_spec.jsx       | 15 +++++++++++++++
 .../src/explore/components/DataTableControl.tsx   |  2 +-
 .../src/explore/components/DataTablesPane.tsx     |  7 ++++++-
 superset-frontend/src/explore/exploreUtils.js     |  8 ++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/spec/javascripts/explore/utils_spec.jsx b/superset-frontend/spec/javascripts/explore/utils_spec.jsx
index 8e419d135..11a40b237 100644
--- a/superset-frontend/spec/javascripts/explore/utils_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/utils_spec.jsx
@@ -23,6 +23,7 @@ import {
   buildV1ChartDataPayload,
   getExploreUrl,
   getExploreLongUrl,
+  getDataTablePageSize,
   shouldUseLegacyApi,
 } from 'src/explore/exploreUtils';
 import {
@@ -200,6 +201,20 @@ describe('exploreUtils', () => {
     });
   });
 
+  describe('getDataTablePageSize', () => {
+    it('divides samples data into pages dynamically', () => {
+      let pageSize;
+      pageSize = getDataTablePageSize(500);
+      expect(pageSize).toEqual(20);
+      pageSize = getDataTablePageSize(0);
+      expect(pageSize).toEqual(50);
+      pageSize = getDataTablePageSize(1);
+      expect(pageSize).toEqual(10000);
+      pageSize = getDataTablePageSize(1000000);
+      expect(pageSize).toEqual(5);
+    });
+  });
+
   describe('buildV1ChartDataPayload', () => {
     it('generate valid request payload despite no registered buildQuery', () => {
       const v1RequestPayload = buildV1ChartDataPayload({
diff --git a/superset-frontend/src/explore/components/DataTableControl.tsx b/superset-frontend/src/explore/components/DataTableControl.tsx
index 8768e31bf..52619f37d 100644
--- a/superset-frontend/src/explore/components/DataTableControl.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl.tsx
@@ -90,7 +90,7 @@ export const useFilteredTableData = (
     const formattedData = applyFormattingToTabularData(data);
     return formattedData.filter((row: Record<string, any>) =>
       Object.values(row).some(value =>
-        value.toString().toLowerCase().includes(filterText.toLowerCase()),
+        value?.toString().toLowerCase().includes(filterText.toLowerCase()),
       ),
     );
   }, [data, filterText]);
diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
index 9336051e7..d9b3493c6 100644
--- a/superset-frontend/src/explore/components/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -24,6 +24,7 @@ import Loading from 'src/components/Loading';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import { getChartDataRequest } from 'src/chart/chartAction';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import { getDataTablePageSize } from 'src/explore/exploreUtils';
 import {
   CopyToClipboardButton,
   FilterInput,
@@ -181,6 +182,9 @@ export const DataTablesPane = ({
   };
 
   const renderDataTable = (type: string) => {
+    // restrict cell count to 10000 or min 5 rows to avoid crashing browser
+    const columnsLength = columns[type].length;
+    const pageSize = getDataTablePageSize(columnsLength);
     if (isLoading[type]) {
       return <Loading />;
     }
@@ -195,7 +199,8 @@ export const DataTablesPane = ({
         <TableView
           columns={columns[type]}
           data={filteredData[type]}
-          withPagination={false}
+          withPagination
+          pageSize={pageSize}
           noDataText={t('No data')}
           emptyWrapperType={EmptyWrapperType.Small}
           className="table-condensed"
diff --git a/superset-frontend/src/explore/exploreUtils.js b/superset-frontend/src/explore/exploreUtils.js
index 3b7073382..dc85c37e2 100644
--- a/superset-frontend/src/explore/exploreUtils.js
+++ b/superset-frontend/src/explore/exploreUtils.js
@@ -250,6 +250,14 @@ export function postForm(url, payload, target = '_blank') {
   document.body.removeChild(hiddenForm);
 }
 
+export function getDataTablePageSize(columnsLength) {
+  let pageSize;
+  if (columnsLength) {
+    pageSize = Math.ceil(Math.max(5, 10000 / columnsLength));
+  }
+  return pageSize || 50;
+}
+
 export const exportChart = ({
   formData,
   resultFormat = 'json',