Skip to content

Commit d941606

Browse files
NRayyaNRayya
committed
Move installation and events to wiki
1 parent 8ad3f59 commit d941606

1 file changed

Lines changed: 5 additions & 248 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 248 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,11 @@
11
# NMRium React Wrapper
22
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/)
3+
This React wrapper is designed to embed [NMRium](https://www.nmrium.org/), the NMR spectra processing tool, into other web application using iframe. It 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-
## 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-
```
27-
28-
### Local Development
29-
30-
- Builds Docker images:
31-
```bash
32-
docker build -t nmrium-rw:dev .
33-
```
34-
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-
```
46-
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.
5+
## Our Wiki
6+
Please find in [our wiki](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki) more details about:
7+
- [Installation](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki/Installation)
8+
- [Wrapper Events](https://github.com/NFDI4Chem/nmrium-react-wrapper/wiki/Wrapper-Events)
749

7510
## NMRium Version - Data Schema Version
7611

@@ -95,87 +30,6 @@ The production server will run on localhost:1337.
9530
- You can find examples of the NMRium Data Schema versions in the folder [Data Schema Versions](/public/data/Data%20Schema%20Versions/).
9631
- You can find the original NMR files used to generate the Data Schema examples [following this link](https://drive.google.com/drive/folders/1pzr-SBy3Zg4fN7F612XmodIRDS5KPr46).
9732

98-
## Wrapper Events
99-
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.
100-
101-
```ts
102-
import events from '../events';
103-
104-
events.trigger(eventName, data);
105-
106-
events.on(eventName, listenerHandler);
107-
108-
```
109-
110-
#### Events
111-
112-
| name | data/handler | description |
113-
|:---- |------------------- | :---- |
114-
| load | LoadData Object | load spectra and molecules |
115-
| error | (error:Error)=>ErrorHanlder | triggered once error happen at level of the wrapper |
116-
| dataChange | (data:NMRiumData)=>{} | triggered when changes happen on the side of NMRium |
117-
| actionRequest | ActionRequest Object | export spectra viewer as blob |
118-
| actionResponse | ActionResponse Object | export spectra viewer as blob |
119-
120-
#### Load spectra and molfile files:
121-
```ts
122-
import events from '../events';
123-
124-
events.trigger('load', {
125-
data: [File1,File2,....etc],
126-
type:"file"
127-
}
128-
);
129-
```
130-
131-
#### Load spectra and molfile from external URLs example:
132-
```ts
133-
import events from '../events';
134-
135-
events.trigger('load', {
136-
data: [
137-
'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
138-
'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip',
139-
...etc
140-
],
141-
type:"url"
142-
}
143-
);
144-
```
145-
146-
#### Load NMRium data example:
147-
148-
You can pass NMRium data that you get when you export the data from the NMRium or what you received from dataChange event
149-
```ts
150-
events.trigger('load', {
151-
data: {
152-
spectra:[
153-
source:{
154-
jcampURL:""
155-
}
156-
]
157-
},
158-
type:"nmrium"
159-
}
160-
);
161-
```
162-
163-
#### Error handler example:
164-
165-
```ts
166-
events.on('error', (error)=>{
167-
// you code here
168-
});
169-
```
170-
171-
#### Data change hander example:
172-
173-
```ts
174-
events.on('dataChange', (data)=>{
175-
// you code here
176-
});
177-
```
178-
17933
## Contribution
18034
### Contribute to The Code
18135
- **Branching**: Create a new branch from the`development`. The branch name should be all small with words separated by a hyphen.
@@ -199,100 +53,3 @@ Here you can find the links to NMRium and all the repositories we are aware of w
19953
- [NMRium](https://www.nmrium.org/)
20054
- [nmrXiv](https://nmrxiv.org/)
20155
- [Chemotion](https://www.chemotion.net/)
202-
=======
203-
```docker run -it --rm -p 1337:80 nmrium-rw:prod```
204-
205-
### Wrapper Events
206-
207-
NMRium wrapper uses a custom event to handle the communication between NMRium and the parent application, for that we create multiple events:
208-
209-
#### Events in action
210-
you can use the events helper functions or create message events manually.
211-
212-
1. Helper function
213-
214-
```ts
215-
import events from '../events';
216-
217-
events.trigger(eventName, data);
218-
219-
events.on(eventName, listenerHandler);
220-
221-
```
222-
223-
2. Message event
224-
225-
```ts
226-
window.postMessage({ type: `nmr-wrapper:${eventName}`, data }, '*');
227-
228-
window.addEventListener(`message`, listenerHandler)
229-
```
230-
231-
#### Events
232-
233-
| name | data/handler | description |
234-
|:---- |------------------- | :---- |
235-
| load | LoadData Object | load spectra and molecules |
236-
| error | (error:Error)=>ErrorHanlder | triggered once error happen at level of the wrapper |
237-
| dataChange | (data:NMRiumData)=>{} | triggered when changes happen on the side of NMRIum |
238-
239-
240-
241-
#### Load spectra and molfile files:
242-
```ts
243-
import events from '../events';
244-
245-
events.trigger('load', {
246-
data: [File1,File2,....etc],
247-
type:"file"
248-
}
249-
);
250-
```
251-
252-
#### Load spectra and molfile from external URLs example:
253-
```ts
254-
import events from '../events';
255-
256-
events.trigger('load', {
257-
data: [
258-
'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
259-
'https://cheminfo.github.io/bruker-data-test/data/zipped/aspirin-1h.zip',
260-
...etc
261-
],
262-
type:"url"
263-
}
264-
);
265-
```
266-
267-
#### Load NMRium data example:
268-
269-
You can pass NMRium data that you get when you export the data from the NMRium or what you received from dataChange event
270-
```ts
271-
events.trigger('load', {
272-
data: {
273-
spectra:[
274-
source:{
275-
jcampURL:""
276-
}
277-
]
278-
},
279-
type:"nmrium"
280-
}
281-
);
282-
```
283-
284-
#### Error handler example:
285-
286-
```ts
287-
events.on('error', (error)=>{
288-
// you code here
289-
});
290-
```
291-
292-
#### Data change hander example:
293-
294-
```ts
295-
events.on('dataChange', (data)=>{
296-
// you code here
297-
});
298-
```

0 commit comments

Comments
 (0)