Improve resource graph layout

[JamesNK]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

The resource graph is made using a d3 force directed graph. Various forces act on nodes (the resources) the cause them to be laid out in a certain way:

aspire/src/Aspire.Dashboard/wwwroot/js/app-resourcegraph.js

Lines 57 to 63 in 9cbf38d

	this.simulation = d3
	.forceSimulation()
	.force('link', this.linkForce)
	.force('charge', d3.forceManyBody().strength(-800))
	.force("collide", d3.forceCollide(110).iterations(10))
	.force("x", d3.forceX().strength(0.1))
	.force("y", d3.forceY().strength(0.2));

Right now the forces agressively keep resources tightly bunched together, which creates a big blob. There is probably a better layout than the one we have.

Describe the solution you'd like

Two parts to this:

1. Think about what a better graph layout would look like. For instance, would it be better if resources with multiple connected elements were spaced further apart?
2. Change the forces to achieve the desired design.

Additional context

No response

[JamesNK]

Good knowledge of d3 is probably required here.

[davidfowl]

Or an LLM that knows d3 👀