From f5827d11b0ab961c6feed34e1701159f298d73c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Thu, 2 Sep 2021 14:53:44 +0200
Subject: [PATCH] Squeeze tooltip in the sections panel (#536)

---
 lib/livebook/utils.ex                 | 41 +++++++++++++++++++++++++++
 lib/livebook_web/live/session_live.ex |  9 +++++-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/lib/livebook/utils.ex b/lib/livebook/utils.ex
index b36f71abd..c7780c08d 100644
--- a/lib/livebook/utils.ex
+++ b/lib/livebook/utils.ex
@@ -196,4 +196,45 @@ defmodule Livebook.Utils do
     end)
     |> URI.to_string()
   end
+
+  @doc ~S"""
+  Wraps the given line into lines that fit in `width` characters.
+
+  Words longer than `width` are not broken apart.
+
+  ## Examples
+
+      iex> Livebook.Utils.wrap_line("cat on the roof", 7)
+      "cat on\nthe\nroof"
+
+      iex> Livebook.Utils.wrap_line("cat in the cup", 7)
+      "cat in\nthe cup"
+
+      iex> Livebook.Utils.wrap_line("cat in the cup", 2)
+      "cat\nin\nthe\ncup"
+  """
+  @spec wrap_line(String.t(), pos_integer()) :: String.t()
+  def wrap_line(line, width) do
+    line
+    |> String.split()
+    |> Enum.reduce({[[]], 0}, fn part, {[group | groups], group_size} ->
+      size = String.length(part)
+
+      cond do
+        group == [] ->
+          {[[part] | groups], size}
+
+        group_size + 1 + size <= width ->
+          {[[part, " " | group] | groups], group_size + 1 + size}
+
+        true ->
+          {[[part], group | groups], size}
+      end
+    end)
+    |> elem(0)
+    |> Enum.map(&Enum.reverse/1)
+    |> Enum.reverse()
+    |> Enum.intersperse("\n")
+    |> IO.iodata_to_binary()
+  end
 end
diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex
index e49db7ea7..c841cf83e 100644
--- a/lib/livebook_web/live/session_live.ex
+++ b/lib/livebook_web/live/session_live.ex
@@ -121,7 +121,9 @@ defmodule LivebookWeb.SessionLive do
                   data-section-id={section_item.id}>
                   <span><%= section_item.name %></span>
                   <%= if section_item.parent do %>
-                    <span class="tooltip right" aria-label={"Branches from\n”#{section_item.parent.name}”"}>
+                    <%# Note: the container has overflow-y auto, so we cannot set overflow-x visible,
+                        consequently we show the tooltip at the bottom wrapped to a fixed number of characters %>
+                    <span class="tooltip bottom" aria-label={parent_branch_tooltip(section_item.parent.name)}>
                       <.remix_icon icon="git-branch-line" class="text-lg font-normal flip-horizontally leading-none" />
                     </span>
                   <% end %>
@@ -341,6 +343,11 @@ defmodule LivebookWeb.SessionLive do
   defp settings_component_for(%Cell.Input{}),
     do: LivebookWeb.SessionLive.InputCellSettingsComponent
 
+  defp parent_branch_tooltip(parent_name) do
+    wrapped_name = Livebook.Utils.wrap_line("”" <> parent_name <> "”", 16)
+    "Branches from\n#{wrapped_name}"
+  end
+
   @impl true
   def handle_params(%{"cell_id" => cell_id}, _url, socket) do
     {:ok, cell, _} = Notebook.fetch_cell_and_section(socket.private.data.notebook, cell_id)