livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-09-10 15:04:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add custom view option to hide code (#2889)

Browse source
This commit is contained in:
Jonatan Kłosko 2024-12-06 10:38:58 +01:00 • committed by GitHub
parent 34364722a8
commit 832c33d61d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 209 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
assets/css/js_interop.css
View file

@ -151,6 +151,16 @@ solely client-side operations.
@apply hidden; @apply hidden;
} }
[data-el-cell][data-type="smart"]:not([data-js-source-visible])
[data-el-cell-indicators] {
@apply static flex justify-end pt-2;
}
[data-el-cell][data-type="smart"]:not([data-js-source-visible])
[data-el-cell-indicator] {
@apply bg-gray-50 border-gray-200 text-gray-500;
}
[data-el-session] [data-el-session]
[data-el-cell][data-type="setup"]:not( [data-el-cell][data-type="setup"]:not(
[data-eval-validity="fresh"]:not([data-js-empty]) [data-eval-validity="fresh"]:not([data-js-empty])
@ -159,6 +169,14 @@ solely client-side operations.
@apply h-0 overflow-hidden; @apply h-0 overflow-hidden;
} }
[data-el-session]
[data-el-cell][data-type="setup"]:not(
[data-eval-validity="fresh"]:not([data-js-empty])
):not([data-eval-errored]):not([data-js-changed]):not([data-js-focused])
[data-el-cell-indicator] {
@apply bg-gray-50 border-gray-200 text-gray-500;
}
[data-el-session] [data-el-session]
[data-el-cell][data-type="setup"][data-js-focused] [data-el-cell][data-type="setup"][data-js-focused]
[data-el-info-box], [data-el-info-box],
@ -341,6 +359,81 @@ solely client-side operations.
@apply hidden; @apply hidden;
} }
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell]
[data-el-cell-indicator],
[data-js-hide-code][data-el-session]
[data-el-cell]:not([data-js-focused])
[data-el-cell-indicator] {
@apply bg-gray-50 border-gray-200 text-gray-500;
}
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="code"]
[data-el-editor-box],
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="code"]:not([data-js-focused])
[data-el-editor-box] {
@apply hidden;
}
[data-js-hide-code][data-el-session]
[data-el-cell][data-type="setup"]
[data-el-info-box],
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="setup"]
[data-el-editor-box],
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="setup"]:not([data-js-focused])
[data-el-editor-box] {
@apply hidden;
}
[data-js-hide-code] [data-el-cell][data-type="smart"] [data-el-ui-box] {
@apply hidden;
}
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="smart"]
[data-el-editor-box],
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="smart"]:not([data-js-focused])
[data-el-editor-box] {
@apply hidden;
}
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="code"]
[data-el-cell-body-root]:after,
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="code"]:not([data-js-focused])
[data-el-cell-body-root]:after,
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="setup"]
[data-el-cell-body-root]:after,
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="setup"]:not([data-js-focused])
[data-el-cell-body-root]:after,
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="smart"]
[data-el-cell-body-root]:after,
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="smart"]:not([data-js-focused])
[data-el-cell-body-root]:after {
content: "Code";
@apply flex py-2 px-3 border border-gray-200 rounded-lg text-sm text-gray-400 font-medium;
}
[data-js-hide-code][data-el-session]:not([data-js-insert-mode])
[data-el-cell][data-type="smart"]
[data-el-cell-indicators],
[data-js-hide-code][data-el-session][data-js-insert-mode]
[data-el-cell][data-type="smart"]:not([data-js-focused])
[data-el-cell-indicators] {
@apply absolute bottom-2 right-2;
}
[data-js-spotlight] [data-js-spotlight]
:is( :is(
[data-el-section-headline]:not([data-js-focused]), [data-el-section-headline]:not([data-js-focused]),

7
assets/js/hooks/custom_view_settings.js
View file

@ -13,6 +13,9 @@ const CustomViewSettings = {
const customMarkdownCheckbox = this.el.querySelector( const customMarkdownCheckbox = this.el.querySelector(
`[name="show_markdown"][value="true"]`, `[name="show_markdown"][value="true"]`,
); );
const customCodeCheckbox = this.el.querySelector(
`[name="show_code"][value="true"]`,
);
const customOutputCheckbox = this.el.querySelector( const customOutputCheckbox = this.el.querySelector(
`[name="show_output"][value="true"]`, `[name="show_output"][value="true"]`,
); );
@ -22,6 +25,7 @@ const CustomViewSettings = {
customSectionCheckbox.checked = settings.custom_view_show_section; customSectionCheckbox.checked = settings.custom_view_show_section;
customMarkdownCheckbox.checked = settings.custom_view_show_markdown; customMarkdownCheckbox.checked = settings.custom_view_show_markdown;
customCodeCheckbox.checked = settings.custom_view_show_code;
customOutputCheckbox.checked = settings.custom_view_show_output; customOutputCheckbox.checked = settings.custom_view_show_output;
customSpotlightCheckbox.checked = settings.custom_view_spotlight; customSpotlightCheckbox.checked = settings.custom_view_spotlight;
@ -31,6 +35,9 @@ const CustomViewSettings = {
customMarkdownCheckbox.addEventListener("change", (event) => { customMarkdownCheckbox.addEventListener("change", (event) => {
settingsStore.update({ custom_view_show_markdown: event.target.checked }); settingsStore.update({ custom_view_show_markdown: event.target.checked });
}); });
customCodeCheckbox.addEventListener("change", (event) => {
settingsStore.update({ custom_view_show_code: event.target.checked });
});
customOutputCheckbox.addEventListener("change", (event) => { customOutputCheckbox.addEventListener("change", (event) => {
settingsStore.update({ custom_view_show_output: event.target.checked }); settingsStore.update({ custom_view_show_output: event.target.checked });
}); });

5
assets/js/hooks/session.js
View file

@ -1131,6 +1131,7 @@ const Session = {
this.setView(view, { this.setView(view, {
showSection: false, showSection: false,
showMarkdown: false, showMarkdown: false,
showCode: true,
showOutput: true, showOutput: true,
spotlight: false, spotlight: false,
}); });
@ -1138,6 +1139,7 @@ const Session = {
this.setView(view, { this.setView(view, {
showSection: true, showSection: true,
showMarkdown: true, showMarkdown: true,
showCode: true,
showOutput: true, showOutput: true,
spotlight: true, spotlight: true,
}); });
@ -1147,6 +1149,7 @@ const Session = {
this.setView(view, { this.setView(view, {
showSection: settings.custom_view_show_section, showSection: settings.custom_view_show_section,
showMarkdown: settings.custom_view_show_markdown, showMarkdown: settings.custom_view_show_markdown,
showCode: settings.custom_view_show_code,
showOutput: settings.custom_view_show_output, showOutput: settings.custom_view_show_output,
spotlight: settings.custom_view_spotlight, spotlight: settings.custom_view_spotlight,
}); });
@ -1180,6 +1183,7 @@ const Session = {
this.el.toggleAttribute("data-js-hide-section", !options.showSection); this.el.toggleAttribute("data-js-hide-section", !options.showSection);
this.el.toggleAttribute("data-js-hide-markdown", !options.showMarkdown); this.el.toggleAttribute("data-js-hide-markdown", !options.showMarkdown);
this.el.toggleAttribute("data-js-hide-code", !options.showCode);
this.el.toggleAttribute("data-js-hide-output", !options.showOutput); this.el.toggleAttribute("data-js-hide-output", !options.showOutput);
this.el.toggleAttribute("data-js-spotlight", options.spotlight); this.el.toggleAttribute("data-js-spotlight", options.spotlight);
}, },
@ -1192,6 +1196,7 @@ const Session = {
this.el.removeAttribute("data-js-hide-section"); this.el.removeAttribute("data-js-hide-section");
this.el.removeAttribute("data-js-hide-markdown"); this.el.removeAttribute("data-js-hide-markdown");
this.el.removeAttribute("data-js-hide-code");
this.el.removeAttribute("data-js-hide-output"); this.el.removeAttribute("data-js-hide-output");
this.el.removeAttribute("data-js-spotlight"); this.el.removeAttribute("data-js-spotlight");
}, },

1
assets/js/lib/settings.js
View file

@ -30,6 +30,7 @@ const DEFAULTSETTINGS = {
editor_mode: EDITOR_MODE.default, editor_mode: EDITOR_MODE.default,
custom_view_show_section: true, custom_view_show_section: true,
custom_view_show_markdown: true, custom_view_show_markdown: true,
custom_view_show_code: true,
custom_view_show_output: true, custom_view_show_output: true,
custom_view_spotlight: false, custom_view_spotlight: false,
}; };

204
lib/livebook_web/live/session_live/cell_component.ex
View file

@ -109,16 +109,18 @@ defmodule LivebookWeb.SessionLive.CellComponent do
</:secondary> </:secondary>
</.cell_actions> </.cell_actions>
<.cell_body> <.cell_body>
<div class="relative"> <div class="relative" data-el-cell-body-root>
<.cell_editor <div class="relative" data-el-editor-box>
cell_id={@cell_view.id} <.cell_editor
tag="primary" cell_id={@cell_view.id}
empty={@cell_view.empty} tag="primary"
language={@cell_view.language} empty={@cell_view.empty}
intellisense language={@cell_view.language}
/> intellisense
<div class="absolute bottom-2 right-2"> />
<.cell_indicators id={@cell_view.id} variant="editor" cell_view={@cell_view} /> </div>
<div class="absolute bottom-2 right-2" data-el-cell-indicators>
<.cell_indicators id={@cell_view.id} cell_view={@cell_view} />
</div> </div>
</div> </div>
<.doctest_summary cell_id={@cell_view.id} doctest_summary={@cell_view.eval.doctest_summary} /> <.doctest_summary cell_id={@cell_view.id} doctest_summary={@cell_view.eval.doctest_summary} />
@ -151,14 +153,13 @@ defmodule LivebookWeb.SessionLive.CellComponent do
</:secondary> </:secondary>
</.cell_actions> </.cell_actions>
<.cell_body> <.cell_body>
<div data-el-info-box> <div class="relative" data-el-cell-body-root>
<div class="p-3 flex items-center justify-between border border-gray-200 text-sm text-gray-400 rounded-lg"> <div data-el-info-box>
<span class="font-medium">Notebook dependencies and setup</span> <div class="py-2 px-3 flex items-center justify-between border border-gray-200 text-sm text-gray-400 rounded-lg">
<.cell_indicators id={"#{@cell_view.id}-1"} variant="default" cell_view={@cell_view} /> <span class="font-medium">Notebook dependencies and setup</span>
</div>
</div> </div>
</div> <div data-el-editor-box>
<div data-el-editor-box>
<div class="relative">
<.cell_editor <.cell_editor
cell_id={@cell_view.id} cell_id={@cell_view.id}
tag="primary" tag="primary"
@ -166,18 +167,18 @@ defmodule LivebookWeb.SessionLive.CellComponent do
language="elixir" language="elixir"
intellisense intellisense
/> />
<div class="absolute bottom-2 right-2">
<.cell_indicators id={"#{@cell_view.id}-2"} variant="editor" cell_view={@cell_view} />
</div>
</div> </div>
<.evaluation_outputs <div class="absolute bottom-2 right-2" data-el-cell-indicators>
outputs={@streams.outputs} <.cell_indicators id={@cell_view.id} cell_view={@cell_view} />
cell_view={@cell_view} </div>
session_id={@session_id}
session_pid={@session_pid}
client_id={@client_id}
/>
</div> </div>
<.evaluation_outputs
outputs={@streams.outputs}
cell_view={@cell_view}
session_id={@session_id}
session_pid={@session_pid}
client_id={@client_id}
/>
</.cell_body> </.cell_body>
""" """
end end
@ -206,74 +207,72 @@ defmodule LivebookWeb.SessionLive.CellComponent do
</:secondary> </:secondary>
</.cell_actions> </.cell_actions>
<.cell_body> <.cell_body>
<div data-el-ui-box> <div class="relative" data-el-cell-body-root>
<%= case @cell_view.status do %> <div data-el-ui-box>
<% :started -> %> <%= case @cell_view.status do %>
<div class={ <% :started -> %>
<div class={
"flex #{if(@cell_view.editor && @cell_view.editor.placement == :top, do: "flex-col-reverse", else: "flex-col")}" "flex #{if(@cell_view.editor && @cell_view.editor.placement == :top, do: "flex-col-reverse", else: "flex-col")}"
}> }>
<.live_component <.live_component
module={LivebookWeb.JSViewComponent} module={LivebookWeb.JSViewComponent}
id={@cell_view.id} id={@cell_view.id}
js_view={@cell_view.js_view} js_view={@cell_view.js_view}
session_id={@session_id} session_id={@session_id}
client_id={@client_id} client_id={@client_id}
/> />
<.cell_editor <.cell_editor
:if={@cell_view.editor} :if={@cell_view.editor}
cell_id={@cell_view.id} cell_id={@cell_view.id}
tag="secondary" tag="secondary"
empty={@cell_view.editor.empty} empty={@cell_view.editor.empty}
language={@cell_view.editor.language} language={@cell_view.editor.language}
rounded={@cell_view.editor.placement} rounded={@cell_view.editor.placement}
intellisense={@cell_view.editor.language == "elixir"} intellisense={@cell_view.editor.language == "elixir"}
hidden={not @cell_view.editor.visible} hidden={not @cell_view.editor.visible}
/> />
</div> </div>
<% :dead -> %> <% :dead -> %>
<div class="info-box"> <div class="info-box">
<%= if @installing? do %> <%= if @installing? do %>
Waiting for dependency installation to complete... Waiting for dependency installation to complete...
<% else %> <% else %>
Run the notebook setup to show the contents of this Smart cell. Run the notebook setup to show the contents of this Smart cell.
<% end %> <% end %>
</div> </div>
<% :down -> %> <% :down -> %>
<div class="info-box flex justify-between items-center"> <div class="info-box flex justify-between items-center">
<span> <span>
The Smart cell crashed unexpectedly, this is most likely a bug. The Smart cell crashed unexpectedly, this is most likely a bug.
</span> </span>
<.button <.button
color="gray" color="gray"
phx-click={JS.push("recover_smart_cell", value: %{cell_id: @cell_view.id})} phx-click={JS.push("recover_smart_cell", value: %{cell_id: @cell_view.id})}
> >
Restart Smart cell Restart Smart cell
</.button> </.button>
</div> </div>
<% :starting -> %> <% :starting -> %>
<div class="delay-200"> <div class="delay-200">
<.content_skeleton empty={false} /> <.content_skeleton empty={false} />
</div> </div>
<% end %> <% end %>
<div class="flex flex-col items-end space-y-2 text-gray-400">
<div></div>
<.cell_indicators id={"#{@cell_view.id}-1"} variant="default" cell_view={@cell_view} />
</div> </div>
</div> <div data-el-editor-box>
<div data-el-editor-box> <div class="relative">
<div class="relative"> <.cell_editor
<.cell_editor cell_id={@cell_view.id}
cell_id={@cell_view.id} tag="primary"
tag="primary" empty={@cell_view.empty}
empty={@cell_view.empty} language="elixir"
language="elixir" intellisense
intellisense read_only
read_only />
/>
<div class="absolute bottom-2 right-2">
<.cell_indicators id={"#{@cell_view.id}-2"} variant="editor" cell_view={@cell_view} />
</div> </div>
</div> </div>
<div class="absolute bottom-2 right-2" data-el-cell-indicators>
<.cell_indicators id={@cell_view.id} cell_view={@cell_view} />
</div>
</div> </div>
<.evaluation_outputs <.evaluation_outputs
outputs={@streams.outputs} outputs={@streams.outputs}
@ -683,24 +682,25 @@ defmodule LivebookWeb.SessionLive.CellComponent do
defp cell_indicators(assigns) do defp cell_indicators(assigns) do
~H""" ~H"""
<div class="flex gap-1"> <div class="flex gap-1">
<div :if={has_status?(@cell_view)} class={cell_indicator_container_class(@variant)}> <.cell_indicator :if={has_status?(@cell_view)}>
<.cell_status id={@id} cell_view={@cell_view} /> <.cell_status id={@id} cell_view={@cell_view} />
</div> </.cell_indicator>
<div class={cell_indicator_container_class(@variant)}> <.cell_indicator>
<.language_icon language={cell_language(@cell_view)} class="w-3 h-3" /> <.language_icon language={cell_language(@cell_view)} class="w-3 h-3" />
</div> </.cell_indicator>
</div> </div>
""" """
end end
defp cell_indicator_container_class(variant) do defp cell_indicator(assigns) do
[ ~H"""
"px-1.5 h-[22px] rounded-lg flex items-center", <div
case variant do data-el-cell-indicator
"default" -> "bg-gray-50 border border-gray-200 text-gray-500 px-1.5 h-[22px]" class="px-1.5 h-[22px] rounded-lg flex items-center border bg-editor-lighter border-editor text-editor"
"editor" -> "bg-editor-lighter border border-editor text-editor px-1.5 h-[22px]" >
end {render_slot(@inner_block)}
] </div>
"""
end end
defp cell_language(%{language: language}), do: Atom.to_string(language) defp cell_language(%{language: language}), do: Atom.to_string(language)

1
lib/livebook_web/live/session_live/custom_view_component.ex
View file

@ -23,6 +23,7 @@ defmodule LivebookWeb.SessionLive.CustomViewComponent do
> >
<.switch_field name="show_section" label="Show sections" value={false} /> <.switch_field name="show_section" label="Show sections" value={false} />
<.switch_field name="show_markdown" label="Show markdown" value={false} /> <.switch_field name="show_markdown" label="Show markdown" value={false} />
<.switch_field name="show_code" label="Show code" value={false} />
<.switch_field name="show_output" label="Show outputs" value={false} /> <.switch_field name="show_output" label="Show outputs" value={false} />
<.switch_field name="spotlight" label="Spotlight focused" value={false} /> <.switch_field name="spotlight" label="Spotlight focused" value={false} />
</div> </div>