Help understanding how to implement CustomJS for user text input

Community Support
1

Hello, thank you for making Bokeh, I have been using it for a couple years and find it very helpful. I was hoping to get some help with the CustomJS implementation for a standalone html dashboard I am writing. I would like the make standalone html files which display charts, descriptive paragraphs on the charts, and a community discussion. The charts and words work well, but I am at a loss on the discussion aspect. Very simply, I would like users to be able to add there own Div(text=“whatever they want”) to the dashboard. It seems like this is easily doable, but I am currently at a loss. Below is my vain attempt. I understand this would need a CustomJS implementation, but just dont understand the concept very well. Perhaps this is due to a lack of javascript experience. My example has the text input box, but once the user tabs out, I would like the text they entered to be transferred, or, “published”, to the “Discussion” Div variable and the page reloaded. Thank you for the help!

minimal example code:

from bokeh.io import show, output_file
from bokeh.models import CustomJS, TextAreaInput, Div#, Arrow, NormalHead
from bokeh.layouts import Spacer, row, column

#write the html ---------------------------------------------------------------
TestNotes = Div(text='<h2>Test Notes</h2><ul><li>Info on test conditions</li></ul></ul>')

Hypothesis = Div(text='<h2>Hypothesis</h2><ol><li>Info on hypothesis</li></ol>')

Results = Div(text='<h2>Results</h2><i>Figure A</i> shows the results')

Conclusions = Div(text='<h2>Conclusions</h2><ol><li>Some words about conclusions</ol>')

Discussion = Div(text='<h2>Discussion</h2><p>This is where user comments should display.</p>')

Comments = TextAreaInput(placeholder="please enter your thoughts here", value="", rows=6, title="Comments:")

Comments.js_on_change("value", CustomJS(code="""
    console.log('Discussion: value=' + this.value, this.toString())
    Discussion.change.emit();
"""))

#define variables necessary for output file------------------------------------
output_file('text_input.html', title='Text Input Test')



column1 = column([TestNotes, Results, Discussion], width=500)
column2 = column([Hypothesis, Conclusions, Comments], width=500)
              

page = row([column1, Spacer(width=50), column2])

#make the file-----------------------------------------------------------------
show(page)
2

@Thunderous I’ll just state up front that I don’t think Bokeh is the appropriate tool for this task. If possible, I would suggest finding a tool that is actually intended for discussions/comments, and integrate that into the page with your Bokeh outputs.

If you want users to be able to enter comments, and have those comments stay for other views, then at a minimum

  • there has to be a permanent backing store/database somewhere that can persist the comments data
  • the CustomJS would need to post new comments to that database (via a REST API I suppose)?
  • the page itself would need to be able to load the comments on every page load
  • I’m not actually sure how to make it work on an already-loaded page

After all that work, you still wouldn’t have a comments section that affords any of the features that people will expect: identity, threading, condensing, or moderation tools.

I strongly encourage you to abandon this plan and instead look into how real, proper, robust, purpose-built comment/discussion tools can be integrated alongside Bokeh.

3

Thank you for your thoughts! I will look into other solutions. I may have been overly ambitious in describing it as comments. We only have 4-5 folks who use the dashboard, so identity tracking is not super critical. I would just like some way to users to add some feedback, but I think I understand. The on_change function would have to alter the original python file and remake the html file in order for future users to see the comments in the standalone html file. This is trickier than I thought, and explains why I was not able to find similar examples.

4

Well, on_change is for real Python callbacks, which means a Bokeh server application. If that is actually the case, then the Bokeh server app code could store and load comments in a text file or something just like any Python script would.

But your example code above is showing standalone (non-Bokeh server) output with show. In that case only JavaScript callbacks (i.e. js_on_change) are available, which is why any kind of permanent storage or change would have to go though a remote API of some sort. Browser security restrictions limit what JS code can do.

1 Like
5

Yep, js_on_change is what I meant. I am not able to use bokeh serve for this application. The html files are a quick way to look at archived data. Off topic, but I have previously used bokeh serve to make stand-alone applications for live data collection. It worked really well, so just wanted to say thanks for that.

1 Like