`Legendrank` does not work in plotly (pyscript) when `fill` argument is used

Hi,

I am using Python and Plotly in my web application. In my plots, I'd like to set the order of the traces appearing in the legend in a custom way. I saw in the docs and relevant issues/PRs (https://github.com/plotly/plotly.py/issues/2345 and https://github.com/plotly/plotly.js/pull/6918) that it is now possible. It works if I use the example from the docs and run it on my computer but it doesn't work in my web app - it doesn't produce any effect.

In the application, I'm using the latest version of plotly (at least I believe so):

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plot reliability</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!--    for plotly -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

    <link rel="stylesheet" href="css/style.css"/>
    <py-env>
      - numpy
      - matplotlib
      - plotly
      - pandas
      - paths:
        - src/functions.py

I tried also specifying it manually to <script src="https://cdn.plot.ly/plotly-2.30.0.min.js" charset="utf-8"></script>--> following this page but it also didn't work and I'm not sure this is the problem (but could be).

The code that I'm trying to run is something like this, and even if I run it in plotly where the legendrank otherwise works, here it doesn't:

import plotly.graph_objects as go
import numpy as np

# Sample data for demonstration
x = np.linspace(1, 10, 100)
y_mean = np.log(x-0.5)
y_upper = y_mean + 0.1  # Simulated upper bound
y_lower = y_mean - 0.1  # Simulated lower bound
X1 = np.array([1, 5, 8])
Y1 = np.array([0.6, 0.95, 0.85])
hovertemplate = 'X:%{x}<br>Y:%{y}'

# Creating the figure and adding traces
fig = go.Figure()

# Adding upper bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_upper, fill=None, mode='lines', name='Upper Bound', hovertemplate=hovertemplate, legendrank=1))

# Adding mean prediction trace
fig.add_trace(go.Scatter(x=x, y=y_mean, name='Mean Prediction', hovertemplate=hovertemplate, legendrank=2))

# Adding lower bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_lower, fill='tonexty', mode='lines', name='Lower Bound', hovertemplate=hovertemplate, legendrank=3))

# Adding desired reliability markers
fig.add_trace(go.Scatter(x=np.array(X1[0]), y=np.array(Y1[0]), mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=4))
fig.add_trace(go.Scatter(x=np.array(X1[1]), y=np.array(Y1[1]), mode='markers', name='Point 2', marker=dict(color='red', size=10), legendrank=5))

# Update layout for a cleaner look
fig.update_layout(
    title='Plot with Custom Legend Order using legendrank',
    xaxis_title='X Axis',
    yaxis_title='Y Axis',
    legend_title='Legend',
    legend=dict(x=1, y=1),
    hovermode='closest'
)

# Show plot
fig.show()

For reference, if I do the example from the docs and tweak it a bit, it still works:

import plotly.graph_objects as go
x = [1,2,3]
y = [1,2,1]

fig = go.Figure()
fig.add_trace(go.Bar(name="fourth", x=["a", "b"], y=[2,1], legendrank=6))
fig.add_trace(go.Bar(name="second", x=["a", "b"], y=[2,1], legendrank=4))
fig.add_trace(go.Bar(name="first", x=["a", "b"], y=[1,2], legendrank=2))
fig.add_trace(go.Bar(name="third", x=["a", "b"], y=[1,2], legendrank=3))
fig.add_shape(
    legendrank=1,
    showlegend=True,
    type="line",
    xref="paper",
    line=dict(dash="5px"),
    x0=0.05,
    x1=0.45,
    y0=1.5,
    y1=1.5,
)

fig.add_trace(go.Scatter(x=x, y=y, name='mean predicted<br>number of trials (P)', legendrank=5))
fig.add_trace(go.Scatter(x=[1], y=[2], mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=7))

fig.show()

will show correctly:

Notice that the order in the legend is completely arbitrary in the first example, and doesn't even follow the order in which the traces are added. What is going on here? Am I missing something?

首先，在 PyScript HTML 頁面中重現提供的 Python Plotly 範例，並將其與可正常運作的文件範例以及明確固定的 Plotly CDN 指令碼進行比較。檢查瀏覽器中使用 fill='tonexty' 的軌跡如何呈現及排序。當 legendrank 能一致地控制填色軌跡範例的圖例順序時，即表示完成。