Simulations running in the front end

cmdenis · June 4, 2024, 7:40pm

Hello,

Disclaimer: I am new to web design and bokeh. I’ve been trying to find a straight answer online, but cannot find anything… this is making me think I am thinking about this wrong.

What I am trying to do: I have some simulations that I would like to put on a website and have an interactivity component that modifies some parameters in the simulations. I am trying to do something similar to this: Interactive Dynamics - flux_parity
(which seems to work using bokeh, hence my investigation of the library).

My understanding: I understand that a way of getting such simulations to work could be to write up everything in JavaScript and HTML, without even using Bokeh. However, it seems like it might be easier to use Bokeh.
I’ve tried at looking at solutions that run in the backend, where a server would be running the simulations and feeding them back to the frontend. However, from what I’ve seen before, it seems like a rather slow solution (slow as in, it does not feel instantaneous). Plus, the link that I provided before seems to be running in the frontend (since I can run it without an internet connection).

What I do not understand: How do you get a Python script to work on someone’s frontend on a website using Bokeh? Are you effectively transpiling Python to JavaScript? If that is the case, how does that even work (I’m assuming not every single Python library is easily translatable to JavaScript)? All the tutorials I’ve seen on YouTube are showing how to add sliders and text inputs, but always with the goal of modifying plotting parameters. I’ve never seen someone modify parameters of a simulation, or the likes.

Like I said, perhaps I am going wrong about this, and I’m misunderstanding what Bokeh does. Please feel free to point me in the right direction. Any information about the general process of creating some interactivity on a web page is very appreciated!

Thanks!

nmasnadi · June 4, 2024, 8:43pm

Hi,

One of the best features of Bokeh in my opinion is that you can write most of your code in python and create the figures, but have some interactive elements that are controlled by Javascript snippets. See this section in the documentations:

I’m pretty sure that’s what they are doing in the website you mentioned. In fact, I believe most of their code is available on github so you can check for yourself how
they have done it (see the following file and the .js file with the same name:

github.com

cremerlab/flux_parity/blob/master/code/js/interactive_integration.py

#%%
import math
import numpy as np 
import pandas as pd
import scipy.integrate
import bokeh.models 
import bokeh.plotting 
import bokeh.layouts
import bokeh.transform
import bokeh.io 
import growth.model
import growth.viz
bokeh.io.output_file('../../figures/interactive/interactive_integration.html')
colors, palette = growth.viz.bokeh_style() 
const = growth.model.load_constants()

# Set starting values for params
gamma_max = const['gamma_max']
nu_max = 4.5 
Y = const['Y']

This file has been truncated. show original

So in summary, they have written most of the simulation code in javascript and attached it to the bokeh widget callbacks so it would work in a Standalone HTML file and wouldn’t need a server.