Roadmap component in UI Builder not rendering

[spike]

Hello! Does anyone know anything about the Roadmap component in UI Builder?

I'm trying to get it to display my CIMs but it just doesn't want to work. The following code is what builds the JSON that forms the items for the roadmap (the client state parameter is bound to the item field).

The code only works if I use initiative.start_date for both the planned start and end date. If I change it (line 33) so it uses end_date to do the calculation it just doesn't work. I've been through all the CIMs and all have an end date populated and in call cases it is after the start date. Planned End Date (end_date is the actual column name) is pulled back but the data resource.

I can do things like start_date+30 and it still renders but there comes a point when it stops (about 46 I think). My guess is that there's an issue in overlapping items. However there's 50+ CIMs and they get spread over 20+ rows so I don't see how that's a constraint. (They all start at about the same time give or take a few months).

Any pointers would REALLY be appreciated, because I'm out of ideas!

/**
*  {params} params
*  {api} params.api
*  {any} params.event
*  {any} params.imports
*  {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {

    const improvements = api.data.improvement_initiatives.output.data.GlideRecord_Query.sn_cim_register._results;

    const items = [];
//    var roadmapStartDate = new Date();
//    var roadmapEndDate = new Date();

    improvements.forEach((initiative, index) => {

        console.log('SPIKE Doing ' + index);

        // We need to format the dates
        var startDate = new Date(initiative.start_date.value);
        var y = startDate.getFullYear();
        var m = startDate.getMonth() + 1;
        var d = startDate.getDate();
        var h = startDate.getHours();
        var mi = startDate.getMinutes();

        if(parseInt(mi) < 10) { mi = '0' + mi; }
        if(parseInt(h) < 10) { h = '0' + h; }

        var startDateString = y + '-' + m  + '-' + d + ' ' + h + ':' + mi + ':00';

        var endDate = new Date(initiative.start_date.value); //<--------- If I change this to end_date it doesn't render.
        y = endDate.getFullYear();
        m = endDate.getMonth() + 1;
        d = endDate.getDate();
        h = endDate.getHours();
        mi = endDate.getMinutes();

        if(parseInt(mi) < 10) { mi = '0' + mi; }
        if(parseInt(h) < 10) { h = '0' + h; }

        var endDateString = y + '-' + m  + '-' + d + ' ' + h + ':' + mi + ':00';

        console.log('start date: ' + startDateString);
        console.log('end date: ' + endDateString);

        // Get the start and end of the road map
//        if ( roadmapStartDate > initiative.start_date.displayValue ) {
//            roadmapStartDate = initiative.start_date.displayValue;
//        }

//        if ( roadmapEndDate > initiative.end_date.displayValue ) {
//            roadmapEndDate = initiative.end_date.displayValue;
//        }

        items.push({
            id: {
                value: index,
                displayValue: index
            },
            short_description: {
                value: initiative.short_description.displayValue,
                displayValue : initiative.short_description.displayValue
            },
            planned_start_date: {
                value: startDateString,
                displayValue : startDateString
            },
            planned_end_date: {
                value: endDateString,
                displayValue : endDateString
            },
            cim_coordinator: {
                value: initiative.assigned_to.displayValue,
                displayValue : initiative.assigned_to.displayValue
            },
            state: {
                value: initiative.state.displayValue,
                displayValue : initiative.state.displayValue
            },
            priority: {
                value: initiative.state.priority,
                displayValue : initiative.state.priority
            },

        });
    });

    console.log('roadmapItems', items);
    // Sets the client state parameters
    api.setState('roadmapItems', items);

}