Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images in gt tables are not processed correctly by quarto into Typst #11829

Open
Jocarnail opened this issue Jan 9, 2025 · 16 comments
Open

Images in gt tables are not processed correctly by quarto into Typst #11829

Jocarnail opened this issue Jan 9, 2025 · 16 comments
Assignees
Labels
bug Something isn't working tables Issues with Tables including the gt integration typst upstream Bug is in upstream library
Milestone

Comments

@Jocarnail
Copy link

Jocarnail commented Jan 9, 2025

Bug description

I have found an issue while trying to use gt for tables with plots in Typst.
The plots that are created in the text_transform function are copied into the filename_files/mediabag folder incorrectly. Some of all of them are broken and they appears incomplete. png and svg files seems truncated and jpg files have a broken encoding.

I was able to reproduce the behaviour with the following gt functions: ggplot_image, local_image, fmt_image.

The issue may be related to Pandoc and the HTML processing that is performed on tables. However, when I tried using the html-table-processing: none option the table simply did not appear.

In the .typ output file it is clear that the issue is related to pointing the image to a broken copy of the picture, which happens even if a static image is provided.

Steps to reproduce

---
format: 
    typst:
        keep-typ: true

---

```{r, echo=FALSE, warning=FALSE, message=FALSE}
plot_timeline <- function(T){
    tibble(x = seq(1,5), y = x^2) |> 
        ggplot(aes(
            x = x,
            y = y
        )) + 
            geom_line()
}
```

```{r, echo=FALSE, warning=FALSE, message=FALSE}
#| label: tbl-example
#| tbl-cap: This is an example table

library(gt)
library(tidyverse)

tibble(Things= seq(1,5)) |>  
    mutate(trans = Things) |> 
    gt() |> 
    text_transform(
        locations = cells_body(columns="trans"),
        fn = function(col){
            local_image(test_image("png"))
        }
    )
```

Expected behavior

Pictures that are copied into filename_files/mediabag should be identical to the original

Actual behavior

Pictures that are copied into filename_files/mediabag are broken, possibly truncated.

Error message

processing file: report.qmd
1/4                  
2/4 [unnamed-chunk-1]
3/4                  
4/4 [tbl-example]    
output file: report.knit.md

pandoc 
  to: typst
  output-file: report.typ
  standalone: true
  shift-heading-level-by: -1
  default-image-extension: svg
  wrap: none
  citeproc: false
  
[typst]: Compiling report.typ to report.pdf...error: failed to decode image (Format error decoding Png: Corrupt deflate stream. BadCodeLengthHuffmanTree)
    ┌─ report.typ:306:199
    │
