[SQL Lab] Improve perf for filterable table rendering (#8011)

superset/assets/package-lock.json

@@ -2616,9 +2616,9 @@
       }
     },
     "@superset-ui/dimension": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/@superset-ui/dimension/-/dimension-0.11.10.tgz",
-      "integrity": "sha512-gOP32Ibf0FwElD8ImDbfUkw0e+Sw9x0cP2ZXlgp2n00360inq8XC4Bq62t1B6oFrMRRoeCDGzYb5pe6QrIPvSg=="
+      "version": "0.11.15",
+      "resolved": "https://registry.npmjs.org/@superset-ui/dimension/-/dimension-0.11.15.tgz",
+      "integrity": "sha512-VpEggw1taDSNOfYGlh1HovCDRdkSvfG5UMe40j5iqOLcxqCfXAUbmMc8Z9ganZsoQMTA1F9H31kCdSsc7lUfMw=="
     },
     "@superset-ui/legacy-plugin-chart-calendar": {
       "version": "0.10.11",

superset/assets/package.json

@@ -51,7 +51,7 @@
     "@superset-ui/color": "^0.11.9",
     "@superset-ui/connection": "^0.11.14",
     "@superset-ui/core": "^0.11.10",
-    "@superset-ui/dimension": "^0.11.10",
+    "@superset-ui/dimension": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-calendar": "^0.10.11",
     "@superset-ui/legacy-plugin-chart-chord": "^0.10.11",
     "@superset-ui/legacy-plugin-chart-country-map": "^0.10.11",

superset/assets/src/components/FilterableTable/FilterableTable.jsx

@@ -29,7 +29,7 @@ import {
   SortIndicator,
   Table,
 } from 'react-virtualized';
-import { getTextDimension } from '@superset-ui/dimension';
+import { getMultipleTextDimensions } from '@superset-ui/dimension';
 import { t } from '@superset-ui/translation';
 
 import Button from '../Button';
@@ -37,10 +37,6 @@ import CopyToClipboard from '../CopyToClipboard';
 import ModalTrigger from '../ModalTrigger';
 import TooltipWrapper from '../TooltipWrapper';
 
-function getTextWidth(text, font = '12px Roboto') {
-  return getTextDimension({ text, style: { font } }).width;
-}
-
 function safeJsonObjectParse(data) {
   // First perform a cheap proxy to avoid calling JSON.parse on data that is clearly not a
   // JSON object or array
@@ -159,17 +155,27 @@ export default class FilterableTable extends PureComponent {
   getWidthsForColumns() {
     const PADDING = 40; // accounts for cell padding and width of sorting icon
     const widthsByColumnKey = {};
-    this.props.orderedColumnKeys.forEach((key) => {
-      const colWidths = this.list
-        // get width for each value for a key
-        .map(d => getTextWidth(
-          this.getCellContent({ cellData: d[key], columnKey: key })) + PADDING,
-        )
-        // add width of column key to end of list
-        .push(getTextWidth(key) + PADDING);
-      // set max width as value for key
-      widthsByColumnKey[key] = Math.max(...colWidths);
+    const cellContent = [].concat(...this.props.orderedColumnKeys.map(key =>
+      this.list
+        .map(data => this.getCellContent({ cellData: data[key], columnKey: key }))
+        .push(key)
+        .toJS(),
+    ));
+
+    const colWidths = getMultipleTextDimensions(
+      {
+        className: 'cell-text-for-measuring',
+        texts: cellContent,
+      },
+    ).map(dimension => dimension.width);
+
+    this.props.orderedColumnKeys.forEach((key, index) => {
+      widthsByColumnKey[key] = Math.max(...colWidths.slice(
+        index * (this.list.size + 1),
+        (index + 1) * (this.list.size + 1),
+      )) + PADDING;
     });
+
     return widthsByColumnKey;
   }
 
@@ -411,7 +417,7 @@ export default class FilterableTable extends PureComponent {
     // sort list
     if (sortBy) {
       sortedAndFilteredList = sortedAndFilteredList
-      .sort(this.sortResults(sortBy, sortDirection === SortDirection.DESC));
+        .sort(this.sortResults(sortBy, sortDirection === SortDirection.DESC));
     }
 
     let { height } = this.props;

superset/assets/src/components/FilterableTable/FilterableTableStyles.css

@@ -88,3 +88,7 @@
   white-space: nowrap;
   color: #aaa;
 }
+.cell-text-for-measuring {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}