Add replay button to sensor and asset pages

documentation/changelog.rst

@@ -8,6 +8,7 @@ v0.12.0 | October XX, 2022
 New features
 -------------
 
+* Hit the replay button to replay what happened, available on the sensor and asset pages [see `PR #463 <http://www.github.com/FlexMeasures/flexmeasures/pull/463>`_]
 
 Bugfixes
 -----------

flexmeasures/ui/static/js/replay-utils.js

@@ -1,23 +1,44 @@
 // Replay utils
-export function partition(array, callback){
+
+/**
+ * Partitions array into two arrays.
+ *
+ * Partitions array into two array by pushing elements left or right given some decision function
+ * that is evaluated on each element.
+ *
+ * @param {Array} array               Array to be partitioned.
+ * @param {function} decisionFunction Function that assigns elements to the left or right arrays.
+ * @return {Array}                    Array containing the left and right arrays.
+ */
+export function partition(array, decisionFunction){
   return array.reduce(function(result, element, i) {
-    callback(element, i, array)
+    decisionFunction(element, i, array)
       ? result[0].push(element)
       : result[1].push(element);
       return result;
     }, [[],[]]
   );
 };
 
+/**
+ * Updates beliefs.
+ *
+ * Updates oldBeliefs with the most recent newBeliefs about the same event for the same sensor by the same source.
+ *
+ * @param {Array} oldBeliefs Array containing old beliefs.
+ * @param {Array} newBeliefs Array containing new beliefs.
+ * @return {Array}           Array containing updated beliefs.
+ */
 export function updateBeliefs(oldBeliefs, newBeliefs) {
-  // Update oldBeliefs with the most recent newBeliefs about the same event for the same sensor by the same source
-
   // Group by sensor, event start and source
   var oldBeliefsByEventBySource = Object.fromEntries(new Map(oldBeliefs.map(belief => [belief.sensor.id + '_' + belief.event_start + '_' + belief.source.id, belief])));  // array -> dict (already had one belief per event)
 
   // Group by sensor, event start and source, and select only the most recent new beliefs
   var mostRecentNewBeliefsByEventBySource = Object.fromEntries(new Map(newBeliefs.map(belief => [belief.sensor.id + '_' + belief.event_start + '_' + belief.source.id, belief])));  // array -> dict (assumes beliefs are ordered by ascending belief time, with the last belief used as dict value)
 
   // Return old beliefs updated with most recent new beliefs
-  return Object.values({...oldBeliefsByEventBySource, ...mostRecentNewBeliefsByEventBySource})  // dict -> list
+  return Object.values({...oldBeliefsByEventBySource, ...mostRecentNewBeliefsByEventBySource})  // dict -> array
 }
+
+//  Define the step duration for the replay (value in ms)
+export var beliefTimedelta = 3600000

flexmeasures/ui/templates/base.html

@@ -231,7 +231,7 @@
     <script type="module" type="text/javascript">
 
     import { subtract, thisMonth, lastNMonths, getOffsetBetweenTimezonesForDate } from "{{ url_for('flexmeasures_ui.static', filename='js/daterange-utils.js') }}";
-    import { partition, updateBeliefs } from "{{ url_for('flexmeasures_ui.static', filename='js/replay-utils.js') }}";
+    import { partition, updateBeliefs, beliefTimedelta} from "{{ url_for('flexmeasures_ui.static', filename='js/replay-utils.js') }}";
 
     let vegaView;
     let previousResult;
@@ -409,94 +409,90 @@
         }
     };
 
