Plotly image does not render correctly when rendering with GH actions

[juliasilge]

Bug description

When using Plotly with Quarto on GH pages, the plot does not render.

Steps to reproduce

I made a small repo to demonstrate the problem:

• Repo: https://github.com/juliasilge/plotly-quarto-ghpages
• Site: https://juliasilge.github.io/plotly-quarto-ghpages/

Expected behavior

When I publish with GH pages, I expect the image to be rendered on this page: https://juliasilge.github.io/plotly-quarto-ghpages/

Actual behavior

There is a blank space where the image should be. I can write the HTML to a file and then include that, but that is not as expected.

Your environment

This happens when publishing on GH pages, like so: https://github.com/juliasilge/plotly-quarto-ghpages/blob/main/.github/workflows/quarto-publish.yaml

The page looks fine if I render locally.

Quarto check output

You can look at the GH action workflow to see which versions of Quarto and such are being used.

[cscheid]

(Just adding some information)

The error appears to be coming from the fact that require is missing in JavaScript, which makes me suspect some kind of problem capturing the emitted javascript dependencies. I also can't seem to trigger the problem locally, either with 1.3.353 (the version being used above), or main.

[cscheid]

There's definitely something funky happening on compile. It looks like the output went to the terminal stdout rather than being captured on the notebook: https://github.com/juliasilge/plotly-quarto-ghpages/actions/runs/5092338378/jobs/9153655952

[cderv]

@cscheid you tagged Jupyter, but I believe this is knitr related. This document has a R chunk so even with python chunk, engine: knitr will be used.

It looks like the output went to the terminal stdout rather than being captured on the notebook

Really interesting ! Thanks for catching this.

I think this could come from some recent changes in knitr regarding progress bar that seems related.

@juliasilge you could try updating to pin knitr 1.41 and see if this is still happening ? 1.42 is the version with the progress bar change.

[juliasilge]

The "real" example where we saw this problem also had both R and Python in the document: https://github.com/rstudio/vetiver.rstudio.com/blob/main/learn-more/metrics-metadata.qmd

[cderv]

@juliasilge would it be possible to pin knitr 1.41 and see if it fixes the CI building ?

[juliasilge]

It looks like it does not. I installed knitr 1.41 and added session info so you can see that:
https://juliasilge.github.io/plotly-quarto-ghpages/

[cderv]

Thank you. Then it is possibly not knitr. This is really weird issue. I need to find where (and which tool) is doing the cat()-ing of the dependency string into the wrong place. Some configuration or tool. I'll try to debug that.

Possibly related to reticulate as this is a python chunk output.

Thank you for building the repo for testing

[fradav]

Hi,

We also encountered this on an 1.4 prerelease https://github.com/computorg/computo-quarto-extension
Any news on the issue?

Regards

[cscheid]

@fradav We need a complete reproducible example from you in order to be able to help.

[cscheid]

