Published
Edited
Mar 25, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof molecule = {
const mol = rdkit.get_mol(input);
const _svg = mol.get_svg().clean();
const elem = html`${_svg}`;
const valid = mol.is_valid();
elem.title =
!valid? "error: invalid SMILES string":
smile != input? "SMILES string: "+input:
smile == ""? "error: molecule not found":
"name: "+name
const s = DOM.svg(width, height);
s.setAttributeNS(null, 'width', width);
s.setAttributeNS(null, 'height', height);
s.setAttributeNS
( null
, 'style'
, `width: 100%; height: auto; max-width: ${width}; box-sizing: border-box;`
);
s.appendChild(svg`${_svg}`);
elem.value = s;
return elem;
}
Insert cell
Insert cell
input
Insert cell
smile = comps == undefined ? "" : /* no notebook crash on empty search */
comps[0].props[comps[0].props.map(e => e.urn.label).indexOf("SMILES")].value.sval
.replace(/[+-]/g,"") // fixes failure cases like: [Na+].[Cl-]
Insert cell
comps = res.PC_Compounds
Insert cell
res = (await fetch (pubchemRESTquery)).json();
Insert cell
pubchemRESTquery = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${name}/JSON`
Insert cell
Insert cell
Insert cell
Insert cell
RDKit = require("https://unpkg.com/@rdkit/rdkit/Code/MinimalLib/dist/RDKit_minimal.js")
Insert cell
rdkit = RDKit()
Insert cell
// A function for customizing the header of the SVG string returned by RDKit
String.prototype.clean = function() {
let header_svg = `<svg version='1.1' baseProfile='full'
xmlns='http://www.w3.org/2000/svg'
xmlns:rdkit='http://www.rdkit.org/xml'
xmlns:xlink='http://www.w3.org/1999/xlink'
xml:space='preserve'
width=${width} height=${height} viewBox='0 0 250 200'>`;
let orig = this.split("\n");
let header_xml = orig[0];
let body = orig.slice(1);
let combined = header_xml.concat(header_svg, body);
return combined
}
Insert cell
height = width*0.5
Insert cell
Insert cell
params = new URL(document.baseURI).searchParams
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
import {serialize,rasterize} from "@mbostock/saving-svg"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more