Highlight circular dependencies in graph

[timoxley]

Clear and concise description of the problem

Sometimes I get runtime errors that appear due to (indirect) circular dependencies. Often the stack trace isn't particularly useful at tracking down what led to the circular dependency. It would be great if I could more clearly visualize dependency chains in the inspector graph.

Suggested solution

Use different colours to highlight indirect and direct circular dependencies in the inspector graph when a node is selected. Perhaps it could also use different colours for type imports vs concrete imports if that's easy to detect.

Ideally incoming and outgoing dependencies would also use different colours and there would be a more clear differentiation between the selected node's edges and unrelated edges, currently there is some difference, the lines get thicker, but I find it a bit too subtle.

Alternative

Log circular dependency chains in the output somewhere.

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[antfu]

That would be great, would you be interested in helping out?

[timoxley]

That would be great, would you be interested in helping out?

@antfu yes, I did have a poke around to see if it was trivial, but I didn't see an immediately obvious way to plug this in. How would you make this change?