Introduces the output size for cells (#3160)

Co-authored-by: Hugo Baraúna <hugo.barauna@gmail.com>
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

Author: 3 people

assets/css/js_interop.css

@@ -327,22 +327,46 @@ server in solely client-side operations.
 }
 
 [data-el-notebook] {
-  /* Outputs (both session and app) */
+  /* Output size (both session and app) */
 
-  [data-el-cell][data-js-amplified] {
-    [data-el-amplify-outputs-button] > button {
-      @apply bg-gray-100 text-gray-900;
+  [data-output-size="default"][data-el-app-outputs-container] {
+    @apply w-full mx-auto;
+
+    max-width: var(--breakpoint-lg);
+  }
+
+  [data-output-size="wide"] {
+    &[data-el-app-outputs-container] {
+      @apply w-full mx-auto;
+
+      max-width: 90rem;
+    }
+
+    [data-el-outputs-container] {
+      @apply bg-white m-0 relative;
+
+      width: 90rem;
+      left: calc(-45rem + 50%);
+    }
+  }
+
+  [data-output-size="full"] {
+    &[data-el-app-outputs-container] {
+      @apply w-full mx-auto;
+
+      max-width: 92vw;
     }
 
     [data-el-outputs-container] {
-      @apply bg-white m-0 py-16;
+      @apply bg-white m-0 relative;
 
-      width: 90vw;
-      position: relative;
-      left: calc(-45vw + 50%);
+      width: 92vw;
+      left: calc(-46vw + 50%);
     }
   }
 
+  /* Outputs (both session and app) */
+
   [data-el-output][data-border] {
     @apply p-4 border border-t-0 border-gray-200 divide-y divide-gray-200;
   }

assets/js/hooks/cell.js

@@ -39,18 +39,6 @@ const Cell = {
 
     this.updateInsertModeAvailability();
 
-    // Setup action handlers
-
-    const amplifyButton = this.el.querySelector(
-      `[data-el-amplify-outputs-button]`,
-    );
-
-    if (amplifyButton) {
-      amplifyButton.addEventListener("click", (event) => {
-        this.el.toggleAttribute("data-js-amplified");
-      });
-    }
-
     if (this.props.type === "smart") {
       const toggleSourceButton = this.el.querySelector(
         `[data-el-toggle-source-button]`,

assets/js/hooks/js_view.js

@@ -225,6 +225,8 @@ const JSView = {
       `[data-el-notebook-content]`,
     );
 
+    const outputsContainerEl = this.el.closest(`[data-el-outputs-container]`);
+
     // Most placeholder position changes are accompanied by changes
     // to the notebook content element height (adding cells, inserting
     // newlines in the editor, etc). On the other hand, toggling the
@@ -238,6 +240,10 @@ const JSView = {
     resizeObserver.observe(notebookContentEl);
     resizeObserver.observe(notebookEl);
 
+    // We also observe the outputs container, since the outputs width is
+    // configurable and can change dynamically.
+    if (outputsContainerEl) resizeObserver.observe(outputsContainerEl);
+
     // The placeholder may be hidden, in which case we want to hide
     // the iframe as well. This could be the case when viewing the
     // Smart cell source or in tabs output. It is possible that the

lib/livebook/live_markdown/export.ex

@@ -211,23 +211,34 @@ defmodule Livebook.LiveMarkdown.Export do
   end
 
   defp render_cell(%Cell.Smart{} = cell, ctx) do
+    metadata =
+      Map.merge(
+        cell_metadata(cell),
+        %{
+          livebook_object: "smart_cell",
+          kind: cell.kind,
+          # Attributes may include arbitrary values, including sequences
+          # like "-->" that would mess our format, so we always encode them
+          attrs: cell.attrs |> JSON.encode!(&encode_sorting/2) |> Base.encode64(padding: false),
+          chunks: cell.chunks && Enum.map(cell.chunks, &Tuple.to_list/1)
+        }
+      )
+
     %{Cell.Code.new() | source: cell.source, outputs: cell.outputs}
     |> render_cell(ctx)
-    |> prepend_metadata(%{
-      "livebook_object" => "smart_cell",
-      "kind" => cell.kind,
-      # Attributes may include arbitrary values, including sequences
-      # like "-->" that would mess our format, so we always encode them
-      "attrs" => cell.attrs |> JSON.encode!(&encode_sorting/2) |> Base.encode64(padding: false),
-      "chunks" => cell.chunks && Enum.map(cell.chunks, &Tuple.to_list/1)
-    })
+    |> prepend_metadata(metadata)
   end
 
   defp cell_metadata(%Cell.Code{} = cell) do
-    keys = [:reevaluate_automatically, :continue_on_error]
+    keys = [:reevaluate_automatically, :continue_on_error, :output_size]
     put_unless_default(%{}, Map.take(cell, keys), Map.take(Cell.Code.new(), keys))
   end
 
+  defp cell_metadata(%Cell.Smart{} = cell) do
+    keys = [:output_size]
+    put_unless_default(%{}, Map.take(cell, keys), Map.take(Cell.Smart.new(), keys))
+  end
+
   defp cell_metadata(_cell), do: %{}
 
   defp render_outputs(cell, ctx) do

lib/livebook/live_markdown/import.ex

@@ -248,7 +248,7 @@ defmodule Livebook.LiveMarkdown.Import do
     {outputs, output_counter} = Notebook.index_outputs(outputs, output_counter)
     %{"kind" => kind, "attrs" => attrs} = data
 
-    attrs =
+    smart_cell_attrs =
       case attrs do
         # Import map attributes for backward compatibility
         %{} ->
@@ -259,15 +259,18 @@ defmodule Livebook.LiveMarkdown.Import do
       end
 
     chunks = if(chunks = data["chunks"], do: Enum.map(chunks, &List.to_tuple/1))
+    attrs = cell_metadata_to_attrs(:smart, data)
 
-    cell = %{
-      Notebook.Cell.new(:smart)
-      | source: source,
-        chunks: chunks,
-        outputs: outputs,
-        kind: kind,
-        attrs: attrs
-    }
+    cell =
+      %{
+        Notebook.Cell.new(:smart)
+        | source: source,
+          chunks: chunks,
+          outputs: outputs,
+          kind: kind,
+          attrs: smart_cell_attrs
+      }
+      |> Map.merge(attrs)
 
     build_notebook(elems, [cell | cells], sections, messages, output_counter)
   end
@@ -559,6 +562,19 @@ defmodule Livebook.LiveMarkdown.Import do
       {"continue_on_error", continue_on_error}, attrs ->
         Map.put(attrs, :continue_on_error, continue_on_error)
 
+      {"output_size", output_size}, attrs when output_size in ["full", "wide"] ->
+        Map.put(attrs, :output_size, String.to_atom(output_size))
+
+      _entry, attrs ->
+        attrs
+    end)
+  end
+
+  defp cell_metadata_to_attrs(:smart, metadata) do
+    Enum.reduce(metadata, %{}, fn
+      {"output_size", output_size}, attrs when output_size in ["full", "wide"] ->
+        Map.put(attrs, :output_size, String.to_atom(output_size))
+
       _entry, attrs ->
         attrs
     end)

lib/livebook/notebook/cell.ex

@@ -16,6 +16,8 @@ defmodule Livebook.Notebook.Cell do
 
   @type indexed_output :: {non_neg_integer(), Livebook.Runtime.output()}
 
+  @type output_size :: :default | :wide | :full
+
   @setup_cell_id_prefix "setup"
   @setup_cell_id "setup"
 
@@ -111,4 +113,16 @@ defmodule Livebook.Notebook.Cell do
   """
   @spec extra_setup_cell_id(atom()) :: id()
   def extra_setup_cell_id(language), do: "#{@setup_cell_id_prefix}-#{language}"
+
+  @doc """
+  Return the list of supported output sizes.
+  """
+  @spec output_sizes() :: list(%{name: String.t(), size: String.t()})
+  def output_sizes() do
+    [
+      %{name: "Regular width", size: "default"},
+      %{name: "Wide width", size: "wide"},
+      %{name: "Full-width", size: "full"}
+    ]
+  end
 end

lib/livebook/notebook/cell/code.ex

@@ -7,6 +7,7 @@ defmodule Livebook.Notebook.Cell.Code do
   defstruct [
     :id,
     :source,
+    :output_size,
     :outputs,
     :language,
     :reevaluate_automatically,
@@ -19,6 +20,7 @@ defmodule Livebook.Notebook.Cell.Code do
   @type t :: %__MODULE__{
           id: Cell.id(),
           source: String.t() | :__pruned__,
+          output_size: Cell.output_size(),
           outputs: list(Cell.indexed_output()),
           language: Livebook.Runtime.language(),
           reevaluate_automatically: boolean(),
@@ -33,6 +35,7 @@ defmodule Livebook.Notebook.Cell.Code do
     %__MODULE__{
       id: Utils.random_id(),
       source: "",
+      output_size: :default,
       outputs: [],
       language: :elixir,
       reevaluate_automatically: false,

lib/livebook/notebook/cell/smart.ex

@@ -13,6 +13,7 @@ defmodule Livebook.Notebook.Cell.Smart do
   defstruct [
     :id,
     :source,
+    :output_size,
     :chunks,
     :outputs,
     :reevaluate_automatically,
@@ -28,6 +29,7 @@ defmodule Livebook.Notebook.Cell.Smart do
   @type t :: %__MODULE__{
           id: Cell.id(),
           source: String.t() | :__pruned__,
+          output_size: Cell.output_size(),
           chunks: Livebook.Runtime.chunks() | nil,
           outputs: list(Cell.indexed_output()),
           reevaluate_automatically: boolean(),
@@ -47,6 +49,7 @@ defmodule Livebook.Notebook.Cell.Smart do
     %__MODULE__{
       id: Utils.random_id(),
       source: "",
+      output_size: :default,
       chunks: nil,
       outputs: [],
       reevaluate_automatically: false,

lib/livebook/session/data_sync.ex

@@ -128,7 +128,9 @@ defmodule Livebook.Session.DataSync do
   defp key(%Cell.Smart{} = cell), do: {:smart_cell, cell.source}
 
   defp cell_syncable_fields(%Cell.Code{}),
-    do: [:language, :reevaluate_automatically, :continue_on_error]
+    do: [:language, :reevaluate_automatically, :continue_on_error, :output_size]
+
+  defp cell_syncable_fields(%Cell.Smart{}), do: [:output_size]
 
   defp cell_syncable_fields(_other), do: []
 
@@ -399,8 +401,15 @@ defmodule Livebook.Session.DataSync do
           source_op ++ attrs_op
 
         %Cell.Smart{} ->
-          # Smart cells are controlled by Livebook, we ignore external edits.
-          []
+          # Smart cells are controlled by Livebook, we only sync with
+          # common cell-related metadata, anything else must be ignored.
+          updated_attrs = attrs_diff(before_cell, after_cell, cell_syncable_fields(before_cell))
+
+          if updated_attrs != %{} do
+            [{:set_cell_attributes, acc.cid, before_cell.id, updated_attrs}]
+          else
+            []
+          end
       end
 
     acc = %{acc | cell_idx: acc.cell_idx + 1}

lib/livebook_web/live/app_session_live.ex

@@ -159,7 +159,7 @@ defmodule LivebookWeb.AppSessionLive do
           </.menu_item>
         </.menu>
       </div>
-      <div class="w-full max-w-(--breakpoint-lg) py-4 mx-auto" data-el-notebook-content>
+      <div class="w-full py-4 mx-auto" data-el-notebook-content>
         <div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
         <div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200 pr-20 md:pr-0">
           <h1 class="text-3xl font-semibold text-gray-800">
@@ -178,7 +178,7 @@ defmodule LivebookWeb.AppSessionLive do
           <%= if @data_view.app_status.execution == :error do %>
             <div class={[
               "flex justify-between items-center px-4 py-2 border-l-4 shadow-custom-1",
-              "text-red-400 border-red-400"
+              "text-red-400 border-red-400 w-full mx-auto max-w-(--breakpoint-lg)"
             ]}>
               <div>
                 Something went wrong
@@ -490,7 +490,8 @@ defmodule LivebookWeb.AppSessionLive do
             id: cell.id,
             input_views: input_views_for_cell(cell, data, changed_input_ids),
             outputs: filter_outputs(cell.outputs, data.notebook.app_settings.output_type),
-            outputs_batch_number: data.cell_infos[cell.id].eval.outputs_batch_number
+            outputs_batch_number: data.cell_infos[cell.id].eval.outputs_batch_number,
+            output_size: cell.output_size
           }
         end,
       app_status: data.app_data.status,