From 97484c0145d8d479fb730688980805a340b16c54 Mon Sep 17 00:00:00 2001
From: Felix Claessen <30658763+Flix6x@users.noreply.github.com>
Date: Tue, 9 Aug 2022 15:19:23 +0200
Subject: [PATCH] Make sure vega view is embedded in page before attempting to
 change its dataset (#472)

Asynchronous reloading of a chart's dataset relies on that chart already having been embedded. This fix makes sure the vegaView variable is set up before any of the data fetching promises's then blocks try to load the view with data.


* Make sure vega view is embedded in page before attempting to change its dataset

Signed-off-by: F.N. Claessen <felix@seita.nl>

* changelog entry

Signed-off-by: F.N. Claessen <felix@seita.nl>
---
 documentation/changelog.rst                  | 1 +
 flexmeasures/ui/templates/crud/asset.html    | 5 +++--
 flexmeasures/ui/templates/views/sensors.html | 6 ++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index a1a095c08..11ab4d345 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -18,6 +18,7 @@ New features
 Bugfixes
 -----------
 * Do not fail asset page if entity addresses cannot be built [see `PR #457 <http://www.github.com/FlexMeasures/flexmeasures/pull/457>`_]
+* Asynchronous reloading of a chart's dataset relies on that chart already having been embedded [see `PR #472 <http://www.github.com/FlexMeasures/flexmeasures/pull/472>`_]
 * Time scale axes in sensor data charts now match the requested date range, rather than stopping at the edge of the available data [see `PR #449 <http://www.github.com/FlexMeasures/flexmeasures/pull/449>`_]
 * The docker-based tutorial now works with UI on all platforms (port 5000 did not expose on MacOS) [see `PR #465 <http://www.github.com/FlexMeasures/flexmeasures/pull/465>`_]
 * Fix interpretation of scheduling results in toy tutorial [see `PR #466 <http://www.github.com/FlexMeasures/flexmeasures/pull/466>`_]
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index a53655aea..73e008148 100644
--- a/flexmeasures/ui/templates/crud/asset.html
+++ b/flexmeasures/ui/templates/crud/asset.html
@@ -229,7 +229,6 @@ <h3>All sensors for {{ asset.name }}</h3>
       signal = controller.signal
 
       $("#spinner").show();
-      embedAndLoad(chartSpecsPath + 'event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate + '&', elementId, datasetName, previousResult, startDate, endDate);
       Promise.all([
           // Fetch time series data
           fetch(assetPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
@@ -246,8 +245,10 @@ <h3>All sensors for {{ asset.name }}</h3>
               headers: {"Content-Type": "application/json"},
               signal: signal,
           })
-          .then(function(response) { return response.json(); })
+          .then(function(response) { return response.json(); }),
           */
+
+          embedAndLoad(chartSpecsPath + 'event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate + '&', elementId, datasetName, previousResult, startDate, endDate),
       ]).then(function(result) {
             $("#spinner").hide();
             vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(result[0])).resize().run();
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 5c06332b1..29ab7817f 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -110,7 +110,6 @@
           signal = controller.signal
 
           $("#spinner").show();
-          embedAndLoad(chartSpecsPath + 'event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate + '&', elementId, datasetName, previousResult, startDate, endDate);
           Promise.all([
               // Fetch time series data
               fetch(sensorPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
@@ -124,7 +123,10 @@
                   method: "GET",
                   headers: {"Content-Type": "application/json"},
               })
-              .then(function(response) { return response.json(); })
+              .then(function(response) { return response.json(); }),
+
+              // Embed chart
+              embedAndLoad(chartSpecsPath + 'event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate + '&', elementId, datasetName, previousResult, startDate, endDate),
           ]).then(function(result) {
                 $("#spinner").hide();
                 vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(result[0])).resize().run();