Task: Limit refreshed callback traces (#181)

* dev-example: move big messages to other live view in

* limit refreshed traces

dev/components.ex

@@ -4,7 +4,8 @@ defmodule LiveDebuggerDev.Components do
   @routes [
     {"/", "Main"},
     {"/side", "Side"},
-    {"/nested", "Nested"}
+    {"/nested", "Nested"},
+    {"/messages", "Messages"}
   ]
 
   attr(:routes, :list, default: @routes)
@@ -40,6 +41,19 @@ defmodule LiveDebuggerDev.Components do
     """
   end
 
+  attr(:color, :string, default: "green")
+  attr(:rest, :global)
+
+  slot(:inner_block, required: true)
+
+  def button(assigns) do
+    ~H"""
+    <button class={"#{background_color(@color)} text-white py-1 px-2 rounded"} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
   defp text_color("blue"), do: "text-blue-500"
   defp text_color("red"), do: "text-red-500"
   defp text_color("green"), do: "text-green-500"
@@ -57,4 +71,13 @@ defmodule LiveDebuggerDev.Components do
   defp border_color("teal"), do: "border-teal-500"
   defp border_color("orange"), do: "border-orange-500"
   defp border_color("yellow"), do: "border-yellow-500"
+
+  defp background_color("blue"), do: "bg-blue-500"
+  defp background_color("red"), do: "bg-red-500"
+  defp background_color("green"), do: "bg-green-500"
+  defp background_color("purple"), do: "bg-purple-500"
+  defp background_color("gray"), do: "bg-gray-500"
+  defp background_color("teal"), do: "bg-teal-500"
+  defp background_color("orange"), do: "bg-orange-500"
+  defp background_color("yellow"), do: "bg-yellow-500"
 end

dev/live_components/conditional.ex

@@ -13,13 +13,9 @@ defmodule LiveDebuggerDev.LiveComponents.Conditional do
       <.box title="Conditional [LiveComponent]" color="orange">
         <div class="flex flex-col gap-2">
           <div class="flex items-center gap-1">
-            <button
-              phx-click="show_child"
-              phx-target={@myself}
-              class="bg-orange-500 text-white py-1 px-2 rounded"
-            >
+            <.button phx-click="show_child" phx-target={@myself} color="orange">
               Show
-            </button>
+            </.button>
 
             <span>child LiveComponent below</span>
           </div>

dev/live_components/send.ex

@@ -9,13 +9,9 @@ defmodule LiveDebuggerDev.LiveComponents.Send do
       <.box title="Send [LiveComponent]" color="green">
         <div class="flex flex-col gap-2">
           <div class="flex items-center gap-1">
-            <button
-              phx-click="send_message"
-              phx-target={@myself}
-              class="bg-green-500 text-white py-1 px-2 rounded"
-            >
+            <.button phx-click="send_message" phx-target={@myself} color="green">
               Send
-            </button>
+            </.button>
 
             <span>
               a message to parent

dev/live_views/main.ex

@@ -22,15 +22,15 @@ defmodule LiveDebuggerDev.LiveViews.Main do
       <.box title="Main [LiveView]" color="blue">
         <div class="flex flex-col gap-2">
           <div class="flex items-center gap-2">
-            <button phx-click="increment" class="bg-blue-500 text-white py-1 px-2 rounded">
+            <.button phx-click="increment" color="blue">
               Increment
-            </button>
+            </.button>
             <span class="text-xl"><%= @counter %></span>
           </div>
           <div class="flex items-center gap-1">
-            <button phx-click="change_name" class="bg-red-500 text-white py-1 px-2 rounded">
+            <.button phx-click="change_name" color="red">
               Update
-            </button>
+            </.button>
             <div>
               variable shared with <span class="text-red-500">first component</span>
               - favorite person:

dev/live_views/messages.ex

@@ -0,0 +1,44 @@
+defmodule LiveDebuggerDev.LiveViews.Messages do
+  use DevWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <div class="p-5">
+      <.navbar />
+      <.box title="Messages [LiveView]" color="purple">
+        <div>
+          <.button phx-click="big-message" color="purple">Send big message</.button>
+        </div>
+      </.box>
+    </div>
+    """
+  end
+
+  def handle_event("big-message", _, socket) do
+    send(self(), very_big_message())
+    {:noreply, socket}
+  end
+
+  def handle_info(_, socket) do
+    {:noreply, socket}
+  end
+
+  defp very_big_message() do
+    part = %{
+      list: [1, 2, 3, 4],
+      map: %{a: 1, b: 2},
+      keyword: [a: 1, b: 2],
+      tuple: {1, 2},
+      string: "string",
+      atom: :some_atom,
+      number: 42.12,
+      boolean: true,
+      nil: nil,
+      pid: self()
+    }
+
+    Enum.reduce(1..1000, %{}, fn i, acc ->
+      Map.put(acc, i, part)
+    end)
+  end
+end

dev/live_views/side.ex

@@ -7,7 +7,7 @@ defmodule LiveDebuggerDev.LiveViews.Side do
     Task.start(fn ->
       for _ <- 1..100_000 do
         Process.sleep(8)
-        send(current_pid, very_big_message())
+        send(current_pid, :hello)
       end
     end)
 
@@ -25,26 +25,7 @@ defmodule LiveDebuggerDev.LiveViews.Side do
     """
   end
 
-  def handle_info(_, socket) do
+  def handle_info(:hello, socket) do
     {:noreply, socket}
   end
-
-  defp very_big_message() do
-    part = %{
-      list: [1, 2, 3, 4],
-      map: %{a: 1, b: 2},
-      keyword: [a: 1, b: 2],
-      tuple: {1, 2},
-      string: "string",
-      atom: :some_atom,
-      number: 42.12,
-      boolean: true,
-      nil: nil,
-      pid: self()
-    }
-
-    Enum.reduce(1..100, %{}, fn i, acc ->
-      Map.put(acc, i, part)
-    end)
-  end
 end

dev/router.ex

@@ -15,5 +15,6 @@ defmodule LiveDebuggerDev.Router do
     live("/", LiveDebuggerDev.LiveViews.Main)
     live("/side", LiveDebuggerDev.LiveViews.Side)
     live("/nested", LiveDebuggerDev.LiveViews.Nested)
+    live("/messages", LiveDebuggerDev.LiveViews.Messages)
   end
 end

lib/live_debugger/live_components/traces_list.ex

@@ -335,7 +335,7 @@ defmodule LiveDebugger.LiveComponents.TracesList do
     |> assign(:existing_traces_status, :loading)
     |> stream(:existing_traces, [], reset: true)
     |> start_async(:fetch_existing_traces, fn ->
-      TraceService.existing_traces(ets_table_id, node_id)
+      TraceService.existing_traces(ets_table_id, node_id, @stream_limit)
     end)
   end
 end

lib/live_debugger/services/trace_service.ex

@@ -70,18 +70,33 @@ defmodule LiveDebugger.Services.TraceService do
   end
 
   @doc """
-  Returns all existing traces for the given table id and CID or PID.
+  Returns existing traces for the given table id and CID or PID.
+  It returns up to `limit` traces.
   """
-  @spec existing_traces(atom(), pid() | CommonTypes.cid()) :: [Trace.t()]
-  def existing_traces(table_id, %CID{} = cid) do
-    table_id |> maybe_init_ets() |> :ets.match_object({:_, %{cid: cid}}) |> Enum.map(&elem(&1, 1))
-  end
+  @spec existing_traces(atom(), pid() | CommonTypes.cid(), pos_integer()) :: [Trace.t()]
+  def existing_traces(table_id, id, limit) when limit >= 1 do
+    matcher =
+      cond do
+        is_pid(id) ->
+          {:_, %{pid: id, cid: nil}}
+
+        match?(%CID{}, id) ->
+          {:_, %{cid: id}}
+
+        true ->
+          raise ArgumentError, "id must be either PID or CID"
+      end
 
-  def existing_traces(table_id, pid) when is_pid(pid) do
     table_id
     |> maybe_init_ets()
-    |> :ets.match_object({:_, %{pid: pid, cid: nil}})
-    |> Enum.map(&elem(&1, 1))
+    |> :ets.match_object(matcher, limit)
+    |> case do
+      {entries, _cont} ->
+        Enum.map(entries, &elem(&1, 1))
+
+      _ ->
+        []
+    end
   end
 
   @doc """