How to consume observables from a list and resolve their live updates in the DOM?

how-to-consume-observables-from-a-list.ts

import xs from 'xstream';
import { run } from '@cycle/xstream-run';
import { makeDOMDriver, div, span, i, header, h1, section, button } from '@cycle/dom';

const
    html = require('./panel.html'),
    css = require('./panel.css');

function main(sources) {
    const subscriptions$ = xs.of([
        { watcheable: xs.periodic(100),     tail: [{type: 'observable', name: 'of'}, {type: 'operator', name: 'map'}], subscription: {closed: true} },
        { watcheable: xs.of(1),             tail: [{type: 'observable', name: 'fromPromise'}, {type: 'operator', name: 'map'}, {type: 'operator', name: 'filter'}], subscription: {closed: false} },
        { watcheable: xs.from([1,2,3]),     tail: [{type: 'observable', name: 'EventEmitter'}, {type: 'operator', name: 'first'}], subscription: {closed: true} },
        { watcheable: xs.of(1),             tail: [{type: 'observable', name: 'from'}, {type: 'operator', name: 'takeUntil'}, {type: 'operator', name: 'map'}], subscription: {closed: false} }
    ]);

    return {
        DOM: subscriptions$.map(subs => div([
            header('.header', [
                h1('.heading', 'RxJS Monitor')
            ]),
            div('.content.columns', [
                section('.cell.rows', [
                    h1('.section-heading', [
                        span(subs.length),
                        ' subscriptions ',
                        button('#clearButton', {type: 'button'}, 'clear completed')
                    ]),
                    div('.section-table', subs.map(sub =>
                        div('.section-row', [
                            div('.section-cell.section-cell--fixed-2',
                                sub.tail.map(o => span('.tail-' + o.type, o.name))),
                            div('.section-cell.section-cell--flex.align-center', [

                                
                                sub.watcheable.map(x => div(x)), // --- THIS LINE HERE ---

                                
                            ]),
                            div('.section-cell.section-cell--fixed-1.align-right', [
                                i('.fa.fa-play.' + (sub.subscription.closed ? 'closed' : 'active'))
                            ])
                        ])
                    ))
                ])
            ])
        ]))
    };
}

const drivers = {
    DOM: makeDOMDriver('#app')
};

run(main, drivers);