Path link between blocks

[e-gloo]

Category

• Plugins

Component

block-link

Is your feature request related to a problem? Please describe.

Visualize blocks that are related but not connected.

Describe the solution you'd like

Draw lines as svg path between blocks which would be called a block-link. A link could have a customizable label to identify what the link represents. Two kinds of link would be helpful:

• Static link. This link only shows with a line, blocks that are related. Mostly useful during editing. Use cases:

  • Link a function Fn definition block to all function Fn call blocks.
  • A SQL primary key column block to a SQL foreign key column block.
  • A variable block to all other blocks that use this variable.

• Dynamic link. This link would have an animation to express blocks that interact together. Mostly useful during runtime. A one way link would be a line between to blocks, and when the source block is executed at runtime, an animation would go from the source block to the destination block, which is now executed as well. A two way link would do the same thing as a one way link, but both blocks could be a source and a destination block. Use cases:

  • When a function Fn call block is executed, animate the line to bring attention to the function Fn definition block.
  • Representing a network communication (HTTP,SSH,FTP...). In a web context, a client block that fetch/post data from/to a server block.

The links could be drawn from different ways:

• An option in the context to start/join a link.
• Include a link property a the block definition, so link could be automatically draw when selecting a block.
• Create a link field, which would be an image. A click on this field would initiate a link, and a second click on another block link field would join/complete the link.

Link path suggestions. Source: react-diagram library.

Describe alternatives you've considered

During editing: when selecting a block, highlight the related blocks. During runtime: when a block is highlighted, highlight the related blocks.

Additional context

It might be useful to think how to handle the links when folding and unfolding blocks.