Skip to content

Commit

Permalink
refactor: replace AlignSpectraModal with in-panel view (#2329)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wadjih-bencheikh18
wadjih-bencheikh18 authored Oct 23, 2023
1 parent 41c1657 commit 8cb92df
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 59 deletions.
85 changes: 52 additions & 33 deletions src/component/modal/AlignSpectraModal.tsx → ...ipleSpectraAnalysisPanel/AlignSpectra.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Formik } from 'formik';
import { xFindClosestIndex } from 'ml-spectra-processing';
import { Spectrum1D } from 'nmr-load-save';
import { useEffect, useState } from 'react';
import * as Yup from 'yup';

import { REFERENCES } from '../../data/constants/References';
import { CalibrateOptions } from '../../data/data1d/Spectrum1D/getReferenceShift';
import { useDispatch } from '../context/DispatchContext';
import Button from '../elements/Button';
import CloseButton from '../elements/CloseButton';
import { InputStyle } from '../elements/Input';
import Label, { LabelStyle } from '../elements/Label';
import Message from '../elements/Message';
import Select from '../elements/Select';
import FormikInput from '../elements/formik/FormikInput';
import useSpectraByActiveNucleus from '../hooks/useSpectraPerNucleus';
import Events from '../utility/Events';

import { ModalStyles } from './ModalStyle';
import { REFERENCES } from '../../../data/constants/References';
import { CalibrateOptions } from '../../../data/data1d/Spectrum1D/getReferenceShift';
import { useDispatch } from '../../context/DispatchContext';
import Button from '../../elements/Button';
import { InputStyle } from '../../elements/Input';
import Label, { LabelStyle } from '../../elements/Label';
import Message from '../../elements/Message';
import Select from '../../elements/Select';
import FormikInput from '../../elements/formik/FormikInput';
import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
import Events from '../../utility/Events';

