New graph layout algorithm + ELK layout engine

[dandelany]

This PR adds a new layout method for graphs which uses the open source ELK/elkjs graph layout library. I've attached slides from a presentation I gave to the F' team describing the rationale for this effort: FPrimeVisualELKPresentation.pdf.

In short, this enables intelligent graph layout and edge routing, so that graphs may be rendered with fewer confusing visual artifacts, such as connection lines overlapping each other or drawn on top of boxes. Example old layout:

New layout:

Notes

• The new layout/rendering code is mainly in src/fprime_visual/flask/static/js/renderers/render-elk.js
• Since elkjs is really the only dependency, I decided to just include a bundled version of it in our repo (in src/fprime_visual/flask/static/js/lib/elkjs) rather than introduce npm dependency management.
• Similarly I didn't want to complicate things by adding a build process or anything - however I did restructure things to use native JS modules with import statements for more predictable scoping etc.
• Since the original layout sometimes produces good results, I've preserved its code (restructured slightly) and made it available with the "Layout" dropdown option. Each layout provides a module with a render function, so we can add additional future layouts with this pattern if we want.

Future work

Things I didn't get to...

• Shared ELK renderer - Currently the rendering code is fairly closely tied to the layout code. In future it would be good to have a single shared ELK renderer (the part which draws things on the canvas) which is capable of rendering multiple ELK-generated layouts (the part that decides where things go), if we want to provide access to additional ELK algorithms/features.
• Settings panel - It would be nice to let the user modify some of the ELK settings to get the best results. This could be done with an expandable side panel containing options which modify the config option passed to the renderer. The user should also be able to select between the different available color themes, which already exist.
• Visual updates - Themes could be changed a bit to improve readability and contrast. I started work on a light color theme with better contrast but it needs more work. We'd also like to visually group ports that are in the same port group.

Please let me know if you have any questions, happy to discuss it further. Thanks!

[LeStarch]

Closing and reopening to re-trigger CI.

[dandelany]

Ah - just took a peek at the failing tests from the CI build - I didn't realize they were there & my changes likely broke them because I changed which <script>s are included in the HTML template (some are loaded via import now). I can push a fix tomorrow or feel free to do it without me.

[dandelany]

@LeStarch yes that's correct, all of the files in lib/elkjs are copied from elkjs without any modifications - thanks for checking.

Looking at it again, we may not need to include the elk-api.js and elk-worker.js files since I think they are both included in the elk.bundled.js file. All of the .d.ts files are still useful to include, though, since they give you type hints in the IDE.

[LeStarch]

Works nicely!