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

Observable Plot doesn't render properly inside tabset panel #12017

Open
agre689 opened this issue Feb 3, 2025 · 1 comment
Open

Observable Plot doesn't render properly inside tabset panel #12017

agre689 opened this issue Feb 3, 2025 · 1 comment
Labels
bug Something isn't working dashboards observable-js

Comments

@agre689
Copy link

agre689 commented Feb 3, 2025

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

@agre689 agre689 added the bug Something isn't working label Feb 3, 2025
@mcanouil
Copy link
Collaborator

mcanouil commented Feb 6, 2025

Have you tried setting some height value?

---
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}
//| height: 300
Plot.plot({
  marks: [
    Plot.lineY(transpose(df), {x: "x", y: "y"})
  ]
})
```

### Plot2

:::

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working dashboards observable-js
Projects
None yet
Development

No branches or pull requests

2 participants