Patch 0.2.1 (#23)

### Fixes
- Field names containing spaces are now correctly delt with
- The text search now looks for matches inside the values of the tooltip fields, rather than inside the HTML code of the tooltip which included tags and other irrelevant text
- Fixed an encoding bug when saving the grid as an HTML file on French Windows, which uses CP-1252 encoding instead of UTF-8

Author: cbouy

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.1] - 2022/02/23
+### Fixed
+- Field names containing spaces are now correctly delt with
+- The text search now looks for matches inside the values of the tooltip fields, rather
+  than inside the HTML code of the tooltip which included tags and other irrelevant text
+- Fixed an encoding bug when saving the grid as an HTML file on French Windows, which uses
+  CP-1252 encoding instead of UTF-8
+
 ## [0.2.0] - 2022/02/10
 ### Added
 - `cache_selection=True` allows to retrieve the checkbox state when re-displaying a grid,

README.md

@@ -8,6 +8,7 @@
 [![Build status](https://github.com/cbouy/mols2grid/workflows/build/badge.svg)](https://github.com/cbouy/mols2grid/actions/workflows/build.yml)
 
 [![Powered by RDKit](https://img.shields.io/static/v1?label=Powered%20by&message=RDKit&color=3838ff&style=flat&logo=data:image/x-icon;base64,AAABAAEAEBAQAAAAAABoAwAAFgAAACgAAAAQAAAAIAAAAAEAGAAAAAAAAAMAABILAAASCwAAAAAAAAAAAADc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/FBT/FBT/FBT/FBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/PBT/PBT/PBT/PBT/PBT/PBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/PBT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/PBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/PBT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/PBT/FBTc3Nzc3Nzc3Nz/FBT/PBT/ZGT/ZGT/ZGT/jIz/jIz/jIz/jIz/ZGT/ZGT/ZGT/PBT/FBTc3Nzc3Nz/FBT/PBT/ZGT/ZGT/jIz/jIz/jIz/jIz/jIz/jIz/ZGT/ZGT/PBT/FBTc3Nzc3Nz/FBT/PBT/ZGT/ZGT/jIz/jIz/tLT/tLT/jIz/jIz/ZGT/ZGT/PBT/FBTc3Nzc3Nz/FBT/PBT/ZGT/ZGT/jIz/jIz/tLT/tLT/jIz/jIz/ZGT/ZGT/PBT/FBTc3Nzc3Nz/FBT/PBT/ZGT/ZGT/jIz/jIz/jIz/jIz/jIz/jIz/ZGT/ZGT/PBT/FBTc3Nzc3Nz/FBT/PBT/ZGT/ZGT/ZGT/jIz/jIz/jIz/jIz/ZGT/ZGT/ZGT/PBT/FBTc3Nzc3Nzc3Nz/FBT/PBT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/PBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/PBT/ZGT/ZGT/ZGT/ZGT/ZGT/ZGT/PBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/PBT/PBT/PBT/PBT/PBT/PBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nz/FBT/FBT/FBT/FBT/FBT/FBTc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nz/////+B////AP///gB///wAP//4AB//+AAf//gAH//4AB//+AAf//gAH//8AD///gB///8A////gf////////)](https://www.rdkit.org/)
+[![Knime Hub](https://img.shields.io/static/v1?label=Available%20on&message=KNIME&color=ffd500&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcf/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAP/VAPfHMOMAAAAfdFJOUwCyq6CEYtAEApEspncGDpjxVlAYgDSdiEBHbMrCHtmwXwB/AAAAT3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic48osKEnmUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgAolQ7jKiJtHwAAAIxJREFUGNNdjFkSgyAQBYdtYADZVNxz/2NGjSlj+q9fvWqAD1rDk1Ke3nJqH4NnpH7d4iCFvV1XVJ3r7u6URPZiHb8eeFJ25sjDNahlKRDUkq7u5njd32ZC3A433g2+h3bKCuUx9FHOecyV/CzXfi/KSJG9EjJB0lEAS9UxxriINMiOLJim0SfNiYF/3szTBp6mEP9HAAAAAElFTkSuQmCC)](https://hub.knime.com/cbouy/spaces/Private/latest/Interactive%20Grid%20of%20Molecules~OZIyk4YLBNvXq-xU)
 [![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/cbouy/mols2grid/blob/master/demo.ipynb)
 
 mols2grid is an interactive chemical viewer for 2D structures of small molecules, based on RDKit.
@@ -30,7 +31,12 @@ Alternatively, you can also use pip:
 pip install mols2grid
 ```
 
-It is compatible with Jupyter Notebook and Google Colab (Visual Studio notebooks and Jupyterlab are not fully supported) and can run on Streamlit.
+It is fully compatible with Jupyter Notebook and Google Colab and can run on Streamlit.  
+It also works with Visual Studio notebooks and Jupyterlab, except for accessing your selection with `mols2grid.get_selection()` and copying it to the clipboard, but you can still export it as a CSV or SMILES file.
+
+<img alt="knime logo" align="left" style="padding:6px" src="https://www.knime.com/sites/default/files/favicons/favicon-32x32.png"/>
+<p>You can also use mols2grid directly in <a href="https://www.knime.com/">KNIME</a>, by looking for the `Interactive Grid of Molecules` component on the Knime HUB.<br/>
+Make sure you have setup <a href="https://docs.knime.com/latest/python_installation_guide">Knime's Python integration</a> for the node to work.</p>
 
 ## 📜 Usage
 ---
@@ -152,12 +158,12 @@ You can either:
 
 ## 🚀 Resources
 ---
-* [Simple exemple](https://iwatobipen.wordpress.com/2021/06/13/draw-molecules-on-jupyter-notebook-rdkit-mols2grid/) by iwatobipen
+* [Simple example](https://iwatobipen.wordpress.com/2021/06/13/draw-molecules-on-jupyter-notebook-rdkit-mols2grid/) by iwatobipen
 * Creating a web app with Streamlit for filtering datasets:
   * [Blog post](https://blog.reverielabs.com/building-web-applications-from-python-scripts-with-streamlit/) by Justin Chavez
   * [Video tutorial](https://www.youtube.com/watch?v=0rqIwSeUImo) by Data Professor
-* [Viewing clustered chemical structures](https://practicalcheminformatics.blogspot.com/2021/07/viewing-clustered-chemical-structures.html) by Pat Walters
-* [RDKit UGM 2021 notebook](https://colab.research.google.com/github/rdkit/UGM_2021/blob/main/Notebooks/Bouysset_mols2grid.ipynb)
+* [Viewing clustered chemical structures](https://practicalcheminformatics.blogspot.com/2021/07/viewing-clustered-chemical-structures.html) and [Exploratory data analysis](https://practicalcheminformatics.blogspot.com/2021/10/exploratory-data-analysis-with.html) by Pat Walters
+* [Advanced notebook (RDKit UGM 2021)](https://colab.research.google.com/github/rdkit/UGM_2021/blob/main/Notebooks/Bouysset_mols2grid.ipynb)
 
 ## 👏 Acknowledgments
 ---
@@ -170,7 +176,7 @@ You can either:
 
 Unless otherwise noted, all files in this directory and all subdirectories are distributed under the Apache License, Version 2.0:
 ```
-    Copyright 2021 Cédric BOUYSSET
+    Copyright 2021-2022 Cédric BOUYSSET
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

mols2grid/_version.py

@@ -1 +1 @@
-__version__ = "0.2.0"
+__version__ = "0.2.1"

mols2grid/molgrid.py

@@ -12,7 +12,8 @@
                     mol_to_record,
                     mol_to_smiles,
                     sdf_to_dataframe,
-                    remove_coordinates)
+                    remove_coordinates,
+                    slugify)
 from .select import register
 try:
     from IPython.display import HTML, Javascript
@@ -397,16 +398,13 @@ def to_pages(self, subset=None, tooltip=None, n_cols=5, n_rows=3,
         # define fields that are searchable and sortable
         search_cols = [f"data-{col}" for col in subset if col != "img"]
         if tooltip:
-            search_cols.append("mols2grid-tooltip")
-            sort_cols = search_cols[:-1]
-            sort_cols.extend([f"data-{col}" for col in tooltip])
+            search_cols.extend([f"data-{col}" for col in tooltip])
             for col in tooltip:
                 if col not in subset:
-                    s = f'<div class="data data-{col}" style="display: none;"></div>'
+                    s = f'<div class="data data-{slugify(col)}" style="display: none;"></div>'
                     content.append(s)
                     column_map[col] = f"data-{col}"
-        else:
-            sort_cols = search_cols[:]
+        sort_cols = search_cols[:]
         sort_cols = ["mols2grid-id"] + sort_cols
         # get unique list but keep order
         sort_cols = list(dict.fromkeys(sort_cols))
@@ -441,15 +439,16 @@ def to_pages(self, subset=None, tooltip=None, n_cols=5, n_rows=3,
                      'data-toggle="popover" data-content="."></a>')  
             else:
                 if style.get(col):
-                    s = f'<div class="data data-{col} style-{col}" style=""></div>'
+                    s = (f'<div class="data data-{slugify(col)} style-{slugify(col)}" '
+                         'style=""></div>')
                 else:
-                    s = f'<div class="data data-{col}"></div>'
+                    s = f'<div class="data data-{slugify(col)}"></div>'
             temp.append(s)
             column_map[col] = f"data-{col}"
         content = temp + content
         # add but hide SMILES div if not present
         if smiles not in (subset + tooltip):
-            s = f'<div class="data data-{smiles}" style="display: none;"></div>'
+            s = f'<div class="data data-{slugify(smiles)}" style="display: none;"></div>'
             content.append(s)
             column_map[smiles] = f"data-{smiles}"
         # set mapping for list.js
@@ -459,6 +458,7 @@ def to_pages(self, subset=None, tooltip=None, n_cols=5, n_rows=3,
         else:
             whole_cell_style = False
             x = "[{data: ['mols2grid-id']}, "
+        value_names = [slugify(c) for c in value_names]
         value_names = x + str(value_names)[1:]
 
         # apply CSS styles
@@ -467,7 +467,7 @@ def to_pages(self, subset=None, tooltip=None, n_cols=5, n_rows=3,
                 name = "cellstyle"
                 df[name] = df.apply(func, axis=1)
             else:
-                name = f"style-{col}"
+                name = f"style-{slugify(col)}"
                 df[name] = df[col].apply(func)
             final_columns.append(name)
             value_names = value_names[:-1] + f", {{ attr: 'style', name: {name!r} }}]"
@@ -523,12 +523,18 @@ def to_pages(self, subset=None, tooltip=None, n_cols=5, n_rows=3,
 
         if sort_by and sort_by != "mols2grid-id":
             if sort_by in (subset + tooltip):
-                sort_by = f"data-{sort_by}"
+                sort_by = f"data-{slugify(sort_by)}"
             else:
                 raise ValueError(f"{sort_by!r} is not an available field in "
                                  "`subset` or `tooltip`")
         else:
             sort_by = "mols2grid-id"
+        
+        # slugify remaining vars
+        column_map = {k: slugify(v) for k, v in column_map.items()}
+        sort_cols = [slugify(c) for c in sort_cols]
+        search_cols = [slugify(c) for c in search_cols]
+        smiles = slugify(smiles)
         df = df[final_columns].rename(columns=column_map).sort_values(sort_by)
 
         template = env.get_template('pages.html')
@@ -750,5 +756,5 @@ def display(self, width="100%", height=None, iframe_allow="clipboard-write",
 
     def save(self, output, **kwargs):
         """Render and save the grid in an HTML document"""
-        with open(output, "w") as f:
+        with open(output, "w", encoding="utf-8") as f:
             f.write(self.render(**kwargs))

mols2grid/utils.py

@@ -1,3 +1,4 @@
+import re
 from functools import wraps, partial
 from importlib.util import find_spec
 from jinja2 import Environment, FileSystemLoader
@@ -40,7 +41,8 @@ def tooltip_formatter(s, subset, fmt, style, transform):
     items = []
     for k, v in s[subset].to_dict().items():
         displayed = transform[k](v) if transform.get(k) else v
-        v = f'<span style="{style[k](v)}">{displayed}</span>' if style.get(k) else displayed
+        v = (f'<span style="{style[k](v)}">{displayed}</span>'
+             if style.get(k) else displayed)
         items.append(fmt.format(key=k, value=v))
     return "<br>".join(items)
 
@@ -92,3 +94,7 @@ def make_popup_callback(title, html, js="", style=""):
                        html=html,
                        title=title,
                        style=style))
+
+def slugify(string):
+    """Replaces whitespaces with hyphens"""
+    return re.sub(r"\s+", "-", string)

tests/test_interface.py

@@ -600,3 +600,27 @@ def test_subset_gives_rows_order(driver, grid):
             assert el.value_of_css_property("display") == "none"
         else:
             assert name == subset[i]
+
+def test_colname_with_spaces(driver, df):
+    df = (df
+        .rename(columns={"SMILES": "Molecule", "_Name": "Molecule name"})
+        .drop(columns="mol"))
+    grid = mols2grid.MolGrid(df, smiles_col="Molecule")
+    doc = get_doc(grid, dict(
+        subset=["Molecule name", "img"],
+        tooltip=["Molecule"],
+        n_rows=1))
+    driver.get(doc)
+    driver.wait_for_img_load()
+    el = driver.find_by_css_selector("#mols2grid .cell .data")
+    assert el.text == "3-methylpentane"
+
+def test_custom_header(driver, grid):
+    doc = get_doc(grid, {
+        "subset": ["img"],
+        "custom_header": '<script src="https://unpkg.com/@rdkit/rdkit@2021.9.2/Code/MinimalLib/dist/RDKit_minimal.js"></script>',
+        "n_rows": 1})
+    driver.get(doc)
+    driver.wait_for_img_load()
+    val = driver.execute_script("return RDKit.version();")
+    assert val == "2021.09.2"

tests/test_molgrid.py

@@ -234,21 +234,6 @@ def test_render_wrong_template(grid_otf):
     with pytest.raises(ValueError, match="template='foo' not supported"):
         grid_otf.render(template="foo")
 
-@pytest.mark.parametrize("kwargs", [
-    dict(),
-    dict(subset=["img"]),
-    dict(tooltip=["ID"]),
-    dict(selection=False),
-    dict(style={"ID": lambda x: "color: red" if x == 1 else ""}),
-    dict(transform={"ID": lambda x: f"Id. #{x}"}),
-    dict(custom_css="* {color: red;}"),
-    dict(callback="console.log(JSON.stringify(data));"),
-    dict(custom_header='<script src="https://unpkg.com/@rdkit/rdkit@2021.3.2/Code/MinimalLib/dist/RDKit_minimal.js"></script>'),
-    dict(substruct_highlight=False),
-])
-def test_integration_pages(grid_otf, kwargs):
-    grid_otf.to_pages(**kwargs)
-
 @pytest.mark.parametrize("kwargs", [
     dict(),
     dict(subset=["ID"]),

tests/test_utils.py

@@ -139,3 +139,16 @@ def test_make_popup_callback():
     assert '<span id="foo">${title}</span>' in popup
     assert '// prerequisite JavaScript code\nvar title = "FOOBAR";' in popup
     assert '<div class="modal-dialog" style="max-width: 42%;">' in popup
+
+@pytest.mark.parametrize(["string", "expected"], [
+    ("Mol", "Mol"),
+    ("mol name", "mol-name"),
+    ("mol  name", "mol-name"),
+    ("mol-name", "mol-name"),
+    ("mol- name", "mol--name"),
+    ("mol\tname", "mol-name"),
+    ("mol\nname", "mol-name"),
+    ("mol \t\n name", "mol-name"),
+])
+def test_slugify(string, expected):
+    assert utils.slugify(string) == expected