quarto-dev / quarto-dev/quarto-cli

Plotly jupyter cell embeds in dashboards are poorly formatted when wrapped in a figure div

Open
#10,337 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug dashboards embed plotly
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

image

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!

image

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!
:::

image

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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.