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

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]

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]

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