search

mariobuikhuizen / voila-embed

Embed jupyter widgets in existing websites
Other
52 stars 7 forks source link

passing what input data to load from another site #5

Open havok2063 opened 4 years ago

havok2063 commented 4 years ago

Rather than having a path to a data file be hardcoded in the notebook, or data pre-loaded in a notebook that Voila serves, I need to be able dynamically load content based on an input filename, id, path, etc. Is this possible within the Vue/Voila framework?

My use cases:

  1. From website A, perform a search on data which returns a table of results, i.e. a list of objects. Each row in the table has a link/button that opens up a new page (website B) containing the Voila-embedded content generated for that object.
  2. Given an list of object identifiers (or data files), a user can upload that list to generate a series of web-based visualizations generated by the Voila-served notebooks.

My guess is that this is possible for Use Case 2, or in any case where I can control the front-end web code. Perhaps with a hidden input box mapped to a notebook event that gets called during Vue.created() and loads the data specific to that object?

However, for use case 1, website A is a different site other than the front-end web server (website B) managing the embedded Voila content. It won't have a Vue front-end, or be a website that I can easily change it's content. The most we can do is have a html link that points to a url, or perhaps a button that performs a get/post request. Website B I have more control over.

Thoughts?

mariobuikhuizen commented 4 years ago

In case 2 you don't need a hidden input box, you can just set widget properties directly since this PR: https://github.com/mariobuikhuizen/voila-embed/pull/3 (Which I will merge shortly).

In case 1 you could encode the information in the query string or fragment identifier of the link to site B. On site B you can read the query string or fragment identifier in the front-end (window.location.search, window.location.hash) and pass it with an event or set a widget property. The notebook can react to this event/property change and load the requested data.

havok2063 commented 4 years ago

Ok that makes sense. That at least gives me a place to start. Thanks a lot. I'll let you know if I have any more questions.