quarto-dev / quarto-dev/quarto-cli
Observable Plot doesn't render properly inside tabset panel
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
OJS plots don't display properly inside tabset panels of my dashboard when the document is rendered.
I think the plot might be rendering at a height ~0px?
If I click "Expand" the expanded plot is displayed, and if I close the expanded window, the plot displays as it should. Navigating away from this tab resets the plot and the plot is collapsed again.
I see this behaviour in RStudio's viewer pane as well as in Chrome and Firefox.
Steps to reproduce
---
title: "Untitled"
format: dashboard
---
```{r}
#| output: false
df = data.frame(x = 1:10, y = 1:10)
ojs_define(df)
```
# Page
## Page Content
::: {.panel-tabset}
### Plot1
```{ojs}
Plot.plot({
marks: [
Plot.lineY(transpose(df), {x: "x", y: "y"})
]
})
```
### Plot2
:::
Expected behavior
Plot is displayed at normal height on opening the document.
Actual behavior
Plot is minimised/not rendered (?) until expanding and closing the plot window.
Your environment
-IDE: 2024.12.0 Build 467
-OS: Windows 11 Home Version 23H2 build 22631.4751
-Browsers: Chrome (131.0.6778.266) and Firefox (134.0.2).
Quarto check output
Quarto 1.6.40
[>] Checking environment information...
Quarto cache location: C:\Users\Alex\AppData\Local\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.6.40
Path: C:\Users\Alex\AppData\Local\Programs\Quarto\bin
CodePage: 1252
[>] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)
[>] Checking LaTeX....................OK
Tex: (not detected)
[>] Checking basic markdown render....OK
[>] Checking Python 3 installation....OK
Version: 3.13.0
Path: C:/Users/Alex/AppData/Local/Programs/Python/Python313/python.exe
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with py -m pip install jupyter
[>] Checking R installation...........OK
Version: 4.4.1
Path: C:/PROGRA1/R/R-441.1
LibPaths:
- C:/Users/Alex/AppData/Local/R/win-library/4.4
- C:/Program Files/R/R-4.4.1/library
knitr: 1.48
rmarkdown: 2.27
[>] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by rendering the provided dashboard Quarto example with the OJS Observable Plot inside the panel-tabset, then inspect how the tabset and plot sizing interact on initial display. Done means the plot appears at normal height when its tab opens, remains visible after navigating away and back, and behaves consistently in Chrome and Firefox.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100