How to display JSME molecular editor with Panel?

Panel
1

Hello all,

I am interested build a dashboard that is using JSME molecular editor.
The similar apps seems can be done by using Streamlit (Embed molecular editor into Streamlit app #streamlit #chemoinformatics #RDKit – Is life worth living?), but I would like to use it in companion with Panel. However, I am not very familiar with Java script so I do not know how to start to build it.

I also found the Github issue here (Jsme molecule editor example using the ReactiveHTML component by MarcSkovMadsen · Pull Request #1898 · holoviz/panel · GitHub). Does it means that we could not use present version of Panel to use JSME?

Any suggestions are greatly appreciated.

Thank you in advance,
Arifin

2

Hi @Arifin

Could we write a little bit about how you would like to be using it? And what your requirements are?

If it’s primarely embedding the editor without feeding back data to Panel then it should be relatively easy to help you get started.

If you need bidirectional communication then we would need to build a custom model/ ReactiveHTML model. I am interested in joining this. I have been thinking about starting a panel-chem or panel-chem-bio package that could include this one.

3

Hi @Marc,

Thank you very much for your quick response.
As I referred from the blog with Streamlit’s apps, at first I would like to obtain the SMILES from the molecule structures that is sketched on the JSME editor, pass it to the Panel and use it for the other purposes. Therefore, your second options is more related to our target.

I have been following your awesome projects and I am looking forward to know more about the application of Panel in chemistry.

.

1 Like
4

I have discussed with @philippjfr if a component like JSME should go into Panel and the feedback is that domain specific models should not.

So for me I would instead like to start a panel-chem-bio package. (Do you have better name?).

Would you be interested in reviewing, testing and maybe even promoting it @Arifin ?

5

Sounds good to me. I am agree that it is a very domain-specific project.

It will be my pleasure to contribute and promote the project.

How to start?

1 Like
6

My suggestion is I will start the repo on the weekends and see how far I can get. And then get back.

If you have suggestions let me know.

1 Like
7

I’d love to join in: I have wanted to figure out how to set up a custom model with bi-directional communications for a while!

@marc could this be documented enough to make another instructional video?

1 Like
8

We can try. But it would be nice to get some input from @philippjfr on whether we should go with a Bokeh Extension (used today) or the new ReactiveHTML component.

9

@ea42gh and @Arifin . How can we communicate efficiently?

10

from my end email, github, zoom

1 Like
11

Ok.

Any other chem/ bio js libraries that would be awesome to add one day?

12

@Marc

About the communication tools, same here.

For the libraries, it depends on how the apps works, I think. One of the simplest idea is to build an apps to interactively generate 3D structure of the molecules. Here, JSME to sketch the 2D graph, then generate 3D by rdkit or pybel, and later show the structure with 3DMol, pymol, Or NGL, as you and @ea42gh had discussed before.

1 Like
13

I’ve created a new repository panel-chem-bio and added some Feature Requests

Could you please review the README and Feature Requests? @ea42gh and @Arifin

It would help a lot if you started creating Feature Requests describing the changes and additions you would like and why. You are also very welcome to start doing pull requests.

If something seems strange please let me know. I am not that used to working together on an open source project. So please help us all make this fun and productive.

For now we can chat on panel-chem-bio/community - Gitter

Thanks.

UPDATE: The project has been refocused to chemistry and you can thus find it at panel-chemistry and the contributor chat can be found at panel-chemistry/community - Gitter

1 Like
14

Hi @Marc

I hope I could grab more experience by using ReactiveHTML. Therefore, I am trying to simply show JSME but it still not work.

class JSMEEditor(ReactiveHTML):
    
    smiles = param.String(default='')
    
    _template = """
    <div id="jsme_container">
    </div>
    """
    
    _scripts = {
        'render':   """
            function jsmeOnLoad() {
                jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px");
            }
        """
    }
    
    __javascript__ = [
        "https://unpkg.com/jsme-editor@0.8.2/jsme.nocache.js"
    ]

If you have time, please let me know a bit about how to use it ReactiveHTML.

Thank you very much.
Arifin

15

Without the " " when you call newJsme?

16

Hi @nghenzi, thanks for your comment! I am sorry but I do not get it. I tried to remove some " " but it still not work.

17

Maybe with jsme_container.id?

If you use console.log you can print the jsme_container object. It will give you the information you need to render it. I am on the cellphone, sorry for not testing

18 
class JSMEEditor(ReactiveHTML):
    
    smiles = param.String(default='')
    
    _template = """
    <div id="jsme_container">
    </div>
    """
    
    _scripts = {
        'render':   """
            if ("JSApplet" in window){
                state.jsmeApplet = new JSApplet.JSME(`jsme_container-${data.id}`, "380px", "340px");
            } else {
                window.jsmeOnLoad = () => {state.jsmeApplet=new JSApplet.JSME(`jsme_container-${data.id}`, "380px", "340px")}
            }
        """
    }
    
    __javascript__ = [
        "https://unpkg.com/jsme-editor@0.8.2/jsme.nocache.js"
    ]
pn.extension()
2 Likes