staltz/rxmarbles

Interactive diagrams of Rx Observables

RxMarbles

A webapp for experimenting with diagrams of Rx Observables, for learning purposes.

Features:

• Visualize example diagrams for each operator in Rx
• Drag an item ("marble") on an Observable to see how the operator reacts
• Direct link to any example diagram, e.g., http://rxmarbles.com/#delay

Implementation

This is a Cycle.js app. Use this as an example implementation of advanced custom elements in Cycle.

Contributing

Unfortunately I do not have time to maintain this project (I have hundreds of other repos to maintain), but I don't want this project to be changed, I think it's very valuable to keep the same features online at rxmarbles.com, which I still regularly pay the domain for. I am sorry for people who would like to update this repo. I advise to build other tools and enrichen the RxJS ecosystem overall. RxMarbles is fine as it is.

Fork and git clone the repository.

npm install

The roadmap is entirely specified in the TODO file, which follows the git-done syntax. You can also use git done instead of git commit if you wish. For minor bug fixes, you won't need to deal with the TODO file. But if you're building a feature, remember to write a DONE entry before you commit and send the pull request.

The build system is using npm scripts. To develop, build the project with npm run build.

And access the site on your local machine as file:///path/to/rxmarblesrepo/index.html.

Make a pull request when you're ready.

rxmarbles's Issues

Embeddable rxmarbles

Hello @staltz

I'm working on a book http://xgrommx.github.io/rx-book. Can I use your interesting work in my book for visualization operators of RxJs.

Customize streams and export text

So that we can write shinny comments like this:

Add another observable row

It would be super cool if you could add another row of inputs.

Are you open to adding that as a feature?

Browser stops responding when you move marble from second stream to it's beginning #infiniteLoop #bufferWhen

http://rxmarbles.com/#bufferWhen

Observable.interval(ms) is confusing

The example gives interval(10) and emits values 0 through 9. The time parameter should differ from the amount of events so that it's clearly not related. The example marble also seems to close at the 10:th event which adds to the confusion.

delay operator behavior is misleading

When sliding one marble in source stream to right, the corresponding marble in result stream disappeared to the end. It looks that if one value is delayed after source completion, it is not passed on at all. This is not right.

And, the complete point is not delayed. This is not right either.

Perhaps the completion point of source stream should be moved ahead, so that there is enough space to show expected behavior.

https: certificate problem

Hi, https://rxmarbles.com/ seems to have certificate problems:

Thanks!

Rewrite to RxJS 5

Would love for the project to be in RxJS 5 so that new operators can be added. Here's my attempt at rewriting it in the latest CycleJS and RxJS: https://github.com/alanthai/rxjs-marbles

Descriptions on operations

Hi,
Great website. Would be a lot more helpful in learning if there was a short description of the operators as well. Maybe like how this app does it: RxMarbles

concat marble diagram misleading

The diagram for concat shows the second Observable emitting items concurrently with the first one, and yet those items end up being concatenated. In reality, either those items would be lost or they wouldn't be emitted until the first Observable completes.

See: ReactiveX/RxJava#3090 (comment)

RxJava marble diagrams?

Is this project only for RxJs?

Error during npm run build

After I npm installed everything, when running npm run build, this error gets thrown:

Error: Cannot find module 'rxmarbles/app-view' from 'mylocalpath/rxmarbles/ignore/es5src'

When running npm run preinstall and then npm run build again, I get this error:

Error: Cannot find module 'cyclejs' from 'mylocalpath/rxmarbles/ignore/es5src'

npm scripts are not cross-platform

Many of them assume a bash shell and just don't work on windows.

Error in some views

There are some marbles that throw: Invalid marble parent or parent width, which prevents them from moving sometimes. Happens not in the first place but after navigating trough some views.

Problems building web site on a Windows machine

I installed node.js and npm for Windows and am using git bash for executing the npm commands. I'm running into lots of problems: first off is that it seems to kick off all scripts in a windows command prompt and so things like "A && B" fail because the windows command prompt doesn't understand the double-ampersand. Even if I type the commands separately, I'm getting errors like "ParseError: 'import' and 'export' may appear only with 'sourceType: module'" when I execute the "browersify" command from the package.json file.

I'm new to the whole node.js and npm world so feel free to point me at any documentation I should read.

The output stream marble for average is very hard to read

pausableBuffered block everything

Hello, while I am trying the pausableBuffered I tried to move the bubbles around, if you move the first "true" bubble to the right and put it past the "false" bubble, everything stop.

