Resizable Pivot Table Data Columns

[iethree]

resolves #27691

Description

Allow users to resize data/value columns manually. We do not even try to do any automated measuring of columns because there is a potentially enormous number of them.

Screenshots

Testing Steps

Open an enormous, gross pivot table like this one:

http://localhost:3000/question#eyJkYXRhc2V0X3F1ZXJ5Ijp7ImRhdGFiYXNlIjoxLCJxdWVyeSI6eyJzb3VyY2UtdGFibGUiOjIsImFnZ3JlZ2F0aW9uIjpbWyJtYXgiLFsiZmllbGQiLDEzLG51bGxdXSxbImNvdW50Il0sWyJhdmciLFsiZmllbGQiLDEzLG51bGxdXV0sImJyZWFrb3V0IjpbWyJmaWVsZCIsMTQseyJ0ZW1wb3JhbC11bml0IjoicXVhcnRlciJ9XSxbImZpZWxkIiw4LHsic291cmNlLWZpZWxkIjo5fV0sWyJmaWVsZCIsMTIseyJiaW5uaW5nIjp7InN0cmF0ZWd5IjoiZGVmYXVsdCJ9fV0sWyJmaWVsZCIsMTcseyJiaW5uaW5nIjp7InN0cmF0ZWd5IjoiZGVmYXVsdCJ9fV1dfSwidHlwZSI6InF1ZXJ5In0sImRpc3BsYXkiOiJwaXZvdCIsImRpc3BsYXlJc0xvY2tlZCI6dHJ1ZSwicGFyYW1ldGVycyI6W10sInZpc3VhbGl6YXRpb25fc2V0dGluZ3MiOnsicGl2b3RfdGFibGUuY29sdW1uX3NwbGl0Ijp7InJvd3MiOltbImZpZWxkIiwxNCx7InRlbXBvcmFsLXVuaXQiOiJxdWFydGVyIn1dXSwiY29sdW1ucyI6W1siZmllbGQiLDEyLHsiYmlubmluZyI6eyJzdHJhdGVneSI6Im51bS1iaW5zIiwibWluLXZhbHVlIjowLCJtYXgtdmFsdWUiOjEwMCwibnVtLWJpbnMiOjgsImJpbi13aWR0aCI6MTIuNX19XSxbImZpZWxkIiw4LHsic291cmNlLWZpZWxkIjo5fV0sWyJmaWVsZCIsMTcseyJiaW5uaW5nIjp7InN0cmF0ZWd5IjoibnVtLWJpbnMiLCJtaW4tdmFsdWUiOjAsIm1heC12YWx1ZSI6NzAsIm51bS1iaW5zIjo4LCJiaW4td2lkdGgiOjEwfX1dXSwidmFsdWVzIjpbWyJhZ2dyZWdhdGlvbiIsMV0sWyJhZ2dyZWdhdGlvbiIsMl0sWyJhZ2dyZWdhdGlvbiIsMF1dfX0sIm9yaWdpbmFsX2NhcmRfaWQiOjIxfQ==

• see that you can resize any column (when there are multiple column headers, only the bottom one should be resizable)
• see that rearranging field dimensions in viz settings works properly, and resets column widths

Remaining work to be done:

Persist column sizes: #27598

[github-actions]

Notifying subscribers in CODENOTIFY files for diff 15ca786...836e91c.

Notify

File(s)

@alxnddr

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTableCell.tsx frontend/src/metabase/visualizations/visualizations/PivotTable/constants.ts frontend/src/metabase/visualizations/visualizations/PivotTable/types.ts frontend/src/metabase/visualizations/visualizations/PivotTable/utils.ts frontend/src/metabase/visualizations/visualizations/PivotTable/utils.unit.spec.ts

[codecov]

Codecov Report

Base: 66.15% // Head: 66.12% // Decreases project coverage by -0.04% ⚠️

Coverage data is based on head (836e91c) compared to base (2553505).
Patch coverage: 60.46% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #27725      +/-   ##
==========================================
- Coverage   66.15%   66.12%   -0.04%     
==========================================
  Files        3249     3272      +23     
  Lines       94344    94806     +462     
  Branches    11975    12072      +97     
==========================================
+ Hits        62413    62688     +275     
- Misses      26963    27150     +187     
  Partials     4968     4968              

Flag	Coverage Δ
back-end	85.31% <ø> (-0.01%)	⬇️
front-end	48.38% <60.46%> (+0.06%)	⬆️

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

Impacted Files	Coverage Δ
...lizations/visualizations/PivotTable/PivotTable.tsx	58.88% <28.57%> (-3.62%)	⬇️
...tions/visualizations/PivotTable/PivotTableCell.tsx	78.94% <50.00%> (-4.39%)	⬇️
.../visualizations/visualizations/PivotTable/utils.ts	87.35% <94.11%> (+0.68%)	⬆️
frontend/src/metabase/core/utils/arrays/arrays.ts	100.00% <100.00%> (ø)
...ualizations/visualizations/PivotTable/constants.ts	100.00% <100.00%> (ø)
...ry_builder/components/NativeQueryEditor.styled.tsx	0.00% <0.00%> (-100.00%)	⬇️
..._builder/components/NativeQueryEditor/constants.ts	0.00% <0.00%> (-100.00%)	⬇️
...w/PreviewQueryButton/PreviewQueryButton.styled.tsx	0.00% <0.00%> (-100.00%)	⬇️
...tor/RightClickPopover/RightClickPopover.styled.jsx	0.00% <0.00%> (-100.00%)	⬇️
...yEditorSidebar/NativeQueryEditorSidebar.styled.jsx	0.00% <0.00%> (-100.00%)	⬇️
... and 109 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[deploysentinel]

No failed tests 🎉

[alxnddr]

Wdyt about the feasibility of testing this? Such DnD things are harder to write tests for. It would not be valuable to have a barely maintainable test just to formally have it covered if it involves a poorly testable code while we don't have the capacity to refactor. Although, maybe we can mock cells here to trigger onResize to verify updated widths? Or maybe a Cypress test would be more maintainable, what do you think?

[iethree]

Wdyt about the feasibility of testing this? Such DnD things are harder to write tests for. It would not be valuable to have a barely maintainable test just to formally have it covered if it involves a poorly testable code while we don't have the capacity to refactor. Although, maybe we can mock cells here to trigger onResize to verify updated widths? Or maybe a Cypress test would be more maintainable, what do you think?

column measurement in unit tests is pretty hacky, esp. since we don't have "real" pointer events. I added a good end-to end test that I think covers most of the cases here in the child branch: 9cb6f06fc7b47b9994416f974bb8d84dcb6511b1