Diffing optimisation (#116)

* Make buttons group component back stateful

* Move buttons rendering to the buttons group component

* Move cell status to its own component

* Revert cell status component

lib/livebook_web/live/cell_component.ex

@@ -54,7 +54,7 @@ defmodule LivebookWeb.CellComponent do
       </div>
       <div class="w-full">
         <div class="pb-4" data-element="editor-box">
-          <%= render_editor(@cell, @cell_info) %>
+          <%= render_editor(assigns) %>
         </div>
 
         <div class="markdown" data-element="markdown-container" id="markdown-container-<%= @cell.id %>" phx-update="ignore">
@@ -125,11 +125,11 @@ defmodule LivebookWeb.CellComponent do
       <div class="w-1 rounded-lg relative -left-3" data-element="cell-focus-indicator">
       </div>
       <div class="w-full">
-        <%= render_editor(@cell, @cell_info, show_status: true) %>
+        <%= render_editor(assigns) %>
 
         <%= if @cell.outputs != [] do %>
           <div class="mt-2">
-            <%= render_outputs(@cell.outputs, @cell.id) %>
+            <%= render_outputs(assigns) %>
           </div>
         <% end %>
       </div>
@@ -137,10 +137,7 @@ defmodule LivebookWeb.CellComponent do
     """
   end
 
-  defp render_editor(cell, cell_info, opts \\ []) do
+  defp render_editor(assigns) do
-    show_status = Keyword.get(opts, :show_status, false)
-    assigns = %{cell: cell, cell_info: cell_info, show_status: show_status}
-
     ~L"""
     <div class="py-3 rounded-lg overflow-hidden bg-editor relative">
       <div
@@ -150,9 +147,13 @@ defmodule LivebookWeb.CellComponent do
         <%= render_editor_content_placeholder(@cell.source) %>
       </div>
 
-      <%= if @show_status do %>
+      <%= if @cell.type == :elixir do %>
         <div class="absolute bottom-2 right-2">
-          <%= render_cell_status(@cell_info) %>
+          <%= render_cell_status(
+                @cell_info.validity_status,
+                @cell_info.evaluation_status,
+                @cell_info.digest != @cell_info.evaluation_digest
+              ) %>
         </div>
       <% end %>
     </div>
@@ -207,14 +208,12 @@ defmodule LivebookWeb.CellComponent do
     """
   end
 
-  defp render_outputs(outputs, cell_id) do
+  defp render_outputs(assigns) do
-    assigns = %{outputs: outputs, cell_id: cell_id}
-
     ~L"""
     <div class="flex flex-col rounded-lg border border-gray-200 divide-y divide-gray-200 font-editor">
-      <%= for {output, index} <- @outputs |> Enum.reverse() |> Enum.with_index(), output != :ignored do %>
+      <%= for {output, index} <- @cell.outputs |> Enum.reverse() |> Enum.with_index(), output != :ignored do %>
         <div class="p-4">
-          <%= render_output(output, "#{@cell_id}-output#{index}") %>
+          <%= render_output(output, "#{@cell.id}-output#{index}") %>
         </div>
       <% end %>
     </div>
@@ -274,33 +273,33 @@ defmodule LivebookWeb.CellComponent do
     |> String.split("\n")
   end
 
-  defp render_cell_status(%{evaluation_status: :evaluating} = info) do
+  defp render_cell_status(_, :evaluating, changed) do
     render_status_indicator(
       "Evaluating",
       "bg-blue-500",
       "bg-blue-400",
-      info.digest != info.evaluation_digest
+      changed
     )
   end
 
-  defp render_cell_status(%{evaluation_status: :queued}) do
+  defp render_cell_status(_, :queued, _) do
     render_status_indicator("Queued", "bg-gray-500", "bg-gray-400", false)
   end
 
-  defp render_cell_status(%{validity_status: :evaluated} = info) do
+  defp render_cell_status(:evaluated, _, changed) do
     render_status_indicator(
       "Evaluated",
       "bg-green-400",
       nil,
-      info.digest != info.evaluation_digest
+      changed
     )
   end
 
-  defp render_cell_status(%{validity_status: :stale} = info) do
+  defp render_cell_status(:stale, _, changed) do
-    render_status_indicator("Stale", "bg-yellow-200", nil, info.digest != info.evaluation_digest)
+    render_status_indicator("Stale", "bg-yellow-200", nil, changed)
   end
 
-  defp render_cell_status(_), do: nil
+  defp render_cell_status(_, _, _), do: nil
 
   defp render_status_indicator(text, circle_class, animated_circle_class, show_changed) do
     assigns = %{

lib/livebook_web/live/insert_buttons_component.ex

@@ -5,7 +5,24 @@ defmodule LivebookWeb.InsertButtonsComponent do
     ~L"""
     <div class="relative top-0.5 m-0 flex justify-center">
       <div class="absolute z-10 <%= if(@persistent, do: "opacity-100", else: "opacity-0") %> hover:opacity-100 focus-within:opacity-100 flex space-x-2 justify-center items-center">
-        <%= render_block(@inner_block) %>
+        <button class="button button-sm"
+          phx-click="insert_cell"
+          phx-value-type="markdown"
+          phx-value-section_id="<%= @section_id %>"
+          phx-value-index="<%= @insert_cell_index %>"
+          >+ Markdown</button>
+        <button class="button button-sm"
+          phx-click="insert_cell"
+          phx-value-type="elixir"
+          phx-value-section_id="<%= @section_id %>"
+          phx-value-index="<%= @insert_cell_index %>"
+          >+ Elixir</button>
+        <%= if @insert_section_index do %>
+          <button class="button button-sm"
+            phx-click="insert_section"
+            phx-value-index="<%= @insert_section_index %>"
+            >+ Section</button>
+        <% end %>
       </div>
     </div>
     """

lib/livebook_web/live/section_component.ex

@@ -28,20 +28,11 @@ defmodule LivebookWeb.SectionComponent do
         <div class="flex flex-col space-y-1">
           <%= for {cell, index} <- Enum.with_index(@section.cells) do %>
             <%= live_component @socket, LivebookWeb.InsertButtonsComponent,
-                  persistent: false do %>
+                  id: "#{@section.id}:#{index}",
-              <button class="button button-sm"
+                  persistent: false,
-                phx-click="insert_cell"
+                  section_id: @section.id,
-                phx-value-type="markdown"
+                  insert_cell_index: index,
-                phx-value-section_id="<%= @section.id %>"
+                  insert_section_index: nil %>
-                phx-value-index="<%= index %>"
-                >+ Markdown</button>
-              <button class="button button-sm"
-                phx-click="insert_cell"
-                phx-value-type="elixir"
-                phx-value-section_id="<%= @section.id %>"
-                phx-value-index="<%= index %>"
-                >+ Elixir</button>
-            <% end %>
             <%= live_component @socket, LivebookWeb.CellComponent,
                   id: cell.id,
                   session_id: @session_id,
@@ -49,24 +40,11 @@ defmodule LivebookWeb.SectionComponent do
                   cell_info: @cell_infos[cell.id] %>
           <% end %>
           <%= live_component @socket, LivebookWeb.InsertButtonsComponent,
-                persistent: @section.cells == [] do %>
+                id: "#{@section.id}:last",
-            <button class="button button-sm"
+                persistent: @section.cells == [],
-              phx-click="insert_cell"
+                section_id: @section.id,
-              phx-value-type="markdown"
+                insert_cell_index: length(@section.cells),
-              phx-value-section_id="<%= @section.id %>"
+                insert_section_index: @index + 1 %>
-              phx-value-index="<%= length(@section.cells) %>"
-              >+ Markdown</button>
-            <button class="button button-sm"
-              phx-click="insert_cell"
-              phx-value-type="elixir"
-              phx-value-section_id="<%= @section.id %>"
-              phx-value-index="<%= length(@section.cells) %>"
-              >+ Elixir</button>
-            <button class="button button-sm"
-              phx-click="insert_section"
-              phx-value-index="<%= @index + 1 %>"
-              >+ Section</button>
-          <% end %>
         </div>
       </div>
     </div>