Published
Edited
Mar 25, 2022
Also listed in…
Contributions
Tools
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