pipeos-one / pipeline

Visual IDE for composing Solidity smart contracts and Dapp agents. Use on https://remix.ethereum.org : Settings -> Plugin -> click on Pipeline
35 stars 15 forks source link

Suggestion: multi layered visual DSL #152

Open srdjan opened 4 years ago

srdjan commented 4 years ago

... continuing from the twitter thread: https://twitter.com/lorecirstea/status/1242547389275275264

Issue: current pipeline visual representation gets very unwieldy, hard to follow, as it grows.

This issue is for discussing possible solutions...

My initial suggestion would be to investigate a multilayer approach, where top level layer could offer high level data flow (or state machine?) view that gives a high level snapshot of the pipeline functionality, but then allow a drill-down to more detailed view of the nodes/subgroups.

contracts would be boxes, at the top level, not lines and would show simple directed connections vs full, per parameter view in drill down mode...

Anyway, this is just a suggestion and call for action, since once used for a while things become familiar and is not easy to see how it appears to the newcomers... As I said in the twitter thread. above, GREAT WORK! Congrats on progress made.

loredanacirstea commented 4 years ago

Hi @srdjan , thank you for continuing the conversation.

About:

high level snapshot of the pipeline functionality, but then allow a drill-down to more detailed view of the nodes/subgroups

At some point we were working on a PoC where you could focus on a node -> the node increased in size and the other nodes would get smaller. And the idea was that a node representing a subgraph would show the subgraph inside the node rectangle - similar to https://youtu.be/5Ec5yRp0SgM?t=252 (here we were showing the function source). But we postponed this effort for a while.

contracts would be boxes, at the top level, not lines and would show simple directed connections vs full, per parameter view in drill down mode...

Could you do a simple drawing of the idea? I don't quite understand.

I agree that the pipecanvas library needs improvement - I don't yet have a full picture of how exactly. But I am in a better position now, that I've introduced nested graphs.

srdjan commented 4 years ago

contracts would be boxes, at the top level, not lines and would show simple directed connections vs full, per parameter view in drill down mode...

Could you do a simple drawing of the idea?

something like this?

image

I just meant that graph nodes are visually represented as boxes with names vs lines... And that that way could be more familiar to the users.

I wish I had more to add...

loredanacirstea commented 4 years ago

I plan to revisit this when I am ready to tackle the multi-layer nested graph view. So, I will leave this issue open. Feel free to add other ideas in the meantime. Thank you!

srdjan commented 4 years ago

few links to some examples, for inspiration...

An open source graph node engine and editor: https://github.com/jagenjo/litegraph.js

Flowcharts editor, but it may generate some ideas: https://github.com/alyssaxuu/flowy

Feenk, a moldable development tool, example: https://twitter.com/feenkcom/status/1042163539950153728

also, Tiled Grace has interesting approach to visualizing graphs, by nesting them (like scratch): https://homepages.ecs.vuw.ac.nz/~mwh/minigrace/tiled

srdjan commented 4 years ago

... adding luna, visual DSL is compact but expressive: https://www.luna-lang.org/