const labelStyle: LabelStyle = {
label: { flex: 4, fontWeight: '500' },
Expand All @@ -34,9 +32,9 @@ const inputStyle: InputStyle = {

const baseList = [{ key: 1, value: 'manual', label: 'Manual' }];

interface AlignSpectraModalProps {
onClose?: (element?: string) => void;
interface AlignSpectraProps {
nucleus: any;
onClose: () => void;
}

const DEFAULT_OPTIONS: CalibrateOptions = {
Expand Down Expand Up @@ -93,18 +91,14 @@ function getList(nucleus) {
return baseList.concat(list as any);
}

function AlignSpectraModal({
onClose = () => null,
nucleus,
}: AlignSpectraModalProps) {
function AlignSpectra({ onClose = () => null, nucleus }: AlignSpectraProps) {
const spectra = useSpectraByActiveNucleus();
const dispatch = useDispatch();
const [options, setOptions] = useState<CalibrateOptions>(DEFAULT_OPTIONS);
const [error, setError] = useState<string>('');
function submitHandler(inputOptions) {
const options = checkOptions(inputOptions);
setOptions(options);

try {
checkSpectra(options, spectra as Spectrum1D[]);

Expand Down Expand Up @@ -143,8 +137,32 @@ function AlignSpectraModal({
}
const List = getList(nucleus);

const styles = css`
max-height: 100%;
padding: 10px 0 5px 20px;
display: flex;
flex-direction: column;
flex: 1;
.body {
overflow: auto;
padding: 10px 10px 25px 0;
}
.header {
padding: 5px 0;
font-size: 15px;
font-weight: bold;
}
.footer {
display: flex;
padding-top: 5px;
}
`;

return (
<div css={ModalStyles}>
<div css={styles}>
<Formik
initialValues={options}
enableReinitialize
Expand All @@ -154,14 +172,10 @@ function AlignSpectraModal({
>
{({ submitForm }) => (
<>
<div className="header handle">
<span>Spectra calibration</span>
<CloseButton onClick={onClose} className="close-bt" />
</div>
<div
className="inner-content"
style={{ flex: 1, minHeight: '220px' }}
>
<div className="body" style={{ flex: 1 }}>
<div className="header">
<span>Spectra calibration</span>
</div>
{error && <Message type="error">{error}</Message>}
<Label title="Options" style={labelStyle}>
<Select
Expand All @@ -187,8 +201,13 @@ function AlignSpectraModal({
<FormikInput name="targetX" type="number" style={inputStyle} />
</Label>
</div>
<div className="footer-container">
<Button.Done onClick={submitForm}>Done</Button.Done>
<div className="footer">
<Button.Done
style={{ padding: '5px 14px', fontSize: 14 }}
onClick={submitForm}
>
Done
</Button.Done>
</div>
</>
)}
Expand All @@ -197,4 +216,4 @@ function AlignSpectraModal({
);
}

export default AlignSpectraModal;
export default AlignSpectra;
47 changes: 21 additions & 26 deletions src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,15 @@ import { useChartData } from '../../context/ChartContext';
import { useDispatch } from '../../context/DispatchContext';
import ActiveButton from '../../elements/ActiveButton';
import Button from '../../elements/ButtonToolTip';
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 { DisplayerMode } from '../../reducer/Reducer';
import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
import { tablePanelStyle } from '../extra/BasicPanelStyle';
import DefaultPanelHeader from '../header/DefaultPanelHeader';
import PreferencesHeader from '../header/PreferencesHeader';

import AnalysisChart from './AnalysisChart';
import AlignSpectra from './AlignSpectra';
import MultipleSpectraAnalysisTable from './MultipleSpectraAnalysisTable';
import MultipleSpectraAnalysisPreferences from './preferences';

Expand All @@ -45,6 +43,7 @@ function MultipleSpectraAnalysisPanelInner({
displayerMode,
}: MultipleSpectraAnalysisPanelInnerProps) {
const [isFlipped, setFlipStatus] = useState(false);
const [calibration, setCalibration] = useState(false);
const spectraPreferences = usePanelPreferences('spectra', activeTab);
const preferences = usePanelPreferences('multipleSpectraAnalysis', activeTab);
const [showAnalysisChart, toggleAnalysisChart] = useToggle(false);
Expand All @@ -56,7 +55,6 @@ function MultipleSpectraAnalysisPanelInner({

const settingRef = useRef<any>();
const alert = useAlert();
const modal = useModal();
const dispatch = useDispatch();

const settingsPanelHandler = useCallback(() => {
Expand All @@ -74,14 +72,6 @@ function MultipleSpectraAnalysisPanelInner({
const showTrackerHandler = useCallback(() => {
dispatch({ type: 'TOGGLE_SPECTRA_LEGEND' });
}, [dispatch]);
const openAlignSpectra = useCallback(() => {
dispatch({ type: 'RESET_SELECTED_TOOL' });
modal.show(<AlignSpectraModal nucleus={activeTab} />, {
isBackgroundBlur: false,
position: positions.TOP_CENTER,
width: 500,
});
}, [activeTab, modal, dispatch]);

const { rawWriteWithType, cleanShouldFallback, shouldFallback, text } =
useClipboard();
Expand Down Expand Up @@ -124,7 +114,12 @@ function MultipleSpectraAnalysisPanelInner({
<>
<Button
popupTitle="Spectra calibration"
onClick={openAlignSpectra}
onClick={() => {
setCalibration((value) => {
if (value) dispatch({ type: 'RESET_SELECTED_TOOL' });
return !value;
});
}}
>
<SvgNmrOverlay style={{ fontSize: '16px' }} />
</Button>
Expand Down Expand Up @@ -160,24 +155,24 @@ function MultipleSpectraAnalysisPanelInner({
/>
)}
<div className="inner-container">
{!isFlipped ? (
<div style={{ overflow: 'auto' }}>
{showAnalysisChart && (
<AnalysisChart spectraAnalysisData={spectraAnalysis} />
)}
<MultipleSpectraAnalysisTable
data={spectraAnalysis}
resortSpectra={preferences.analysisOptions.resortSpectra}
activeTab={activeTab}
/>
</div>
) : (
{isFlipped ? (
<MultipleSpectraAnalysisPreferences
data={spectraAnalysis}
activeTab={activeTab}
onAfterSave={afterSaveHandler}
ref={settingRef}
/>
) : calibration ? (
<AlignSpectra
nucleus={activeTab}
onClose={() => setCalibration(false)}
/>
) : (
<MultipleSpectraAnalysisTable
data={spectraAnalysis}
resortSpectra={preferences.analysisOptions.resortSpectra}
activeTab={activeTab}
/>
)}
</div>
<ClipboardFallbackModal
Expand Down

0 comments on commit 8cb92df

Please sign in to comment.