+
<%= live_component @socket, LiveBookWeb.InsertCellActions,
section_id: @section.id,
index: 0 %>
@@ -31,7 +31,8 @@ defmodule LiveBookWeb.Section do
<%= live_component @socket, LiveBookWeb.Cell,
cell: cell,
cell_info: @cell_infos[cell.id],
- focused: cell.id == @focused_cell_id %>
+ focused: @selected and cell.id == @focused_cell_id,
+ expanded: @selected and cell.id == @focused_cell_id and @focused_cell_expanded %>
<%= live_component @socket, LiveBookWeb.InsertCellActions,
section_id: @section.id,
index: index + 1 %>
diff --git a/lib/live_book_web/live/session_live.ex b/lib/live_book_web/live/session_live.ex
index 6253bcdc2..5d0118331 100644
--- a/lib/live_book_web/live/session_live.ex
+++ b/lib/live_book_web/live/session_live.ex
@@ -1,7 +1,7 @@
defmodule LiveBookWeb.SessionLive do
use LiveBookWeb, :live_view
- alias LiveBook.{SessionSupervisor, Session, Delta}
+ alias LiveBook.{SessionSupervisor, Session, Delta, Notebook}
@impl true
def mount(%{"id" => session_id}, _session, socket) do
@@ -33,14 +33,18 @@ defmodule LiveBookWeb.SessionLive do
session_id: session_id,
data: data,
selected_section_id: first_section_id,
- focused_cell_id: nil
+ focused_cell_id: nil,
+ focused_cell_expanded: false
}
end
@impl true
def render(assigns) do
~L"""
-
+
<% end %>
-
+
<%= Icons.svg(:plus, class: "h-6") %>
New section
-
+
@@ -74,7 +78,8 @@ defmodule LiveBookWeb.SessionLive do
section: section,
selected: section.id == @selected_section_id,
cell_infos: @data.cell_infos,
- focused_cell_id: @focused_cell_id %>
+ focused_cell_id: @focused_cell_id,
+ focused_cell_expanded: @focused_cell_expanded %>
<% end %>
@@ -83,6 +88,23 @@ defmodule LiveBookWeb.SessionLive do
end
@impl true
+ def handle_event("cell_init", %{"cell_id" => cell_id}, socket) do
+ data = socket.assigns.data
+
+ case Notebook.fetch_cell_and_section(data.notebook, cell_id) do
+ {:ok, cell, _section} ->
+ payload = %{
+ source: cell.source,
+ revision: data.cell_infos[cell.id].revision
+ }
+
+ {:reply, payload, socket}
+
+ :error ->
+ {:noreply, socket}
+ end
+ end
+
def handle_event("add_section", _params, socket) do
end_index = length(socket.assigns.data.notebook.sections)
Session.insert_section(socket.assigns.session_id, end_index)
@@ -118,10 +140,6 @@ defmodule LiveBookWeb.SessionLive do
{:noreply, socket}
end
- def handle_event("focus_cell", %{"cell_id" => cell_id}, socket) do
- {:noreply, assign(socket, focused_cell_id: cell_id)}
- end
-
def handle_event("set_notebook_name", %{"name" => name}, socket) do
name = normalize_name(name)
Session.set_notebook_name(socket.assigns.session_id, name)
@@ -137,7 +155,7 @@ defmodule LiveBookWeb.SessionLive do
end
def handle_event(
- "cell_delta",
+ "apply_cell_delta",
%{"cell_id" => cell_id, "delta" => delta, "revision" => revision},
socket
) do
@@ -147,13 +165,25 @@ defmodule LiveBookWeb.SessionLive do
{:noreply, socket}
end
- defp normalize_name(name) do
- name
- |> String.trim()
- |> String.replace(~r/\s+/, " ")
- |> case do
- "" -> "Untitled"
- name -> name
+ def handle_event("focus_cell", %{"cell_id" => cell_id}, socket) do
+ {:noreply, assign(socket, focused_cell_id: cell_id, focused_cell_expanded: false)}
+ end
+
+ def handle_event("move_cell_focus", %{"offset" => offset}, socket) do
+ case new_focused_cell_from_offset(socket.assigns, offset) do
+ {:ok, cell} ->
+ {:noreply, assign(socket, focused_cell_id: cell.id, focused_cell_expanded: false)}
+
+ :error ->
+ {:noreply, socket}
+ end
+ end
+
+ def handle_event("toggle_cell_expanded", %{}, socket) do
+ if socket.assigns.focused_cell_id do
+ {:noreply, assign(socket, focused_cell_expanded: !socket.assigns.focused_cell_expanded)}
+ else
+ {:noreply, socket}
end
end
@@ -182,4 +212,32 @@ defmodule LiveBookWeb.SessionLive do
end
defp handle_action(socket, _action), do: socket
+
+ defp normalize_name(name) do
+ name
+ |> String.trim()
+ |> String.replace(~r/\s+/, " ")
+ |> case do
+ "" -> "Untitled"
+ name -> name
+ end
+ end
+
+ defp new_focused_cell_from_offset(assigns, offset) do
+ cond do
+ assigns.focused_cell_id ->
+ # If a cell is focused, look up the appropriate sibling
+ Notebook.fetch_cell_sibling(assigns.data.notebook, assigns.focused_cell_id, offset)
+
+ assigns.selected_section_id ->
+ # If no cell is focused, focus the first one for easier keyboard navigation.
+ {:ok, section} =
+ Notebook.fetch_section(assigns.data.notebook, assigns.selected_section_id)
+
+ Enum.fetch(section.cells, 0)
+
+ true ->
+ :error
+ end
+ end
end
diff --git a/lib/live_book_web/templates/layout/root.html.leex b/lib/live_book_web/templates/layout/root.html.leex
index 8fcbd75dd..78e3ce51a 100644
--- a/lib/live_book_web/templates/layout/root.html.leex
+++ b/lib/live_book_web/templates/layout/root.html.leex
@@ -9,7 +9,7 @@
"/>
-
+
<%= @inner_content %>
diff --git a/test/live_book/evaluator_test.exs b/test/live_book/evaluator_test.exs
index 2122c02a4..c7bbb9c31 100644
--- a/test/live_book/evaluator_test.exs
+++ b/test/live_book/evaluator_test.exs
@@ -99,7 +99,9 @@ defmodule LiveBook.EvaluatorTest do
]
# Note: evaluating module definitions is relatively slow, so we use a higher wait timeout.
- assert_receive {:evaluator_response, :code_1, {:error, _kind, _error, ^expected_stacktrace}}, 1000
+ assert_receive {:evaluator_response, :code_1,
+ {:error, _kind, _error, ^expected_stacktrace}},
+ 1000
end
end
diff --git a/test/live_book/notebook_test.exs b/test/live_book/notebook_test.exs
new file mode 100644
index 000000000..30701b8f9
--- /dev/null
+++ b/test/live_book/notebook_test.exs
@@ -0,0 +1,48 @@
+defmodule LiveBook.NotebookTest do
+ use ExUnit.Case, async: true
+
+ alias LiveBook.Notebook
+ alias LiveBook.Notebook.{Section, Cell}
+
+ describe "fetch_cell_sibling/3" do
+ test "returns error given invalid cell id" do
+ notebook = Notebook.new()
+
+ assert :error == Notebook.fetch_cell_sibling(notebook, "1", 0)
+ end
+
+ test "returns sibling cell if there is one at the given offset" do
+ cell1 = %{Cell.new(:markdown) | id: "1"}
+ cell2 = %{Cell.new(:markdown) | id: "2"}
+ cell3 = %{Cell.new(:markdown) | id: "3"}
+ cell4 = %{Cell.new(:markdown) | id: "4"}
+
+ notebook = %{
+ Notebook.new()
+ | sections: [
+ %{Section.new() | cells: [cell1, cell2, cell3, cell4]}
+ ]
+ }
+
+ assert {:ok, cell1} == Notebook.fetch_cell_sibling(notebook, cell2.id, -1)
+ assert {:ok, cell3} == Notebook.fetch_cell_sibling(notebook, cell2.id, 1)
+ assert {:ok, cell4} == Notebook.fetch_cell_sibling(notebook, cell2.id, 2)
+ end
+
+ test "returns error if the offset is out of range" do
+ cell1 = %{Cell.new(:markdown) | id: "1"}
+ cell2 = %{Cell.new(:markdown) | id: "2"}
+
+ notebook = %{
+ Notebook.new()
+ | sections: [
+ %{Section.new() | cells: [cell1, cell2]}
+ ]
+ }
+
+ assert :error == Notebook.fetch_cell_sibling(notebook, cell2.id, -2)
+ assert :error == Notebook.fetch_cell_sibling(notebook, cell2.id, 1)
+ assert :error == Notebook.fetch_cell_sibling(notebook, cell2.id, 2)
+ end
+ end
+end
diff --git a/test/live_book_web/live/session_live_test.exs b/test/live_book_web/live/session_live_test.exs
new file mode 100644
index 000000000..6d3f62c80
--- /dev/null
+++ b/test/live_book_web/live/session_live_test.exs
@@ -0,0 +1,108 @@
+defmodule LiveBookWeb.SessionLiveTest do
+ use LiveBookWeb.ConnCase
+
+ import Phoenix.LiveViewTest
+
+ alias LiveBook.{SessionSupervisor, Session}
+
+ setup do
+ {:ok, session_id} = SessionSupervisor.create_session()
+ %{session_id: session_id}
+ end
+
+ test "disconnected and connected render", %{conn: conn, session_id: session_id} do
+ {:ok, view, disconnected_html} = live(conn, "/sessions/#{session_id}")
+ assert disconnected_html =~ "Untitled notebook"
+ assert render(view) =~ "Untitled notebook"
+ end
+
+ describe "asynchronous updates" do
+ test "renders an updated notebook name", %{conn: conn, session_id: session_id} do
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ Session.set_notebook_name(session_id, "My notebook")
+ wait_for_session_update(session_id)
+
+ assert render(view) =~ "My notebook"
+ end
+
+ test "renders a newly inserted section", %{conn: conn, session_id: session_id} do
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ Session.insert_section(session_id, 0)
+ %{notebook: %{sections: [section]}} = Session.get_data(session_id)
+
+ assert render(view) =~ section.id
+ end
+
+ test "renders an updated section name", %{conn: conn, session_id: session_id} do
+ Session.insert_section(session_id, 0)
+ %{notebook: %{sections: [section]}} = Session.get_data(session_id)
+
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ Session.set_section_name(session_id, section.id, "My section")
+ wait_for_session_update(session_id)
+
+ assert render(view) =~ "My section"
+ end
+
+ test "renders a newly inserted cell", %{conn: conn, session_id: session_id} do
+ Session.insert_section(session_id, 0)
+ %{notebook: %{sections: [section]}} = Session.get_data(session_id)
+
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ Session.insert_cell(session_id, section.id, 0, :markdown)
+ %{notebook: %{sections: [%{cells: [cell]}]}} = Session.get_data(session_id)
+
+ assert render(view) =~ cell.id
+ end
+
+ test "un-renders a deleted cell", %{conn: conn, session_id: session_id} do
+ Session.insert_section(session_id, 0)
+ %{notebook: %{sections: [section]}} = Session.get_data(session_id)
+ Session.insert_cell(session_id, section.id, 0, :markdown)
+ %{notebook: %{sections: [%{cells: [cell]}]}} = Session.get_data(session_id)
+
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ Session.delete_cell(session_id, cell.id)
+ wait_for_session_update(session_id)
+
+ refute render(view) =~ cell.id
+ end
+ end
+
+ describe "UI-triggered updates" do
+ test "adding a new session updates the shared state", %{conn: conn, session_id: session_id} do
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ view
+ |> element("button", "New section")
+ |> render_click()
+
+ assert %{notebook: %{sections: [_section]}} = Session.get_data(session_id)
+ end
+
+ test "adding a new cell updates the shared state", %{conn: conn, session_id: session_id} do
+ Session.insert_section(session_id, 0)
+
+ {:ok, view, _} = live(conn, "/sessions/#{session_id}")
+
+ view
+ |> element("button", "+ Markdown")
+ |> render_click()
+
+ assert %{notebook: %{sections: [%{cells: [%{type: :markdown}]}]}} =
+ Session.get_data(session_id)
+ end
+ end
+
+ defp wait_for_session_update(session_id) do
+ # This call is synchronous, so it gives the session time
+ # for handling the previously sent change messages.
+ Session.get_data(session_id)
+ :ok
+ end
+end