Allow parameterizing title of mermaid graph/download

livebook-dev · Oct 13, 2024 · 5e5b292 · 5e5b292
1 parent 1221c26
commit 5e5b292
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/assets/packs/mermaid/main.js b/assets/packs/mermaid/main.js
@@ -3,25 +3,26 @@ import "./main.css";
 
 mermaid.initialize({ startOnLoad: false });
 
-export function init(ctx, content) {
+export function init(ctx, {content, title}) {
   ctx.importCSS("main.css")
 
   function render() {
     mermaid.render("graph1", content).then(({ svg, bindFunctions }) => {
       ctx.root.innerHTML = `
         <div id="mermaid">
           ${svg}
-          <button id="download" title="Download">⇩</button>
+          <button id="download" title="Download ${title}">⇩</button>
         </div>
-      `
+      `;
+
       ctx.root.querySelector("#download").addEventListener("click", (event) => {
         var binaryData = [];
         binaryData.push(svg);
         const downloadBlob = URL.createObjectURL(new Blob(binaryData, {type: "image/svg+xml"}));
 
         const downloadLink = document.createElement("a");
         downloadLink.href = downloadBlob;
-        downloadLink.download = "mermaid.svg";
+        downloadLink.download = `${title}.svg`;
         document.body.appendChild(downloadLink);
 
         downloadLink.dispatchEvent(

diff --git a/lib/kino/mermaid.ex b/lib/kino/mermaid.ex
@@ -27,8 +27,10 @@ defmodule Kino.Mermaid do
   @doc """
   Creates a new kino displaying the given Mermaid graph.
   """
-  @spec new(binary()) :: t()
-  def new(content) do
-    Kino.JS.new(__MODULE__, content, export: fn content -> {"mermaid", content} end)
+  @spec new(binary(), Keyword.t()) :: t()
+  def new(content, options \\ []) do
+    options = Keyword.validate!(options, [:title])
+    title = Keyword.get(options, :title, "diagram")
+    Kino.JS.new(__MODULE__, %{content: content, title: title}, export: fn content -> {"mermaid", content} end)
   end
 end