diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index 0521668e0..2cc1e7613 100644
--- a/documentation/changelog.rst
+++ b/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
 -----------
diff --git a/flexmeasures/api/dev/sensors.py b/flexmeasures/api/dev/sensors.py
index bbedcb0c9..627156b9d 100644
--- a/flexmeasures/api/dev/sensors.py
+++ b/flexmeasures/api/dev/sensors.py
@@ -71,6 +71,7 @@ def get_chart(self, id: int, sensor: Sensor, **kwargs):
             "beliefs_after": AwareDateTimeField(format="iso", required=False),
             "beliefs_before": AwareDateTimeField(format="iso", required=False),
             "resolution": DurationField(required=False),
+            "most_recent_beliefs_only": fields.Boolean(required=False),
         },
         location="query",
     )
diff --git a/flexmeasures/api/v3_0/assets.py b/flexmeasures/api/v3_0/assets.py
index d574ff924..919f1f4c3 100644
--- a/flexmeasures/api/v3_0/assets.py
+++ b/flexmeasures/api/v3_0/assets.py
@@ -297,6 +297,7 @@ def get_chart(self, id: int, asset: GenericAsset, **kwargs):
             "event_ends_before": AwareDateTimeField(format="iso", required=False),
             "beliefs_after": AwareDateTimeField(format="iso", required=False),
             "beliefs_before": AwareDateTimeField(format="iso", required=False),
+            "most_recent_beliefs_only": fields.Boolean(required=False),
         },
         location="query",
     )
diff --git a/flexmeasures/data/models/charts/belief_charts.py b/flexmeasures/data/models/charts/belief_charts.py
index f27b67d21..1d3ff7a6f 100644
--- a/flexmeasures/data/models/charts/belief_charts.py
+++ b/flexmeasures/data/models/charts/belief_charts.py
@@ -87,10 +87,7 @@ def chart_for_multiple_sensors(
             format=[".3~r", unit],
             formatType="quantityWithUnitFormat",
             stack=None,
-            **{
-                **FIELD_DEFINITIONS["event_value"],
-                **dict(field=sensor.id),
-            },
+            **FIELD_DEFINITIONS["event_value"],
         )
         event_start_field_definition = FIELD_DEFINITIONS["event_start"]
         if event_starts_after and event_ends_before:
