Integration with streamlit

[sandipde]

Hi Guillaume, I am trying to integrate parts of chemiscope especially the molecule viewer with all the frame,and options into streamlit apps. A native 3dmol visualization which chemiscope is also based on can be easily integrated via exporting HTML components as done in here --> https://github.com/napoles-uach/stmol/blob/9fced0e5b86ddda3592eb343016487df0238253b/stmol/__init__.py#L24

Do you have something equivalent already? I believe you are doing something similar when making the jupyter widget but could not find something suitable that can be embedded as HTML component in streamlit.

[Luthaf]

So the HTML part is fine, you just need to create a couple of div each with an id. Then to render a chemiscope widget in there, you'll need to run some JS code to create the widget. For a molecule viewer, something like this:

<!-- HTML -->
<div>
  <div id="meta-id"></div>
  <div id="structure-id"></div>
  <div id="info-id"></div>
</div>

// JS
const config = {
    meta="meta-id",
    structure="structure-id",
    info="info-id",
};

const data = JSON.parse("the data you want to visualize");

chemiscope.StructureVisualizer.load(config, data);

The corresponding API documentation is here: https://chemiscope.org/docs/api/classes/StructureVisualizer.html

Here is the corresponding code in the jupyter extension: https://github.com/lab-cosmo/chemiscope/blob/634136b3d09cc32c9b951d1eb76293b2a872ec9a/python/jupyter/src/widget.ts#L194-L228