Research and choose a graph layout tool

[mfero]

Daniel Bryce at SIFT.net has created a nice alpha for a directed graph style protocol editor for PAML (see screenshot). We should investigate tooling that fits better with our pretty-much pure JS development environment. @tgadam has suggested the following:

• https://js.cytoscape.org/#introduction
• https://github.com/uber/react-digraph
• https://reactflow.dev/
• https://github.com/projectstorm/react-diagrams

Let's check them out and pick one to move forward as a provisional choice by the next BioMADE meeting on Feb 25.

Dan's visualization of a 96-96 well plate stamp:

[eabeliuk]

Had a meeting last week on this. Making progress.

[tgadam]

@tgreen7 and @christopher-lamkin has been trying React Flow. The current focus is seeing if it could handle multiple input and output connector ports per node.

[mfero]

@tgreen7 has tested React Flow, it seems to be presenting basic graphs nicely!

[mfero]

@tgreen7 perhaps we list some of the boxes we think this tool will check off?

• [x] Can represent a basic acyclic directed graphs
• [x] Can accommodate multiple inputs and outputs (a la Node-RED graphs) requires a bit more work for custom nodes but is possible
• [x] Can be viewed vertically or horizontally
• [x] Can be zoomed and moved within a view
• [ ] Has a snap-to grid function for box size and location
• [ ] Has ability to move connector to different locations on the node (optional)
• [x] Has an auto-layout function with a separate package (dagre) this can be accomplished.
• [ ] Compatible with generating exportable graphical representations (.pdf, .png, .svg)

[mfero]

I think we have provisionally chosen React Flow, So I'll close this.