2021-11-09 03:45:30 +08:00
|
|
|
defmodule LivebookWeb.Output do
|
2023-02-23 02:34:54 +08:00
|
|
|
use LivebookWeb, :html
|
2021-11-09 03:45:30 +08:00
|
|
|
|
2022-01-26 04:55:24 +08:00
|
|
|
import LivebookWeb.Helpers
|
|
|
|
|
2022-01-17 20:24:59 +08:00
|
|
|
alias LivebookWeb.Output
|
|
|
|
|
2021-11-09 03:45:30 +08:00
|
|
|
@doc """
|
2021-11-26 01:43:42 +08:00
|
|
|
Renders a list of cell outputs.
|
2021-11-09 03:45:30 +08:00
|
|
|
"""
|
2021-11-26 01:43:42 +08:00
|
|
|
def outputs(assigns) do
|
|
|
|
~H"""
|
2023-02-23 02:34:54 +08:00
|
|
|
<div
|
|
|
|
:for={{idx, output} <- Enum.reverse(@outputs)}
|
|
|
|
class="max-w-full"
|
|
|
|
id={"output-wrapper-#{@dom_id_map[idx] || idx}"}
|
|
|
|
data-el-output
|
|
|
|
data-border={border?(output)}
|
|
|
|
>
|
|
|
|
<%= render_output(output, %{
|
|
|
|
id: "output-#{idx}",
|
|
|
|
session_id: @session_id,
|
|
|
|
session_pid: @session_pid,
|
|
|
|
input_values: @input_values,
|
|
|
|
client_id: @client_id
|
|
|
|
}) %>
|
|
|
|
</div>
|
2021-11-26 01:43:42 +08:00
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2022-01-17 03:37:00 +08:00
|
|
|
defp border?({:stdout, _text}), do: true
|
|
|
|
defp border?({:text, _text}), do: true
|
2022-09-01 07:45:55 +08:00
|
|
|
defp border?({:error, _message, _type}), do: true
|
2022-08-30 19:15:55 +08:00
|
|
|
defp border?({:grid, _, info}), do: Map.get(info, :boxed, false)
|
2022-01-17 03:37:00 +08:00
|
|
|
defp border?(_output), do: false
|
2021-11-26 01:43:42 +08:00
|
|
|
|
2022-01-17 03:37:00 +08:00
|
|
|
defp render_output({:stdout, text}, %{id: id}) do
|
|
|
|
text = if(text == :__pruned__, do: nil, else: text)
|
2022-03-19 19:22:36 +08:00
|
|
|
live_component(Output.StdoutComponent, id: id, text: text)
|
2021-11-09 03:45:30 +08:00
|
|
|
end
|
|
|
|
|
2021-11-26 01:43:42 +08:00
|
|
|
defp render_output({:text, text}, %{id: id}) do
|
2022-01-17 03:37:00 +08:00
|
|
|
assigns = %{id: id, text: text}
|
|
|
|
|
|
|
|
~H"""
|
2022-03-19 19:22:36 +08:00
|
|
|
<Output.TextComponent.render id={@id} content={@text} />
|
2022-01-17 03:37:00 +08:00
|
|
|
"""
|
2021-11-09 03:45:30 +08:00
|
|
|
end
|
|
|
|
|
2022-05-17 09:03:18 +08:00
|
|
|
defp render_output({:markdown, markdown}, %{id: id, session_id: session_id}) do
|
|
|
|
live_component(Output.MarkdownComponent,
|
|
|
|
id: id,
|
|
|
|
session_id: session_id,
|
|
|
|
content: markdown
|
|
|
|
)
|
2021-11-09 03:45:30 +08:00
|
|
|
end
|
|
|
|
|
2021-11-26 01:43:42 +08:00
|
|
|
defp render_output({:image, content, mime_type}, %{id: id}) do
|
2022-01-17 03:37:00 +08:00
|
|
|
assigns = %{id: id, content: content, mime_type: mime_type}
|
|
|
|
|
|
|
|
~H"""
|
2022-12-02 19:42:31 +08:00
|
|
|
<Output.ImageComponent.render id={@id} content={@content} mime_type={@mime_type} />
|
2022-01-17 03:37:00 +08:00
|
|
|
"""
|
2021-11-09 03:45:30 +08:00
|
|
|
end
|
|
|
|
|
2022-08-05 20:43:41 +08:00
|
|
|
defp render_output({:js, js_info}, %{id: id, session_id: session_id, client_id: client_id}) do
|
2022-02-28 20:53:33 +08:00
|
|
|
live_component(LivebookWeb.JSViewComponent,
|
|
|
|
id: id,
|
|
|
|
js_view: js_info.js_view,
|
2022-03-23 01:25:42 +08:00
|
|
|
session_id: session_id,
|
2022-08-05 20:43:41 +08:00
|
|
|
client_id: client_id,
|
2022-03-23 01:25:42 +08:00
|
|
|
timeout_message: "Output data no longer available, please reevaluate this cell"
|
2022-02-28 20:53:33 +08:00
|
|
|
)
|
2021-11-26 01:43:42 +08:00
|
|
|
end
|
|
|
|
|
2022-01-17 03:37:00 +08:00
|
|
|
defp render_output({:frame, outputs, _info}, %{
|
|
|
|
id: id,
|
2022-08-05 20:43:41 +08:00
|
|
|
session_id: session_id,
|
2023-02-02 01:49:12 +08:00
|
|
|
session_pid: session_pid,
|
2022-01-17 03:37:00 +08:00
|
|
|
input_values: input_values,
|
2022-08-05 20:43:41 +08:00
|
|
|
client_id: client_id
|
2022-01-17 03:37:00 +08:00
|
|
|
}) do
|
2022-01-17 20:24:59 +08:00
|
|
|
live_component(Output.FrameComponent,
|
2022-01-17 03:37:00 +08:00
|
|
|
id: id,
|
|
|
|
outputs: outputs,
|
|
|
|
session_id: session_id,
|
2023-02-02 01:49:12 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 20:43:41 +08:00
|
|
|
input_values: input_values,
|
|
|
|
client_id: client_id
|
2022-01-17 03:37:00 +08:00
|
|
|
)
|
|
|
|
end
|
|
|
|
|
2022-08-04 06:24:15 +08:00
|
|
|
defp render_output({:tabs, outputs, info}, %{
|
|
|
|
id: id,
|
|
|
|
session_id: session_id,
|
2023-02-06 19:00:13 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 21:54:08 +08:00
|
|
|
input_values: input_values,
|
|
|
|
client_id: client_id
|
2022-08-04 06:24:15 +08:00
|
|
|
}) do
|
|
|
|
{labels, active_idx} =
|
2022-08-30 19:15:55 +08:00
|
|
|
if info.labels == :__pruned__ do
|
2022-08-04 06:24:15 +08:00
|
|
|
{[], nil}
|
|
|
|
else
|
|
|
|
labels =
|
|
|
|
Enum.zip_with(info.labels, outputs, fn label, {output_idx, _} -> {output_idx, label} end)
|
|
|
|
|
|
|
|
active_idx = get_in(outputs, [Access.at(0), Access.elem(0)])
|
|
|
|
|
|
|
|
{labels, active_idx}
|
|
|
|
end
|
|
|
|
|
|
|
|
assigns = %{
|
|
|
|
id: id,
|
|
|
|
active_idx: active_idx,
|
|
|
|
labels: labels,
|
|
|
|
outputs: outputs,
|
|
|
|
session_id: session_id,
|
2023-02-06 19:00:13 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 21:54:08 +08:00
|
|
|
input_values: input_values,
|
|
|
|
client_id: client_id
|
2022-08-04 06:24:15 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
# After pruning we don't render labels and we render only those
|
|
|
|
# outputs that are kept during pruning
|
|
|
|
|
|
|
|
~H"""
|
|
|
|
<div id={@id}>
|
|
|
|
<div class="tabs mb-2" id={"#{@id}-tabs"} phx-update="append">
|
2023-02-23 02:34:54 +08:00
|
|
|
<button
|
|
|
|
:for={{output_idx, label} <- @labels}
|
|
|
|
id={"#{@id}-tabs-#{output_idx}"}
|
|
|
|
class={["tab", output_idx == @active_idx && "active"]}
|
|
|
|
phx-click={
|
|
|
|
JS.remove_class("active", to: "##{@id}-tabs .tab.active")
|
|
|
|
|> JS.add_class("active")
|
|
|
|
|> JS.add_class("hidden", to: "##{@id}-tab-contents > *:not(.hidden)")
|
|
|
|
|> JS.remove_class("hidden", to: "##{@id}-tab-content-#{output_idx}")
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<%= label %>
|
|
|
|
</button>
|
2022-08-04 06:24:15 +08:00
|
|
|
</div>
|
|
|
|
<div id={"#{@id}-tab-contents"} phx-update="append">
|
2023-02-23 02:34:54 +08:00
|
|
|
<% # We use data-keep-attribute, because we know active_idx only on the first render %>
|
|
|
|
<div
|
|
|
|
:for={{output_idx, output} <- @outputs}
|
|
|
|
id={"#{@id}-tab-content-#{output_idx}"}
|
|
|
|
data-tab-content={output_idx}
|
|
|
|
class={[output_idx != @active_idx && "hidden"]}
|
|
|
|
data-keep-attribute="class"
|
|
|
|
>
|
|
|
|
<.outputs
|
|
|
|
outputs={[{output_idx, output}]}
|
|
|
|
dom_id_map={%{}}
|
|
|
|
session_id={@session_id}
|
|
|
|
session_pid={@session_pid}
|
|
|
|
input_values={@input_values}
|
|
|
|
client_id={@client_id}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-08-04 06:24:15 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
|
|
|
defp render_output({:grid, outputs, info}, %{
|
|
|
|
id: id,
|
|
|
|
session_id: session_id,
|
2023-02-06 19:00:13 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 21:54:08 +08:00
|
|
|
input_values: input_values,
|
|
|
|
client_id: client_id
|
2022-08-04 06:24:15 +08:00
|
|
|
}) do
|
2022-08-30 19:15:55 +08:00
|
|
|
columns = info[:columns] || 1
|
|
|
|
gap = info[:gap] || 8
|
2022-08-04 06:24:15 +08:00
|
|
|
|
|
|
|
assigns = %{
|
|
|
|
id: id,
|
2022-08-30 19:15:55 +08:00
|
|
|
columns: columns,
|
|
|
|
gap: gap,
|
2022-08-04 06:24:15 +08:00
|
|
|
outputs: outputs,
|
|
|
|
session_id: session_id,
|
2023-02-06 19:00:13 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 21:54:08 +08:00
|
|
|
input_values: input_values,
|
|
|
|
client_id: client_id
|
2022-08-04 06:24:15 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
~H"""
|
|
|
|
<div id={@id} class="overflow-auto tiny-scrollbar">
|
|
|
|
<div
|
|
|
|
id={"#{@id}-grid"}
|
2022-08-30 19:15:55 +08:00
|
|
|
class="grid grid-cols-2 w-full"
|
|
|
|
style={"grid-template-columns: repeat(#{@columns}, minmax(0, 1fr)); gap: #{@gap}px"}
|
2022-08-04 06:24:15 +08:00
|
|
|
phx-update="append"
|
|
|
|
>
|
2023-02-23 02:34:54 +08:00
|
|
|
<div :for={{output_idx, output} <- @outputs} id={"#{@id}-grid-item-#{output_idx}"}>
|
|
|
|
<.outputs
|
|
|
|
outputs={[{output_idx, output}]}
|
|
|
|
dom_id_map={%{}}
|
|
|
|
session_id={@session_id}
|
|
|
|
session_pid={@session_pid}
|
|
|
|
input_values={@input_values}
|
|
|
|
client_id={@client_id}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-08-04 06:24:15 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2023-01-05 04:44:04 +08:00
|
|
|
defp render_output({:input, attrs}, %{
|
|
|
|
id: id,
|
|
|
|
input_values: input_values,
|
2023-02-02 01:49:12 +08:00
|
|
|
session_pid: session_pid,
|
|
|
|
client_id: client_id
|
2023-01-05 04:44:04 +08:00
|
|
|
}) do
|
2022-08-05 20:43:41 +08:00
|
|
|
live_component(Output.InputComponent,
|
|
|
|
id: id,
|
|
|
|
attrs: attrs,
|
|
|
|
input_values: input_values,
|
2023-02-02 01:49:12 +08:00
|
|
|
session_pid: session_pid,
|
|
|
|
client_id: client_id
|
2022-08-05 20:43:41 +08:00
|
|
|
)
|
2021-11-09 03:45:30 +08:00
|
|
|
end
|
|
|
|
|
2022-08-05 20:43:41 +08:00
|
|
|
defp render_output({:control, attrs}, %{
|
|
|
|
id: id,
|
|
|
|
input_values: input_values,
|
2023-02-02 01:49:12 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 20:43:41 +08:00
|
|
|
client_id: client_id
|
|
|
|
}) do
|
|
|
|
live_component(Output.ControlComponent,
|
|
|
|
id: id,
|
|
|
|
attrs: attrs,
|
|
|
|
input_values: input_values,
|
2023-02-02 01:49:12 +08:00
|
|
|
session_pid: session_pid,
|
2022-08-05 20:43:41 +08:00
|
|
|
client_id: client_id
|
|
|
|
)
|
2021-12-02 23:45:00 +08:00
|
|
|
end
|
|
|
|
|
2022-09-19 05:40:09 +08:00
|
|
|
defp render_output({:error, formatted, {:missing_secret, secret_name}}, %{
|
2022-09-01 07:45:55 +08:00
|
|
|
session_id: session_id
|
|
|
|
}) do
|
2022-10-04 14:46:55 +08:00
|
|
|
assigns = %{
|
|
|
|
message: formatted,
|
|
|
|
secret_name: secret_name,
|
|
|
|
session_id: session_id
|
|
|
|
}
|
2021-11-09 03:45:30 +08:00
|
|
|
|
|
|
|
~H"""
|
2022-09-01 07:45:55 +08:00
|
|
|
<div class="-m-4 space-x-4 py-4">
|
|
|
|
<div
|
2022-09-06 05:59:13 +08:00
|
|
|
class="flex items-center justify-between border-b px-4 pb-4 mb-4"
|
2022-09-01 07:45:55 +08:00
|
|
|
style="color: var(--ansi-color-red);"
|
|
|
|
>
|
2022-09-06 05:59:13 +08:00
|
|
|
<div class="flex space-x-2 font-editor">
|
2022-09-01 07:45:55 +08:00
|
|
|
<.remix_icon icon="close-circle-line" />
|
2022-09-19 05:40:09 +08:00
|
|
|
<span>Missing secret <%= inspect(@secret_name) %></span>
|
2022-09-01 07:45:55 +08:00
|
|
|
</div>
|
2023-02-23 02:34:54 +08:00
|
|
|
<.link
|
|
|
|
patch={~p"/sessions/#{@session_id}/secrets?secret_name=#{@secret_name}"}
|
|
|
|
class="button-base button-gray"
|
|
|
|
>
|
|
|
|
Add secret
|
|
|
|
</.link>
|
2022-09-01 07:45:55 +08:00
|
|
|
</div>
|
|
|
|
<%= render_formatted_error_message(@message) %>
|
|
|
|
</div>
|
2021-11-09 03:45:30 +08:00
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2022-09-01 07:45:55 +08:00
|
|
|
defp render_output({:error, formatted, _type}, %{}) do
|
|
|
|
render_formatted_error_message(formatted)
|
|
|
|
end
|
|
|
|
|
2021-11-26 01:43:42 +08:00
|
|
|
defp render_output(output, %{}) do
|
2022-01-26 04:55:24 +08:00
|
|
|
render_error_message("""
|
2021-11-09 03:45:30 +08:00
|
|
|
Unknown output format: #{inspect(output)}. If you're using Kino,
|
|
|
|
you may want to update Kino and Livebook to the latest version.
|
|
|
|
""")
|
|
|
|
end
|
|
|
|
|
2022-01-26 04:55:24 +08:00
|
|
|
defp render_error_message(message) do
|
2021-11-09 03:45:30 +08:00
|
|
|
assigns = %{message: message}
|
|
|
|
|
|
|
|
~H"""
|
2022-08-02 21:51:02 +08:00
|
|
|
<div
|
2022-10-07 18:00:39 +08:00
|
|
|
class="whitespace-pre-wrap break-words font-editor text-red-600"
|
2022-08-02 21:51:02 +08:00
|
|
|
role="complementary"
|
|
|
|
aria-label="error message"
|
2022-08-03 00:22:49 +08:00
|
|
|
phx-no-format
|
|
|
|
><%= @message %></div>
|
2021-11-09 03:45:30 +08:00
|
|
|
"""
|
|
|
|
end
|
2022-09-01 07:45:55 +08:00
|
|
|
|
|
|
|
defp render_formatted_error_message(formatted) do
|
|
|
|
assigns = %{message: formatted}
|
|
|
|
|
|
|
|
~H"""
|
|
|
|
<div
|
2022-10-07 18:00:39 +08:00
|
|
|
class="whitespace-pre-wrap break-words font-editor text-gray-500"
|
2022-09-01 07:45:55 +08:00
|
|
|
role="complementary"
|
|
|
|
aria-label="error"
|
|
|
|
phx-no-format
|
|
|
|
><%= ansi_string_to_html(@message) %></div>
|
|
|
|
"""
|
|
|
|
end
|
2021-11-09 03:45:30 +08:00
|
|
|
end
|