Skip to content

Commit 891cb18

Browse files
hamed-musallamhamed-musallam
committed
feat: actions manager
1 parent 279f205 commit 891cb18

4 files changed

Lines changed: 57 additions & 198 deletions

File tree

‎src/NMRiumWrapper.tsx‎

Lines changed: 5 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
/** @jsxImportSource @emotion/react */
22
import { css } from '@emotion/react';
3-
import { useState, useCallback } from 'react';
43
import NMRium, { NMRiumData } from 'nmrium';
5-
6-
// import {
7-
// addJcampFromURL,
8-
// addJcamp,
9-
// toJSON,
10-
// } from "nmrium/lib/data/SpectraManager";
4+
import useActions from './hooks/useActions';
115

126
const styles = {
137
container: css`
@@ -36,212 +30,25 @@ export default function NMRiumWrapper(props: NMRWrapperProps) {
3630
{
3731
source: {
3832
jcampURL:
39-
'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.fid.jdx',
33+
'https://cheminfo.github.io/nmr-dataset-demo/cytisine/13c.jdx',
4034
},
4135
},
4236
],
4337
},
4438
} = props;
4539

46-
const [action, setAction] = useState();
47-
48-
// componentDidMount() {
49-
// this.loadJcamp();
50-
// }
51-
52-
// componentDidUpdate(prevProps) {
53-
// if (prevProps.jcampURL !== this.props.jcampURL) {
54-
// this.loadJcampURL();
55-
// }
56-
// if (prevProps.jcamp !== this.props.jcamp) {
57-
// this.loadJcamp();
58-
// }
59-
// if (prevProps.jcampFile !== this.props.jcampFile) {
60-
// this.loadLocalJcampFile();
61-
// }
62-
// }
63-
64-
const loadJcampURL = useCallback((event) => {
65-
// console.log(event.target.value)
66-
// this.setState({ operationSelected: event.target.value })
67-
setAction(event.targe?.value);
68-
}, []);
69-
70-
// loadJcampURL() {
71-
// const { jcampURL } = this.props;
72-
73-
// const spectra = [];
74-
75-
// fetch('/api/v1/chemspectra/nmr_displayer/'+jcampURL, {
76-
// method: 'GET',
77-
// headers: {
78-
// 'Accept': 'application/json',
79-
// 'Content-Type': 'application/json',
80-
// }
81-
// }).then((response) => {
82-
// return response.json();
83-
// });
84-
// .then((json) => {
85-
// // console.log(json.jcamp)
86-
// addJcamp(spectra, json.jcamp, {})
87-
// const spectraData = {spectra: spectra}
88-
// this.setState({spectraData: spectraData})
89-
// })
90-
// .catch((err) => {
91-
// console.error(err);
92-
// })
93-
// }
94-
95-
// const loadJcamp = useCallback(() =>{
96-
// const { jcamp } = this.props;
97-
// if (typeof jcamp === 'string') {
98-
// const spectra = [];
99-
// addJcamp(spectra, jcamp, {})
100-
// const spectraData = {spectra: spectra}
101-
// setData({spectraData: spectraData})
102-
// }
103-
// },[])
104-
105-
// loadLocalJcampFile() {
106-
// const { jcampFile } = this.props;
107-
// if (jcampFile) {
108-
// const spectra = [];
109-
// }
110-
// }
111-
112-
// savePeaks() {
113-
// const {workingData} = this.state;
114-
// if (workingData) {
115-
// const exportedData = toJSON(workingData)
116-
// // console.log(exportedData)
117-
// const spectra = exportedData.spectra;
118-
// if (spectra && spectra.length > 0) {
119-
// const firstSpc = spectra[0];
120-
// const spcPeaks = firstSpc.peaks.values;
121-
// const peaks = spcPeaks.map((pVal) => {
122-
// return pVal.delta.toFixed(2);
123-
// })
124-
// const info = firstSpc.info;
125-
// if (window.parent) {
126-
// window.parent.postMessage({type: 'peaks', data: peaks, layout: info.nucleus}, "*");
127-
// }
128-
129-
// }
130-
// }
131-
// }
132-
133-
// saveIntegrals() {
134-
// const {workingData} = this.state;
135-
// if (workingData) {
136-
// const exportedData = toJSON(workingData)
137-
// // console.log(exportedData)
138-
// const spectra = exportedData.spectra
139-
// if (spectra && spectra.length > 0) {
140-
// const firstSpc = spectra[0]
141-
// const spcIntegral = firstSpc.integrals.values
142-
// const integrals = spcIntegral.map((pVal) => {
143-
// return pVal.integral
144-
// })
145-
// // console.log(integrals)
146-
147-
// }
148-
// }
149-
// }
150-
151-
// saveRanges() {
152-
// const {workingData} = this.state;
153-
// if (workingData) {
154-
// const exportedData = toJSON(workingData)
155-
// // console.log(exportedData)
156-
// const spectra = exportedData.spectra
157-
// if (spectra && spectra.length > 0) {
158-
// const firstSpc = spectra[0]
159-
// const ranges = firstSpc.ranges
160-
// const spcPeaks = firstSpc.peaks.values;
161-
// const peaks = spcPeaks.map((pVal) => {
162-
// return pVal.delta.toFixed(2);
163-
// })
164-
// const info = firstSpc.info;
165-
// if (window.parent) {
166-
// window.parent.postMessage({type: 'ranges', data: {peaks: peaks, ranges: ranges}, layout: info.nucleus}, "*");
167-
// }
168-
// }
169-
// }
170-
// }
171-
172-
// handleSubmit(event) {
173-
// const {operationSelected} = this.state;
174-
// if (operationSelected === 'write_peaks') {
175-
// this.savePeaks()
176-
// }
177-
// else if (operationSelected === 'write_integrals') {
178-
// this.saveIntegrals()
179-
// }
180-
// else if (operationSelected === 'save_ranges') {
181-
// this.saveRanges()
182-
// }
183-
// }
184-
185-
// handleDataChange(data) {
186-
// if (data && data.data) {
187-
// this.setState({workingData: data})
188-
// // const exportedData = toJSON(data)
189-
// // // console.log(exportedData)
190-
// // const spectra = exportedData.spectra
191-
// // if (spectra && spectra.length > 0) {
192-
// // const firstSpc = spectra[0]
193-
// // const spcPeaks = firstSpc.peaks.values
194-
// // const peaks = spcPeaks.map((pVal) => {
195-
// // return pVal.delta
196-
// // })
197-
// // console.log(peaks)
198-
// // }
199-
// }
200-
201-
// }
202-
203-
const dataChangeHandle = useCallback((data) => {
204-
console.log(data);
205-
}, []);
206-
207-
const actionChangeHandler = useCallback((event) => {
208-
// console.log(event.target.value)
209-
// this.setState({ operationSelected: event.target.value })
210-
setAction(event.targe?.value);
211-
}, []);
40+
const actionHandler = useActions();
21241

21342
return (
21443
<div css={styles.container}>
21544
<div css={styles.header}>
21645
<span>header</span>
21746
</div>
218-
{/* <FormControl>
219-
<InputLabel className="select-sv-bar-label">Submit</InputLabel>
220-
<Select
221-
variant="outlined"
222-
onChange={actionChangeHandler}
223-
input={
224-
<OutlinedInput className="input-sv-bar-operation" labelWidth={50} />
225-
}
226-
>
227-
<MenuItem value="write_peaks">
228-
<span>Write peaks</span>
229-
</MenuItem> */}
230-
{/* <MenuItem value="write_integrals">
231-
<span>Write integrals</span>
232-
</MenuItem> */}
233-
{/* <MenuItem value="save_ranges">
234-
<span>Write ranges</span>
235-
</MenuItem>
236-
</Select>
237-
</FormControl>
238-
<FormControl> */}
239-
{/* <Button onClick={this.handleSubmit}>Submit</Button> */}
240-
{/* </FormControl> */}
47+
24148
<div css={styles.wrapper}>
24249
<NMRium
24350
data={data}
244-
onDataChange={dataChangeHandle}
51+
onDataChange={actionHandler}
24552
preferences={{
24653
toolBarButtons: {
24754
hideImport: true,

‎src/actions/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Action } from '../hooks/useActions';
2+
import * as Actions from 'nmrium/lib/component/reducer/types/Types';
3+
import peaksChangeHandler from './peaksChangeHandler';
4+
5+
export const ACTIONS: Action[] = [
6+
{
7+
names: [
8+
Actions.ADD_PEAK,
9+
Actions.DELETE_PEAK_NOTATION,
10+
Actions.SHIFT_SPECTRUM,
11+
],
12+
handler: peaksChangeHandler,
13+
},
14+
];

‎src/actions/peaksChangeHandler.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { State } from 'nmrium/lib/component/reducer/Reducer';
2+
3+
export default function peaksChangeHandler(data: State) {
4+
if (window.parent && data.activeSpectrum?.id) {
5+
const { peaks, info } = data.data[data.activeSpectrum.index] as any;
6+
console.log(peaks, info);
7+
window.parent.postMessage(
8+
{ type: 'peaks', data: peaks, layout: info.nucleus },
9+
'*',
10+
);
11+
}
12+
}

‎src/hooks/useActions.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { State } from 'nmrium/lib/component/reducer/Reducer';
2+
import { useCallback, useEffect, useRef } from 'react';
3+
import { ACTIONS } from '../actions';
4+
5+
type Handler = (data: State) => void;
6+
export interface Action {
7+
names: string[];
8+
handler: Handler;
9+
}
10+
11+
export default function useActions() {
12+
const mapActions = useRef<Record<string, Handler>>({});
13+
14+
useEffect(() => {
15+
mapActions.current = ACTIONS.reduce((acc, action) => {
16+
action.names.forEach((actionName) => {
17+
acc[actionName] = action.handler;
18+
});
19+
return acc;
20+
}, {});
21+
}, []);
22+
23+
return useCallback((data: State) => {
24+
mapActions.current[data.actionType]?.(data);
25+
}, []);
26+
}

0 commit comments

Comments
 (0)