feat: improve loading speed for legacy table chart

[ktmud]

CATEGORY

• Enhancement (new features, refinement)

SUMMARY

One of the main pain points with the table chart is that it loads too slow for large datasets. This PR upgrades it to an updated version with improved performance. See superset-ui-plugins PR#385 for details.

In addition to upgrade the table chart plugin, this PR also refactors some styling code related to it.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Tested with a ~10,000 rows, 7 columns table in Superset, pagination enabled:

Before

Takes about 6 secs to load.

After

Takes only 3 secs to load!

TEST PLAN

• Query a large dataset, increase row limit to a very high number
• Feel the difference in reactiveness and loading speed of the table chart

ADDITIONAL INFORMATION

• Has associated issue: this does not fix Table filter not working #8273
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

REVIEWERS

@kristw @graceguo-supercat @etr2460 @rusackas

[ktmud]

This is still a DRAFT. Waiting for apache-superset/superset-ui-plugins#385

[ktmud]

This adds a little space between dashboard chart container header and visualizations.

[graceguo-supercat]

this change will automatic/force to show pagination on large table? Or it's up to user to select show pagination?
The perf improvement from 6 seconds to 3 seconds, will only help table with pagination, or all table charts?

[ktmud]

this change will automatic/force to show pagination on large table? Or it's up to user to select show pagination?
The perf improvement from 6 seconds to 3 seconds, is because the table only show top 50 rows?

No, it will not. This PR only refactors the chart module and disabled a couple of already-broken features. The perf gain mainly comes from other optimizations.

[etr2460]

a couple comments. Will approve once 0.11.16 exists

[codecov-io]

Codecov Report

Merging #9234 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #9234      +/-   ##
==========================================
+ Coverage   58.93%   58.94%   +0.01%     
==========================================
  Files         373      373              
  Lines       12014    12017       +3     
  Branches     2945     2946       +1     
==========================================
+ Hits         7080     7083       +3     
  Misses       4755     4755              
  Partials      179      179

Impacted Files	Coverage Δ
superset-frontend/src/chart/ChartRenderer.jsx	41.77% <100%> (+2.29%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 000a038...1500051. Read the comment docs.

[kristw]

@ktmud Please resolve conflict

[kristw]

could use const and ternary

const chartClassName = vizType === 'table' ? `superset-chart-${chartClassName}` : snakeCase(vizType);

[ktmud]

Was planning to allow more viz types in the future.

 if (vizType === 'table' || vizType === 'another-one' ) {

Ternary makes this code look one-off but we actually have more planned.

[kristw]

you could still use ternary for that when adding more vizType or use set if the list grows longer.

const visSet = new Set([...]);
const chartClassName = visSet.has(vizType) ? ... : ... ;

[ktmud]

Makes sense, will update.

[ktmud]

Oh, I think another reason why I didn't use ternary is that the new class is based on an existing variable. It just feels more natural to override it via if statement than either creating two variables or call snakeCase(vizType) twice.

let chartClassName = snakeCase(vizType);
if (vizType === 'table') {
  chartClassName = `superset-chart-${chartClassName}`;
}

vs

let chartClassName = snakeCase(vizType);
chartClassName = vizType === 'table' ? `superset-chart-${chartClassName}` : chartClassName;

vs

const chartClassName = vizType === 'table' ? `superset-chart-${snakeCase(vizType)}` : snakeCase(vizType);

Still thinks the if block is more readable... 😬

[kristw]

What do you think of

const snakeCaseVizType = snakeCase(vizType);
const chartClassName = vizType === 'table' ? `superset-chart-${snakeCaseVizType}` : snakeCaseVizType;

[kristw]

I generally avoid reassigning variables. NVD3Vis.js is an example of many reassignments that made it very difficult to refactor because order of operations matter a lot.

[ktmud]

What do you think of

const snakeCaseVizType = snakeCase(vizType);
const chartClassName = vizType === 'table' ? `superset-chart-${snakeCaseVizType}` : snakeCaseVizType;

I like this one.

[ktmud]

I generally avoid reassigning variables. NVD3Vis.js is an example of many reassignments that made it very difficult to refactor because order of operations matter a lot.

I think it makes sense to use a combination of both. const should be default, but let can be acceptable in small scopes.