From beda60418f866584b6cdf886670a5954db1f0dce Mon Sep 17 00:00:00 2001
From: crbelaus <cristian@crbelaus.com>
Date: Wed, 26 Mar 2025 18:18:08 +0100
Subject: [PATCH 1/3] Propagate filters during navigation

When navigating from the dashboard to the error detail page we now
propagate the active filters so users can navigate back and fort without
losing them.
---
 lib/error_tracker/web/live/dashboard.ex       | 21 +++----
 .../web/live/dashboard.html.heex              |  2 +-
 lib/error_tracker/web/live/show.ex            | 57 ++++++++++---------
 lib/error_tracker/web/live/show.html.heex     |  2 +-
 lib/error_tracker/web/router/routes.ex        | 27 +++++++--
 lib/error_tracker/web/search.ex               | 24 ++++++++
 6 files changed, 85 insertions(+), 48 deletions(-)
 create mode 100644 lib/error_tracker/web/search.ex

diff --git a/lib/error_tracker/web/live/dashboard.ex b/lib/error_tracker/web/live/dashboard.ex
index da66a31..f372fed 100644
--- a/lib/error_tracker/web/live/dashboard.ex
+++ b/lib/error_tracker/web/live/dashboard.ex
@@ -7,24 +7,28 @@ defmodule ErrorTracker.Web.Live.Dashboard do
 
   alias ErrorTracker.Error
   alias ErrorTracker.Repo
+  alias ErrorTracker.Web.Search
 
   @per_page 10
 
   @impl Phoenix.LiveView
   def handle_params(params, uri, socket) do
-    {search, search_form} = search_terms(params)
-
     path = struct(URI, uri |> URI.parse() |> Map.take([:path, :query]))
 
     {:noreply,
      socket
-     |> assign(path: path, search: search, page: 1, search_form: search_form)
+     |> assign(
+       path: path,
+       search: Search.from_params(params),
+       page: 1,
+       search_form: Search.to_form(params)
+     )
      |> paginate_errors()}
   end
 
   @impl Phoenix.LiveView
   def handle_event("search", params, socket) do
-    {search, _search_form} = search_terms(params["search"] || %{})
+    search = Search.from_params(params["search"] || %{})
 
     path_w_filters = %URI{socket.assigns.path | query: URI.encode_query(search)}
 
@@ -109,15 +113,6 @@ defmodule ErrorTracker.Web.Live.Dashboard do
     )
   end
 
-  defp search_terms(params) do
-    data = %{}
-    types = %{reason: :string, source_line: :string, source_function: :string, status: :string}
-
-    changeset = Ecto.Changeset.cast({data, types}, params, Map.keys(types))
-
-    {Ecto.Changeset.apply_changes(changeset), to_form(changeset, as: :search)}
-  end
-
   defp filter(query, search) do
     Enum.reduce(search, query, &do_filter/2)
   end
diff --git a/lib/error_tracker/web/live/dashboard.html.heex b/lib/error_tracker/web/live/dashboard.html.heex
index 77474cc..b9f76ae 100644
--- a/lib/error_tracker/web/live/dashboard.html.heex
+++ b/lib/error_tracker/web/live/dashboard.html.heex
@@ -63,7 +63,7 @@
         class="border-b bg-gray-400/10 border-y border-gray-900 hover:bg-gray-800/60 last-of-type:border-b-0"
       >
         <td scope="row" class="px-4 py-4 font-medium text-white relative">
-          <.link navigate={error_path(@socket, error)} class="absolute inset-1">
+          <.link navigate={error_path(@socket, error, @search)} class="absolute inset-1">
             <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
           </.link>
           <p class="whitespace-nowrap text-ellipsis overflow-hidden">
