# How to display JSME molecular editor with Panel?

**URL:** <https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306>\
**Category:** Panel\
**Created:** [May 18, 2021, 5:13am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306 "2021-05-18T05:13:31Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [May 18, 2021, 5:13am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/1 "2021-05-18T05:13:32Z")

</div>

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?](https://iwatobipen.wordpress.com/2020/12/30/embed-molecular-editor-into-streamlit-app-streamlit-chemoinformatics-rdkit/)), 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](https://github.com/holoviz/panel/pull/1898)). 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

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 18, 2021, 8:06am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/2 "2021-05-18T08:06:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [May 18, 2021, 8:17am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/3 "2021-05-18T08:17:42Z")

</div>

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.

.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 18, 2021, 8:49am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/4 "2021-05-18T08:49:24Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [May 18, 2021, 9:32am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/5 "2021-05-18T09:32:34Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 18, 2021, 9:35am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/6 "2021-05-18T09:35:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ea42gh](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ea42gh/32/73_2.png) [@ea42gh](https://discourse.holoviz.org/u/ea42gh)\
**Post date:** [May 18, 2021, 11:14am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/7 "2021-05-18T11:14:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 18, 2021, 1:59pm UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/8 "2021-05-18T13:59:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 18, 2021, 3:40pm UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/9 "2021-05-18T15:40:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ea42gh](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ea42gh/32/73_2.png) [@ea42gh](https://discourse.holoviz.org/u/ea42gh)\
**Post date:** [May 18, 2021, 5:32pm UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/10 "2021-05-18T17:32:59Z")

</div>

from my end email, github, zoom

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 18, 2021, 7:35pm UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/11 "2021-05-18T19:35:50Z")

</div>

Ok.

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

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [May 18, 2021, 8:20pm UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/12 "2021-05-18T20:20:45Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [May 19, 2021, 4:36am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/13 "2021-05-19T04:36:12Z")

</div>

I’ve created a new repository [panel-chem-bio](https://github.com/MarcSkovMadsen/panel-chem-bio/blob/main/README.md) and added some [Feature Requests](https://github.com/MarcSkovMadsen/panel-chem-bio/issues)

**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](https://gitter.im/panel-chem-bio/community#)

Thanks.

**UPDATE: The project has been refocused to `chemistry` and you can thus find it at [panel-chemistry](https://github.com/MarcSkovMadsen/panel-chemistry) and the contributor chat can be found at [panel-chemistry/community - Gitter](https://gitter.im/panel-chemistry/community)**

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [August 30, 2021, 9:51am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/14 "2021-08-30T09:51:55Z")

</div>

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.

```auto
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

---

<div class="post-metadata">

**Author:** ![nghenzi](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/nghenzi/32/378_2.png) [@nghenzi](https://discourse.holoviz.org/u/nghenzi)\
**Post date:** [August 30, 2021, 10:15am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/15 "2021-08-30T10:15:52Z")

</div>

Without the " " when you call newJsme?

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [August 30, 2021, 10:40am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/16 "2021-08-30T10:40:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nghenzi](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/nghenzi/32/378_2.png) [@nghenzi](https://discourse.holoviz.org/u/nghenzi)\
**Post date:** [August 30, 2021, 10:54am UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/17 "2021-08-30T10:54:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xavArtley](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/xavartley/32/1286_2.png) [@xavArtley](https://discourse.holoviz.org/u/xavArtley)\
**Post date:** [August 30, 2021, 12:21pm UTC](https://discourse.holoviz.org/t/how-to-display-jsme-molecular-editor-with-panel/2306/18 "2021-08-30T12:21:17Z")

</div>

```auto
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()

```