Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FoamTree color stability #500

Closed
CreativeTechGuy opened this issue Mar 27, 2022 · 2 comments · Fixed by #501
Closed

FoamTree color stability #500

CreativeTechGuy opened this issue Mar 27, 2022 · 2 comments · Fixed by #501

Comments

@CreativeTechGuy
Copy link
Contributor

Issue description

It's currently impossible to compare two outputs side-by-side since the boxes can shift around and the colors are seemingly random. I'd like a way to be able to compare differences between two bundle analysis and the easiest way I can think of achieving that is to make the colors deterministic rather than random.

Technical info

Not really an issue, more of a suggestion.

From the FoamTree docs, we could use groupColorDecorator and attach the color to each item in the list of groups. (See the "Colors defined in the data model" section of the docs). To ensure stability between different runs, the colors should be based on the file name of the chunk. Webpack's chunks are in the form of <id>.<hash>.<ext> so we should only consider the first part of that when determining the color since the hashes will change.

I believe the id numbers of each chunk also are in a finite range (cannot confirm but just from testing) so we could translate the 1-999 ids with a percent in the hsl color space. This should give us an easy way to map between chunks and colors and would give a pretty decent spread of colors.

For chunks with names rather than numbers as their ids, we could come up with a similar hashing algorithm which turns the characters into a color.

Debug info

N/A

@valscion
Copy link
Member

Nice idea! This could indeed be useful. And even if the color grouping would sometimes not work correctly, even getting it right 99% of cases could be useful.

Webpack's chunks are in the form of <id>.<hash>.<ext>

I think that's only the default chunk name and can be changes by the user. So it would require more work to do this or another solution. Maybe the ID numbers could indeed work?

It's likely that this feature would not be done by me or @th0r so feel free to create a PR as a proof of concept to show if this feature would be possible to make with an OK enough maintenance cost.

@CreativeTechGuy
Copy link
Contributor Author

You were totally right about the lack of uniformity in the chunk names. I was so used to my naming scheme I forgot it was customizable.

I think you'll be happy with the solution I came up with as it can handle any format the user tries and has a nice fallback even if nothing fancy can be determined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants