├── .dockerignore
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    ├── dependabot.yml
    └── workflows
    │   └── docker-build.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .prettierignore
├── .vscode
    └── settings.json
├── .yarn
    └── releases
    │   └── yarn-1.22.19.cjs
├── .yarnrc.yml
├── CODEOWNERS
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── README.md
├── azure-pipelines.yml
├── docs
    ├── GettingStartedInJS.html
    └── demo.html
├── examples.png
├── examples
    ├── .npmignore
    ├── angular
    │   ├── .browserslistrc
    │   ├── .eslintrc.json
    │   ├── .gitignore
    │   ├── README.md
    │   ├── angular.json
    │   ├── angular.md
    │   ├── package.json
    │   ├── src
    │   │   ├── app
    │   │   │   ├── app.component.css
    │   │   │   ├── app.component.html
    │   │   │   ├── app.component.ts
    │   │   │   ├── app.module.ts
    │   │   │   ├── examples
    │   │   │   │   ├── code-example
    │   │   │   │   │   ├── code-example.component.css
    │   │   │   │   │   ├── code-example.component.html
    │   │   │   │   │   └── code-example.component.ts
    │   │   │   │   ├── code-examples.ts
    │   │   │   │   ├── examples.component.css
    │   │   │   │   ├── examples.component.html
    │   │   │   │   ├── examples.component.ts
    │   │   │   │   ├── examples.module.ts
    │   │   │   │   ├── examples
    │   │   │   │   │   ├── canvas-rendering
    │   │   │   │   │   │   ├── canvas-rendering.component.css
    │   │   │   │   │   │   ├── canvas-rendering.component.html
    │   │   │   │   │   │   └── canvas-rendering.component.ts
    │   │   │   │   │   ├── common
    │   │   │   │   │   │   └── smiles.ts
    │   │   │   │   │   ├── drawing-options
    │   │   │   │   │   │   ├── drawing-options.component.css
    │   │   │   │   │   │   ├── drawing-options.component.html
    │   │   │   │   │   │   └── drawing-options.component.ts
    │   │   │   │   │   ├── example-loader
    │   │   │   │   │   │   ├── example-loader.component.css
    │   │   │   │   │   │   ├── example-loader.component.html
    │   │   │   │   │   │   └── example-loader.component.ts
    │   │   │   │   │   ├── mol-list
    │   │   │   │   │   │   ├── mol-list.component.css
    │   │   │   │   │   │   ├── mol-list.component.html
    │   │   │   │   │   │   └── mol-list.component.ts
    │   │   │   │   │   ├── mol-struct
    │   │   │   │   │   │   ├── mol-struct.component.css
    │   │   │   │   │   │   ├── mol-struct.component.html
    │   │   │   │   │   │   └── mol-struct.component.ts
    │   │   │   │   │   ├── multi-substructure-highlight
    │   │   │   │   │   │   ├── multi-substructure-highlight.component.css
    │   │   │   │   │   │   ├── multi-substructure-highlight.component.html
    │   │   │   │   │   │   └── multi-substructure-highlight.component.ts
    │   │   │   │   │   ├── substructure-highlight
    │   │   │   │   │   │   ├── substructure-highlight.component.css
    │   │   │   │   │   │   ├── substructure-highlight.component.html
    │   │   │   │   │   │   └── substructure-highlight.component.ts
    │   │   │   │   │   ├── substructure-search
    │   │   │   │   │   │   ├── substructure-search.component.css
    │   │   │   │   │   │   ├── substructure-search.component.html
    │   │   │   │   │   │   └── substructure-search.component.ts
    │   │   │   │   │   └── svg-rendering
    │   │   │   │   │   │   ├── svg-rendering.component.css
    │   │   │   │   │   │   ├── svg-rendering.component.html
    │   │   │   │   │   │   └── svg-rendering.component.ts
    │   │   │   │   ├── introduction
    │   │   │   │   │   ├── introduction.component.css
    │   │   │   │   │   ├── introduction.component.html
    │   │   │   │   │   └── introduction.component.ts
    │   │   │   │   ├── molecule-structure
    │   │   │   │   │   ├── canvas-renderer
    │   │   │   │   │   │   ├── canvas-renderer.component.css
    │   │   │   │   │   │   ├── canvas-renderer.component.html
    │   │   │   │   │   │   └── canvas-renderer.component.ts
    │   │   │   │   │   ├── mol-draw-options.ts
    │   │   │   │   │   ├── molecule-structure.component.css
    │   │   │   │   │   ├── molecule-structure.component.html
    │   │   │   │   │   ├── molecule-structure.component.ts
    │   │   │   │   │   └── svg-renderer
    │   │   │   │   │   │   ├── svg-renderer.component.css
    │   │   │   │   │   │   ├── svg-renderer.component.html
    │   │   │   │   │   │   └── svg-renderer.component.ts
    │   │   │   │   ├── rdkit-loader
    │   │   │   │   │   └── rdkit-loader.service.ts
    │   │   │   │   └── validators
    │   │   │   │   │   ├── is-mol.directive.ts
    │   │   │   │   │   └── is-substruct.directive.ts
    │   │   │   ├── navbar
    │   │   │   │   ├── navbar.component.css
    │   │   │   │   ├── navbar.component.html
    │   │   │   │   └── navbar.component.ts
    │   │   │   └── sidebar
    │   │   │   │   ├── sidebar-contents.ts
    │   │   │   │   ├── sidebar.component.css
    │   │   │   │   ├── sidebar.component.html
    │   │   │   │   └── sidebar.component.ts
    │   │   ├── assets
    │   │   │   ├── .gitkeep
    │   │   │   ├── favicon.png
    │   │   │   ├── logo-nobackground-1000.png
    │   │   │   ├── logo-nobackground-200.png
    │   │   │   ├── logo-nobackground-500.png
    │   │   │   ├── logo-normal-1000.png
    │   │   │   ├── logo-normal-200.png
    │   │   │   ├── logo-normal-500.png
    │   │   │   ├── rdkit.png
    │   │   │   ├── rdkitjs.png
    │   │   │   ├── rdkitjs_cropped.png
    │   │   │   └── rdkitjs_cropped_200.png
    │   │   ├── code-example-generator.js
    │   │   ├── environments
    │   │   │   ├── environment.prod.ts
    │   │   │   └── environment.ts
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── polyfills.ts
    │   │   └── styles.css
    │   ├── tsconfig.app.json
    │   └── tsconfig.json
    ├── javascript
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   └── public
    │   │   ├── favicon.png
    │   │   ├── logo-nobackground-1000.png
    │   │   ├── logo-nobackground-200.png
    │   │   ├── logo-nobackground-500.png
    │   │   ├── logo-normal-1000.png
    │   │   ├── logo-normal-200.png
    │   │   ├── logo-normal-500.png
    │   │   ├── rdkit.png
    │   │   ├── rdkitjs.png
    │   │   ├── rdkitjs_cropped.png
    │   │   └── rdkitjs_cropped_200.png
    ├── nextjs
    │   ├── README.md
    │   ├── components
    │   │   └── MoleculeStructure
    │   │   │   └── MoleculeStructure.js
    │   ├── next.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── pages
    │   │   ├── _app.js
    │   │   └── index.js
    │   └── test.js
    ├── node
    │   ├── README.md
    │   ├── examples
    │   │   ├── descriptors_calculation.js
    │   │   ├── drawing_molecules_constraints.js
    │   │   ├── drawing_molecules_options.js
    │   │   ├── drawing_molecules_substructure.js
    │   │   ├── drawing_molecules_svg.js
    │   │   └── identifiers_generation.js
    │   └── package.json
    ├── react
    │   ├── README.md
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.png
    │   │   ├── index.html
    │   │   ├── logo-nobackground-1000.png
    │   │   ├── logo-nobackground-200.png
    │   │   ├── logo-nobackground-500.png
    │   │   ├── logo-normal-1000.png
    │   │   ├── logo-normal-200.png
    │   │   ├── logo-normal-500.png
    │   │   ├── manifest.json
    │   │   ├── rdkit.png
    │   │   ├── rdkitjs.png
    │   │   ├── rdkitjs_cropped.png
    │   │   ├── rdkitjs_cropped_200.png
    │   │   └── robots.txt
    │   ├── src
    │   │   ├── components
    │   │   │   ├── CodeExample
    │   │   │   │   └── CodeExample.js
    │   │   │   ├── Introduction
    │   │   │   │   └── Introduction.js
    │   │   │   ├── MoleculeStructure
    │   │   │   │   ├── MoleculeStructure.css
    │   │   │   │   └── MoleculeStructure.js
    │   │   │   ├── NavBar
    │   │   │   │   └── NavBar.js
    │   │   │   └── SideNav
    │   │   │   │   └── SideNav.js
    │   │   ├── examples
    │   │   │   ├── ExampleCanvas.js
    │   │   │   ├── ExampleDrawingOptions.js
    │   │   │   ├── ExampleList.js
    │   │   │   ├── ExampleMoleculeStructure.js
    │   │   │   ├── ExampleMultiSubstructure.js
    │   │   │   ├── ExampleSubstructure.js
    │   │   │   ├── ExampleSubstructureSearch.js
    │   │   │   └── ExampleSvg.js
    │   │   ├── index.css
    │   │   ├── index.js
    │   │   ├── reportWebVitals.js
    │   │   ├── setupTests.js
    │   │   └── utils
    │   │   │   ├── initRDKit.js
    │   │   │   └── smiles.js
    │   └── yarn.lock
    └── vue
    │   ├── README.md
    │   ├── index.html
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │       ├── favicon.png
    │       ├── rdkit.png
    │       ├── rdkitjs_cropped_200.png
    │       └── robots.txt
    │   ├── src
    │       ├── App.vue
    │       ├── components
    │       │   ├── CodeExample.vue
    │       │   ├── Introduction.vue
    │       │   ├── MoleculeStructure.vue
    │       │   ├── NavBar.vue
    │       │   ├── SideNav.vue
    │       │   └── examples
    │       │   │   ├── ExampleCanvas.vue
    │       │   │   ├── ExampleDrawingOptions.vue
    │       │   │   ├── ExampleList.vue
    │       │   │   ├── ExampleMoleculeStructure.vue
    │       │   │   ├── ExampleMultiSubstructure.vue
    │       │   │   ├── ExampleSVG.vue
    │       │   │   ├── ExampleSubstructure.vue
    │       │   │   └── ExampleSubstructureSearch.vue
    │       ├── globals.d.ts
    │       ├── main.ts
    │       ├── style.css
    │       ├── utils
    │       │   ├── initRDKit.ts
    │       │   └── smiles.ts
    │       └── vite-env.d.ts
    │   ├── tsconfig.json
    │   └── vite.config.ts
├── package.json
├── rdkitjs_logo.png
├── scripts
    ├── build_rdkitjs.sh
    └── ci.sh
├── typescript
    ├── README.md
    ├── index.d.ts
    └── tsconfig.json
└── yarn.lock


/.dockerignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/.dockerignore


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | - package-ecosystem: npm
 4 |   directory: "/"
 5 |   schedule:
 6 |     interval: monthly
 7 | - package-ecosystem: npm
 8 |   directory: "/examples/react/"
 9 |   schedule:
10 |     interval: monthly
11 | - package-ecosystem: npm
12 |   directory: "/examples/javascript/"
13 |   schedule:
14 |     interval: monthly
15 | 


--------------------------------------------------------------------------------
/.github/workflows/docker-build.yml:
--------------------------------------------------------------------------------
 1 | name: Docker Build
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |     inputs:
 6 |       semver_version:
 7 |         description: 'Semantic version (e.g. 1.0.0)'
 8 |         required: true
 9 |         type: string
10 |       rdkit_dash_version:
11 |         description: 'RDKit Dash version'
12 |         required: true
13 |         type: string
14 |       beta:
15 |         description: 'Beta flag'
16 |         required: true
17 |         type: string
18 | 
19 | jobs:
20 |   build:
21 |     runs-on: ubuntu-latest
22 |     
23 |     steps:
24 |     - uses: actions/checkout@v3
25 |       
26 |     - name: Build with NPM
27 |       run: |
28 |         RDKIT_DASH_VERSION=${{ inputs.rdkit_dash_version }} SEMVER_VERSION=${{ inputs.semver_version }} BETA=${{ inputs.beta }} NPM_TOKEN=${{ secrets.NPM_TOKEN }} npm run build


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Created by https://www.toptal.com/developers/gitignore/api/node,react,visualstudiocode,yarn
  2 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,react,visualstudiocode,yarn
  3 | 
  4 | ### Node ###
  5 | # Logs
  6 | logs
  7 | *.log
  8 | npm-debug.log*
  9 | yarn-debug.log*
 10 | yarn-error.log*
 11 | lerna-debug.log*
 12 | .pnpm-debug.log*
 13 | 
 14 | # Diagnostic reports (https://nodejs.org/api/report.html)
 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 16 | 
 17 | # Runtime data
 18 | pids
 19 | *.pid
 20 | *.seed
 21 | *.pid.lock
 22 | 
 23 | # Directory for instrumented libs generated by jscoverage/JSCover
 24 | lib-cov
 25 | 
 26 | # Coverage directory used by tools like istanbul
 27 | coverage
 28 | *.lcov
 29 | 
 30 | # nyc test coverage
 31 | .nyc_output
 32 | 
 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 34 | .grunt
 35 | 
 36 | # Bower dependency directory (https://bower.io/)
 37 | bower_components
 38 | 
 39 | # node-waf configuration
 40 | .lock-wscript
 41 | 
 42 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 43 | build/Release
 44 | 
 45 | # Dependency directories
 46 | node_modules/
 47 | jspm_packages/
 48 | 
 49 | # Snowpack dependency directory (https://snowpack.dev/)
 50 | web_modules/
 51 | 
 52 | # TypeScript cache
 53 | *.tsbuildinfo
 54 | 
 55 | # Optional npm cache directory
 56 | .npm
 57 | 
 58 | # Optional eslint cache
 59 | .eslintcache
 60 | 
 61 | # Optional stylelint cache
 62 | .stylelintcache
 63 | 
 64 | # Microbundle cache
 65 | .rpt2_cache/
 66 | .rts2_cache_cjs/
 67 | .rts2_cache_es/
 68 | .rts2_cache_umd/
 69 | 
 70 | # Optional REPL history
 71 | .node_repl_history
 72 | 
 73 | # Output of 'npm pack'
 74 | *.tgz
 75 | 
 76 | # Yarn Integrity file
 77 | .yarn-integrity
 78 | 
 79 | # dotenv environment variable files
 80 | .env
 81 | .env.development.local
 82 | .env.test.local
 83 | .env.production.local
 84 | .env.local
 85 | 
 86 | # parcel-bundler cache (https://parceljs.org/)
 87 | .cache
 88 | .parcel-cache
 89 | 
 90 | # Next.js build output
 91 | .next
 92 | out
 93 | 
 94 | # Nuxt.js build / generate output
 95 | .nuxt
 96 | dist
 97 | 
 98 | # Gatsby files
 99 | .cache/
100 | # Comment in the public line in if your project uses Gatsby and not Next.js
101 | # https://nextjs.org/blog/next-9-1#public-directory-support
102 | # public
103 | 
104 | # vuepress build output
105 | .vuepress/dist
106 | 
107 | # vuepress v2.x temp and cache directory
108 | .temp
109 | 
110 | # Docusaurus cache and generated files
111 | .docusaurus
112 | 
113 | # Serverless directories
114 | .serverless/
115 | 
116 | # FuseBox cache
117 | .fusebox/
118 | 
119 | # DynamoDB Local files
120 | .dynamodb/
121 | 
122 | # TernJS port file
123 | .tern-port
124 | 
125 | # Stores VSCode versions used for testing VSCode extensions
126 | .vscode-test
127 | 
128 | # yarn v2
129 | .yarn/cache
130 | .yarn/unplugged
131 | .yarn/build-state.yml
132 | .yarn/install-state.gz
133 | .pnp.*
134 | 
135 | ### Node Patch ###
136 | # Serverless Webpack directories
137 | .webpack/
138 | 
139 | # Optional stylelint cache
140 | 
141 | # SvelteKit build / generate output
142 | .svelte-kit
143 | 
144 | ### react ###
145 | .DS_*
146 | **/*.backup.*
147 | **/*.back.*
148 | 
149 | node_modules
150 | 
151 | *.sublime*
152 | 
153 | psd
154 | thumb
155 | sketch
156 | 
157 | ### VisualStudioCode ###
158 | .vscode/*
159 | !.vscode/settings.json
160 | !.vscode/tasks.json
161 | !.vscode/launch.json
162 | !.vscode/extensions.json
163 | !.vscode/*.code-snippets
164 | 
165 | # Local History for Visual Studio Code
166 | .history/
167 | 
168 | # Built Visual Studio Code Extensions
169 | *.vsix
170 | 
171 | ### VisualStudioCode Patch ###
172 | # Ignore all local history of files
173 | .history
174 | .ionide
175 | 
176 | # Support for Project snippet scope
177 | .vscode/*.code-snippets
178 | 
179 | # Ignore code-workspaces
180 | *.code-workspace
181 | 
182 | ### yarn ###
183 | # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
184 | 
185 | .yarn/*
186 | !.yarn/releases
187 | !.yarn/patches
188 | !.yarn/plugins
189 | !.yarn/sdks
190 | !.yarn/versions
191 | 
192 | # if you are NOT using Zero-installs, then:
193 | # comment the following lines
194 | # !.yarn/cache
195 | 
196 | # and uncomment the following lines
197 | # .pnp.*
198 | 
199 | # End of https://www.toptal.com/developers/gitignore/api/node,react,visualstudiocode,yarn
200 | 
201 | # typescript docs
202 | typescript/docs
203 | 
204 | # Angular
205 | examples/angular/.angular/cache
206 | examples/angular/dist
207 | 
208 | # Next.js
209 | 
210 | # Created by https://www.toptal.com/developers/gitignore/api/nextjs
211 | # Edit at https://www.toptal.com/developers/gitignore?templates=nextjs
212 | 
213 | ### NextJS ###
214 | # dependencies
215 | /node_modules
216 | /.pnp
217 | .pnp.js
218 | 
219 | # testing
220 | /coverage
221 | 
222 | # next.js
223 | /.next/
224 | /out/
225 | 
226 | # production
227 | /build
228 | 
229 | # misc
230 | .DS_Store
231 | *.pem
232 | 
233 | # debug
234 | npm-debug.log*
235 | yarn-debug.log*
236 | yarn-error.log*
237 | .pnpm-debug.log*
238 | 
239 | # local env files
240 | .env*.local
241 | 
242 | # vercel
243 | .vercel
244 | 
245 | # typescript
246 | *.tsbuildinfo
247 | next-env.d.ts
248 | 
249 | # End of https://www.toptal.com/developers/gitignore/api/nextjs


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org/
2 | //registry.npmjs.org/:_authToken=${NPM_TOKEN}
3 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | typescript/README.md
2 | typescript/index.d.ts
3 | examples/angular/src/app/examples/code-examples.ts
4 | examples/*/build
5 | examples/*/dist
6 | examples/*/.angular
7 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "markdown.extension.toc.levels": "1..2",
3 | }


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | yarnPath: .yarn/releases/yarn-1.22.19.cjs
3 | 


