Use assign instead of assign_async for pages breakdown query result (#5989)

* Use `assign` instead of `assign_async` for pages breakdown query result

* fix imported warning

* Ensure `handle_params` is triggered only once per navigation event

---------

Co-authored-by: Robert Joonas <robertjoonas16@gmail.com>

Author: zoldar

assets/js/liveview/dashboard_root.js

@@ -21,17 +21,15 @@ function navigateWithLoader(url) {
 
 export default buildHook({
   initialize() {
-    this.url = window.location.href
-
     const portals = document.querySelectorAll('[data-phx-portal]')
     this.portalTargets = Array.from(portals, (p) => p.dataset.phxPortal)
+    this.url = window.location.href
 
     this.addListener('click', document.body, (e) => {
       const type = e.target.dataset.type || null
 
       if (type === 'dashboard-link') {
-        this.url = e.target.href
-        const uri = new URL(this.url)
+        const uri = new URL(e.target.href)
         // Domain is dropped from URL prefix, because that's what react-dom-router
         // expects.
         const path = '/' + uri.pathname.split('/').slice(2).join('/')
@@ -42,8 +40,6 @@ export default buildHook({
           })
         )
 
-        navigateWithLoader.bind(this)(this.url)
-
         e.preventDefault()
       }
     })

lib/plausible_web/live/components/dashboard/imported_data_warnings.ex

@@ -2,13 +2,12 @@ defmodule PlausibleWeb.Components.Dashboard.ImportedDataWarnings do
   @moduledoc false
 
   use PlausibleWeb, :component
-  alias Phoenix.LiveView.AsyncResult
   alias Plausible.Stats.QueryResult
 
   def unsupported_filters(assigns) do
     show? =
       case assigns.query_result do
-        %AsyncResult{result: %QueryResult{meta: meta}} ->
+        %QueryResult{meta: meta} ->
           meta[:imports_skip_reason] == :unsupported_query
 
         _ ->

lib/plausible_web/live/components/dashboard/report_list.ex

@@ -30,52 +30,47 @@ defmodule PlausibleWeb.Components.Dashboard.ReportList do
         col_min_width: @col_min_width
       )
 
-    if assigns.query_result.loading || !assigns.query_result.ok? do
-      ~H"""
-      """
-    else
-      %QueryResult{results: results, meta: meta, query: query} = assigns.query_result.result
-
-      assigns =
-        assign(assigns,
-          results: results,
-          metric_keys: query[:metrics],
-          metric_labels: meta[:metric_labels],
-          empty?: Enum.empty?(results)
-        )
-
-      ~H"""
-      <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} />
-
-      <div :if={not @empty?} class="h-full flex flex-col" data-test-id={@data_test_id}>
-        <div style={"min-height: #{@row_height}px;"}>
-          <.report_header
-            key_label={@key_label}
-            metric_labels={@metric_labels}
-            col_min_width={@col_min_width}
-          />
-        </div>
+    %QueryResult{results: results, meta: meta, query: query} = assigns.query_result
 
-        <div class="grow" style={"min-height: #{@data_container_height}px;"}>
-          <.report_row
-            :for={{item, item_index} <- Enum.with_index(@results)}
-            link_fn={assigns[:external_link_fn]}
-            item={item}
-            item_index={item_index}
-            item_name={List.first(item.dimensions)}
-            metrics={Enum.zip(@metric_keys, item.metrics)}
-            bar_max_value={bar_max_value(@results, @metric_keys)}
-            site={@site}
-            params={@params}
-            dimension={@dimension}
-            row_height={@row_height}
-            row_gap_height={@row_gap_height}
-            col_min_width={@col_min_width}
-          />
-        </div>
+    assigns =
+      assign(assigns,
+        results: results,
+        metric_keys: query[:metrics],
+        metric_labels: meta[:metric_labels],
+        empty?: Enum.empty?(results)
+      )
+
+    ~H"""
+    <.no_data :if={@empty?} min_height={@min_height} data_test_id={@data_test_id} />
+
+    <div :if={not @empty?} class="h-full flex flex-col" data-test-id={@data_test_id}>
+      <div style={"min-height: #{@row_height}px;"}>
+        <.report_header
+          key_label={@key_label}
+          metric_labels={@metric_labels}
+          col_min_width={@col_min_width}
+        />
       </div>
-      """
-    end
+
+      <div class="grow" style={"min-height: #{@data_container_height}px;"}>
+        <.report_row
+          :for={{item, item_index} <- Enum.with_index(@results)}
+          link_fn={assigns[:external_link_fn]}
+          item={item}
+          item_index={item_index}
+          item_name={List.first(item.dimensions)}
+          metrics={Enum.zip(@metric_keys, item.metrics)}
+          bar_max_value={bar_max_value(@results, @metric_keys)}
+          site={@site}
+          params={@params}
+          dimension={@dimension}
+          row_height={@row_height}
+          row_gap_height={@row_gap_height}
+          col_min_width={@col_min_width}
+        />
+      </div>
+    </div>
+    """
   end
 
   defp no_data(assigns) do

lib/plausible_web/live/dashboard/pages.ex

@@ -105,24 +105,22 @@ defmodule PlausibleWeb.Live.Dashboard.Pages do
   defp load_stats(socket) do
     %{active_tab: active_tab, site: site, params: params} = socket.assigns
 
-    assign_async(socket, :query_result, fn ->
-      metrics = choose_metrics(params)
-      dimension = get_tab_info(active_tab, :dimension)
-
-      params =
-        params
-        |> ParsedQueryParams.set(
-          metrics: metrics,
-          dimensions: [dimension],
-          pagination: @pagination
-        )
+    metrics = choose_metrics(params)
+    dimension = get_tab_info(active_tab, :dimension)
+
+    params =
+      params
+      |> ParsedQueryParams.set(
+        metrics: metrics,
+        dimensions: [dimension],
+        pagination: @pagination
+      )
 
-      query = QueryBuilder.build!(site, params)
+    query = QueryBuilder.build!(site, params)
 
-      %QueryResult{} = query_result = Stats.query(site, query)
+    %QueryResult{} = query_result = Stats.query(site, query)
 
-      {:ok, %{query_result: query_result}}
-    end)
+    assign(socket, :query_result, query_result)
   end
 
   defp choose_metrics(%ParsedQueryParams{} = params) do

test/plausible_web/live/components/dashboard/report_list_test.exs

@@ -4,7 +4,6 @@ defmodule PlausibleWeb.Components.Dashboard.ReportListTest do
 
   alias PlausibleWeb.Components.Dashboard.ReportList
   alias Plausible.Stats.{ParsedQueryParams, QueryResult}
-  alias Phoenix.LiveView.AsyncResult
   import Plausible.DashboardTestUtils
 
   @report_list_selector ~s|[data-test-id="pages-report-list"]|
@@ -23,31 +22,19 @@ defmodule PlausibleWeb.Components.Dashboard.ReportListTest do
     {:ok, %{assigns: assigns}}
   end
 
-  test "renders empty when loading", %{assigns: assigns} do
-    assigns = Keyword.put(assigns, :query_result, AsyncResult.loading())
-    assert render_component(&ReportList.report/1, assigns) == ""
-  end
-
-  test "renders empty when result not ok", %{assigns: assigns} do
-    assigns =
-      Keyword.put(assigns, :query_result, AsyncResult.failed(AsyncResult.loading(), :some_error))
-
-    assert render_component(&ReportList.report/1, assigns) == ""
-  end
-
   test "item bar width depends on visitors metric", %{assigns: assigns} do
-    successful_async_result =
-      AsyncResult.ok(%QueryResult{
+    query_result =
+      %QueryResult{
         results: [
           %{metrics: [100, 60.0], dimensions: ["/a"]},
           %{metrics: [70, 40.0], dimensions: ["/b"]},
           %{metrics: [30, 20.0], dimensions: ["/c"]}
         ],
         meta: Jason.OrderedObject.new(metric_labels: ["Conversions", "CR"]),
         query: Jason.OrderedObject.new(metrics: [:visitors, :conversion_rate])
-      })
+      }
 
-    assigns = Keyword.put(assigns, :query_result, successful_async_result)
+    assigns = Keyword.put(assigns, :query_result, query_result)
 
     html = render_component(&ReportList.report/1, assigns)