在 Dash 中为悬停跟踪图像创建客户端回调（修订版）

问：

我的最后一个问题，发布在这里可能太耗时而无法回答（并且没有得到答案），所以这是对这个问题的重大修订。我现在 app.py 的是：

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import plotly.express as px
import requests
from dash.dependencies import ClientsideFunction, Input, Output, State
from dash.exceptions import PreventUpdate
from PIL import Image

app = dash.Dash(__name__)
server =  app.server

# In reality, there are 50 screenshot images with non-sequential indexes
urls = ["https://pbs.twimg.com/media/EW8GhG_XkAEOyAh.jpg",
        "https://pbs.twimg.com/media/CqzwpPnWEAAiGjW.jpg"]

def url_to_fig(url):
    rgb_arr = np.array(Image.open(requests.get(url, stream=True).raw))
    fig = px.imshow(rgb_arr)
    fig.update_xaxes(visible=False)
    fig.update_yaxes(visible=False)
    fig.update_layout(
        dragmode=False, width=800, height=800)
    fig.update_traces(hoverinfo='none', hovertemplate=None)
    return fig

app.layout = html.Div([
    dcc.Store(id='ss-idx', data=0),
    dcc.Graph(id='ss-img', figure=url_to_fig(urls[0]), config = {"displayModeBar": False}),
    html.Button("Next", id='next-button', n_clicks=0),
    dcc.Store(id='hoverdata', data=[]), # Place to append new hoverdata
    dcc.Store(id='blank-output')
])



app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="collect_hoverdata"),
    Output('blank-output', 'data'),
    Input('ss-img', 'hoverData')
)


app.clientside_callback(
    """
    function(nclicks) {
        to_return = img_hover_data.slice();
        img_hover_data = [];
        return to_return;
    }
    """,
    Output("hoverdata", "data"),
    Input('next-button', 'n_clicks')
)



# Change to client side callback (in JavaScript)
@app.callback(
    [Output('ss-idx', 'data'),
     Output('ss-img', 'figure')],
    [Input('next-button', 'n_clicks')],
    [State('hoverdata', 'data'),
     State('ss-idx', 'data')]
)
def add_to_hoverdata(next_clicks, hoverdata, ss_idx):
    ctx = dash.callback_context
    if not ctx.triggered:
        raise PreventUpdate

        # Add hoverdata and screenshot index to mysql database (code not shown)
    print(len(hoverdata))
    if next_clicks < len(urls):
        new_idx = ss_idx + 1
        return new_idx, url_to_fig(urls[new_idx]) # Reset hoverdata
    else:
        raise PreventUpdate


if __name__ == "__main__":
    app.run_server(debug=True)

然后在 assets/hovertracker.js 中，我添加了这个函数：

var img_hover_data = [];

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        collect_hoverdata: function(hover_point) {
            var points_array = hover_point.points;
            var points = alert(points_array[0])
            var x = points.x;
            var y = points.y;
            var time = Date.now();
            img_hover_data.push([x, y, time]);
            return 0;
        }
    }
})

这里的想法是，实际的图形仍然是用plotly express创建的，然后每当它悬停在上面时，它就会在内部积累悬停数据客户端（客户端全局变量），直到按下按钮，此时它将用一个新图形刷新页面（通过正常回调完成），并且值将再次为空列表（客户端回调）。img_hover_datanextimg_hover_data

在执行此操作时，每当图像悬停在上面时，我都会收到错误：

Cannot read properties of undefined (reading 'apply')

我的新问题（希望更简单）是：为什么我会收到这个错误，我该如何解决它？