
Show HN: A TypeScript Playground for RX JS - Gehinnn
https://blog.hediet.de/post/a_typescript_playground_for_rx_js
======
Gehinnn
I thought long about the pros and cons of letting time flow vertically rather
than horizontally. In the end, I wanted to have the code editor to the right
and the visualizer to the left (code lines are usually short but there are
many of them), which then forced me to render the events vertically. What do
you think?

I also posted a link to the playground yesterday noon CEST on HN, but the post
didn't get much traction and went pretty much unnoticed into the eternal
archives of HN. As I still think this playground could be of great help to
many RxJS beginners and I put quite much effort into it, I posted it again to
see whether a repost would share the same fate.

~~~
gbear0
I've worked on a product does exactly this for displaying a geospatial view
over time, and I find it relatively intuitive once you start playing with it.
Here's a quick view in case it sparks any ideas
[https://youtu.be/Nq57d6zSrkQ?t=249](https://youtu.be/Nq57d6zSrkQ?t=249)

It's also how sequence diagrams are normally drawn, and is how I'd normally
think about running through them, so I think it's a great idea to show Rx
streams. However, I was kind of confused from playing with the interface a bit
and trying to track what was happening, but I think it's an excellent first
start to see how everything interacts!

One suggestion for trying to help visualize the interactions between different
streams, I'd like to see onion skinned lines attaching events between streams.
ie as the timeline hits the moment an event triggers between two streams you
draw a horizontal line between the events and then as time goes on the line
fades (to a controllable limit). Then you'll be able to see all the actual
interaction lines between streams without cluttering the view.

~~~
Gehinnn
What exactly did confuse you?

I don't understand how the fading should work, as the visualization is not
realtime but rather abstracts time away.

~~~
gbear0
I think the most confusing part is trying to figure out the connection between
the different streams/columns cause it's not obvious the effect that events
from each individual bar has on any other bar (part of what the horizontal
lines in a sequence diagram show). It's also not obvious which columns are Rx
streams and which are inputs cause they're visualized the same way. Example
'window, window count, window time' demo has an 'openings' column that's
interactive but you wouldn't know it unless you clicked on it, and I'm not
exactly sure what it's an input to without having the time bar directly on an
event and seeing other events that line up.

The fading doesn't have to work based on wall clock time. I'd probably start
off with trying to make it fade over a distance of 10% of the screen height
along the vertical time axis. But you could come up with a bunch of different
ways to model your 0-1 fade boundaries.

