Skip to content

Commit 0c2348d

Browse files
NishaSharma14NishaSharma14
authored
Merge pull request #102 from NFDI4Chem/development
Development
2 parents 84bb1e8 + 58f586c commit 0c2348d

9 files changed

Lines changed: 7858 additions & 7111 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@ To further enable integration in other applications developed with modern framew
1515

1616
#### Production:
1717

18-
[https://nmrium.nmrxiv.org](https://nmrium.nmrxiv.org) (currently - [v0.2.0](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.2.0))
18+
[https://nmrium.nmrxiv.org](https://nmrium.nmrxiv.org) (currently - [v0.3.0](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.3.0))
1919

2020
#### Development:
2121

2222
[https://nmriumdev.nmrxiv.org](https://nmriumdev.nmrxiv.org) (latest)
2323

2424
#### For older/specific versions
2525

26+
[https://nmrium.nmrxiv.org/releases/v0.2.0](https://nmrium.nmrxiv.org/releases/v0.3.0) -> [v0.2.0](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.3.0)
27+
2628
[https://nmrium.nmrxiv.org/releases/v0.2.0](https://nmrium.nmrxiv.org/releases/v0.2.0) -> [v0.2.0](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.2.0)
2729

2830
[https://nmrium.nmrxiv.org/releases/v0.1.0](https://nmrium.nmrxiv.org/releases/v0.1.0) -> [v0.1.0](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.1.0)
@@ -72,7 +74,7 @@ Raise an issue on GitHub - https://github.com/NFDI4Chem/nmrium-react-wrapper/iss
7274

7375
| NMRium React Wrapper Version | NMRium Version | NMRium Data Schema Version | Migration Script |
7476
|:---- |:--- | :---- | :---- |
75-
| [Latest-stable](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.2.0) | [v0.34.0](https://github.com/cheminfo/nmrium/releases/tag/v0.34.0) | [v4](/public/data/Data%20Schema%20Versions/V4/) | [Migration script](https://github.com/cheminfo/nmr-load-save/blob/master/src/migration/migrateToVersion3.ts) |
77+
| [Latest-stable](https://github.com/NFDI4Chem/nmrium-react-wrapper/releases/tag/v0.3.0) | [v0.36.0](https://github.com/cheminfo/nmrium/releases/tag/v0.36.0) | [v4](/public/data/Data%20Schema%20Versions/V4/) | [Migration script](https://github.com/cheminfo/nmr-load-save/blob/master/src/migration/migrateToVersion3.ts) |
7678

7779

7880
## License

‎package-lock.json‎

Lines changed: 1813 additions & 1254 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,13 @@
1010
"lib-cjs"
1111
],
1212
"volta": {
13-
"node": "18.13.0"
13+
"node": "20.2.0"
1414
},
1515
"dependencies": {
16-
"@emotion/react": "^11.10.6",
17-
"@vitejs/plugin-react-swc": "^3.2.0",
18-
"filelist-utils": "^1.8.0",
19-
"nmr-load-save": "^0.8.5",
20-
"nmrium": "^0.34.0",
21-
"react-router-dom": "^6.9.0"
16+
"@emotion/react": "^11.11.0",
17+
"filelist-utils": "^1.9.0",
18+
"nmr-load-save": "^0.11.5",
19+
"nmrium": "0.36.0"
2220
},
2321
"scripts": {
2422
"start": "vite --host localhost --port 3000 --open",
@@ -36,34 +34,36 @@
3634
"test-e2e-server": "serve -l tcp://localhost:3000 build"
3735
},
3836
"devDependencies": {
39-
"@babel/plugin-transform-modules-commonjs": "^7.21.2",
37+
"@babel/plugin-transform-modules-commonjs": "^7.21.5",
4038
"@babel/preset-react": "^7.18.6",
41-
"@babel/preset-typescript": "^7.21.0",
42-
"@playwright/test": "^1.32.1",
39+
"@babel/preset-typescript": "^7.21.5",
40+
"@playwright/test": "^1.33.0",
4341
"@simbathesailor/use-what-changed": "^2.0.0",
44-
"@types/jest": "^29.5.0",
45-
"@types/node": "^18.15.10",
46-
"@types/react": "^18.0.29",
47-
"@types/react-dom": "^18.0.11",
42+
"@types/jest": "^29.5.1",
43+
"@types/node": "^20.2.1",
44+
"@types/react": "^18.2.6",
45+
"@types/react-dom": "^18.2.4",
4846
"@types/react-router-dom": "^5.3.3",
49-
"@typescript-eslint/eslint-plugin": "^5.56.0",
50-
"@typescript-eslint/parser": "^5.56.0",
47+
"@typescript-eslint/eslint-plugin": "^5.59.6",
48+
"@typescript-eslint/parser": "^5.59.6",
49+
"@vitejs/plugin-react-swc": "^3.3.1",
5150
"cross-env": "^7.0.3",
52-
"eslint": "^8.36.0",
51+
"eslint": "^8.40.0",
5352
"eslint-config-airbnb": "^19.0.4",
5453
"eslint-config-prettier": "^8.8.0",
55-
"eslint-import-resolver-typescript": "^3.5.3",
54+
"eslint-import-resolver-typescript": "^3.5.5",
5655
"eslint-plugin-import": "^2.27.5",
5756
"eslint-plugin-jsx-a11y": "^6.7.1",
5857
"eslint-plugin-prettier": "^4.2.1",
5958
"eslint-plugin-react": "^7.32.2",
6059
"eslint-plugin-react-hooks": "^4.6.0",
6160
"jest": "^29.5.0",
62-
"prettier": "2.8.7",
61+
"prettier": "2.8.8",
6362
"react": "^18.2.0",
6463
"react-dom": "^18.2.0",
64+
"react-router-dom": "^6.11.2",
6565
"serve": "^14.2.0",
66-
"typescript": "^5.0.2",
67-
"vite": "^4.2.1"
66+
"typescript": "^5.0.4",
67+
"vite": "^4.3.8"
6868
}
6969
}

‎src/NMRiumWrapper.tsx‎

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useEffect, useState, useCallback, CSSProperties, useRef } from 'react';
33
import events from './events';
44
import { usePreferences } from './hooks/usePreferences';
55
import { useLoadSpectra } from './hooks/useLoadSpectra';
6+
import { useWhiteList } from './hooks/useWhiteList';
67

78
const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
89
container: {
@@ -30,11 +31,12 @@ const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
3031
export type { NMRiumData };
3132

3233
export default function NMRiumWrapper() {
34+
const { allowedOrigins, isFetchAllowedOriginsPending } = useWhiteList();
3335
const nmriumRef = useRef<NMRiumRef>(null);
3436
const [data, setDate] = useState<NMRiumData>();
3537
const { workspace, preferences } = usePreferences();
3638
const dataChangeHandler = useCallback<OnNMRiumChange>((state, source) => {
37-
events.trigger('data-change', { data: state, source });
39+
events.trigger('data-change', { state, source });
3840
}, []);
3941

4042
const { load: loadSpectra, isLoading, data: loadedData } = useLoadSpectra();
@@ -46,44 +48,52 @@ export default function NMRiumWrapper() {
4648
}, [isLoading, loadedData]);
4749

4850
useEffect(() => {
49-
const clearActionListener = events.on('action-request', (request) => {
50-
switch (request.type) {
51-
case 'exportSpectraViewerAsBlob': {
52-
const blob = nmriumRef.current?.getSpectraViewerAsBlob();
53-
if (blob) {
54-
events.trigger('action-response', {
55-
type: request.type,
56-
data: blob,
57-
});
51+
const clearActionListener = events.on(
52+
'action-request',
53+
(request) => {
54+
switch (request.type) {
55+
case 'exportSpectraViewerAsBlob': {
56+
const blob = nmriumRef.current?.getSpectraViewerAsBlob();
57+
if (blob) {
58+
events.trigger('action-response', {
59+
type: request.type,
60+
data: blob,
61+
});
62+
}
63+
break;
64+
}
65+
default: {
66+
throw new Error(
67+
`ERROR! Property 'type' accept only 'exportViewerAsBlob'.`,
68+
);
5869
}
59-
break;
60-
}
61-
default: {
62-
throw new Error(
63-
`ERROR! Property 'type' accept only 'exportViewerAsBlob'.`,
64-
);
6570
}
66-
}
67-
});
68-
const clearLoadListener = events.on('load', (loadData) => {
69-
switch (loadData.type) {
70-
case 'nmrium':
71-
setDate(loadData.data);
72-
break;
73-
case 'file':
74-
loadSpectra({ files: loadData.data });
75-
break;
76-
case 'url':
77-
loadSpectra({ urls: loadData.data });
78-
break;
71+
},
72+
{ allowedOrigins },
73+
);
74+
const clearLoadListener = events.on(
75+
'load',
76+
(loadData) => {
77+
switch (loadData.type) {
78+
case 'nmrium':
79+
setDate(loadData.data);
80+
break;
81+
case 'file':
82+
loadSpectra({ files: loadData.data });
83+
break;
84+
case 'url':
85+
loadSpectra({ urls: loadData.data });
86+
break;
7987

80-
default: {
81-
throw new Error(
82-
`ERROR! Property 'type' accept only nmrium, url or file.`,
83-
);
88+
default: {
89+
throw new Error(
90+
`ERROR! Property 'type' accept only nmrium, url or file.`,
91+
);
92+
}
8493
}
85-
}
86-
});
94+
},
95+
{ allowedOrigins },
96+
);
8797

8898
return () => {
8999
clearLoadListener();
@@ -93,11 +103,12 @@ export default function NMRiumWrapper() {
93103

94104
return (
95105
<div style={styles.container}>
96-
{isLoading && (
97-
<div style={styles.loadingContainer}>
98-
<span>Loading .... </span>
99-
</div>
100-
)}
106+
{isLoading ||
107+
(isFetchAllowedOriginsPending && (
108+
<div style={styles.loadingContainer}>
109+
<span>Loading .... </span>
110+
</div>
111+
))}
101112
<NMRium
102113
ref={nmriumRef}
103114
data={data}

‎src/allowed-origins.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"http://nmrium.nmrxiv.org",
44
"http://nmriumdev.nmrxiv.org",
55
"https://nmriumdev.nmrxiv.org",
6+
"https://nmrxiv.org",
7+
"https://dev.nmrxiv.org",
8+
"https://chemotion.uni-jena.de",
69
"http://localhost",
710
"http://localhost:3000",
811
"http://127.0.0.1:",

‎src/events/event.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { EventType, EventData } from './types';
2-
import ALLOWED_ORIGINS from '../allowed-origins.json';
32

43
const namespace = 'nmr-wrapper';
54

@@ -10,9 +9,14 @@ function trigger<T extends EventType>(type: T, data: EventData<T>) {
109
function on<T extends EventType>(
1110
type: T,
1211
dataListener: (data: EventData<T>) => void,
13-
options?: boolean | AddEventListenerOptions,
12+
options: {
13+
eventOptions?: boolean | AddEventListenerOptions;
14+
allowedOrigins?: string[];
15+
} = {},
1416
) {
15-
function listener(event: MessageEvent) {
17+
const { eventOptions, allowedOrigins = [] } = options;
18+
19+
async function listener(event: MessageEvent) {
1620
const {
1721
origin,
1822
data: { type: targetType, data },
@@ -21,17 +25,17 @@ function on<T extends EventType>(
2125
const url = new URL(origin);
2226

2327
const skipOriginCheck =
24-
ALLOWED_ORIGINS.length === 0 || ALLOWED_ORIGINS.includes('*');
28+
allowedOrigins.length === 0 || allowedOrigins.includes('*');
2529

26-
if (!skipOriginCheck && !ALLOWED_ORIGINS.includes(url.origin)) {
30+
if (!skipOriginCheck && !allowedOrigins.includes(url.origin)) {
2731
throw new Error(`Invalid Origin ${origin}`);
2832
}
2933

3034
if (`${namespace}:${type}` === targetType) {
3135
dataListener?.(data);
3236
}
3337
}
34-
window.addEventListener(`message`, listener, options);
38+
window.addEventListener(`message`, listener, eventOptions);
3539

3640
return () => window.removeEventListener(`message`, listener);
3741
}

‎src/events/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ type ActionResponse = {
3333
};
3434

3535
type DataChange = {
36-
data: NmriumState;
36+
state: NmriumState;
3737
source: 'data' | 'view' | 'settings';
3838
};
3939

‎src/hooks/useWhiteList.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useEffect, useState, useTransition } from 'react';
2+
3+
async function readAllowedOrigins() {
4+
return fetch(
5+
'https://raw.githubusercontent.com/NFDI4Chem/nmrium-react-wrapper/main/src/allowed-origins.json',
6+
).then((response) => response.json());
7+
}
8+
9+
export function useWhiteList() {
10+
const [allowedOrigins, setAllowedOrigins] = useState([]);
11+
const [isFetchAllowedOriginsPending, startTransition] = useTransition();
12+
13+
useEffect(() => {
14+
startTransition(() => {
15+
readAllowedOrigins().then((whitelist) => setAllowedOrigins(whitelist));
16+
});
17+
}, []);
18+
19+
return {
20+
allowedOrigins,
21+
isFetchAllowedOriginsPending,
22+
};
23+
}

0 commit comments

Comments
 (0)