From e678ed516fa3ca49050aa41d9ef40b674e0e39e2 Mon Sep 17 00:00:00 2001 From: wadjih-bencheikh18 Date: Fri, 28 Apr 2023 16:46:27 +0100 Subject: [PATCH 1/7] refactor: alignSpectraModal using react-science modal --- src/component/modal/AlignSpectraModal.tsx | 104 ++++++++++-------- .../MultipleSpectraAnalysisPanel.tsx | 22 +--- 2 files changed, 60 insertions(+), 66 deletions(-) diff --git a/src/component/modal/AlignSpectraModal.tsx b/src/component/modal/AlignSpectraModal.tsx index 003eee6a5..f0274febb 100644 --- a/src/component/modal/AlignSpectraModal.tsx +++ b/src/component/modal/AlignSpectraModal.tsx @@ -1,11 +1,13 @@ /** @jsxImportSource @emotion/react */ +import { SvgNmrOverlay } from 'cheminfo-font'; import { Formik } from 'formik'; import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { Modal, useOnOff } from 'react-science/ui'; import { REFERENCES } from '../../data/constants/References'; import { useDispatch } from '../context/DispatchContext'; import Button from '../elements/Button'; -import CloseButton from '../elements/CloseButton'; +import ButtonToolTip from '../elements/ButtonToolTip'; import Label from '../elements/Label'; import Select from '../elements/Select'; import FormikInput from '../elements/formik/FormikInput'; @@ -75,54 +77,62 @@ function AlignSpectraModal({ [nucleus], ); + const [isOpenDialog, openDialog, closeDialog] = useOnOff(false); return ( -
-
- Spectra calibration - -
-
- - <> -
- Options : + <> + + + - +
+
+ Range : + + +
+
+ +
+
+ +
+ + +
+
+ Done +
+
+ + ); } diff --git a/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx b/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx index 945aa7466..dafd803d9 100644 --- a/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx +++ b/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx @@ -1,6 +1,5 @@ /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; -import { SvgNmrOverlay } from 'cheminfo-font'; import { Spectrum1D } from 'nmr-load-save'; import { useCallback, useState, useRef, memo } from 'react'; import { FaFileExport } from 'react-icons/fa'; @@ -14,14 +13,10 @@ import { useChartData } from '../../context/ChartContext'; import { useDispatch } from '../../context/DispatchContext'; import Button from '../../elements/ButtonToolTip'; import ToggleButton from '../../elements/ToggleButton'; -import { positions, useAlert } from '../../elements/popup/Alert'; -import { useModal } from '../../elements/popup/Modal'; +import { useAlert } from '../../elements/popup/Alert'; import { usePanelPreferences } from '../../hooks/usePanelPreferences'; import AlignSpectraModal from '../../modal/AlignSpectraModal'; -import { - RESET_SELECTED_TOOL, - TOGGLE_SPECTRA_LEGEND, -} from '../../reducer/types/Types'; +import { TOGGLE_SPECTRA_LEGEND } from '../../reducer/types/Types'; import { copyTextToClipboard } from '../../utility/export'; import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus'; import { tablePanelStyle } from '../extra/BasicPanelStyle'; @@ -54,7 +49,6 @@ function MultipleSpectraAnalysisPanelInner({ const settingRef = useRef(); const alert = useAlert(); - const modal = useModal(); const dispatch = useDispatch(); const settingsPanelHandler = useCallback(() => { @@ -72,14 +66,6 @@ function MultipleSpectraAnalysisPanelInner({ const showTrackerHandler = useCallback(() => { dispatch({ type: TOGGLE_SPECTRA_LEGEND }); }, [dispatch]); - const openAlignSpectra = useCallback(() => { - dispatch({ type: RESET_SELECTED_TOOL }); - modal.show(, { - isBackgroundBlur: false, - position: positions.TOP_CENTER, - width: 500, - }); - }, [activeTab, modal, dispatch]); const copyToClipboardHandler = useCallback(() => { void (async () => { @@ -122,9 +108,7 @@ function MultipleSpectraAnalysisPanelInner({ > - + Date: Thu, 27 Jul 2023 21:34:26 +0100 Subject: [PATCH 2/7] refactor: fix align spectra modal style --- src/component/modal/AlignSpectraModal.tsx | 26 +++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/component/modal/AlignSpectraModal.tsx b/src/component/modal/AlignSpectraModal.tsx index 746df2bac..b807cc1cd 100644 --- a/src/component/modal/AlignSpectraModal.tsx +++ b/src/component/modal/AlignSpectraModal.tsx @@ -1,4 +1,5 @@ /** @jsxImportSource @emotion/react */ +import { css } from '@emotion/react'; import { SvgNmrOverlay } from 'cheminfo-font'; import { Formik } from 'formik'; import { useCallback, useEffect, useMemo, useRef } from 'react'; @@ -51,6 +52,7 @@ function AlignSpectraModal({ return baseList.concat(list as any); }, [nucleus]); + const [isOpenDialog, openDialog, closeDialog] = useOnOff(false); const handleSave = useCallback(() => { refForm.current.submitForm(); }, []); @@ -59,8 +61,9 @@ function AlignSpectraModal({ (values) => { dispatch({ type: 'ALIGN_SPECTRA', payload: values }); onClose(); + closeDialog(); }, - [dispatch, onClose], + [closeDialog, dispatch, onClose], ); useEffect(() => { @@ -89,15 +92,30 @@ function AlignSpectraModal({ [nucleus], ); - const [isOpenDialog, openDialog, closeDialog] = useOnOff(false); + const styles = css` + .header { + display: flex; + justify-content: center; + padding: 0; + } + `; + return ( <> - -
+ { + onClose(); + closeDialog(); + }} + maxWidth={1000} + > +
Spectra calibration From eb3e1fcef9255ae6764636d23638e3f8400fd177 Mon Sep 17 00:00:00 2001 From: wadjih-bencheikh18 Date: Mon, 31 Jul 2023 10:56:51 +0100 Subject: [PATCH 3/7] fix: on open align-spectra-modal and style --- src/component/modal/AlignSpectraModal.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/component/modal/AlignSpectraModal.tsx b/src/component/modal/AlignSpectraModal.tsx index b807cc1cd..c05b2f7ca 100644 --- a/src/component/modal/AlignSpectraModal.tsx +++ b/src/component/modal/AlignSpectraModal.tsx @@ -53,6 +53,12 @@ function AlignSpectraModal({ return baseList.concat(list as any); }, [nucleus]); const [isOpenDialog, openDialog, closeDialog] = useOnOff(false); + + const openHandler = useCallback(() => { + dispatch({ type: 'RESET_SELECTED_TOOL' }); + openDialog(); + }, [dispatch, openDialog]); + const handleSave = useCallback(() => { refForm.current.submitForm(); }, []); @@ -94,15 +100,16 @@ function AlignSpectraModal({ const styles = css` .header { - display: flex; - justify-content: center; padding: 0; } + div:has(.header) { + justify-content: center; + } `; return ( <> - + From 5a87731c10f8b6771ca9b085ecbe069dd5bdc39d Mon Sep 17 00:00:00 2001 From: wadjih-bencheikh18 Date: Mon, 31 Jul 2023 10:58:04 +0100 Subject: [PATCH 4/7] fix: stylelint --- src/component/modal/AlignSpectraModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/modal/AlignSpectraModal.tsx b/src/component/modal/AlignSpectraModal.tsx index c05b2f7ca..ba8c1c8e9 100644 --- a/src/component/modal/AlignSpectraModal.tsx +++ b/src/component/modal/AlignSpectraModal.tsx @@ -102,6 +102,7 @@ function AlignSpectraModal({ .header { padding: 0; } + div:has(.header) { justify-content: center; } From fc69fe26d8d8ec81a0aa88fe84fecddab0101665 Mon Sep 17 00:00:00 2001 From: wadjih-bencheikh18 Date: Thu, 17 Aug 2023 23:04:44 +0100 Subject: [PATCH 5/7] refactor: integrate AlignSpectra in MultipleSpectraAnalysisPanel --- src/component/modal/AlignSpectraModal.tsx | 183 ------------------ .../AlignSpectra.tsx | 163 ++++++++++++++++ .../MultipleSpectraAnalysisPanel.tsx | 30 ++- 3 files changed, 185 insertions(+), 191 deletions(-) delete mode 100644 src/component/modal/AlignSpectraModal.tsx create mode 100644 src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx diff --git a/src/component/modal/AlignSpectraModal.tsx b/src/component/modal/AlignSpectraModal.tsx deleted file mode 100644 index ba8c1c8e9..000000000 --- a/src/component/modal/AlignSpectraModal.tsx +++ /dev/null @@ -1,183 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import { css } from '@emotion/react'; -import { SvgNmrOverlay } from 'cheminfo-font'; -import { Formik } from 'formik'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; -import { Modal, useOnOff } from 'react-science/ui'; - -import { REFERENCES } from '../../data/constants/References'; -import { useDispatch } from '../context/DispatchContext'; -import Button from '../elements/Button'; -import ButtonToolTip from '../elements/ButtonToolTip'; -import { InputStyle } from '../elements/Input'; -import Label, { LabelStyle } from '../elements/Label'; -import Select from '../elements/Select'; -import FormikInput from '../elements/formik/FormikInput'; -import Events from '../utility/Events'; - -import { ModalStyles } from './ModalStyle'; - -const labelStyle: LabelStyle = { - label: { flex: 4, fontWeight: '500' }, - wrapper: { flex: 8, display: 'flex', alignItems: 'center' }, - container: { padding: '5px 0' }, -}; - -const inputStyle: InputStyle = { - input: { - padding: '5px', - }, -}; - -const baseList = [{ key: 1, value: 'manual', label: 'Manual' }]; - -interface AlignSpectraModalProps { - onClose?: (element?: string) => void; - nucleus: any; -} - -function AlignSpectraModal({ - onClose = () => null, - nucleus, -}: AlignSpectraModalProps) { - const refForm = useRef(); - const dispatch = useDispatch(); - const List = useMemo(() => { - const list = REFERENCES[nucleus] - ? Object.entries(REFERENCES[nucleus]).map((item) => ({ - value: item[0], - label: item[0], - })) - : []; - - return baseList.concat(list as any); - }, [nucleus]); - const [isOpenDialog, openDialog, closeDialog] = useOnOff(false); - - const openHandler = useCallback(() => { - dispatch({ type: 'RESET_SELECTED_TOOL' }); - openDialog(); - }, [dispatch, openDialog]); - - const handleSave = useCallback(() => { - refForm.current.submitForm(); - }, []); - - const submitHandler = useCallback( - (values) => { - dispatch({ type: 'ALIGN_SPECTRA', payload: values }); - onClose(); - closeDialog(); - }, - [closeDialog, dispatch, onClose], - ); - - useEffect(() => { - function handler(event: any) { - const [from, to] = event.range; - refForm.current.setValues({ ...refForm.current.values, from, to }); - } - - Events.on('brushEnd', handler); - - return () => { - Events.off('brushEnd', handler); - }; - }, []); - - const optionChangeHandler = useCallback( - (id) => { - const value = REFERENCES[nucleus][id]; - const { delta = 0, ...resValues } = value || { delta: 0 }; - refForm.current.setValues({ - ...refForm.current.values, - targetX: delta, - ...resValues, - }); - }, - [nucleus], - ); - - const styles = css` - .header { - padding: 0; - } - - div:has(.header) { - justify-content: center; - } - `; - - return ( - <> - - - - - { - onClose(); - closeDialog(); - }} - maxWidth={1000} - > -
- -
- Spectra calibration -
- - -
- - <> - + + + + + + + +
+
+ + Save + +
+
+ ); +} + +export default AlignSpectra; diff --git a/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx b/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx index 4ba96cff7..c46aae159 100644 --- a/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx +++ b/src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx @@ -1,5 +1,6 @@ /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; +import { SvgNmrOverlay } from 'cheminfo-font'; import { Spectrum1D } from 'nmr-load-save'; import { useCallback, useState, useRef, memo } from 'react'; import { FaFileExport } from 'react-icons/fa'; @@ -17,12 +18,12 @@ import Button from '../../elements/ButtonToolTip'; import ToggleButton from '../../elements/ToggleButton'; import { useAlert } from '../../elements/popup/Alert'; import { usePanelPreferences } from '../../hooks/usePanelPreferences'; -import AlignSpectraModal from '../../modal/AlignSpectraModal'; import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus'; import { tablePanelStyle } from '../extra/BasicPanelStyle'; import DefaultPanelHeader from '../header/DefaultPanelHeader'; import PreferencesHeader from '../header/PreferencesHeader'; +import AlignSpectra from './AlignSpectra'; import MultipleSpectraAnalysisTable from './MultipleSpectraAnalysisTable'; import MultipleSpectraAnalysisPreferences from './preferences'; @@ -38,6 +39,7 @@ function MultipleSpectraAnalysisPanelInner({ showLegend, }: MultipleSpectraAnalysisPanelInnerProps) { const [isFlipped, setFlipStatus] = useState(false); + const [calibration, setCalibration] = useState(false); const spectraPreferences = usePanelPreferences('spectra', activeTab); const preferences = usePanelPreferences('multipleSpectraAnalysis', activeTab); @@ -104,7 +106,14 @@ function MultipleSpectraAnalysisPanelInner({ > - + )}
- {!isFlipped ? ( - + ) : calibration ? ( + setCalibration(false)} /> ) : ( - )}
From 65a54f5a71242cff82083c74c8771e0122eb7ded Mon Sep 17 00:00:00 2001 From: wadjih-bencheikh18 Date: Thu, 17 Aug 2023 23:37:52 +0100 Subject: [PATCH 6/7] refactor: to fix stylelint --- .../panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx b/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx index f7cef93b3..77b146d99 100644 --- a/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx +++ b/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx @@ -143,6 +143,7 @@ function AlignSpectra({ onClose = () => null, nucleus }: AlignSpectraProps) { display: flex; flex-direction: column; flex: 1; + .body { overflow: auto; padding: 5px 0; @@ -153,6 +154,7 @@ function AlignSpectra({ onClose = () => null, nucleus }: AlignSpectraProps) { font-size: 15; font-weight: bold; } + .footer { display: flex; padding-top: 5px; From 328cff02bc5afefabc1f59bd6b303d1a350011bd Mon Sep 17 00:00:00 2001 From: wadjih-bencheikh18 Date: Thu, 17 Aug 2023 23:53:32 +0100 Subject: [PATCH 7/7] refactor: AlignSpectra style --- .../AlignSpectra.tsx | 109 ++++++++---------- 1 file changed, 48 insertions(+), 61 deletions(-) diff --git a/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx b/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx index 77b146d99..3e8bfc570 100644 --- a/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx +++ b/src/component/panels/MultipleSpectraAnalysisPanel/AlignSpectra.tsx @@ -146,7 +146,7 @@ function AlignSpectra({ onClose = () => null, nucleus }: AlignSpectraProps) { .body { overflow: auto; - padding: 5px 0; + padding: 10px 10px 25px 0; } .header { @@ -163,68 +163,55 @@ function AlignSpectra({ onClose = () => null, nucleus }: AlignSpectraProps) { return (
-
-
- Spectra calibration -
- setError('')} - > - {({ submitForm }) => ( - <> -
- {error && {error}} - + +
-
- - Done - -
- - )} - -
+ + + + +
+
+ + Done + +
+ + )} +
); }