Computation tutorial, graph does not appear in column

[annguyen42]

Bug description

Hi,
In the tutorial Computations, the code to have 2 graphs in 2 columns does not work. The graphs are one over another.

Thank you

Steps to reproduce

#| label: fig-gapminder
#| fig-cap: "Life Expectancy and GDP"
#| fig-subcap:
#|   - "Gapminder: 1957"
#|   - "Gapminder: 2007"
#| layout-ncol: 2
#| column: page

import plotly.express as px
import plotly.io as pio
gapminder = px.data.gapminder()
def gapminder_plot(year):
    gapminderYear = gapminder.query("year == " + 
                                    str(year))
    fig = px.scatter(gapminderYear, 
                     x="gdpPercap", y="lifeExp",
                     size="pop", size_max=60,
                     hover_name="country")
    fig.show()
    
gapminder_plot(1957)
gapminder_plot(2007)

Expected behavior

2 graphs, appearing in the html preview, side by side (in 2 columns).

Actual behavior

2 graphs, appearing in the html preview, one over another.

Your environment

OS: MacOS Sonoma 14.3.1

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.550
      Path: /Applications/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Library/Frameworks/Python.framework/Versions/3.12/bin/python3
      Jupyter: 5.7.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.2
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
      knitr: (None)
      rmarkdown: (None)

      The knitr package is not available in this R installation.
      Install with install.packages("knitr")
      The rmarkdown package is not available in this R installation.
      Install with install.packages("rmarkdown")```

[cscheid]

This worked in 1.3.450, and I can verify it doesn't on the stable release.

[cscheid]

The bug here is that we are forwarding the classes page-columns and page-full to the subfigure divs. Let me bisect that.

[cscheid]

Unfortunately the offending commit is 8ba05ff (the commit that introduces FloatRefTarget nodes), so the fix will not be so simple.

[mcanouil]

A workaround or alternate syntax:

Quarto document

HTML

--- format: html --- ::: {.column-page} ```{python} #| label: fig-gapminder #| fig-cap: "Life Expectancy and GDP" #| fig-subcap: #| - "Gapminder: 1957" #| - "Gapminder: 2007" #| layout-ncol: 2 import plotly.express as px import plotly.io as pio gapminder = px.data.gapminder() def gapminder_plot(year): gapminderYear = gapminder.query("year == " + str(year)) fig = px.scatter(gapminderYear, x="gdpPercap", y="lifeExp", size="pop", size_max=60, hover_name="country") fig.show() gapminder_plot(1957) gapminder_plot(2007) ``` :::

[cscheid]

Additionally, the bug arises from layout-ncol: 2 and column: page in the same cell; removing column: page "solves" the issue.

[cscheid]

@annguyen42 We will definitely fix this and backport to a v1.4 release, but in the meantime, you should be able to use the workaround that @mcanouil suggested.

[annguyen42]

Dear all,

Thank you for your quick answer. Indeed, I now see the 2 graphs side by side.

Have a nice day.