--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # These owners will be the default owners for everything in
2 | # the repo.
3 | * @michelml
4 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Contributing
 2 | 
 3 | You are welcome to contribute to [any GitHub issue](https://github.com/rdkit/rdkit-js/issues) currently open.
 4 | 
 5 | You are also welcome to [log any issue](https://github.com/rdkit/rdkit-js/issues/new/choose) or [start a discussion](https://github.com/rdkit/rdkit-js/discussions/new) on any topic related to RDKit.js.
 6 | 
 7 | To contribute to the plain javascript examples, read [this sub-repository README](https://github.com/rdkit/rdkit-js/tree/master/examples/javascript).
 8 | 
 9 | To contribute to the React.js examples, read [this sub-repository README](https://github.com/rdkit/rdkit-js/tree/master/examples/react).
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2021-2022, Valence Discovery Inc., Greg Landrum, Paolo Tosco, and other RDKit contributors
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | 1. Redistributions of source code must retain the above copyright notice, this
10 |    list of conditions and the following disclaimer.
11 | 
12 | 2. Redistributions in binary form must reproduce the above copyright notice,
13 |    this list of conditions and the following disclaimer in the documentation
14 |    and/or other materials provided with the distribution.
15 | 
16 | 3. Neither the name of the copyright holder nor the names of its
17 |    contributors may be used to endorse or promote products derived from
18 |    this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/azure-pipelines.yml:
--------------------------------------------------------------------------------
 1 | # Node.js
 2 | # Build a general Node.js project with npm.
 3 | # Add steps that analyze code, save build artifacts, deploy, and more:
 4 | # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
 5 | 
 6 | parameters:
 7 | - name: rdkit_version
 8 |   displayName: Rdkit version (underscore format)
 9 |   type: string
10 | - name: semver_version
11 |   displayName: Sub-semver version of the npm package
12 |   type: string
13 | - name: beta
14 |   displayName: Is beta?
15 |   type: boolean
16 |   default: true
17 | 
18 | trigger: none
19 | pr: none
20 | 
21 | pool:
22 |   vmImage: ubuntu-latest
23 | 
24 | steps:
25 | - task: NodeTool@0
26 |   inputs:
27 |     versionSpec: '14.x'
28 |   displayName: 'Install Node.js'
29 | 
30 | - task: DockerInstaller@0
31 |   displayName: Docker Installer
32 |   inputs:
33 |     dockerVersion: 20.10.5
34 |     releaseType: stable
35 | - script: |
36 |     RDKIT_DASH_VERSION=${{ parameters.rdkit_version }} SEMVER_VERSION=${{ parameters.semver_version }}  BETA=${{ parameters.beta }} NPM_TOKEN=$(NPM_TOKEN) npm run build
37 |   displayName: 'Build RDKit.js'
38 | 


--------------------------------------------------------------------------------
/examples.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples.png


--------------------------------------------------------------------------------
/examples/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/examples/angular/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/examples/angular/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "ignorePatterns": ["projects/**/*"],
 4 |   "overrides": [
 5 |     {
 6 |       "files": ["*.ts"],
 7 |       "parserOptions": {
 8 |         "project": ["tsconfig.json"],
 9 |         "createDefaultProgram": true
10 |       },
11 |       "extends": [
12 |         "plugin:@angular-eslint/recommended",
13 |         "plugin:@angular-eslint/template/process-inline-templates"
14 |       ],
15 |       "rules": {
16 |         "@angular-eslint/directive-selector": [
17 |           "error",
18 |           {
19 |             "type": "attribute",
20 |             "prefix": "app",
21 |             "style": "camelCase"
22 |           }
23 |         ],
24 |         "@angular-eslint/component-selector": [
25 |           "error",
26 |           {
27 |             "type": "element",
28 |             "prefix": "app",
29 |             "style": "kebab-case"
30 |           }
31 |         ]
32 |       }
33 |     },
34 |     {
35 |       "files": ["*.html"],
36 |       "extends": ["plugin:@angular-eslint/template/recommended"],
37 |       "rules": {}
38 |     }
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/examples/angular/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.angular/cache
36 | /.sass-cache
37 | /connect.lock
38 | /coverage
39 | /libpeerconnection.log
40 | npm-debug.log
41 | yarn-error.log
42 | testem.log
43 | /typings
44 | 
45 | # System Files
46 | .DS_Store
47 | Thumbs.db
48 | 


--------------------------------------------------------------------------------
/examples/angular/README.md:
--------------------------------------------------------------------------------
 1 | # RDKit for JavaScript (Angular Examples)
 2 | 
 3 | The following sub-repository is dedicated to showcasing a few examples using RDKit.js with [Angular](https://angular.io/).
 4 | 
 5 | The examples are live at [angular.rdkitjs.com](https://angular.rdkitjs.com).
 6 | 
 7 | If you didn't go through the plain javascript examples already, it is recommended to do so before going forward:
 8 | 
 9 | - [JavaScript Examples](https://github.com/rdkit/rdkit-js/tree/master/examples/javascript)
10 | 
11 | ## Contributing
12 | 
13 | First, fork the RDKit.js GitHub repository and run the remaining instructions from your fork.
14 | 
15 | ### Dependencies
16 | 
17 | - Git
18 | - Node >= 14.x
19 | - Yarn 1.22.19
20 | 
21 | ### Installation and local development server
22 | 
23 | Run the following command to install the RDKit.js project.
24 | 
25 | ```bash
26 | git clone https://github.com/<name of your fork>/rdkit-js.git && \
27 | cd rdkit-js && \
28 | yarn install
29 | ```
30 | 
31 | Once the project is installed, run the following command at the root of the RDKit.js repository to start the development server:
32 | 
33 | ```bash
34 | npm run angular:start
35 | ```
36 | 
37 | You are now ready to develop.
38 | 
39 | ### Contributing examples
40 | 
41 | All angular.js examples are written in the `./examples/angular/examples` folder.
42 | 
43 | To add a new example, make sure to respect the following checklist:
44 | 
45 | 1. [ ] Start a new git branch from the master branch and give it a meaningful name
46 | 2. [ ] Use `ng g c examples/examples/<your-example-name>` to generate a new component for your example. Use kebab-case for naming files. You will see a folder generated with a ts file, a HTML file and a css file.
47 | 3. [ ] Add your component to [the main examples file](/examples/angular/src/app/examples/examples.component.html) under the appropriate section.
48 | 4. [ ] Reference your example in SideBarComponent, again following the convention of other examples (this step will be removed in the future).
49 | 5. [ ] Make sure your example respects the styling conventions using [Bulma](https://bulma.io/)
50 | 6. [ ] Make sure you formatted your code with `npm run format`.
51 | 7. [ ] Make sure you have updated the code examples file with `npm run-script example-gen` within the Angular example directory.
52 | 
53 | Refer to any other Angular example in `examples/angular/examples` if you are unusure about any of the steps above.
54 | 
55 | Once you're done, make a pull request to the master branch of the main RDKit.js repository, and wait for the review!
56 | 


--------------------------------------------------------------------------------
/examples/angular/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "cli": {
  5 |     "packageManager": "yarn",
  6 |     "schematicCollections": ["@angular-eslint/schematics"],
  7 |     "analytics": false
  8 |   },
  9 |   "newProjectRoot": "projects",
 10 |   "projects": {
 11 |     "@rdkit/angular-example": {
 12 |       "projectType": "application",
 13 |       "schematics": {
 14 |         "@schematics/angular:component": {
 15 |           "skipTests": true
 16 |         },
 17 |         "@schematics/angular:class": {
 18 |           "skipTests": true
 19 |         },
 20 |         "@schematics/angular:directive": {
 21 |           "skipTests": true
 22 |         },
 23 |         "@schematics/angular:guard": {
 24 |           "skipTests": true
 25 |         },
 26 |         "@schematics/angular:interceptor": {
 27 |           "skipTests": true
 28 |         },
 29 |         "@schematics/angular:module": {},
 30 |         "@schematics/angular:pipe": {
 31 |           "skipTests": true
 32 |         },
 33 |         "@schematics/angular:service": {
 34 |           "skipTests": true
 35 |         },
 36 |         "@schematics/angular:application": {
 37 |           "strict": true
 38 |         }
 39 |       },
 40 |       "root": "",
 41 |       "sourceRoot": "src",
 42 |       "prefix": "app",
 43 |       "architect": {
 44 |         "build": {
 45 |           "builder": "@angular-devkit/build-angular:browser",
 46 |           "options": {
 47 |             "outputPath": "dist/angular",
 48 |             "index": "src/index.html",
 49 |             "main": "src/main.ts",
 50 |             "polyfills": "src/polyfills.ts",
 51 |             "tsConfig": "tsconfig.app.json",
 52 |             "assets": [
 53 |               "src/favicon.ico",
 54 |               "src/assets",
 55 |               {
 56 |                 "glob": "RDKit_minimal.wasm",
 57 |                 "input": "node_modules/@rdkit/rdkit/dist/",
 58 |                 "output": "/"
 59 |               }
 60 |             ],
 61 |             "styles": ["src/styles.css"],
 62 |             "scripts": ["node_modules/@rdkit/rdkit/dist/RDKit_minimal.js"],
 63 |             "vendorChunk": true,
 64 |             "extractLicenses": false,
 65 |             "buildOptimizer": false,
 66 |             "sourceMap": true,
 67 |             "optimization": false,
 68 |             "namedChunks": true
 69 |           },
 70 |           "configurations": {
 71 |             "production": {
 72 |               "fileReplacements": [
 73 |                 {
 74 |                   "replace": "src/environments/environment.ts",
 75 |                   "with": "src/environments/environment.prod.ts"
 76 |                 }
 77 |               ],
 78 |               "optimization": true,
 79 |               "outputHashing": "all",
 80 |               "sourceMap": false,
 81 |               "namedChunks": false,
 82 |               "extractLicenses": true,
 83 |               "vendorChunk": false,
 84 |               "buildOptimizer": true,
 85 |               "budgets": [
 86 |                 {
 87 |                   "type": "initial",
 88 |                   "maximumWarning": "500kb",
 89 |                   "maximumError": "1mb"
 90 |                 },
 91 |                 {
 92 |                   "type": "anyComponentStyle",
 93 |                   "maximumWarning": "2kb",
 94 |                   "maximumError": "4kb"
 95 |                 }
 96 |               ]
 97 |             }
 98 |           },
 99 |           "defaultConfiguration": ""
100 |         },
101 |         "serve": {
102 |           "builder": "@angular-devkit/build-angular:dev-server",
103 |           "options": {
104 |             "browserTarget": "@rdkit/angular-example:build"
105 |           },
106 |           "configurations": {
107 |             "production": {
108 |               "browserTarget": "@rdkit/angular-example:build:production"
109 |             }
110 |           }
111 |         },
112 |         "extract-i18n": {
113 |           "builder": "@angular-devkit/build-angular:extract-i18n",
114 |           "options": {
115 |             "browserTarget": "@rdkit/angular-example:build"
116 |           }
117 |         },
118 |         "lint": {
119 |           "builder": "@angular-eslint/builder:lint",
120 |           "options": {
121 |             "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
122 |           }
123 |         }
124 |       }
125 |     }
126 |   }
127 | }
128 | 


--------------------------------------------------------------------------------
/examples/angular/angular.md:
--------------------------------------------------------------------------------
 1 | # Including RDKit JS in your Angular project
 2 | 
 3 | ## Via CDN
 4 | 
 5 | If you are including it via the CDN, add the script tag to your `index.html` file
 6 | 
 7 | ```html
 8 | <script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>
 9 | ```
10 | 
11 | ## Via NPM Distribution
12 | 
13 | To use the NPM distributed package, instead of copying the assets, add the following to your `angular.json` config:
14 | 
15 | - Under `scripts` for the project, add the `RDKit_minimal.js` file path:
16 | 
17 | ```json
18 | "scripts": [
19 |     ...,
20 |     "node_modules/@rdkit/rdkit/dist/RDKit_minimal.js"
21 | ]
22 | ```
23 | 
24 | - Under `assets` for the project, add the following to include the WASM file at the correct location:
25 | 
26 | ```json
27 | "assets": [
28 |     ...,
29 |     {
30 |         "glob": "RDKit_minimal.wasm",
31 |         "input": "node_modules/@rdkit/rdkit/dist/",
32 |         "output": "/"
33 |     }
34 | ],
35 | ```
36 | 
37 | # Loading RDKit JS
38 | 
39 | The normal loading method can be used, however, we can make better use of Angular's structure by using a Service and RXJS:
40 | 
41 | ```ts
42 | @Injectable({
43 |   providedIn: "root"
44 | })
45 | export class RDKitLoaderService implements OnDestroy {
46 |   private rdkitSubject$!: ReplaySubject<RDKitModule>;
47 | 
48 |   constructor() {}
49 | 
50 |   ngOnDestroy(): void {
51 |     this.rdkitSubject$.complete();
52 |   }
53 | 
54 |   getRDKit(): Observable<RDKitModule> {
55 |     if (!this.rdkitSubject$) {
56 |       this.rdkitSubject$ = new ReplaySubject(1);
57 | 
58 |       window.initRDKitModule().then(
59 |         (instance: RDKitModule) => {
60 |           this.rdkitSubject$.next(instance);
61 |         },
62 |         (error) => {
63 |           this.rdkitSubject$.error(error);
64 |         }
65 |       );
66 |     }
67 |     return this.rdkitSubject$.asObservable().pipe(first());
68 |   }
69 | }
70 | ```
71 | 
72 | Instead of assigning the RDKit instance to the window and using it from there, we can use a ReplaySubject to stash the instance, and return an Observable of the ReplaySubject. It can be used as the following:
73 | 
74 | ```ts
75 | constructor(private rdkitService: RDKitLoaderService){
76 |     this.rdkitService.getRDKit().subscribe(
77 |         (rdkit: RDKitModule) => {
78 |             // use from here
79 |         }
80 |     )
81 | }
82 | ```
83 | 


--------------------------------------------------------------------------------
/examples/angular/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@rdkit/angular-examples",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "example-gen": "cd ./src/ && node code-example-generator.js",
 9 |     "lint": "ng lint"
10 |   },
11 |   "private": true,
12 |   "dependencies": {
13 |     "@angular/animations": "^14.2.6",
14 |     "@angular/common": "^14.2.6",
15 |     "@angular/compiler": "^14.2.6",
16 |     "@angular/core": "^14.2.6",
17 |     "@angular/forms": "^14.2.6",
18 |     "@angular/platform-browser": "^14.2.6",
19 |     "@angular/platform-browser-dynamic": "^14.2.6",
20 |     "@angular/router": "^14.2.6",
21 |     "@rdkit/rdkit": "^2022.9.1-1.0.0",
22 |     "rxjs": "~6.6.0",
23 |     "tslib": "^2.6.2",
24 |     "zone.js": "~0.11.4"
25 |   },
26 |   "devDependencies": {
27 |     "@angular-devkit/build-angular": "^14.2.6",
28 |     "@angular-eslint/builder": "14.1.2",
29 |     "@angular-eslint/eslint-plugin": "14.1.2",
30 |     "@angular-eslint/eslint-plugin-template": "14.1.2",
31 |     "@angular-eslint/schematics": "14.1.2",
32 |     "@angular-eslint/template-parser": "14.1.2",
33 |     "@angular/cli": "^14.2.6",
34 |     "@angular/compiler-cli": "^14.2.6",
35 |     "@types/node": "^20.5.7",
36 |     "@typescript-eslint/eslint-plugin": "5.37.0",
37 |     "@typescript-eslint/parser": "5.37.0",
38 |     "eslint": "^8.46.0",
39 |     "typescript": "~4.6.4",
40 |     "bulma": "^0.9.4"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.css:
--------------------------------------------------------------------------------
 1 | .back-to-top {
 2 |   position: fixed;
 3 |   bottom: 80px;
 4 |   right: 40px;
 5 |   z-index: 9999;
 6 |   width: 30px;
 7 |   height: 30px;
 8 |   text-align: center;
 9 |   line-height: 30px;
10 |   background: #f5f5f5;
11 |   color: #444;
12 |   cursor: pointer;
13 |   border-radius: 2px;
14 |   display: block;
15 | }
16 | 
17 | .back-to-top:hover {
18 |   background: #e9ebec;
19 | }
20 | 
21 | aside.menu {
22 |   position: sticky;
23 |   display: inline-block;
24 |   max-height: 100vh;
25 |   top: 0;
26 |   box-shadow: 3px 0 0 0 #f5f5f5;
27 | }
28 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div id="app">
 2 |   <div id="navbar">
 3 |     <app-navbar></app-navbar>
 4 |   </div>
 5 |   <div class="main-content columns is-fullheight">
 6 |     <aside
 7 |       class="menu has-background-white-bis is-narrow-mobile is-fullheight section column is-one-fifth is-hidden-mobile"
 8 |     >
 9 |       <app-sidebar></app-sidebar>
10 |     </aside>
11 |     <main class="container column is-four-fifths">
12 |       <app-examples></app-examples>
13 |     </main>
14 |   </div>
15 |   <footer class="footer">
16 |     <div class="content has-text-centered">
17 |       <p>
18 |         <strong>RDKit.js</strong> by
19 |         <a href="https://github.com/rdkit/rdkit"
20 |           >Greg Landrum and the RDKit contributors</a
21 |         >. The source code is licensed
22 |         <a href="https://github.com/rdkit/rdkit/blob/master/license.txt"
23 |           >BDS-3</a
24 |         >.
25 |       </p>
26 |     </div>
27 |   </footer>
28 | 
29 |   <a class="back-to-top" href="#navbar">&uarr;</a>
30 | </div>
31 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-root",
 5 |   templateUrl: "./app.component.html",
 6 |   styleUrls: ["./app.component.css"]
 7 | })
 8 | export class AppComponent {
 9 |   title = "angular";
10 |   // constructor(private activeRoute: )
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from "@angular/core";
 2 | import { BrowserModule } from "@angular/platform-browser";
 3 | 
 4 | import { AppComponent } from "./app.component";
 5 | import { SidebarComponent } from "./sidebar/sidebar.component";
 6 | import { NavbarComponent } from "./navbar/navbar.component";
 7 | import { ExamplesModule } from "./examples/examples.module";
 8 | import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 9 | 
10 | @NgModule({
11 |   declarations: [AppComponent, SidebarComponent, NavbarComponent],
12 |   imports: [BrowserModule, ExamplesModule, FormsModule, ReactiveFormsModule],
13 |   providers: [],
14 |   bootstrap: [AppComponent]
15 | })
16 | export class AppModule {}
17 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/code-example/code-example.component.css:
--------------------------------------------------------------------------------
 1 | .code-example-wrapper .code-example-body {
 2 |   display: flex;
 3 |   overflow: hidden;
 4 |   width: 100%;
 5 |   flex-direction: column;
 6 | }
 7 | 
 8 | .code-example-body pre {
 9 |   margin: 0;
10 |   width: 100%;
11 | }
12 | 
13 | .code-example-wrapper.active .code-example-header {
14 |   border-bottom-left-radius: 0 !important;
15 |   border-bottom-right-radius: 0 !important;
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/code-example/code-example.component.html:
--------------------------------------------------------------------------------
 1 | <div class="code-example-wrapper container" [ngClass]="{ active: isOpen }">
 2 |   <button
 3 |     class="code-example-header button is-primary is-light is-large is-fullwidth"
 4 |     (click)="isOpen = !isOpen"
 5 |   >
 6 |     See Code Example
 7 |   </button>
 8 |   <div
 9 |     class="code-example-body container"
10 |     [ngClass]="{ active: isOpen }"
11 |     [@expandBody]="isOpen ? 'show' : 'hidden'"
12 |   >
13 |     <div class="tabs">
14 |       <ul>
15 |         <li
16 |           *ngFor="let heading of files"
17 |           [ngClass]="{ 'is-active': currentTab === heading }"
18 |         >
19 |           <a (click)="currentTab = heading">{{ heading }}</a>
20 |         </li>
21 |       </ul>
22 |     </div>
23 |     <div class="code-tab-body">
24 |       <pre><code>{{codeBodies[currentTab || '']}}</code></pre>
25 |     </div>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/code-example/code-example.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   trigger,
 3 |   state,
 4 |   style,
 5 |   transition,
 6 |   animate
 7 | } from "@angular/animations";
 8 | import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
 9 | import { examplesCode } from "../code-examples";
10 | 
11 | @Component({
12 |   selector: "app-code-example",
13 |   templateUrl: "./code-example.component.html",
14 |   styleUrls: ["./code-example.component.css"],
15 |   animations: [
16 |     trigger("expandBody", [
17 |       state("hidden, void", style({ height: "0px", visibility: "hidden" })),
18 |       state("show", style({ height: "*", visibility: "visible" })),
19 |       transition("show <=> hidden, void => hidden", animate(".2s ease-in"))
20 |     ])
21 |   ]
22 | })
23 | export class CodeExampleComponent implements OnChanges {
24 |   isOpen = false;
25 | 
26 |   @Input() files: string[] = [];
27 |   codeBodies: { [key: string]: string } = examplesCode;
28 |   currentTab: string | null = null;
29 | 
30 |   constructor() {}
31 | 
32 |   ngOnChanges(changes: SimpleChanges): void {
33 |     this.currentTab = this.files[0];
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples.component.html:
--------------------------------------------------------------------------------
 1 | <app-introduction></app-introduction>
 2 | 
 3 | <!-- Components examples -->
 4 | <app-mol-list></app-mol-list>
 5 | <app-example-loader></app-example-loader>
 6 | 
 7 | <!-- Main Examples -->
 8 | <app-mol-struct></app-mol-struct>
 9 | <app-svg-rendering></app-svg-rendering>
10 | <app-canvas-rendering></app-canvas-rendering>
11 | <app-substructure-highlight></app-substructure-highlight>
12 | <app-multi-substructure-highlight></app-multi-substructure-highlight>
13 | <app-substructure-search></app-substructure-search>
14 | <app-drawing-options></app-drawing-options>
15 | 
16 | <section class="hero">
17 |   <div class="hero-body">
18 |     <h1 class="title" id="other-examples">Where to go next</h1>
19 |     <p
20 |       id="other-examples-vanilla-js"
21 |       class="subtitle column is-two-thirds pl-0"
22 |     >
23 |       You can visit the JavaScript examples
24 |       <a href="https://rdkitjs.com" aria-label="RDKitJS JavaScript Examples"
25 |         >here</a
26 |       >, which presents the low-level API of RDKit.js.
27 |     </p>
28 |     <p class="subtitle column is-two-thirds pl-0" id="other-examples-react">
29 |       You can visit the React examples
30 |       <a href="https://react.rdkitjs.com" aria-label="RDKitJS React Examples"
31 |         >here</a
32 |       >, which include more advanced and interactive examples.
33 |     </p>
34 |     <p class="subtitle column is-two-thirds pl-0" id="other-examples-vue">
35 |       You can visit the Vue examples
36 |       <a href="https://vue.rdkitjs.com" aria-label="RDKitJS Vue Examples"
37 |         >here</a
38 |       >, which include more advanced and interactive examples.
39 |     </p>
40 |     <p id="other-examples-legacy" class="subtitle column is-two-thirds pl-0">
41 |       You can also checkout the legacy
42 |       <a
43 |         href="https://unpkg.com/@rdkit/rdkit/dist/GettingStartedInJS.html"
44 |         aria-label="RDKitJS Legacy Examples"
45 |         >getting started</a
46 |       >
47 |       and
48 |       <a
49 |         href="https://unpkg.com/@rdkit/rdkit/dist/demo.html"
50 |         aria-label="RDKitJS Legacy Demo"
51 |         >demo</a
52 |       >.
53 |     </p>
54 |   </div>
55 | </section>
56 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | 
3 | @Component({
4 |   selector: "app-examples",
5 |   templateUrl: "./examples.component.html",
6 |   styleUrls: ["./examples.component.css"]
7 | })
8 | export class ExamplesComponent {}
9 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from "@angular/core";
 2 | import { CommonModule } from "@angular/common";
 3 | import { ExamplesComponent } from "./examples.component";
 4 | import { IntroductionComponent } from "./introduction/introduction.component";
 5 | import { ExampleLoaderComponent } from "./examples/example-loader/example-loader.component";
 6 | import { RDKitLoaderService } from "./rdkit-loader/rdkit-loader.service";
 7 | import { CodeExampleComponent } from "./code-example/code-example.component";
 8 | import { MoleculeStructureComponent } from "./molecule-structure/molecule-structure.component";
 9 | import { CanvasRendererComponent } from "./molecule-structure/canvas-renderer/canvas-renderer.component";
10 | import { SvgRendererComponent } from "./molecule-structure/svg-renderer/svg-renderer.component";
11 | import { MolListComponent } from "./examples/mol-list/mol-list.component";
12 | import { BrowserModule } from "@angular/platform-browser";
13 | import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
14 | import { SvgRenderingComponent } from "./examples/svg-rendering/svg-rendering.component";
15 | import { CanvasRenderingComponent } from "./examples/canvas-rendering/canvas-rendering.component";
16 | import { SubstructureHighlightComponent } from "./examples/substructure-highlight/substructure-highlight.component";
17 | import { MultiSubstructureHighlightComponent } from "./examples/multi-substructure-highlight/multi-substructure-highlight.component";
18 | import { SubstructureSearchComponent } from "./examples/substructure-search/substructure-search.component";
19 | import { DrawingOptionsComponent } from "./examples/drawing-options/drawing-options.component";
20 | import { MolStructComponent } from "./examples/mol-struct/mol-struct.component";
21 | import { FormsModule, ReactiveFormsModule } from "@angular/forms";
22 | import { IsMolDirective } from "./validators/is-mol.directive";
23 | import { IsSubstructDirective } from "./validators/is-substruct.directive";
24 | 
25 | @NgModule({
26 |   declarations: [
27 |     ExamplesComponent,
28 |     IntroductionComponent,
29 |     ExampleLoaderComponent,
30 |     CodeExampleComponent,
31 |     MoleculeStructureComponent,
32 |     CanvasRendererComponent,
33 |     SvgRendererComponent,
34 |     MolListComponent,
35 |     SvgRenderingComponent,
36 |     CanvasRenderingComponent,
37 |     SubstructureHighlightComponent,
38 |     MultiSubstructureHighlightComponent,
39 |     SubstructureSearchComponent,
40 |     DrawingOptionsComponent,
41 |     MolStructComponent,
42 |     IsMolDirective,
43 |     IsSubstructDirective
44 |   ],
45 |   imports: [
46 |     BrowserModule,
47 |     CommonModule,
48 |     BrowserAnimationsModule,
49 |     FormsModule,
50 |     ReactiveFormsModule
51 |   ],
52 |   exports: [ExamplesComponent],
53 |   providers: [RDKitLoaderService]
54 | })
55 | export class ExamplesModule {}
56 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/canvas-rendering/canvas-rendering.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/canvas-rendering/canvas-rendering.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/canvas-rendering/canvas-rendering.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-canvas" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">Canvas Rendering</h1>
 5 |       <p class="subtitle">
 6 |         You can also render molecules using the HTML Canvas API.
 7 |       </p>
 8 |     </div>
 9 |   </section>
10 |   <div class="columns is-desktop">
11 |     <div class="column">
12 |       <app-molecule-structure
13 |         [width]="350"
14 |         [height]="300"
15 |         [structure]="caffeine"
16 |       ></app-molecule-structure>
17 |     </div>
18 |     <div class="column">
19 |       <app-molecule-structure
20 |         [width]="350"
21 |         [height]="300"
22 |         [structure]="aspirin"
23 |       ></app-molecule-structure>
24 |     </div>
25 |   </div>
26 |   <app-code-example
27 |     [files]="[
28 |       'canvas-rendering.component.html',
29 |       'canvas-rendering.component.ts'
30 |     ]"
31 |   ></app-code-example>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/canvas-rendering/canvas-rendering.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-canvas-rendering",
 5 |   templateUrl: "./canvas-rendering.component.html",
 6 |   styleUrls: ["./canvas-rendering.component.css"]
 7 | })
 8 | export class CanvasRenderingComponent {
 9 |   caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
10 |   aspirin = "CC(=O)Oc1ccccc1C(=O)O";
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/common/smiles.ts:
--------------------------------------------------------------------------------
 1 | // @ignore-example-code-gen
 2 | /**
 3 |  * Taken from https://github.com/reymond-group/smilesDrawer/blob/master/example/drugbank.js
 4 |  */
 5 | 
 6 | export const SMILES_LIST: string[] = [
 7 |   "CC[C@H](C)[C@H](NC(=O)[C@H](CCC(O)=O)NC(=O)[C@H](CCC(O)=O)NC(=O)[C@H](CC1=CC=CC=C1)NC(=O)[C@H](CC(O)=O)NC(=O)CNC(=O)[C@H](CC(N)=O)NC(=O)CNC(=O)CNC(=O)CNC(=O)CNC(=O)[C@@H]1CCCN1C(=O)[C@H](CCCNC(N)=N)NC(=O)[C@@H]1CCCN1C(=O)[C@H](N)CC1=CC=CC=C1)C(=O)N1CCC[C@H]1C(=O)N[C@@H](CCC(O)=O)C(=O)N[C@@H](CCC(O)=O)C(=O)N[C@@H](CC1=CC=C(O)C=C1)C(=O)N[C@@H](CC(C)C)C(O)=O",
 8 |   "CC(C)C[C@H](NC(=O)[C@@H](COC(C)(C)C)NC(=O)[C@H](CC1=CC=C(O)C=C1)NC(=O)[C@H](CO)NC(=O)[C@H](CC1=CNC2=CC=CC=C12)NC(=O)[C@H](CC1=CN=CN1)NC(=O)[C@@H]1CCC(=O)N1)C(=O)N[C@@H](CCCN=C(N)N)C(=O)N1CCC[C@H]1C(=O)NNC(N)=O",
 9 |   "NC(=O)CC[C@@H]1NC(=O)[C@H](CC2=CC=CC=C2)NC(=O)[C@H](CC2=CC=C(O)C=C2)NC(=O)CCSSC[C@H](NC(=O)[C@H](CC(N)=O)NC1=O)C(=O)N1CCC[C@H]1C(=O)N[C@@H](CCCNC(N)=N)C(=O)NCC(N)=O",
10 |   "CC(C)C[C@H](NC(=O)[C@@H](CCCNC(N)=O)NC(=O)[C@H](CC1=CC=C(O)C=C1)NC(=O)[C@H](CO)NC(=O)[C@@H](CC1=CN=CC=C1)NC(=O)[C@@H](CC1=CC=C(Cl)C=C1)NC(=O)[C@@H](CC1=CC2=CC=CC=C2C=C1)NC(C)=O)C(=O)N[C@@H](CCCNC(N)=N)C(=O)N1CCC[C@H]1C(=O)N[C@H](C)C(N)=O",
11 |   "CC[C@@H]1NC(=O)[C@H]([C@H](O)[C@H](C)CC=CC)N(C)C(=O)[C@H](C(C)C)N(C)C(=O)[C@H](CC(C)C)N(C)C(=O)[C@H](CC(C)C)N(C)C(=O)[C@@H](C)NC(=O)[C@H](C)NC(=O)[C@H](CC(C)C)N(C)C(=O)[C@@H](NC(=O)[C@H](CC(C)C)N(C)C(=O)CN(C)C1=O)C(C)C",
12 |   "NCCCC[C@H](NC(=O)[C@@H]1CCCN1C(=O)[C@@H]1CSSC[C@H](N)C(=O)N[C@@H](CC2=CC=CC=C2)C(=O)N[C@@H](CC2=CC=CC=C2)C(=O)N[C@@H](CCC(N)=O)C(=O)N[C@@H](CC(N)=O)C(=O)N1)C(=O)NCC(N)=O",
13 |   "[H][C@]1(NC(=O)[C@H](CCCCN)NC(=O)[C@@H](CC2=CNC3=C2C=CC=C3)NC(=O)[C@H](CC2=CC=CC=C2)NC(=O)[C@H](CSSC[C@H](NC1=O)C(=O)N[C@H](CO)[C@@H](C)O)NC(=O)[C@H](N)CC1=CC=CC=C1)[C@@H](C)O",
14 |   "OC[C@H]1O[C@@H]([C@H](O)[C@@H]1OP(O)(=O)O[C@]([H])(C)CNC(=O)CC[C@]1(C)[C@@H](CC(=O)N)[C@@]2([H])N([Co]C#N)C1=C(C)/C1=N/C(=CC3=NC(=C(C)/C4=N[C@]2(C)[C@@](C)(CC(=O)N)[C@@H]4CCC(=O)N)[C@@](C)(CC(=O)N)[C@@H]3CCC(=O)N)/C(C)(C)[C@@H]1CCC(=O)N)N1C=NC2=CC(C)=C(C)C=C12",
15 |   "C[C@H](CCCC(C)(C)O)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)C[C@H](O)C1=C",
16 |   "CC(C=CC=C(/C)C=CC1C(C)=CC(O)CC1(C)C)=C/C=C/C=C(C)/C=C/C=C(C)/C=C/C1=C(C)CC(O)CC1(C)C",
17 |   "C[C@H](CCCC(C)(C)O)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
18 |   "CC(C)[C@@H](C)C=C[C@@H](C)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
19 |   "NC(=O)C1=CN(C=CC1)[C@@H]1O[C@H](CO[P@](O)(=O)O[P@](O)(=O)OC[C@H]2O[C@H]([C@H](O)[C@@H]2O)N2C=NC3=C(N)N=CN=C23)[C@@H](O)[C@H]1O",
20 |   "CC(C)CCC[C@@H](C)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
21 |   "NC1=NC=NC2=C1N=CN2[C@@H]1O[C@H](COP(O)(=O)OP(O)(=O)OP(O)(O)=O)[C@@H](O)[C@H]1O",
22 |   "[H][C@]12[C@H](C[C@H](O)C=C1C=C[C@H](C)[C@@H]2CC[C@@H](O)C[C@@H](O)CC(O)=O)OC(=O)[C@@H](C)CC",
23 |   "[H][C@@]12CCC[C@]1([H])N([C@@H](C2)C(O)=O)C(=O)[C@H](C)N[C@@H](CCC1=CC=CC=C1)C(=O)OCC",
24 |   "[H][C@@]12C[C@@]3([H])[C@]4([H])C[C@H](F)C5=CC(=O)C=C[C@]5(C)[C@@]4([H])[C@@H](O)C[C@]3(C)[C@@]1(OC(C)(C)O2)C(=O)CO",
25 |   "CSCC[C@H](NC(=O)[C@H](CC1=CNC2=C1C=CC=C2)NC(=O)CCNC(=O)OC(C)(C)C)C(=O)N[C@@H](CC(O)=O)C(=O)N[C@@H](CC1=CC=CC=C1)C(N)=O",
26 |   "CC[C@H]1OC(=O)[C@H](C)[C@@H](O[C@H]2C[C@@](C)(OC)[C@@H](O)[C@H](C)O2)[C@H](C)[C@@H](O[C@@H]2O[C@H](C)C[C@@H]([C@H]2O)N(C)C)[C@](C)(O)C[C@@H](C)C(=O)[C@H](C)[C@@H](O)[C@]1(C)O",
27 |   "[H]O[Co+]N1C2=C(C)/C3=N/C(=CC4=NC(=C(C)/C5=N[C@@](C)([C@@]1([H])[C@H](CC(=O)N)[C@@]2(C)CCC(=O)NC[C@@H](C)OP(=O)([O-])O[C@H]1[C@@H](O)[C@H](O[C@@H]1CO)N1C=NC2=CC(C)=C(C)C=C12)[C@@](C)(CC(N)=O)[C@@H]5CCC(=O)N)[C@@](C)(CC(=O)N)[C@@H]4CCC(=O)N)/C(C)(C)[C@@H]3CCC(=O)N"
28 | ];
29 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/drawing-options/drawing-options.component.css:
--------------------------------------------------------------------------------
1 | .col-margin .columns {
2 |   margin: 12px 0;
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/drawing-options/drawing-options.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from "@angular/core";
 2 | import { FormControl, FormGroup, Validators } from "@angular/forms";
 3 | import { debounceTime } from "rxjs/operators";
 4 | import {
 5 |   DrawColour,
 6 |   MolDrawOptions
 7 | } from "../../molecule-structure/mol-draw-options";
 8 | 
 9 | @Component({
10 |   selector: "app-drawing-options",
11 |   templateUrl: "./drawing-options.component.html",
12 |   styleUrls: ["./drawing-options.component.css"]
13 | })
14 | export class DrawingOptionsComponent {
15 |   drawOptionsForm: FormGroup;
16 | 
17 |   molOptions: MolDrawOptions = {};
18 | 
19 |   constructor() {
20 |     this.drawOptionsForm = new FormGroup({
21 |       mainStructureInput: new FormControl(
22 |         "CSCC[C@H](NC(=O)[C@H](CC1=CNC2=C1C=CC=C2)NC(=O)CCNC(=O)OC(C)(C)C)C(=O)N[C@@H](CC(O)=O)C(=O)N[C@@H](CC1=CC=CC=C1)C(N)=O",
23 |         [Validators.required]
24 |       ),
25 |       substructureInput: new FormControl("[n,O]"),
26 |       legend: new FormControl("Legend Text"),
27 |       legendFontSize: new FormControl(16),
28 |       width: new FormControl(500),
29 |       height: new FormControl(450),
30 |       bondLineWidth: new FormControl(1),
31 |       scaleBondWidth: new FormControl(false),
32 |       addStereoAnnotation: new FormControl(true),
33 |       addAtomIndices: new FormControl(true),
34 |       addBondIndices: new FormControl(false),
35 |       explicitMethyl: new FormControl(true),
36 |       centerMoleculesBeforeDrawing: new FormControl(false),
37 |       highlightColour: new FormControl("#fd5c63", [
38 |         Validators.pattern("#[a-fA-F0-9]{6}")
39 |       ]),
40 |       legendColour: new FormControl("#000000", [
41 |         Validators.pattern("#[a-fA-F0-9]{6}")
42 |       ]),
43 |       symbolColour: new FormControl("#000000", [
44 |         Validators.pattern("#[a-fA-F0-9]{6}")
45 |       ]),
46 |       backgroundColour: new FormControl("#ffffff", [
47 |         Validators.pattern("#[a-fA-F0-9]{6}")
48 |       ]),
49 |       rotate: new FormControl(0.0),
50 |       annotationFontScale: new FormControl(0.5),
51 |       comicMode: new FormControl(false),
52 |       svgMode: new FormControl(true)
53 |     });
54 | 
55 |     this.parseFormValue(this.drawOptionsForm.value);
56 | 
57 |     this.drawOptionsForm.valueChanges
58 |       .pipe(debounceTime(500))
59 |       .subscribe((val) => {
60 |         this.parseFormValue(val);
61 |       });
62 |   }
63 | 
64 |   parseFormValue(formValue: any) {
65 |     const temp = { ...formValue };
66 | 
67 |     const l = temp.highlightColour.match(
68 |       "#([a-fA-f0-9]{2})([a-fA-f0-9]{2})([a-fA-f0-9]{2})"
69 |     );
70 | 
71 |     temp.highlightColour = this.parseRGBToDrawColour(temp.highlightColour);
72 |     temp.legendColour = this.parseRGBToDrawColour(temp.legendColour);
73 |     temp.symbolColour = this.parseRGBToDrawColour(temp.symbolColour);
74 |     temp.backgroundColour = this.parseRGBToDrawColour(temp.backgroundColour);
75 | 
76 |     this.molOptions = temp as MolDrawOptions;
77 |   }
78 | 
79 |   parseRGBToDrawColour(rgb: string): DrawColour {
80 |     return rgb
81 |       .match("#([a-fA-f0-9]{2})([a-fA-f0-9]{2})([a-fA-f0-9]{2})") // Regex to match the #RGB pattern
82 |       ?.map((c: string) => Number.parseInt(c, 16) / 255.0) // Convert Hex to number and normalize
83 |       ?.slice(1) as DrawColour; // Regex includes the entire match as the first in the list, so ignore the first
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/example-loader/example-loader.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/example-loader/example-loader.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/example-loader/example-loader.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-loader" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">RDKit JS Loading Service</h1>
 5 |       <p class="subtitle">
 6 |         Alternatively to loading and binding to window, Angular users can make
 7 |         use of a service to load it, and provide from a single point.
 8 |       </p>
 9 |     </div>
10 |   </section>
11 |   <div>
12 |     <p style="padding-bottom: 0.5rem">
13 |       <b>RDKit Version:</b> {{ rdkit?.version() || "-" }}
14 |     </p>
15 |     <button class="button" (click)="clickToLoad()">
16 |       {{ loading ? "Loading..." : "Click to get RDKit" }}
17 |     </button>
18 |     <br /><br />
19 |     <app-code-example
20 |       [files]="[
21 |         'rdkit-loader.service.ts',
22 |         'example-loader.component.ts',
23 |         'example-loader.component.html'
24 |       ]"
25 |     ></app-code-example>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/example-loader/example-loader.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from "@angular/core";
 2 | import { RDKitModule } from "../../../../../../../typescript";
 3 | import { RDKitLoaderService } from "../../rdkit-loader/rdkit-loader.service";
 4 | 
 5 | @Component({
 6 |   selector: "app-example-loader",
 7 |   templateUrl: "./example-loader.component.html",
 8 |   styleUrls: ["./example-loader.component.css"]
 9 | })
10 | export class ExampleLoaderComponent {
11 |   loading = false;
12 |   rdkit?: RDKitModule;
13 | 
14 |   constructor(private rdkitService: RDKitLoaderService) {}
15 | 
16 |   clickToLoad() {
17 |     this.loading = true;
18 |     this.rdkitService.getRDKit().subscribe((rdkit) => {
19 |       this.rdkit = rdkit;
20 |       this.loading = false;
21 |     });
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/mol-list/mol-list.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/mol-list/mol-list.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/mol-list/mol-list.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-list" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">Overview</h1>
 5 |       <p class="subtitle">
 6 |         You can draw any molecule from SMILES dynamically with RDKit.js .
 7 |       </p>
 8 |     </div>
 9 |   </section>
10 |   <div
11 |     id="structure-list"
12 |     class="columns is-desktop"
13 |     style="margin: 12px; overflow-x: scroll"
14 |   >
15 |     <div *ngFor="let smiles of exampleSmiles" class="column">
16 |       <app-molecule-structure
17 |         [structure]="smiles"
18 |         [width]="200"
19 |         [height]="200"
20 |         [svgMode]="true"
21 |       ></app-molecule-structure>
22 |     </div>
23 |   </div>
24 |   <br />
25 |   <app-code-example
26 |     [files]="['mol-list.component.ts', 'mol-list.component.html']"
27 |   ></app-code-example>
28 | </div>
29 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/mol-list/mol-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from "@angular/core";
 2 | import { SMILES_LIST } from "../common/smiles";
 3 | 
 4 | @Component({
 5 |   selector: "app-mol-list",
 6 |   templateUrl: "./mol-list.component.html",
 7 |   styleUrls: ["./mol-list.component.css"]
 8 | })
 9 | export class MolListComponent {
10 |   exampleSmiles = SMILES_LIST;
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/mol-struct/mol-struct.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/mol-struct/mol-struct.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/mol-struct/mol-struct.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-moleculestructure" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">MoleculeStructureComponent</h1>
 5 |       <p class="subtitle">
 6 |         The examples below will mostly use the Angular component
 7 |         MoleculeStructureComponent to render the examples. You can see the
 8 |         Angular implementation in the code below.
 9 |       </p>
10 |     </div>
11 |   </section>
12 |   <app-code-example
13 |     [files]="[
14 |       'molecule-structure.component.ts',
15 |       'molecule-structure.component.html',
16 |       'svg-renderer.component.ts',
17 |       'svg-renderer.component.html',
18 |       'canvas-renderer.component.ts',
19 |       'canvas-renderer.component.html'
20 |     ]"
21 |   ></app-code-example>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/mol-struct/mol-struct.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 | 
3 | @Component({
4 |   selector: "app-mol-struct",
5 |   templateUrl: "./mol-struct.component.html",
6 |   styleUrls: ["./mol-struct.component.css"]
7 | })
8 | export class MolStructComponent {}
9 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/multi-substructure-highlight/multi-substructure-highlight.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/multi-substructure-highlight/multi-substructure-highlight.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/multi-substructure-highlight/multi-substructure-highlight.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-multi-substruct" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">Multi-substructure Highlight</h1>
 5 |       <p class="subtitle">
 6 |         You can also highlight multiple substructures of molecules with SMILES,
 7 |         SMARTS and a combination of the two with dot notation.
 8 |       </p>
 9 |     </div>
10 |   </section>
11 |   <div class="columns is-desktop">
12 |     <div class="column">
13 |       <app-molecule-structure
14 |         [width]="350"
15 |         [height]="300"
16 |         [structure]="caffeine"
17 |         [substructure]="caffeineSubstruct"
18 |       ></app-molecule-structure>
19 |     </div>
20 |     <div class="column">
21 |       <app-molecule-structure
22 |         [width]="350"
23 |         [height]="300"
24 |         [structure]="aspirin"
25 |         [substructure]="aspirinSubstruct"
26 |       ></app-molecule-structure>
27 |     </div>
28 |   </div>
29 |   <app-code-example
30 |     [files]="[
31 |       'substructure-highlight.component.html',
32 |       'substructure-highlight.component.ts'
33 |     ]"
34 |   ></app-code-example>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/multi-substructure-highlight/multi-substructure-highlight.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-multi-substructure-highlight",
 5 |   templateUrl: "./multi-substructure-highlight.component.html",
 6 |   styleUrls: ["./multi-substructure-highlight.component.css"]
 7 | })
 8 | export class MultiSubstructureHighlightComponent {
 9 |   caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
10 |   caffeineSubstruct = "[N,n,o,O]";
11 | 
12 |   aspirin = "CC(=O)Oc1ccccc1C(=O)O";
13 |   aspirinSubstruct = "[O,o].c1ccccc1";
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/substructure-highlight/substructure-highlight.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/substructure-highlight/substructure-highlight.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/substructure-highlight/substructure-highlight.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-substruct" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">Substructure Highlight</h1>
 5 |       <p class="subtitle">
 6 |         You can also highlight substructure of molecules with both the SVG and
 7 |         Canvas APIs.
 8 |       </p>
 9 |     </div>
10 |   </section>
11 |   <div class="columns is-desktop">
12 |     <div class="column">
13 |       <app-molecule-structure
14 |         [width]="350"
15 |         [height]="300"
16 |         [structure]="caffeine"
17 |         [substructure]="caffeineSubstruct"
18 |       ></app-molecule-structure>
19 |     </div>
20 |     <div class="column">
21 |       <app-molecule-structure
22 |         [width]="350"
23 |         [height]="300"
24 |         [structure]="aspirin"
25 |         [substructure]="aspirinSubstruct"
26 |       ></app-molecule-structure>
27 |     </div>
28 |   </div>
29 |   <app-code-example
30 |     [files]="[
31 |       'substructure-highlight.component.html',
32 |       'substructure-highlight.component.ts'
33 |     ]"
34 |   ></app-code-example>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/substructure-highlight/substructure-highlight.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-substructure-highlight",
 5 |   templateUrl: "./substructure-highlight.component.html",
 6 |   styleUrls: ["./substructure-highlight.component.css"]
 7 | })
 8 | export class SubstructureHighlightComponent {
 9 |   caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
10 |   caffeineSubstruct = "[N,n,O;!H0]";
11 | 
12 |   aspirin = "CC(=O)Oc1ccccc1C(=O)O";
13 |   aspirinSubstruct = "CC(=O)Oc1ccccc1C";
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/substructure-search/substructure-search.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/substructure-search/substructure-search.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/substructure-search/substructure-search.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-substruct-search" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">Substructure match</h1>
 5 |       <p class="subtitle">You can perform client-side substructure match.</p>
 6 |     </div>
 7 |   </section>
 8 |   <div class="columns" style="margin: 12px 0">
 9 |     <div class="column">
10 |       <div class="field">
11 |         <label for="substructure-search" class="label">Substructure</label>
12 |         <div class="control has-icons-left">
13 |           <input
14 |             [(ngModel)]="currentQuery"
15 |             class="input"
16 |             (input)="this.handleSearchChange($event)"
17 |             placeholder="Enter a SMARTS or SMILES string here..."
18 |             id="substructure-search"
19 |           />
20 |           <span class="icon is-small is-left">
21 |             <span *ngIf="loading; else searchIcon">
22 |               <i class="fas fa-circle-notch fa-spin"></i>
23 |             </span>
24 |             <ng-template #searchIcon>
25 |               <span>
26 |                 <i class="fas fa-search"></i>
27 |               </span>
28 |             </ng-template>
29 |           </span>
30 |         </div>
31 |       </div>
32 |     </div>
33 |   </div>
34 |   <div *ngIf="!currentSmilesList; else smilesList">
35 |     No molecules were found with the given input
36 |   </div>
37 |   <ng-template #smilesList>
38 |     <div class="columns is-multiline" style="margin: 12px">
39 |       <ng-container *ngFor="let struct of currentSmilesList; let i = index">
40 |         <div class="column" *ngIf="filterMask[i]">
41 |           <app-molecule-structure
42 |             [width]="200"
43 |             [height]="200"
44 |             [svgMode]="true"
45 |             [structure]="struct"
46 |             [substructure]="currentQuery"
47 |           ></app-molecule-structure>
48 |         </div>
49 |       </ng-container>
50 |     </div>
51 |   </ng-template>
52 |   <app-code-example
53 |     [files]="['is-mol.directive.ts', 'is-substruct.directive.ts']"
54 |   ></app-code-example>
55 | </div>
56 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/substructure-search/substructure-search.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | import { map } from "rxjs/operators";
 3 | import { RDKitLoaderService } from "../../rdkit-loader/rdkit-loader.service";
 4 | import { SMILES_LIST } from "../common/smiles";
 5 | 
 6 | @Component({
 7 |   selector: "app-substructure-search",
 8 |   templateUrl: "./substructure-search.component.html",
 9 |   styleUrls: ["./substructure-search.component.css"]
10 | })
11 | export class SubstructureSearchComponent {
12 |   currentQuery = "";
13 |   currentSmilesList = SMILES_LIST;
14 | 
15 |   filterMask = Array.from(SMILES_LIST, (...arg) => true);
16 | 
17 |   queryTimer: any;
18 | 
19 |   loading = false;
20 | 
21 |   constructor(private rdkitService: RDKitLoaderService) {}
22 | 
23 |   runSearch(search: any) {
24 |     this.rdkitService
25 |       .getRDKit()
26 |       .pipe(
27 |         map((rdkit) => {
28 |           if (!search) {
29 |             return Array.from(SMILES_LIST, (...arg) => true);
30 |           }
31 |           const qmol = rdkit.get_qmol(search);
32 |           try {
33 |             const rtn = SMILES_LIST.map((smiles) => {
34 |               const mol = rdkit.get_mol(smiles);
35 |               try {
36 |                 const matches = !!mol && !!qmol ? mol.get_substruct_match(qmol) : [];
37 |                 return matches.length > 2;
38 |               } finally {
39 |                 mol?.delete();
40 |               }
41 |             });
42 |             return rtn;
43 |           } finally {
44 |             qmol?.delete();
45 |           }
46 |         })
47 |       )
48 |       .subscribe((filteredSmiles) => {
49 |         this.filterMask = filteredSmiles;
50 | 
51 |         this.loading = false;
52 |       });
53 |   }
54 | 
55 |   handleSearchChange(search: any) {
56 |     this.loading = true;
57 |     if (this.queryTimer) {
58 |       clearTimeout(this.queryTimer);
59 |     }
60 | 
61 |     this.queryTimer = setTimeout(() => {
62 |       this.runSearch(search.target.value);
63 |     }, 500);
64 |   }
65 | 
66 |   searchTrackFn(i: any, smiles: any) {
67 |     return smiles;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/svg-rendering/svg-rendering.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/examples/svg-rendering/svg-rendering.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/svg-rendering/svg-rendering.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-example-svg" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">SVG Rendering</h1>
 5 |       <p class="subtitle">You can render molecules using svg.</p>
 6 |     </div>
 7 |   </section>
 8 |   <div class="columns is-desktop">
 9 |     <div class="column">
10 |       <app-molecule-structure
11 |         [width]="350"
12 |         [height]="300"
13 |         [structure]="caffeine"
14 |         [svgMode]="true"
15 |       ></app-molecule-structure>
16 |     </div>
17 |     <div class="column">
18 |       <app-molecule-structure
19 |         [width]="350"
20 |         [height]="300"
21 |         [structure]="aspirin"
22 |         [svgMode]="true"
23 |       ></app-molecule-structure>
24 |     </div>
25 |   </div>
26 |   <app-code-example
27 |     [files]="['svg-rendering.component.html', 'svg-rendering.component.ts']"
28 |   ></app-code-example>
29 | </div>
30 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/examples/svg-rendering/svg-rendering.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-svg-rendering",
 5 |   templateUrl: "./svg-rendering.component.html",
 6 |   styleUrls: ["./svg-rendering.component.css"]
 7 | })
 8 | export class SvgRenderingComponent {
 9 |   caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
10 |   aspirin = "CC(=O)Oc1ccccc1C(=O)O";
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/introduction/introduction.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/introduction/introduction.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/introduction/introduction.component.html:
--------------------------------------------------------------------------------
 1 | <div id="component-introduction" class="container">
 2 |   <section class="hero">
 3 |     <div class="hero-body">
 4 |       <h1 class="title">Introduction</h1>
 5 |       <p class="subtitle column is-two-thirds pl-0">
 6 |         Welcome to RDKit.js for Angular. If you didn't do it already, we first
 7 |         recommend to go through the
 8 |         <a href="https://rdkitjs.com#drawing-molecules-all-options">
 9 |           JavaScript examples
10 |         </a>
11 |         for a low-level overview of the RDKit.js API.
12 |       </p>
13 |     </div>
14 |   </section>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/introduction/introduction.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | 
3 | @Component({
4 |   selector: "app-introduction",
5 |   templateUrl: "./introduction.component.html",
6 |   styleUrls: ["./introduction.component.css"]
7 | })
8 | export class IntroductionComponent {}
9 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/canvas-renderer/canvas-renderer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/examples/molecule-structure/canvas-renderer/canvas-renderer.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/canvas-renderer/canvas-renderer.component.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="molecule-canvas-container"
 3 |   [ngStyle]="{
 4 |     width: drawingDetails.width + 'px',
 5 |     height: drawingDetails.height + 'px'
 6 |   }"
 7 | >
 8 |   <canvas
 9 |     #molCanvas
10 |     [title]="this.structure"
11 |     [width]="drawingDetails.width"
12 |     [height]="drawingDetails.height"
13 |   ></canvas>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/canvas-renderer/canvas-renderer.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AfterViewInit,
 3 |   Component,
 4 |   ElementRef,
 5 |   Input,
 6 |   OnChanges,
 7 |   SimpleChanges,
 8 |   ViewChild
 9 | } from "@angular/core";
10 | import { first } from "rxjs/operators";
11 | import { RDKitLoaderService } from "../../rdkit-loader/rdkit-loader.service";
12 | 
13 | @Component({
14 |   selector: "app-canvas-renderer",
15 |   templateUrl: "./canvas-renderer.component.html",
16 |   styleUrls: ["./canvas-renderer.component.css"]
17 | })
18 | export class CanvasRendererComponent implements OnChanges, AfterViewInit {
19 |   @Input() structure!: string;
20 |   @Input() drawingDetails: any;
21 | 
22 |   @ViewChild("molCanvas", { read: ElementRef })
23 |   canvasContainer!: ElementRef<HTMLCanvasElement>;
24 | 
25 |   constructor(private rdkit: RDKitLoaderService) {}
26 | 
27 |   ngAfterViewInit(): void {
28 |     this.renderMolecule();
29 |   }
30 | 
31 |   ngOnChanges(changes: SimpleChanges): void {
32 |     if (
33 |       Object.keys(changes).every((k) => {
34 |         if (typeof changes[k].currentValue == "object") {
35 |           return (
36 |             JSON.stringify(changes[k].currentValue) ==
37 |             JSON.stringify(changes[k].previousValue)
38 |           );
39 |         }
40 |         return changes[k].currentValue == changes[k].previousValue;
41 |       })
42 |     ) {
43 |       return;
44 |     }
45 | 
46 |     // Use setTimeout here to push it off of the main thread, otherwise, it can block the mian rendering thread.
47 |     setTimeout(() => this.renderMolecule());
48 |   }
49 | 
50 |   renderMolecule() {
51 |     if (!!!this.canvasContainer) {
52 |       return;
53 |     }
54 | 
55 |     if (!!this.structure && !!this.drawingDetails) {
56 |       this.rdkit
57 |         .getRDKit()
58 |         .pipe(first())
59 |         .subscribe((rdkit) => {
60 |           const mol = rdkit.get_mol(this.structure);
61 |           try {
62 |             if (!(!!mol)) {
63 |               return;
64 |             }
65 | 
66 |             mol.draw_to_canvas_with_highlights(
67 |               this.canvasContainer.nativeElement,
68 |               JSON.stringify(this.drawingDetails)
69 |             );
70 |           } finally {
71 |             mol?.delete();
72 |           }
73 |         });
74 |     }
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/mol-draw-options.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * RDKit colours are arrays of 4 numbers, in the range 0.0 => 1.0, in the order RGBA
 3 |  *
 4 |  * RDKit accept
 5 |  */
 6 | export type DrawColour = [number, number, number, number];
 7 | 
 8 | export interface MolDrawOptions {
 9 |   addAtomIndices?: boolean;
10 |   addBondIndices?: boolean;
11 |   additionalAtomLabelPadding?: number;
12 |   addStereoAnnotation?: boolean;
13 |   annotationFontScale?: number;
14 |   atomHighlightsAreCircles?: boolean;
15 |   atomLabelDeuteriumTritium?: boolean;
16 |   atomLabels?: { [key: number]: string };
17 |   backgroundColour?: DrawColour;
18 |   bondLineWidth?: number;
19 |   centreMoleculesBeforeDrawing?: boolean;
20 |   circleAtoms?: boolean;
21 |   clearBackground?: boolean;
22 |   continuousHighlight?: boolean;
23 |   dummiesAreAttachments?: boolean;
24 |   explicitMethyl?: boolean;
25 |   fillHighlights?: boolean;
26 |   fixedBondLength?: number;
27 |   fixedScale?: number;
28 |   flagCloseContactsDist?: number;
29 |   fontFile?: string;
30 |   highlightBondWidthMultiplier?: number;
31 |   highlightColour?: DrawColour;
32 |   highlightRadius?: number;
33 |   includeAtomTags?: boolean;
34 |   includeMetadata?: boolean;
35 |   includeRadicals?: boolean;
36 |   legendColour?: DrawColour;
37 |   legendFontSize?: number;
38 |   maxFontSize?: number;
39 |   minFontSize?: number;
40 |   multipleBondOffset?: number;
41 |   padding?: number;
42 |   prepareMolsBeforeDrawing?: boolean;
43 |   rotate?: number;
44 |   scaleBondWidth?: boolean;
45 |   scaleHighlightBondWidth?: boolean;
46 |   symbolColour?: DrawColour;
47 | }
48 | 
49 | export interface MolHighlight {
50 |   atoms: number[];
51 |   bonds: number[];
52 | }
53 | 
54 | export interface DrawingParameters extends MolDrawOptions {
55 |   width?: number;
56 |   height?: number;
57 |   atoms?: number[];
58 |   bonds?: number[];
59 | }
60 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/molecule-structure.component.css:
--------------------------------------------------------------------------------
1 | .molecule-structure-wrapper {
2 |   display: grid;
3 |   place-items: center;
4 | }
5 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/molecule-structure.component.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="molecule-structure-wrapper"
 3 |   [ngStyle]="{ width: width + 'px', height: height + 'px' }"
 4 | >
 5 |   <span *ngIf="loading; else loadedView" class="loading-icon"
 6 |     ><i class="fas fa-spin fa-2x fa-circle-notch"></i
 7 |   ></span>
 8 |   <ng-template #loadedView>
 9 |     <span *ngIf="error; else molView">
10 |       {{ error }}
11 |     </span>
12 |     <ng-template #molView>
13 |       <app-svg-renderer
14 |         *ngIf="svgMode; else canvasMode"
15 |         [structure]="structure"
16 |         [drawingDetails]="drawDetails"
17 |       ></app-svg-renderer>
18 |       <ng-template #canvasMode>
19 |         <app-canvas-renderer
20 |           [structure]="structure"
21 |           [drawingDetails]="drawDetails"
22 |         ></app-canvas-renderer>
23 |       </ng-template>
24 |     </ng-template>
25 |   </ng-template>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/molecule-structure.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AfterViewInit,
  3 |   Component,
  4 |   ElementRef,
  5 |   Input,
  6 |   OnChanges,
  7 |   OnDestroy,
  8 |   OnInit,
  9 |   SecurityContext,
 10 |   SimpleChanges,
 11 |   ViewChild
 12 | } from "@angular/core";
 13 | import { DomSanitizer } from "@angular/platform-browser";
 14 | import { Observable } from "rxjs";
 15 | import { first, shareReplay } from "rxjs/operators";
 16 | import { RDKitModule } from "../../../../../../typescript";
 17 | import { RDKitLoaderService } from "../rdkit-loader/rdkit-loader.service";
 18 | import { MolDrawOptions, MolHighlight } from "./mol-draw-options";
 19 | 
 20 | @Component({
 21 |   selector: "app-molecule-structure",
 22 |   templateUrl: "./molecule-structure.component.html",
 23 |   styleUrls: ["./molecule-structure.component.css"]
 24 | })
 25 | export class MoleculeStructureComponent implements OnChanges, AfterViewInit {
 26 |   @Input() width: number = 200;
 27 |   @Input() height: number = 200;
 28 |   @Input() structure!: string;
 29 |   @Input() substructure?: string;
 30 |   @Input() refreshDelay?: number;
 31 |   @Input() svgMode: boolean = false;
 32 |   @Input() molDrawOptions?: MolDrawOptions;
 33 | 
 34 |   drawDetails: any = {};
 35 | 
 36 |   rdkit$!: Observable<RDKitModule>;
 37 | 
 38 |   error: string | null = null;
 39 | 
 40 |   loading: boolean;
 41 | 
 42 |   refreshTimeout?: any;
 43 | 
 44 |   @ViewChild("molCanvas", { read: ElementRef })
 45 |   canvasContainer!: ElementRef<HTMLCanvasElement>;
 46 | 
 47 |   constructor(
 48 |     private rdkitService: RDKitLoaderService,
 49 |     private domSanitizer: DomSanitizer,
 50 |     private el: ElementRef
 51 |   ) {
 52 |     this.loading = true;
 53 |     this.rdkit$ = this.rdkitService.getRDKit().pipe(shareReplay(1));
 54 |     this.rdkit$.pipe(first()).subscribe(
 55 |       (_) => {
 56 |         this.loading = false;
 57 |         this.error = null;
 58 |       },
 59 |       (error) => {
 60 |         this.loading = false;
 61 |         console.error(error);
 62 |         this.error = "RDKit failed to load";
 63 |       }
 64 |     );
 65 |   }
 66 | 
 67 |   ngAfterViewInit(): void {
 68 |     this.renderStructure();
 69 |   }
 70 | 
 71 |   ngOnChanges(changes: SimpleChanges): void {
 72 |     if (
 73 |       !Object.keys(changes).some(
 74 |         (k) => changes[k].currentValue !== changes[k].previousValue
 75 |       )
 76 |     ) {
 77 |       return;
 78 |     }
 79 | 
 80 |     if (this.refreshDelay) {
 81 |       if (this.refreshTimeout) {
 82 |         clearTimeout(this.refreshTimeout);
 83 |       }
 84 |       this.refreshTimeout = setTimeout(
 85 |         () => this.renderStructure(),
 86 |         this.refreshDelay
 87 |       );
 88 |     } else {
 89 |       this.renderStructure();
 90 |     }
 91 |   }
 92 | 
 93 |   renderStructure() {
 94 |     this.error = null;
 95 | 
 96 |     this.rdkit$.pipe(first()).subscribe((rdkit) => {
 97 |       const mol = rdkit.get_mol(this.structure);
 98 |       const qmol = rdkit.get_qmol(this.substructure || "");
 99 |       try {
100 |         if (!(!!mol)) {
101 |           this.error = "Invalid structure";
102 |           return;
103 |         }
104 | 
105 |         let highlightDetails: MolHighlight = { bonds: [], atoms: [] };
106 | 
107 |         if (!!qmol) {
108 |           const highlights: any = JSON.parse(mol.get_substruct_matches(qmol));
109 | 
110 |           if (highlights?.length) {
111 |             highlightDetails = (highlights as MolHighlight[]).reduce(
112 |               (acc, { atoms, bonds }) => ({
113 |                 atoms: [...acc.atoms, ...atoms],
114 |                 bonds: [...acc.bonds, ...bonds]
115 |               }),
116 |               { bonds: [], atoms: [] }
117 |             );
118 |           } else {
119 |             highlightDetails = highlights as MolHighlight;
120 |           }
121 |         }
122 | 
123 |         this.drawDetails = {
124 |           width: this.width,
125 |           height: this.height,
126 |           bondLineWidth: 1,
127 |           addStereoAnnotation: true,
128 |           ...(this.molDrawOptions || {}),
129 |           ...highlightDetails
130 |         };
131 |       } finally {
132 |         mol?.delete();
133 |         qmol?.delete();
134 |       }
135 |     });
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/svg-renderer/svg-renderer.component.css:
--------------------------------------------------------------------------------
1 | .molecule-structure-svg svg rect:first-of-type {
2 |   fill: transparent !important;
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/svg-renderer/svg-renderer.component.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   #molSVG
 3 |   class="molecule-structure-svg"
 4 |   [title]="this.structure"
 5 |   [ngStyle]="{
 6 |     width: drawingDetails.width + 'px',
 7 |     height: drawingDetails.height + 'px'
 8 |   }"
 9 |   [innerHtml]="safeSVG"
10 | ></div>
11 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/molecule-structure/svg-renderer/svg-renderer.component.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AfterViewInit,
 3 |   ChangeDetectionStrategy,
 4 |   ChangeDetectorRef,
 5 |   Component,
 6 |   ElementRef,
 7 |   Input,
 8 |   OnChanges,
 9 |   SimpleChanges,
10 |   ViewChild
11 | } from "@angular/core";
12 | import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
13 | import { first } from "rxjs/operators";
14 | import { RDKitLoaderService } from "../../rdkit-loader/rdkit-loader.service";
15 | 
16 | @Component({
17 |   selector: "app-svg-renderer",
18 |   templateUrl: "./svg-renderer.component.html",
19 |   styleUrls: ["./svg-renderer.component.css"]
20 | })
21 | export class SvgRendererComponent implements OnChanges, AfterViewInit {
22 |   @Input() structure!: string;
23 |   @Input() drawingDetails: any;
24 | 
25 |   @ViewChild("molSVG", { read: ElementRef })
26 |   svgContainer!: ElementRef<HTMLDivElement>;
27 | 
28 |   safeSVG?: SafeHtml;
29 | 
30 |   constructor(
31 |     private rdkit: RDKitLoaderService,
32 |     private domSanitizer: DomSanitizer,
33 |     private cdr: ChangeDetectorRef
34 |   ) {}
35 | 
36 |   ngAfterViewInit(): void {
37 |     this.renderMolecule();
38 |   }
39 | 
40 |   ngOnChanges(changes: SimpleChanges): void {
41 |     if (
42 |       Object.keys(changes).every((k) => {
43 |         if (typeof changes[k].currentValue == "object") {
44 |           return (
45 |             JSON.stringify(changes[k].currentValue) ==
46 |             JSON.stringify(changes[k].previousValue)
47 |           );
48 |         }
49 |         return changes[k].currentValue == changes[k].previousValue;
50 |       })
51 |     ) {
52 |       return;
53 |     }
54 | 
55 |     // Use setTimeout here to push it off of the main thread, otherwise, it can block the mian rendering thread.
56 |     setTimeout(() => this.renderMolecule());
57 |   }
58 | 
59 |   renderMolecule() {
60 |     if (!!!this.svgContainer) {
61 |       return;
62 |     }
63 | 
64 |     if (!!this.structure && !!this.drawingDetails) {
65 |       this.rdkit
66 |         .getRDKit()
67 |         .pipe(first())
68 |         .subscribe((rdkit) => {
69 |           const mol = rdkit.get_mol(this.structure);
70 |           try {
71 |             if (!(!!mol)) {
72 |               return;
73 |             }
74 | 
75 |             const svgData = mol.get_svg_with_highlights(
76 |               JSON.stringify(this.drawingDetails)
77 |             );
78 | 
79 |             this.safeSVG = this.domSanitizer.bypassSecurityTrustHtml(svgData);
80 |             this.cdr.detectChanges();
81 |           } finally {
82 |             mol?.delete();
83 |           }
84 |         });
85 |     }
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/rdkit-loader/rdkit-loader.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable, OnDestroy } from "@angular/core";
 2 | import { Observable, ReplaySubject } from "rxjs";
 3 | import { first } from "rxjs/operators";
 4 | import { RDKitLoader, RDKitModule } from "../../../../../../typescript";
 5 | 
 6 | declare global {
 7 |   interface Window {
 8 |     initRDKitModule: RDKitLoader;
 9 |   }
10 | }
11 | 
12 | @Injectable({
13 |   providedIn: "root"
14 | })
15 | export class RDKitLoaderService implements OnDestroy {
16 |   private rdkitSubject$!: ReplaySubject<RDKitModule>;
17 | 
18 |   /**
19 |    * Tidy up the subject on closing
20 |    */
21 |   ngOnDestroy(): void {
22 |     this.rdkitSubject$.complete();
23 |   }
24 | 
25 |   /**
26 |    * Returns an observable with the RDKit module in it.
27 |    *
28 |    * If RDKit isn't set, its going to be initialized, and then sent through the subject.
29 |    * Subsequent calls listen to the same subject, which emits the instance when init is complete,
30 |    * or instantly when its already initialized.
31 |    *
32 |    * @returns An Observable containing the RDKit Module
33 |    */
34 |   getRDKit(): Observable<RDKitModule> {
35 |     if (!this.rdkitSubject$) {
36 |       this.rdkitSubject$ = new ReplaySubject(1);
37 |       window.initRDKitModule().then(
38 |         (instance: RDKitModule) => {
39 |           // instance.prefer_coordgen(true)
40 |           this.rdkitSubject$.next(instance);
41 |         },
42 |         (error) => {
43 |           this.rdkitSubject$.error(error);
44 |         }
45 |       );
46 |     }
47 |     return this.rdkitSubject$.asObservable().pipe(first());
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/validators/is-mol.directive.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @angular-eslint/directive-selector */
 2 | 
 3 | import { Directive } from "@angular/core";
 4 | import {
 5 |   AbstractControl,
 6 |   AsyncValidator,
 7 |   NG_ASYNC_VALIDATORS,
 8 |   ValidationErrors
 9 | } from "@angular/forms";
10 | import { Observable } from "rxjs";
11 | import { map } from "rxjs/operators";
12 | import { RDKitLoaderService } from "../rdkit-loader/rdkit-loader.service";
13 | 
14 | @Directive({
15 |   selector: "[isMol]",
16 |   providers: [
17 |     {
18 |       provide: NG_ASYNC_VALIDATORS,
19 |       multi: true,
20 |       useExisting: IsMolDirective
21 |     }
22 |   ]
23 | })
24 | export class IsMolDirective implements AsyncValidator {
25 |   constructor(private rdkitService: RDKitLoaderService) {}
26 | 
27 |   validate(
28 |     control: AbstractControl<any, any>
29 |   ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
30 |     if (!control.value) {
31 |       return Promise.resolve(null);
32 |     }
33 | 
34 |     return this.rdkitService.getRDKit().pipe(
35 |       map((rdkit) => {
36 |         const mol = rdkit.get_mol(control.value);
37 |         try {
38 |           const isMol = !!mol;
39 | 
40 |           return isMol ? null : { isMol: "Input is not a valid Molecule" };
41 |         } finally {
42 |           mol?.delete();
43 |         }
44 |       })
45 |     );
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/examples/validators/is-substruct.directive.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @angular-eslint/directive-selector */
 2 | 
 3 | import { Directive, Input } from "@angular/core";
 4 | import {
 5 |   NG_ASYNC_VALIDATORS,
 6 |   AsyncValidator,
 7 |   AbstractControl,
 8 |   ValidationErrors
 9 | } from "@angular/forms";
10 | import { Observable } from "rxjs";
11 | import { map } from "rxjs/operators";
12 | import { RDKitLoaderService } from "../rdkit-loader/rdkit-loader.service";
13 | 
14 | @Directive({
15 |   selector: "[isSubstruct]",
16 |   providers: [
17 |     {
18 |       provide: NG_ASYNC_VALIDATORS,
19 |       multi: true,
20 |       useExisting: IsSubstructDirective
21 |     }
22 |   ]
23 | })
24 | export class IsSubstructDirective implements AsyncValidator {
25 |   @Input("isSubstruct") refMol!: string;
26 | 
27 |   constructor(private rdkitService: RDKitLoaderService) {}
28 | 
29 |   validate(
30 |     control: AbstractControl<any, any>
31 |   ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
32 |     if (!control.value || !this.refMol) {
33 |       return Promise.resolve(null);
34 |     }
35 | 
36 |     return this.rdkitService.getRDKit().pipe(
37 |       map((rdkit) => {
38 |         const mol = rdkit.get_mol(this.refMol);
39 |         const qmol = rdkit.get_qmol(control.value);
40 |         try {
41 |           const isMol = !!mol;
42 | 
43 |           if (!isMol) {
44 |             return null;
45 |           }
46 | 
47 |           const isQMol = !!qmol;
48 | 
49 |           if (!isQMol) {
50 |             return { isSubstruct: "Input is not a valid Molecule" };
51 |           }
52 | 
53 |           // Check if its not "{}". No need to parse as JSON this way
54 |           const rtn = mol.get_substruct_match(qmol).length > 2;
55 |           return rtn
56 |             ? null
57 |             : {
58 |                 isSubstruct: "Input is not a substructure of the given Molecule"
59 |               };
60 |         } finally {
61 |           mol?.delete();
62 |           qmol?.delete();
63 |         }
64 |       })
65 |     );
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/navbar/navbar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/navbar/navbar.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/navbar/navbar.component.html:
--------------------------------------------------------------------------------
  1 | <nav
  2 |   class="navbar has-shadow"
  3 |   style="padding: 12px 0"
  4 |   role="navigation"
  5 |   aria-label="main navigation"
  6 | >
  7 |   <div class="navbar-brand" style="padding: 6px">
  8 |     <a class="navbar-item" href="#/">
  9 |       <img alt="logo" src="assets/rdkitjs_cropped_200.png" />
 10 |     </a>
 11 | 
 12 |     <a
 13 |       role="button"
 14 |       [ngClass]="{ 'navbar-burger': true, 'is-active': burgerState }"
 15 |       aria-label="menu"
 16 |       aria-expanded="false"
 17 |       data-target="navbarBasicExample"
 18 |       href="#/"
 19 |       (click)="toggleBurgerState()"
 20 |     >
 21 |       <span aria-hidden="true"></span>
 22 |       <span aria-hidden="true"></span>
 23 |       <span aria-hidden="true"></span>
 24 |     </a>
 25 |   </div>
 26 | 
 27 |   <div
 28 |     id="navbarBasicExample"
 29 |     [ngClass]="{ 'navbar-menu': true, 'is-active': burgerState }"
 30 |   >
 31 |     <div class="navbar-start">
 32 |       <a
 33 |         class="navbar-item"
 34 |         href="https://github.com/rdkit/rdkit-js/tree/master/examples/javascript"
 35 |       >
 36 |         Source Code
 37 |       </a>
 38 |       <a class="navbar-item" href="https://docs.rdkitjs.com/"> API Docs </a>
 39 |       <div class="navbar-item has-dropdown is-hoverable">
 40 |         <a class="navbar-link" href="#/"> Examples </a>
 41 | 
 42 |         <div class="navbar-dropdown">
 43 |           <a class="navbar-item" href="https://rdkitjs.com"> JavaScript </a>
 44 |           <a class="navbar-item" href="https://react.rdkitjs.com"> React </a>
 45 |           <a class="navbar-item" href="https://vue.rdkitjs.com"> Vue </a>
 46 |           <a class="navbar-item is-active" href="https://angular.rdkitjs.com">
 47 |             Angular
 48 |           </a>
 49 |           <hr class="navbar-divider" />
 50 |           <a
 51 |             class="navbar-item"
 52 |             href="https://github.com/rdkit/rdkit-js#contributing"
 53 |           >
 54 |             Contribute
 55 |           </a>
 56 |         </div>
 57 |       </div>
 58 |     </div>
 59 | 
 60 |     <div class="navbar-end">
 61 |       <div class="navbar-item">
 62 |         <div class="buttons">
 63 |           <a
 64 |             data-tooltip="Go to main RDKit project"
 65 |             class="button has-tooltip-bottom is-white is-big"
 66 |             href="https://github.com/rdkit/rdkit"
 67 |           >
 68 |             <span class="icon">
 69 |               <img alt="RDKit Logo" src="assets/rdkit.png" />
 70 |             </span>
 71 |           </a>
 72 |         </div>
 73 |       </div>
 74 |       <div class="navbar-item">
 75 |         <div class="buttons">
 76 |           <a
 77 |             aria-label="Go to RDKit.js"
 78 |             class="button has-tooltip-bottom is-white is-big"
 79 |             href="https://github.com/rdkit/rdkit-js/tree/master/examples/react"
 80 |           >
 81 |             <span class="icon">
 82 |               <i class="fab fa-github fa-2x"></i>
 83 |             </span>
 84 |           </a>
 85 |         </div>
 86 |       </div>
 87 |       <div class="navbar-item">
 88 |         <div class="buttons mr-6">
 89 |           <a
 90 |             aria-label="Go to NPM package"
 91 |             class="button has-tooltip-bottom is-white is-big"
 92 |             href="https://www.npmjs.com/package/@rdkit/rdkit"
 93 |           >
 94 |             <span class="icon">
 95 |               <i class="fab fa-npm fa-2x"></i>
 96 |             </span>
 97 |           </a>
 98 |         </div>
 99 |       </div>
100 |     </div>
101 |   </div>
102 | </nav>
103 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-navbar",
 5 |   templateUrl: "./navbar.component.html",
 6 |   styleUrls: ["./navbar.component.css"]
 7 | })
 8 | export class NavbarComponent {
 9 |   burgerState = false;
10 | 
11 |   constructor() {}
12 | 
13 |   toggleBurgerState() {
14 |     this.burgerState = !this.burgerState;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/sidebar/sidebar-contents.ts:
--------------------------------------------------------------------------------
 1 | export interface SidebarSection {
 2 |   // Display name
 3 |   name: string;
 4 |   // Child elements under the section
 5 |   children: SidebarElement[];
 6 | }
 7 | 
 8 | export interface SidebarElement {
 9 |   // Display name
10 |   name: string;
11 |   // Element CSS ID Selector (Include the #)
12 |   id: string;
13 | }
14 | 
15 | /**
16 |  * Follow the typing to add new sections
17 |  */
18 | export const sections: SidebarSection[] = [
19 |   {
20 |     name: "General",
21 |     children: [
22 |       {
23 |         id: "#component-introduction",
24 |         name: "Introduction"
25 |       },
26 |       {
27 |         id: "#component-example-list",
28 |         name: "Overview"
29 |       }
30 |     ]
31 |   },
32 |   {
33 |     name: "Components",
34 |     children: [
35 |       {
36 |         id: "#component-example-loader",
37 |         name: "RDKitLoaderService"
38 |       },
39 |       {
40 |         id: "#component-example-moleculestructure",
41 |         name: "MoleculeStructure"
42 |       }
43 |     ]
44 |   },
45 |   {
46 |     name: "Examples",
47 |     children: [
48 |       {
49 |         id: "#component-example-svg",
50 |         name: "SVG Rendering"
51 |       },
52 |       {
53 |         id: "#component-example-canvas",
54 |         name: "Canvas Rendering"
55 |       },
56 |       {
57 |         id: "#component-example-substruct",
58 |         name: "Substructure Highlighting"
59 |       },
60 |       {
61 |         id: "#component-example-multi-substruct",
62 |         name: "Multi-Substructure Highlighting"
63 |       },
64 |       {
65 |         id: "#component-example-substruct-search",
66 |         name: "Substructure Search"
67 |       },
68 |       {
69 |         id: "#component-example-drawing-options",
70 |         name: "Additional Options"
71 |       }
72 |     ]
73 |   },
74 |   {
75 |     name: "Other",
76 |     children: [
77 |       {
78 |         id: "#other-examples-vanilla-js",
79 |         name: "JavaScript Examples"
80 |       },
81 |       {
82 |         id: "#other-examples-react",
83 |         name: "React Examples"
84 |       },
85 |       {
86 |         id: "#other-examples-vue",
87 |         name: "Vue Examples"
88 |       },
89 |       {
90 |         id: "#other-examples-legacy",
91 |         name: "Legacy Examples"
92 |       }
93 |     ]
94 |   }
95 | ];
96 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/sidebar/sidebar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/app/sidebar/sidebar.component.css


--------------------------------------------------------------------------------
/examples/angular/src/app/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
 1 | <ng-container *ngFor="let section of sections">
 2 |   <p class="menu-label">{{ section.name }}</p>
 3 |   <ul class="menu-list">
 4 |     <li *ngFor="let child of section.children">
 5 |       <a
 6 |         [href]="child.id"
 7 |         [ngClass]="{ 'is-active': activeRoute === child.id }"
 8 |         (click)="activeRoute = child.id"
 9 |       >
10 |         {{ child.name }}
11 |       </a>
12 |     </li>
13 |   </ul>
14 | </ng-container>
15 | 


--------------------------------------------------------------------------------
/examples/angular/src/app/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | import { sections } from "./sidebar-contents";
 3 | 
 4 | @Component({
 5 |   selector: "app-sidebar",
 6 |   templateUrl: "./sidebar.component.html",
 7 |   styleUrls: ["./sidebar.component.css"]
 8 | })
 9 | export class SidebarComponent {
10 |   sections = sections;
11 |   activeRoute = "";
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/angular/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/.gitkeep


--------------------------------------------------------------------------------
/examples/angular/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/favicon.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/logo-nobackground-1000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/logo-nobackground-1000.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/logo-nobackground-200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/logo-nobackground-200.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/logo-nobackground-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/logo-nobackground-500.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/logo-normal-1000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/logo-normal-1000.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/logo-normal-200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/logo-normal-200.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/logo-normal-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/logo-normal-500.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/rdkit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/rdkit.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/rdkitjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/rdkitjs.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/rdkitjs_cropped.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/rdkitjs_cropped.png


--------------------------------------------------------------------------------
/examples/angular/src/assets/rdkitjs_cropped_200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/assets/rdkitjs_cropped_200.png


--------------------------------------------------------------------------------
/examples/angular/src/code-example-generator.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * code-example-generator.js
 3 |  *
 4 |  * This NodeJS file is designed to generate the code examples look up object.
 5 |  *
 6 |  */
 7 | 
 8 | const fs = require("fs");
 9 | const path = require("path");
10 | const dirpath = "./app/examples";
11 | const ignoreHeader = "// @ignore-example-code-gen";
12 | const codeExampleRegex = / *<app-code-example.*<\/app-code-example>\n/;
13 | 
14 | function getDirectoryAsObject(dir) {
15 |   let obj = {};
16 |   fs.readdirSync(dir).forEach((file) => {
17 |     let fullPath = path.join(dir, file);
18 | 
19 |     if (fs.lstatSync(fullPath).isDirectory()) {
20 |       obj = { ...obj, ...getDirectoryAsObject(fullPath) };
21 |     } else {
22 |       const fileText = fs.readFileSync(fullPath).toString();
23 |       if (!fileText.startsWith(ignoreHeader)) {
24 |         const cleanText = fileText.replace(codeExampleRegex, "");
25 |         obj[file] = cleanText;
26 |       }
27 |     }
28 |   });
29 |   return obj;
30 | }
31 | 
32 | fs.writeFileSync(
33 |   "./app/examples/code-examples.ts",
34 |   `
35 | ${ignoreHeader}
36 | // Generated by code-example-generator.js
37 | export const examplesCode: {[key: string]:string}  = ${JSON.stringify(
38 |     getDirectoryAsObject(dirpath)
39 |   )}
40 | `
41 | );
42 | 


--------------------------------------------------------------------------------
/examples/angular/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/examples/angular/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/examples/angular/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/angular/src/favicon.ico


--------------------------------------------------------------------------------
/examples/angular/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>RDKit.js - Angular Example</title>
 6 |     <base href="/" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <link rel="icon" type="image/x-icon" href="assets/favicon.png" />
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"></script>
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"
13 |     />
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://unpkg.com/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css"
17 |     />
18 |   </head>
19 |   <body>
20 |     <app-root></app-root>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/examples/angular/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { ApplicationRef, enableProdMode } from "@angular/core";
 2 | import { enableDebugTools } from "@angular/platform-browser";
 3 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 4 | 
 5 | import { AppModule } from "./app/app.module";
 6 | import { environment } from "./environments/environment";
 7 | 
 8 | if (environment.production) {
 9 |   enableProdMode();
10 | }
11 | 
12 | platformBrowserDynamic()
13 |   .bootstrapModule(AppModule)
14 |   .then((moduleRef) => {
15 |     const applicationRef = moduleRef.injector.get(ApplicationRef);
16 |     const componentRef = applicationRef.components[0];
17 |     enableDebugTools(componentRef);
18 |   })
19 |   .catch((err) => console.error(err));
20 | 


--------------------------------------------------------------------------------
/examples/angular/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * By default, zone.js will patch all possible macroTask and DomEvents
23 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
24 |  * because those flags need to be set before `zone.js` being loaded, and webpack
25 |  * will put import in the top of bundle, so user need to create a separate file
26 |  * in this directory (for example: zone-flags.ts), and put the following flags
27 |  * into that file, and then add the following code before importing zone.js.
28 |  * import './zone-flags';
29 |  *
30 |  * The flags allowed in zone-flags.ts are listed here.
31 |  *
32 |  * The following flags will work for all browsers.
33 |  *
34 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 |  *
38 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
40 |  *
41 |  *  (window as any).__Zone_enable_cross_context_check = true;
42 |  *
43 |  */
44 | 
45 | /***************************************************************************************************
46 |  * Zone JS is required by default for Angular itself.
47 |  */
48 | import "zone.js"; // Included with Angular CLI.
49 | 
50 | /***************************************************************************************************
51 |  * APPLICATION IMPORTS
52 |  */
53 | 


--------------------------------------------------------------------------------
/examples/angular/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | html,
 3 | body,
 4 | #app {
 5 |   height: 100%;
 6 |   scroll-behavior: smooth;
 7 | }
 8 | #app {
 9 |   min-height: 100%;
10 | }
11 | @media screen and (max-width: 768px) {
12 |   #menu-toggle:checked + .nav-menu {
13 |     display: block;
14 |   }
15 | }
16 | 
17 | /**
18 | * Change default scrollbar style
19 | * source: https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg
20 | */
21 | ::-webkit-scrollbar {
22 |   width: 20px;
23 |   height: 20px;
24 | }
25 | 
26 | ::-webkit-scrollbar-track {
27 |   background-color: transparent;
28 | }
29 | 
30 | ::-webkit-scrollbar-thumb {
31 |   background-color: #d6dee1;
32 |   border-radius: 20px;
33 |   border: 6px solid transparent;
34 |   background-clip: content-box;
35 | }
36 | 
37 | ::-webkit-scrollbar-thumb:hover {
38 |   background-color: #a8bbbf;
39 | }
40 | 
41 | code {
42 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
43 |     monospace;
44 | }
45 | 


--------------------------------------------------------------------------------
/examples/angular/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": ["src/main.ts", "src/polyfills.ts"],
 9 |   "include": ["src/**/*.d.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/angular/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "sourceMap": true,
12 |     "declaration": false,
13 |     "downlevelIteration": true,
14 |     "experimentalDecorators": true,
15 |     "moduleResolution": "node",
16 |     "importHelpers": true,
17 |     "target": "es2020",
18 |     "module": "es2020",
19 |     "lib": ["es2018", "dom"]
20 |   },
21 |   "angularCompilerOptions": {
22 |     "enableI18nLegacyMessageIdFormat": false,
23 |     "strictInjectionParameters": true,
24 |     "strictInputAccessModifiers": true,
25 |     "strictTemplates": true
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/examples/javascript/README.md:
--------------------------------------------------------------------------------
 1 | # RDKit for JavaScript Examples
 2 | 
 3 | The following sub-repository is dedicated to showcasing the functionalities of RDKit.js via plain javascript examples, i.e. without any web framework or libraries.
 4 | 
 5 | The examples are live at [rdkitjs.com](https://www.rdkitjs.com).
 6 | 
 7 | If you are looking for examples leveraging modern web framework, follow the link to their related sub-repositories:
 8 | 
 9 | - [React.js Examples](https://github.com/rdkit/rdkit-js/tree/master/examples/react)
10 | 
11 | ## Contributing
12 | 
13 | First, fork the RDKit.js GitHub repository and run the remaining instructions from your fork.
14 | 
15 | ### Dependencies
16 | 
17 | - Git
18 | - Node >= 14.x
19 | - Yarn 1.22.19
20 | 
21 | ### Installation and local development server
22 | 
23 | Run the following command to install the RDKit.js project.
24 | 
25 | ```bash
26 | git clone https://github.com/<name of your fork>/rdkit-js.git && \
27 | cd rdkit-js && \
28 | yarn install
29 | ```
30 | 
31 | Once the project is installed, run the following command at the root of the RDKit.js repository to start the development server:
32 | 
33 | ```bash
34 | npm run javascript:start
35 | ```
36 | 
37 | You are now ready to develop.
38 | 
39 | ### Contributing examples
40 | 
41 | All javascript examples are written inline in the index.html file at `./examples/javascript/index.html`.
42 | 
43 | To add a new example, make sure to respect the following checklist:
44 | 
45 | 1. [ ] Start a new git branch from the master branch and give it a meaningful name
46 | 2. [ ] An example should have the following components to it:
47 | 
48 | - [ ] A textarea section containing the executable code.
49 | - [ ] A text explanation of what the example is about.
50 | - [ ] A button "Run" to execute the code.
51 | - [ ] An output html element where the result of the executed code will be displayed.
52 | - [ ] A dedicated side navigation entry under the `<aside />` html element.
53 | 
54 | 3. [ ] Make sure your example respects the styling conventions using [Bulma](https://bulma.io/).
55 | 4. [ ] Make sure you formatted your code with `npm run format`.
56 | 
57 | Once you're done, make a pull request to the master branch of the main RDKit.js repository, and wait for the review!
58 | 


--------------------------------------------------------------------------------
/examples/javascript/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@rdkit/javascript-examples",
 3 |   "version": "1.0.0",
 4 |   "description": "The following sub-repository is dedicated to showcasing the functionalities of RDKit.js via plain javascript examples, i.e. without any web framework or libraries.",
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "dev": "serve .",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/rdkit/rdkit-js.git"
13 |   },
14 |   "keywords": [
15 |     "rdkit",
16 |     "RDKit.js",
17 |     "wasm",
18 |     "javascript"
19 |   ],
20 |   "author": "",
21 |   "license": "BSD-3-Clause",
22 |   "bugs": {
23 |     "url": "https://github.com/rdkit/rdkit-js/issues"
24 |   },
25 |   "homepage": "https://www.rdkitjs.com"
26 | }
27 | 


--------------------------------------------------------------------------------
/examples/javascript/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/favicon.png


--------------------------------------------------------------------------------
/examples/javascript/public/logo-nobackground-1000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/logo-nobackground-1000.png


--------------------------------------------------------------------------------
/examples/javascript/public/logo-nobackground-200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/logo-nobackground-200.png


--------------------------------------------------------------------------------
/examples/javascript/public/logo-nobackground-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/logo-nobackground-500.png


--------------------------------------------------------------------------------
/examples/javascript/public/logo-normal-1000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/logo-normal-1000.png


--------------------------------------------------------------------------------
/examples/javascript/public/logo-normal-200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/logo-normal-200.png


--------------------------------------------------------------------------------
/examples/javascript/public/logo-normal-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/logo-normal-500.png


--------------------------------------------------------------------------------
/examples/javascript/public/rdkit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/rdkit.png


--------------------------------------------------------------------------------
/examples/javascript/public/rdkitjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/rdkitjs.png


--------------------------------------------------------------------------------
/examples/javascript/public/rdkitjs_cropped.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/rdkitjs_cropped.png


--------------------------------------------------------------------------------
/examples/javascript/public/rdkitjs_cropped_200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/javascript/public/rdkitjs_cropped_200.png


--------------------------------------------------------------------------------
/examples/nextjs/README.md:
--------------------------------------------------------------------------------
 1 | This is a minimal Rdkit [Next.js](https://nextjs.org/) project.
 2 | 
 3 | ## A note on the Next.js config
 4 | 
 5 | In order to bootstrap Rdkit in Next.js, you'll need to modify the default webpack config in next.config.js.
 6 | 
 7 | CopyWebpackPlugin is used to copy RDKit_minimal.wasm into /public folder.
 8 | 
 9 | 'fs' module needs to be polyfilled in the browser.
10 | 
11 | ## MoleculeStructure React component
12 | 
13 | MoleculeStructure contains an example react component that makes uses of Rdkit.
14 | It can only be rendered via [Dyanmic Import with no SSR](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).
15 | 
16 | ## Running the example on your local machine
17 | 
18 | Simply run the following command at the root of the example:
19 | 
20 | ```bash
21 | npm install && \
22 | npm run build && \
23 | npm start
24 | ```
25 | 
26 | You can also run the app on a different port than the default 3000 with the following option:
27 | 
28 | ```bash
29 | npm start -- -p 3001
30 | ```
31 | 


--------------------------------------------------------------------------------
/examples/nextjs/next.config.js:
--------------------------------------------------------------------------------
 1 | const CopyPlugin = require("copy-webpack-plugin");
 2 | 
 3 | /** @type {import('next').NextConfig} */
 4 | const nextConfig = {
 5 |   webpack(config, { isServer }) {
 6 |     config.plugins.push(
 7 |       new CopyPlugin({
 8 |         patterns: [
 9 |           {
10 |             from: "node_modules/@rdkit/rdkit/dist/RDKit_minimal.wasm",
11 |             to: "static/chunks"
12 |           }
13 |         ]
14 |       })
15 |     );
16 | 
17 |     if (!isServer) {
18 |       config.resolve.fallback = {
19 |         fs: false
20 |       };
21 |     }
22 | 
23 |     return config;
24 |   }
25 | };
26 | 
27 | module.exports = nextConfig;
28 | 


--------------------------------------------------------------------------------
/examples/nextjs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@rdkit/rdkit": "^2022.9.5-1.0.0",
12 |     "copy-webpack-plugin": "^11.0.0",
13 |     "lodash": "^4.17.21",
14 |     "next": "^13.5.4",
15 |     "prop-types": "^15.8.1",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/nextjs/pages/_app.js:
--------------------------------------------------------------------------------
1 | function MyApp({ Component, pageProps }) {
2 |   return <Component {...pageProps} />;
3 | }
4 | 
5 | export default MyApp;
6 | 


--------------------------------------------------------------------------------
/examples/nextjs/pages/index.js:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic";
 2 | const MoleculeStructure = dynamic(
 3 |   () => import("../components/MoleculeStructure/MoleculeStructure"),
 4 |   { ssr: false }
 5 | );
 6 | 
 7 | export default function Home() {
 8 |   return (
 9 |     <MoleculeStructure
10 |       structure="CSCC[C@H](NC(=O)[C@H](CC1=CNC2=C1C=CC=C2)NC(=O)CCNC(=O)OC(C)(C)C)C(=O)N[C@@H](CC(O)=O)C(=O)N[C@@H](CC1=CC=CC=C1)C(N)=O"
11 |       id="smiles"
12 |     />
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/nextjs/test.js:
--------------------------------------------------------------------------------
1 | import initRDKitModule from "@rdkit/rdkit";
2 | 
3 | let rdkit = await initRDKitModule();
4 | let smiles = "CC(=O)Oc1ccccc1C(=O)O";
5 | let mol = rdkit.get_mol(smiles);
6 | let descriptors = JSON.parse(mol.get_descriptors());
7 | console.log(descriptors);
8 | 


--------------------------------------------------------------------------------
/examples/node/README.md:
--------------------------------------------------------------------------------
 1 | # RDKit for Node.js Examples
 2 | 
 3 | The following sub-repository is dedicated to showcasing the functionalities of RDKit.js on the server-side in a Node.js environment.
 4 | 
 5 | ## Contributing
 6 | 
 7 | First, fork the RDKit.js GitHub repository and run the remaining instructions from your fork.
 8 | 
 9 | ### Dependencies
10 | 
11 | - Git
12 | - Node >= 14.x
13 | - Yarn 1.22.19
14 | 
15 | ### Installation and local development server
16 | 
17 | Run the following command to install the RDKit.js project.
18 | 
19 | ```bash
20 | git clone https://github.com/<name of your fork>/rdkit-js.git && \
21 | cd rdkit-js && \
22 | yarn install && \
23 | cd examples/node
24 | ```
25 | 
26 | You can now run all the available examples in this folder with the following command:
27 | 
28 | ```bash
29 | node examples/<name_of_the_example>.js
30 | ```
31 | 
32 | Example for the descriptors example would be:
33 | 
34 | ```bash
35 | node examples/descriptors_calculation.js
36 | ```
37 | 
38 | ### Contributing examples
39 | 
40 | All examples are written in the `./examples/node/examples` folder.
41 | 
42 | To add a new example, make sure to respect the following checklist:
43 | 
44 | 1. [ ] Start a new git branch from the master branch and give it a meaningful name
45 | 2. [ ] Create a new js file in the `./examples/node/examples`, give it a meaningful name, and implement your node example in this file.
46 | 3. [ ] Make sure you formatted your code with `npm run format`.
47 | 
48 | Refer to any other react example in `examples/node/examples` if you are unusure about any of the steps above.
49 | 
50 | Once you're done, make a pull request to the master branch of the main RDKit.js repository, and wait for the review!
51 | 


--------------------------------------------------------------------------------
/examples/node/examples/descriptors_calculation.js:
--------------------------------------------------------------------------------
1 | import initRDKitModule from "@rdkit/rdkit";
2 | 
3 | let rdkit = await initRDKitModule();
4 | let smiles = "CC(=O)Oc1ccccc1C(=O)O";
5 | let mol = rdkit.get_mol(smiles);
6 | let descriptors = JSON.parse(mol.get_descriptors());
7 | console.log(descriptors);
8 | 


--------------------------------------------------------------------------------
/examples/node/examples/drawing_molecules_constraints.js:
--------------------------------------------------------------------------------
 1 | import initRDKitModule from "@rdkit/rdkit";
 2 | 
 3 | let rdkit = await initRDKitModule();
 4 | let smiles = "c1cnc(C)nc1C(=O)O";
 5 | var mol = rdkit.get_mol(smiles);
 6 | var template = `
 7 |     Mrv2014 10192005332D          
 8 |   
 9 |     0  0  0     0  0            999 V3000
10 |   M  V30 BEGIN CTAB
11 |   M  V30 COUNTS 6 6 0 0 0
12 |   M  V30 BEGIN ATOM
13 |   M  V30 1 C -5.7917 2.5817 0 0
14 |   M  V30 2 N -7.1253 1.8117 0 0
15 |   M  V30 3 C -7.1253 0.2716 0 0
16 |   M  V30 4 C -5.7917 -0.4984 0 0
17 |   M  V30 5 C -4.458 0.2716 0 0
18 |   M  V30 6 N -4.458 1.8117 0 0
19 |   M  V30 END ATOM
20 |   M  V30 BEGIN BOND
21 |   M  V30 1 1 1 2
22 |   M  V30 2 2 2 3
23 |   M  V30 3 1 3 4
24 |   M  V30 4 2 4 5
25 |   M  V30 5 1 5 6
26 |   M  V30 6 2 1 6
27 |   M  V30 END BOND
28 |   M  V30 END CTAB
29 |   M  END
30 |   `;
31 | let qmol = RDKitModule.get_mol(template);
32 | mol.generate_aligned_coords(qmol, "");
33 | let tdetails = mol.get_substruct_match(qmol);
34 | let svg = mol.get_svg_with_highlights(tdetails);
35 | console.log(svg);
36 | 


--------------------------------------------------------------------------------
/examples/node/examples/drawing_molecules_options.js:
--------------------------------------------------------------------------------
 1 | import initRDKitModule from "@rdkit/rdkit";
 2 | 
 3 | let rdkit = await initRDKitModule();
 4 | let smiles = "CC(=O)Oc1ccccc1C(=O)O";
 5 | let mol = rdkit.get_mol(smiles);
 6 | let smarts = "O=C";
 7 | let qmol = rdkit.get_qmol(smarts);
 8 | 
 9 | let mdetails = {};
10 | mdetails["atoms"] = [0, 1, 10];
11 | mdetails["explicitMethyl"] = true;
12 | mdetails["addAtomIndices"] = true;
13 | mdetails["legend"] = "aspirin";
14 | 
15 | let mdetails2 = JSON.parse(mol.get_substruct_match(qmol));
16 | mdetails2["highlightColour"] = [1, 0, 1];
17 | mdetails2["legend"] = "aspirin";
18 | 
19 | let svg1 = mol.get_svg_with_highlights(JSON.stringify(mdetails));
20 | let svg2 = mol.get_svg_with_highlights(JSON.stringify(mdetails2));
21 | console.log(svg1);
22 | console.log(svg2);
23 | 


--------------------------------------------------------------------------------
/examples/node/examples/drawing_molecules_substructure.js:
--------------------------------------------------------------------------------
 1 | import initRDKitModule from "@rdkit/rdkit";
 2 | 
 3 | let rdkit = await initRDKitModule();
 4 | let smiles = "CC(=O)Oc1ccccc1C(=O)O";
 5 | let mol = rdkit.get_mol(smiles);
 6 | let smarts = "Oc1[c,n]cccc1";
 7 | let qmol = rdkit.get_qmol(smarts);
 8 | let mdetails = mol.get_substruct_match(qmol);
 9 | let svg = mol.get_svg_with_highlights(mdetails);
10 | console.log(svg);
11 | 


--------------------------------------------------------------------------------
/examples/node/examples/drawing_molecules_svg.js:
--------------------------------------------------------------------------------
1 | import initRDKitModule from "@rdkit/rdkit";
2 | 
3 | let rdkit = await initRDKitModule();
4 | let smiles = "CC(=O)Oc1ccccc1C(=O)O";
5 | let mol = rdkit.get_mol(smiles);
6 | let svg = mol.get_svg();
7 | console.log(svg);
8 | 


--------------------------------------------------------------------------------
/examples/node/examples/identifiers_generation.js:
--------------------------------------------------------------------------------
 1 | import initRDKitModule from "@rdkit/rdkit";
 2 | 
 3 | let rdkit = await initRDKitModule();
 4 | let smiles = "CC(=O)Oc1ccccc1C(=O)O";
 5 | let mol = rdkit.get_mol(smiles);
 6 | let identifiers = [
 7 |   "smiles",
 8 |   "cxsmiles",
 9 |   "inchi",
10 |   "inchikey",
11 |   "morgan_fp",
12 |   "pattern_fp",
13 |   "aromatic_form",
14 |   "kekule_form",
15 |   "molblock",
16 |   "v3Kmolblock"
17 | ];
18 | 
19 | identifiers.forEach((identifier) => {
20 |   let val =
21 |     identifier === "inchikey"
22 |       ? rdkit.get_inchikey_for_inchi(mol.get_inchi())
23 |       : mol[`get_${identifier}`]();
24 |   console.log(`${identifier}: ${val}`);
25 | });
26 | 


--------------------------------------------------------------------------------
/examples/node/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "type": "module",
3 |   "name": "node-examples"
4 | }
5 | 


--------------------------------------------------------------------------------
/examples/react/README.md:
--------------------------------------------------------------------------------
 1 | # RDKit for JavaScript (React Examples)
 2 | 
 3 | The following sub-repository is dedicated to showcasing a few examples using RDKit.js with [React.js](https://reactjs.org/).
 4 | 
 5 | The examples are live at [react.rdkitjs.com](https://www.react.rdkitjs.com).
 6 | 
 7 | If you didn't go through the plain javascript examples already, it is recommended to do so before going forward:
 8 | 
 9 | - [JavaScript Examples](https://github.com/rdkit/rdkit-js/tree/master/examples/javascript)
10 | 
11 | ## Contributing
12 | 
13 | First, fork the RDKit.js GitHub repository and run the remaining instructions from your fork.
14 | 
15 | ### Dependencies
16 | 
17 | - Git
18 | - Node >= 14.x
19 | - Yarn 1.22.19
20 | 
21 | ### Installation and local development server
22 | 
23 | Run the following command to install the RDKit.js project.
24 | 
25 | ```bash
26 | git clone https://github.com/<name of your fork>/rdkit-js.git && \
27 | cd rdkit-js && \
28 | yarn install
29 | ```
30 | 
31 | Once the project is installed, run the following command at the root of the RDKit.js repository to start the development server:
32 | 
33 | ```bash
34 | npm run react:start
35 | ```
36 | 
37 | You are now ready to develop.
38 | 
39 | ### Contributing examples
40 | 
41 | All React.js examples are written in the `./examples/react/examples` folder.
42 | 
43 | To add a new example, make sure to respect the following checklist:
44 | 
45 | 1. [ ] Start a new git branch from the master branch and give it a meaningful name
46 | 2. [ ] Create a new js file in the `./examples/react/examples`, give it a meaningful name, and implement your react example in this file.
47 | 3. [ ] Import your example component in `./examples/react/index.js` and add it at the end of the examples list already present in this file.
48 | 4. [ ] Reference your example in the SideNav.js component, again following the convention of other examples (this step will be removed in the future).
49 | 5. [ ] Make sure your example respects the styling conventions using [Bulma](https://bulma.io/)
50 | 6. [ ] Make sure you formatted your code with `npm run format`.
51 | 
52 | Refer to any other react example in `examples/react/examples` if you are unusure about any of the steps above.
53 | 
54 | Once you're done, make a pull request to the master branch of the main RDKit.js repository, and wait for the review!
55 | 


--------------------------------------------------------------------------------
/examples/react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@rdkit/react-examples",
 3 |   "version": "0.1.0",
 4 |   "homepage": "https://react.rdkitjs.com",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@rdkit/rdkit": "^2022.3.5-1.2.1",
 8 |     "@testing-library/jest-dom": "^6.1.4",
 9 |     "@testing-library/react": "^13.4.0",
10 |     "@testing-library/user-event": "^14.5.1",
11 |     "hex-rgb": "^5.0.0",
12 |     "lodash": "^4.17.21",
13 |     "react": "^18.2.0",
14 |     "react-collapsible": "^2.10.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-scripts": "5.0.1",
17 |     "react-syntax-highlighter": "^15.5.0",
18 |     "web-vitals": "^3.5.0"
19 |   },
20 |   "scripts": {
21 |     "start": "PORT=3005 react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject",
25 |     "format": "prettier -w ./src ./public/*.html"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "react-app",
30 |       "react-app/jest"
31 |     ]
32 |   },
33 |   "browserslist": {
34 |     "production": [
35 |       ">0.2%",
36 |       "not dead",
37 |       "not op_mini all"
38 |     ],
39 |     "development": [
40 |       "last 1 chrome version",
41 |       "last 1 firefox version",
42 |       "last 1 safari version"
43 |     ]
44 |   },
45 |   "devDependencies": {
46 |     "@creativebulma/bulma-collapsible": "^1.0.4",
47 |     "prettier": "^3.0.3",
48 |     "prop-types": "^15.8.1",
49 |     "raw-loader": "^4.0.2"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/examples/react/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/favicon.png


--------------------------------------------------------------------------------
/examples/react/public/logo-nobackground-1000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/logo-nobackground-1000.png


--------------------------------------------------------------------------------
/examples/react/public/logo-nobackground-200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/logo-nobackground-200.png


--------------------------------------------------------------------------------
/examples/react/public/logo-nobackground-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/logo-nobackground-500.png


--------------------------------------------------------------------------------
/examples/react/public/logo-normal-1000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/logo-normal-1000.png


--------------------------------------------------------------------------------
/examples/react/public/logo-normal-200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/logo-normal-200.png


--------------------------------------------------------------------------------
/examples/react/public/logo-normal-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/logo-normal-500.png


--------------------------------------------------------------------------------
/examples/react/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/react/public/rdkit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/rdkit.png


--------------------------------------------------------------------------------
/examples/react/public/rdkitjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/rdkitjs.png


--------------------------------------------------------------------------------
/examples/react/public/rdkitjs_cropped.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/rdkitjs_cropped.png


--------------------------------------------------------------------------------
/examples/react/public/rdkitjs_cropped_200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/react/public/rdkitjs_cropped_200.png


--------------------------------------------------------------------------------
/examples/react/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/examples/react/src/components/CodeExample/CodeExample.js:
--------------------------------------------------------------------------------
 1 | import SyntaxHighlighter from "react-syntax-highlighter";
 2 | import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 3 | import ReactCollapsible from "react-collapsible";
 4 | 
 5 | function CodeExample({ code, children }) {
 6 |   return (
 7 |     <>
 8 |       {children}
 9 |       <div className="container">
10 |         <ReactCollapsible
11 |           trigger={
12 |             <button className="button is-primary is-light is-large is-fullwidth">
13 |               See Code Example
14 |             </button>
15 |           }
16 |         >
17 |           <div className="container">
18 |             <SyntaxHighlighter language="javascript" style={a11yDark}>
19 |               {code}
20 |             </SyntaxHighlighter>
21 |           </div>
22 |         </ReactCollapsible>
23 |       </div>
24 |     </>
25 |   );
26 | }
27 | 
28 | export default CodeExample;
29 | 


--------------------------------------------------------------------------------
/examples/react/src/components/Introduction/Introduction.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | export default class Introduction extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div id="component-introduction" className="container">
 7 |         <section className="hero">
 8 |           <div className="hero-body">
 9 |             <p className="title">Introduction</p>
10 |             <p className="subtitle column is-two-thirds pl-0">
11 |               Welcome to RDKit.js for React. If you didn't do it already, we
12 |               first recommend to go through the{" "}
13 |               <a href="https://rdkitjs.com#drawing-molecules-all-options">
14 |                 JavaScript examples
15 |               </a>{" "}
16 |               for a low-level overview of the RDKit.js API.
17 |             </p>
18 |           </div>
19 |         </section>
20 |       </div>
21 |     );
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/react/src/components/MoleculeStructure/MoleculeStructure.css:
--------------------------------------------------------------------------------
1 | .molecule-structure-svg svg rect:first-of-type {
2 |   fill: transparent !important;
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/react/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | 
  3 | export default class NavBar extends Component {
  4 |   state = {
  5 |     burgerActive: false
  6 |   };
  7 |   render() {
  8 |     const brugerActiveClass = this.state.burgerActive ? " is-active" : "";
  9 | 
 10 |     return (
 11 |       <nav
 12 |         className="navbar has-shadow"
 13 |         style={{ padding: "12px 0" }}
 14 |         role="navigation"
 15 |         aria-label="main navigation"
 16 |       >
 17 |         <div className="navbar-brand" style={{ padding: "6px" }}>
 18 |           <a className="navbar-item" href="#/">
 19 |             <img alt="logo" src="/rdkitjs_cropped_200.png" />
 20 |           </a>
 21 | 
 22 |           <a
 23 |             role="button"
 24 |             className={`navbar-burger${brugerActiveClass}`}
 25 |             aria-label="menu"
 26 |             aria-expanded="false"
 27 |             data-target="navbarBasicExample"
 28 |             href="#/"
 29 |             onClick={() => {
 30 |               this.setState({ burgerActive: !this.state.burgerActive });
 31 |             }}
 32 |           >
 33 |             <span aria-hidden="true"></span>
 34 |             <span aria-hidden="true"></span>
 35 |             <span aria-hidden="true"></span>
 36 |           </a>
 37 |         </div>
 38 | 
 39 |         <div
 40 |           id="navbarBasicExample"
 41 |           className={`navbar-menu${brugerActiveClass}`}
 42 |         >
 43 |           <div className="navbar-start">
 44 |             <a
 45 |               className="navbar-item"
 46 |               href="https://github.com/rdkit/rdkit-js/tree/master/examples/javascript"
 47 |             >
 48 |               Source Code
 49 |             </a>
 50 |             <a className="navbar-item" href="https://docs.rdkitjs.com/">
 51 |               API Docs
 52 |             </a>
 53 |             <div className="navbar-item has-dropdown is-hoverable">
 54 |               <a className="navbar-link" href="#/">
 55 |                 {" "}
 56 |                 Examples{" "}
 57 |               </a>
 58 | 
 59 |               <div className="navbar-dropdown">
 60 |                 <a className="navbar-item" href="https://rdkitjs.com">
 61 |                   JavaScript
 62 |                 </a>
 63 |                 <a
 64 |                   className="navbar-item is-active"
 65 |                   href="https://react.rdkitjs.com"
 66 |                 >
 67 |                   React
 68 |                 </a>
 69 |                 <a className="navbar-item" href="https://vue.rdkitjs.com">
 70 |                   Vue
 71 |                 </a>
 72 |                 <a className="navbar-item" href="https://angular.rdkitjs.com">
 73 |                   Angular
 74 |                 </a>
 75 |                 <hr className="navbar-divider" />
 76 |                 <a
 77 |                   className="navbar-item"
 78 |                   href="https://github.com/rdkit/rdkit-js#contributing"
 79 |                 >
 80 |                   Contribute
 81 |                 </a>
 82 |               </div>
 83 |             </div>
 84 |           </div>
 85 | 
 86 |           <div className="navbar-end">
 87 |             <div className="navbar-item">
 88 |               <div className="buttons">
 89 |                 <a
 90 |                   data-tooltip="Go to main RDKit project"
 91 |                   className="button has-tooltip-bottom is-white is-big"
 92 |                   href="https://github.com/rdkit/rdkit"
 93 |                 >
 94 |                   <span className="icon">
 95 |                     <img alt="RDKit Logo" src="/rdkit.png" />
 96 |                   </span>
 97 |                 </a>
 98 |               </div>
 99 |             </div>
100 |             <div className="navbar-item">
101 |               <div className="buttons">
102 |                 <a
103 |                   data-tooltip="Go to RDKit.js"
104 |                   className="button has-tooltip-bottom is-white is-big"
105 |                   href="https://github.com/rdkit/rdkit-js"
106 |                 >
107 |                   <span className="icon">
108 |                     <i className="fab fa-github fa-2x"></i>
109 |                   </span>
110 |                 </a>
111 |               </div>
112 |             </div>
113 |             <div className="navbar-item">
114 |               <div className="buttons mr-6">
115 |                 <a
116 |                   data-tooltip="Go to NPM package"
117 |                   className="button has-tooltip-bottom is-white is-big"
118 |                   href="https://www.npmjs.com/package/@rdkit/rdkit"
119 |                 >
120 |                   <span className="icon">
121 |                     <i className="fab fa-npm fa-2x"></i>
122 |                   </span>
123 |                 </a>
124 |               </div>
125 |             </div>
126 |           </div>
127 |         </div>
128 |       </nav>
129 |     );
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/examples/react/src/components/SideNav/SideNav.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | 
  3 | export default class SideNav extends Component {
  4 |   state = {
  5 |     activeLink: "#component-introduction"
  6 |   };
  7 | 
  8 |   componentDidMount() {
  9 |     if (window.location.hash.length > 1) {
 10 |       this.setState({ activeLink: window.location.hash });
 11 |     }
 12 |   }
 13 | 
 14 |   render() {
 15 |     const sections = [
 16 |       {
 17 |         name: "General",
 18 |         children: [
 19 |           {
 20 |             id: "#component-introduction",
 21 |             name: "Introduction"
 22 |           },
 23 |           {
 24 |             id: "#component-example-list",
 25 |             name: "Overview"
 26 |           }
 27 |         ]
 28 |       },
 29 |       {
 30 |         name: "Components",
 31 |         children: [
 32 |           {
 33 |             id: "#component-example-moleculestructure",
 34 |             name: "MoleculeStructure"
 35 |           }
 36 |         ]
 37 |       },
 38 |       {
 39 |         name: "Examples",
 40 |         children: [
 41 |           {
 42 |             id: "#component-example-svg",
 43 |             name: "SVG Rendering"
 44 |           },
 45 |           {
 46 |             id: "#component-example-canvas",
 47 |             name: "Canvas Rendering"
 48 |           },
 49 |           {
 50 |             id: "#component-example-substruct",
 51 |             name: "Substructure Highlighting"
 52 |           },
 53 |           {
 54 |             id: "#component-example-multi-substruct",
 55 |             name: "Multi-Substructure Highlighting"
 56 |           },
 57 |           {
 58 |             id: "#component-example-substruct-search",
 59 |             name: "Substructure Search"
 60 |           },
 61 |           {
 62 |             id: "#component-example-drawing-options",
 63 |             name: "Additional Options"
 64 |           }
 65 |         ]
 66 |       },
 67 |       {
 68 |         name: "Other",
 69 |         children: [
 70 |           {
 71 |             id: "#other-examples-vanilla-js",
 72 |             name: "JavaScript Examples"
 73 |           },
 74 |           {
 75 |             id: "#other-examples-vue",
 76 |             name: "Vue Examples"
 77 |           },
 78 |           {
 79 |             id: "#other-examples-angular",
 80 |             name: "Angular Examples"
 81 |           },
 82 |           {
 83 |             id: "#other-examples-legacy",
 84 |             name: "Legacy Examples"
 85 |           }
 86 |         ]
 87 |       }
 88 |     ];
 89 | 
 90 |     const renderedSections = sections.map((section) => (
 91 |       <React.Fragment key={section.name}>
 92 |         <p className="menu-label">{section.name}</p>
 93 |         <ul className="menu-list">
 94 |           {section.children.map((child) => (
 95 |             <li key={child.id}>
 96 |               <a
 97 |                 href={child.id}
 98 |                 className={
 99 |                   this.state.activeLink === child.id ? "is-active" : undefined
100 |                 }
101 |                 onClick={() => this.setState({ activeLink: child.id })}
102 |               >
103 |                 {child.name}
104 |               </a>
105 |             </li>
106 |           ))}
107 |         </ul>
108 |       </React.Fragment>
109 |     ));
110 | 
111 |     return renderedSections;
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleCanvas.js:
--------------------------------------------------------------------------------
 1 | import MoleculeStructure from "../components/MoleculeStructure/MoleculeStructure";
 2 | 
 3 | function ExampleCanvas() {
 4 |   const caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
 5 |   const aspirin = "CC(=O)Oc1ccccc1C(=O)O";
 6 | 
 7 |   return (
 8 |     <div id="component-example-canvas" className="container">
 9 |       <section className="hero">
10 |         <div className="hero-body">
11 |           <p className="title">Canvas rendering</p>
12 |           <p className="subtitle">
13 |             You can also render molecules using the HTML Canvas API.
14 |           </p>
15 |         </div>
16 |       </section>
17 |       <div className="columns is-desktop">
18 |         <div className="column">
19 |           <MoleculeStructure
20 |             id="structure-example-canvas-caffeine"
21 |             structure={caffeine}
22 |             width={350}
23 |             height={300}
24 |           />
25 |         </div>
26 |         <div className="column">
27 |           <MoleculeStructure
28 |             id="structure-example-canvas-aspirin"
29 |             structure={aspirin}
30 |             width={350}
31 |             height={300}
32 |           />
33 |         </div>
34 |       </div>
35 |     </div>
36 |   );
37 | }
38 | 
39 | export default ExampleCanvas;
40 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleList.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import MoleculeStructure from "../components/MoleculeStructure/MoleculeStructure";
 3 | import { SMILES_LIST } from "../utils/smiles";
 4 | 
 5 | class ExampleList extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <div id="component-example-list" className="container">
 9 |         <section className="hero">
10 |           <div className="hero-body">
11 |             <p className="title">Overview</p>
12 |             <p className="subtitle">
13 |               You can draw any molecule from SMILES dynamically with RDKit.js .
14 |             </p>
15 |           </div>
16 |         </section>
17 |         <div
18 |           id="structure-list"
19 |           className="columns is-desktop"
20 |           style={{ margin: "12px", overflowX: "scroll" }}
21 |         >
22 |           {SMILES_LIST.map((smiles) => (
23 |             <div className="column" key={smiles}>
24 |               <MoleculeStructure
25 |                 id={smiles}
26 |                 structure={smiles}
27 |                 height={200}
28 |                 width={200}
29 |                 svgMode
30 |               />
31 |             </div>
32 |           ))}
33 |         </div>
34 |       </div>
35 |     );
36 |   }
37 | }
38 | 
39 | export default ExampleList;
40 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleMoleculeStructure.js:
--------------------------------------------------------------------------------
 1 | function ExampleMoleculeStructure() {
 2 |   return (
 3 |     <div id="component-example-moleculestructure" className="container">
 4 |       <section className="hero">
 5 |         <div className="hero-body">
 6 |           <p className="title">MoleculeStructure</p>
 7 |           <p className="subtitle">
 8 |             The examples below will mostly use the React component{" "}
 9 |             <code className="is-family-code">MoleculeStructure</code> to render
10 |             the examples. You can see the React implementation in the code
11 |             below.
12 |           </p>
13 |         </div>
14 |       </section>
15 |     </div>
16 |   );
17 | }
18 | 
19 | export default ExampleMoleculeStructure;
20 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleMultiSubstructure.js:
--------------------------------------------------------------------------------
 1 | import MoleculeStructure from "../components/MoleculeStructure/MoleculeStructure";
 2 | 
 3 | function ExampleMultiSubstructure() {
 4 |   const caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
 5 |   const caffeineSubStruct = "[N,n,o,O]";
 6 | 
 7 |   const aspirin = "CC(=O)Oc1ccccc1C(=O)O";
 8 |   const aspirinSubStruct = "[O,o].c1ccccc1";
 9 | 
10 |   return (
11 |     <div id="component-example-multi-substruct" className="container">
12 |       <section className="hero">
13 |         <div className="hero-body">
14 |           <p className="title">Multi-substructure Highlight</p>
15 |           <p className="subtitle">
16 |             You can also highlight multiple substructures of molecules with
17 |             SMILES, SMARTS and a combination of the two with dot notation.
18 |           </p>
19 |         </div>
20 |       </section>
21 |       <div className="columns is-desktop">
22 |         <div className="column">
23 |           <MoleculeStructure
24 |             id="structure-example-multisubstruct-svg-caffeine"
25 |             structure={caffeine}
26 |             subStructure={caffeineSubStruct}
27 |             width={350}
28 |             height={300}
29 |             svgMode
30 |           />
31 |         </div>
32 |         <div className="column">
33 |           <MoleculeStructure
34 |             id="structure-example-multisubsctruct-canvas-aspirin"
35 |             structure={aspirin}
36 |             subStructure={aspirinSubStruct}
37 |             width={350}
38 |             height={300}
39 |           />
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 
46 | export default ExampleMultiSubstructure;
47 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleSubstructure.js:
--------------------------------------------------------------------------------
 1 | import MoleculeStructure from "../components/MoleculeStructure/MoleculeStructure";
 2 | 
 3 | function ExampleSubstructure() {
 4 |   const caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
 5 |   const caffeineSubStruct = "[N,n,O;!H0]";
 6 | 
 7 |   const aspirin = "CC(=O)Oc1ccccc1C(=O)O";
 8 |   const aspirinSubStruct = "CC(=O)Oc1ccccc1C";
 9 | 
10 |   return (
11 |     <div id="component-example-substruct" className="container">
12 |       <section className="hero">
13 |         <div className="hero-body">
14 |           <p className="title">Substructure Highlight</p>
15 |           <p className="subtitle">
16 |             You can also highlight substructure of molecules with both the SVG
17 |             and Canvas APIs.
18 |           </p>
19 |         </div>
20 |       </section>
21 |       <div className="columns is-desktop">
22 |         <div className="column">
23 |           <MoleculeStructure
24 |             id="structure-example-substruct-svg-caffeine"
25 |             structure={caffeine}
26 |             subStructure={caffeineSubStruct}
27 |             width={350}
28 |             height={300}
29 |             svgMode
30 |           />
31 |         </div>
32 |         <div className="column">
33 |           <MoleculeStructure
34 |             id="structure-example-subsctruct-canvas-aspirin"
35 |             structure={aspirin}
36 |             subStructure={aspirinSubStruct}
37 |             width={350}
38 |             height={300}
39 |           />
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 
46 | export default ExampleSubstructure;
47 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleSubstructureSearch.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import _ from "lodash";
  3 | import MoleculeStructure from "../components/MoleculeStructure/MoleculeStructure";
  4 | import { SMILES_LIST } from "../utils/smiles";
  5 | 
  6 | class ExampleList extends React.Component {
  7 |   state = {
  8 |     matches: SMILES_LIST,
  9 |     searchValue: "",
 10 |     searching: false
 11 |   };
 12 | 
 13 |   render() {
 14 |     const matches = this.state.matches.slice(0, 50);
 15 |     return (
 16 |       <div id="component-example-substruct-search" className="container">
 17 |         <section className="hero">
 18 |           <div className="hero-body">
 19 |             <p className="title">Substructure match</p>
 20 |             <p className="subtitle">
 21 |               You can perform client-side substructure match.
 22 |             </p>
 23 |           </div>
 24 |         </section>
 25 |         <div className="columns" style={{ margin: "12px 0" }}>
 26 |           <div className="column">
 27 |             <div className="field">
 28 |               <div className="control has-icons-left">
 29 |                 <input
 30 |                   className="input"
 31 |                   type="email"
 32 |                   onChange={(e) => this.handleSearchChange(e)}
 33 |                   placeholder="Enter a SMARTS or SMILES string here..."
 34 |                 />
 35 |                 {this.renderInputIcon()}
 36 |               </div>
 37 |             </div>
 38 |           </div>
 39 |         </div>
 40 |         <div className="columns is-multiline" style={{ margin: "12px" }}>
 41 |           {matches.length > 0
 42 |             ? matches.slice(0, 40).map((smiles) => (
 43 |                 <div className="column" key={smiles}>
 44 |                   <MoleculeStructure
 45 |                     id={smiles}
 46 |                     structure={smiles}
 47 |                     subStructure={this.state.searchValue}
 48 |                     height={200}
 49 |                     width={200}
 50 |                     svgMode
 51 |                   />
 52 |                 </div>
 53 |               ))
 54 |             : "Input is either invalid or no matches were found."}
 55 |         </div>
 56 |       </div>
 57 |     );
 58 |   }
 59 | 
 60 |   handleSearchChange = _.debounce((e) => {
 61 |     this.setState({ searching: true });
 62 | 
 63 |     setTimeout(() => {
 64 |       const noMatchLength = 2;
 65 |       const currentVal = e.target.value;
 66 |       this.setState({ searchValue: currentVal });
 67 |       if (!currentVal) {
 68 |         this.setState({ matches: SMILES_LIST.slice(), searching: false });
 69 |       } else {
 70 |         const qmol = window.RDKit.get_qmol(currentVal);
 71 |         if (!this.isValidMol(qmol)) {
 72 |           this.setState({ matches: [], searching: false });
 73 |         } else {
 74 |           const matches = SMILES_LIST.filter((smiles) => {
 75 |             const mol = window.RDKit.get_mol(smiles);
 76 |             const hasMatch = mol.get_substruct_match(qmol).length > noMatchLength;
 77 |             mol?.delete();
 78 |             return hasMatch;
 79 |           });
 80 |           this.setState({ matches, searching: false });
 81 |           qmol?.delete();
 82 |         }
 83 |       }
 84 |     }, 100);
 85 |   }, 300);
 86 | 
 87 |   renderInputIcon() {
 88 |     if (this.state.searching) {
 89 |       return (
 90 |         <span key="searching-input-icon" className="icon is-small is-left">
 91 |           <i className="fas fa-circle-notch fa-spin" />
 92 |         </span>
 93 |       );
 94 |     } else {
 95 |       return (
 96 |         <span key="search-input-icon" className="icon is-small is-left">
 97 |           <i className="fas fa-search" />
 98 |         </span>
 99 |       );
100 |     }
101 |   }
102 | 
103 |   isValidMol(qmolOrMol) {
104 |     return !!qmolOrMol;
105 |   }
106 | }
107 | 
108 | export default ExampleList;
109 | 


--------------------------------------------------------------------------------
/examples/react/src/examples/ExampleSvg.js:
--------------------------------------------------------------------------------
 1 | import MoleculeStructure from "../components/MoleculeStructure/MoleculeStructure";
 2 | 
 3 | function ExampleSVG() {
 4 |   const caffeine = "CN1C=NC2=C1C(=O)N(C(=O)N2C)";
 5 |   const aspirin = "CC(=O)Oc1ccccc1C(=O)O";
 6 | 
 7 |   return (
 8 |     <div id="component-example-svg" className="container">
 9 |       <section className="hero">
10 |         <div className="hero-body">
11 |           <p className="title">SVG Rendering</p>
12 |           <p className="subtitle">You can render molecules using svg.</p>
13 |         </div>
14 |       </section>
15 |       <div className="columns is-desktop">
16 |         <div className="column">
17 |           <MoleculeStructure
18 |             id="structure-example-svg-caffeine"
19 |             structure={caffeine}
20 |             width={350}
21 |             height={300}
22 |             svgMode
23 |           />
24 |         </div>
25 |         <div className="column">
26 |           <MoleculeStructure
27 |             id="structure-example-svg-aspirin"
28 |             structure={aspirin}
29 |             width={350}
30 |             height={300}
31 |             svgMode
32 |           />
33 |         </div>
34 |       </div>
35 |     </div>
36 |   );
37 | }
38 | 
39 | export default ExampleSVG;
40 | 


--------------------------------------------------------------------------------
/examples/react/src/index.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |   height: 100%;
 5 |   scroll-behavior: smooth;
 6 | }
 7 | #app {
 8 |   min-height: 100%;
 9 | }
10 | @media screen and (max-width: 768px) {
11 |   #menu-toggle:checked + .nav-menu {
12 |     display: block;
13 |   }
14 | }
15 | 
16 | /**
17 | * Change default scrollbar style
18 | * source: https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg
19 | */
20 | ::-webkit-scrollbar {
21 |   width: 20px;
22 |   height: 20px;
23 | }
24 | 
25 | ::-webkit-scrollbar-track {
26 |   background-color: transparent;
27 | }
28 | 
29 | ::-webkit-scrollbar-thumb {
30 |   background-color: #d6dee1;
31 |   border-radius: 20px;
32 |   border: 6px solid transparent;
33 |   background-clip: content-box;
34 | }
35 | 
36 | ::-webkit-scrollbar-thumb:hover {
37 |   background-color: #a8bbbf;
38 | }
39 | 
40 | code {
41 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
42 |     monospace;
43 | }
44 | 


--------------------------------------------------------------------------------
/examples/react/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import Introduction from "./components/Introduction/Introduction";
 4 | import CodeExample from "./components/CodeExample/CodeExample";
 5 | import NavBar from "./components/NavBar/NavBar";
 6 | import SideNav from "./components/SideNav/SideNav";
 7 | import ExampleMoleculeStructure from "./examples/ExampleMoleculeStructure";
 8 | import ExampleSubstructure from "./examples/ExampleSubstructure";
 9 | import ExampleMultiSubstructure from "./examples/ExampleMultiSubstructure";
10 | import ExampleSubstructureSearch from "./examples/ExampleSubstructureSearch";
11 | import ExampleSVG from "./examples/ExampleSvg";
12 | import ExampleCanvas from "./examples/ExampleCanvas";
13 | import ExampleDrawingOptions from "./examples/ExampleDrawingOptions";
14 | import ExampleList from "./examples/ExampleList";
15 | /* eslint import/no-webpack-loader-syntax: off */
16 | import MoleculeStructureCode from "!!raw-loader!./components/MoleculeStructure/MoleculeStructure";
17 | import ExampleSVGCode from "!!raw-loader!./examples/ExampleSvg.js";
18 | import ExampleCanvasCode from "!!raw-loader!./examples/ExampleCanvas.js";
19 | import ExampleSubstructureCode from "!!raw-loader!./examples/ExampleSubstructure.js";
20 | import ExampleMultiSubstructureCode from "!!raw-loader!./examples/ExampleMultiSubstructure.js";
21 | import ExampleDrawingOptionsCode from "!!raw-loader!./examples/ExampleDrawingOptions.js";
22 | import ExampleSubstructureSearchCode from "!!raw-loader!./examples/ExampleSubstructureSearch";
23 | import ExampleListCode from "!!raw-loader!./examples/ExampleList.js";
24 | import "./index.css";
25 | 
26 | const navbar = ReactDOM.createRoot(document.getElementById("navbar"));
27 | navbar.render(<NavBar />);
28 | 
29 | const sidenav = ReactDOM.createRoot(document.getElementById("side-navigation"));
30 | sidenav.render(<SideNav />);
31 | 
32 | const intro = ReactDOM.createRoot(document.getElementById("introduction"));
33 | intro.render(<Introduction />);
34 | 
35 | const examples = [
36 |   {
37 |     code: ExampleListCode,
38 |     component: <ExampleList />,
39 |     elementId: "example-list"
40 |   },
41 |   {
42 |     code: MoleculeStructureCode,
43 |     component: <ExampleMoleculeStructure />,
44 |     elementId: "example-mol-structure"
45 |   },
46 |   {
47 |     code: ExampleSVGCode,
48 |     component: <ExampleSVG />,
49 |     elementId: "example-svg"
50 |   },
51 |   {
52 |     code: ExampleCanvasCode,
53 |     component: <ExampleCanvas />,
54 |     elementId: "example-canvas"
55 |   },
56 |   {
57 |     code: ExampleSubstructureCode,
58 |     component: <ExampleSubstructure />,
59 |     elementId: "example-substructures"
60 |   },
61 |   {
62 |     code: ExampleMultiSubstructureCode,
63 |     component: <ExampleMultiSubstructure />,
64 |     elementId: "example-multi-substructures"
65 |   },
66 |   {
67 |     code: ExampleDrawingOptionsCode,
68 |     component: <ExampleDrawingOptions />,
69 |     elementId: "example-all-options"
70 |   },
71 |   {
72 |     code: ExampleSubstructureSearchCode,
73 |     component: <ExampleSubstructureSearch />,
74 |     elementId: "example-substructure-search"
75 |   }
76 | ];
77 | 
78 | examples.forEach((example) => {
79 |   ReactDOM.createRoot(document.getElementById(example.elementId)).render(
80 |     <CodeExample code={example.code}>{example.component}</CodeExample>
81 |   );
82 | });
83 | 


--------------------------------------------------------------------------------
/examples/react/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = (onPerfEntry) => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/examples/react/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom";
6 | 


--------------------------------------------------------------------------------
/examples/react/src/utils/initRDKit.js:
--------------------------------------------------------------------------------
 1 | const initRDKit = (() => {
 2 |   let rdkitLoadingPromise;
 3 | 
 4 |   return () => {
 5 |     /**
 6 |      * Utility function ensuring there's only one call made to load RDKit
 7 |      * It returns a promise with the resolved RDKit API as value on success,
 8 |      * and a rejected promise with the error on failure.
 9 |      *
10 |      * The RDKit API is also attached to the global object on successful load.
11 |      */
12 |     if (!rdkitLoadingPromise) {
13 |       rdkitLoadingPromise = new Promise((resolve, reject) => {
14 |         window
15 |           .initRDKitModule()
16 |           .then((RDKit) => {
17 |             window.RDKit = RDKit;
18 |             resolve(RDKit);
19 |           })
20 |           .catch((e) => {
21 |             reject();
22 |           });
23 |       });
24 |     }
25 | 
26 |     return rdkitLoadingPromise;
27 |   };
28 | })();
29 | 
30 | export default initRDKit;
31 | 


--------------------------------------------------------------------------------
/examples/react/src/utils/smiles.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Taken from https://github.com/reymond-group/smilesDrawer/blob/master/example/drugbank.js
 3 |  */
 4 | 
 5 | export const SMILES_LIST = [
 6 |   "CC[C@H](C)[C@H](NC(=O)[C@H](CCC(O)=O)NC(=O)[C@H](CCC(O)=O)NC(=O)[C@H](CC1=CC=CC=C1)NC(=O)[C@H](CC(O)=O)NC(=O)CNC(=O)[C@H](CC(N)=O)NC(=O)CNC(=O)CNC(=O)CNC(=O)CNC(=O)[C@@H]1CCCN1C(=O)[C@H](CCCNC(N)=N)NC(=O)[C@@H]1CCCN1C(=O)[C@H](N)CC1=CC=CC=C1)C(=O)N1CCC[C@H]1C(=O)N[C@@H](CCC(O)=O)C(=O)N[C@@H](CCC(O)=O)C(=O)N[C@@H](CC1=CC=C(O)C=C1)C(=O)N[C@@H](CC(C)C)C(O)=O",
 7 |   "CC(C)C[C@H](NC(=O)[C@@H](COC(C)(C)C)NC(=O)[C@H](CC1=CC=C(O)C=C1)NC(=O)[C@H](CO)NC(=O)[C@H](CC1=CNC2=CC=CC=C12)NC(=O)[C@H](CC1=CN=CN1)NC(=O)[C@@H]1CCC(=O)N1)C(=O)N[C@@H](CCCN=C(N)N)C(=O)N1CCC[C@H]1C(=O)NNC(N)=O",
 8 |   "NC(=O)CC[C@@H]1NC(=O)[C@H](CC2=CC=CC=C2)NC(=O)[C@H](CC2=CC=C(O)C=C2)NC(=O)CCSSC[C@H](NC(=O)[C@H](CC(N)=O)NC1=O)C(=O)N1CCC[C@H]1C(=O)N[C@@H](CCCNC(N)=N)C(=O)NCC(N)=O",
 9 |   "CC(C)C[C@H](NC(=O)[C@@H](CCCNC(N)=O)NC(=O)[C@H](CC1=CC=C(O)C=C1)NC(=O)[C@H](CO)NC(=O)[C@@H](CC1=CN=CC=C1)NC(=O)[C@@H](CC1=CC=C(Cl)C=C1)NC(=O)[C@@H](CC1=CC2=CC=CC=C2C=C1)NC(C)=O)C(=O)N[C@@H](CCCNC(N)=N)C(=O)N1CCC[C@H]1C(=O)N[C@H](C)C(N)=O",
10 |   "CC[C@@H]1NC(=O)[C@H]([C@H](O)[C@H](C)CC=CC)N(C)C(=O)[C@H](C(C)C)N(C)C(=O)[C@H](CC(C)C)N(C)C(=O)[C@H](CC(C)C)N(C)C(=O)[C@@H](C)NC(=O)[C@H](C)NC(=O)[C@H](CC(C)C)N(C)C(=O)[C@@H](NC(=O)[C@H](CC(C)C)N(C)C(=O)CN(C)C1=O)C(C)C",
11 |   "NCCCC[C@H](NC(=O)[C@@H]1CCCN1C(=O)[C@@H]1CSSC[C@H](N)C(=O)N[C@@H](CC2=CC=CC=C2)C(=O)N[C@@H](CC2=CC=CC=C2)C(=O)N[C@@H](CCC(N)=O)C(=O)N[C@@H](CC(N)=O)C(=O)N1)C(=O)NCC(N)=O",
12 |   "[H][C@]1(NC(=O)[C@H](CCCCN)NC(=O)[C@@H](CC2=CNC3=C2C=CC=C3)NC(=O)[C@H](CC2=CC=CC=C2)NC(=O)[C@H](CSSC[C@H](NC1=O)C(=O)N[C@H](CO)[C@@H](C)O)NC(=O)[C@H](N)CC1=CC=CC=C1)[C@@H](C)O",
13 |   "OC[C@H]1O[C@@H]([C@H](O)[C@@H]1OP(O)(=O)O[C@]([H])(C)CNC(=O)CC[C@]1(C)[C@@H](CC(=O)N)[C@@]2([H])N([Co]C#N)C1=C(C)/C1=N/C(=CC3=NC(=C(C)/C4=N[C@]2(C)[C@@](C)(CC(=O)N)[C@@H]4CCC(=O)N)[C@@](C)(CC(=O)N)[C@@H]3CCC(=O)N)/C(C)(C)[C@@H]1CCC(=O)N)N1C=NC2=CC(C)=C(C)C=C12",
14 |   "C[C@H](CCCC(C)(C)O)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)C[C@H](O)C1=C",
15 |   "CC(C=CC=C(/C)C=CC1C(C)=CC(O)CC1(C)C)=C/C=C/C=C(C)/C=C/C=C(C)/C=C/C1=C(C)CC(O)CC1(C)C",
16 |   "C[C@H](CCCC(C)(C)O)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
17 |   "CC(C)[C@@H](C)C=C[C@@H](C)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
18 |   "NC(=O)C1=CN(C=CC1)[C@@H]1O[C@H](CO[P@](O)(=O)O[P@](O)(=O)OC[C@H]2O[C@H]([C@H](O)[C@@H]2O)N2C=NC3=C(N)N=CN=C23)[C@@H](O)[C@H]1O",
19 |   "CC(C)CCC[C@@H](C)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
20 |   "NC1=NC=NC2=C1N=CN2[C@@H]1O[C@H](COP(O)(=O)OP(O)(=O)OP(O)(O)=O)[C@@H](O)[C@H]1O",
21 |   "[H][C@]12[C@H](C[C@H](O)C=C1C=C[C@H](C)[C@@H]2CC[C@@H](O)C[C@@H](O)CC(O)=O)OC(=O)[C@@H](C)CC",
22 |   "[H][C@@]12CCC[C@]1([H])N([C@@H](C2)C(O)=O)C(=O)[C@H](C)N[C@@H](CCC1=CC=CC=C1)C(=O)OCC",
23 |   "[H][C@@]12C[C@@]3([H])[C@]4([H])C[C@H](F)C5=CC(=O)C=C[C@]5(C)[C@@]4([H])[C@@H](O)C[C@]3(C)[C@@]1(OC(C)(C)O2)C(=O)CO",
24 |   "CSCC[C@H](NC(=O)[C@H](CC1=CNC2=C1C=CC=C2)NC(=O)CCNC(=O)OC(C)(C)C)C(=O)N[C@@H](CC(O)=O)C(=O)N[C@@H](CC1=CC=CC=C1)C(N)=O",
25 |   "CC[C@H]1OC(=O)[C@H](C)[C@@H](O[C@H]2C[C@@](C)(OC)[C@@H](O)[C@H](C)O2)[C@H](C)[C@@H](O[C@@H]2O[C@H](C)C[C@@H]([C@H]2O)N(C)C)[C@](C)(O)C[C@@H](C)C(=O)[C@H](C)[C@@H](O)[C@]1(C)O",
26 |   "[H]O[Co+]N1C2=C(C)/C3=N/C(=CC4=NC(=C(C)/C5=N[C@@](C)([C@@]1([H])[C@H](CC(=O)N)[C@@]2(C)CCC(=O)NC[C@@H](C)OP(=O)([O-])O[C@H]1[C@@H](O)[C@H](O[C@@H]1CO)N1C=NC2=CC(C)=C(C)C=C12)[C@@](C)(CC(N)=O)[C@@H]5CCC(=O)N)[C@@](C)(CC(=O)N)[C@@H]4CCC(=O)N)/C(C)(C)[C@@H]3CCC(=O)N"
27 | ];
28 | 


--------------------------------------------------------------------------------
/examples/vue/README.md:
--------------------------------------------------------------------------------
 1 | # RDKit for JavaScript (Vue Examples)
 2 | 
 3 | The following sub-repository is dedicated to showcasing a few examples using RDKit.js with [Vue.js](https://vuejs.org/).
 4 | 
 5 | The examples use Vue 3 with Typescript, utilizing the Vue's Composition API and Single-File Component features.
 6 | 
 7 | If you didn't go through the plain javascript examples already, it is recommended to do so before going forward:
 8 | 
 9 | - [JavaScript Examples](https://github.com/rdkit/rdkit-js/tree/master/examples/javascript)
10 | 
11 | ## Contributing
12 | 
13 | First, fork the RDKit.js GitHub repository and run the remaining instructions from your fork.
14 | 
15 | ### Dependencies
16 | 
17 | - Git
18 | - Node >= 14.x
19 | - Yarn 1.22.19
20 | 
21 | ### Installation and local development server
22 | 
23 | Run the following command to install the RDKit.js project.
24 | 
25 | ```bash
26 | git clone https://github.com/<name of your fork>/rdkit-js.git && \
27 | cd rdkit-js && \
28 | yarn install
29 | ```
30 | 
31 | Once the project is installed, run the following command at the root of the RDKit.js repository to start the development server:
32 | 
33 | ```bash
34 | npm run dev
35 | ```
36 | 
37 | You are now ready to develop.
38 | 
39 | ### Contributing examples
40 | 
41 | All Vue.js examples are written in the `./examples/vue/components/examples` folder.
42 | 
43 | To add a new example, make sure to respect the following checklist:
44 | 
45 | 1. [ ] Start a new git branch from the master branch and give it a meaningful name
46 | 2. [ ] Create a new .vue file in the `./examples/vue/components/examples`, give it a meaningful name, and implement your Vue example in this file.
47 | 3. [ ] Import your example component in `./examples/vue/App.vue` and add it at the end of the examples list already present in this file.
48 | 4. [ ] Reference your example in the SideNav.vue component, again following the convention of other examples (this step will be removed in the future).
49 | 5. [ ] Make sure your example respects the styling conventions using [Bulma](https://bulma.io/)
50 | 6. [ ] Make sure you formatted your code with `npm run format`.
51 | 
52 | Refer to any other Vue example in `examples/vue/components/examples` if you are unusure about any of the steps above.
53 | 
54 | Once you're done, make a pull request to the master branch of the main RDKit.js repository, and wait for the review!
55 | 


--------------------------------------------------------------------------------
/examples/vue/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta name="description" content="Web site created using vite@latest" />
 8 |     <title>RDKit.js - Vue + TS example</title>
 9 |     <!-- Load the script needed for RDKit module initialization -->
10 |     <script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>
11 |     <!-- Load fonts -->
12 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
13 |     <!-- Load Bulma.io CSS framework and extensions -->
14 |     <link
15 |       rel="stylesheet"
16 |       href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"
17 |     />
18 |     <link
19 |       rel="stylesheet"
20 |       href="https://unpkg.com/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css"
21 |     />
22 |   </head>
23 |   <body>
24 |     <noscript>You need to enable JavaScript to run this app.</noscript>
25 |     <div id="app"></div>
26 |     <script type="module" src="/src/main.ts"></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/examples/vue/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc --noEmit && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@highlightjs/vue-plugin": "^2.1.0",
13 |     "debounce": "^1.2.1",
14 |     "highlight.js": "^11.8.0",
15 |     "vue": "^3.2.37"
16 |   },
17 |   "devDependencies": {
18 |     "@types/debounce": "^1.2.1",
19 |     "@vitejs/plugin-vue": "^3.2.0",
20 |     "typescript": "^4.8.4",
21 |     "vite": "^3.2.7",
22 |     "vue-tsc": "^1.8.8"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/vue/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/vue/public/favicon.png


--------------------------------------------------------------------------------
/examples/vue/public/rdkit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/vue/public/rdkit.png


--------------------------------------------------------------------------------
/examples/vue/public/rdkitjs_cropped_200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/examples/vue/public/rdkitjs_cropped_200.png


--------------------------------------------------------------------------------
/examples/vue/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/examples/vue/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- Try to stick as close to the react example design as possible -->
  3 |   <div id="app">
  4 |     <div id="navbar">
  5 |       <!-- Put navbar component here -->
  6 |       <NavBar />
  7 |     </div>
  8 |     <section id="page-content" class="main-content columns is-fullheight mt-0">
  9 |       <aside
 10 |         id="side-navigation"
 11 |         class="menu has-background-white-bis is-narrow-mobile is-fullheight section is-hidden-mobile"
 12 |       >
 13 |         <!-- Put side navigation component here -->
 14 |         <SideNav />
 15 |       </aside>
 16 |       <div class="container column is-10">
 17 |         <!-- Put main components here -->
 18 |         <Introduction />
 19 |         <template v-for="e in examples">
 20 |           <component :is="e.component"></component>
 21 |           <CodeExample :component_name="e.name"></CodeExample>
 22 |         </template>
 23 |         <section class="hero">
 24 |           <div class="hero-body">
 25 |             <p class="title" id="other-examples">Where to go next</p>
 26 |             <p
 27 |               id="other-examples-vanilla-js"
 28 |               class="subtitle column is-two-thirds pl-0"
 29 |             >
 30 |               You can visit the JavaScript examples
 31 |               <a href="https://rdkitjs.com">here</a>, which presents the
 32 |               low-level API of RDKit.js.
 33 |             </p>
 34 |             <p
 35 |               class="subtitle column is-two-thirds pl-0"
 36 |               id="other-examples-react"
 37 |             >
 38 |               You can visit the React examples
 39 |               <a href="https://react.rdkitjs.com">here</a>, which include more
 40 |               advanced and interactive examples.
 41 |             </p>
 42 |             <p
 43 |               class="subtitle column is-two-thirds pl-0"
 44 |               id="other-examples-vue"
 45 |             >
 46 |               You can visit the Angular examples
 47 |               <a href="https://angular.rdkitjs.com">here</a>, which include more
 48 |               advanced and interactive examples.
 49 |             </p>
 50 |             <p
 51 |               id="other-examples-legacy"
 52 |               class="subtitle column is-two-thirds pl-0"
 53 |             >
 54 |               You can also checkout the legacy
 55 |               <a
 56 |                 href="https://unpkg.com/@rdkit/rdkit/dist/GettingStartedInJS.html"
 57 |                 >getting started</a
 58 |               >
 59 |               and
 60 |               <a href="https://unpkg.com/@rdkit/rdkit/dist/demo.html">demo</a>.
 61 |             </p>
 62 |           </div>
 63 |         </section>
 64 |       </div>
 65 |     </section>
 66 |     <footer class="footer">
 67 |       <div class="content has-text-centered">
 68 |         <p>
 69 |           <strong>RDKit.js</strong> by
 70 |           <a href="https://github.com/rdkit/rdkit"
 71 |             >Greg Landrum and the RDKit contributors</a
 72 |           >. The source code is licensed
 73 |           <a href="https://github.com/rdkit/rdkit/blob/master/license.txt"
 74 |             >BDS-3</a
 75 |           >.
 76 |         </p>
 77 |       </div>
 78 |     </footer>
 79 |     <a class="back_to_top" href="#navbar">&uarr;</a>
 80 |   </div>
 81 | </template>
 82 | 
 83 | <script setup lang="ts">
 84 | import Introduction from "./components/Introduction.vue";
 85 | import SideNav from "./components/SideNav.vue";
 86 | import NavBar from "./components/NavBar.vue";
 87 | import ExampleList from "./components/examples/ExampleList.vue";
 88 | import CodeExample from "./components/CodeExample.vue";
 89 | // import examples here
 90 | import ExampleMoleculeStructure from "./components/examples/ExampleMoleculeStructure.vue";
 91 | import ExampleSVG from "./components/examples/ExampleSVG.vue";
 92 | import ExampleCanvas from "./components/examples/ExampleCanvas.vue";
 93 | import ExampleSubstructure from "./components/examples/ExampleSubstructure.vue";
 94 | import ExampleMultiSubstructure from "./components/examples/ExampleMultiSubstructure.vue";
 95 | import ExampleSubstructureSearch from "./components/examples/ExampleSubstructureSearch.vue";
 96 | import ExampleDrawingOptions from "./components/examples/ExampleDrawingOptions.vue";
 97 | 
 98 | const examples = [
 99 |   {
100 |     name: "ExampleList",
101 |     component: ExampleList
102 |   },
103 |   {
104 |     name: "MoleculeStructure",
105 |     component: ExampleMoleculeStructure
106 |   },
107 |   {
108 |     name: "ExampleSVG",
109 |     component: ExampleSVG
110 |   },
111 |   {
112 |     name: "ExampleCanvas",
113 |     component: ExampleCanvas
114 |   },
115 |   {
116 |     name: "ExampleSubstructure",
117 |     component: ExampleSubstructure
118 |   },
119 |   {
120 |     name: "ExampleMultiSubstructure",
121 |     component: ExampleMultiSubstructure
122 |   },
123 |   {
124 |     name: "ExampleSubstructureSearch",
125 |     component: ExampleSubstructureSearch
126 |   },
127 |   {
128 |     name: "ExampleDrawingOptions",
129 |     component: ExampleDrawingOptions
130 |   }
131 | ];
132 | </script>
133 | 
134 | <style>
135 | #page-content {
136 |   padding-left: 12px;
137 | }
138 | 
139 | #side-navigation {
140 |   position: sticky;
141 |   display: inline-block;
142 |   max-height: 100vh;
143 |   top: 0;
144 |   box-shadow: 3px 0px 0 0 #f5f5f5;
145 | }
146 | 
147 | .back_to_top {
148 |   position: fixed;
149 |   bottom: 80px;
150 |   right: 40px;
151 |   z-index: 9999;
152 |   width: 30px;
153 |   height: 30px;
154 |   text-align: center;
155 |   line-height: 30px;
156 |   background: #f5f5f5;
157 |   color: #444;
158 |   cursor: pointer;
159 |   border-radius: 2px;
160 |   display: block;
161 | }
162 | 
163 | .back_to_top:hover {
164 |   background: #e9ebec;
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/CodeExample.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <button
 4 |       class="button is-primary is-light is-large is-fullwidth"
 5 |       aria-label="more options"
 6 |       @click="toggleCollapsible"
 7 |     >
 8 |       See Code example
 9 |     </button>
10 |   </div>
11 |   <div class="container">
12 |     <div class="is-collapsible p-0" ref="collapsible">
13 |       <highlightjs autodetect :code="source_code"></highlightjs>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script setup lang="ts">
19 | import { onBeforeMount, ref } from "vue";
20 | 
21 | const props = defineProps<{
22 |   component_name: string;
23 | }>();
24 | 
25 | let source_code = ref("");
26 | let collapsible = ref<HTMLDivElement | null>(null);
27 | 
28 | onBeforeMount(async () => {
29 |   // load default export of component as a string
30 |   try {
31 |     let { default: value } = await import(
32 |       `./examples/${props.component_name}.vue?raw`
33 |     );
34 |     source_code.value = value;
35 |   } catch {
36 |     let { default: value } = await import(`./${props.component_name}.vue?raw`);
37 |     source_code.value = value;
38 |   }
39 | });
40 | 
41 | function toggleCollapsible() {
42 |   let style = collapsible.value?.style;
43 | 
44 |   if (style) {
45 |     if (style.maxHeight) {
46 |       style.maxHeight = "";
47 |     } else {
48 |       style.maxHeight = `${collapsible.value?.scrollHeight}px`;
49 |     }
50 |   }
51 | }
52 | </script>
53 | 
54 | <style>
55 | .is-collapsible {
56 |   max-height: 0;
57 |   overflow: hidden;
58 |   transition: max-height 0.2s ease-out;
59 | }
60 | 
61 | .p-0 pre {
62 |   padding: 0;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/Introduction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-introduction" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">Introduction</p>
 6 |         <p class="subtitle column is-two-thirds pl-0">
 7 |           Welcome to RDKit.js for Vue. If you didn't do it already, we first
 8 |           recommend to go through the
 9 |           <a href="https://rdkitjs.com#drawing-molecules-all-options">
10 |             JavaScript examples
11 |           </a>
12 |           for a low-level overview of the RDKit.js API.
13 |         </p>
14 |       </div>
15 |     </section>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/MoleculeStructure.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <p v-if="rdkitError">Error loading renderer</p>
  3 | 
  4 |   <p v-if="!rdkitLoaded">Loading renderer</p>
  5 | 
  6 |   <span
  7 |     v-else-if="!isValidMolString(structure)"
  8 |     :title="`Cannot render structure: ${structure}`"
  9 |   ></span>
 10 | 
 11 |   <div
 12 |     v-else-if="svgMode"
 13 |     :class="`molecule-structure-svg ${className}`"
 14 |     :style="{ width: props.width, height: props.height }"
 15 |     v-html="svg"
 16 |   ></div>
 17 | 
 18 |   <div v-else :class="`molecule-canvas-container ${className}`">
 19 |     <canvas
 20 |       :title="structure"
 21 |       :id="id"
 22 |       :width="width"
 23 |       :height="height"
 24 |     ></canvas>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script setup lang="ts">
 29 | import { nextTick, onMounted, onUpdated, reactive, ref, watch } from "vue";
 30 | import { JSMol } from "../../../../typescript";
 31 | import initRDKit from "../utils/initRDKit";
 32 | 
 33 | const props = defineProps({
 34 |   /**
 35 |    * Generic props
 36 |    */
 37 |   id: {
 38 |     type: String,
 39 |     required: true
 40 |   },
 41 |   className: {
 42 |     type: String,
 43 |     default: ""
 44 |   },
 45 |   svgMode: {
 46 |     type: Boolean,
 47 |     default: false
 48 |   },
 49 |   width: {
 50 |     type: Number,
 51 |     default: 250
 52 |   },
 53 |   height: {
 54 |     type: Number,
 55 |     default: 200
 56 |   },
 57 |   /**
 58 |    * RDKit-specific props
 59 |    */
 60 |   structure: {
 61 |     type: String,
 62 |     required: true
 63 |   },
 64 |   subStructure: {
 65 |     type: String,
 66 |     default: ""
 67 |   },
 68 |   extraDetails: {
 69 |     type: Object,
 70 |     default: {}
 71 |   },
 72 |   drawingDelay: {
 73 |     type: Number,
 74 |     default: undefined
 75 |   }
 76 | });
 77 | 
 78 | // RDKit state reporting values
 79 | let rdkitLoaded = ref(false);
 80 | let rdkitError = ref(false);
 81 | 
 82 | // Molecule state values
 83 | let wasCalled = ref(false);
 84 | let molDetails = reactive({
 85 |   width: props.width,
 86 |   height: props.height,
 87 |   bondLineWidth: 1,
 88 |   addStereoAnnotation: true,
 89 |   ...props.extraDetails
 90 | });
 91 | let svg = ref("");
 92 | 
 93 | /**
 94 |  * Validate the molecule
 95 |  */
 96 | function isValid(m: JSMol | null) {
 97 |   return !!m;
 98 | }
 99 | 
100 | /**
101 |  * Validate the string representation of the molecule
102 |  */
103 | function isValidMolString(s: string) {
104 |   const mol = window.RDKit.get_mol(s || "invalid");
105 |   const isValidMol = isValid(mol);
106 |   mol?.delete();
107 | 
108 |   return isValidMol;
109 | }
110 | 
111 | /**
112 |  * Get highlight details for molecule
113 |  */
114 | function getMolDetails(mol: JSMol | null, qmol: JSMol | null) {
115 |   if (isValid(mol) && isValid(qmol)) {
116 |     // get substructure highlight details
117 |     const details = JSON.parse(mol?.get_substruct_matches(qmol as JSMol) || "");
118 |     // reduce the list of objects to a single list object with all atoms and bonds
119 |     const detailsMerged: { atoms: number[]; bonds: number[] } = details
120 |       ? details.reduce(
121 |           (
122 |             acc: { atoms: number[]; bonds: number[] },
123 |             { atoms, bonds }: { atoms: number[]; bonds: number[] }
124 |           ) => ({
125 |             atoms: [...acc.atoms, ...atoms],
126 |             bonds: [...acc.bonds, ...bonds]
127 |           }),
128 |           { atoms: [], bonds: [] }
129 |         )
130 |       : details;
131 | 
132 |     return JSON.stringify({
133 |       ...molDetails,
134 |       ...(props.extraDetails || {}),
135 |       ...detailsMerged
136 |     });
137 |   } else {
138 |     // if one of the molecules are not valid, return no highlight details
139 |     return JSON.stringify({
140 |       ...molDetails,
141 |       ...(props.extraDetails || {})
142 |     });
143 |   }
144 | }
145 | 
146 | /**
147 |  * Draw the molecule to the canvas, or return set the SVG variable
148 |  */
149 | async function drawSVGorCanvas() {
150 |   const mol = window.RDKit.get_mol(props.structure || "invalid");
151 |   const qmol = window.RDKit.get_qmol(props.subStructure || "invalid");
152 |   const isValidMol = isValid(mol);
153 | 
154 |   if (props.svgMode && isValidMol) {
155 |     const svgGenerated = (mol as JSMol).get_svg_with_highlights(getMolDetails(mol, qmol));
156 |     svg.value = svgGenerated;
157 |   } else if (isValidMol) {
158 |     await nextTick(); // function needs to wait until canvas is rendered
159 |     const canvas = document.getElementById(props.id) as HTMLCanvasElement;
160 |     (mol as JSMol).draw_to_canvas_with_highlights(canvas, getMolDetails(mol, qmol));
161 |   }
162 | 
163 |   /**
164 |    * Delete C++ mol objects manually
165 |    * https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html#memory-management
166 |    */
167 |   mol?.delete();
168 |   qmol?.delete();
169 | }
170 | 
171 | /**
172 |  * Calls the main drawing logic, either with a delay or without
173 |  */
174 | function draw() {
175 |   if (props.drawingDelay) {
176 |     setTimeout(() => drawSVGorCanvas(), props.drawingDelay);
177 |   } else {
178 |     drawSVGorCanvas();
179 |   }
180 | }
181 | 
182 | /**
183 |  * Ensures draw() is only called once
184 |  */
185 | function drawOnce() {
186 |   return () => {
187 |     if (wasCalled.value === false) {
188 |       wasCalled.value = true;
189 |       draw();
190 |     }
191 |   };
192 | }
193 | 
194 | /**
195 |  * Load molecule on component mount
196 |  */
197 | onMounted(() => {
198 |   initRDKit()
199 |     .then(() => {
200 |       rdkitLoaded.value = true;
201 |       try {
202 |         draw();
203 |       } catch (err) {
204 |         console.error(err);
205 |       }
206 |     })
207 |     .catch((err) => {
208 |       console.error(err);
209 |       rdkitError.value = true;
210 |     });
211 | });
212 | 
213 | /**
214 |  * Redraw molecule on component update, or props changes
215 |  */
216 | 
217 | onUpdated(() => {
218 |   if (!rdkitError && rdkitLoaded && !props.svgMode) {
219 |     drawOnce();
220 |   }
221 | });
222 | 
223 | watch(props, () => draw());
224 | </script>
225 | 
226 | <style>
227 | .molecule-structure-svg svg rect:first-of-type {
228 |   fill: transparent !important;
229 | }
230 | </style>
231 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/NavBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
  3 |     <div class="navbar-brand">
  4 |       <a class="navbar-item" href="#">
  5 |         <img alt="logo" src="/rdkitjs_cropped_200.png" />
  6 |       </a>
  7 | 
  8 |       <a
  9 |         role="button"
 10 |         :class="`navbar-burger ${burgerActiveClass}`"
 11 |         aria-label="menu"
 12 |         aria-expanded="false"
 13 |         data-target="navbarBasicExample"
 14 |         href="#/"
 15 |         @click="toggleBurger"
 16 |       >
 17 |         <span aria-hidden="true"></span>
 18 |         <span aria-hidden="true"></span>
 19 |         <span aria-hidden="true"></span>
 20 |       </a>
 21 |     </div>
 22 | 
 23 |     <div id="navbarBasicExample" :class="`navbar-menu ${burgerActiveClass}`">
 24 |       <div class="navbar-start">
 25 |         <a
 26 |           class="navbar-item"
 27 |           href="https://github.com/rdkit/rdkit-js/tree/master/examples/javascript"
 28 |           >Source code</a
 29 |         >
 30 |         <a class="navbar-item" href="https://docs.rdkitjs.com/">API Docs</a>
 31 |         <div class="navbar-item has-dropdown is-hoverable">
 32 |           <a class="navbar-link" href="#/">Examples</a>
 33 |           <div class="navbar-dropdown">
 34 |             <a class="navbar-item" href="https://rdkitjs.com">Javascript</a>
 35 |             <a class="navbar-item" href="https://react.rdkitjs.com">React</a>
 36 |             <a class="navbar-item is-active" href="https://vue.rdkitjs.com"
 37 |               >Vue</a
 38 |             >
 39 |             <a class="navbar-item" href="https://angular.rdkitjs.com"
 40 |               >Angular</a
 41 |             >
 42 |             <hr class="navbar-divider" />
 43 |             <a
 44 |               class="navbar-item"
 45 |               href="https://github.com/rdkit/rdkit-js#contributing"
 46 |               >Contribute</a
 47 |             >
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <div class="navbar-end">
 53 |         <div class="navbar-item">
 54 |           <div class="buttons">
 55 |             <a
 56 |               data-tooltip="Go to main RDKit project"
 57 |               class="button has-tooltip-bottom is-white is-big"
 58 |               href="https://github.com/rdkit/rdkit"
 59 |             >
 60 |               <span class="icon">
 61 |                 <img alt="RDKit Logo" src="/rdkit.png" />
 62 |               </span>
 63 |             </a>
 64 |           </div>
 65 |         </div>
 66 |         <div class="navbar-item">
 67 |           <div class="buttons">
 68 |             <a
 69 |               data-tooltip="Go to RDKit.js"
 70 |               class="button has-tooltip-bottom is-white is-big"
 71 |               href="https://github.com/rdkit/rdkit-js"
 72 |             >
 73 |               <span class="icon">
 74 |                 <i class="fab fa-github fa-2x"></i>
 75 |               </span>
 76 |             </a>
 77 |           </div>
 78 |         </div>
 79 |         <div class="navbar-item">
 80 |           <div class="buttons mr-6">
 81 |             <a
 82 |               data-tooltip="Go to NPM package"
 83 |               class="button has-tooltip-bottom is-white is-big"
 84 |               href="https://www.npmjs.com/package/@rdkit/rdkit"
 85 |             >
 86 |               <span class="icon">
 87 |                 <i class="fab fa-npm fa-2x"></i>
 88 |               </span>
 89 |             </a>
 90 |           </div>
 91 |         </div>
 92 |       </div>
 93 |     </div>
 94 |   </nav>
 95 | </template>
 96 | 
 97 | <script setup lang="ts">
 98 | import { computed, ref } from "vue";
 99 | 
100 | let burgerActive = ref(false);
101 | 
102 | let burgerActiveClass = computed(() => {
103 |   return burgerActive ? "is-active" : "";
104 | });
105 | 
106 | function toggleBurger() {
107 |   burgerActive.value = !burgerActive.value;
108 | }
109 | </script>
110 | 
111 | <style scoped>
112 | .navbar {
113 |   padding: 12px 0;
114 | }
115 | 
116 | .navbar-brand {
117 |   padding: 6px;
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/SideNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <template v-for="section of sections">
 3 |     <p class="menu-label">{{ section.name }}</p>
 4 |     <ul class="menu-list">
 5 |       <li v-for="child of section.children">
 6 |         <a
 7 |           :href="child.id"
 8 |           :class="activeLink === child.id ? 'is-active' : undefined"
 9 |           @click="activeLink = child.id"
10 |           >{{ child.name }}</a
11 |         >
12 |       </li>
13 |     </ul>
14 |   </template>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | import { ref } from "vue";
19 | 
20 | let activeLink = ref("#component-introduction");
21 | 
22 | const sections = [
23 |   {
24 |     name: "General",
25 |     children: [
26 |       {
27 |         id: "#component-introduction",
28 |         name: "Introduction"
29 |       },
30 |       {
31 |         id: "#component-example-list",
32 |         name: "Overview"
33 |       }
34 |     ]
35 |   },
36 |   {
37 |     name: "Components",
38 |     children: [
39 |       {
40 |         id: "#component-example-moleculestructure",
41 |         name: "MoleculeStructure"
42 |       }
43 |     ]
44 |   },
45 |   {
46 |     name: "Examples",
47 |     children: [
48 |       {
49 |         id: "#component-example-svg",
50 |         name: "SVG Rendering"
51 |       },
52 |       {
53 |         id: "#component-example-canvas",
54 |         name: "Canvas Rendering"
55 |       },
56 |       {
57 |         id: "#component-example-substruct",
58 |         name: "Substructure Highlighting"
59 |       },
60 |       {
61 |         id: "#component-example-multi-substruct",
62 |         name: "Multi-Substructure Highlighting"
63 |       },
64 |       {
65 |         id: "#component-example-substruct-search",
66 |         name: "Substructure Search"
67 |       },
68 |       {
69 |         id: "#component-example-drawing-options",
70 |         name: "Additional Options"
71 |       }
72 |     ]
73 |   },
74 |   {
75 |     name: "Other",
76 |     children: [
77 |       {
78 |         id: "#other-examples-vanilla-js",
79 |         name: "JavaScript Examples"
80 |       },
81 |       {
82 |         id: "#other-examples-react",
83 |         name: "React Examples"
84 |       },
85 |       {
86 |         id: "#other-examples-angular",
87 |         name: "Angular Examples"
88 |       },
89 |       {
90 |         id: "#other-examples-legacy",
91 |         name: "Legacy Examples"
92 |       }
93 |     ]
94 |   }
95 | ];
96 | </script>
97 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleCanvas.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-example-canvas" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">Canvas rendering</p>
 6 |         <p class="subtitle">
 7 |           You can also render molecules using the HTML Canvas API.
 8 |         </p>
 9 |       </div>
10 |     </section>
11 |   </div>
12 |   <div class="columns is-desktop">
13 |     <div class="column" v-for="(mol, idx) in molecules">
14 |       <MoleculeStructure
15 |         :id="`structure-example-canvas-${idx}`"
16 |         :structure="mol"
17 |         :width="350"
18 |         :height="300"
19 |       ></MoleculeStructure>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script setup lang="ts">
25 | import MoleculeStructure from "../MoleculeStructure.vue";
26 | 
27 | const molecules = ["CN1C=NC2=C1C(=O)N(C(=O)N2C)", "CC(=O)Oc1ccccc1C(=O)O"];
28 | </script>
29 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-example-list" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">Overview</p>
 6 |         <p class="subtitle">
 7 |           You can draw any molecule from SMILES dynamically with RDKit.js.
 8 |         </p>
 9 |       </div>
10 |     </section>
11 |     <div id="structure-list" class="columns is-desktop">
12 |       <div class="column" v-for="smiles in SMILES_LIST">
13 |         <MoleculeStructure
14 |           :id="smiles"
15 |           :structure="smiles"
16 |           :height="200"
17 |           :width="200"
18 |           svg-mode
19 |         ></MoleculeStructure>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script setup lang="ts">
26 | import MoleculeStructure from "../MoleculeStructure.vue";
27 | import { SMILES_LIST } from "../../utils/smiles";
28 | </script>
29 | 
30 | <style scoped>
31 | #structure-list {
32 |   margin: 12px;
33 |   overflow-x: scroll;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleMoleculeStructure.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-example-moleculestructure" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">MoleculeStructure</p>
 6 |         <p class="subtitle">
 7 |           The examples below will mosty use the Vue component
 8 |           <code class="is-family-code">MoleculeStructure</code>
 9 |           to render the examples. You can see the Vue implementation in the code
10 |           below.
11 |         </p>
12 |       </div>
13 |     </section>
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleMultiSubstructure.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-example-multi-substruct" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">Multi-substructure Highlight</p>
 6 |         <p class="subtitle">
 7 |           You can also highlight multiple substructures of molecules with
 8 |           SMILES, SMARTS and a combination of the two with dot notation.
 9 |         </p>
10 |       </div>
11 |     </section>
12 |     <div class="columns is-desktop">
13 |       <div class="column" v-for="({ mol, qmol }, idx) in molecules">
14 |         <MoleculeStructure
15 |           :id="`structure-example-multisubstruct-svg-${idx}`"
16 |           :structure="mol"
17 |           :subStructure="qmol"
18 |           :width="350"
19 |           :height="300"
20 |           svgMode
21 |         />
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script setup lang="ts">
28 | import MoleculeStructure from "../MoleculeStructure.vue";
29 | 
30 | const molecules = [
31 |   {
32 |     mol: "CN1C=NC2=C1C(=O)N(C(=O)N2C)",
33 |     qmol: "[N,n,o,O]"
34 |   },
35 |   {
36 |     mol: "CC(=O)Oc1ccccc1C(=O)O",
37 |     qmol: "[O,o].c1ccccc1"
38 |   }
39 | ];
40 | </script>
41 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleSVG.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-example-svg" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">SVG rendering</p>
 6 |         <p class="subtitle">You can render molecules using svg.</p>
 7 |       </div>
 8 |     </section>
 9 |   </div>
10 |   <div class="columns is-desktop">
11 |     <div class="column" v-for="(mol, idx) in molecules">
12 |       <MoleculeStructure
13 |         :id="`structure-example-svg-${idx}`"
14 |         :structure="mol"
15 |         :width="350"
16 |         :height="300"
17 |         svg-mode
18 |       ></MoleculeStructure>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script setup lang="ts">
24 | import MoleculeStructure from "../MoleculeStructure.vue";
25 | 
26 | const molecules = ["CN1C=NC2=C1C(=O)N(C(=O)N2C)", "CC(=O)Oc1ccccc1C(=O)O"];
27 | </script>
28 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleSubstructure.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="component-example-substruct" class="container">
 3 |     <section class="hero">
 4 |       <div class="hero-body">
 5 |         <p class="title">Substructure Highlight</p>
 6 |         <p class="subtitle">
 7 |           You can also highlight substructure of molecules with both the SVG and
 8 |           Canvas APIs.
 9 |         </p>
10 |       </div>
11 |     </section>
12 |     <div class="columns is-desktop">
13 |       <div class="column" v-for="({ mol, qmol, svgMode }, idx) in molecules">
14 |         <MoleculeStructure
15 |           :id="`structure-example-multisubstruct-svg-${idx}`"
16 |           :structure="mol"
17 |           :subStructure="qmol"
18 |           :width="350"
19 |           :height="300"
20 |           :svgMode="svgMode"
21 |         />
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script setup lang="ts">
28 | import MoleculeStructure from "../MoleculeStructure.vue";
29 | 
30 | const molecules = [
31 |   {
32 |     mol: "CN1C=NC2=C1C(=O)N(C(=O)N2C)",
33 |     qmol: "[N,n,O;!H0]",
34 |     svgMode: true
35 |   },
36 |   {
37 |     mol: "CC(=O)Oc1ccccc1C(=O)O",
38 |     qmol: "CC(=O)Oc1ccccc1C",
39 |     svgMode: false
40 |   }
41 | ];
42 | </script>
43 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/examples/ExampleSubstructureSearch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="component-example-substruct-search" class="container">
  3 |     <section class="hero">
  4 |       <div class="hero-body">
  5 |         <p class="title">Substructure match</p>
  6 |         <p class="subtitle">You can perform client-side substructure match.</p>
  7 |       </div>
  8 |     </section>
  9 |     <div class="columns" :style="{ margin: '12px 0' }">
 10 |       <div class="column">
 11 |         <div class="field">
 12 |           <div class="control has-icons-left">
 13 |             <input
 14 |               class="input"
 15 |               type="email"
 16 |               placeholder="Enter a SMARTS or SMILES string here..."
 17 |               v-model="searchValue"
 18 |             />
 19 |             <span key="search-input-icon" class="icon is-small is-left">
 20 |               <i
 21 |                 :class="
 22 |                   searching ? 'fas fa-circle-notch fa-spin' : 'fas fa-search'
 23 |                 "
 24 |               ></i>
 25 |             </span>
 26 |           </div>
 27 |         </div>
 28 |       </div>
 29 |     </div>
 30 |     <div class="columns is-multiline" :style="{ margin: '12px' }">
 31 |       <template v-if="matches.length > 0">
 32 |         <div class="column" v-for="smiles in matches">
 33 |           <MoleculeStructure
 34 |             :id="smiles"
 35 |             :structure="smiles"
 36 |             :subStructure="searchValue"
 37 |             :height="200"
 38 |             :width="200"
 39 |             svg-mode
 40 |           ></MoleculeStructure>
 41 |         </div>
 42 |       </template>
 43 |       <p v-else>Input is either invalid or no matches were found.</p>
 44 |     </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script setup lang="ts">
 49 | import MoleculeStructure from "../MoleculeStructure.vue";
 50 | import { SMILES_LIST } from "../../utils/smiles";
 51 | import { reactive, ref, watch } from "vue";
 52 | import debounce from "debounce";
 53 | import { JSMol } from "../../../../../typescript";
 54 | 
 55 | let searching = ref(false);
 56 | let searchValue = ref("");
 57 | let matches = reactive<string[]>([...SMILES_LIST]);
 58 | 
 59 | const noMatchLength = 2;
 60 | 
 61 | function updateMatches(list: string[]) {
 62 |   matches.length = 0;
 63 |   matches.push(...list);
 64 | }
 65 | 
 66 | function performSearch() {
 67 |   // start search
 68 |   searching.value = true;
 69 | 
 70 |   if (!searchValue.value) {
 71 |     searching.value = false;
 72 |     updateMatches(SMILES_LIST);
 73 |     return;
 74 |   }
 75 | 
 76 |   const qmol = window.RDKit.get_qmol(searchValue.value);
 77 |   let results: string[] = [];
 78 |   if (!!qmol) {
 79 |     // if the query is a valid SMARTS, we can use the substructure search
 80 |     const results = SMILES_LIST.filter((smiles: string) => {
 81 |       // only return those from the list that match the query
 82 |       const mol = window.RDKit.get_mol(smiles);
 83 |       const hasMatch = !!mol && mol.get_substruct_match(qmol).length > 0;
 84 |       mol?.delete();
 85 |       return hasMatch;
 86 |     });
 87 | 
 88 |     qmol?.delete();
 89 | 
 90 |     // replace search results
 91 |     updateMatches(results);
 92 | 
 93 |     // finish search
 94 |     searching.value = false;
 95 |   } else {
 96 |     results = []
 97 |   }
 98 | 
 99 |   qmol?.delete();
100 | 
101 |   // replace search results
102 |   updateMatches(results);
103 | 
104 |   // finish search
105 |   searching.value = false;
106 | }
107 | 
108 | const debouncedSearch = debounce(performSearch, 300);
109 | 
110 | watch(searchValue, debouncedSearch);
111 | </script>
112 | 


--------------------------------------------------------------------------------
/examples/vue/src/globals.d.ts:
--------------------------------------------------------------------------------
 1 | import { RDKitModule } from "../../../typescript";
 2 | 
 3 | export {};
 4 | 
 5 | declare global {
 6 |   interface Window {
 7 |     RDKit: RDKitModule;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/vue/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import "./style.css";
 3 | import App from "./App.vue";
 4 | 
 5 | import "highlight.js/styles/a11y-dark.css";
 6 | import "highlight.js/lib/common";
 7 | import hljsVuePlugin from "@highlightjs/vue-plugin";
 8 | 
 9 | createApp(App).use(hljsVuePlugin).mount("#app");
10 | 


--------------------------------------------------------------------------------
/examples/vue/src/style.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |   height: 100%;
 5 |   scroll-behavior: smooth;
 6 | }
 7 | #app {
 8 |   min-height: 100%;
 9 | }
10 | @media screen and (max-width: 768px) {
11 |   #menu-toggle:checked + .nav-menu {
12 |     display: block;
13 |   }
14 | }
15 | 
16 | /**
17 | * Change default scrollbar style
18 | * source: https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg
19 | */
20 | ::-webkit-scrollbar {
21 |   width: 20px;
22 |   height: 20px;
23 | }
24 | 
25 | ::-webkit-scrollbar-track {
26 |   background-color: transparent;
27 | }
28 | 
29 | ::-webkit-scrollbar-thumb {
30 |   background-color: #d6dee1;
31 |   border-radius: 20px;
32 |   border: 6px solid transparent;
33 |   background-clip: content-box;
34 | }
35 | 
36 | ::-webkit-scrollbar-thumb:hover {
37 |   background-color: #a8bbbf;
38 | }
39 | 
40 | code {
41 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
42 |     monospace;
43 | }
44 | 


--------------------------------------------------------------------------------
/examples/vue/src/utils/initRDKit.ts:
--------------------------------------------------------------------------------
 1 | import { RDKitModule } from "../../../../typescript";
 2 | 
 3 | const initRDKit = (() => {
 4 |   let rdkitLoadingPromise: Promise<RDKitModule>;
 5 | 
 6 |   return () => {
 7 |     /**
 8 |      * Utility function ensuring there's only one call made to load RDKit
 9 |      * It returns a promise with the resolved RDKit API as value on success,
10 |      * and a rejected promise with the error on failure.
11 |      *
12 |      * The RDKit API is also attached to the global object on successful load.
13 |      */
14 |     if (!rdkitLoadingPromise) {
15 |       rdkitLoadingPromise = new Promise((resolve, reject) => {
16 |         window
17 |           .initRDKitModule()
18 |           .then((RDKit) => {
19 |             window.RDKit = RDKit;
20 |             resolve(RDKit);
21 |           })
22 |           .catch((e) => {
23 |             reject();
24 |           });
25 |       });
26 |     }
27 | 
28 |     return rdkitLoadingPromise;
29 |   };
30 | })();
31 | 
32 | export default initRDKit;
33 | 


--------------------------------------------------------------------------------
/examples/vue/src/utils/smiles.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Taken from https://github.com/reymond-group/smilesDrawer/blob/master/example/drugbank.js
 3 |  */
 4 | 
 5 | export const SMILES_LIST = [
 6 |   "CC[C@H](C)[C@H](NC(=O)[C@H](CCC(O)=O)NC(=O)[C@H](CCC(O)=O)NC(=O)[C@H](CC1=CC=CC=C1)NC(=O)[C@H](CC(O)=O)NC(=O)CNC(=O)[C@H](CC(N)=O)NC(=O)CNC(=O)CNC(=O)CNC(=O)CNC(=O)[C@@H]1CCCN1C(=O)[C@H](CCCNC(N)=N)NC(=O)[C@@H]1CCCN1C(=O)[C@H](N)CC1=CC=CC=C1)C(=O)N1CCC[C@H]1C(=O)N[C@@H](CCC(O)=O)C(=O)N[C@@H](CCC(O)=O)C(=O)N[C@@H](CC1=CC=C(O)C=C1)C(=O)N[C@@H](CC(C)C)C(O)=O",
 7 |   "CC(C)C[C@H](NC(=O)[C@@H](COC(C)(C)C)NC(=O)[C@H](CC1=CC=C(O)C=C1)NC(=O)[C@H](CO)NC(=O)[C@H](CC1=CNC2=CC=CC=C12)NC(=O)[C@H](CC1=CN=CN1)NC(=O)[C@@H]1CCC(=O)N1)C(=O)N[C@@H](CCCN=C(N)N)C(=O)N1CCC[C@H]1C(=O)NNC(N)=O",
 8 |   "NC(=O)CC[C@@H]1NC(=O)[C@H](CC2=CC=CC=C2)NC(=O)[C@H](CC2=CC=C(O)C=C2)NC(=O)CCSSC[C@H](NC(=O)[C@H](CC(N)=O)NC1=O)C(=O)N1CCC[C@H]1C(=O)N[C@@H](CCCNC(N)=N)C(=O)NCC(N)=O",
 9 |   "CC(C)C[C@H](NC(=O)[C@@H](CCCNC(N)=O)NC(=O)[C@H](CC1=CC=C(O)C=C1)NC(=O)[C@H](CO)NC(=O)[C@@H](CC1=CN=CC=C1)NC(=O)[C@@H](CC1=CC=C(Cl)C=C1)NC(=O)[C@@H](CC1=CC2=CC=CC=C2C=C1)NC(C)=O)C(=O)N[C@@H](CCCNC(N)=N)C(=O)N1CCC[C@H]1C(=O)N[C@H](C)C(N)=O",
10 |   "CC[C@@H]1NC(=O)[C@H]([C@H](O)[C@H](C)CC=CC)N(C)C(=O)[C@H](C(C)C)N(C)C(=O)[C@H](CC(C)C)N(C)C(=O)[C@H](CC(C)C)N(C)C(=O)[C@@H](C)NC(=O)[C@H](C)NC(=O)[C@H](CC(C)C)N(C)C(=O)[C@@H](NC(=O)[C@H](CC(C)C)N(C)C(=O)CN(C)C1=O)C(C)C",
11 |   "NCCCC[C@H](NC(=O)[C@@H]1CCCN1C(=O)[C@@H]1CSSC[C@H](N)C(=O)N[C@@H](CC2=CC=CC=C2)C(=O)N[C@@H](CC2=CC=CC=C2)C(=O)N[C@@H](CCC(N)=O)C(=O)N[C@@H](CC(N)=O)C(=O)N1)C(=O)NCC(N)=O",
12 |   "[H][C@]1(NC(=O)[C@H](CCCCN)NC(=O)[C@@H](CC2=CNC3=C2C=CC=C3)NC(=O)[C@H](CC2=CC=CC=C2)NC(=O)[C@H](CSSC[C@H](NC1=O)C(=O)N[C@H](CO)[C@@H](C)O)NC(=O)[C@H](N)CC1=CC=CC=C1)[C@@H](C)O",
13 |   "OC[C@H]1O[C@@H]([C@H](O)[C@@H]1OP(O)(=O)O[C@]([H])(C)CNC(=O)CC[C@]1(C)[C@@H](CC(=O)N)[C@@]2([H])N([Co]C#N)C1=C(C)/C1=N/C(=CC3=NC(=C(C)/C4=N[C@]2(C)[C@@](C)(CC(=O)N)[C@@H]4CCC(=O)N)[C@@](C)(CC(=O)N)[C@@H]3CCC(=O)N)/C(C)(C)[C@@H]1CCC(=O)N)N1C=NC2=CC(C)=C(C)C=C12",
14 |   "C[C@H](CCCC(C)(C)O)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)C[C@H](O)C1=C",
15 |   "CC(C=CC=C(/C)C=CC1C(C)=CC(O)CC1(C)C)=C/C=C/C=C(C)/C=C/C=C(C)/C=C/C1=C(C)CC(O)CC1(C)C",
16 |   "C[C@H](CCCC(C)(C)O)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
17 |   "CC(C)[C@@H](C)C=C[C@@H](C)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
18 |   "NC(=O)C1=CN(C=CC1)[C@@H]1O[C@H](CO[P@](O)(=O)O[P@](O)(=O)OC[C@H]2O[C@H]([C@H](O)[C@@H]2O)N2C=NC3=C(N)N=CN=C23)[C@@H](O)[C@H]1O",
19 |   "CC(C)CCC[C@@H](C)[C@@]1([H])CC[C@@]2([H])C(CCC[C@]12C)=CC=C1C[C@@H](O)CCC1=C",
20 |   "NC1=NC=NC2=C1N=CN2[C@@H]1O[C@H](COP(O)(=O)OP(O)(=O)OP(O)(O)=O)[C@@H](O)[C@H]1O",
21 |   "[H][C@]12[C@H](C[C@H](O)C=C1C=C[C@H](C)[C@@H]2CC[C@@H](O)C[C@@H](O)CC(O)=O)OC(=O)[C@@H](C)CC",
22 |   "[H][C@@]12CCC[C@]1([H])N([C@@H](C2)C(O)=O)C(=O)[C@H](C)N[C@@H](CCC1=CC=CC=C1)C(=O)OCC",
23 |   "[H][C@@]12C[C@@]3([H])[C@]4([H])C[C@H](F)C5=CC(=O)C=C[C@]5(C)[C@@]4([H])[C@@H](O)C[C@]3(C)[C@@]1(OC(C)(C)O2)C(=O)CO",
24 |   "CSCC[C@H](NC(=O)[C@H](CC1=CNC2=C1C=CC=C2)NC(=O)CCNC(=O)OC(C)(C)C)C(=O)N[C@@H](CC(O)=O)C(=O)N[C@@H](CC1=CC=CC=C1)C(N)=O",
25 |   "CC[C@H]1OC(=O)[C@H](C)[C@@H](O[C@H]2C[C@@](C)(OC)[C@@H](O)[C@H](C)O2)[C@H](C)[C@@H](O[C@@H]2O[C@H](C)C[C@@H]([C@H]2O)N(C)C)[C@](C)(O)C[C@@H](C)C(=O)[C@H](C)[C@@H](O)[C@]1(C)O",
26 |   "[H]O[Co+]N1C2=C(C)/C3=N/C(=CC4=NC(=C(C)/C5=N[C@@](C)([C@@]1([H])[C@H](CC(=O)N)[C@@]2(C)CCC(=O)NC[C@@H](C)OP(=O)([O-])O[C@H]1[C@@H](O)[C@H](O[C@@H]1CO)N1C=NC2=CC(C)=C(C)C=C12)[C@@](C)(CC(N)=O)[C@@H]5CCC(=O)N)[C@@](C)(CC(=O)N)[C@@H]4CCC(=O)N)/C(C)(C)[C@@H]3CCC(=O)N"
27 | ];
28 | 


--------------------------------------------------------------------------------
/examples/vue/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module "*.vue" {
4 |   import type { DefineComponent } from "vue";
5 |   const component: DefineComponent<{}, {}, any>;
6 |   export default component;
7 | }
8 | 


--------------------------------------------------------------------------------
/examples/vue/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Node",
 7 |     "strict": false,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["ESNext", "DOM"],
14 |     "skipLibCheck": true,
15 |     "composite": true,
16 |     "allowSyntheticDefaultImports": true,
17 |     "types": ["vite/client"]
18 |   },
19 |   "include": [
20 |     "vite.config.ts",
21 |     "src/**/*.ts",
22 |     "src/**/*.d.ts",
23 |     "src/**/*.tsx",
24 |     "src/**/*.vue",
25 |     "../../typescript/index.d.ts",
26 |     "src/globals.d.ts"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/examples/vue/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import vue from "@vitejs/plugin-vue";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()]
7 | });
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@rdkit/rdkit",
 3 |   "version": "2025.3.1-1.0.0",
 4 |   "private": true,
 5 |   "description": "JavaScript distribution of cheminformatics functionality from the RDKit - a C++ library for cheminformatics.",
 6 |   "main": "dist/RDKit_minimal.js",
 7 |   "types": "dist/index.d.ts",
 8 |   "homepage": "https://www.rdkitjs.com",
 9 |   "workspaces": [
10 |     "examples/react",
11 |     "examples/javascript",
12 |     "examples/vue",
13 |     "examples/angular",
14 |     "examples/nextjs",
15 |     "examples/node"
16 |   ],
17 |   "scripts": {
18 |     "build": "bash scripts/build_rdkitjs.sh",
19 |     "vue:start": "cd examples/vue && npm run dev",
20 |     "vue:build": "cd examples/vue && npm run build",
21 |     "angular:start": "cd examples/angular && npm run start",
22 |     "angular:build": "cd examples/angular && npm run build",
23 |     "react:build": "cd examples/react && PUBLIC_URL='' npm run build",
24 |     "react:start": "cd examples/react && npm run start",
25 |     "javascript:start": "serve examples/javascript",
26 |     "docs:build": "typedoc --out typescript/docs --readme none --tsconfig ./typescript/tsconfig.json typescript/index.d.ts",
27 |     "docs:serve": "npm run docs:build && serve typescript/docs",
28 |     "format": "prettier --trailing-comma none --write examples *.md typescript/**/*",
29 |     "test": "echo \"Tests are run during the docker build. See https://github.com/rdkit/rdkit/blob/master/docker/Dockerfile .\" && exit 1"
30 |   },
31 |   "repository": {
32 |     "type": "git",
33 |     "url": "git+https://github.com/rdkit/rdkit-js.git"
34 |   },
35 |   "keywords": [
36 |     "javascript",
37 |     "c-plus-plus",
38 |     "cheminformatics",
39 |     "rdkit",
40 |     "wasm",
41 |     "node-js",
42 |     "molecule",
43 |     "molecule-visualization",
44 |     "molecule-viewer",
45 |     "molecule-drawing"
46 |   ],
47 |   "author": "Valence Discovery Inc., Greg Landrum, Paolo Tosco, and other RDKit contributors",
48 |   "license": "BSD-3-Clause",
49 |   "bugs": {
50 |     "url": "https://github.com/rdkit/rdkit-js/issues"
51 |   },
52 |   "files": [
53 |     "license.txt",
54 |     "package.json",
55 |     "README.md",
56 |     "dist/index.d.ts",
57 |     "dist/demo.html",
58 |     "dist/GettingStartedInJS.html",
59 |     "dist/RDKit_minimal.js",
60 |     "dist/RDKit_minimal.wasm",
61 |     "Code/MinimalLib/dist/RDKit_minimal.js",
62 |     "Code/MinimalLib/dist/RDKit_minimal.wasm"
63 |   ],
64 |   "devDependencies": {
65 |     "prettier": "^2.8.8",
66 |     "serve": "^14.1.2",
67 |     "typedoc": "^0.25.3",
68 |     "typescript": "^4.8.4"
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/rdkitjs_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rdkit/rdkit-js/67af56ea3c7aca61a0ef49d895cb8157964dfeaa/rdkitjs_logo.png


--------------------------------------------------------------------------------
/scripts/build_rdkitjs.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | set -e
 4 | 
 5 | # Set branch to release
 6 | RDKIT_BRANCH="Release_$RDKIT_DASH_VERSION"
 7 | RDKIT_VERSION=${RDKIT_DASH_VERSION//_0/_}
 8 | RDKIT_VERSION=${RDKIT_VERSION//_/.}
 9 | SEMVER_VERSION="$SEMVER_VERSION"
10 | NPM_RELEASE_VERSION="$RDKIT_VERSION-$SEMVER_VERSION"
11 | 
12 | # make sure true/false is lowercase
13 | BETA="${BETA,,}"
14 | 
15 | if [ "$BETA" = "true" ]; then
16 |     RDKIT_VERSION="$RDKIT_VERSION-beta"
17 | fi
18 | 
19 | echo $RDKIT_DASH_VERSION
20 | echo $RDKIT_VERSION
21 | 
22 | # Clean and create distribution folder
23 | MINIMALLIB_OUTPUT_PATH="dist"
24 | rm -rf $MINIMALLIB_OUTPUT_PATH
25 | mkdir -p $MINIMALLIB_OUTPUT_PATH
26 | 
27 | # legacy minimallib output path
28 | LEGACY_MINIMALLIB_OUTPUT_PATH="Code/MinimalLib/dist"
29 | rm -rf $LEGACY_MINIMALLIB_OUTPUT_PATH
30 | mkdir -p $LEGACY_MINIMALLIB_OUTPUT_PATH
31 | 
32 | # Build distribution files
33 | DOCKER_BUILDKIT=1 docker build --platform=linux/amd64 -f Dockerfile --build-arg RDKIT_BRANCH=$RDKIT_BRANCH -o $MINIMALLIB_OUTPUT_PATH .
34 | 
35 | # Make dist files executable
36 | chmod a+rwx $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.js
37 | chmod a+rwx $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.wasm
38 | 
39 | # Add a copy of the distribution files at the original rdkit location
40 | # for backwards compatibility
41 | cp $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.js $LEGACY_MINIMALLIB_OUTPUT_PATH/RDKit_minimal.js
42 | cp $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.wasm $LEGACY_MINIMALLIB_OUTPUT_PATH/RDKit_minimal.wasm
43 | 
44 | # Move docs file in dist folder for demos to work properly
45 | cp docs/demo.html $MINIMALLIB_OUTPUT_PATH/demo.html
46 | cp docs/GettingStartedInJS.html $MINIMALLIB_OUTPUT_PATH/GettingStartedInJS.html
47 | 
48 | # Log build completed
49 | echo "Build completed"
50 | echo "MinimalLib distribution files are at $MINIMALLIB_OUTPUT_PATH"
51 | 
52 | # Make dist files executable
53 | chmod a+rwx $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.js
54 | chmod a+rwx $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.wasm
55 | 
56 | # Add a copy of the distribution files at the original rdkit location
57 | # for backwards compatibility
58 | cp $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.js $LEGACY_MINIMALLIB_OUTPUT_PATH/RDKit_minimal.js
59 | cp $MINIMALLIB_OUTPUT_PATH/RDKit_minimal.wasm $LEGACY_MINIMALLIB_OUTPUT_PATH/RDKit_minimal.wasm
60 | 
61 | # Move docs file in dist folder for demos to work properly
62 | cp docs/demo.html $MINIMALLIB_OUTPUT_PATH/demo.html
63 | cp docs/GettingStartedInJS.html $MINIMALLIB_OUTPUT_PATH/GettingStartedInJS.html
64 | 
65 | # Log build completed
66 | echo "Build completed"
67 | echo "MinimalLib distribution files are at $MINIMALLIB_OUTPUT_PATH"
68 | 
69 | # Move typescript files to dist folder
70 | cp typescript/index.d.ts $MINIMALLIB_OUTPUT_PATH/index.d.ts
71 | 
72 | # Pre-publish
73 | sed -i '/"private": true/d' ./package.json
74 | npm --no-git-tag-version --allow-same-version version $NPM_RELEASE_VERSION
75 | echo "registry=https://registry.npmjs.org/" > .npmrc
76 | echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" >> .npmrc
77 | 
78 | # Publish
79 | if [ "$BETA" = "true" ]; then
80 |     NPM_TOKEN=$NPM_TOKEN npm publish --beta --access public
81 | else
82 |     NPM_TOKEN=$NPM_TOKEN npm publish --access public
83 | fi
84 | 


--------------------------------------------------------------------------------
/scripts/ci.sh:
--------------------------------------------------------------------------------
1 | set -e
2 | 
3 | # Set branch to release
4 | RDKIT_BRANCH="$RDKIT_BRANCH"
5 | MINIMALLIB_OUTPUT_PATH="dist"
6 | 
7 | # Build distribution files
8 | DOCKER_BUILDKIT=1 docker build --no-cache --platform=linux/amd64 -f Dockerfile --build-arg RDKIT_BRANCH=$RDKIT_BRANCH -o $MINIMALLIB_OUTPUT_PATH .
9 | 


--------------------------------------------------------------------------------
/typescript/README.md:
--------------------------------------------------------------------------------
 1 | **Note 1**: The types provided with rdkit-js are manually maintained, but are intended to match and map all of its functionalities as much as possible. Please log any issue or bug if you encounter problems while using them.
 2 | 
 3 | **Note 2**: This is still very early stage. Types from RDKit.js should be considered experimental.
 4 | 
 5 | # Example usage
 6 | 
 7 | The following is a walkthrough on how to setup RDKit.js in Typescript.
 8 | 
 9 | ## Step 1 - Declare the RDKitModule property
10 | 
11 | Declare where your final RDKit module will reside on your window object (or other object).
12 | 
13 | This is usually done at the root of your project.
14 | 
15 | ```typescript
16 | declare global {
17 |     interface Window {
18 |         RDKit: RDKitModule
19 |     }
20 | }
21 | 
22 | ```
23 | 
24 | Here we chose `RDKit` as the window property, but you can choose any name you want.
25 | 
26 | ## Step 2 - Load the RDKit module with window.initRDKitModule
27 | 
28 | Window is extended with the initRDKitModule property, typed as a Promise returning an RDKitModule.
29 | 
30 | ```typescript
31 | window
32 | .initRDKitModule()
33 | .then((instance: RDKitModule) => {
34 |     // window.RDKit is loaded and will be typed as RDKitModule
35 |     window.RDKit = instance;
36 |     return instance;
37 | })
38 | ```
39 | 
40 | ## Step 3 - Manipulating typed molecules
41 | 
42 | Now, calling `window.RDKit.get_mol` will return a molecule object typed as `JSMol`.
43 | 
44 | ```typescript
45 | const smiles = "CC(=O)Oc1ccccc1C(=O)O";
46 | 
47 | // The type of mol will be JSMol because of the signature of `get_mol` in our TypeScript definitions.
48 | const firstMolecule = window.RDKit.get_mol(smiles);
49 | 
50 | // You can assign the type explicitly to the mol object if you want
51 | const secondMolecule: JSMol = window.RDKit.get_mol(smiles);
52 | ```
53 | 
54 | ## Step 4 - Instantiating a substructure library
55 | 
56 | Instantiating a substructure library with `new window.RDKit.SubStructLibrary` will also return an object of type `SubstructLibrary`.
57 | 
58 | ```typescript
59 | 
60 | // The type of sslib will be SubstructLibrary because we declared a constructor interface for the SubstructLibrary interface in our TypeScript definitions.
61 | const sslib = new window.RDKit.SubstructLibrary();
62 | 
63 | // You can assign the type explicitly to the substructure library object if you want
64 | const sslib2: SubstructLibrary = new window.RDKit.SubstructLibrary();
65 | ```
66 | 
67 | # Full type definitions
68 | 
69 | You can see all type definitions at [docs.rdkitjs.com](https://docs.rdkitjs.com).
70 | 


--------------------------------------------------------------------------------
/typescript/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Visit https://aka.ms/tsconfig to read more about this file
 4 |     // It is currently used to generate the API docs on top of the typescript definition file.
 5 |     "target": "es2016",                                  
 6 |     "module": "commonjs",                                
 7 |     "esModuleInterop": true,                             
 8 |     "forceConsistentCasingInFileNames": true,            
 9 |     "strict": true,                                      
10 |     "skipLibCheck": true,
11 |     "experimentalDecorators": true,                          
12 |   },
13 |   "include": [
14 |     "./index.d.ts"
15 |   ],
16 | }
17 | 


--------------------------------------------------------------------------------