-    // Set up play/pause button for replay
+    // Set up play/pause button for replay, incl. the complete replay logic
     let toggle = document.querySelector('#replay');
     toggle.addEventListener('click', function(e) {
         e.preventDefault();
         // toggle.classList.toggle('paused');
         if (toggle.classList.contains('playing')) {
             // Pause replay
-            console.log("pause replay")
             toggle.classList.remove('playing');
             toggle.classList.add('paused');
         } else if (toggle.classList.contains('stopped')) {
             // Start replay
-            console.log("start replay")
             // toggle.classList.remove('paused');
             toggle.classList.remove('stopped');
             toggle.classList.add('playing');
             var beliefTime = new Date(storeStartDate)
-            // var beliefTimedelta = 900000
-            var beliefTimedelta = 3600000
             var numReplaySteps = Math.ceil((storeEndDate - storeStartDate) / beliefTimedelta)
             queryStartDate = (storeStartDate != null) ? (storeStartDate.toISOString()) : (null)
             queryEndDate = (storeEndDate != null) ? (storeEndDate.toISOString()) : (null)
 
             $("#spinner").show();
             Promise.all([
-                // Fetch time series data
+                // Fetch time series data (all data, not only the most recent beliefs)
                 fetch(dataPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate + '&most_recent_beliefs_only=false', {
                     method: "GET",
                     headers: {"Content-Type": "application/json"},
                 })
                 .then(function(response) { return response.json(); }),
             ]).then(function(result) {
                 $("#spinner").hide();
-                load(result);
+                replayBeliefsData(result[0]);
             }).catch(console.error);
 
             const timer = ms => new Promise(res => setTimeout(res, ms))
 
-            async function load (result) {
-                var remainingData = result[0]
-                var simulatedData = []
+            /**
+             * Replays beliefs data.
+             *
+             * As we go forward in time in steps, replayedData is updated with newData that was known at beliefTime,
+             * by splitting off newData from remainingData.
+             * Then, replayedData is loaded into the chart.
+             *
+             * @param {Array} remainingData Array containing beliefs.
+             */
+            async function replayBeliefsData (remainingData) {
+                var replayedData = []
                 for (var i = 0; i < numReplaySteps + 1; i++) {
                     while (document.getElementById('replay').classList.contains('paused') ) {
                         await timer(1000);
                     }
                     if (document.getElementById('replay').classList.contains('stopped') ) {
                         break;
                     }
-                    var queryBeliefTime = (beliefTime != null) ? (beliefTime.toISOString()) : (null)
                     beliefTime = new Date(beliefTime.getTime() + beliefTimedelta)
 
-                    let t0= performance.now();
-
-                    // Split off one simulation step of new data from the remaining data
+                    // Split off one replay step of new data from the remaining data
                     var newData
                     [newData, remainingData] = partition(
                         remainingData,
                         (item) => item.belief_time <= beliefTime.getTime(),
                     );
 
-                    // Update beliefs in the simulated data given the new data
-                    const oldLength = simulatedData.length + newData.length;
-                    simulatedData = updateBeliefs(simulatedData, newData)
-                    const newLength = simulatedData.length;
-                    console.log("Removed " + (oldLength - newLength) + " obsolete beliefs")
-
-                    let t1= performance.now();
-
-                    console.log('Time taken to update data:'+ (t1-t0) +' milliseconds');
-
-                    // todo: remove obsolete beliefs and insert most recent new beliefs
-                    vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(simulatedData)).run().finalize();
+                    // Update beliefs in the replayed data given the new data
+                    replayedData = updateBeliefs(replayedData, newData)
 
-                    let t2= performance.now();
+                    /** When selecting a longer time periode (more than a week), the replay slows down a bit. This
+                     * seems to be mainly from reloading the data into the graph. Slicing the data takes 10-30 ms, and
+                     * loading that data into the graph takes 30-200 ms, depending on how much data is shown in the
+                     * graph. After trying different approaches, we fell back to the original approach of telling vega
+                     * to remove all previous data and to insert a completely new dataset at each iteration. Updating
+                     * the view with removing only a few data points (representing obsolete beliefs) and inserting only
+                     * a few data points (representing the most recent new beliefs) actually made it slower.
+                     */
+                    vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(replayedData)).run().finalize();
 
-                    console.log('Time taken to embed data:'+ (t2-t1) +' milliseconds');
                     document.getElementById('replay-time').innerHTML = beliefTime
                     await timer(25);
                 }
                 // Stop replay when finished
-                console.log("stop replay")
                 toggle.classList.remove('playing');
                 toggle.classList.add('stopped');
                 document.getElementById('replay-time').innerHTML = ''
             }
         } else {
             // Resume replay
-            console.log("resume replay")
             toggle.classList.remove('paused');
             toggle.classList.add('playing');
         }