Chemistry - more chemistry demos

[psychemedia]

A simple molecule viewer, given a form with molecule cids as values, we can select which molecule to render:

html2 = '''
<select style="width: 220px; " id="molt" name="category">

    <option value="cid:6323">typ1</option>
    <option value="cid:10485">typ2</option>
</select>
<div class="output_subarea output_html rendered_html">sdsd<div id="3dmolviewer_1573080341120505623" style="position: relative; width: 300px; height: 300px">
        fdd
        <canvas id="undefined" width="600" height="600" style="width: 300px; height: 300px; padding: 0px; position: absolute; top: 0px; left: 0px; z-index: 0;"></canvas></div>
<script>

  $3Dmolpromise = loadScriptAsync('https://3dmol.csb.pitt.edu/build/3Dmol.js');

var viewer_15730803411205056 = null;
var warn = document.getElementById("3dmolwarning_1573080341120505623");
if(warn) {
    warn.parentNode.removeChild(warn);
}
$3Dmolpromise.then(function() {
viewer_1573080341120505623 = $3Dmol.createViewer($("#3dmolviewer_1573080341120505623"),{backgroundColor:"white"});
$3Dmol.download("cid:6323", viewer_1573080341120505623, {}, function() {
viewer_1573080341120505623.setStyle({"stick": {"radius": 0.1}, "sphere": {"scale": 0.25}});
viewer_1573080341120505623.render();
})
});

$('#molt').change(function() {

  var selectedClass = $(this).val();
  $3Dmol.download(selectedClass, viewer_1573080341120505623, {}, function() {
viewer_1573080341120505623.setStyle({"stick": {"radius": 0.1}, "sphere": {"scale": 0.25}});
viewer_1573080341120505623.render();
});
});
</script></div>'''

from IPython.display import HTML
HTML(html2)

Code from cribbing how the single molecule view is rendered and this jquery / form example.

[psychemedia]

To further push this into JS domain, we can get a CID from a name. For example:

https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/bromomethane/cids/JSON

[psychemedia]

"A series of jupyter notebooks to help chemistry students learn python for analytical chemistry": https://github.com/erik-menke/AnalyticalProjects

[psychemedia]

moly - molecular viewer with plotly https://github.com/VHchavez/moly

[psychemedia]

Element picker? https://github.com/osscar-org/widget-periodictable

[psychemedia]

http://partridgejiang.github.io/Kekule.js/

[psychemedia]

https://github.com/aclarkxyz/web_molkit - molecule editor, cf drawio