Pywebio output.put_html是否支持HTML页面中包含的侦听click event的Java Script?

[smilingsand]

程序流程见以下代码：

• 首先调用plotly go.Figure定义fig，并通过fig.to_html生成相应的html。
• 然后准备JS code中需要的数据
• 组织JS code，用于侦听plotly fig中数据块被鼠标点击event，以及相应响应和处理。
• 拼接上述的html和JS code。
• 通过output.put_html调用拼接后的html，并将这个html输出至文件。

现象：
保存在本地的html文件可以被浏览器打开，在浏览器中展示初始图形，并可以对鼠标点击事件进行预期的响应。这说明html页面及JS code本身是没有问题的。但是通过output.put_html调用的html，只能在浏览器中展示初始图形，对于鼠标点击事件却不能产生响应。

问题：
pywebio的output.put_html是否支持HTML页面中包含的Java Script，用以侦听事件并处理？ 如果这种方法不行，pywebio建议应该怎么处理图形上的事件？

代码结构大致如下：

    # Plotly作图 
    fig = go.Figure(go.Waterfall(
            name = "Title", orientation = "v", 
            x = list(SData.index),
            y = list(SData),
            ......
            ))

    fig.update_layout(
            height=500,
            ......
            )

    html_fig = fig.to_html(full_html=False, include_plotlyjs='require')   #include_plotlyjs=False, Java script内部load

    # 使用正则表达式获得 html_fig 中的 div_id，此div_id将用于JS code中指定的需侦听捕获的ElementId。
    match = re.search(r'<div id="([^"]+)"', html_fig)
    if match:
        div_id = match.group(1)
    else:
        raise ValueError("无法找到图表的 <div> ID")
    
    # 准备输入script的数据
    ......

    # 组织JavaScript 代码
    js_code = f"""
    document.addEventListener('DOMContentLoaded', function() {{
        console.log('DOM fully loaded and parsed');
        var plotDiv = document.getElementById('{div_id}');

        // 确认Plotly.js已加载
        if (typeof Plotly !== 'undefined') {{
            console.log('Plotly.js loaded successfully.');
            console.log(Plotly);

            // 初始化图表
            var data = {fig.to_json()};
            Plotly.newPlot(plotDiv, data.data, data.layout);

            // 监听图表上的点击事件
            plotDiv.on('plotly_click', function(data) {{
                console.log('Click event detected:', data);
                var point = data.points[0];

                // 获取当前的数据，并处理鼠标点击事件
                ......
                }});
                */

                // 更新图表的text属性
                Plotly.restyle(plotDiv, 'y', [newYValues]);
                Plotly.restyle(plotDiv, 'x', [newXValues]);
            }});
        }} else {{
            console.error('Plotly.js not loaded.');
        }}
    }});
    </script>
    """

    # 合成完整HTML
    html_content = f"""
        {html_fig}
        {js_code}
        """

    # pywebio输出图形           
    with output.use_scope('scopeTangchao', clear=True):
        output.put_html(html_content)

    # 生成的 HTML保存至 文件
    with open('waterfall_chart.html', 'w') as f:
        f.write(html_content)

[wang0618]

output.put_html() 是支持js的。不过pywebio中使用的plotly并不是暴露在全局环境下的，也就是说你在script脚本中不能简单的使用 Plotly 变量，而是要用requirejs的语法先来导入plotly，具体语法

require(["plotly"], function(Plotly) { 
....
});

其实通过查看pywebio 应用在浏览器的控制台输出，应该也能得到有用的debug信息

[smilingsand]

接前面的程序代码结构，我原来的JS_Code 中关于Plotly的引用如下：

    # 生成plotly图形的HTML
    html_fig = fig.to_html(full_html=False, include_plotlyjs='require') 

    # 组织JavaScript 代码
    js_code = f"""
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {{
        console.log('DOM fully loaded and parsed');
        var plotDiv = document.getElementById('{div_id}');

        // 确认Plotly.js已加载
        if (typeof Plotly !== 'undefined') {{
            console.log('Plotly.js loaded successfully.');
            console.log(Plotly);

            // 初始化图表
            var data = {fig.to_json()};
            Plotly.newPlot(plotDiv, data.data, data.layout);

            // 监听图表上的点击事件
            plotDiv.on('plotly_click', function(data) {{
                console.log('Click event detected:', data);
                var point = data.points[0];

                // 获取当前的数据，并处理鼠标点击事件
                ......
                }});
                */

                // 更新图表的text属性
                Plotly.restyle(plotDiv, 'y', [newYValues]);
                Plotly.restyle(plotDiv, 'x', [newXValues]);
            }});
        }} else {{
            console.error('Plotly.js not loaded.');
        }}
    }});
    </script>
    """

    # 合成完整HTML
    html_content = f"""
        {html_fig}
        {js_code}
        """

    # pywebio输出图形           
    with output.use_scope('scopeTangchao', clear=True):
        output.put_html(html_content)

    # 生成的 HTML保存至 文件
    with open('waterfall_chart.html', 'w') as f:
        f.write(html_content)

将以上js_code与html_fig结合。形成的html_content。如果直接输出至本地文件，再用浏览器打开，可以看到鼠标点击响应的效果。然而，将此html_content用output.put_html输出，则图形可以展示，却没有鼠标点击的效果。 这个是我上次提出的问题。

现在按照您的提示对js_code进行修改。修改如下：

    # 组织JavaScript 代码
    js_code = f"""
    <script>
    require(['https://cdn.plot.ly/plotly-latest.min.js'], function(Plotly) {{
    document.addEventListener('DOMContentLoaded', function() {{
        console.log('DOM fully loaded and parsed');
        var plotDiv = document.getElementById('{div_id}');

        // 确认Plotly.js已加载
        if (typeof Plotly !== 'undefined') {{
            console.log('Plotly.js loaded successfully.');
            console.log(Plotly);

            // 初始化图表
            var data = {fig.to_json()};
            Plotly.newPlot(plotDiv, data.data, data.layout);

            // 监听图表上的点击事件
            plotDiv.on('plotly_click', function(data) {{
                console.log('Click event detected:', data);
                var point = data.points[0];

                // 获取当前的数据，并处理鼠标点击事件
                ......
                }});
                */

                // 更新图表的text属性
                Plotly.restyle(plotDiv, 'y', [newYValues]);
                Plotly.restyle(plotDiv, 'x', [newXValues]);
            }});
        }} else {{
            console.error('Plotly.js not loaded.');
        }}
    }});
    }});
    </script>

移除<script src>行，替换为 ”require(['plotly'], function(Plotly) {{“ 行。其它代码和整个程序的代码都不变。
重新执行程序，这次打开本地文件，不能见到图形。 在put_html展示的页面中可以看到图形，仍然不能对鼠标点击产生响应。

上述修改是否正确？如果不对，请指示应该如何修改。我也可以将测试程序发给您。

[wang0618]

这里有个在pywebio中怼plotly中的事件进行监听的完整例子：

import pywebio
import plotly.express as px


def main():
    fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])

    post_script = """
    plot = document.getElementById('{plot_id}')
    plot.on('plotly_click', function(data){
        console.log('click', data);
    }); 
    """
    html = fig.to_html(full_html=False, include_plotlyjs='require', post_script=post_script)
    pywebio.output.put_html(html)

pywebio.start_server(main, port=8080,  cdn=False)