[BUG]: Violin box.line.color disappears after Plotly.restyle, but initial render shows it
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- Python
- Star
- 18.8k
- Fork
- 2.8k
- Merge trung bình
- 16 giờ 26 phút
- Pull request đã merge (30 ngày)
- 21
Mô tả
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.
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy bản tái hiện Python được cung cấp với Plotly Express, pio.to_html, Plotly.restyle và Playwright, sau đó so sánh hai ảnh chụp màn hình. Theo dõi violin trace tại fig.data[2] và HTML được tạo ra để xác định vì sao box.line.color khác nhau trước và sau restyle. Công việc được xem là hoàn tất khi đường viền box màu đỏ được nhúng được render nhất quán trong cả hai trường hợp, với coverage hồi quy cho chuỗi thao tác đã được báo cáo.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, playwright, python
- Lĩnh vực
- data-visualization, frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 52/100