Rx (JS) selectively unsubscribe observables in a flatMap - reactive-programming

Question

Is there a way to cancel/remove individual observables in a flatMap or concatMap operation before they complete?
I currently have an observable of UI actions that trigger API requests, and I use flatMap for this:
actionsFromUI.flatMap(a => http.request("blah?id=" + a.id))
This is then subscribed to render results. A really nice property of this is that if I unsubscribe, all in-progress API requests are automatically cancelled. I don't want to break that.
Now I want to support UI actions that can cancel a particular in-progress request. A UI action can trigger an API request for a particular ID, and then a subsequent UI action can then cancel the API request for that ID.
I hope this dummy code illustrates what I'm trying to do:
let actions = [
{ action: "start", id: 1 },
{ action: "start", id: 2 },
{ action: "start", id: 3 },
{ action: "cancel", id: 1 },
{ action: "start", id: 4 },
{ action: "cancel", id: 3 },
{ action: "start", id: 1 }
];
Observable.from(actions)
.flatMap(a => {
if (a.action === "start") {
return http.request("blah?id=" + a.id);
} else if (a.action === "cancel") {
// ???
}
})
.subscribe(response => {
console.log(response);
});

Answer 1

Yes there is way to do that.
You can use takeUntil operator for that.
It would be some think like this:
// actions - observable of user actions, each action has id field
// cancelActions - observable of action cancelations each has id of action to cancel
// doRequest - function that starts request and returns observable
const results = actions.flatMap(
action => doRequest(action)
.takeUntil(
cancelActions.filter(cancel => cancel.id === action.id)
)
);
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/takeuntil.md

Answer 2

Here's a way to do this.
Start with an observable of the raw data:
let actions = Observable.from([
{ action: "start", id: 1 },
{ action: "start", id: 2 },
{ action: "start", id: 3 },
{ action: "cancel", id: 1 },
{ action: "start", id: 4 },
{ action: "cancel", id: 3 },
{ action: "start", id: 1 }
]);
I then created two functions to simulate the processing and cancelling of the data:
let start = n =>
Observable
.of(`Finished ${n}`)
.delay(1000);
let cancel = n =>
Observable
.of(`Cancelled ${n}`);
I made start take 1 second to process and cancel return immediately.
Then I ran this query:
let query =
actions
.groupBy(x => x.id)
.map(gx =>
gx
.map(x => x.action === "start"
? start(x.id)
: cancel(x.id))
.switch())
.mergeAll();
That gave me this result:
Cancelled 1
Cancelled 3
Finished 2
Finished 4
Finished 1
I think that behaves the way you want it.
I'd appreciate if someone could translate to JS for me.