[BUG]: Violin box.line.color disappears after Plotly.restyle, but initial render shows it
Nessuno ha ancora preso questa issue.
- Lingua principale
- Python
- Stelle
- 18.8k
- Fork
- 2.8k
- Merge medio
- 16h 26m
- PR unite (30g)
- 21
Descrizione
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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia eseguendo la riproduzione Python fornita con Plotly Express, pio.to_html, Plotly.restyle e Playwright, quindi confronta i due screenshot. Traccia la violin trace in fig.data[2] e l’HTML generato per identificare perché box.line.color differisce prima e dopo restyle. Il lavoro è completato quando il contorno rosso del box incorporato viene renderizzato in modo coerente in entrambi i casi, con una copertura di regressione per la sequenza segnalata.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, playwright, python
- Ambito
- data-visualization, frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 52/100