Skip to content

Commit

Permalink
Make data load faster on the asset (and sensor) page.
Browse files Browse the repository at this point in the history 
Issue 515 slow loading of asset page due to timerange query of its sensors (#533)

* Set date range for loading data early on in the page loading process, and only use the timerange of shown sensors to set the date range if the date range isn't set by session variables already; minYear and maxYear are already set asynchronously after fetching the timerange

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

* Fetch initial data already before page load is completed

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

* async onreadystatechange, and refactor

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

* Set initial date range much earlier, when initializing datepicker

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

* changelog entry

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

Signed-off-by: F.N. Claessen <felix@seita.nl>
  • Loading branch information
@Flix6x
Flix6x committed Dec 1, 2022
1 parent ae84375 commit 81b6525
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 15 deletions.
1 change: 1 addition & 0 deletions documentation/changelog.rst
View file
Expand Up @@ -21,6 +21,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>`_ and `PR #539 <http://www.github.com/FlexMeasures/flexmeasures/pull/539>`_]
* 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
----------------------
Expand Down
53 changes: 38 additions & 15 deletions flexmeasures/ui/templates/base.html
View file
Expand Up @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -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"},
Expand All @@ -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({
Expand Down

0 comments on commit 81b6525

Please sign in to comment.