Inuiry regaring filtering in saved html & images in tooltip.

[Joshua Soon]

Thank you for creating this really nifty tool for generation of html reports of chemical data, it has been really helpful for exporting results to other non-computational scientists to view results.

I wanted to ask two things regarding the current capabilities of mols2grid and if these were possible:

1. In the tooltip, is it possible to render the image of a particular feature of the molecule? The image I am trying to render is a rdkit generated pillow image of the bemis murcko scaffold of the molecule so that viewers can easily see the scaffold of a molecule of interest. Currently just adding a column from a pandas.DataFrame containing pillow objects of those images just shows up blank in the html report so I was wondering if this feature was supported and if there are any extra steps I need to do for it to work?

2. For the filtering sliders demonstrated in the collab notebooks, are there any ways to include this into the saved html report? I was trying to allow the chemists to do some filtering based on frequency of bemis murcko scaffold to find those molecules which occur the most.

Thank you and I look forward to your reply. 😊

[Cédric Bouysset]

Hi @JSLJ23, I'm glad to hear that you found mols2grid helpful!

1. Adding images in the tooltips

If you generate a column containing the image in SVG format as text, this should render without any problem:

def mol_to_scaffold_svg(mol):
    scaffold = MurckoScaffold.GetScaffoldForMol(mol)
    drawer = Draw.MolDraw2DSVG(-1, -1)
    drawer.DrawMolecule(scaffold)
    drawer.FinishDrawing()
    svg = drawer.GetDrawingText()
    return svg

df["scaffold_img"] = df["mol"].apply(mol_to_scaffold_svg)
mols2grid.display(
    df, mol_col="mol", subset=["img", "NAME"],
    tooltip=["scaffold_img"]
)

If it's as PNG, it's a bit more complicated:

from base64 import b64encode

def mol_to_scaffold_img(mol):
    scaffold = MurckoScaffold.GetScaffoldForMol(mol)
    drawer = Draw.MolDraw2DCairo(-1, -1)
    drawer.DrawMolecule(scaffold)
    drawer.FinishDrawing()
    png = drawer.GetDrawingText()
    data = b64encode(png).decode()
    return f'<img src="data:image/png;base64,{data}"/>'

df["scaffold_img"] = df["mol"].apply(mol_to_scaffold_img)
mols2grid.display(
    df, mol_col="mol", subset=["img", "NAME"],
    tooltip=["scaffold_img"]
)

2. Filtering sliders

The sliders require an active Python kernel to work, so there's no way of including functional sliders in the report unfortunately. If you have sufficient knowledge in Javascript, it might be possible to include sliders from external JS libraries and have them perform the filtering though.

[Joshua Soon]

Hi @cbouy , thank you for the prompt and detailed reply. Really appreciate the help on this!

1. Ahh I see, I will probably use the SVG method then.
2. Make sense for this too, I think the notebook sliders are good for me for now but if needed for the html report, I will have a deeper look into this.

One more question regarding mols2grid, does the search by text searchbar at the bottom right of the html report work for items in the tool-tip? Like if I wish to search for the smiles string of the BMS smiles in the molecule tool-tips, do they work?

[Cédric Bouysset]

Yes and no... It will work for very simple Smiles but if you include any of these characters in the search: [-[\]{}()*+?.,\\^$|# it will fail, as explained in #34.

[Joshua Soon]

Ahhh, thanks for pointing out. I could possibly add the MD5 hash of the UTF-8 encoded SMILES of the BMS for searching then. That should work 100% of the time since it'll be purely alpha-numeric.

[Joshua Soon]

Will be closing this issue then, thank you once again for all the help 🙏