@@ -113,6 +110,7 @@ def chart_for_multiple_sensors(
             "title": capitalize(sensor.name)
             if sensor.name != sensor.sensor_type
             else None,
+            "transform": [{"filter": f"datum.sensor.id == {sensor.id}"}],
             "layer": [
                 {
                     "mark": {
diff --git a/flexmeasures/data/models/data_sources.py b/flexmeasures/data/models/data_sources.py
index e51f5490e..7705400c0 100644
--- a/flexmeasures/data/models/data_sources.py
+++ b/flexmeasures/data/models/data_sources.py
@@ -81,10 +81,10 @@ def description(self):
                 descr += f" v{self.version}"
         return descr
 
-    def __repr__(self):
+    def __repr__(self) -> str:
         return "<Data source %r (%s)>" % (self.id, self.description)
 
-    def __str__(self):
+    def __str__(self) -> str:
         return self.description
 
     def to_dict(self) -> dict:
diff --git a/flexmeasures/data/models/generic_assets.py b/flexmeasures/data/models/generic_assets.py
index f74492b77..ae35ed90e 100644
--- a/flexmeasures/data/models/generic_assets.py
+++ b/flexmeasures/data/models/generic_assets.py
@@ -342,6 +342,7 @@ def search_beliefs(
         source: Optional[
             Union[DataSource, List[DataSource], int, List[int], str, List[str]]
         ] = None,
+        most_recent_beliefs_only: bool = True,
         most_recent_events_only: bool = False,
         as_json: bool = False,
     ) -> Union[BeliefsDataFrame, str]:
@@ -373,7 +374,7 @@ def search_beliefs(
                 horizons_at_least=horizons_at_least,
                 horizons_at_most=horizons_at_most,
                 source=source,
-                most_recent_beliefs_only=True,
+                most_recent_beliefs_only=most_recent_beliefs_only,
                 most_recent_events_only=most_recent_events_only,
                 one_deterministic_belief_per_event_per_source=True,
             )
@@ -394,18 +395,35 @@ def search_beliefs(
                     if bdf.event_resolution > timedelta(0):
                         bdf = bdf.resample_events(minimum_non_zero_resolution)
                     df = simplify_index(
-                        bdf, index_levels_to_columns=["source"]
-                    ).set_index(["source"], append=True)
-                    df_dict[sensor.id] = df.rename(columns=dict(event_value=sensor.id))
-                df = list(df_dict.values())[0].join(
-                    list(df_dict.values())[1:], how="outer"
-                )
+                        bdf,
+                        index_levels_to_columns=["source"]
+                        if most_recent_beliefs_only
+                        else ["belief_time", "source"],
+                    ).set_index(
+                        ["source"]
+                        if most_recent_beliefs_only
+                        else ["belief_time", "source"],
+                        append=True,
+                    )
+                    df["sensor"] = sensor  # or some JSONfiable representation
+                    df = df.set_index(["sensor"], append=True)
+                    df_dict[sensor.id] = df
+                df = pd.concat(df_dict.values())
             else:
                 df = simplify_index(
-                    BeliefsDataFrame(), index_levels_to_columns=["source"]
-                ).set_index(["source"], append=True)
+                    BeliefsDataFrame(),
+                    index_levels_to_columns=["source"]
+                    if most_recent_beliefs_only
+                    else ["belief_time", "source"],
+                ).set_index(
+                    ["source"]
+                    if most_recent_beliefs_only
+                    else ["belief_time", "source"],
+                    append=True,
+                )
             df = df.reset_index()
             df["source"] = df["source"].apply(lambda x: x.to_dict())
+            df["sensor"] = df["sensor"].apply(lambda x: x.to_dict())
             return df.to_json(orient="records")
         return bdf_dict
 
diff --git a/flexmeasures/data/models/time_series.py b/flexmeasures/data/models/time_series.py
index b8fe02daa..958e61201 100644
--- a/flexmeasures/data/models/time_series.py
+++ b/flexmeasures/data/models/time_series.py
@@ -339,6 +339,8 @@ def search_beliefs(
         )
         if as_json:
             df = bdf.reset_index()
+            df["sensor"] = self
+            df["sensor"] = df["sensor"].apply(lambda x: x.to_dict())
             df["source"] = df["source"].apply(lambda x: x.to_dict())
             return df.to_json(orient="records")
         return bdf
@@ -480,6 +482,15 @@ def timerange(self) -> Dict[str, datetime_type]:
     def __repr__(self) -> str:
         return f"<Sensor {self.id}: {self.name}, unit: {self.unit} res.: {self.event_resolution}>"
 
+    def __str__(self) -> str:
+        return self.name
+
+    def to_dict(self) -> dict:
+        return dict(
+            id=self.id,
+            name=self.name,
+        )
+
     @classmethod
     def find_closest(
         cls, generic_asset_type_name: str, sensor_name: str, n: int = 1, **kwargs
diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css
index 38d022cd1..cd42d220a 100644
--- a/flexmeasures/ui/static/css/flexmeasures.css
+++ b/flexmeasures/ui/static/css/flexmeasures.css
@@ -1770,4 +1770,53 @@ div.heading-group {
     align-items: center;
 }
 
-/* ---- End Unsure / potential Legacy ---- */
\ No newline at end of file
+/* ---- End Unsure / potential Legacy ---- */
+
+
+/* ---- Play/Pause button ---- */
+.replay-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+#replay-time {
+  margin-top: 15px;
+}
+#replay {
+  cursor: pointer !important;
+  margin-top: 190px;
+  width: 50px;
+  height: 50px;
+  position: relative;
+}
+#replay:before, #replay:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  border-style: solid;
+  border-color: transparent;
+  border-left-color: var(--secondary-color);
+  transition: 0.3s;
+}
+#replay:not(.playing):before {
+  height: 50px;
+  border-width: 25px 0px 25px 50px;
+}
+#replay:not(.playing):after {
+  left: 25px;
+  top: 12.5px;
+  height: 0;
+  border-width: 12.5px 0 12.5px 25px;
+}
+#replay:before {
+  left: 0;
+  height: 50px;
+  border-width: 0 0 0 16.6666666667px;
+}
+#replay:after {
+  left: 33.3333333333px;
+  top: 0px;
+  height: 50px;
+  border-width: 0 0 0 16.6666666667px;
+}
\ No newline at end of file
diff --git a/flexmeasures/ui/static/js/replay-utils.js b/flexmeasures/ui/static/js/replay-utils.js
new file mode 100644
index 000000000..34b3f266f
--- /dev/null
+++ b/flexmeasures/ui/static/js/replay-utils.js
@@ -0,0 +1,44 @@
+// Replay utils
+
+/**
+ * Partitions array into two arrays.
+ *
+ * Partitions array into two array by pushing elements left or right given some decision function, which is
+ * evaluated on each element. Successful validations lead to placement on the left side, others on the right.
+ *
+ * @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) {
+    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) {
+  // 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 -> array
+}
+
+//  Define the step duration for the replay (value in ms)
+export var beliefTimedelta = 3600000
diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html
index 4dcd62078..e072733cb 100644
--- a/flexmeasures/ui/templates/base.html
+++ b/flexmeasures/ui/templates/base.html
@@ -217,7 +217,7 @@
         }
       }
       for (var i = leftSidepanelLabels.length - 1; i >= 0; i--) {
-        leftSidepanelLabels[i].addEventListener("click", openSidepanel)
+        leftSidepanelLabels[i].addEventListener("click", openSidepanel);
       }
       document.addEventListener('swiped-right', openSidepanel);
       document.addEventListener('swiped-left', closeSidepanel);
@@ -225,6 +225,284 @@
 
     {% endblock leftsidepanel %}
 
+    {% block sensorChartSetup %}
+
+    <!-- Render Charts -->
+    <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, beliefTimedelta} from "{{ url_for('flexmeasures_ui.static', filename='js/replay-utils.js') }}";
+
+    let vegaView;
+    let previousResult;
+    let queryStartDate;
+    let queryEndDate;
+    let storeStartDate;
+    let storeEndDate;
+
+    async function embedAndLoad(chartSpecsPath, elementId, datasetName, previousResult, startDate, endDate) {
+
+        await vegaEmbed('#'+elementId, chartSpecsPath + 'dataset_name=' + datasetName + '&width=container&include_sensor_annotations=false&include_asset_annotations=false', {{ chart_options | safe }})
+        .then(function (result) {
+            // result.view is the Vega View, chartSpecsPath is the original Vega-Lite specification
+            vegaView = result.view;
+            if (previousResult) {
+                var slicedPreviousResult = previousResult.filter(item => {
+                    return item.event_start >= startDate.getTime() && item.event_start < endDate.getTime();
+                })
+                vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(slicedPreviousResult)).resize().run();
+            }
+        });
+    }
+
+    {% if active_page == "assets" %}
+        var dataPath = '/api/v3_0/assets/' + {{ asset.id }};
+        var dataDevPath = '/api/dev/asset/' + {{ asset.id }};
+        var datasetName = 'asset_' + {{ asset.id }};
+    {% elif active_page == "sensors" %}
+        var dataPath = '/api/dev/sensor/' + {{ sensor_id }};
+        var dataDevPath = '/api/dev/sensor/' + {{ sensor_id }};
+        var datasetName = 'sensor_' + {{ sensor_id }};
+    {% endif %}
+    var elementId = 'sensorchart';
+    var chartSpecsPath = dataPath + '/chart?';
+
+    // Set up abort controller to cancel requests
+    var controller = new AbortController();
+    var signal = controller.signal;
+
+    // Create date range picker and the logic for a new date range selection (mostly, fetching data and displaying the chart for it)
+    const date = Date();
+    const picker = new Litepicker({
+        element: document.getElementById('datepicker'),
+        plugins: ['ranges', 'keyboardnav'],
+        ranges: {
+            customRanges: {
+                'Today': [new Date(date), new Date(date)],
+                'Last 7 days': [subtract(date, 6), new Date(date)],
+                'This month': thisMonth(date)
+            },
+            position: 'bottom'
+        },
+        autoRefresh: true,
+        moduleRanges: true,
+        showWeekNumbers: true,
+        numberOfMonths: 1,
+        numberOfColumns: 1,
+        inlineMode: true,
+        switchingMonths: 1,
+        singleMode: false,
+        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');
+        toggle.classList.remove('paused');
+        toggle.classList.add('stopped');
+
+        startDate = startDate.toJSDate();
+        endDate = endDate.toJSDate();
+        endDate.setDate(endDate.getDate() + 1);
+        storeStartDate = startDate;
+        storeEndDate = endDate;
+        var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null);
+        var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null);
+
+        // Abort previous request and create abort controller for new request
+        controller.abort();
+        controller = new AbortController();
+        signal = controller.signal;
+
+        $("#spinner").show();
+        Promise.all([
+            // Fetch time series data
+            fetch(dataPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
+                method: "GET",
+                headers: {"Content-Type": "application/json"},
+                signal: signal,
+            })
+            .then(function(response) { return response.json(); }),
+
+            /**
+            // Fetch annotations
+            fetch(dataPath + '/chart_annotations/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
+                method: "GET",
+                headers: {"Content-Type": "application/json"},
+                  signal: signal,
+            })
+            .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();
+            previousResult = result[0];
+            /**
+            vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(result[1])).resize().run();
+            */
+        }).catch(console.error);
+    });
+
+    /** 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 = () => {
+        if (document.readyState === 'complete') {
+            fetch(dataDevPath, {
+                method: "GET",
+                headers: {"Content-Type": "application/json"},
+            })
+            .then(function(response) { return response.json(); })
+            .then(function(data) {
+                var offsetDifference = getOffsetBetweenTimezonesForDate(new Date(), data.timezone, jstz.determine().name());
+                if (offsetDifference != 0) {
+                    document.getElementById('tzwarn').style.display = 'block';
+                    var offsetNotice = (offsetDifference > 0) ? 'which is currently ahead by ' + offsetDifference + 'minutes' : 'which is currently behind by ' + offsetDifference + ' minutes'
+                    document.getElementById('tzwarn').innerHTML = 'Please note that the sensor data you are viewing is located in a different timezone (' + offsetNotice + ').<br/>To view the data from a local perspective, set your locale timezone to ' + data.timezone + '.'
+                }
+                {% if active_page == "assets" %}
+                    var timerangeVar = 'timerange_of_sensors_to_show';
+                {% else %}
+                    var timerangeVar = 'timerange';
+                {% endif %}
+                if (timerangeVar in data) {
+                    var start = new Date(data[timerangeVar].start);
+                    var end = new Date(data[timerangeVar].end);
+                    end.setSeconds(end.getSeconds() - 1); // -1 second in case most recent event ends at midnight
+                    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 %}
+                        // 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({
+                        dropdowns: {
+                            minYear: start.getFullYear(),
+                            maxYear: end.getFullYear(),
+                        },
+                    });
+                };
+            });
+        }
+    };
+
+    // Set up play/pause button for replay, incl. the complete replay logic
+    let toggle = document.querySelector('#replay');
+    toggle.addEventListener('click', function(e) {
+        e.preventDefault();
+        if (toggle.classList.contains('playing')) {
+            // Pause replay
+            toggle.classList.remove('playing');
+            toggle.classList.add('paused');
+        } else if (toggle.classList.contains('stopped')) {
+            // Start replay
+            toggle.classList.remove('stopped');
+            toggle.classList.add('playing');
+            var beliefTime = new Date(storeStartDate);
+            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 (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();
+                replayBeliefsData(result[0]);
+            }).catch(console.error);
+
+            const timer = ms => new Promise(res => setTimeout(res, ms));
+
+            /**
+             * 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;
+                    }
+                    beliefTime = new Date(beliefTime.getTime() + beliefTimedelta);
+
+                    // 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 replayed data given the new data
+                    replayedData = updateBeliefs(replayedData, newData);
+
+                    /** 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();
+
+                    document.getElementById('replay-time').innerHTML = beliefTime;
+                    await timer(25);
+                }
+                // Stop replay when finished
+                toggle.classList.remove('playing');
+                toggle.classList.add('stopped');
+                document.getElementById('replay-time').innerHTML = '';
+            }
+        } else {
+            // Resume replay
+            toggle.classList.remove('paused');
+            toggle.classList.add('playing');
+        }
+    });
+    </script>
+
+    {% endblock sensorChartSetup %}
+
     {% block attributions %}
     <div id="att-text" style="display: none;">
         <ul>
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html
index cfc98ff7c..96717504e 100644
--- a/flexmeasures/ui/templates/crud/asset.html
+++ b/flexmeasures/ui/templates/crud/asset.html
@@ -156,7 +156,12 @@ <h3>All sensors for {{ asset.name }}</h3>
                 </table>
             </div>
         </div>
-        <div class="col-sm-2"></div>
+        <div class="col-sm-2">
+            <div class="replay-container">
+                <div id="replay"></div>
+                <div id="replay-time"></div>
+            </div>
+        </div>
     </div>
 
 
@@ -167,164 +172,8 @@ <h3>All sensors for {{ asset.name }}</h3>
 <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/ranges.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/keyboardnav.js"></script>
 
-<!-- Render Charts -->
-<script type="module" type="text/javascript">
-
-  import { subtract, thisMonth, lastNMonths, getOffsetBetweenTimezonesForDate } from "{{ url_for('flexmeasures_ui.static', filename='js/daterange-utils.js') }}";
-
-  let vegaView;
-  let previousResult;
-
-  async function embedAndLoad(chartSpecsPath, elementId, datasetName, previousResult, startDate, endDate) {
-
-    await vegaEmbed('#'+elementId, chartSpecsPath + 'dataset_name=' + datasetName + '&width=container&include_sensor_annotations=false&include_asset_annotations=false', {{ chart_options | safe }})
-    .then(function (result) {
-      // result.view is the Vega View, chartSpecsPath is the original Vega-Lite specification
-      vegaView = result.view;
-      if (previousResult) {
-        var slicedPreviousResult = previousResult.filter(item => {
-          return item.event_start >= startDate.getTime() && item.event_start < endDate.getTime()
-        })
-        vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(slicedPreviousResult)).resize().run();
-      }
-    });
-  }
-
-  var assetPath = '/api/v3_0/assets/' + {{ asset.id }}
-  var assetDevPath = '/api/dev/asset/' + {{ asset.id }}
-  var chartSpecsPath = assetPath + '/chart?'
-  var elementId = 'sensorchart'
-  var datasetName = 'asset_' + {{ asset.id }}
-
-  // Set up abort controller to cancel requests
-  var controller = new AbortController()
-  var signal = controller.signal
-
-  const date = Date();
-  const picker = new Litepicker({
-      element: document.getElementById('datepicker'),
-      plugins: ['ranges', 'keyboardnav'],
-      ranges: {
-          customRanges: {
-              'Today': [new Date(date), new Date(date)],
-              'Last 7 days': [subtract(date, 6), new Date(date)],
-              'This month': thisMonth(date)
-          },
-          position: 'bottom'
-      },
-      autoRefresh: true,
-      moduleRanges: true,
-      showWeekNumbers: true,
-      numberOfMonths: 1,
-      numberOfColumns: 1,
-      inlineMode: true,
-      switchingMonths: 1,
-      singleMode: false,
-      dropdowns: {
-          years: true,
-          months: true,
-      },
-      format: 'YYYY-MM-DD\\T00:00:00',
-  });
-  picker.on('selected', (startDate, endDate) => {
-      startDate = startDate.toJSDate()
-      endDate = endDate.toJSDate()
-      endDate.setDate(endDate.getDate() + 1);
-      var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null)
-      var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null)
-
-      // Abort previous request and create abort controller for new request
-      controller.abort()
-      controller = new AbortController()
-      signal = controller.signal
-
-      $("#spinner").show();
-      Promise.all([
-          // Fetch time series data
-          fetch(assetPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
-              method: "GET",
-              headers: {"Content-Type": "application/json"},
-              signal: signal,
-          })
-          .then(function(response) { return response.json(); }),
-
-          /**
-          // Fetch annotations
-          fetch(assetPath + '/chart_annotations/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
-              method: "GET",
-              headers: {"Content-Type": "application/json"},
-              signal: signal,
-          })
-          .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();
-            previousResult = result[0];
-            /**
-            vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(result[1])).resize().run();
-            */
-      }).catch(console.error);
-  });
-
-  document.onreadystatechange = () => {
-    if (document.readyState === 'complete') {
-      fetch(assetDevPath, {
-        method: "GET",
-        headers: {"Content-Type": "application/json"},
-      })
-      .then(function(response) { return response.json(); })
-      .then(function(data) {
-        var offsetDifference = getOffsetBetweenTimezonesForDate(new Date(), data.timezone, jstz.determine().name());
-        if (offsetDifference != 0) {
-          document.getElementById('tzwarn').style.display = 'block';
-          var offsetNotice = (offsetDifference > 0) ? 'which is currently ahead by ' + offsetDifference + 'minutes' : 'which is currently behind by ' + offsetDifference + ' minutes'
-          document.getElementById('tzwarn').innerHTML = 'Please note that the sensor data you are viewing is located in a different timezone (' + offsetNotice + ').<br/>To view the data from a local perspective, set your locale timezone to ' + data.timezone + '.'
-        }
-        if ('timerange_of_sensors_to_show' in data) {
-          var start = new Date(data.timerange_of_sensors_to_show.start);
-          var end = new Date(data.timerange_of_sensors_to_show.end)
-          end.setSeconds(end.getSeconds() - 1); // -1 second in case most recent event ends at midnight
-          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 %}
-                // 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({
-            dropdowns: {
-              minYear: start.getFullYear(),
-              maxYear: end.getFullYear(),
-            },
-          });
-        };
-      });
-    }
-  };
-</script>
-
 {% block leftsidepanel %} {{ super() }} {% endblock %}
