Set up a callback on a FileInput widget such that when the user loads a new file (csv but that’s not important for my problem really), the callback will also trigger the loading of another file based on some derivative of the original filename. For the MRE I post above, basically if they load “MYFILE.csv”, I want to also load “MYFILE_meta.csv”.
I want to use the content for both of them to do stuff.
My idea is:
- Make two FileInputs (fi and meta_fi), only put fi into the layout, but pass both to the CustomJS.
- CustomJS will trigger when the fi filename changes, i.e. user picks a file.
- CustomJS parses the filename, adds _meta and then updates the filename of meta_fi to (hopefully) load that file.
Changing the FileInput.filename does not trigger an update of the FileInput.value so I can’t get my content from the second file.
What I’m searching for is a means of doing so.
See attached MRE and commentary in the CustomJS for ideas/straws I’ve grasped at.
I’ve looked at the source code as well → bokeh/file_input.ts at 404648077ba71339598936978db72b545d6f39fa · bokeh/bokeh · GitHub , and looked at lots of vanilla JS examples of FileInput but am totally lost as to how I might be able to leverage either.
MRE (you’ll have to make a dummy .csv file and load it in):
from bokeh.plotting import show, save from bokeh.models import CustomJS, FileInput fi = FileInput() meta_fi = FileInput(tags=['meta']) cb = CustomJS(args=dict(fi=fi,meta_fi=meta_fi) ,code=''' console.log(fi.filename) console.log(fi.value) var meta_file = fi.filename.split('.csv')+'_meta.csv' meta_fi.filename = meta_file meta_fi.change.emit() //see that the filename attribute updates but that doesn't trigger a reload of the value console.log(meta_fi.filename) console.log(meta_fi.value) //is there a way to trigger _read_file on meta_fi here to get the value property updated? console.log(meta_fi) //there doesn't seem to be much for to use inspecting this thing :-( //something like meta_fi.value.update() etc.?? //i can also access it in the DOM with the tags part console.log(document.getElementsByTagName('meta')) // can i tell it somehow to load meta_file with dispatch event?!?! //... e.g. document.getElementsByTagName('meta').dispatchEvent(new MouseEvent('click')) ''') fi.js_on_change('filename',cb) save(fi,'test.html')