(@cderv please feel free to change the milestone. I'm just making sure we have no issues that are not assigned anywhere)

[fradav]

@fradav We need a complete reproducible example from you in order to be able to help.

Sorry for the delay.
Sure you could just fork the computorg/computo-quarto-extension repo, activate the gh-pages et let the actions deploy the site like there:
https://computo.sfds.asso.fr/computo-quarto-extension/#python
You can see there is a blank space instead of the plotly graph.

To be noted:

• the pdf version, which "webshot" the graph, displays it correctly
• locally, either in preview or with a render the graph is correctly displayed, you’ll have to generate via github CI to trigger the bug
• upgrading from 1.3 to 1.4 didn’t affect the issue

[cderv]

@fradav can you share link to log of a deployement ?

We noticed in other OP example that some output were not sent in the right place... I would like to check the knitting log output from the rendering.

[fradav]

Sure:
https://github.com/computorg/computo-quarto-extension/actions/runs/6981929886/job/19000061336

[fradav]

The main github action log:
https://github.com/computorg/computo-quarto-extension/actions/runs/6981744969/job/18999525208
and the knitting log doesn’t seem out of the ordinary:

processing file: computo-quarto-extension.qmd
1/11               
2/11 [r-code]      
3/11               
4/11 [fig-plotly]  
5/11               
6/11 [fig-gg]      
7/11               
8/11 [fig-ggplotly]
file:////tmp/Rtmpk3ptcX/file67c5313c798c/widget67c518[62](https://github.com/computorg/computo-quarto-extension/actions/runs/6981744969/job/18999525208#step:10:64)4aa7.html screenshot completed
9/11               
10/11 [cars]        
11/11               
output file: computo-quarto-extension.knit.md

pandoc 
  to: latex
  output-file: computo-quarto-extension.tex
  standalone: true
  pdf-engine: lualatex
  variables:
    graphics: true
    tables: true
  default-image-extension: pdf
  number-sections: true
  toc: true
  
metadata
  block-headings: true
  knitr:
    opts_chunk:
      screenshot.opts:
        cliprect: viewport
        vwidth: [64](https://github.com/computorg/computo-quarto-extension/actions/runs/6981744969/job/18999525208#step:10:66)0
        vheight: 400
  toc-title: Contents
  code-copy: true
  code-block-background: true
  papersize: a4
  geometry:
    - a4paper
    - textheight=24cm
    - textwidth=15.5cm
  fontfamily: libertinus
  fontsize: 11pt
  monofont: Latin Modern Mono
  monofontoptions:
    - Scale=0.92
  title: Computo Journal Format
  subtitle: To be used as template for contribution to Computo
  date: 01/02/2023
  date-modified: last-modified
  author:
    - name: The Computo Team
      corresponding: true
      email: computo@sfds.asso.fr
      url: 'https://computo.sfds.asso.fr'
      orcid: 0000-0000-0000-0000
      affiliations:
        - name: Société Française de Statistique
          department: Statistique
          address: IHP
          city: Paris
          country: France
          postal-code: [75](https://github.com/computorg/computo-quarto-extension/actions/runs/6981744969/job/18999525208#step:10:77)005
    - name: a friend
      affiliations:
        - Another Affiliation
  description: |
    This document provides a template based on the quarto system for contributions to Computo. The github repository in itself provides a specific quarto extension useful for authors (and editors!).
  keywords:
    - template
    - quarto
    - R
    - Python
    - reproductibility
  doi: 10.xxxx/xxx-xxx
  citation:
    type: article-journal
    container-title: Computo
    doi: 10.xxxx/xxx-xxx
    url: 'https://github.com/computorg/computo-quarto-extension'
    issn: 2824-[77](https://github.com/computorg/computo-quarto-extension/actions/runs/6981744969/job/18999525208#step:10:79)[95](https://github.com/computorg/computo-quarto-extension/actions/runs/6981744969/job/18999525208#step:10:97)
  bibliography:
    - references.bib
  google-scholar: true
  github-user: computorg
  repo: computo-quarto-extension
  draft: true
  published: false
  


processing file: computo-quarto-extension.qmd
1/11               
2/11 [r-code]      
3/11               
4/11 [fig-plotly]  
5/11               
6/11 [fig-gg]      
7/11               
8/11 [fig-ggplotly]
9/11               
10/11 [cars]        
11/11               
output file: computo-quarto-extension.knit.md

[cderv]

Thanks a lot. Nothing indeed.

Though now I noticed that both example happens with Python code chunk using plotly inside .qmd document run with knitr engine. This shows several layers of possible problem

• plotly python...
• ... ran from R by reticulate...
• ...using knitr and other R packages...
• ....inside a Quarto document

I think looking into knitr + reticulate would be a way to see if this is related to how dependencies are generated and handled.

I'll try to find time to investigate that based on the two examples.

[cderv]

Just cross referencing for future me as it could be related :

• smooth-scroll and jupyter widgets don't play nice together #5356