Issue 515 slow loading of asset page due to timerange query of its sensors

documentation/changelog.rst

@@ -19,6 +19,7 @@ Bugfixes
 -----------
 * The CLI command ``flexmeasures show beliefs`` now supports plotting time series data that includes NaN values, and provides better support for plotting multiple sensors that do not share the same unit [see `PR #516 <http://www.github.com/FlexMeasures/flexmeasures/pull/516>`_]
 * Consistent CLI/UI support for asset lat/lng positions up to 7 decimal places (previously the UI rounded to 4 decimal places, whereas the CLI allowed more than 4) [see `PR #522 <http://www.github.com/FlexMeasures/flexmeasures/pull/522>`_]
+* Faster loading of initial charts and calendar date selection [see `PR #533 <http://www.github.com/FlexMeasures/flexmeasures/pull/533>`_]
 
 Infrastructure / Support
 ----------------------

flexmeasures/ui/templates/base.html

@@ -267,6 +267,25 @@
     var elementId = 'sensorchart';
     var chartSpecsPath = dataPath + '/chart?';
 
+    const initialData = fetch(dataPath + '/chart_data/?event_starts_after=' + '{{ event_starts_after }}' + '&event_ends_before=' + '{{ event_ends_before }}', {
+        method: "GET",
+        headers: {"Content-Type": "application/json"},
+        signal: signal,
+    })
+    .then(function(response) { return response.json(); });
+
+    // Set session start and end
+    {% if event_starts_after and event_ends_before %}
+        var sessionStart = new Date('{{ event_starts_after }}');
+        var sessionEnd = new Date('{{ event_ends_before }}');
+        sessionEnd.setSeconds(sessionEnd.getSeconds() - 1); // -1 second in case most recent event ends at midnight
+        sessionStart.setHours(0,0,0,0); // get start of first day
+        sessionEnd.setHours(0,0,0,0); // get start of last day
+    {% else %}
+        var sessionStart = null
+        var sessionEnd = null
+    {% endif %}
+
     // Set up abort controller to cancel requests
     var controller = new AbortController();
     var signal = controller.signal;
@@ -292,14 +311,15 @@
         inlineMode: true,
         switchingMonths: 1,
         singleMode: false,
+        startDate: sessionStart,
+        endDate: sessionEnd,
         dropdowns: {
             years: true,
             months: true,
         },
         format: 'YYYY-MM-DD\\T00:00:00',
     });
     picker.on('selected', (startDate, endDate) => {
-
         // Stop replay
         let toggle = document.querySelector('#replay');
         toggle.classList.remove('playing');
@@ -354,8 +374,22 @@
     /** If the page is done loading, get data (for the time range stored in the session, or the default range),
      * check for time zone differences, and then trigger the time range picker to display the correct range.
      */
-    document.onreadystatechange = () => {
+    document.onreadystatechange = async () => {
         if (document.readyState === 'complete') {
+            {% if event_starts_after and event_ends_before %}
+                // Initialize picker to the date selection specified in the session
+                $("#spinner").show();
+                let fetchedInitialData = await Promise.all([
+                    initialData,
+                    embedAndLoad(chartSpecsPath + 'event_starts_after=' + '{{ event_starts_after }}' + '&event_ends_before=' + '{{ event_ends_before }}' + '&', elementId, datasetName, previousResult, sessionStart, sessionEnd),
+                ]).then(function (result) {return result[0]}).catch(console.error);
+                $("#spinner").hide();
+                vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(fetchedInitialData)).resize().run();
+                previousResult = fetchedInitialData;
+                var timerangeNotSetYet = false
+            {% else %}
+                var timerangeNotSetYet = true
+            {% endif %}
             fetch(dataDevPath, {
                 method: "GET",
                 headers: {"Content-Type": "application/json"},
@@ -380,26 +414,15 @@
                     start.setHours(0,0,0,0); // get start of first day
                     end.setHours(0,0,0,0); // get start of last day
 
-                    {% if event_starts_after and event_ends_before %}
-                        // Initialize picker to the date selection specified in the session
-                        var sessionStart = new Date('{{ event_starts_after }}');
-                        var sessionEnd = new Date('{{ event_ends_before }}');
-                        sessionEnd.setSeconds(sessionEnd.getSeconds() - 1); // -1 second in case most recent event ends at midnight
-                        sessionStart.setHours(0,0,0,0); // get start of first day
-                        sessionEnd.setHours(0,0,0,0); // get start of last day
-                        picker.setDateRange(
-                            sessionStart,
-                            sessionEnd,
-                        );
-                    {% else %}
+                    if (timerangeNotSetYet) {
                         // Initialize picker to the last 2 days of sensor data
                         var nearEnd = new Date(end)//.setDate(end.getDate() - 1);
                         nearEnd.setDate(nearEnd.getDate() - 1);
                         picker.setDateRange(
                             nearEnd,
                             end,
                         );
-                    {% endif %}
+                    }
 
                     // No use looking for data in years outside timerange of sensor data
                     picker.setOptions({