fix(plugin-chart-handlebars): fix overflow, debounce and control reset

[villebro]

SUMMARY

Add some polish to the new Handlebars plugin:

• add debounce to template and style controls to avoid rerendering on each keypress
• fix height and width to fix buggy overflow + default to auto scroll
• add stringify helper to make it more convenient to inspect the rows in the data array
• update example template and CSS code to be more intuitive
• avoid resetting controls when switching between aggregate and raw mode
• clean up dependencies
• remove redundant comments/code

AFTER

handle-after.mp4

BEFORE

handle-before.mp4

TESTING INSTRUCTIONS

1. Create a chart with the handlebars plugin
2. add a few columns to aggregate and raw mode and notice they are no longer reset when switching between query modes
3. run a query that causes the chart to overflow and see it scroll cleanly
4. edit the template/CSS code and notice the dbounce

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #19879 (d81e601) into master (1d50665) will not change coverage.
The diff coverage is 18.18%.

@@           Coverage Diff           @@
##           master   #19879   +/-   ##
=======================================
  Coverage   66.52%   66.52%           
=======================================
  Files        1714     1714           
  Lines       65031    65031           
  Branches     6714     6716    +2     
=======================================
  Hits        43259    43259           
  Misses      20065    20065           
  Partials     1707     1707           

Flag	Coverage Δ
javascript	51.24% <18.18%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...plugins/plugin-chart-handlebars/src/Handlebars.tsx	0.00% <0.00%> (ø)
...ars/src/components/Handlebars/HandlebarsViewer.tsx	0.00% <0.00%> (ø)
...lugin-chart-handlebars/src/plugin/controlPanel.tsx	100.00% <ø> (ø)
...n-chart-handlebars/src/plugin/controls/groupBy.tsx	16.66% <ø> (ø)
...ndlebars/src/plugin/controls/handlebarTemplate.tsx	28.57% <0.00%> (+6.34%)	⬆️
...hart-handlebars/src/plugin/controls/includeTime.ts	100.00% <ø> (ø)
...gin-chart-handlebars/src/plugin/controls/limits.ts	66.66% <ø> (ø)
...n-chart-handlebars/src/plugin/controls/metrics.tsx	38.46% <ø> (ø)
...n-chart-handlebars/src/plugin/controls/orderBy.tsx	50.00% <ø> (ø)
...gin-chart-handlebars/src/plugin/controls/style.tsx	28.57% <0.00%> (+6.34%)	⬆️
... and 3 more

---

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 1d50665...d81e601. Read the comment docs.

[zhaoyongjie]

It's an awesome plugin, a nonblocking cosmetic issue, the template editor seems to break the line too early. the others LGTM

handlebar.mov

[stephenLYZ]

Super Cool! LGTM