[Python] Get SMILES from Jsme-component through callback

I am trying to get the SMILES from a JSME component through a callback within a python dash app.

I have been trying this example:

import dash
from dash import dcc, html, Input, Output
from dash_bio import Jsme

app = dash.Dash(__name__)

app.layout = html.Div([
html.H1("JSME Structure Drawing Example", style={'textAlign': 'center'}),
html.Div([
Jsme(
id='jsme-component',
width="800px",
height="400px"
),
html.Label("SMILES Output:", style={'marginTop': '20px'}),
dcc.Textarea(
id='smiles-output',
style={
'width': '100%',
'height': '100px',
'marginTop': '10px',
'fontFamily': 'monospace'
},
readOnly=True
)
])
])

@app.callback(
Output('smiles-output', 'value'),
Input('jsme-component', 'smiles') # Expecting the SMILES string from the Jsme component
)
def update_smiles(smiles):
if not smiles:
return "No structure drawn yet."
return smiles

if __name__ == '__main__':
app.run_server(debug=True)


I would like the SMILES to fill into the textbox as its drawn or after clicking some button. I would also be happy to understand what I did wrong and where I can find the right callbacks to use for components like jsme. I tried to find documentation through their GitHub etc but did not manage. Thank you

Continue reading...