update time selection in the timeSlider when the user select other dates

Question

I took the code from the following GitHub and made certain modifications (like adding other extensions, etc...).

https://github.com/autodesk-platform-services/aps-iot-extensions-demo/tree/experiment/time-select

I tried to reproduce what was done in the GitHub below in order to update the dates displayed on the timeslider when the user selects new dates:

https://github.com/Autodesk-Forge/forge-dataviz-iot-react-components/blob/main/client/components/ChronosTimeSlider.jsx#L52

What I'm trying to reproduce is in the following functions: updateSelection() and createTimeSelection()

I used zoomTo in resolve to be able to zoom more precisely on the range of dates already selected but as soon as I leave this range the dates are no longer updated.

Example:

when loading the viewer the dates are from 12/30/2023 to 01/15/2024. If I put a date in this interval the timeslider updates, however as soon as I put for example 12/28/2024 the timeslider no longer changes

Here's what I did but I got the following error which I don't understand:

Uncaught TypeError: line.addTimeSelection is not a function : code

Answer 1

According to aps-iot-extensions-demo/blob/experiment/time-select/public/timeline.js#L10, the function initTimeline is an async function, which returns a Promise, not TimeSlider object. This why throw error that line.addTimeSelection is not a function.

To resolve this issue, there are two approaches:

1. Just add your modification in the then function at line#31 of the index.js

initTimeline(document.getElementById('timeline'), onTimeRangeChanged, onTimeMarkerChanged)
        .then(timeline => {
            /// Add here ....
            function updateTimelineRange() {
                const startDate = document.getElementById('start-date').value;
                const endDate = document.getElementById('end-date').value;
                timeline.zoomTo(startDate, endDate);
            }
            document.getElementById('start-date').addEventListener('change', updateTimelineRange);
            document.getElementById('end-date').addEventListener('change', updateTimelineRange);
        });

Or Add await in front of initTimeline to get correct TimeSlider object:

let line = await initTimeline(document.getElementById('timeline'), onTimeRangeChanged, onTimeMarkerChanged);