feat: progress bar for next batch (#1631)

Co-authored-by: Urix <[email protected]>
Co-authored-by: Marcos Nicolau <[email protected]>
Co-authored-by: PatStiles <[email protected]>
Co-authored-by: Avila Gastón <[email protected]>
Co-authored-by: Marcos Nicolau <[email protected]>
Co-authored-by: nicolau <[email protected]>

Author: 5 people

explorer/.env.dev

@@ -25,3 +25,6 @@ MAX_BATCH_SIZE=268435456 # 256 MiB
 
 # Time we wait for a batch to be verified before marking it stale
 BATCH_TTL_MINUTES=5
+
+# Scheduled minutes between batch submissions. This is shown in the next batch progress bar component.
+SCHEDULED_BATCH_INTERVAL_MINUTES=10

explorer/.env.example

@@ -23,3 +23,6 @@ TRACKER_API_URL=<tracker_api_url>
 
 # Time we wait for a batch to be verified before marking it stale
 BATCH_TTL_MINUTES=5
+
+# Scheduled minutes between batch submissions. This is shown in the next batch progress bar component.
+SCHEDULED_BATCH_INTERVAL_MINUTES=360

explorer/assets/vendor/charts/tooltip.js

@@ -106,7 +106,7 @@ export const alignedTooltip = (
 	const position = context.chart.canvas.getBoundingClientRect();
 
 	tooltipEl.style.opacity = 1;
-	tooltipEl.style.zIndex = 1;
+	tooltipEl.style.zIndex = 100;
 	tooltipEl.style.position = "absolute";
 	tooltipEl.style.left =
 		position.left -

explorer/lib/explorer/models/batches.ex

@@ -76,6 +76,16 @@ defmodule Batches do
     Explorer.Repo.one(query)
   end
 
+  def get_latest_verified_batch() do
+    query = from(b in Batches,
+      order_by: [desc: b.submission_block_number],
+      limit: 1,
+      where: b.is_verified,
+      select: b)
+
+    Explorer.Repo.one(query)
+  end
+
   def get_latest_batches(%{amount: amount} = %{order_by: :desc}) do
     query = from(b in Batches,
       order_by: [desc: b.submission_block_number],

explorer/lib/explorer/periodically.ex

@@ -16,6 +16,7 @@ defmodule Explorer.Periodically do
     one_second = 1000
     seconds_in_an_hour = 60 * 60
 
+    :timer.send_interval(one_second * 60, :next_batch_progress) # every minute
     :timer.send_interval(one_second * 12, :batches) # every 12 seconds, once per block
     :timer.send_interval(one_second * seconds_in_an_hour, :restakings) # every 1 hour
   end
@@ -34,6 +35,18 @@ defmodule Explorer.Periodically do
     {:noreply, %{state | restakings_last_read_block: latest_block_number}}
   end
 
+  def handle_info(:next_batch_progress, state) do
+    Logger.debug("handling block progress timer")
+    remaining_time =  ExplorerWeb.Helpers.get_next_scheduled_batch_remaining_time()
+    PubSub.broadcast(Explorer.PubSub, "update_views", %{
+      next_scheduled_batch_remaining_time_percentage:
+        ExplorerWeb.Helpers.get_next_scheduled_batch_remaining_time_percentage(remaining_time),
+      next_scheduled_batch_remaining_time: remaining_time
+    }) 
+      
+    {:noreply, state}
+  end
+
   # Reads and process last n blocks for new batches or batch changes
   def handle_info(:batches, state) do
     count = Map.get(state, :batches_count)

explorer/lib/explorer_web/components/labeled_progress_bar.ex

@@ -0,0 +1,30 @@
+defmodule LabeledProgressBarComponent do
+  use ExplorerWeb, :live_component
+
+  attr(:percent_progress, :float, required: true)
+  attr(:label, :string, required: true)
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="w-full relative weight-700 rounded-lg">
+      <div class="w-full bg-accent/30 rounded-2xl">
+        <p class="ml-2 normal-case text-center relative text-accent-foreground font-bold z-10">
+          <%= @label %>
+        </p>
+      </div>
+      <div
+        class="top-0 left-0 h-full bg-accent p-1 rounded-2xl absolute transition-all"
+        style={"width: #{@percent_progress}%"}
+      >
+      </div>
+    </div>
+    """
+  end
+
+  def update_assigns(assigns, socket) do
+    progress = assigns[:percent_progress] || 0
+    label = assigns[:label] || ""
+    {:ok, assign(socket, percent_progress: progress, label: label)}
+  end
+end

explorer/lib/explorer_web/live/pages/batches/index.ex

@@ -10,15 +10,21 @@ defmodule ExplorerWeb.Batches.Index do
   def mount(params, _, socket) do
     current_page = get_current_page(params)
 
-    batches = Batches.get_paginated_batches(%{page: current_page, page_size: @page_size})
-    |> Helpers.enrich_batches()
+    batches =
+      Batches.get_paginated_batches(%{page: current_page, page_size: @page_size})
+      |> Helpers.enrich_batches()
 
     if connected?(socket), do: PubSub.subscribe(Explorer.PubSub, "update_views")
 
+    remaining_time = Helpers.get_next_scheduled_batch_remaining_time()
+
     {:ok,
      assign(socket,
        current_page: current_page,
        batches: batches,
+       next_scheduled_batch_remaining_time_percentage:
+         Helpers.get_next_scheduled_batch_remaining_time_percentage(remaining_time),
+       next_scheduled_batch_remaining_time: remaining_time,
        last_page: Batches.get_last_page(@page_size),
        page_title: "Batches"
      )}
@@ -28,10 +34,20 @@ defmodule ExplorerWeb.Batches.Index do
   def handle_info(_, socket) do
     current_page = socket.assigns.current_page
 
-    batches = Batches.get_paginated_batches(%{page: current_page, page_size: @page_size})
-    |> Helpers.enrich_batches()
+    batches =
+      Batches.get_paginated_batches(%{page: current_page, page_size: @page_size})
+      |> Helpers.enrich_batches()
+
+    remaining_time = Helpers.get_next_scheduled_batch_remaining_time()
 
-    {:noreply, assign(socket, batches: batches, last_page: Batches.get_last_page(@page_size))}
+    {:noreply,
+     assign(socket,
+       batches: batches,
+       next_scheduled_batch_remaining_time_percentage:
+         Helpers.get_next_scheduled_batch_remaining_time_percentage(remaining_time),
+       next_scheduled_batch_remaining_time: remaining_time,
+       last_page: Batches.get_last_page(@page_size)
+     )}
   end
 
   @impl true
@@ -55,5 +71,5 @@ defmodule ExplorerWeb.Batches.Index do
     end
   end
 
-  embed_templates "*"
+  embed_templates("*")
 end

explorer/lib/explorer_web/live/pages/batches/index.html.heex

@@ -1,5 +1,16 @@
 <div class="flex flex-col space-y-3 text-foreground px-1 sm:max-w-lg md:max-w-3xl lg:max-w-5xl mx-auto capitalize">
   <.card_preheding>Batches</.card_preheding>
+  <!-- Progress bar based on https://dev.to/mikekennedydev/progress-bar-text-colour-1gg6 -->
+  <.live_component
+  id="labeled-progress-bar"
+  module={LabeledProgressBarComponent}
+  percent_progress={@next_scheduled_batch_remaining_time_percentage}
+  label={
+    case @next_scheduled_batch_remaining_time do
+      0 -> "Next batch is around the corner!"
+      time -> "Next batch in #{time} minutes" 
+    end
+  }/>
   <%= if @batches != :empty and @batches != [] do %>
     <.card_background class="w-full overflow-x-auto sm:col-span-2">
       <.batches_table batches={@batches} />

explorer/lib/explorer_web/live/pages/home/index.ex

@@ -155,29 +155,36 @@ defmodule ExplorerWeb.Home.Index do
       stats: [],
       latest_batches: [],
       cost_per_proof_chart: %{points: [], extra_data: %{}},
-      batch_size_chart_data: %{points: [], extra_data: %{}}
+      batch_size_chart_data: %{points: [], extra_data: %{}},
+      next_scheduled_batch_remaining_time_percentage: 0,
+      next_scheduled_batch_remaining_time: 0
     )
   end
 
   @impl true
   def handle_info(_, socket) do
     latest_batches = Batches.get_latest_batches(%{amount: 10, order_by: :desc})
     charts_query_limit = 20
+    remaining_time = Helpers.get_next_scheduled_batch_remaining_time()
 
     {:noreply,
      assign(
        socket,
        stats: get_stats(),
        latest_batches: latest_batches,
        cost_per_proof_chart: get_cost_per_proof_chart_data(charts_query_limit),
-       batch_size_chart_data: get_batch_size_chart_data(charts_query_limit)
+       batch_size_chart_data: get_batch_size_chart_data(charts_query_limit),
+       next_scheduled_batch_remaining_time_percentage:
+         Helpers.get_next_scheduled_batch_remaining_time_percentage(remaining_time),
+       next_scheduled_batch_remaining_time: remaining_time
      )}
   end
 
   @impl true
   def mount(_, _, socket) do
     latest_batches = Batches.get_latest_batches(%{amount: 10, order_by: :desc})
     charts_query_limit = 20
+    remaining_time = Helpers.get_next_scheduled_batch_remaining_time()
 
     if connected?(socket), do: Phoenix.PubSub.subscribe(Explorer.PubSub, "update_views")
 
@@ -187,6 +194,9 @@ defmodule ExplorerWeb.Home.Index do
        latest_batches: latest_batches,
        cost_per_proof_chart: get_cost_per_proof_chart_data(charts_query_limit),
        batch_size_chart_data: get_batch_size_chart_data(charts_query_limit),
+       next_scheduled_batch_remaining_time_percentage:
+         Helpers.get_next_scheduled_batch_remaining_time_percentage(remaining_time),
+       next_scheduled_batch_remaining_time: remaining_time,
        page_title: "Welcome"
      )}
   rescue

explorer/lib/explorer_web/live/pages/home/index.html.heex

@@ -31,6 +31,16 @@
         </div>
       <% end %>
     </.card_background>
+    <.live_component
+    id="labeled-progress-bar"
+    module={LabeledProgressBarComponent}
+    percent_progress={@next_scheduled_batch_remaining_time_percentage}
+    label={
+      case @next_scheduled_batch_remaining_time do
+        0 -> "Next batch is around the corner!"
+        time -> "Next batch in #{time} minutes" 
+      end
+    }/>
     <div class="flex flex-wrap md:flex-row flex-col gap-5">
       <.card
         title="Cost per proof"