This seems to be unrecoverable because if I change method in the output timeline nothing change.

The only way to make it work again is to refresh the page.

pausableBuffered bug

Steps to reproduce:

• Go to pausableBuffered
• Drag the first true marble to the right, past the false marble

It breaks the output line, and stays broken even after selecting another operator.

Also, the RxJS v2.5.3 link at the bottom is dead.

Don't animate in the results line.

I like the idea of animating the various marbles to show they can be interacted with, but then it's misleading that the output line is also animated on load since those can't be clicked on.

Also, if you're paying attention to that line on load, it looks really weird when things animate from a random direction. This is really easily spotted on pages like the every example, where the true marble arrives from the right and slides into place.

Why do you have yarn.lock but you suggest to use npm in the README.md?

Hi!

You have yarn.lock file. Its cool!

But you suggest to use npm in the README. Why?

Fork and git clone the repository npm install

Clarify the sample operator example

I was expecting a single stream being sampled at a regular interval for the sample operator, and the documentation echoes that. However, the marble diagram has two streams and output is not at regular intervals. Can you provide a brief explanation on that diagram example?

Embedded diagram marble offset and font size

When using the embedded diagram in a reveal.js html slides the styles etc. somehow make the marbles appear offset to the right and also the font size off the text values inside the marbles is too big (or actually it's not set at all so the styles from outside "leak" in and make it too big).

Here is a screenshot:

Element.js doesn't contains the method renderSvgDropshadow

Hi @staltz. In your code element.js doesn't contains method renderSvgDropshadow. On page after mouse enter on marble circle which wrapped marble disappear due to a filter #dropdhadow which cannot be applied.

Do not hide overlapped marbles

If you have two marbles in the same output, the "earlier" marble is completely hidden underneath the "later" marble. It appears that there is only one marble at that position, and it is unclear that there are actually multiple marbles at the same position.

I noticed this when looking at pausableBuffered. If you slide the pause false slider to the correct position, pausable and pausableBuffered appear to have the same behavior. This is confusing because pausableBuffered actually has overlapping marbles which can't be seen (until you open the source).

Here is pausable, where some marbles are absent from the result stream:

Compare with pausableBuffered, where marbles are present in the result stream (5, 6, 7) but appear to be absent due to overlap:

RxJS 6 support

The syntax for RxJS 6 has changed pretty dramatically. Is there interest in updating the code base and examples?

I'd be happy to work on a pull request if so.

Reimplement custom element example

We should reimplement the custom element example that lives here.

Touch support

Hi!

I was trying to drag the diagram handles around with my touchscreen and it didn't work. From what I've done in a personal project, I think it should be pretty easy to add. This is what I've done to combine touch and mouse events (types are TypeScript, you can ignore them):

// handle is the object we're dragging
let mouseDown: Observable<TouchEvent | MouseEvent> = Observable.merge(
    Observable.fromEvent(handle, "touchstart"),
    Observable.fromEvent(handle, "mousedown"));

let mouseUp: Observable<Touch | MouseEvent> = Observable.merge(
    Observable.fromEvent(handle, "touchend").map((e: TouchEvent) => e.changedTouches[0]),
    Observable.fromEvent(document, "mouseup"));

let mouseMove: Observable<Touch | MouseEvent> = Observable.merge(
    Observable.fromEvent(handle, "touchmove").map((e: TouchEvent) => e.changedTouches[0]),
    Observable.fromEvent(document, "mousemove"));

Both Touch and MouseEvent have the pageX property that is required here https://github.com/staltz/rxmarbles/blob/master/src/components/diagram/diagram-intent.js#L30.

Thanks for implementing this great site!

We can put only one rx-marble on page

Hello @staltz. I tried put two rx-marble on one page but it doesn't work. I use webcomponent.

Marble hover styles do not work on Firefox

Marble hover styles break miserably on Firefox:

This is of course different from Chrome, where you'll get a nice blurred dropdown shadow instead.

Diagrams don't show stream completion

To be correct, both the source and result streams should indicate when they complete, if relevant. Taking Average as an example, the source stream appears to continue beyond when the result is produced, and it doesn't illustrate the critical detail that a result won't be produced until the source stream completes. The result streams should also indicate when they complete.

Great site though otherwise!

Bug in demo website

I noticed if I load the pausableBuffered URL directly, 6 comes out of the buffer and gets added to the final stream.
http://rxmarbles.com/#pausableBuffered

If I click on pausable demo first, and then click on pausableBuffered, 5 comes out of the buffer and gets added to the stream instead.

http://rxmarbles.com/#pausable
<then click on pausableBuffered>

Is this intended or have I unwittingly hit a bug?

Screenshot included:

http://i.imgur.com/TllQVkV.png

What are the semantics of colors, numerical values and shapes?

I'm relatively new (OK, very new) to the world of Rx. The marble diagrams are certainly helpful but I often get confused by them. What tends to throw me off is that it is unclear to me with the semantics are of the differences in colour and numerical value of the marbles (and also of the different shapes used in rx diagrams elsewhere). See for example http://rxmarbles.com/#distinct or http://reactivex.io/RxJava/javadoc/rx/Observable.html#distinct(rx.functions.Func1).
I can't seem to find a simple explanation of what these attributes mean in terms of the events/items/objects being represented by the marbles.

My best guess is that the colour is an indication of an object's type/class and the number an indication of an object's state, but it might as well be the other way around (or entirely different). And where does that leave the shapes?

Add some description for each operator

Hey! RxMarbles is great! I'm learning a lot with it... But for beginners (like me) it's hard to deduce what each operator does... I have to look at the diagram, play a little bit, and than I start to understand what each of them really does...

It's just an opinion, but what you think of adding a simple and easy to understand description to each operator? Like in the Scan operator:

Scan
Does some crazy stuff with x and y, where x is the current value and y is the previous value.
[PLAYABLE DIAGRAM]

I know it's a dumb example, but I think you got the idea :)

Links to documentation

Awesome site!

When I look at http://rxmarbles.com/#debounce , it would be nice if there's a link to the documentation: http://reactivex.io/documentation/operators/debounce.html

UMD or AMD support

Hello @staltz. Could you please add support for UMD or AMD pattern because gitbook support only require.js modules.

rx-marbles custom element does not work

Chrome complains about missing createDOMUser:

SandboxPrototype.createdCallback = function createdCallback() {
  var key = this.attributes.key.value;
  _cyclejs2['default'].registerCustomElement('x-marble', _rxmarblesComponentsMarble2['default']);
  _cyclejs2['default'].registerCustomElement('x-diagram-completion', _rxmarblesComponentsDiagramCompletion2['default']);
  _cyclejs2['default'].registerCustomElement('x-diagram', _rxmarblesComponentsDiagramDiagram2['default']);
  _cyclejs2['default'].registerCustomElement('x-sandbox', _rxmarblesComponentsSandboxSandbox2['default']);
  var User = _cyclejs2['default'].createDOMUser(this);
  var View = _cyclejs2['default'].createView(function () {
    return { vtree$: _cyclejs2['default'].Rx.Observable.just(h('x-sandbox', { route: key })) };
  });
  User.inject(View);
};

Looks like the custom element is still written for an older Cycle version?

Allow user to introduce empty or error event in the observable

The diagram is very nice, but sometime you want to understand how an operator behave with an empty observable, or if an error appear.

Can't run latest code

2017-04-17T18_20_35_278Z-debug.log.zip

Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/7.8.0/bin/node" "/usr/local/bin/npm" "run" "browserify"
npm ERR! node v7.8.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] browserify: browserify -e ignore/es5src/app.js --outfile dist/js/app.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] browserify script 'browserify -e ignore/es5src/app.js --outfile dist/js/app.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rxmarbles package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! browserify -e ignore/es5src/app.js --outfile dist/js/app.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs rxmarbles
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls rxmarbles
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/robertwerner/.npm/_logs/2017-04-17T18_20_35_253Z-debug.log

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/7.8.0/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v7.8.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run less && npm run babel && npm run browserify
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'npm run less && npm run babel && npm run browserify'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the rxmarbles package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run less && npm run babel && npm run browserify
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs rxmarbles
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls rxmarbles
npm ERR! There is likely additional logging output above.

skip/skipLatest are messed up

Wish I could provide a better description of the error but here's a visual:

It seems fine when refreshed, but if you navigate elsewhere and come back, it gets screwed up and displays some other result (not sure what).

Demo website tablet width

When viewing the demo website with an iPad the left navigation list is cut off.

Rights for screenshots

Hi André,

I am the author of Functional Programming in C# and I'd like to request permission to include a few screenshots of rxmarbles.com in the chapter on RX, to explain some of the operators.

Credit will be given by including the link to the site and your name in a footnote accompanying the first marble diagram that appears. I hope you're ok with this; let me know either way.

Kind regards,
EB