hermanbanken/rxfiddle

Visualize your Observables

RxFiddle

RxFiddle is a debugger for Reactive Extensions (Rx).

Features

• visualises structure of Observables in graph diagram,
• visualises construction of and data flow through Observable sequences in Marble Diagrams,
• supports live fiddling with input streams,
• generates tests for Observable sequences.

Collectors

RxFiddle works by means of a visualizer and collectors which can parse syntax and instrument (compiled) code to collect the lifecycle of Observables:

• creation of Observable sequences
• subscriptions in a Observable sequence
• onNext, onError and onComplete events in Observable sequence

Existing collectors:

• JavaScript for RxJS
• JVM for RxJava, RxKotlin and RxScala
• Dalvik for Rx on Android
• Swift for RxSwift

Contribute

Every help is welcome improving RxFiddle, either by improving the visualiser or creating custom collectors for your favorite Rx-library.

See CONTRIBUTING.md

Footnote

RxFiddle is part of my Masters thesis.

Herman Banken

rxfiddle's Issues

Visualize higher-order Observables

Currently the switchMap is not visualised as awesome as the rest

How to visualise Observables in the browser?

Hi there,

First of all, thanks for the fantastic tooling.

Is it possible to visualise an Observable that only works in a browser? For example, I have this code which uses Intersection Observers (a browser API): http://jsbin.com/ronocay/2/edit?js,console,output

Looking at the documentation, it only seems to instrument Observables running in Node.

Thanks,
Oliver

Troubleshooting browser env. -- getting to work with redux-observables

My file app.reducer.js looks like this:

import * as Rx from 'rxjs';
import RxFiddle from 'rxfiddle';
import { combineReducers, applyMiddleware, compose, createStore } from 'redux';
import logger from 'redux-logger';
import { createEpicMiddleware } from 'redux-observable';
import { authReducer } from './auth/auth.reducer';
import { messengerReducer } from './messenger/messenger.reducer';
import { modalReducer } from './modals/modal.reducer';
import epic from './app.epic';

new RxFiddle({
    Rx,
}).openWindow();

const reducer = combineReducers({
    auth: authReducer,
    messenger: messengerReducer,
    modal: modalReducer,
});

export const store = createStore(
    reducer,
    compose(applyMiddleware(createEpicMiddleware(epic), ...(process.env.ENV === 'DEV' || process.env.FORCE_DEV) ? [logger] : [])),
);

I get the following error when I run the application:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at new Instrumentation (rxfiddle.js:446)
    at RxFiddle../node_modules/rxfiddle/rxfiddle.js.RxFiddle.instrumentRx5 (rxfiddle.js:1075)
    at RxFiddle../node_modules/rxfiddle/rxfiddle.js.RxFiddle.subscribe (rxfiddle.js:982)
    at RxFiddle../node_modules/rxfiddle/rxfiddle.js.RxFiddle.openWindow (rxfiddle.js:1024)
    at Module../src/app.reducer.js (app.reducer.js:13)
    at __webpack_require__ (bootstrap:63)
    at Module.<anonymous> (bundle-1.7.1r-1.js:181364)
    at Module../src/router/router.js (bundle-1.7.1r-1.js:181534)
    at __webpack_require__ (bootstrap:63)
    at Module.<anonymous> (app.js:1)
    at Module../src/app.js (bundle-1.7.1r-1.js:169098)
    at __webpack_require__ (bootstrap:63)
    at Module../src/index.js (index.js:1)
    at __webpack_require__ (bootstrap:63)
    at Object.0 (bundle-1.7.1r-1.js:181661)
    at __webpack_require__ (bootstrap:63)

Where rxfiddle.js:446 points to Rx.subjects.prototype being undefined

RxJS 6 support

Hi!

Is this tool going to support the newest version of rxjs?

TypeError: Function.prototype.toString is not generic

The following code gives an error

function id(x){return x;}


var o1 = Rx.Observable.just(2,3,4)
  .expand(x => Rx.Observable.ofWithScheduler(Rx.Scheduler.async, x * x))
  .take(10)
  .map(id)
  .filter(x => true)
  .map(id)
  .map(id)
  .map(id)
  .map(id)
  .map(id)
  .map(id)
  
var o2 = Rx.Observable.just(1)
  .map(id)
  

o1.merge(o2).subscribe()

Visualisation of timestamp() incorrect

Using timestamp() overlays multiple events on top of each other. Removing the timestamp() operator makes them be spaced out over the graph again.

http://rxfiddle.net/#lib=rxjs5&type=editor&code=UnguT2JzZXJ2YWJsZQogIC5pbnRlcnZhbCgxMDApCiAgLnRpbWVzdGFtcCgpCiAgLnRpbWVvdXQoMjAwKQogIC50YWtlKDUpCiAgLnN1YnNjcmliZSgKICAgIHZhbCA9PiBjb25zb2xlLmxvZyh2YWwpLAoJZXJyID0+IGNvbnNvbGUubG9nKCdlcnI6ICcgKyBlcnIubWVzc2FnZSksCiAgICAoKSA9PiBjb25zb2xlLmxvZygnY29tcGxldGVkJykKICApOw==

Overview and performance for large applications

One open problem of RxFiddle is scalability and overview. RxFiddle can instrument large applications just fine. As an example I instrumented RxFiddle with itself and this works. The data collection works and can be exported to JSON.

The problem lies with the performance of rendering the dependency graphs. The graph structure can become huge when using higher order streams. The layout is based on the StoryFlow paper and my custom implementation of what they describe is clearly not optimal. The layout works in different phases:

• ranking (DAG rank from Dagre)
• ordening of nodes per rank (each rank corresponds to a time slice from StoryFlow)
  • calculate weighted medians of connected nodes
  • transpose using storyflow method (minimizing crossings) in 2 passes (1 up, 1 down)
  • check if cost of ordering (amount of crossings) is less than before
  • repeat iteratively (20 times, up down sweeping) until cost becomes stable
• priority layout
  • realign nodes in iterative fashion (storyflow methodology) assigning x/y coordinates to nodes
• render SVG

For many nodes the ordering and priority layouting becomes very heavy as it is polynomial.

By reducing the amount of nodes we can greatly improve the experience.

Any ideas are welcome. I like to work to something like Tensorflow Graph Visualization which happens to be open source.

Thanks for the RxFiddle.

Its a good idea and thanks for developing it. Would you mind uploading a final thesis report(pdf version)?I would like to read it. Thanks again.