Enhancement: Add pulse on assign change (#822)

* Add pulse animation

* Clear pulse when rerendering due to handle_event

* Nitpicks

* Fix tests

* Add tests

* Add comment for hook

Author: hhubert6

assets/app/app.js

@@ -13,6 +13,7 @@ import CopyButton from './hooks/copy_button';
 import TraceBodySearchHighlight from './hooks/trace_body_search_highlight';
 import TraceLabelSearchHighlight from './hooks/trace_label_search_highlight';
 import AssignsBodySearchHighlight from './hooks/assigns_body_search_highlight';
+import DiffPulse from './hooks/diff_pulse';
 import ChartHook from './hooks/chart_hook';
 
 import topbar from './vendor/topbar';
@@ -39,6 +40,7 @@ function createHooks() {
     TraceBodySearchHighlight,
     TraceLabelSearchHighlight,
     AssignsBodySearchHighlight,
+    DiffPulse,
     ChartHook,
   };
 }

assets/app/hooks/diff_pulse.js

@@ -0,0 +1,35 @@
+// This hook is resonsible for adding a pulse animation to an element
+// whenever its updated and it has the data-pulse attribute set.
+// Somewhat convoluted logic aims to reset the animation if update is triggered
+// before previous animation is complete.
+const DiffPulse = {
+  mounted() {
+    if (this.el.hasAttribute('data-pulse')) {
+      this.el.removeAttribute('data-pulse');
+
+      this.el.classList.add('animate-diff-pulse');
+
+      this.timeout = setTimeout(() => {
+        this.el.classList.remove('animate-diff-pulse');
+      }, 500);
+    }
+  },
+  updated() {
+    if (this.el.hasAttribute('data-pulse')) {
+      clearTimeout(this.timeout);
+      this.el.removeAttribute('data-pulse');
+      this.el.classList.remove('animate-diff-pulse');
+
+      setTimeout(() => this.el.classList.add('animate-diff-pulse'));
+
+      this.timeout = setTimeout(() => {
+        this.el.classList.remove('animate-diff-pulse');
+      }, 500);
+    }
+  },
+  destroyed() {
+    clearTimeout(this.timeout);
+  },
+};
+
+export default DiffPulse;

assets/app/styles/themes/dark.css

@@ -79,5 +79,8 @@
     --search-highlight-text: var(--gray-900);
 
     --diff-border: var(--swm-brand-additional);
+
+    --diff-pulse-bg: var(--swm-sea-blue-60);
+    --diff-pulse-text: var(--gray-900);
   }
 }

assets/app/styles/themes/light.css

@@ -78,4 +78,7 @@
   --search-highlight-text: var(--slate-900);
 
   --diff-border: var(--swm-brand-additional);
+
+  --diff-pulse-bg: var(--swm-sea-blue-60);
+  --diff-pulse-text: var(--slate-900);
 }

assets/app/tailwind.config.js

@@ -95,12 +95,20 @@ module.exports = {
           '0%': { opacity: '0', transform: 'translateY(1rem)' },
           '100%': { opacity: '1', transform: 'translateY(0)' },
         },
+        diffPulse: {
+          '0%': {
+            backgroundColor: 'var(--diff-pulse-bg)',
+            color: 'var(--diff-pulse-text)',
+          },
+          '100%': { backgroundColor: '', color: '' },
+        },
       },
       animation: {
         'fade-out': 'fadeOut 200ms ease-out forwards',
         'fade-out-mobile': 'fadeOutMobile 200ms ease-out forwards',
         'fade-in': 'fadeIn 100ms ease-in forwards',
         'fade-in-mobile': 'fadeInMobile 100ms ease-in forwards',
+        'diff-pulse': 'diffPulse 500ms ease-out',
       },
     },
   },

lib/live_debugger/app/debugger/node_state/web/components.ex

@@ -74,7 +74,7 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
           data-search_phrase={@assigns_search_phrase}
         >
           <.assigns_sizes_section assigns_sizes={@assigns_sizes} id="display-fullscreen-size-label" />
-          <ElixirDisplay.static_term node={@term_node} />
+          <ElixirDisplay.static_term id="fullscreen-" node={@term_node} />
         </div>
       </.fullscreen>
     </div>

