incorporate jupyter-widget-embed component into Vuetify app

[havok2063]

Hi @mariobuikhuizen , we are switching our front-end to a pure Vue+Vuetify compiled one. I'm working on migrating our voila_embed integration, starting with the barebones example asb_example.ipynb. I'm trying to create a new component called Basic.vue, which looks like

<template>
    <v-row>
        <jupyter-widget-embed
                :voila-url=voilaUrl
                notebook="asb_example.ipynb"
                mount-id="content-main"
        ></jupyter-widget-embed>
    </v-row>
</template>

<script src="/static/js/voila-embed.js"></script>
<script>

export default {
  name: 'Basic',
  components: {
  },
  props: ['voilaUrl']
}
</script>

but when I try to load the page, I get the following error [Vue warn]: Unknown custom element: <jupyter-widget-embed> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

What's the best way to import the jupyter-widget-embed component, and all the relevant functions, e.g. requestWidget for use our components?

Or is this yarn installable as vue plugin?

[havok2063]

Presumably I should be able to do something like

export default {
  name: 'Basic',
  components: {
       jupyter-widget-embed
  },
  props: ['voilaUrl']
}

but I can't seem to import the jupyter-widget-embed component. Plus it doesn't like the hyphens I think.

[mariobuikhuizen]

Voila-embed is not going to work for that in its current form. The jupyter-widget-embed component can not be imported and is not available at compile time. We could make an importable jupyter-widget-embed component, but I have to do a bit of research on how to integrate with requirejs and Voila in that environment.

[havok2063]

Hmm, ok. Do you have a sense for the level of effort this might take or what kind of challenges there are for implementation? What might a timeline look like? We're looking to move to a Vue+Vuetify front-end pretty soon. We're trying to have a build by September. I think we could ask STScI if we could get some of yours or @maartenbreddels time to help or prioritize this effort. I'm also happy to help work on this if I can better understand the problems involved.

Alternatively are there any workarounds we could do in the meantime?

As a fallback, I think we can continue with our existing implementation for the short-term.

[mariobuikhuizen]

I've made an installable component that can be used in a compiled Vuetify project: https://github.com/mariobuikhuizen/voila-embed-vuetify.

Could you try this in your front-end?

[havok2063]

@mariobuikhuizen ok we have some success. I followed the instructions from the repo. When I run the dev server with yarn serve and navigate on localhost:8080 to the page loading the basic example, everything looks good. However, when I build for production, with yarn build (mapped to vue-cli-service build) and I navigate to the same page on the production site, the css looks off. The interactivity is still there so I suspect it's an issue with the how the css is getting packaged. Although it might also be how I'm layering my Vuetify pieces. Attached are two screenshots. Any thoughts?

Development

Production

[mariobuikhuizen]

This should be fixed in v0.0.2. I needed some changes in the build of the vue-cli front-end that is going to use this component which are described in the last section of: https://github.com/mariobuikhuizen/voila-embed-vuetify#integration-in-a-standard-vue-cli-project.

[havok2063]

@mariobuikhuizen I updated voila-embed-vuetify to 0.0.2 and modified vue.config.js and babel.config.js per the instructions. The page is still rendering incorrectly for me, but now I've lost the interactivity between the components. I'm also seeing an error in the console regarding a missing this.debouncedRelayout function inside index.js.

[mariobuikhuizen]

Can you share this project with me, so I can take a look?

[havok2063]

Hmm, that might be difficult. Do you have access to STScI's internal Gitlab? This is the branch I'm working on. https://grit.stsci.edu/mast/jdaviz-mast/-/tree/vue_refactor. If not, I could try to give you access to the repo or possibly give you the steps needed to recreate a portion of it. I'm also happy to chat in webex and I could show you the project / problem.

[maartenbreddels]

Are you using the latest bqplot? I should have fixed what recently

(from mobile phone)

On Fri, 21 Aug 2020, 18:24 Brian Cherinka, notifications@github.com wrote:

Hmm, that might be difficult. Do you have access to STScI's internal Gitlab? This is the branch I'm working on. https://grit.stsci.edu/mast/jdaviz-mast/-/tree/vue_refactor. If not, I could try to give you access to the repo or possibly give you the steps needed to recreate a portion of it. I'm also happy to chat in webex and I could show you the project / problem.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mariobuikhuizen/voila-embed/issues/13#issuecomment-678376973, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANPEPPQDNX5L35IMOMSYE3SB2NSFANCNFSM4PWXJEOA .

[havok2063]

@maartenbreddels Hmm I may not be. Let me check that and update on the status.

[havok2063]

@mariobuikhuizen What versions of the relevant packages (bqplot, ipyvuetify, etc) are you testing with? I tried updating bqplot from 12.3 to 12.16 and ipyvuetify from 1.4.1 to 1.5.1, and now I'm getting broken sites in both the production and development builds. So it might be an issue with my dependencies and environments. Trying to sort it out now....

[havok2063]

For posterity, the issue here was the use of Vue Router and Vuetify together. I was loading the embed component using Router's code-splitting syntax, e.g. component: () => import( /* webpackChunkName: "basic" */ '../views/Basic.vue'). By switching to a standard import, it resolved the issue. It might be worth down the line looking into if code-splitting is possible, but for now it works!