Visualize multiple observables at the same time

[slavafomin]

Hello!

Thank you for this great tool, it's really amazing!

However, it would be nice if we could be able to visualize multiple observables on a single screen in parallel.

Having this example:

const { interval } = Rx;
const { map, take, filter } = RxOperators;

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const numbers$ = interval(500).pipe(
  take(10),
  map(index => numbers[index])
);

const oddNumbers$ = numbers$.pipe(filter(number => number % 2 === 1));
const evenNumbers$ = numbers$.pipe(filter(number => number % 2 === 0));

[numbers$, oddNumbers$, evenNumbers$];

We should be able to visualize all three observables. This would be great to see how different transformations work (like in marble diagrams).

[azhil]

@slavafomin, hello. 🙂

I think it's still possible to do it. In your case the only thing you need is to trigger all three at the same time. You can use from operator for it. But it might not look the way you expect it to look, I guess, because you will still see the very first stream completion visualization.

I made a little change to your code here:

const { from, interval } = Rx;
const { map, take, filter } = RxOperators;

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const numbers$ = interval(500).pipe(
  take(10),
  map(index => numbers[index])
);

const oddNumbers$ = numbers$.pipe(filter(number => number % 2 === 1));
const evenNumbers$ = numbers$.pipe(filter(number => number % 2 === 0));

from([numbers$, oddNumbers$, evenNumbers$]);

Please note from operator.

And here is the link to see the change in action: https://rxviz.com/v/9J9PZQqO.