the first sub-packages will be:

• @rdkit/rdkit-js (already existing)
• @rdkit/rdkit-react
• @rdkit/rdkit-structure-renderer (pending approval by ptosco)

context:
rdkit/rdkit#5178
https://github.com/MichelML/rdkit-js/issues/60

Ideas for the strategy will be added eventually

see https://unpkg.com/@rdkit/[email protected]/Code/MinimalLib/dist/demo.html

See context of this issue here #150 (comment)

@heberleh more thoughts welcome here 👍

Is your feature request related to a problem? Please describe.
Not all drawing options are exposed in the additional options example.

Describe the solution you'd like
More can be exposed.

Describe alternatives you've considered
None

Additional context
N/A

Things such as smiles variants, inchikey, molblocks and more

The goal is to tell users to read it first as its the main reference for the API

https://unpkg.com/@rdkit/rdkit/Code/MinimalLib/dist/RDKit_minimal.js

redirects to

https://unpkg.com/@rdkit/[email protected]/Code/MinimalLib/dist/RDKit_minimal.js

which returns the following HTML error message:

Cannot find "/Code/MinimalLib/dist/RDKit_minimal.js" in @rdkit/[email protected]

Additional context:
Unpkg distribution files were available as recently as one day ago.

Is your feature request related to a problem? Please describe.
No.

Describe the solution you'd like
Right now, it looks like rdkit-js only have the ability to do the Substructure Search.

However, we need to have Tanimoto Similarity search. For example:
You send a smiles string/or rdkit.get_mol(smiles string) + the similarity level (like 80% or any similarity level you want), then the code will search through an array of smiles just like what Substructure Search did. Then the function will tell if it can reach the similarity level of not.

Describe alternatives you've considered
I reviewed the source code of RDKIT. It looks the function is already there: DataStructs.TanimotoSimilarity.
Will you be able to migrate the function and put it in the rdkit-js?

Additional context
None.

Is your feature request related to a problem? Please describe.

Hello, I want select atoms by clicking on them. I listen to the click events on atoms. With the css class, I could identify atom but hidden carbones aren't displayed. So I can't attach a click event handler.

Describe the solution you'd like

You could display hidden carbones with a transparent . In this case, I could attach a click event handler and create interactivity.

if atom-0 is a hidden carbon I expected a svg like this:

<ellipse class="atom-0 hidden" />
<path class="bond-0 atom-0 atom-1" />
<ellipse class="atom-1" />

instead of:

<path class="bond-0 atom-0 atom-1" />
<ellipse class="atom-1" />

