Skip to content

Commit 1982bce

Browse files
hamed-musallamhamed-musallam
committed
Merge branch 'development' of https://github.com/NFDI4Chem/nmrium-react-wrapper into development
2 parents c129b60 + 8ba2da2 commit 1982bce

2 files changed

Lines changed: 255 additions & 12 deletions

File tree

‎Dockerfile‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,3 @@ RUN npm install --silent
1010
RUN npm install react-scripts@latest -g --silent
1111

1212
COPY . ./
13-
14-
CMD ["npm", "run" , "serve"]

‎README.md‎

Lines changed: 255 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,39 @@
1-
# nmr_displayer
1+
# NMRium React Wrapper
22

3-
Wrapping NMRium
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/)
44

5-
### local development
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/).
611

7-
```docker build -t nmrium-rw:dev .```
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+
```
827

28+
### Local Development
29+
30+
- Builds Docker images:
31+
```bash
32+
docker build -t nmrium-rw:dev .
933
```
34+
35+
- Run docker:
36+
```bash
1037
docker run \
1138
-it \
1239
--rm \
@@ -17,14 +44,232 @@ docker run \
1744
nmrium-rw:dev
1845
```
1946

20-
### local development (docker-compose)
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.
53+
54+
### Production Mode
55+
To improve the load time, you can run the app in production mode instead:
56+
57+
- Builds Docker images from the production docker file:
58+
```bash
59+
docker build -f Dockerfile.prod -t nmrium-rw:prod -m 8g .
60+
```
61+
62+
- Run docker:
63+
```bash
64+
docker run -it --rm -p 1337:80 nmrium-rw:prod
65+
```
66+
67+
- Start the development server by opening a new terminal and running:
68+
69+
```bash
70+
npm run build
71+
```
72+
73+
The production server will run on localhost:1337.
74+
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
77+
78+
```ts
79+
import events from '../events';
80+
81+
events.trigger(eventName, data);
82+
83+
events.on(eventName, listenerHandler);
84+
85+
```
86+
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:
98+
```ts
99+
import events from '../events';
100+
101+
events.trigger('load', {
102+
data: [File1,File2,....etc],
103+
type:"file"
104+
}
105+
);
106+
```
107+
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+
```
21122

22-
```docker-compose up -d --build```
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+
```
23139

24-
```docker-compose stop```
140+
#### Error handler example:
25141

26-
### production build
142+
```ts
143+
events.on('error', (error)=>{
144+
// you code here
145+
});
146+
```
147+
148+
#### Data change hander example:
149+
150+
```ts
151+
events.on('dataChange', (data)=>{
152+
// you code here
153+
});
154+
```
155+
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.
161+
162+
### Contributors
163+
- Hamed Musallam
164+
- Lan Bao Quang Le
165+
- Nisha Sharma
166+
- Noura Rayya
167+
- Venkata chandrasekhar Nainala (Chandu)
168+
169+
170+
## Versions Details
171+
Current NMRium version: 0.33.0
172+
173+
## Relevant Links
174+
Here you can find the links to NMRium and all the repositories we are aware of which use the wrapper.
175+
176+
- [NMRium](https://www.nmrium.org/)
177+
- [nmrXiv](https://nmrxiv.org/)
178+
- [Chemotion](https://www.chemotion.net/)
179+
=======
180+
```docker run -it --rm -p 1337:80 nmrium-rw:prod```
181+
182+
### Wrapper Events
183+
184+
NMRium wrapper uses a custom event to handle the communication between NMRium and the parent application, for that we create multiple events:
185+
186+
#### Events in action
187+
you can use the events helper functions or create message events manually.
188+
189+
1. Helper function
190+
191+
```ts
192+
import events from '../events';
193+
194+
events.trigger(eventName, data);
195+
196+
events.on(eventName, listenerHandler);
197+
198+
```
199+
200+
2. Message event
201+
202+
```ts
203+
window.postMessage({ type: `nmr-wrapper:${eventName}`, data }, '*');
204+
205+
window.addEventListener(`message`, listenerHandler)
206+
```
207+
208+
#### Events
209+
210+
| name | data/handler | description |
211+
|:---- |------------------- | :---- |
212+
| load | LoadData Object | load spectra and molecules |
213+
| error | (error:Error)=>ErrorHanlder | triggered once error happen at level of the wrapper |
214+
| dataChange | (data:NMRiumData)=>{} | triggered when changes happen on the side of NMRIum |
215+
216+
217+
218+
#### Load spectra and molfile files:
219+
```ts
220+
import events from '../events';
221+
222+
events.trigger('load', {
223+
data: [File1,File2,....etc],
224+
type:"file"
225+
}
226+
);
227+
```
228+
229+
#### Load spectra and molfile from external URLs example:
230+
```ts
231+
import events from '../events';
232+
233+
events.trigger('load', {
234+
data: [
235+
'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
236+
'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip',
237+
...etc
238+
],
239+
type:"url"
240+
}
241+
);
242+
```
243+
244+
#### Load NMRium data example:
245+
246+
You can pass NMRium data that you get when you export the data from the NMRium or what you received from dataChange event
247+
```ts
248+
events.trigger('load', {
249+
data: {
250+
spectra:[
251+
source:{
252+
jcampURL:""
253+
}
254+
]
255+
},
256+
type:"nmrium"
257+
}
258+
);
259+
```
260+
261+
#### Error handler example:
262+
263+
```ts
264+
events.on('error', (error)=>{
265+
// you code here
266+
});
267+
```
27268

28-
```docker build -f Dockerfile.prod -t nmrium-rw:prod -m 8g .```
269+
#### Data change hander example:
29270

30-
```docker run -it --rm -p 1337:80 nmrium-rw:prod```
271+
```ts
272+
events.on('dataChange', (data)=>{
273+
// you code here
274+
});
275+
```

0 commit comments

Comments
 (0)