Streamlit Ketcher molecule editor component

Custom Components
1

Hi! Could anybody help with streamlit-ketcher that was introduced earlier this year. I’d love to see two features:

  1. Get current editor selection/highlighting from Ketcher, in addition to SMILES strings.
  2. Get modifications from the editor on each edit operation, not only when user presses “Apply” button.

The first feature would allow to use the component like the following:

smiles, selection = st_ketcher("CCC", molecule_format="SMILES")

Streamlit-ketcher has a similar open issue, but there are no replies there.

It looks like the following piece of code should be modified (github):

    const smile =
      moleculeFormat === FORMAT_SMILES
        ? await ketcher.getSmiles()
        : await ketcher.getMolfile();
    setMolecule(smile);
    Streamlit.setComponentValue(smile);

And it looks from KetcherFunctions that there is ketcher.editor.selection() that we can use:

    getSelectedAtomId: function () {
      const selection = ketcherInstance.editor.selection()
      if (!selection?.atoms) {
        return null
      }
      let atoms = selection.atoms.join(', ')
      return atoms
    },

How to properly return a tuple with smiles and selection to Streamlit?

The second feature looks like coming from this code:

  <Button theme={theme!} onClick={handleApply} disabled={!ketcher}>
    Apply
  </Button>

Is it possible to register handleApply to be triggered on every Ketcher editor action?

2

I’d also be keen on this, as having a substructure in terms of the indexed molecule would be useful for filtering etc. The dynamic updating would be far nicer as a UI experience too.

The Ketcher project has an issue where it talks about collecting selections as an object: how to get all shapes when selection · epam/ketcher · Discussion #1602 (github.com)

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.