559 enhance replay feature with ruler showing current time

documentation/changelog.rst

@@ -13,7 +13,7 @@ v0.12.0 | October XX, 2022
 New features
 -------------
 
-* Hit the replay button to visually replay what happened, available on the sensor and asset pages [see `PR #463 <http://www.github.com/FlexMeasures/flexmeasures/pull/463>`_]
+* Hit the replay button to visually replay what happened, available on the sensor and asset pages [see `PR #463 <http://www.github.com/FlexMeasures/flexmeasures/pull/463>`_ and `PR #560 <http://www.github.com/FlexMeasures/flexmeasures/pull/560>`_]
 * Ability to provide your own custom scheduling function [see `PR #505 <http://www.github.com/FlexMeasures/flexmeasures/pull/505>`_]
 * Visually distinguish forecasts/schedules (dashed lines) from measurements (solid lines), and expand the tooltip with timing info regarding the forecast/schedule horizon or measurement lag [see `PR #503 <http://www.github.com/FlexMeasures/flexmeasures/pull/503>`_]
 * The asset page also allows to show sensor data from other assets that belong to the same account [see `PR #500 <http://www.github.com/FlexMeasures/flexmeasures/pull/500>`_]

flexmeasures/data/models/charts/belief_charts.py

@@ -2,7 +2,7 @@
 
 from datetime import datetime, timedelta
 
-from flexmeasures.data.models.charts.defaults import FIELD_DEFINITIONS
+from flexmeasures.data.models.charts.defaults import FIELD_DEFINITIONS, REPLAY_RULER
 from flexmeasures.utils.flexmeasures_inflection import capitalize
 
 
@@ -32,36 +32,41 @@ def bar_chart(
     chart_specs = {
         "description": "A simple bar chart showing sensor data.",
         "title": capitalize(sensor.name) if sensor.name != sensor.sensor_type else None,
-        "mark": {
-            "type": "bar",
-            "clip": True,
-        },
-        "encoding": {
-            "x": event_start_field_definition,
-            "x2": FIELD_DEFINITIONS["event_end"],
-            "y": event_value_field_definition,
-            "color": FIELD_DEFINITIONS["source_name"],
-            "detail": FIELD_DEFINITIONS["source"],
-            "opacity": {"value": 0.7},
-            "tooltip": [
-                FIELD_DEFINITIONS["full_date"],
-                {
-                    **event_value_field_definition,
-                    **dict(title=f"{capitalize(sensor.sensor_type)}"),
-                },
-                FIELD_DEFINITIONS["source_name_and_id"],
-                FIELD_DEFINITIONS["source_model"],
-            ],
-        },
-        "transform": [
+        "layer": [
             {
-                "calculate": f"datum.event_start + {resolution_in_ms}",
-                "as": "event_end",
-            },
-            {
-                "calculate": "datum.source.name + ' (ID: ' + datum.source.id + ')'",
-                "as": "source_name_and_id",
+                "mark": {
+                    "type": "bar",
+                    "clip": True,
+                },
+                "encoding": {
+                    "x": event_start_field_definition,
+                    "x2": FIELD_DEFINITIONS["event_end"],
+                    "y": event_value_field_definition,
+                    "color": FIELD_DEFINITIONS["source_name"],
+                    "detail": FIELD_DEFINITIONS["source"],
+                    "opacity": {"value": 0.7},
+                    "tooltip": [
+                        FIELD_DEFINITIONS["full_date"],
+                        {
+                            **event_value_field_definition,
+                            **dict(title=f"{capitalize(sensor.sensor_type)}"),
+                        },
+                        FIELD_DEFINITIONS["source_name_and_id"],
+                        FIELD_DEFINITIONS["source_model"],
+                    ],
+                },
+                "transform": [
+                    {
+                        "calculate": f"datum.event_start + {resolution_in_ms}",
+                        "as": "event_end",
+                    },
+                    {
+                        "calculate": "datum.source.name + ' (ID: ' + datum.source.id + ')'",
+                        "as": "source_name_and_id",
+                    },
+                ],
             },
+            REPLAY_RULER,
         ],
     }
     for k, v in override_chart_specs.items():
@@ -223,6 +228,7 @@ def chart_for_multiple_sensors(
                         },
                     ],
                 },
+                REPLAY_RULER,
             ],
             "width": "container",
         }

flexmeasures/data/models/charts/defaults.py

@@ -57,6 +57,18 @@
         title="Source",
     ),
 }
+REPLAY_RULER = {
+    "data": {"name": "replay"},
+    "mark": {
+        "type": "rule",
+    },
+    "encoding": {
+        "x": {
+            "field": "belief_time",
+            "type": "temporal",
+        },
+    },
+}
 SHADE_LAYER = {
     "mark": {
         "type": "bar",

flexmeasures/ui/templates/base.html

@@ -511,11 +511,16 @@
                      * 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();
+                    vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(replayedData));
+                    vegaView.change('replay', vega.changeset().remove(vega.truthy).insert({'belief_time': beliefTime}));
+                    vegaView.run().finalize();
 
                     document.getElementById('replay-time').innerHTML = beliefTime;
                     await timer(25);
                 }
+                // Remove replay ruler
+                vegaView.change('replay', vega.changeset().remove(vega.truthy).insert({'belief_time': null})).run().finalize();
+
                 // Stop replay when finished
                 toggle.classList.remove('playing');
                 toggle.classList.add('stopped');