Feature request: add ability to filter to related chunks (parents/siblings)

[bregenspan]

Issue description

For a project with many chunks, it can be a bit time-consuming to filter Webpack Bundle Analyzer to display specific clusters of related chunks (e.g. all chunks associated with a given page or feature). A workflow members of my team often find ourselves using is viewing a page's source to identify the full list of bundles, then manually checking ones to display in the "show chunks" list.

Exposing chunk graph relationships to the viewer and adding some simple UI (either keyboard hotkeys or maybe a contextual menu trigger by right-click) could allow for an easy workflow of selecting a target bundle, then filtering the active bundle list to related bundles (e.g. parents/siblings).

I started on a fork that adds ability to filter to parent chunks via ctrl-click, curious if others are interested in using a feature like this, and also what UI would make the most sense (a context menu could start out with options like ("Filter to chunk + parents", "Hide chunk" and potentially be extended in future with other chunk-related options; keyboard shortcut is a simpler starting point).

---

Example from the fork of filtering down to a route-specific code-split chunk's parents via ctrl-click:
.

In this particular project this has the happy result of filtering down to only chunks used on that page, with other project configurations it might be necessary to also expose sibling chunks or other chunk relationships, I haven't tested yet.

Technical info

• Webpack Bundle Analyzer version: 3.0.3
• Webpack version: N/A
• Node.js version: N/A
• npm/yarn version: N/A
• OS: N/A

[valscion]

Wow really cool! This is something I've wanted webpack-bundle-analyzer to be able to handle many times in the past 😍

I'll have to dig in to look at what you've done in your fork when I have time.

One thing that is definitely a question needing some thinking, is the UI. What kinds of ways to allow this would work?

Maybe if there would indeed be an option menu one could use to filter to related chunks? I'm not sure how it would feel like -- I'd need to have something to play with first.

If it's possible to support this feature in a way that doesn't make the UI more complex (at least not too much) AND is discoverable, it would be super duper amazing.

Would you be open to further dig into that topic and open up your UI ideas in more concrete details? For example, some hand-drawn or element inspector-driven screenshots would already make it more clear on how the UI could look like.

@th0r how do you feel about this feature idea?

[bregenspan]

@valscion this is an example of one option I was thinking of re: surfacing this feature -- a simple right-click/Alt-click triggered list of options related to the currently selected chunk (e.g. the one user just clicked):

Discoverability isn't perfect -- it relies on users being familiar with similar context menus from their OS/other apps AND either reading documentation or guessing that a similar context menu might apply here. But something else that could help is teasing availability of the extra menu when the user has already hovered the selected chunk and its tooltip is visible:

*(Note: context menu styling in example mock is from https://vkbansal.github.io/react-contextmenu/#/simple-menu but I'd only integrate an existing context menu component after making sure it was simple/performant/compatibly-licensed, I haven't checked this one yet)

[valscion]

Thanks for the GIF, it nicely shows how it could look like 👍

What do you think, @th0r? Would the context menu approach be suitable for the first iteration?

[bregenspan]

I started a branch here that implements a context menu: https://github.com/webpack-contrib/webpack-bundle-analyzer/compare/master...bregenspan:add-context-menu?expand=1. Probably needs some cleanup still, some UI tweaks (hide onClickOutside) + something in the way of tests before it's PR-ready, but it should give a good idea of what the interaction feels like at least!

Question is if it's worth the added code + maintenance cost - IMO yes, but biased by working on a pretty huge project! I could clean up somewhat by adding management of which bundle is currently selected to the store.

[valscion]

Hmm the code change direction seems reasonable to me. There's not much new logic added, more so presentational stuff.

What would the tests look like? Would we be able to create a similar test like the bundles, stats and expected chart data like here https://github.com/webpack-contrib/webpack-bundle-analyzer/tree/v3.0.3/test/stats/with-module-concatenation-info and used like this?

webpack-bundle-analyzer/test/analyzer.js

Lines 44 to 50 in d145284

	it('should use information about concatenated modules generated by webpack 4', async function () {
	generateReportFrom('with-module-concatenation-info/stats.json');
	const chartData = await getChartData();
	expect(chartData[0].groups[0]).to.containSubset(
	require('./stats/with-module-concatenation-info/expected-chart-data')
	);
	});

I would be OK with going forward with this new feature. I'll ping @th0r elsewhere to make sure if it's OK to him

[th0r]

Yes, looks like a nice feature. I'm fine with context menu approach but in this case it should have an ability to add separators between related groups of items because I already see a few more unrelated actions I could add there 😉

Another "nice to have" feature would be a nested groups of items but it's ok to not implement it right now.

[valscion]

Hmm should we create a more targeted issue only for the "show parent chunks" thing that was removed from #246 to reduce scope? See: #246 (comment)

[th0r]

"show parent chunks" thing

@bregenspan do you still feel the strength to do this? ;)

[bregenspan]

@th0r yes, definitely! (Just not sure about exact timing when I can get to it, but will open a new issue now for the parent/sibling option)