quarto-dev / quarto-dev/quarto-cli
Plotly jupyter cell embeds in dashboards are poorly formatted when wrapped in a figure div
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
As seen above, the plot is completely squashed until it resembles a vertical line, despite there being plenty of whitespace on either side. The cell embed seems to be crammed inside its own card.
Steps to reproduce
dashboard.qmd
---
title: "Test Dashboard"
format: dashboard
---
##
::: {#fig-test-plot}
{{< embed test.ipynb#test-plot >}}
Embed outputs from code and/or notebook cells!
:::
test.ipynb
import plotly.express as px
# | label: test-plot
px.scatter(title="Test Plot", x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16]).show(renderer="notebook")
Expected behavior
This problem does not occur in a few circumstances:
When the figure div is removed:
---
title: "Test Dashboard"
format: dashboard
---
##
{{< embed test.ipynb#test-plot >}}
Embed outputs from code and/or notebook cells!
With a single line of CSS to unset the alignment of figures in cards:
.quarto-dashboard .card figure.quarto-float {
align-items: unset; // figures in dashboards use center alignment but it messes with plotly
}
---
title: "Test Dashboard"
css: extra.scss
format: dashboard
---
##
::: {#fig-test-plot}
{{< embed test.ipynb#test-plot >}}
Embed outputs from code and/or notebook cells!
:::
Actual behavior
No response
Your environment
IDE: VSCode 1.91.1
OS: Windows 10 WSL2
Quarto check output
Quarto 1.5.55
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.2.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.5.55
Path: /opt/quarto/bin
[✓] Checking tools....................OK
TinyTeX: v2023.10
Chromium: 869685
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /home/emiz/.TinyTeX/bin/x86_64-linux
Version: 2023
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.9.7 (Conda)
Path: /home/emiz/miniconda3/bin/python
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with conda install jupyter
[✓] Checking R installation...........(None)
Unable to locate an installed version of R.
Install R from https://cloud.r-project.org/
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
Render dashboard.qmd with the Plotly output from test.ipynb, first inside and then outside the figure div, and compare it with the extra.scss alignment override. Inspect the dashboard card and figure styling involved in the embedded output; done means the wrapped Plotly figure uses the available card width without requiring custom CSS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jupyter-notebook, plotly, python, scss
- Domain
- data-visualization, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100