{"id":15140806,"url":"https://github.com/autodesk/molecule-2d-for-react","last_synced_at":"2025-09-29T10:30:34.792Z","repository":{"id":57301154,"uuid":"64892228","full_name":"Autodesk/molecule-2d-for-react","owner":"Autodesk","description":"2D molecule visualization component","archived":true,"fork":false,"pushed_at":"2016-11-02T22:18:56.000Z","size":218,"stargazers_count":21,"open_issues_count":2,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-20T11:23:30.181Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://moldesign.bionano.autodesk.com/","language":"ApacheConf","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Autodesk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-04T01:40:02.000Z","updated_at":"2023-09-11T22:32:17.000Z","dependencies_parsed_at":"2022-09-05T15:31:44.160Z","dependency_job_id":null,"html_url":"https://github.com/Autodesk/molecule-2d-for-react","commit_stats":null,"previous_names":["autodesk/nbmolviz2d"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Fmolecule-2d-for-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Fmolecule-2d-for-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Fmolecule-2d-for-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Fmolecule-2d-for-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Autodesk","download_url":"https://codeload.github.com/Autodesk/molecule-2d-for-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234609320,"owners_count":18859849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-26T08:41:27.272Z","updated_at":"2025-09-29T10:30:34.457Z","avatar_url":"https://github.com/Autodesk.png","language":"ApacheConf","readme":"# Molecule2d\n[![Build Status](https://travis-ci.org/Autodesk/molecule-2d-for-react.svg?branch=master)](https://travis-ci.org/Autodesk/molecule-2d-for-react)\n\nThis project provides a React component that displays an interactive 2D representation of any molecule using D3.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Autodesk/molecule-2d-for-react/master/doc/viewer_screenshot.png\" alt=\"screen shot\" width=\"300\" /\u003e\n\n## Installation\n\n    npm install molecule-2d-for-react\n\n## Usage\n  \u003cMolecule2d\n    modelData={{\n      nodes: [\n        { id: 0, atom: 'H' },\n        ...\n      ],\n      links: [\n        { id: 0, source: 0, target: 1, strength: 1, distance: 30.0, bond: 1 },\n        ...\n      ],\n    }}\n  /\u003e\n\nSee example/js/main.js for a working example.\n\n## Props\nIn order to set up your molecule visualization, just pass in the proper props data to the React component. Here are all of the parameters with explanations:\n\n### modelData {Object} Required\nAn object indicating the atoms an bonds to display.  Of the form:\n\n    {\n      nodes: [\n        { id: 0, atom: 'H' },\n        ...\n      ],\n      links: [\n        { id: 0, source: 0, target: 1, strength: 1, distance: 30.0, bond: 1 },\n        ...\n      ],\n    }\n\nSee example/js/bipyridine.js for an example of working modelData for a real molecule.\n\n### selectedAtomIds {Array of Numbers} [[]]\nAn array of atom ids to display as selected.  This is deep copied into internal state and updated whenever the user clicks on an atom.  See the `onChangeSelection` method below for how to listen to selection changes.\n\n### width {Number} [500]\nThe width of the SVG element.\n\n### height {Number} [500]\nThe height of the SVG element.\n\n### onChangeSelection {Function}\nCalled whenever selectedAtomIds is changed.  Passed selectedAtomIds.\n\n## Use in a Jupyter notebook\nIt's also very easy to adapt this to work in a Jupyter Notebook as an [ipywidgets](https://github.com/ipython/ipywidgets) module, as it was made for the [Molecular Design Toolkit](https://github.com/Autodesk/molecular-design-toolkit) project. The [source code](https://github.com/Autodesk/notebook-molecular-visualization/blob/30e843393135d8b2d78ac055a6e366eb9c0ffde9/js/src/nbmolviz_2d_component.jsx) shows how this was done by wrapping this project in a Backbone view.\n\n## What about 3d?\nTake a look at our sister project, [molecule-3d-for-react](https://github.com/Autodesk/molecule-3d-for-react), for a React component with a similar interface that renders a 3d visualization.\n\n## Development\nA typical development flow might be to run the example while editing the code, where you'll want any changes to be immediately reflected in the example running in the browser.  In that case you should run:\n\n    npm run example\n\n### Development within another project\nIf you're using this in another project and want to make changes to this repository locally and see them reflected in your other project, first you'll need to do some setup.  You can point your other project to use the local copy of Molecule2d like this:\n\n    cd ~/path/to/molecule-2d-for-react\n    npm link\n    cd ~/path/to/other-project\n    npm link molecule-2d-for-react\n\nSee [this great blog post](http://justjs.com/posts/npm-link-developing-your-own-npm-modules-without-tears) for more info on `npm link`.\n\nOnce you've linked your other project, you'll need to build Molecule2d (and likely your other project, too) every time you want your changes to reflect in your other project.  You can do this manually with `npm run build`.  If you want to rebuild Molecule2d automatically every time a change is made, run `npm run watch`.\n\n### Running Tests\nUnit tests can be run with:\n\n    npm test\n\nEnd-to-end tests can be run with:\n\n    npm run e2e\n\n### Releasing a new version\nTravis automatically publishes any new tagged commit to NPM.  The best way to take advantage of this is to first create a new tagged commit using `npm version`:\n\n    npm version patch -m \"Upgrade to %s for reasons\"\n\nThen push that commit to a new release branch, push the tag with `git push origin --tags` and open a pull request on Github.  When you see that Travis has succeeded in deploying, merge it to master.\n\n## License\n\nCopyright 2016 Autodesk Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in compliance with the License. You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.\n\n\n## Contributing\n\nThis project is developed and maintained by the [Molecular Design Toolkit](https://github.com/autodesk/molecular-design-toolkit) project. Please see that project's [CONTRIBUTING document](https://github.com/autodesk/molecular-design-toolkit/CONTRIBUTING.md) for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk%2Fmolecule-2d-for-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautodesk%2Fmolecule-2d-for-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk%2Fmolecule-2d-for-react/lists"}