zakodium-oss/react-ocl

React components integrating OpenChemLib

react-ocl's Issues

StructureEditor never updates when you change initialMolfile or initialIDCode programmatically

I created a wrapper that uses some code changes for an initial data structure. I wanted to update the molFile (or IDCode) and expected that once I updated the value - it automatically re-render the component (and structures), but this never happened. It seems like once you set the initial<something> it'd never be changed.

I checked the source code but don't see any solutions on how to approach that.

Thoughts?

Can we have just a SVG without div ?

https://github.com/zakodium-oss/react-ocl/blob/main/src/components/SvgRenderer.js#L78C6-L85

Instead of returning a

we could return a svg. This would require to get from the string the and add all his props.

It would be better if we insert this component in another SVG.

How to integrate in react application?

Functions are not working as tried in ReadMe file

weird color change

Seems the color of the SVG is different from expected. This is in particular shocking in the case of stereo bond. You select a 'abs' (red kind) and it becomes blue.

Seems blue and red are inverted

Change molecule in existing editor

There is the property initialMolfile that allows to set the molecule when creating the component.

I would need the possibility to change the molecule once the component has been loaded.

Is this possible ? If not it would be a nice feature to have.

No way to edit atoms on Safari iOs ?

I have no problems to add polycycles but trying to change an atom fails. It looks like it adds systematically an atom rather that replace the existing one.

It would be great to have a link to test the future version and check if this issue is solved.

Story book does not work on Safari iOs

Allow to change size of editor

Currently, if we change the size of the editor, it will be reset and lose its state.

Improve SVG renderer

Check that the molecule has changed instead of always rendering it

Query features missing 'any ring size' drop down menu

In order to test you need to set 'fragment' to true and then to go over an atom and press the q key.

The ring size drop down menu is missing. This is the expected preferences:

babelrc bug?

{
  "presets": ["react"],
  "env": {
    "es6": {
      "presets": [
        ["env", {"modules": false}]
      ]
    },
    "development": {
      "presets": [
        "env"
      ]
    }
  }
}

how do we deal with errors?

When a value is incorrect, such as a non-parseable SMILES. Throw? Warn and show some message?
We should check if there are existing recommendations.

Mouse out/leave not triggered when atoms overlap

Add arrows

Currently it is possible in the SvgRenderer to highlight some bonds and atoms.

Internally it use 'useHighlight' in order to change the style.

We would need the possibility to annotate the molecule using 'arrows'.

This means:

• SvgRenderer (and also SmilesSvgRenderer, IdcodeSvgRenderer and MolfileSvgRenderer) should allow a new property 'arrows'
• arrows is an array of object that contains 'atom1', 'atom2' and svg 'style' property (allows to change color, thickness, from, to), 'kind' (either a straight 'line' or 'curved' (an arc) , default 'line')

The coordinates of the center of the atoms can be found by searching the resulting SVG for the corresponding id and searching the cx and cy properties like in :

Once you have based on atom1 and atom2 the from / to of the arraw you should add it in the renderer

New properties in the storybook should be added in order to debug / test this new feature.

NB: Many arrows can be added at the same time