Task: Add link in global traces view to preview given node

lib/live_debugger_web/helpers/routes_helper.ex

@@ -5,13 +5,36 @@ defmodule LiveDebuggerWeb.Helpers.RoutesHelper do
 
   use Phoenix.VerifiedRoutes, endpoint: LiveDebuggerWeb.Endpoint, router: LiveDebuggerWeb.Router
 
+  alias LiveDebugger.CommonTypes
   alias LiveDebugger.Utils.Parsers
 
   @spec live_views_dashboard() :: String.t()
   def live_views_dashboard() do
     ~p"/"
   end
 
+  @spec channel_dashboard(pid :: pid() | String.t(), cid :: CommonTypes.cid() | String.t() | nil) ::
+          String.t()
+  def channel_dashboard(pid, nil) do
+    channel_dashboard(pid)
+  end
+
+  def channel_dashboard(pid, cid) do
+    pid =
+      cond do
+        is_pid(pid) -> Parsers.pid_to_string(pid)
+        is_binary(pid) -> pid
+      end
+
+    cid =
+      case cid do
+        %Phoenix.LiveComponent.CID{} -> Parsers.cid_to_string(cid)
+        cid when is_binary(cid) -> cid
+      end
+
+    ~p"/pid/#{pid}?node_id=#{cid}"
+  end
+
   @spec channel_dashboard(pid :: pid() | String.t()) :: String.t()
   def channel_dashboard(pid) when is_pid(pid) do
     pid

lib/live_debugger_web/live/traces/components/trace.ex

@@ -14,6 +14,7 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Trace do
   alias LiveDebugger.Utils.Parsers
   alias LiveDebuggerWeb.Hooks.Flash
   alias LiveDebuggerWeb.Live.Traces.Components
+  alias LiveDebuggerWeb.Helpers.RoutesHelper
 
   @required_assigns [:lv_process, :displayed_trace]
 
@@ -100,8 +101,15 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Trace do
   def module(assigns) do
     ~H"""
     <div class={["text-primary text-2xs font-normal truncate", @class]}>
-      <%= Parsers.module_to_string(@trace.module) %>
-      <%= if(@trace.cid, do: "(#{@trace.cid})") %>
+      <.tooltip id={"#{@trace.id}-trace-module"} content="See in Node Inspector" class="w-max">
+        <.link
+          class="block hover:underline"
+          patch={RoutesHelper.channel_dashboard(@trace.pid, @trace.cid)}
+        >
+          <%= Parsers.module_to_string(@trace.module) %>
+          <%= if(@trace.cid, do: "(#{@trace.cid})") %>
+        </.link>
+      </.tooltip>
     </div>
     """
   end

test/live_debugger/channel_dashboard_test.exs

@@ -590,10 +590,6 @@ defmodule LiveDebugger.ChannelDashboardTest do
     css("#tree-node-button-15-component-tree-sidebar-content-slide-over")
   end
 
-  defp sidebar_basic_info() do
-    css("#sidebar-content-slide-over-basic-info")
-  end
-
   defp reset_group_button(group) do
     css("button[phx-click=\"reset-group\"][phx-value-group=\"#{group}\"]")
   end

test/live_debugger/process_callback_traces_test.exs

@@ -52,6 +52,47 @@ defmodule LiveDebugger.ProcessCallbackTracesTest do
     |> assert_has(trace_name(text: "render/1", count: 1))
   end
 
+  @sessions 2
+  feature "user can go to specific node from global callbacks", %{
+    sessions: [dev_app, debugger]
+  } do
+    LiveDebugger.GenServers.CallbackTracingServer.ping!()
+
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> click(global_callback_traces_button())
+    |> assert_has(title(text: "Global Callback Traces"))
+    |> click(clear_traces_button())
+    |> click(toggle_tracing_button())
+
+    dev_app
+    |> click(css("button#send-button"))
+
+    debugger
+    |> find(trace_module(text: "LiveDebuggerDev.LiveViews.Main", count: 2))
+    |> List.first()
+    |> click(link("LiveDebuggerDev.LiveViews.Main"))
+
+    debugger
+    |> find(sidebar_basic_info())
+    |> assert_text("LiveView")
+    |> assert_text("LiveDebuggerDev.LiveViews.Main")
+
+    debugger
+    |> click(global_callback_traces_button())
+    |> find(trace_module(text: "LiveDebuggerDev.LiveComponents.Send (4)"))
+    |> click(link("LiveDebuggerDev.LiveComponents.Send (4)"))
+
+    debugger
+    |> find(sidebar_basic_info())
+    |> assert_text("LiveComponent")
+    |> assert_text("LiveDebuggerDev.LiveComponents.Send")
+  end
+
   defp traces(opts), do: css("#global-traces-stream details", opts)
 
   defp trace_name(opts), do: css("#global-traces-stream details p.font-medium", opts)

test/support/css_queries.ex

@@ -26,4 +26,8 @@ defmodule LiveDebugger.Support.CssQueries do
   def no_traces_info() do
     css("#global-traces-stream-empty", text: "No traces have been recorded yet.")
   end
+
+  def sidebar_basic_info() do
+    css("#sidebar-content-slide-over-basic-info")
+  end
 end