Make the network diagram more util

[danielo515]

Hello.
Thank you very much for this plugin.
I was wondering if it would be possible to add a bit more of usefulness to the network template. IT looks like a very good way of determine why something was included, or why it was included in certain bundle.
However in its current state is not very useful.

• FIrst, you can not move the nodes, so if some node gets into the way of another one following the lines gets very hard.
• Second, the names are not shown, so it makes very difficult to have an global view of the deps
• I would love to have more colors, I don't know, based on package or something like that
• Having the option to click on a node and see all it's connections will be awesome too

My main gripe are the first two things, the rest I can live without them. Thanks

[btd]

Hi, thank you for good feedback.
I currently working on network diagram. Mostly to optimize huge graph performance.
Something from your list i already tried in past and it did not work. For example names did not printed intentionally, first version of this diagram printed names and it was really impossible to see because of overlapping.
I have in plans coloring and highlighting connections. With last one i tried, but it has performance issues.

[btd]

I just published 5.7.0 with some of your feedback implemented. So you can drag digram, highlight nodes and exclude nodes (to make it more inspectable).

[danielo515]

Wow! I'll be testing it rigth now! Thank you very much!

[danielo515]

Wow, what I just saw? hahaha. Seems that the new version includes way more things into account when building the dependency graph. I don't remember having this many nodes while using the previous version.
I attach a video of what I got as result because I found it super fun. For some reason, the filter controls do not appear, so I can not filter out the stuff I don't need.

weird-nodes-rollup-visualizer-480.mp4

[btd]

Ahh yes. It is quite common problem actually. I described this in readme specificaly. Sometimes there are files that included in almost every file. Like react.js, commonjsHelpers, tslib, core-js. Double click on this node to exclude it.
I actually removed exclude/include filters, i do not remmber why, but if you actually use them i can bring them back.

[danielo515]

Ahh yes. It is quite common problem actually. I described this in readme specificaly. Sometimes there are files that included in almost every file. Like react.js, commonjsHelpers, tslib, core-js. Double click on this node to exclude it. I actually removed exclude/include filters, i do not remmber why, but if you actually use them i can bring them back.

I'm pretty sure I already answered this, but for some weird reason, githubb refuses to publish my comment. Luckily, I have it saved, so here it is:
Thanks for the information, I will try it again.
Yes,I use the filters because they worked with patterns, so I can hide entire groups of nodes.
Have you thought about accepting config options for the plugin to not even include some libraries in the report at all?

[btd]

Hi

I returned filters back in 5.7.1
Yes i thought about it for a long time. There was issue about the same.
My thoughts for now:

1. Add options include/exclude, using standart rollup pluginutils package - it is basically globs. This will exclude/include whole peaces of filesystem out of stats
2. Change existing include/exclude to match in this case option 1 because otherwise it will create confusion. This need to think how to do not bring tons of deps.
3. Last thought need to mark in different places in UI that something is filtered out, this one not sure as it is highly subjective

[danielo515]

That sounds like a good first approach.

[mvaligursky]

I'd love to have the network work bit better. I'm not sure if I'm missing something, but all I get this a blob like this:

Double clicking on a node seems to remove it from there. But there does not seem much else I can do .. It'd be great to zoom in, or somehow separate those nodes. I also tried typing into include/exclude regex and it does not seem to change things for me - perhaps I'm missing something here.

[btd]

@mvaligursky is it all your files? Without any modules?
Is it possible you provide me stats file? This looks like edge case to me

[mvaligursky]

Here's the generate file: treenet.zip

This is the repo I generated it on: https://github.com/playcanvas/engine

You can generate it by

npm install
npm run build:treenet

that creates the file in the root folder.

Thanks!

[btd]

@mvaligursky i was right about edge case there. So you essentially do use modules, it is basically folders in src/.
By idea what there should be done: 1. Allow to set custom regexp to detect modules. 2. Relax strengh applied to nodes in the same module. Normally nodes should not intersect, but in some reason force over applied.
I do not really want to expose additionall settings to customize modules. More settings means more pain to support for me. I will think what could be done better. If you have ideas i am very welcome any

[danielo515]

Thanks for the information, I will try it again. Yes,I use the filters because they worked with patterns, so I can hide entire groups of nodes. Have you thought about accepting config options for the plugin to not even include some libraries in the report at all? El vie., 15 jul. 2022 13:34, Denis Bardadym ***@***.***> escribió:

…

Ahh yes. It is quite common problem actually. I described this in readme specificaly. Sometimes there are files that included in almost every file. Like react.js, commonjsHelpers, tslib, core-js. Double click on this node to exclude it. I actually removed exclude/include filters, i do not remmber why, but if you actually use them i can bring them back. — Reply to this email directly, view it on GitHub <#120 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARKJWK7JPRICOGI7OZXFEDVUFEFRANCNFSM52J2YNJQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[btd]

@danielo515 yes, i started to work on this, but could not find time to finish. You can see my approximate plan from comment in this issue on Jul 20