plotly / plotly/plotly.py

[BUG]: Violin box.line.color disappears after Plotly.restyle, but initial render shows it

Đang mở
#5,619 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

bug P3 size: 3
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
Image Image
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

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.