diff --git a/lib/error_tracker/web/live/show.ex b/lib/error_tracker/web/live/show.ex
index c39d347..7a54b2e 100644
--- a/lib/error_tracker/web/live/show.ex
+++ b/lib/error_tracker/web/live/show.ex
@@ -7,41 +7,40 @@ defmodule ErrorTracker.Web.Live.Show do
   alias ErrorTracker.Error
   alias ErrorTracker.Occurrence
   alias ErrorTracker.Repo
+  alias ErrorTracker.Web.Search
 
   @occurrences_to_navigate 50
 
   @impl Phoenix.LiveView
-  def mount(%{"id" => id}, _session, socket) do
+  def mount(params = %{"id" => id}, _session, socket) do
     error = Repo.get!(Error, id)
-    {:ok, assign(socket, error: error, app: Application.fetch_env!(:error_tracker, :otp_app))}
+
+    {:ok,
+     assign(socket,
+       error: error,
+       app: Application.fetch_env!(:error_tracker, :otp_app),
+       search: Search.from_params(params)
+     )}
   end
 
   @impl Phoenix.LiveView
-  def handle_params(%{"occurrence_id" => occurrence_id}, _uri, socket) do
+  def handle_params(params, _uri, socket) do
     occurrence =
-      socket.assigns.error
-      |> Ecto.assoc(:occurrences)
-      |> Repo.get!(occurrence_id)
-
-    socket =
-      socket
-      |> assign(:occurrence, occurrence)
-      |> load_related_occurrences()
-
-    {:noreply, socket}
-  end
-
-  def handle_params(_, _uri, socket) do
-    [occurrence] =
-      socket.assigns.error
-      |> Ecto.assoc(:occurrences)
-      |> order_by([o], desc: o.id)
-      |> limit(1)
-      |> Repo.all()
+      if occurrence_id = params["occurrence_id"] do
+        socket.assigns.error
+        |> Ecto.assoc(:occurrences)
+        |> Repo.get!(occurrence_id)
+      else
+        socket.assigns.error
+        |> Ecto.assoc(:occurrences)
+        |> order_by([o], desc: o.id)
+        |> limit(1)
+        |> Repo.one()
+      end
 
     socket =
       socket
-      |> assign(:occurrence, occurrence)
+      |> assign(occurrence: occurrence)
       |> load_related_occurrences()
 
     {:noreply, socket}
@@ -49,10 +48,14 @@ defmodule ErrorTracker.Web.Live.Show do
 
   @impl Phoenix.LiveView
   def handle_event("occurrence_navigation", %{"occurrence_id" => id}, socket) do
-    {:noreply,
-     push_patch(socket,
-       to: occurrence_path(socket, %Occurrence{error_id: socket.assigns.error.id, id: id})
-     )}
+    occurrence_path =
+      occurrence_path(
+        socket,
+        %Occurrence{error_id: socket.assigns.error.id, id: id},
+        socket.assigns.search
+      )
+
+    {:noreply, push_patch(socket, to: occurrence_path)}
   end
 
   @impl Phoenix.LiveView
diff --git a/lib/error_tracker/web/live/show.html.heex b/lib/error_tracker/web/live/show.html.heex
index c72ddb4..38e1b42 100644
--- a/lib/error_tracker/web/live/show.html.heex
+++ b/lib/error_tracker/web/live/show.html.heex
@@ -1,5 +1,5 @@
 <div class="my-6">
-  <.button type="link" href={dashboard_path(@socket)}>« Back to the dashboard</.button>
+  <.button type="link" href={dashboard_path(@socket, @search)}>« Back to the dashboard</.button>
 </div>
 
 <div id="header">
diff --git a/lib/error_tracker/web/router/routes.ex b/lib/error_tracker/web/router/routes.ex
index a2e7dd4..696ca0e 100644
--- a/lib/error_tracker/web/router/routes.ex
+++ b/lib/error_tracker/web/router/routes.ex
@@ -8,21 +8,36 @@ defmodule ErrorTracker.Web.Router.Routes do
   @doc """
   Returns the dashboard path
   """
