Custom JS file for further customisation

[raissa-amaral]

Hello there,

Just throwing another idea out here. Would be great if we could get a custom js file to be included in the parameters section.

It would be great for cases that we need some extra customisation for the dashboard.

Thanks again for maitianing this awesome library :)

[raissa-amaral]

Hey, just did more research on this and kind of understood how the library works and from my understanding the steps are below:

1. Convert jupyter content to a json code
2. Generate html code with a json file
3. Parse json and create dashbaord on runtime with javascript

So, in order to allow for javascript we would need a 4th step:
4. Reavaluate script tags inside inner htmls

I found the article below that explains how to do it: https://ghinda.net/article/script-tags/

I would be happy to try and make a pull request for this, but I'm quite new on doing that and it may take me sometime to even make the initial set-up. So first I would like to check if you think its a good idea or if you can alreadu foresee some potential problems @danielfrg?

Thanks a lot,
Raissa

[danielfrg]

Hi Raissa,

You understanding on how the library works is correct.

I think this would be a good addition but just to set expectations on what can be accomplished:

• The library uses React internally to create the dashboard with JS
• You cannot access the React elements from external JS
• So while you can execute the JS it would be limited on what it can do to the elements of the dashboard

So what were you thinking on customizing with custom JS?

You are able to execute some simple JS code from the code cells directly in Python. For example if you go do this page:
https://jupyter-flex.danielfrg.com/examples/data-types.html#html

You will see an alert, that is generated from JS code: The source of that notebook is here:
https://github.com/danielfrg/jupyter-flex/blob/main/examples/data-types.ipynb

This is how its done:

from IPython.display import Javascript

js = Javascript('alert("hi from the dashboard")')
display(js)

I still think it would be a great addition to have it for other stuff. Like analytics and stuff like that so if you want to draft a PR we can work on getting it merged.

It should be quite simple by doing what we do for custom CSS.

[raissa-amaral]

Hi Daniel,

Thanks so much for the quick response.

Yeah, I'm aware you could do some things on javascript, in fact I have a similar alert commented out on my dashboard that I created for testing. However, I tried a few variations of calling a js function, created inside the "Javascript()" function, but it didn't really work.

For more context, I have currently two use cases for this:

1. I need to create dynamic tabs within the cell to toggle between different charts (kind of a replacement for the filter that I can't have on plain html)
2. I found this great library that has a search and sorting functionalities implemented to dataframes, which is a feature that would help me lots. But it relies on javascript being interpreted on runtime.

The custom js was an initial suggestion for point 1, but for point 2 we would need to be able to interpret <script> tags within the html.

I think the points you raised are fine, and wouldn't be an issue for most use cases I can think of.

Ok, I will do my research here on how to make changes to the library and test it locally before sending any PR.

[danielfrg]

Got it. That makes sense.

For 1 i would need to thing about the best way to implement that. It would require some work on the library side to read external data i think.

For 2 I think the best way is to add support for that library in jupyter-flex. I should not be that hard, we support some external widgets already. Just a matter of getting some time to do it :)