Skip to content

Commit 7aad137

Browse files
vcnainalavcnainala
authored
Update README.md
1 parent b487847 commit 7aad137

1 file changed

Lines changed: 47 additions & 150 deletions

File tree

‎README.md‎

Lines changed: 47 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,75 @@
1-
# NMRium React Wrapper
2-
3-
A React wrapper for [NMRium](https://www.nmrium.org/) that is already used in [nmrXiv](https://nmrxiv.org/) and [Chemotion](https://www.chemotion.net/), and we recommend to use it with any platform embedding [NMRium](https://www.nmrium.org/)
4-
5-
## Installation
6-
### Dependencies
7-
- [git](https://git-scm.com/).
8-
- [Docker Desktop](https://www.docker.com/products/docker-desktop).
9-
- [Node.js](https://nodejs.org/en/about/).
10-
- [React](https://reactjs.org/).
11-
12-
### Setup:
13-
- Start Docker.
14-
- Open your chosen directory in the terminal.
15-
- Clone the [project from Github](https://github.com/NFDI4Chem/nmrium-react-wrapper) by running:
16-
```bash
17-
git clone https://github.com/NFDI4Chem/nmrium-react-wrapper.git
18-
```
19-
- Go to the project directory:
20-
```bash
21-
cd nmrium-react-wrapper
22-
```
23-
- check out the development branch:
24-
```bash
25-
git checkout development
26-
```
1+
# NMRium React Wrapper
2+
[![License](https://img.shields.io/badge/License-MIT%202.0-blue.svg)](https://opensource.org/licenses/MIT)
3+
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-blue.svg)](https://github.com/NFDI4Chem/nmrium-react-wrapper/graphs/commit-activity)
4+
[![GitHub issues](https://img.shields.io/github/issues/NFDI4Chem/nmrium-react-wrapper.svg)](https://github.com/NFDI4Chem/nmrium-react-wrapper/issues)
5+
[![GitHub contributors](https://img.shields.io/github/contributors/NFDI4Chem/nmrium-react-wrapper.svg)](https://GitHub.com/NFDI4Chem/nmrium-react-wrapper/graphs/contributors/)
6+
![Workflow](https://github.com/NFDI4Chem/nmrium-react-wrapper/actions/workflows/dev-build.yml/badge.svg)
277

28-
### Local Development
8+
NMRium is a powerful tool for displaying and processing nuclear magnetic resonance (NMR) spectra. Based on the popular web framework React, NMRium is distributed as a react component which can be used as a standalone or embedded in an react web-application.
299

30-
- Builds Docker images:
31-
```bash
32-
docker build -t nmrium-rw:dev .
33-
```
10+
To further enable integration in other applications developed with modern frameworks, the nmrium-react-wrapper project enables an iframe-based integration of NMRium into third-party applications built on any modern frameworks.
3411

35-
- Run docker:
36-
```bash
37-
docker run \
38-
-it \
39-
--rm \
40-
-v ${PWD}:/app \
41-
-v /app/node_modules \
42-
-p 3001:3000 \
43-
-e CHOKIDAR_USEPOLLING=true \
44-
nmrium-rw:dev
45-
```
12+
## Usage
4613

47-
- Start the development server by opening a new terminal and running:
48-
```bash
49-
npm start
50-
```
51-
52-
The development server will run on localhost:3000.
14+
### Links
5315

54-
### Production Mode
55-
To improve the load time, you can run the app in production mode instead:
16+
#### Production:
5617

57-
- Builds Docker images from the production docker file:
58-
```bash
59-
docker build -f Dockerfile.prod -t nmrium-rw:prod -m 8g .
60-
```
18+
[https://nmrium.nmrxiv.org](https://nmrium.nmrxiv.org) (currently - v0.1.0)
6119

62-
- Run docker:
63-
```bash
64-
docker run -it --rm -p 1337:80 nmrium-rw:prod
65-
```
20+
#### Development:
6621

67-
- Start the development server by opening a new terminal and running:
22+
[https://nmriumdev.nmrxiv.org](https://nmriumdev.nmrxiv.org) (latest)
6823

69-
```bash
70-
npm run build
71-
```
24+
#### For older/specific versions
7225

73-
The production server will run on localhost:1337.
26+
Upcoming: [https://nmrium.nmrxiv.org/releases/v1.0.0](https://nmrium.nmrxiv.org/releases/v1.0.0)
7427

75-
## Wrapper Events
76-
NMRium wrapper uses a custom event to handle the communication between NMRium and the parent application, for that we create [MessageEvent](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent)s by using a [window interface](https://developer.mozilla.org/en-US/docs/Web/API/Window). We provide two events helper functions in /src/events/event.ts, which you can use by importing events
28+
[https://nmrium.nmrxiv.org/releases/v0.1.0](https://nmrium.nmrxiv.org/releases/v0.1.0)
7729

78-
```ts
79-
import events from '../events';
30+
### Embed
8031

81-
events.trigger(eventName, data);
32+
```
33+
<iframe href='https://nmriumdev.nmrxiv.org' height="500" width="100%"></iframe>
34+
```
8235

83-
events.on(eventName, listenerHandler);
36+
## Public Instance
8437

85-
```
38+
NFDI4Chem - Jena offers a public instance of the nmrium wrapper for third-party applications to integrate into their interface without deploying an instance. Applications can then communicate with the NMRium via our standardised communication events and offer seamless integration. NOTE: None of the data (loaded and processed with NMRium on the public instance) will not reach our servers. Data will never reach the backend server hosting the applications, so there are no privacy concerns.
8639

87-
#### Events
88-
89-
| name | data/handler | description |
90-
|:---- |------------------- | :---- |
91-
| load | LoadData Object | load spectra and molecules |
92-
| error | (error:Error)=>ErrorHanlder | triggered once error happen at level of the wrapper |
93-
| dataChange | (data:NMRiumData)=>{} | triggered when changes happen on the side of NMRium |
94-
| actionRequest | ActionRequest Object | export spectra viewer as blob |
95-
| actionResponse | ActionResponse Object | export spectra viewer as blob |
96-
97-
#### Load spectra and molfile files example:
98-
```ts
99-
import events from '../events';
100-
101-
events.trigger('load', {
102-
data: [File1,File2,....etc],
103-
type:"file"
104-
}
105-
);
106-
```
40+
To use the public instance in your application you need to whitelist your domain (local development doesnt need whitelisting).
10741

108-
#### Load spectra and molfile from external URLs example:
109-
```ts
110-
import events from '../events';
111-
112-
events.trigger('load', {
113-
data: [
114-
'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
115-
'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip',
116-
...etc
117-
],
118-
type:"url"
119-
}
120-
);
121-
```
42+
To get whitelisted, provide the following details via an email or raise a GitHub issue.
12243

123-
#### Load NMRium data example:
124-
125-
You can pass NMRium data that you get when you export the data from the NMRium or what you received from dataChange event
126-
```ts
127-
events.trigger('load', {
128-
data: {
129-
spectra:[
130-
source:{
131-
jcampURL:""
132-
}
133-
]
134-
},
135-
type:"nmrium"
136-
}
137-
);
138-
```
44+
* Domain:
45+
* Organisation:
46+
* Contact person (Name/Email):
47+
* Usage details (Optional):
13948

140-
#### Error handler example:
49+
Emailing: info@nmrxiv.org or helpdesk@nfdi4chem.de
14150

142-
```ts
143-
events.on('error', (error)=>{
144-
// you code here
145-
});
146-
```
51+
Raise an issue on GitHub - https://github.com/NFDI4Chem/nmrium-react-wrapper/issues
14752

148-
#### Data change handler example:
53+
## [Wiki](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki)
54+
- [Development](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki/2.-Installation)
55+
- [Wrapper Events](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki/3.-Wrapper-Events)
56+
- [Contribution](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki/5.-Contribution)
57+
- [Deployment](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki/4.-CI-CD)
14958

150-
```ts
151-
events.on('dataChange', (data)=>{
152-
// you code here
153-
});
154-
```
59+
## Versions
15560

156-
## Contribution
157-
### Contribute to The Code
158-
- **Branching**: Create a new branch from the`development`. The branch name should be all small with words separated by a hyphen.
159-
- **Pull requests**: Pull requests should go towards (also known as a PR) to the `development` branch. Please link the issues which the pull request solves ti it. Finally, assign a reviewer.
160-
- **Delete the stale branch**: After your branch is merged and the pull request is closed, please don't forget to delete your stale branch.
61+
| NMRium React Wrapper Version | NMRium Version | NMRium Data Schema Version | Migration Script |
62+
|:---- |:--- | :---- | :---- |
63+
| [Latest-stable](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.1.0) | [v0.33.0](https://github.com/cheminfo/nmrium/releases/tag/v0.33.0) | [v3](/public/data/Data%20Schema%20Versions/V3/) | [Migration script](https://github.com/cheminfo/nmr-load-save/blob/master/src/migration/migrateToVersion3.ts) |
64+
| v1.0.0 (upcoming) | v0.34.0 | [v4](/public/data/Data%20Schema%20Versions/V4/) | [Migration script](https://github.com/cheminfo/nmr-load-save/blob/master/src/migration/migrateToVersion4.ts) |
16165

162-
### Contributors
163-
- Hamed Musallam
164-
- Lan Bao Quang Le
165-
- Nisha Sharma
166-
- Noura Rayya
167-
- Venkata chandrasekhar Nainala (Chandu)
66+
## License
16867

68+
This project is licensed under the MIT License - see the [LICENSE](https://github.com/NFDI4Chem/nmrium-react-wrapper/blob/main/LICENSE) file for details
16969

170-
## Versions Details
171-
Current NMRium version: 0.33.0
70+
## Maintained by
71+
[NMRium React Wrapper](https://nmrium.nmrxiv.org) is developed and maintained by the [NFDI4Chem partners](https://www.nfdi4chem.de/) at the [Friedrich Schiller University](https://www.uni-jena.de/en/) Jena, Germany.
72+
The code for this web application is released under the [MIT license](https://opensource.org/licenses/MIT).
17273

173-
## Relevant Links
174-
Here you can find the links to NMRium and all the repositories we are aware of which use the wrapper.
17574

176-
- [NMRium](https://www.nmrium.org/)
177-
- [nmrXiv](https://nmrxiv.org/)
178-
- [Chemotion](https://www.chemotion.net/)
75+
<p align="left"><a href="https://nfdi4chem.de/" target="_blank"><img src="https://www.nfdi4chem.de/wp-content/themes/wptheme/assets/img/logo.svg" width="50%" alt="NFDI4Chem Logo"></a></p>

0 commit comments

Comments
 (0)