Describe alternatives you've considered
I need to attach the click event to the bond (svg and analyse if the user is close to the hidden carbon to trigger an event like clicking on the ellipsis would.

Thanks

In the python package, I can generate an image with different colors for the highlighted atoms, but I can't via RDKit.js.

Example in python DrawMolecule api:

drawer.DrawMolecule(
        mol,
        highlightAtoms=[0,1],
        highlightBonds=[1,2],
        highlightAtomColors=[rgb1, rgb2],
        highlightBondColors=[rgb3, rgb4],
)

With RDKit.js I have only the highlightColour option.
RDKit.js options

 mol = this.get_molecule(smiles);
const svg = mol.get_svg_with_highlights(JSON.stringify({
        atoms: [0, 1],
        bonds: [1,2]
        highlightColour: [rgb]
}));

It would be great if I could have the same interface as python :

const svg = mol.get_svg_with_highlights(JSON.stringify({
        atoms: [0, 1],
        bonds: [1,2],
        highlightAtomColors=[rgb1, rgb2],
        highlightBondColors=[rgb3, rgb4],
}));

stack trace is here https://github.com/MichelML/rdkit-js/actions/runs/1788013129

I wonder if we'll have to automate this outside of GH. It works perfectly on my machine.

CI:

On PR to master:
- npm install
- build examples
- if everything pass, publish new website (on vercel)

Deploy GH action:
- use workflow_dispatch trigger with inputs: rdkit version + beta boolean
- simply run steps in https://github.com/rdkit/rdkit/tree/master/Code/MinimalLib#step-1-set-the-release-version-in-packagejson in GH action workflow

Describe the bug:
Unable to highlight dummy atom
I try make Smiles formula contain dummy atoms(represent by *), which should to be highlighted when displayed in 2D.
According to my code, it always highlights the atom with index 0, which shouldn't be highlighted.
To Reproduce
Steps to reproduce the behavior:
I embed rdkit.js in a vue code. Just focus on two input variables smiles and qsmiles . it's easy to reproduce:

const molData=reactive({
  data:{
    smiles: "C(*)1=C(*)C=C(C2=CC=CC=C2)C(*)=N1",   //RDKitModule.get_mol(smiles)
    qsmiles: "*",                                  //RDKitModule.get_qmol(qsmiles)
    addAtomIndices:true,
    ...
})

1. after js render, it return a figure like this:

Expected behavior

Desktop (please complete the following information):

• OS: [win10]
• Browser [chrome]
• Version [99.0.4844.74]

Additional context
-RDKit: Release_2022.03.1pre

Talking about the readme here: https://github.com/rdkit/rdkit/tree/master/Code/MinimalLib

When I draw more than 200 molecules in one page, the page reports OOM error.

Method: load the javascript file and instantiate the wasm module inside the head tag of index.html

Version: 2022.09.1

Browser: Edge

i want use some method like GenerateDepictionMatching2DStructure
How can i do that?

This will avoid to commit the build files here and have a clean custom domain rdkitjs.com

Main readme:

• - Intro
• - Quickstart
• - Examples/Documentation
• - How to contribute w/ link to sub-repo readme
• - Deploying
• - Contributors
• - Maintainers

Plain JavaScript demo:

• - Intro
• - How to contribute

React demo:

• - Intro
• - How to contribute

Add examples on how to use rdkit-js in a offline-first app

see context here #150 (comment)

Do you have a version of rdkit-js that is strictly javascript that does not require a wasm-module? I currently use smiles-drawer, however it lacks many features that rdkit-js has.

• https://github.com/MichelML/rdkit-js/issues/22
• https://github.com/MichelML/rdkit-js/issues/20
• https://github.com/MichelML/rdkit-js/issues/19
• https://github.com/MichelML/rdkit-js/issues/23
• https://github.com/MichelML/rdkit-js/issues/28
• #117
• https://github.com/MichelML/rdkit-js/issues/24

Remaining tasks before closing this:

• Bring the idea of another name because of history to Greg and others (rdkit-mini? rdkit-wasm?)
• Explain state of repository to Greg and others
• License review and suggest Valence Discovery in license
• Ask how should this be merge/transfer
• Bring discussion for rdkit-structure-renderer of ptosco being developed and published in context of this project
• Things to do post-transfer
  • Renaming github repo path reference from MichelML/rdkit-js to rdkit/rdkit-js
  • Adjust azure pipeline and related scripts
• #127 (and fix broken parts)
• #129
• #130
• #128

See the versioning scheme in readme here https://github.com/rdkit/rdkit-js#important-note-on-npm-versioning

Is your feature request related to a problem? Please describe.
Useful for quick development in React.js

Describe the solution you'd like
Title is self explanatory.

Describe alternatives you've considered
Not having a component or implementing it home made.

Additional context
None

cc @Ramb0a

Add attribution information (from atom or bond index) for the elements highlighted in the svg, this will be helpful for further coding

I super like the encoding and display format of svg, and I want to add some web interaction (click, doubleclick) to the 2D molecular graph generated by rdkit.js.
eg: Click on an atom or chemical bond to highlight it, means it is selected. Then return the index of the selected atom or chemical bond to the backend, and do further computationally intensive tasks in the backend.

I simply implemented the above idea through a series of svg native methods.

Put the highlight on top and add transparency. Click to change color, and return to index. But the current rdkitjs natively highlighted information does not have its index. This is the problem I meet.

###suggestion

My solution is map coordinates of the highlight and atom and bond，to find the smallest distance difference and get the solid item's index. BUT Map operation consumes performance

I think the ideal way is that When rdkit returns the svg, providing the index as the solid item, for each highlighted item.
(like: index information contained in the class as shown in the figure below)

Describe the bug

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <MoleculeStructure id="draw1" structure="NC(=O)CCC(N)C(=O)O" :width="350" :height="300"></MoleculeStructure>
  </div>
</template>

<script lang="ts">
  import { Options, Vue } from 'vue-class-component';
  import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
  import MoleculeStructure from '@/components/rdkit-js/examples/vue/src/components/MoleculeStructure.vue';

  @Options({
    components: {
      HelloWorld,
      MoleculeStructure,
    },
  })
  export default class Home extends Vue { }
</script>

bug goes below

MoleculeStructure.vue?0783:190 
    TypeError: window.initRDKitModule is not a function
    at eval (initRDKit.ts?c60a:16:1)
    at new Promise (<anonymous>)
    at eval (initRDKit.ts?c60a:15:1)
    at eval (MoleculeStructure.vue?0783:180:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164:1)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2682:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:339:1)
    at flushJobs (runtime-core.esm-bundler.js?5c40:393:1)

this is only for the deployment of the library which is manually triggered