306 │   table.cell(align: horizon + right, stroke: (top: (paint: rgb("#d3d3d3"), thickness: 0.75pt)))[1], table.cell(align: horizon + right, stroke: (top: (paint: rgb("#d3d3d3"), thickness: 0.75pt)))[#box(image("report_files/mediabag/H8NW74WLNzJwAAAAABJR.png"))],
    │                                                                                                                                                                                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Your environment

  • IDE: Positron Version: 2025.01.0 (Universal) build 152
  • OS: macOS 15.0.1 (24A348)

Quarto check output

Quarto 1.7.7
[✓] Checking environment information...
      Quarto cache location: /Users/filippofronza/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.7
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2024.10
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/filippofronza/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: /opt/homebrew/opt/[email protected]/bin/python3.13
      Jupyter: 5.7.2
      Kernels: python3

(|) Checking Jupyter engine render....Traceback (most recent call last):
  File "/Applications/quarto/share/jupyter/jupyter.py", line 21, in <module>
    from notebook import notebook_execute, RestartKernel
  File "/Applications/quarto/share/jupyter/notebook.py", line 15, in <module>
    from yaml import safe_load as parse_string
ModuleNotFoundError: No module named 'yaml'
[✓] Checking Jupyter engine render....OK

Note: I am on the pre-release version right now because updated in the hope of resolving the issue. The issue was the same in the 1.6 version I was using before.

@Jocarnail Jocarnail added the bug Something isn't working label Jan 9, 2025
@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

I can repro this, thanks for the report. That's very strange.

@cscheid cscheid added tables Issues with Tables including the gt integration typst labels Jan 9, 2025
@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

The issue may be related to Pandoc and the HTML processing that is performed on tables. However, when I tried using the html-table-processing: none option the table simply did not appear.

That's not surprising. GT emits HTML and Quarto needs to convert the table to Pandoc's AST format in order for it to have any chance to show up in Typst!

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

GT (understandably) emits these images as data URIs; I wonder if this is fundamentally the issue.

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

A markdown image encoded in a data URI does not cause Typst to crash:

Input

---
format: typst
---

![Test](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAAHaX54IAAAABGdBTUEAALGPC/xhBQAAQABJREFUeAHsfQecXFW5+O1l+sz2vtmUTbJpNOnSFVRESkAQxCAPUJ8VBEGBCO+JhSciPp/wlICAYkBQUfEBQugdUjY92d53p5fb7/1/3529k5nJJtndbCD5O+e3O+fcc0//7jnnO9/5CkGU3IEagVs++a0vvU7MP/mT33vk9BvOufE6rMeyLHJf9e0zwUMXrDp53tUP/WBbstEzHKFEQiaonhcb3rBoVq0e7ldHKqvWnb5j4IGz370vs6fK9ljJFVekawea5OPPqb/3uq4QVZGKcKKlkBSZkWg9YzJlctTAQj1Suk/exr0Yqwy8+/NVtz04UUUTVtL65y3exvdD55eTPYdzLVsuohMWa+kWaaYpxtJJmtbiUFbG9EtRszw5ZpCWRdQ2DkXqWwYic84aO2NWsCuWXxmT/+CEF69Zc1nc03bSmM9oLU9znJkg+KXh97930513/NRJg/41N943tM0/N1AXX6+NbAxWkgMmL4n8swTRdVR+ut16suD+1w+ft3nLtRRbdbTiYiiPmaxdfcv5Qn6m4vAV1z8i1w71Ge6kTFQt6B9p+8Ebpx5NrO900lFOwPGPefONU1krOI82NJeHitfsqwLMd/+PPydYrJci4EMbeK21c83x117glIf+bpVEA4FGr6xWU5ZFLYu89938xHsLb6+vpHiSo1ieWShKgwvz0xZU8vXPfv+GxR0j80nL...)

Output

Image

@gordonwoodhull
Copy link
Contributor

I did not attempt to test images inside gt when implementing Typst CSS / html table processing for Typst. It would be nice to have sparklines and such. Would think data URIs would work.

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

They do work in a simplified setting outside of GT:

---
format: typst
---

```{=html}
<table><tr><td>1</td><td>
<img role="img" src="data:image/png;base64,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" />
</td></tr></table>
```

That is a wholly-white PNG image, and this compiles to a table without a problem.

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

Copy-pasting the image from the GT output into my simple table reintroduces the bug. So this is not GT: it's either Pandoc or Quarto.

@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Jan 9, 2025

I can repro with your simplified example. On a hunch, I disabled juice, and both examples succeed.

So it's either juice or my glue code around it.

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

@gordonwoodhull It's a juice bug 😬

Instrumenting parsehtml.lua to write juice's input and output shows it:

  local function handle_raw_html_as_table(el)
    local eltext
    -- write el.text to disk
    local f = io.open("/tmp/juice-input.html", "w")
    f:write(el.text)
    f:close()

    if(_quarto.format.isTypstOutput()) then
      eltext = juice(el.text)
      local f = io.open("/tmp/juice-output.html", "w")
      f:write(eltext)
      f:close()
    else
      eltext = el.text
    end
...

Then we can already see the problem with the file sizes:

$ ls -lrt
total 128
drwx------  3 cscheid  wheel     96 Dec 19 17:01 com.apple.launchd.U2JGfjR1u6
drwx------  3 cscheid  wheel     96 Dec 19 17:01 com.apple.launchd.C5QqYNWiie
drwxr-xr-x  2 root     wheel     64 Jan  8 19:47 powerlog
-rw-r--r--@ 1 cscheid  wheel  46711 Jan  9 14:07 juice-input.html
-rw-r--r--@ 1 cscheid  wheel  15313 Jan  9 14:07 juice-output.html

@cscheid cscheid added the upstream Bug is in upstream library label Jan 9, 2025
@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

It should be possible for us to protect data-URI-encoded images to work around juice, especially since we know we don't want it to touch these images at all.

@cscheid cscheid added this to the v1.7 milestone Jan 9, 2025
@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Jan 9, 2025

Yeah, seeing the same thing. I think it could be a line length issue ( > 43300 characters)

Agree, any kind of placeholder should work. Will try.

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

Interestingly (?), calling juice from Deno directly doesn't trigger the bug:

$ deno
> import juice from "npm:juice"
undefined
> juice.version
"11.0.0"
> let inp = Deno.readTextFileSync("/tmp/juice-input.html")
undefined
> Deno.writeTextFileSync("/tmp/juice-output-deno.html", juice(inp))
undefined
$ ls -lrt
total 224
drwx------  3 cscheid  wheel     96 Dec 19 17:01 com.apple.launchd.U2JGfjR1u6
drwx------  3 cscheid  wheel     96 Dec 19 17:01 com.apple.launchd.C5QqYNWiie
drwxr-xr-x  2 root     wheel     64 Jan  8 19:47 powerlog
-rw-r--r--@ 1 cscheid  wheel  46711 Jan  9 14:07 juice-input.html
-rw-r--r--@ 1 cscheid  wheel  15313 Jan  9 14:07 juice-output.html
-rw-r--r--  1 cscheid  wheel  46711 Jan  9 14:19 juice-output-deno.html

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

Oh, that must be a bug they fixed in 11.0.0; we're running juice 10.0.0.

EDIT: No, that's not it. Running juice directly from deno on those inputs doesn't trigger the bug (on version 10, or 11, either from npm:.. or skypack). So it's our invocation of juice through quarto run, somehow.

@gordonwoodhull
Copy link
Contributor

Nod, I still see truncation if I change juice.ts to

import juice from "npm:juice"

and version is 11

@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Jan 9, 2025

Okay I misread this at first:

https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations

There isn't any fixed limit of 32K but it does seem that juice is deciding to truncate data URIs under 15K characters for its own reasons.

@cscheid
Copy link
Collaborator

cscheid commented Jan 9, 2025

Ok cool. Our workaround then is pretty clear - we intercept data URIs, replace them with UUIDs and then wrap it back.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working tables Issues with Tables including the gt integration typst upstream Bug is in upstream library
Projects
None yet
Development

No branches or pull requests

3 participants