itemized list of feedback about dep graph layout enhancements, issues, and/or bug(s)

joshribakoff-sm commented 2 years ago

Current Behavior

It makes very poor use of space, drawing things super wide and not utilizing the vertical dimension.
The lines are crossing or many lines are drawn really close together, so it ends up being a spider web that is hard to follow.
When trying to zoom in, it constantly resets the zoom every second or two (in watch mode only).
I cannot easily hide and show libraries to simplify the graph, because some libraries have common prefixes and their names are truncated, so I don't know which modules I am turning on/off
I cannot easily hide/show all modules in a folder, have to go one by one
There is too much information / lack of intelligent grouping. For example, when trying to visualize a high level overview it is probably sufficient to draw one node per folder (and reduce the number of edges accordingly). It would be better to show less information to start, and allow the user to incrementally expand groups to explore further.

~This~ Some similar feedback was also reported in #3701 but it was automatically closed it seems (always a little frustrating to see ~a valid bug~ an issue you are experiencing was reported and closed without the crux of the issue being addressed).

Expected Behavior

Steps to Reproduce

Create lots of libs?

Failure Logs

Environment

  Node : 16.13.2
   OS   : darwin x64
   npm  : 8.1.2

   nx : 13.7.1
   @nrwl/angular : undefined
   @nrwl/cli : 13.7.1
   @nrwl/cypress : 13.7.1
   @nrwl/detox : undefined
   @nrwl/devkit : 13.7.1
   @nrwl/eslint-plugin-nx : 13.7.1
   @nrwl/express : 13.8.3
   @nrwl/jest : 13.7.1
   @nrwl/js : 13.7.1
   @nrwl/linter : 13.7.1
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : 13.7.1
   @nrwl/nx-cloud : undefined
   @nrwl/react : 13.7.1
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.8.3
   @nrwl/tao : 13.7.1
   @nrwl/web : 13.7.1
   @nrwl/workspace : 13.7.1
   typescript : 4.4.4
   rxjs : 7.5.4
   ---------------------------------------
   Community plugins:
         @nx-tools/nx-docker: 2.3.0

philipjfulcher commented 2 years ago

I understand your frustration with the graph, it's often hard to read a very large graph with lots of connections. A couple of things I would ask of you:

1) Please update your issue title and description with clear descriptions of what you expect to be different. "dep graph is useless" and "It's pretty much unusable." are vague and hard to address.

2) I haven't been able to reproduce the issue with the zoom resetting, can you share some more details of when this happens? Are you running the graph in watch mode? What browser are you using? Do you see the same behavior interacting with this graph?

And a couple of explanations:

1) I try to keep the graph hierarchical to show the different layers of projects throughout the workspace. This necessarily results in some very wide graphs if you have a lot of libs in a particular layer. We currently use a dagre layout to draw the graph. I've experimented with other layouts but often end up with either much worse performance or a tangled knot of a graph. My next path of investigation is some sort of force-directed graph that includes constraints to maintain as much of the hierarchy of dagre as we can. Something like this layout. Drawing a good graph given a diverse set of inputs is a hard problem to crack. If you have expertise to lend to the project, I'm happy to review a PR or suggestions of different layout algorithms.

2) When there's a large graph that's hard to read, my advice is to find a way to reduce the graph down using the filtering, focus, and path tracing tools. I have a recorded talk that shows some different ways of navigating the graph.

joshribakoff-sm commented 2 years ago

Yeah force directed usually works much better. Whatever heuristic it uses should avoid lines crossing. Edge bundling can also help.

I updated the issue title. There is a lot going on, though... so the top level issue for me is that I just cannot use it. It is a lot to fit in the title, and graph viz is a rabbit hole :)

Another issue is I that I cannot resize the sidebar, so I only see a common prefix on a bunch of the library names, so the workaround of selecting specific libraries is also untenable.

joshribakoff-sm commented 2 years ago

So another idea is when I group by folder / limit proximity, instead of trying to bound all of those same nodes in rectangles, just replace all the nodes within any folder with just one node representing the folder itself, where I could then maybe chose which nodes to expand/ungroup. Like, the graph could just show me I depend on backend/gql-modules here without needing to show me every single module inside there.

If I am trying to look at which backend/gql-modules module my app use(s), I probably don't care about any of the downstream modules my app depends on that are outside of that folder; and vice versa

There is also currently no way to hide/show all modules for a folder with a single click, I will update the issue to add more bullet points 👍

joshribakoff-sm commented 2 years ago

I haven't been able to reproduce the issue with the zoom resetting, can you share some more details of when this happens? Are you running the graph in watch mode? What browser are you using? Do you see the same behavior interacting with this graph?

Indeed it is due to watch mode, I had no idea, good to know I can avoid watch mode as a workaround until it gets fixed :) To elaborate, it does this even when I am not editing code and there are no recompilations happening in nx serve

joshribakoff-sm commented 2 years ago

By the way, also check out https://ialab.it.monash.edu/webcola/

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

joshribakoff-sm commented 1 year ago

🙄

philipjfulcher commented 1 year ago

I don't have time to implement any of this right now. If you (or anyone else watching this thread) is willing to implement, I can help get you started.

joshribakoff-sm commented 1 year ago

That's fair, its just annoying to have issues [auto] closed after taking time to write up details / answer questions. AFAIK the feedback is still very much applicable, even though no one has [yet] had time to reply or work on it :)

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

joshribakoff-sm commented 1 year ago

Please update your issue title and description

Would have preferred if you had just said improving the graph is not a priority, since it can feel frustrating to type up suggestions which just get "ignored" and inevitably auto-closed.

github-actions[bot] commented 9 months ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

github-actions[bot] commented 7 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx