Simplification of Diagrams

[mkhubaibumer]

Lingua-Franca Diagrams get a lot confusing as soon as number of ports and reactors increase making the diagram essentially useless.
The @side() annotation is a step in the right direction but we feel there are a few things which can make the diagrams more comprehensible.

P1

• Have 2-tone arrow-heads to differentiate Input and Output visually without focusing on the direction of arrow-head
• Highlight works but the click needs to be on the line precisely which makes this feature unusable. The Highlight should work with a hover instead of an accurate click
• Highlight should not be in the same colour as currently single port edge when highlighted looks exactly like a multiport edge and multiport edge doesn't highlight
• When an edge is clicked with (Ctrl+Click) the whole DataPath should be highlighted instead of highlighting just the edge. Highlighting the DataPath should be accompanied with either fading other edges or greying them out
• Single port and multiport have essentially the same shape (arrow-head) with just the bolder edge. We think that the shape should be changed to some other share (diamond-head/arrow with multiple lines etc.)

P2

• We have an understanding that KLighD allows an interactive mode in which the user can drag a component from one place to another and the diagram adjusts according to that. This might be helpful feature in the future.
• The order in which ports are rendered doesn't follow the order of their declaration. This ordering should be preserved or there should be a way to pair the ports manually to order them together. We believe that a way to pair the ports together can be more beneficial.

These are some of the suggestions from our side to simplify the diagrams and to make them more understandable even from a birds-eye view.

Please feel free to add/modify these points. Any and all suggestions/recommendations are welcome

[mkhubaibumer]

@a-sr @soerendomroes Please share your feedback on these suggestions

[a-sr]

The 2-tone arrow-heads, highlighting styles, and (multi)port shapes should be quite easy to implement as they only require very minor adjustments to the LF diagram synthesis.

The data path analysis could either be done with the dependencies in the reactor model, similar to the causality highlighting, or the topology (edges) of the diagram itself, with the former being potentiality an easier solution. In any case, this will require a more advanced extension of the LF diagram synthesis in order to affect all styles correctly (e.g. to fade them out) and handle user interaction (e.g. activating/switching the effect).

Highlighting edges upon hovering will probably require changes in our Klighd VS Code extension but @soerendomroes can say more about that.
He can also comment about activating interactive layout for LF and the ordering of ports during layout.