Having trouble with custom component and getting dash to serve its javascript

Dash Python
1

Hello,
I used the cookiecutter to create the component and it works fine if I put the component directory (customcomp) in the same directory as my script:

from customcomp import CustomComp

app = dash.Dash(__name__)

app.layout = html.Div([
    CustomComp(id="comp")
])

Using the code above, dash finds the javascript files and serves them, and all is well.

But if I move the customcomp directory to /usr/local/lib/python3.7/dist-packages/mymodule/customcomp and do a:

from mymodule.customcomp import CustomComp

app = dash.Dash(__name__)

app.layout = html.Div([
    CustomComp(id="comp")
])

something happens with the registration of the component and Dash doesn’t serve the javascript even though it can find the python code associated with CustomComp. I had assumed that everything was referenced from the location of the python code (customcomp.py) but I’m missing something.

Any hints on how to get this to work?

thanks

2

Digging into this some more, it looks like the ComponentRegistry (base_component.py’) isn’t going deal with these kinds of source hierarchies.

You can make this work:

from mymodule.customcomp import CustomComp

app = dash.Dash(__name__)

app.layout = html.Div([
    CustomComp(id="comp")
])

if you put _js_dist in mymodule/init.py and point it to the javascript files. e.g.

_js_dist = [
    {
        'relative_package_path': 'customcomp/customcomp.min.js',

        'namespace': 'mymodule'
    },
    {
        'relative_package_path': 'customcomp/customcomp.min.js.map',

        'namespace': 'mymodule',
        'dynamic': True
    }
]

but this will only work for one module inside mymodule. If you had something like

from mymodule.customcomp import CustomComp
from mymodule.anothercustomcomp import AnotherCustomComp

there’s no way to specify AnotherCustomComp’s javascript source as well – they would need to be concatenated. I guess that’s ok… my $.02 – ComponentRegistry should deal better with hierarchies.

thanks