plotly / plotly/plotly.py

[BUG]: Mixed bar orientations hide one bar on initial render, but restyle renders correctly

Offen
#5,618 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P3 size: 3
Vorherrschende Sprache
Python
Sterne
18.8k
Forks
2.8k
Ø Merge
16 Std. 26 Min.
Gemergte PRs (30 T.)
21

Beschreibung

Description

A figure with two go.Bar traces renders differently depending on when the second
trace is changed from horizontal to vertical.

If fig.data[1].orientation = "v" is set before the first render, one red vertical
bar is missing or clipped. If the same base figure is rendered first and the same
orientation value is applied later with Plotly.restyle, all three red bars are
visible.

Screenshots/Video
Image Image
Steps to reproduce
import io

import plotly
import plotly.graph_objects as go
import plotly.io as pio
from PIL import Image, ImageChops
from playwright.sync_api import sync_playwright

print(f"Plotly version: {plotly.__version__}")

fig = go.Figure(
    [
        go.Bar(name="a", orientation="h", x=[1, 3, 2], y=[0, 1, 2]),
        go.Bar(name="b", orientation="h", x=[3, 2, 1], y=[0, 1, 2]),
    ]
)
fig.update_layout(xaxis_title="value", yaxis_title="index", legend_title_text="variable")

# plot1.png: set orientation before the first render.
fig.data[1].orientation = "v"
assert fig.data[1].orientation == "v"
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[1].orientation = "h"
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, {"orientation": "v"}, [1]);
    }, 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._

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Führen Sie die bereitgestellte Python- und Playwright-Reproduktion aus und vergleichen Sie den Screenshot des initialen Renderings mit dem Ergebnis von Plotly.restyle. Verfolgen Sie den Rendering-Pfad der Balken für eine Mischung aus horizontalen und vertikalen Orientierungen; abgeschlossen ist die Aufgabe, wenn beide Renderings alle drei roten Balken ohne Abschneiden oder durch das Rendering-Timing verursachte Unterschiede zeigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, playwright, python
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.