Mock hierarchy visualisation

[sellsol]

Description

Do a little research and experimentation on some libraries we can use to graph a bunch of nodes hierarchically as a tree using Vue. Use mock data, and you can make up whatever is in it so long as it can be used to determine capabilities of the libraries appropriately.

Do stress testing so we know how much the method can take and so we can plan loading strategies accordingly. Make a decision on the library and report back to the team.

Implement some of the requirements for the graph in a basic way. This includes labels, collapsibility, arrows on edges, and pan and zoom. No need to deal with rendering multiple parents for now, nor dynamic loading.

To-do

• [x] Research and experiment tree visualisation methods in Vue, stress testing
• [x] Make a decision on library
• [x] Add a mock tree visualisation into the visualisation page
• [x] Working collapsibility on mock data
• [x] Arrows on edges
• [x] Pan and zoom

[sellsol]

Can't assign multiple people, so here's the people working on this task for now: @ShuaiShao20010902 @RyanDorman4

[github-actions[bot]]

Branch issue-8-Mock_hierarchy_visualisation created!

[sellsol]

@paulmmaingi @sellsol - help with task.

[sellsol]

Team did a lot of experimenting and stress testing on different libraries. Settled for D3 tree with a dynamic loading strategy:

• By default good looking
• Very configurable. Easy to recolour, design is honestly already great but can be changed, no moving around nodes by default but this is not a requirement for us. A lot can be done as long as we put in some time
• We've got the proof of concept set up and changes are not difficult
• Less efficient than some libraries (namely Apache Echarts, which is buggy), but can deal with about 7000 nodes in 1 second and 3000 almost instantly, which is more than enough to overwhelm a human with and use alongside dynamic loading
• Data format is nested json. Multiple parents needs to be implemented later.

New scope of ticket has been defined after extensive discussion with team, and ticket description has been changed.

Original:

Do a little research and experimentation on the ways (libraries, from UI components already being used) we can graph a bunch of nodes hierarchically as a tree using Vue, from a set of mock data. You can make up whatever is in the mock data, but it is best to do it in JSON for now.

Share with the rest of the team once you have a good feel for:

• How nice it looks and how nice you can make it
• How configurable the method is (easy to recolour, change design, make collapsible, move around nodes etc.)
• How easy it is to set up, and how easy changes are to make
• If there are any concerns about efficiency / size
• If there are any restrictions on the data format being passed in at all

Multiple people have been assigned to this task. Share what you are doing with each other, and once you all feel like you've exhausted the best / simple options the team will make a decision and we will continue developing with that method.

• [ ] Research and experiment tree visualisation methods in Vue
• [ ] Collate notes on methods
• [ ] Make a decision
• [ ] Add a final mock tree visualisation into the visualisation page