Live Filtering the Stream

The next step is to add some interactivity to the page, to allow the user to filter and look at only the stock details they're interested in.

At this point, the stock graph shows four different stocks. We want to make the display of each stock configurable, which requires a live filter. We can’t write a static one and call it a day.

Live filtering

One solution is to simply recreate the entire observable stream on every click but that has the consequence of eliminating any data we’ve already cached.

Instead, we opt for a series of merges that, while still complicated, allow dynamic filtering of all values on the graph without losing any in-flight data.

First, we need an observable of all updates to the stock filter.

There are four checkboxes on the side of the graph, one for each stock to filter. We need to listen in to each one, and map to the latest value, along with a signifier that indicates what stock is attached to that new value.

After we have four streams, we need to combine them into ...