Improve visualisation layouting

[YoofiTT96]

Feature Request

Description of Problem:

Currently, when instance jsons are imported, the individual nodes are clustered in one location so it looks lumpy. The user has to space them out manually. This manual layout is not preserved hence would need to be done again if the user reuploads. A current workaround that has been implemented is to allow the user to save the current coordinates of each node in a separate layout file. Currently the file is being saved to the downloads directory and not in the same location as its corresponding instance.

Potential Solutions:

Save layout file to be in same location with instance
Use automatic forces that auto layout the nodes clearly and reduce overlap
Third party layouting libraries https://reactflow.dev/learn/layouting/layouting#layouting-nodes

[YoofiTT96]

Possible exploration with D3 https://d3js.org/