`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?

Inizia riproducendo l'esempio Python Plotly fornito nella pagina HTML di PyScript, confrontandolo con l'esempio funzionante della documentazione e con lo script Plotly CDN esplicitamente fissato. Verifica come le tracce che usano fill='tonexty' vengono rappresentate e ordinate nel browser. Il lavoro è completato quando legendrank controlla in modo coerente l'ordine della legenda per l'esempio con tracce riempite.