Fix evaluation timer on page refresh (#732)

assets/js/timer/index.js

@@ -1,3 +1,5 @@
+import { getAttributeOrThrow } from "../lib/attribute";
+
 const UPDATE_INTERVAL_MS = 100;
 
 /**
@@ -6,8 +8,10 @@ const UPDATE_INTERVAL_MS = 100;
  */
 const Timer = {
   mounted() {
+    this.props = getProps(this);
+
     this.state = {
-      start: Date.now(),
+      start: new Date(this.props.start),
       interval: null,
     };
 
@@ -28,4 +32,10 @@ const Timer = {
   },
 };
 
+function getProps(hook) {
+  return {
+    start: getAttributeOrThrow(hook.el, "data-start"),
+  };
+}
+
 export default Timer;

lib/livebook/session/data.ex

@@ -62,6 +62,7 @@ defmodule Livebook.Session.Data do
           evaluation_digest: String.t() | nil,
           evaluation_snapshot: snapshot() | nil,
           evaluation_time_ms: integer() | nil,
+          evaluation_start: DateTime.t() | nil,
           number_of_evaluations: non_neg_integer(),
           bound_to_input_ids: MapSet.t(input_id()),
           bound_input_readings: input_reading()
@@ -980,7 +981,10 @@ defmodule Livebook.Session.Data do
               evaluation_digest: nil,
               evaluation_snapshot: info.snapshot,
               bound_to_input_ids: MapSet.new(),
-              bound_input_readings: []
+              bound_input_readings: [],
+              # This is a rough estimate, the exact time is measured in the
+              # evaluator itself
+              evaluation_start: DateTime.utc_now()
           }
         end)
         |> set_section_info!(section.id, evaluating_cell_id: id, evaluation_queue: ids)
@@ -1292,6 +1296,7 @@ defmodule Livebook.Session.Data do
       evaluation_status: :ready,
       evaluation_digest: nil,
       evaluation_time_ms: nil,
+      evaluation_start: nil,
       number_of_evaluations: 0,
       bound_to_input_ids: MapSet.new(),
       bound_input_readings: [],

lib/livebook_web/live/session_live.ex

@@ -1322,6 +1322,7 @@ defmodule LivebookWeb.SessionLive do
       validity_status: info.validity_status,
       evaluation_status: info.evaluation_status,
       evaluation_time_ms: info.evaluation_time_ms,
+      evaluation_start: info.evaluation_start,
       number_of_evaluations: info.number_of_evaluations,
       reevaluate_automatically: cell.reevaluate_automatically,
       # Pass input values relevant to the given cell

lib/livebook_web/live/session_live/cell_component.ex

@@ -254,7 +254,8 @@ defmodule LivebookWeb.SessionLive.CellComponent do
       <span class="font-mono"
         id={"cell-timer-#{@cell_view.id}-evaluation-#{@cell_view.number_of_evaluations}"}
         phx-hook="Timer"
-        phx-update="ignore">
+        phx-update="ignore"
+        data-start={DateTime.to_iso8601(@cell_view.evaluation_start)}>
       </span>
     </.status_indicator>
     """