Clientside callback javascript pass input parameters Class constructor cannot be invoked without "new"

Dash Python
1

Hi, this is a follow up on another thread I created. This should be a more concise post and better topic description.
https://community.plotly.com/t/iframe-using-dynamically-html-file-from-blob-or-local/81853/2?u=jharm
Any help to continue my path to make this work is highly appreciated :slight_smile:

The code I have in html that works look like this:

<!DOCTYPE html>
<html data-color-mode="light" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Report - ADR</title>
    <script src="./ansys/nexus/utils/js-unzip.js"></script>
    <script src="./ansys/nexus/utils/js-inflate.js"></script>
    <script src="./ansys/nexus/ANSYSViewer_min.js"></script> 
    <script src="./ansys/nexus/viewer-loader.js"></script>
</head>
<div style='width:960px;height:720px;'>
<ansys-nexus-viewer src_ext="AVZ" proxy_img="data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEU...... ></ansys-nexus-viewer>
</div>
</html>

I have figured out that I should make a clientside callback. So a simple dash app store the input string proxy_img in a dcc.store and is then passed into the javascript. The dash app should then look like this to do the same as the html code

from dash import html, Output, Input, Dash, no_update, dcc, State, ClientsideFunction, clientside_callback
def read_first_line(filename):  
    with open(filename, 'r') as f:  
        first_line = f.readline()  
    return first_line  
filename = 'pictest.txt'
first_line = read_first_line(filename)

app = Dash(__name__)
app.layout = html.Div(
    [
        html.Button('testing', 'testing'),
        html.Div(id='test'),
        dcc.Store(id='memory', data = first_line)
    ]
)
app.clientside_callback(
    """
    function (n, data) {
        if (n) {
            return {'type': 'Div', 'namespace': 'dash_html_components', 'props': {'children': AnsysNexusViewer(src_ext="AVZ",proxy_img=data)}}
        }
        return window.dash_clientside.no_update
    }
    """,
    Output("test", "children"), Input("testing", "n_clicks"), State("memory", "data")
)
    
if __name__ == "__main__":
    app.run_server(debug=True)

But running this app I get the following error:

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Class constructor AnsysNexusViewer cannot be invoked without 'new'

    at ns.51fa3c57d14716c44708b5eefdf84690 (http://127.0.0.1:8050/:50:95)

    at _callee2$ (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:597:72)

    at tryCatch (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:422:1062)

    at Generator.<anonymous> (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:422:3010)

    at Generator.next (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:422:1699)

    at asyncGeneratorStep (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:428:103)

    at _next (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:429:194)

    at http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:429:364

    at new Promise (<anonymous>)

    at http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_14_2m1706611888.dev.js:429:97
2

I found a different route. So now it works. I wass lucky to get a java script function that did what I needed. So not really solved. But it works now.