RDkit integration via pandas dataframe

Hello all,

Iโ€™ve been trying to display a data frame containing molecules in streamlit to no avail.
When a dataframe is generated from a molecular format file (.sdf) by RDkit (PandasTools.LoadSDF()), the molecules are read as objects in memory. I have tried to convert them to images using the RDkit Draw functions, but could not get them to render in streamlit, despite using the column_config argument.

If anyone has already solved this issue I would be grateful, will provide some code tomorrow for reference.

A similar issue was posted here without any resolution : link

I have no clue about rdkit, but this doesnโ€™t work?

# renders mol object to pillow image object
img = rdkit.Chem.Draw.MolToImage(mol)

# show image with streamlit
st.image(img)

If not, it would be helpful to provide an example.

1 Like

Hi @Antoine_Lacour

Hereโ€™s the code snippet for displaying the chemical structure image from what I used in a prior app Parp1Pred and the GitHub repo.

from rdkit import Chem

smi = Chem.MolFromSmiles(st.session_state.smiles_input)
Chem.Draw.MolToFile(smi, 'molecule.png', width=900)
mol_image = Image.open('molecule.png')
st.image(mol_image)

And hereโ€™s the displayed chemical structure image in-app:

Hope this helps!

1 Like

Hi! I was trying to draw molecules as well in another question. The solution I have found so far is to convert molecules to PNG with RDKit:

import base64
import io

import pandas as pd
import rdkit
import rdkit.Chem
import rdkit.Chem.Draw
import streamlit as st


@st.cache_data
def smi_to_png(smi: str) -> str:
    """Returns molecular image as data URI."""
    mol = rdkit.Chem.MolFromSmiles(smi)
    pil_image = rdkit.Chem.Draw.MolToImage(mol)

    with io.BytesIO() as buffer:
        pil_image.save(buffer, "png")
        data = base64.encodebytes(buffer.getvalue()).decode("utf-8")

    return f"data:image/png;base64,{data}"


df = pd.DataFrame({"smiles": ["CCCNC", "CCC", "CCCCC"]})

df["img"] = df["smiles"].apply(smi_to_png)

st.dataframe(df, column_config={"img": st.column_config.ImageColumn()})

Screenshot

The image produced by column_config is quite small, but there might be some options to adjust it.