lib/live_debugger/app/debugger/node_state/web/hooks/node_assigns.ex

@@ -10,6 +10,7 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
   alias LiveDebugger.App.Utils.TermDiffer
   alias LiveDebugger.App.Utils.TermDiffer.Diff
   alias LiveDebugger.App.Utils.TermParser
+  alias LiveDebugger.App.Utils.TermNode
   alias LiveDebugger.Utils.Memory
 
   @required_assigns [
@@ -27,9 +28,11 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
     socket
     |> check_assigns!(@required_assigns)
     |> attach_hook(:node_assigns, :handle_async, &handle_async/3)
+    |> attach_hook(:node_assigns, :handle_event, &handle_event/3)
     |> register_hook(:node_assigns)
     |> assign(:node_assigns_info, AsyncResult.loading())
     |> assign(:assigns_sizes, AsyncResult.loading())
+    |> put_private(:pulse_cleared?, true)
     |> assign_async_node_assigns()
   end
 
@@ -67,6 +70,8 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
     |> assign(:node_assigns_info, node_assigns_info)
     |> assign(:assigns_sizes, assigns_sizes)
     |> start_async(:fetch_node_assigns, fn ->
+      # Small sleep serves here as a debounce mechanism
+      Process.sleep(100)
       NodeStateQueries.fetch_node_assigns(pid, node_id)
     end)
   end
@@ -76,16 +81,20 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
     |> assign(:node_assigns_info, AsyncResult.failed(%AsyncResult{}, :no_node_id))
   end
 
+  defp handle_event(_, _, socket) do
+    socket
+    |> maybe_clear_term_node_pulse()
+    |> cont()
+  end
+
   defp handle_async(
          :fetch_node_assigns,
          {:ok, {:ok, node_assigns}},
-         %{
-           assigns: %{
-             node_assigns_info: %AsyncResult{ok?: true, result: {old_assigns, old_term_node, _}}
-           }
-         } =
-           socket
+         %{assigns: %{node_assigns_info: %AsyncResult{ok?: true}}} = socket
        ) do
+    socket = maybe_clear_term_node_pulse(socket)
+    %AsyncResult{result: {old_assigns, old_term_node, _}} = socket.assigns.node_assigns_info
+
     node_assigns_info =
       case TermDiffer.diff(old_assigns, node_assigns) do
         %Diff{type: :equal} ->
@@ -95,15 +104,13 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
           copy_string = TermParser.term_to_copy_string(node_assigns)
 
           case TermParser.update_by_diff(old_term_node, diff) do
-            {:ok, term_node} ->
-              AsyncResult.ok({node_assigns, term_node, copy_string})
-
-            {:error, reason} ->
-              AsyncResult.failed(socket.assigns.node_assigns_info, reason)
+            {:ok, term_node} -> AsyncResult.ok({node_assigns, term_node, copy_string})
+            {:error, reason} -> AsyncResult.failed(socket.assigns.node_assigns_info, reason)
           end
       end
 
     socket
+    |> put_private(:pulse_cleared?, false)
     |> assign(:node_assigns_info, node_assigns_info)
     |> assign_size_async(node_assigns)
     |> halt()
@@ -168,4 +175,22 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Hooks.NodeAssigns do
   defp assigns_serialized_size(assigns) do
     assigns |> Memory.serialized_term_size() |> Memory.bytes_to_pretty_string()
   end
+
+  defp maybe_clear_term_node_pulse(%{private: %{pulse_cleared?: true}} = socket) do
+    socket
+  end
+
+  defp maybe_clear_term_node_pulse(%{private: %{pulse_cleared?: false}} = socket) do
+    case socket.assigns.node_assigns_info do
+      %AsyncResult{ok?: true, result: {node_assigns, term_node, copy_string}} ->
+        term_node = TermNode.set_pulse(term_node, false, recursive: true)
+
+        socket
+        |> put_private(:pulse_cleared?, true)
+        |> assign(:node_assigns_info, AsyncResult.ok({node_assigns, term_node, copy_string}))
+
+      _ ->
+        socket
+    end
+  end
 end

lib/live_debugger/app/debugger/web/components/elixir_display.ex

@@ -59,6 +59,7 @@ defmodule LiveDebugger.App.Debugger.Web.Components.ElixirDisplay do
     """
   end
 
+  attr(:id, :string, default: "")
   attr(:node, TermNode, required: true)
 
   def static_term(assigns) do
@@ -78,36 +79,42 @@ defmodule LiveDebugger.App.Debugger.Web.Components.ElixirDisplay do
         >
           <:label :let={open}>
             <%= if open do %>
-              <.text_items items={@node.expanded_before} />
+              <.text_items id={@id <> @node.id <> "-expanded-before"} items={@node.expanded_before} />
             <% else %>
-              <.text_items items={@node.content} />
+              <.text_items id={@id <> @node.id <> "-content"} items={@node.content} />
             <% end %>
           </:label>
           <ol class="m-0 ml-[2ch] block list-none p-0">
             <li :for={{_, child} <- @node.children} class="flex flex-col">
-              <.static_term node={child} />
+              <.static_term id={@id} node={child} />
             </li>
           </ol>
           <div class="ml-[2ch]">
-            <.text_items items={@node.expanded_after} />
+            <.text_items id={@id <> @node.id <> "-expanded-after"} items={@node.expanded_after} />
           </div>
         </.static_collapsible>
       <% else %>
         <div class="ml-[2ch]">
-          <.text_items items={@node.content} />
+          <.text_items id={@id <> @node.id} items={@node.content} />
         </div>
       <% end %>
     </div>
     """
   end
 
+  attr(:id, :string, default: nil)
   attr(:items, :list, required: true)
 
   defp text_items(assigns) do
     ~H"""
     <div class="flex">
-      <%= for item <- @items do %>
-        <span class={"#{text_item_color_class(item)}"}>
+      <%= for {item, index} <- Enum.with_index(@items) do %>
+        <span
+          id={if(@id, do: @id <> "-#{index}")}
+          phx-hook={if(@id, do: "DiffPulse")}
+          data-pulse={item.pulse?}
+          class={"#{text_item_color_class(item)}"}
+        >
           <pre data-text_item="true"><%= item.text %></pre>
         </span>
       <% end %>

lib/live_debugger/app/utils/term_node.ex

@@ -32,11 +32,12 @@ defmodule LiveDebugger.App.Utils.TermNode do
 
   defmodule DisplayElement do
     @moduledoc false
-    defstruct [:text, color: nil]
+    defstruct [:text, color: nil, pulse?: false]
 
     @type t :: %__MODULE__{
             text: String.t(),
-            color: String.t() | nil
+            color: String.t() | nil,
+            pulse?: boolean()
           }
 
     @spec blue(String.t()) :: t()
@@ -50,6 +51,11 @@ defmodule LiveDebugger.App.Utils.TermNode do
 
     @spec green(String.t()) :: t()
     def green(text), do: %__MODULE__{text: text, color: "text-code-4"}
+
+    @spec set_pulse(t(), boolean()) :: t()
+    def set_pulse(%__MODULE__{} = element, pulse?) do
+      %__MODULE__{element | pulse?: pulse?}
+    end
   end
 
   @spec new(kind(), [DisplayElement.t()], Keyword.t()) :: t()
@@ -170,6 +176,28 @@ defmodule LiveDebugger.App.Utils.TermNode do
     end
   end
 
+  @spec set_pulse(t(), boolean(), recursive: boolean()) :: t()
+  def set_pulse(%__MODULE__{} = term_node, pulse?, opts \\ []) do
+    content = Enum.map(term_node.content, &DisplayElement.set_pulse(&1, pulse?))
+    expanded_before = Enum.map(term_node.expanded_before, &DisplayElement.set_pulse(&1, pulse?))
+    expanded_after = Enum.map(term_node.expanded_after, &DisplayElement.set_pulse(&1, pulse?))
+
+    children =
+      if Keyword.get(opts, :recursive, true) do
+        Enum.map(term_node.children, fn {key, child} -> {key, set_pulse(child, pulse?, opts)} end)
+      else
+        term_node.children
+      end
+
+    %__MODULE__{
+      term_node
+      | content: content,
+        expanded_before: expanded_before,
+        expanded_after: expanded_after,
+        children: children
+    }
+  end
+
   defp open_first_element(%__MODULE__{} = term_node) do
     %__MODULE__{term_node | open?: true}
   end