Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs]: DIAGRAM - Implement "Operator nesting" in "Diagram Canvas" #18

Open
BioPhoton opened this issue Aug 10, 2019 · 8 comments
Open
Labels
help wanted Extra attention is needed

Comments

@BioPhoton
Copy link
Owner

BioPhoton commented Aug 10, 2019

!Notice! => values are wrong bit not the visualisation!

In some situations, we need to display nested operators.
At the moment this is not solved. Below you see different versions of the share operator.
This is a very good example of the need for nested operators because:

  • Subject is used in multicast
  • multicast and refCount is used in share

https://docs.google.com/presentation/d/1LlVmTEcoc1LRV00Tp-rDp4kopI-NobC9S2w-w5pC_JA/edit#slide=id.g4c256b0d88_0_79

Subjects

multicast
refCount

RxJS Multicast Operators-67
RxJS Multicast Operators-68
RxJS Multicast Operators-69
RxJS Multicast Operators-70
RxJS Multicast Operators-71
RxJS Multicast Operators-72
RxJS Multicast Operators-73
RxJS Multicast Operators-74
RxJS Multicast Operators-75
RxJS Multicast Operators-76
RxJS Multicast Operators-77
RxJS Multicast Operators-78
RxJS Multicast Operators-79

@BioPhoton BioPhoton changed the title [docs]: DIAGRAM - Implement "Operator grouping" in "Diagram Canvas" [docs]: DIAGRAM - Implement "Operator nesting" in "Diagram Canvas" Aug 10, 2019
@BioPhoton
Copy link
Owner Author

@cedricss maybe you have some input :)

@BioPhoton BioPhoton added the help wanted Extra attention is needed label Aug 11, 2019
@kyleryanbanks
Copy link

kyleryanbanks commented Aug 18, 2019

So I'm trying to run through and just make sure I understand what I'm looking at first before offering any thoughts.

Is the 0-1-2-3 in the s1$ stream inside the share examples just a copy paste from the multicast example and we're just focusing on the overall UI rather than specific values? It seems like that should be 1-2-3-4 and I just want to make sure I'm following correctly.

@BioPhoton
Copy link
Owner Author

BioPhoton commented Aug 18, 2019

@kyleryanbanks you are right!
The numbers are wrong! Sry for this confusion.
Anyway thanks a lot for your time! 🙏

@kyleryanbanks
Copy link

kyleryanbanks commented Aug 18, 2019

I think you might be able to use bold lines and 1 block indentation to show nesting.

I would avoid shading since that breaks down as soon as you run out of shades of grey for each level of nesting.

Only had a notebook and a pen on me atm, but I'll try to link to a picture of what I was thinking.

It might be nice to have some way to show the nesting in the flow description, too. I think the bold limits you to one level.

If you don't want to show every single nested level (eg: share > multicast > subject ) then I think you need some way to "black box" a higher level operator so people know there's logic they don't see, but can expand, jump to, or peek it's diagram easily.

I think you lose a little bit of real estate with the indention, but I think you get more clarity of nesting. I think it's okay to have them extend all the way to the right side to show internal operators that remain open at the end if the diagram.

1566157413146243799636557970177

(Everything should probably shift over a few blocks to fix the subscribe and connect, but I couldn't maintain all of that in my head manually, lol.)

I think this would make building diagrams easier since nested operators should almost just be drag and drop off the lower level diagrams, too.

@kyleryanbanks
Copy link

kyleryanbanks commented Aug 18, 2019

Saw the note on Twitter regarding the time shift, might be able to use the time block to cover any growth from the nests and just show that it was still just 1 frame?

I think that maybe only becomes an issue when something nested wouldn't happen until after the first value is emitted, though, right?

Otherwise you're just shifting the start point?

@BioPhoton
Copy link
Owner Author

BioPhoton commented Aug 18, 2019

Yes, you are right with the starting point. But the frames are normally starting at the left border of the operator...

Here some new versions:

Marble Design System Nesting Operators
Marble Design System Nesting Operators (1)
Marble Design System Nesting Operators (2)
Marble Design System Nesting Operators (3)
Marble Design System Nesting Operators (4)

Happy for any feedback @kyleryanbanks :)

@kyleryanbanks
Copy link

So I like simple 2 and 3. I think it's clearer where the nested functions end on 3, though.

For 2 it's hard to tell if the refcount is that entire bottom chunk with a weird operator stream or if that's the bottom line.

Maybe the flow descriptions for any nested operators can just be links until a more official black box solution gets made?

@kyleryanbanks
Copy link

It feels reasonable to only show 1 layer of nested detail (assuming the lower levels have diagrams somewhere else in the docs.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants