{"id":8711,"date":"2022-10-31T18:07:03","date_gmt":"2022-10-31T18:07:03","guid":{"rendered":"https:\/\/www.blopig.com\/blog\/?p=8711"},"modified":"2022-11-24T10:24:46","modified_gmt":"2022-11-24T10:24:46","slug":"code-your-own-molecule-sketcher-in-4-easy-steps","status":"publish","type":"post","link":"https:\/\/www.blopig.com\/blog\/2022\/10\/code-your-own-molecule-sketcher-in-4-easy-steps\/","title":{"rendered":"Code your own molecule sketcher in 4 easy steps!"},"content":{"rendered":"\n<p>Drawing molecules on your laptop usually requires access to proprietary software such as ChemDraw (<a rel=\"noreferrer noopener\" href=\"https:\/\/perkinelmerinformatics.com\/products\/research\/chemdraw\" target=\"_blank\">link<\/a>) or free websites such as PubChem&#8217;s online sketcher (<a rel=\"noreferrer noopener\" href=\"https:\/\/pubchem.ncbi.nlm.nih.gov\/\/edit3\/index.html\" target=\"_blank\">link<\/a>). However, if you are feeling adventurous, you can build your personal sketcher in React\/Typescript using the Ketcher package!<\/p>\n\n\n\n<p>Ketcher is an open-source package that allows easy implementation of a molecule sketcher into a web application. Unfortunately, it does require TypeScript so the script to run it cannot be imported directly into an HTML page. Therefore we will set up a simple React app to get it working.<\/p>\n\n\n\n<p>The sketcher is very sleek and has a vast array of functionality, such as choosing any atom from the periodic table and being able to directly import molecules from either SMILES or Mol2\/SDF file format into the sketcher. These molecules can then be edited and saved to a new file in the chemical file format of your choosing.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Creating a (S)ketcher web app<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First, create and start your React app by running the following npm  (a JavaScript package manager) commands:<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx create-react-app sketcher\ncd sketcher\nnpm start<\/pre>\n\n\n\n<p>These commands will create a blank template for your React project, which we can add our code to, and so build our molecule sketcher web-page.<\/p>\n\n\n\n<p>2. Install the following packages and dependencies for this web-page:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm i typescript --save-dev\nnpm i -s ketcher-react ketcher-standalone ketcher-core miew<\/pre>\n\n\n\n<p>3. Next we need to copy over the code for the sketcher. For simplicity, and to reduce the length of this blog post, I have just provided the necessary scripts for this to work.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a file called <code data-enlighter-language=\"raw\" class=\"EnlighterJSRAW\">sketcher_component.tsx<\/code> in the <code data-enlighter-language=\"raw\" class=\"EnlighterJSRAW\">src<\/code> folder and copy the following code into it <\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import React from \"react\";\nimport \"miew\/dist\/miew.min.css\";\nimport { StandaloneStructServiceProvider } from \"ketcher-standalone\";\nimport { Editor } from \"ketcher-react\";\nimport { Ketcher } from \"ketcher-core\";\nimport \"ketcher-react\/dist\/index.css\";\nimport Miew from \"miew\";\n\n(window as any).Miew = Miew;\n\nconst structServiceProvider = new StandaloneStructServiceProvider();\n\nexport class KetcherExample extends React.Component {\n  ketcher: Ketcher;\n\n  constructor(props: any) {\n    super(props);\n  }\n\n  handleOnInit = async (ketcher: Ketcher) =&gt; {\n    this.ketcher = ketcher;\n    (window as any).ketcher = ketcher;\n  };\n\n  render() {\n    return (\n      &lt;Editor\n        errorHandler={(message:string) =&gt; null}\n        staticResourcesUrl={\"\"}\n        structServiceProvider={structServiceProvider}\n        onInit={this.handleOnInit}\n      \/&gt;\n    );\n  }\n}\n\nexport default KetcherExample;\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit your <code data-enlighter-language=\"raw\" class=\"EnlighterJSRAW\">src\/App.js<\/code> file so that it looks like this:<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import KetcherExample from '.\/sketcher_component.tsx';\nimport '.\/App.css';\nimport React from 'react'\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;KetcherExample \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/pre>\n\n\n\n<p>This ensures that the Sketcher component is loaded into our main app. Separating your components into separate files in JavaScript is good practice and keeps the code-base manageable!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit your tsconfig.json file so that <code data-enlighter-language=\"json\" class=\"EnlighterJSRAW\">compiler_options.strict = false<\/code><\/li>\n<\/ul>\n\n\n\n<p>4. Your sketcher web-app should work and look like this!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/www.blopig.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-31-17-43-41.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"625\" height=\"445\" loading=\"lazy\" src=\"https:\/\/i0.wp.com\/www.blopig.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-31-17-43-41.png?resize=625%2C445&#038;ssl=1\" alt=\"\" class=\"wp-image-8722\" srcset=\"https:\/\/i0.wp.com\/www.blopig.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-31-17-43-41.png?w=960&amp;ssl=1 960w, https:\/\/i0.wp.com\/www.blopig.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-31-17-43-41.png?resize=300%2C214&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.blopig.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-31-17-43-41.png?resize=768%2C547&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.blopig.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-31-17-43-41.png?resize=624%2C445&amp;ssl=1 624w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/figure>\n\n\n\n<p>Congratulations! You&#8217;ve built your personal sketcher!  Now you can edit it how you please. You could even add features such as displaying molecule properties or displaying a 3D structure as you sketch if you are feeling even more adventurous!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Drawing molecules on your laptop usually requires access to proprietary software such as ChemDraw (link) or free websites such as PubChem&#8217;s online sketcher (link). However, if you are feeling adventurous, you can build your personal sketcher in React\/Typescript using the Ketcher package! Ketcher is an open-source package that allows easy implementation of a molecule sketcher [&hellip;]<\/p>\n","protected":false},"author":80,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","wikipediapreview_detectlinks":true,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ngg_post_thumbnail":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[187,621,14,447,201],"tags":[156,665,134,666],"ppma_author":[554],"class_list":["post-8711","post","type-post","status-publish","format-standard","hentry","category-cheminformatics","category-data-visualization","category-howto","category-molecular-design","category-small-molecules","tag-javascript","tag-react","tag-small-molecules","tag-typescript"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"authors":[{"term_id":554,"user_id":80,"is_guest":0,"slug":"guy","display_name":"Guy Durant","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/012800a6259061320ac59c0ef0f953daa4c2a0ebc3538e9463c6c215d88ed479?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts\/8711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/users\/80"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/comments?post=8711"}],"version-history":[{"count":5,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts\/8711\/revisions"}],"predecessor-version":[{"id":8793,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts\/8711\/revisions\/8793"}],"wp:attachment":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/media?parent=8711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/categories?post=8711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/tags?post=8711"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=8711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}