Add UI for cancelling evaluation (#51)

* Add icon for cancelling cell evaluation

* Add shortcut for cancelling evaluation

* Test cancellation

assets/js/session/index.js

@@ -60,6 +60,8 @@ const Session = {
           this.pushEvent("queue_section_cells_evaluation", {});
         } else if (keyBuffer.tryMatch(["e", "j"])) {
           this.pushEvent("queue_child_cells_evaluation", {});
+        } else if (keyBuffer.tryMatch(["e", "x"])) {
+          this.pushEvent("cancel_focused_cell_evaluation", {});
         } else if (keyBuffer.tryMatch(["?"])) {
           this.pushEvent("show_shortcuts", {});
         } else if (key === "i") {

lib/live_book_web/live/cell_component.ex

@@ -44,9 +44,15 @@ defmodule LiveBookWeb.CellComponent do
     ~L"""
     <%= if @focused do %>
       <div class="flex flex-col items-center space-y-2 absolute z-50 right-0 top-0 -mr-10">
-        <button phx-click="queue_focused_cell_evaluation" class="text-gray-500 hover:text-current">
-          <%= Icons.svg(:play, class: "h-6") %>
-        </button>
+        <%= if @cell_info.evaluation_status == :ready do %>
+          <button phx-click="queue_focused_cell_evaluation" class="text-gray-500 hover:text-current">
+            <%= Icons.svg(:play, class: "h-6") %>
+          </button>
+        <% else %>
+          <button phx-click="cancel_focused_cell_evaluation" class="text-gray-500 hover:text-current">
+            <%= Icons.svg(:stop, class: "h-6") %>
+          </button>
+        <% end %>
         <button phx-click="delete_focused_cell" class="text-gray-500 hover:text-current">
           <%= Icons.svg(:trash, class: "h-6") %>
         </button>

lib/live_book_web/live/icons.ex

@@ -138,6 +138,17 @@ defmodule LiveBookWeb.Icons do
     """
   end
 
+  def svg(:stop, attrs) do
+    assigns = %{attrs: heroicon_svg_attrs(attrs)}
+
+    ~L"""
+    <%= tag(:svg, @attrs) %>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
+    </svg>
+    """
+  end
+
   # https://heroicons.com
   defp heroicon_svg_attrs(attrs) do
     heroicon_svg_attrs = [

lib/live_book_web/live/session_live.ex

@@ -348,6 +348,14 @@ defmodule LiveBookWeb.SessionLive do
     {:noreply, socket}
   end
 
+  def handle_event("cancel_focused_cell_evaluation", %{}, socket) do
+    if socket.assigns.focused_cell_id do
+      Session.cancel_cell_evaluation(socket.assigns.session_id, socket.assigns.focused_cell_id)
+    end
+
+    {:noreply, socket}
+  end
+
   def handle_event("show_shortcuts", %{}, socket) do
     {:noreply,
      push_patch(socket, to: Routes.session_path(socket, :shortcuts, socket.assigns.session_id))}

lib/live_book_web/live/session_live/shortcuts_component.ex

@@ -18,7 +18,8 @@ defmodule LiveBookWeb.SessionLive.ShortcutsComponent do
       %{seq: "dd", desc: "Delete cell"},
       %{seq: "ee", desc: "Evaluate cell"},
       %{seq: "es", desc: "Evaluate section"},
-      %{seq: "ej", desc: "Evaluate cells below"}
+      %{seq: "ej", desc: "Evaluate cells below"},
+      %{seq: "ex", desc: "Cancel cell evaluation"}
     ]
   }
 

test/live_book_web/live/session_live_test.exs

@@ -108,6 +108,26 @@ defmodule LiveBookWeb.SessionLiveTest do
                Session.get_data(session_id)
     end
 
+    test "cancelling focused cell evaluation", %{conn: conn, session_id: session_id} do
+      section_id = insert_section(session_id)
+      cell_id = insert_cell(session_id, section_id, :elixir, "Process.sleep(2000)")
+
+      {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+      focus_cell(view, cell_id)
+
+      view
+      |> element("#session")
+      |> render_hook("queue_focused_cell_evaluation", %{})
+
+      view
+      |> element("#session")
+      |> render_hook("cancel_focused_cell_evaluation", %{})
+
+      assert %{cell_infos: %{^cell_id => %{evaluation_status: :ready}}} =
+               Session.get_data(session_id)
+    end
+
     test "inserting a cell below the focused cell", %{conn: conn, session_id: session_id} do
       section_id = insert_section(session_id)
       cell_id = insert_cell(session_id, section_id, :elixir)