replaced beautifulsoup with typst xml parser

Author: Dominik Schröder

src/pyobsplot/obsplot.py

@@ -9,7 +9,6 @@
 import warnings
 import tempfile
 import typst
-from bs4 import BeautifulSoup
 from pathlib import Path
 from subprocess import PIPE, Popen, SubprocessError
 from typing import Any, Optional, Union
@@ -23,6 +22,7 @@
     AVAILABLE_THEMES,
     DEFAULT_THEME,
     MIN_NPM_VERSION,
+    bundler_output_dir
 )
 from pyobsplot.widget import ObsplotWidget
 
@@ -400,65 +400,24 @@ def save_to_file(self, path: str, res: HTML) -> None:
         with open(path, "w", encoding="utf-8") as f:
             self.render_typst(str(res.data), f.name)
 
-    @staticmethod
-    def shift_svg(svg):
-        soup = BeautifulSoup(str(svg), "xml")
-        svg = soup.svg
-        if "viewBox" in svg.attrs:
-            x, y, width, height = map(int, svg.attrs["viewBox"].split())
-            if x != 0 or y != 0:
-                g = soup.new_tag("g", transform=f"translate({-x}, {-y})")
-                g.extend(svg.contents)
-                svg.clear()
-                svg.append(g)
-                svg.attrs["viewBox"] = f"0 0 {width} {height}"
-        return str(svg)
-    
     def render_typst(self, html: str, path: str) -> None:
         path_obj = Path(path)
         ext = "".join(path_obj.suffixes)
-        stem = str(path_obj.name).removesuffix("".join(path_obj.suffixes))
 
         with tempfile.TemporaryDirectory() as tmpdirname:
-            soup = BeautifulSoup(html, "xml")
-            figure = soup.find("figure", recursive=False)
-            swatches = []
-            plots = []
-            for i, swatch in enumerate(figure.find_all("div", recursive=False)):
-                new_swatch = []
-                for j, svg in enumerate(swatch.find_all("svg", recursive=True)):
-                    with open(f"{tmpdirname}/{stem}_{i}_{j}.svg", "w") as f:
-                        f.write(ObsplotTypstCreator.shift_svg(str(svg)))
-                    new_swatch.append(
-                        {"file": f"{stem}_{i}_{j}.svg", "width": svg.attrs["width"], "height": svg.attrs["height"], "text": svg.next_sibling}
-                    )
-                swatches.append(new_swatch)
-            for i, svg in enumerate(figure.find_all("svg", recursive=False)):
-                with open(f"{tmpdirname}/{stem}_{i}.svg", "w", encoding = 'utf-8') as f:
-                    f.write(ObsplotTypstCreator.shift_svg(str(svg)))
-                plots.append({"file": f"{stem}_{i}.svg", "width": svg.attrs["width"], "height": svg.attrs["height"]})
-            max_width = max(int(svg["width"]) for svg in plots)
-            typeset = (
-                f'#set text(\nfont: "{self.font}",\nsize: {self.font_size}pt,\nfallback: false)\n'
-                + f"#set page(\nwidth: {max_width+2*self.margin}pt,\nheight: auto,\nmargin: (x: {self.margin}pt, y: {self.margin}pt),\n)\n"
-            )
-            if title := figure.find("h2"):
-                typeset += f"= {title.text}"
-            if subtitle := figure.find("h3"):
-                typeset += f"\n{subtitle.text}"
-            typeset += "\n\n"
-            for swatch in swatches:
-                typeset += "#{\nset align(horizon)\nstack(\n  dir: ltr,\n  spacing: 10pt,\n"
-                for el in swatch:
-                    typeset += f'  image("{el["file"]}", width: {el["width"]}pt),\n'
-                    typeset += f'  "{el["text"]}",\n'
-                typeset += ")}\n\n"
-            typeset += "#v(-10pt)\n".join([f'#image("{plot["file"]}", width: {plot["width"]}pt)\n' for plot in plots])
-
-            if caption := figure.find("figcaption"):
-                typeset += f"\n{caption.text}"
-
-            with open(f"{tmpdirname}/{stem}.typ", "w") as f:
-                f.write(typeset)
-
-            typst.compile(f"{tmpdirname}/{stem}.typ", output=path, ppi=self.dpi, format=ext[1:])
+            with open(f"{tmpdirname}/jsdom.html", "w") as f:
+                f.write(html)
+            shutil.copy(bundler_output_dir / "template.typ", f"{tmpdirname}/template.typ")
+            with open(f"{tmpdirname}/input.typ", "w") as f:
+                f.write(f"""
+#import "template.typ": obsplot
+
+#show: obsplot(
+  "jsdom.html",
+  margin: {self.margin}4pt,
+  font: "{self.font}",
+  font-size: {self.font_size}pt,
+)
+                """)
+
+            typst.compile(f"{tmpdirname}/input.typ", output=path, ppi=self.dpi, format=ext[1:])

src/pyobsplot/static/template.typ

@@ -0,0 +1,78 @@
+#let find-child(elem, tag) = {
+  elem.children
+    .find(e => "tag" in e and e.tag == tag)
+}
+
+#let encode-xml(elem) = {
+  if (type(elem) == "string") {
+    elem
+  } else if (type(elem) == "dictionary") {
+    "<" + elem.tag + elem.attrs.pairs().map(
+        v => " " + v.at(0) + "=\"" + v.at(1) + "\""
+    ).join("") + if (elem.tag == "svg") {" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\""} + ">" + elem.children.map(encode-xml).join("") + "</" + elem.tag + ">"
+  }
+}
+
+#let obsplot(
+    file,
+    margin: 4pt,
+    font: "SF Pro Display",
+    font-size: 10pt,
+) = {
+    let swatch-item(elem) = {
+        set align(horizon)
+        stack(
+            dir: ltr, 
+            spacing: .5em, 
+            image.decode(
+                encode-xml(elem.children.first()), 
+                width: 1pt * int(elem.children.first().attrs.width), 
+                height: 1pt * int(elem.children.first().attrs.width)
+            ),
+            text(elem.children.last())
+        )
+    }
+
+    let swatch(elem) = {
+        stack(
+            dir: ltr, 
+            spacing: 1em, 
+            ..elem.children.filter(e => e.tag == "span").map(swatch-item)
+        )
+    }
+
+    let html = xml(file)
+    let figure = html.first()
+    let title = find-child(figure, "h2")
+    let subtitle = find-child(figure, "h3")
+    let caption = find-child(figure, "figcaption")
+    let figuresvg = find-child(figure, "svg")
+    let figurewidth = int(figuresvg.attrs.width)
+
+    set text(
+        font: "SF Pro Display",
+        size: font-size,
+        fallback: false
+    )
+
+    set page(
+        width: 1pt*figurewidth + 2*margin,
+        height: auto,
+        margin: (x: margin, y: margin)
+    )
+
+    stack(
+        dir: ttb,
+        spacing: 1em,
+        heading(title.children.first(), level: 1),
+        if (subtitle != none) {
+            heading(subtitle.children.first(), level: 2)
+        },
+        v(2em),
+        ..figure.children.filter(e => e.tag == "div").map(swatch),
+        image.decode(encode-xml(figuresvg)),
+        if (caption != none) {
+            text(caption.children.first())
+        }
+    )
+}