Bioprotocols / laboped

LabOP Editor
https://Bioprotocols.github.io/laboped
MIT License
4 stars 1 forks source link

More flexible editor #21

Open jcahill opened 2 years ago

jcahill commented 2 years ago

First Thoughts - Editor

These are the editor features I value most for the GUI's roadmap.

Graph Upgrades

  1. Graph auto-layout.
    • Periodic auto-arrangement is important when building out large graphs.
    • So far, the simplest place to put this trigger is the protocol tab ▼.
  2. Flexible connectors.
    • Sometimes you need to manually adjust an edge.
    • One point of articulation (midpoint) is usually enough.

Palette Upgrades

  1. Expand/collapse of nodes in palette, between large and thumbnail scales.
  2. Grouping of nodes in palette, ex. via named folders.

Graph Capture

  1. Formats
    • vector: svg and/or pdf
    • raster: png
  2. Views
    • visible (detail)
    • canvas (whole graph / forest)
mszulcz-mitre commented 1 year ago

I think this is an important issue. A more user-friendly editor will probably drive more people to try and eventually adopt LapOP. Here are some thoughts on how to make it more user-friendly:

Graph auto-layout

The LUDOX protocol is fairly simple, yet already has a complex graph (17 nodes, 18 links). A more complex protocol could have a graph that's even more difficult to make, understand, and edit. There are several graph-drawing algorithms that can help reduce the cognitive load of understanding complex graphs (see Layout Methods here https://en.wikipedia.org/wiki/Graph_drawing). I'm not sure there's a single option that would yield the best visualization for all protocols, so it seems reasonable to include several options and let users experiment and decide which looks best for them. Since some links on the graph are directed (those between 'start' and 'end'), it would be useful for some of the available layouts to order nodes chronologically (e.g. the 1st primitive step in the protocol is the leftmost node, and later primitive-step nodes appear in sequence to the right).

Link attributes

Currently, all the links have the same color, thickness, and style. Changing some of the attributes could help make the graph clearer. For example:

Node collapse

Users might be able to better understand the graphs if nodes could be collapsed and expanded. For example, in the LUDOX protocol, almost half of the nodes represent parameters (8 of 17). It would simplify the graph if users could collapse parameter nodes into their parent primitive nodes. For the LUDOX protocol, this would leave a graph with only 9 instead of 17 nodes, and 10 instead of 18 links. Of course, any node with collapsed info. would need to indicate it---maybe with a thick, highlighted outline.

Maybe parameters shouldn't be represented as nodes at all. It might be clearer to just have users input parameters via drop-down menus in primitive nodes.

Overview/navigator panel

For complex protocols that require large graphs, it would be useful to have an overview panel that always displays a zoomed-out view of the full graph. This would allow users to understand what part of the graph they're working on even when zoomed in to a particular node or group of nodes to edit their attributes or links.