Packages
livebook
0.3.0
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.14.0-rc.1
0.14.0-rc.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.2
0.8.1
0.8.0
0.7.2
0.7.1
0.7.0
0.6.3
0.6.2
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.2
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.2
0.1.1
0.1.0
Automate code & data workflows with interactive notebooks
Current section
Files
Jump to
Current section
Files
lib/livebook_web/live/session_live/section_component.ex
defmodule LivebookWeb.SessionLive.SectionComponent do
use LivebookWeb, :live_component
def render(assigns) do
~H"""
<div data-element="section" data-section-id={@section_view.id}>
<div class="flex space-x-4 items-center" data-element="section-headline">
<h2 class="flex-grow text-gray-800 font-semibold text-2xl px-1 -ml-1 rounded-lg border
border-transparent hover:border-blue-200 focus:border-blue-300"
data-element="section-name"
id={@section_view.html_id}
contenteditable
spellcheck="false"
phx-blur="set_section_name"
phx-value-section_id={@section_view.id}
phx-hook="ContentEditable"
data-update-attribute="phx-value-name"><%= @section_view.name %></h2>
<%# ^ Note it's important there's no space between <h2> and </h2>
because we want the content to exactly match section name. %>
<div class="flex space-x-2 items-center" data-element="section-actions">
<span class="tooltip top" aria-label="Link">
<a href={"##{@section_view.html_id}"} class="icon-button">
<.remix_icon icon="link" class="text-xl" />
</a>
</span>
<%= if @section_view.valid_parents != [] and not @section_view.has_children? do %>
<div class="relative" id={"section-#{@section_view.id}-branch-menu"} phx-hook="Menu" data-element="menu">
<span class="tooltip top" aria-label="Branch out from">
<button class="icon-button" data-toggle>
<.remix_icon icon="git-branch-line" class="text-xl flip-horizontally" />
</button>
</span>
<div class="menu" data-content>
<%= for parent <- @section_view.valid_parents do %>
<%= if @section_view.parent && @section_view.parent.id == parent.id do %>
<button class="menu__item text-gray-900"
phx-click="unset_section_parent"
phx-value-section_id={@section_view.id}>
<.remix_icon icon="arrow-right-s-line" />
<span class="font-medium"><%= parent.name %></span>
</button>
<% else %>
<button class="menu__item text-gray-500"
phx-click="set_section_parent"
phx-value-section_id={@section_view.id}
phx-value-parent_id={parent.id}>
<.remix_icon icon="arrow-right-s-line" />
<span class="font-medium"><%= parent.name %></span>
</button>
<% end %>
<% end %>
</div>
</div>
<% end %>
<span class="tooltip top" aria-label="Move up">
<button class="icon-button"
phx-click="move_section"
phx-value-section_id={@section_view.id}
phx-value-offset="-1">
<.remix_icon icon="arrow-up-s-line" class="text-xl" />
</button>
</span>
<span class="tooltip top" aria-label="Move down">
<button class="icon-button"
phx-click="move_section"
phx-value-section_id={@section_view.id}
phx-value-offset="1">
<.remix_icon icon="arrow-down-s-line" class="text-xl" />
</button>
</span>
<%= unless @section_view.has_children? do %>
<span class="tooltip top" aria-label="Delete">
<%= live_patch to: Routes.session_path(@socket, :delete_section, @session_id, @section_view.id),
class: "icon-button" do %>
<.remix_icon icon="delete-bin-6-line" class="text-xl" />
<% end %>
</span>
<% end %>
</div>
</div>
<%= if @section_view.parent do %>
<h3 class="mt-1 flex items-end space-x-1 text-sm font-semibold text-gray-800">
<span class="tooltip bottom" aria-label={"This section branches out from the main flow\nand can be evaluated in parallel"}>
<.remix_icon icon="git-branch-line" class="text-lg font-normal flip-horizontally leading-none" />
</span>
<span class="leading-none">from ”<%= @section_view.parent.name %>”</span>
</h3>
<% end %>
<div class="container">
<div class="flex flex-col space-y-1">
<%= for {cell_view, index} <- Enum.with_index(@section_view.cell_views) do %>
<%= live_component LivebookWeb.SessionLive.InsertButtonsComponent,
id: "#{@section_view.id}:#{index}",
persistent: false,
section_id: @section_view.id,
insert_cell_index: index %>
<%= live_component LivebookWeb.SessionLive.CellComponent,
id: cell_view.id,
session_id: @session_id,
cell_view: cell_view %>
<% end %>
<%= live_component LivebookWeb.SessionLive.InsertButtonsComponent,
id: "#{@section_view.id}:last",
persistent: @section_view.cell_views == [],
section_id: @section_view.id,
insert_cell_index: length(@section_view.cell_views) %>
</div>
</div>
</div>
"""
end
end