[BUG]: Violin box.line.color disappears after Plotly.restyle, but initial render shows it
Personne n'a encore pris cette issue.
- Langage dominant
- Python
- Étoiles
- 18.8k
- Forks
- 2.8k
- Merge moyen
- 16 h 26 min
- PR mergées (30 j)
- 21
Description
Description
A Plotly Express scatter plot with marginal violins renders differently depending on
when box.line.color is applied to one violin trace.
If fig.data[2].box.line.color = "red" is set before the first render, the red box
outline inside the blue violin is visible. If the same base figure is rendered first
and the same value is applied later with Plotly.restyle, the red outline is missing.
Screenshots/Video
Steps to reproduce
import io
import plotly
import plotly.express as px
import plotly.io as pio
from PIL import Image, ImageChops
from playwright.sync_api import sync_playwright
print(f"Plotly version: {plotly.__version__}")
df = px.data.iris()
fig = px.scatter(
df,
x="sepal_width",
y="sepal_length",
color="species",
marginal_y="violin",
marginal_x="box",
trendline="ols",
template="simple_white",
)
# plot1.png: set the violin embedded box line color before the first render.
fig.data[2].box.line.color = "red"
assert fig.data[2].box.line.color == "red"
html1 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")
# plot2.png: render first, then apply the same value with Plotly.restyle.
fig.data[2].box.line.color = None
html2 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")
html2 = html2.replace(
"</body>",
"""
<script>
window.addEventListener("DOMContentLoaded", () => {
const plotEl = document.getElementsByClassName("plotly-graph-div")[0];
setTimeout(() => {
Plotly.restyle(plotEl, {"box.line.color": "red"}, [2]);
}, 1000);
});
</script>
</body>""",
)
with sync_playwright() as playwright:
browser = playwright.chromium.launch(
headless=True,
args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
)
page = browser.new_page(viewport={"width": 1200, "height": 800})
page.set_content(html1)
page.wait_for_timeout(1500)
img1 = page.screenshot(path="plot1.png")
page.set_content(html2)
page.wait_for_timeout(2000)
img2 = page.screenshot(path="plot2.png")
browser.close()
diff = ImageChops.difference(
Image.open(io.BytesIO(img1)).convert("RGB"),
Image.open(io.BytesIO(img2)).convert("RGB"),
)
assert diff.getbbox() is not None, "Screenshots are unexpectedly identical."
print("Saved plot1.png and plot2.png")
Notes
Add info here that doesn't fit in the other sections.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par exécuter la reproduction Python fournie avec Plotly Express, pio.to_html, Plotly.restyle et Playwright, puis comparez les deux captures d’écran. Suivez la trace de violon dans fig.data[2] ainsi que le HTML généré afin d’identifier pourquoi box.line.color diffère avant et après restyle. La tâche est terminée lorsque le contour rouge de la boîte intégrée est rendu de manière cohérente dans les deux cas, avec une couverture de régression pour la séquence signalée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, playwright, python
- Domaine
- data-visualization, frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 52/100