-  def dashboard_path(socket = %Socket{}) do
-    socket.private[:dashboard_path]
+  def dashboard_path(socket = %Socket{}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.to_string()
   end
 
   @doc """
   Returns the path to see the details of an error
   """
-  def error_path(socket = %Socket{}, %Error{id: id}) do
-    dashboard_path(socket) <> "/#{id}"
+  def error_path(socket = %Socket{}, %Error{id: id}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.append_path("/#{id}")
+    |> URI.to_string()
   end
 
   @doc """
   Returns the path to see the details of an occurrence
   """
-  def occurrence_path(socket = %Socket{}, %Occurrence{id: id, error_id: error_id}) do
-    dashboard_path(socket) <> "/#{error_id}/#{id}"
+  def occurrence_path(socket = %Socket{}, %Occurrence{id: id, error_id: error_id}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.append_path("/#{error_id}/#{id}")
+    |> URI.to_string()
+  end
+
+  defp dashboard_uri(socket = %Socket{}, params) do
+    %URI{
+      path: socket.private[:dashboard_path],
+      query: if(Enum.any?(params), do: URI.encode_query(params))
+    }
   end
 end
diff --git a/lib/error_tracker/web/search.ex b/lib/error_tracker/web/search.ex
new file mode 100644
index 0000000..c5939d4
--- /dev/null
+++ b/lib/error_tracker/web/search.ex
@@ -0,0 +1,24 @@
+defmodule ErrorTracker.Web.Search do
+  @moduledoc false
+
+  @types %{
+    reason: :string,
+    source_line: :string,
+    source_function: :string,
+    status: :string
+  }
+
+  defp changeset(params) do
+    Ecto.Changeset.cast({%{}, @types}, params, Map.keys(@types))
+  end
+
+  @spec from_params(map()) :: %{atom() => String.t()}
+  def from_params(params) do
+    params |> changeset() |> Ecto.Changeset.apply_changes()
+  end
+
+  @spec to_form(map()) :: Phoenix.HTML.Form.t()
+  def to_form(params) do
+    params |> changeset() |> Phoenix.Component.to_form(as: :search)
+  end
+end

From c4fc3c05cbaed3c3475ebbf289e650f0cb471d0b Mon Sep 17 00:00:00 2001
From: crbelaus <cristian@crbelaus.com>
Date: Thu, 27 Mar 2025 09:37:34 +0100
Subject: [PATCH 2/3] Navigate to next and prev occurrence

This commit adds next/prev navigation links between occurrences. This
can be used in addition to the occurrence selector which has been
present since the beginning.
---
 .../web/components/core_components.ex         | 36 ++++++++++++++++++-
 lib/error_tracker/web/live/show.ex            | 18 ++++++++++
 lib/error_tracker/web/live/show.html.heex     | 13 +++++++
 priv/static/app.css                           | 17 +++++++++
 4 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/lib/error_tracker/web/components/core_components.ex b/lib/error_tracker/web/components/core_components.ex
index 4943c16..12eb26d 100644
--- a/lib/error_tracker/web/components/core_components.ex
+++ b/lib/error_tracker/web/components/core_components.ex
@@ -131,7 +131,7 @@ defmodule ErrorTracker.Web.CoreComponents do
     """
   end
 
-  attr :name, :string, values: ~w[bell bell-slash]
+  attr :name, :string, values: ~w[bell bell-slash arrow-left arrow-right]
 
   def icon(assigns = %{name: "bell"}) do
     ~H"""
@@ -167,4 +167,38 @@ defmodule ErrorTracker.Web.CoreComponents do
     </svg>
     """
   end
+
+  def icon(assigns = %{name: "arrow-left"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M14 8a.75.75 0 0 1-.75.75H4.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 1.06L4.56 7.25h8.69A.75.75 0 0 1 14 8Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
+
+  def icon(assigns = %{name: "arrow-right"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
 end
diff --git a/lib/error_tracker/web/live/show.ex b/lib/error_tracker/web/live/show.ex
index 7a54b2e..93ebaff 100644
--- a/lib/error_tracker/web/live/show.ex
+++ b/lib/error_tracker/web/live/show.ex
@@ -126,9 +126,27 @@ defmodule ErrorTracker.Web.Live.Show do
       |> Ecto.assoc(:occurrences)
       |> Repo.aggregate(:count)
 
+    next_occurrence =
+      base_query
+      |> where([o], o.id > ^current_occurrence.id)
+      |> order_by([o], asc: o.id)
+      |> limit(1)
+      |> select([:id, :error_id, :inserted_at])
+      |> Repo.one()
+
+    prev_occurrence =
+      base_query
+      |> where([o], o.id < ^current_occurrence.id)
+      |> order_by([o], desc: o.id)
+      |> limit(1)
+      |> select([:id, :error_id, :inserted_at])
+      |> Repo.one()
+
     socket
     |> assign(:occurrences, occurrences)
     |> assign(:total_occurrences, total_occurrences)
+    |> assign(:next, next_occurrence)
+    |> assign(:prev, prev_occurrence)
   end
 
   defp related_occurrences(query, num_results) do
diff --git a/lib/error_tracker/web/live/show.html.heex b/lib/error_tracker/web/live/show.html.heex
index 38e1b42..ef2b040 100644
--- a/lib/error_tracker/web/live/show.html.heex
+++ b/lib/error_tracker/web/live/show.html.heex
@@ -97,6 +97,19 @@
           </option>
         </select>
       </form>
+
+      <nav class="grid grid-cols-2 gap-2 mt-2">
+        <div class="text-left">
+          <.link :if={@prev} patch={occurrence_path(@socket, @prev, @search)}>
+            <.icon name="arrow-left" /> Prev
+          </.link>
+        </div>
+        <div class="text-right">
+          <.link :if={@next} patch={occurrence_path(@socket, @next, @search)}>
+            Next <.icon name="arrow-right" />
+          </.link>
+        </div>
+      </nav>
     </.section>
 
     <.section title="Error kind">
diff --git a/priv/static/app.css b/priv/static/app.css
index e9294f1..706e0a2 100644
--- a/priv/static/app.css
+++ b/priv/static/app.css
@@ -766,6 +766,10 @@ select {
   border-width: 0;
 }
 
+.static {
+  position: static;
+}
+
 .absolute {
   position: absolute;
 }
@@ -841,6 +845,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -873,6 +881,11 @@ select {
   display: none;
 }
 
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
 .\!h-4 {
   height: 1rem !important;
 }
@@ -925,6 +938,10 @@ select {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }

From 55c6994366c9f92da4c05602a475108bec2a7806 Mon Sep 17 00:00:00 2001
From: crbelaus <cristian@crbelaus.com>
Date: Thu, 27 Mar 2025 11:03:19 +0100
Subject: [PATCH 3/3] Use LiveView navigation to go back to the dashboard

Since both the dashboard and the error page are in the same live_session
we can navigate between them using LiveView navigation instead of
triggering a full page reload. This is more efficient as we don't need
to negotiate TLS and fetch assets again.
---
 lib/error_tracker/web/live/show.html.heex | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/error_tracker/web/live/show.html.heex b/lib/error_tracker/web/live/show.html.heex
index ef2b040..0fe6a72 100644
--- a/lib/error_tracker/web/live/show.html.heex
+++ b/lib/error_tracker/web/live/show.html.heex
@@ -1,5 +1,7 @@
 <div class="my-6">
-  <.button type="link" href={dashboard_path(@socket, @search)}>« Back to the dashboard</.button>
+  <.link navigate={dashboard_path(@socket, @search)}>
+    <.icon name="arrow-left" /> Back to the dashboard
+  </.link>
 </div>
 
 <div id="header">