Solara•8mo ago

Possible to use custom vue components in `component_vue`?

In Voila, it was possible to register custom vue-only components by registering them with ipyvue, which made them available in the VuetifyTemplate use case. Is there an analog when using Solara? That is, can I register a custom vue component, and have it available in the vue file passed to component_vue? Registering it with ipyvue as before does not seem to work.

2 Replies

MaartenBreddels•8mo ago

Hi Nick, good question, and I had to go back to some example where I had this running with jdaviz. What I did there was the following:

import solara


@solara.component
def Page():
    from jdaviz import Imviz
    import ipysplitpanes
    import ipygoldenlayout
    from jdaviz.app import custom_components
    import os
    import ipyvue
    import jdaviz

    ipysplitpanes.SplitPanes()
    ipygoldenlayout.GoldenLayout()
    for name, path in custom_components.items():
        ipyvue.register_component_from_file(None, name,
                                            os.path.join(os.path.dirname(jdaviz.__file__), path))

    ipyvue.register_component_from_file('g-viewer-tab', "container.vue", jdaviz.__file__)

    import tempfile
    imviz = Imviz()
    data_dir = tempfile.gettempdir()
    files = ['jw02727-o002_t062_nircam_clear-f090w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f150w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f200w_i2d.fits',
            'jw02727-o002_t062_nircam_clear-f277w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f356w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f444w_i2d.fits'
            ]

    for fn in files:
        uri = f"mast:JWST/product/{fn}"
        from astroquery.mast import Observations
        result = Observations.download_file(uri, local_path=f'{data_dir}/{fn}')
        imviz.load_data(f'{data_dir}/{fn}')
    # display(imviz.app)
    with solara.Column(children=[imviz.app]):
        pass

import solara


@solara.component
def Page():
    from jdaviz import Imviz
    import ipysplitpanes
    import ipygoldenlayout
    from jdaviz.app import custom_components
    import os
    import ipyvue
    import jdaviz

    ipysplitpanes.SplitPanes()
    ipygoldenlayout.GoldenLayout()
    for name, path in custom_components.items():
        ipyvue.register_component_from_file(None, name,
                                            os.path.join(os.path.dirname(jdaviz.__file__), path))

    ipyvue.register_component_from_file('g-viewer-tab', "container.vue", jdaviz.__file__)

    import tempfile
    imviz = Imviz()
    data_dir = tempfile.gettempdir()
    files = ['jw02727-o002_t062_nircam_clear-f090w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f150w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f200w_i2d.fits',
            'jw02727-o002_t062_nircam_clear-f277w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f356w_i2d.fits',
            #'jw02727-o002_t062_nircam_clear-f444w_i2d.fits'
            ]

    for fn in files:
        uri = f"mast:JWST/product/{fn}"
        from astroquery.mast import Observations
        result = Observations.download_file(uri, local_path=f'{data_dir}/{fn}')
        imviz.load_data(f'{data_dir}/{fn}')
    # display(imviz.app)
    with solara.Column(children=[imviz.app]):
        pass

MaartenBreddels•8mo ago

The problem with register_component_from_file is that is creates a widget directly. While in solara, you should create the widgets for each page/virtualkernel. Here is solved it by calling it directly in the top level Page component. It's a bit dirty, but in this case it works, because the Page component never gets re-executed. If you do have that in your case, maybe wrap you current top level Page component with a new one that will call register_component_from_file and then call the real Page component you originally had. I originally thought that this kinda of work should be done in https://solara.dev/api/on_kernel_start but I am not 100% that works (please let me know)

Gaming

Programming

Possible to use custom vue components in `component_vue`?