quarto-dev / quarto-dev/quarto-cli

Observable Plot doesn't render properly inside tabset panel

Open
#12,017 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug dashboards ojs-engine
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.

Image

Actual behavior

Plot is minimised/not rendered (?) until expanding and closing the plot window.

Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.