+{% block sensorChartSetup %} {{ super() }} {% endblock %}
 
 <!-- Initialise the map -->
 <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet-src.min.js"></script>
diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
index 29ab7817f..d06cf9077 100644
--- a/flexmeasures/ui/templates/views/sensors.html
+++ b/flexmeasures/ui/templates/views/sensors.html
@@ -24,7 +24,12 @@
                       <span class="sr-only">Loading...</span>
                   </div>
               </div>
-              <div class="col-sm-2"></div>
+              <div class="col-sm-2">
+                  <div class="replay-container">
+                    <div id="replay"></div>
+                    <div id="replay-time"></div>
+                  </div>
+              </div>
           </div>
           <hr>
       </div>
@@ -34,178 +39,7 @@
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/ranges.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/keyboardnav.js"></script>
 
-    <!-- Render Charts -->
-    <script type="module" type="text/javascript">
-
-      import { subtract, thisMonth, lastNMonths, getOffsetBetweenTimezonesForDate } from "{{ url_for('flexmeasures_ui.static', filename='js/daterange-utils.js') }}";
-
-      let vegaView;
-      let previousResult;
-
-      async function embedAndLoad(chartSpecsPath, elementId, datasetName, previousResult, startDate, endDate) {
-
-        await vegaEmbed('#'+elementId, chartSpecsPath + 'dataset_name=' + datasetName + '&width=container&include_sensor_annotations=true&include_asset_annotations=true', {{ chart_options | safe }})
-        .then(function (result) {
-          // result.view is the Vega View, chartSpecsPath is the original Vega-Lite specification
-          vegaView = result.view;
-          if (previousResult) {
-            var slicedPreviousResult = previousResult.filter(item => {
-              return item.event_start >= startDate.getTime() && item.event_start < endDate.getTime()
-            })
-            vegaView.change(datasetName, vega.changeset().remove(vega.truthy).insert(slicedPreviousResult)).resize().run();
-          }
-        });
-      }
-
-      var sensorId = {{ sensor_id }}
-      var sensorPath = '/api/dev/sensor/' + sensorId
-      var chartSpecsPath = sensorPath + '/chart?'
-      var elementId = 'sensorchart'
-      var datasetName = 'sensor_' + sensorId
-
-      // Set up abort controller to cancel requests
-      var controller = new AbortController()
-      var signal = controller.signal
-
-      // Set up abort controller to cancel requests
-      var controller = new AbortController()
-      var signal = controller.signal
-
-      const date = Date();
-      const picker = new Litepicker({
-          element: document.getElementById('datepicker'),
-          plugins: ['ranges', 'keyboardnav'],
-          ranges: {
-              customRanges: {
-                  'Today': [new Date(date), new Date(date)],
-                  'Last 7 days': [subtract(date, 6), new Date(date)],
-                  'This month': thisMonth(date)
-              },
-              position: 'bottom'
-          },
-          autoRefresh: true,
-          moduleRanges: true,
-          showWeekNumbers: true,
-          numberOfMonths: 1,
-          numberOfColumns: 1,
-          inlineMode: true,
-          switchingMonths: 1,
-          singleMode: false,
-          dropdowns: {
-              years: true,
-              months: true,
-          },
-          format: 'YYYY-MM-DD\\T00:00:00',
-      });
-      picker.on('selected', (startDate, endDate) => {
-          startDate = startDate.toJSDate()
-          endDate = endDate.toJSDate()
-          endDate.setDate(endDate.getDate() + 1);
-          var queryStartDate = (startDate != null) ? (startDate.toISOString()) : (null)
-          var queryEndDate = (endDate != null) ? (endDate.toISOString()) : (null)
-
-          // Abort previous request and create abort controller for new request
-          controller.abort()
-          controller = new AbortController()
-          signal = controller.signal
-
-          $("#spinner").show();
-          Promise.all([
-              // Fetch time series data
-              fetch(sensorPath + '/chart_data/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
-                  method: "GET",
-                  headers: {"Content-Type": "application/json"},
-              })
-              .then(function(response) { return response.json(); }),
-
-              // Fetch annotations
-              fetch(sensorPath + '/chart_annotations/?event_starts_after=' + queryStartDate + '&event_ends_before=' + queryEndDate, {
-                  method: "GET",
-                  headers: {"Content-Type": "application/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();
-                vegaView.change(datasetName + '_annotations', vega.changeset().remove(vega.truthy).insert(result[1])).resize().run();
-                previousResult = result[0];
-          }).catch(console.error);
-      });
-
-      document.onreadystatechange = () => {
-        if (document.readyState === 'complete') {
-          fetch(sensorPath, {
-            method: "GET",
-            headers: {"Content-Type": "application/json"},
-          })
-          .then(function(response) { return response.json(); })
-          .then(function(data) {
-            var offsetDifference = getOffsetBetweenTimezonesForDate(new Date(), data.timezone, jstz.determine().name());
-            if (offsetDifference != 0) {
-              document.getElementById('tzwarn').style.display = 'block';
-              var offsetNotice = (offsetDifference > 0) ? 'which is currently ahead by ' + offsetDifference + 'minutes' : 'which is currently behind by ' + offsetDifference + ' minutes'
-              document.getElementById('tzwarn').innerHTML = 'Please note that the sensor data you are viewing is located in a different timezone (' + offsetNotice + ').<br/>To view the data from a local perspective, set your locale timezone to ' + data.timezone + '.'
-            }
-            if ('timerange' in data) {
-              var start = new Date(data.timerange.start);
-              var end = new Date(data.timerange.end)
-              end.setSeconds(end.getSeconds() - 1); // -1 second in case most recent event ends at midnight
-              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 %}
-                // 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({
-                dropdowns: {
-                  minYear: start.getFullYear(),
-                  maxYear: end.getFullYear(),
-                },
-              });
-            };
-          });
-        }
-      };
-
-      // Set up swiping for the left sidepanel
-      var leftSidepanels = document.getElementsByClassName('left-sidepanel');
-      document.addEventListener('swiped-right', function(e) {
-        if (e.target.classList.contains('sidepanel-container')) {
-          for (var i = leftSidepanels.length - 1; i >= 0; i--) {
-            leftSidepanels[i].classList.add('sidepanel-show');
-          }
-        }
-      });
-      document.addEventListener('swiped-left', function(e) {
-        for (var i = leftSidepanels.length - 1; i >= 0; i--) {
-          leftSidepanels[i].classList.remove('sidepanel-show');
-        }
-      });
-
-    </script>
-
     {% block leftsidepanel %} {{ super() }} {% endblock %}
+    {% block sensorChartSetup %} {{ super() }} {% endblock %}
 
 {% endblock %}
\ No newline at end of file