Switch from webtreemap to foamtree

[nikolay-borzov]

Is your feature request related to a problem? Please describe. Some of the visualization features (e.g. coloring) are implemented by modifying webtreemap source. Other features source-map-explored needs are missing (tooltips, background coloring). foamtree has these features built-in. Also, implementing these features in webtreemap would take considerable effort.

Describe the solution you'd like Replace webtreemap with foamtree for visualization

Describe alternatives you've considered To add needed features to webtreemap we would have to make more of an effort.

Additional context webpack-bundle-analyzer uses foamtree

[nikolay-borzov]

Preview of current progress sme-result-2020418-19588-1exzc9j.nf6l.html.zip

[danvk]

@nikolay-borzov is it just me or is foamtree considerably slower during interactions?

[nikolay-borzov]

I think it's because of fade in/out effect. Here a version with disabled fade sme-result-2020419-3004-15b2otx.wtd1.html.zip

[nikolay-borzov]

Added tooltip and reduced space between groups sme-result-2020421-17760-1az7f1x.zqn8.html.zip

[nikolay-borzov]

Allow hiding bundles sme-result-2020423-20696-1d20ect.r8l5.html.zip

[danvk]

@nikolay-borzov it's definitely zippier w/o the fade in/out effect. Could you share a visualization of that same set of source maps using webtreemap for comparison?

[danvk]

The hierarchy is also a bit less clear to me. Looking at this visualization, it's only apparent when you hover and look at the percentages that everything you see is part of big.js (it looks like three independent blocks at the same level of hierarchy):

[nikolay-borzov]

@nikolay-borzov it's definitely zippier w/o the fade in/out effect. Could you share a visualization of that same set of source maps using webtreemap for comparison?

You can get it if you run

node bin/cli.js tests/data/*.*

sme-result-2020428-18356-16x6o78.4u3k.html.zip