Skip to content

Commit

Permalink
fix: filters live preview (#2620)
Browse files Browse the repository at this point in the history 
* fix: filters live preview

refactor: apodization filter options panel and action
refactor : baseline correction options panel and action
refactor : zero filling options panel and action

close #2605

* refactor: types
  • Loading branch information
@hamed-musallam
hamed-musallam committed Aug 16, 2023
1 parent 4f8660b commit b798502
Show file tree
Hide file tree
Showing 5 changed files with 331 additions and 234 deletions.
157 changes: 83 additions & 74 deletions src/component/header/ApodizationOptionsPanel.tsx
View file
@@ -1,4 +1,4 @@
import { Formik, FormikProps } from 'formik';
import { Formik } from 'formik';
import { Filters, Filter, ApodizationOptions } from 'nmr-processing';
import { useRef, memo } from 'react';
import * as Yup from 'yup';
Expand Down Expand Up @@ -40,24 +40,36 @@ function ApodizationOptionsInnerPanel(
props: ApodizationOptionsInnerPanelProps,
) {
const dispatch = useDispatch();
const formRef = useRef<FormikProps<any>>(null);
const previousPreviewRef = useRef<boolean>(initialValues.livePreview);

function handleApplyFilter(
values,
triggerSource: 'apply' | 'onChange' = 'apply',
) {
const { livePreview, ...filterOptions } = values;
if (livePreview && triggerSource === 'onChange') {
dispatch({
type: 'CALCULATE_APODIZATION_FILTER',
payload: filterOptions,
});
} else if (triggerSource === 'apply') {
dispatch({
type: 'APPLY_APODIZATION_FILTER',
payload: filterOptions,
});
const { livePreview, ...options } = values;
switch (triggerSource) {
case 'onChange': {
if (livePreview || previousPreviewRef.current !== livePreview) {
dispatch({
type: 'CALCULATE_APODIZATION_FILTER',
payload: { livePreview, options },
});
}
break;
}

case 'apply': {
dispatch({
type: 'APPLY_APODIZATION_FILTER',
payload: { options },
});
break;
}
default:
break;
}

previousPreviewRef.current = livePreview;
}

function handleCancelFilter() {
Expand All @@ -74,73 +86,70 @@ function ApodizationOptionsInnerPanel(
return (
<HeaderContainer>
<Formik
innerRef={formRef}
onSubmit={(values) => handleApplyFilter(values)}
initialValues={formData}
validationSchema={validationSchema}
>
<>
<Label
title="Line broadening : "
shortTitle="LB :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="lineBroadening"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label
title="Gauss broadening :"
shortTitle="GB :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="gaussBroadening"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label
title="lineBroadeningCenter [0 - 1] : "
shortTitle="LB Center :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="lineBroadeningCenter"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
{({ submitForm }) => (
<>
<Label
title="Line broadening : "
shortTitle="LB :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="lineBroadening"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label
title="Gauss broadening :"
shortTitle="GB :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="gaussBroadening"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label
title="lineBroadeningCenter [0 - 1] : "
shortTitle="LB Center :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="lineBroadeningCenter"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label
title="Live preview "
htmlFor="livePreview"
style={{ label: { padding: '0 5px' } }}
>
<FormikCheckBox name="livePreview" />
</Label>

<FormikOnChange
onChange={(values) => handleApplyFilter(values, 'onChange')}
enableOnload
/>
</Label>
<Label
title="Live preview "
htmlFor="livePreview"
style={{ label: { padding: '0 5px' } }}
>
<FormikCheckBox name="livePreview" />
</Label>

<FormikOnChange
onChange={(values) => handleApplyFilter(values, 'onChange')}
enableOnload
/>
</>
<ActionButtons onDone={submitForm} onCancel={handleCancelFilter} />
</>
)}
</Formik>

<ActionButtons
onDone={() => formRef.current?.submitForm()}
onCancel={handleCancelFilter}
/>
</HeaderContainer>
);
}
Expand Down
152 changes: 85 additions & 67 deletions src/component/header/BaseLineCorrectionPanel.tsx
View file
@@ -1,6 +1,6 @@
import { Formik, FormikProps } from 'formik';
import { Formik } from 'formik';
import { Filter, Filters, BaselineCorrectionOptions } from 'nmr-processing';
import { useRef, useState, memo } from 'react';
import { useState, memo, useRef } from 'react';
import * as Yup from 'yup';

import { useDispatch } from '../context/DispatchContext';
Expand Down Expand Up @@ -78,7 +78,7 @@ function BaseLineCorrectionInnerPanel(
props: BaseLineCorrectionInnerPanelProps,
) {
const dispatch = useDispatch();
const formRef = useRef<FormikProps<any>>(null);
const previousPreviewRef = useRef<boolean>(true);
const { algorithm: baseAlgorithm = 'polynomial' } =
props?.filter?.value || {};

Expand All @@ -88,13 +88,34 @@ function BaseLineCorrectionInnerPanel(
values,
triggerSource: 'apply' | 'onChange' = 'apply',
) => {
dispatch({
type:
triggerSource === 'onChange'
? 'CALCULATE_BASE_LINE_CORRECTION_FILTER'
: 'APPLY_BASE_LINE_CORRECTION_FILTER',
payload: values,
});
const { livePreview, ...options } = values;
switch (triggerSource) {
case 'onChange': {
if (livePreview || previousPreviewRef !== livePreview) {
dispatch({
type: 'CALCULATE_BASE_LINE_CORRECTION_FILTER',
payload: {
options,
livePreview,
},
});
}
break;
}

case 'apply': {
dispatch({
type: 'APPLY_BASE_LINE_CORRECTION_FILTER',
payload: {
options,
},
});
break;
}
default:
break;
}
previousPreviewRef.current = livePreview;
};

const handleCancelFilter = () => {
Expand All @@ -120,71 +141,68 @@ function BaseLineCorrectionInnerPanel(
</Label>

<Formik
innerRef={formRef}
onSubmit={(values) => handleApplyFilter(values)}
initialValues={form.values}
validationSchema={form.validation}
enableReinitialize
>
<>
{algorithm && algorithm === 'airpls' && (
<div style={{ display: 'flex' }}>
<Label title="maxIterations:" style={headerLabelStyle}>
<FormikInput
type="number"
name="maxIterations"
debounceTime={250}
style={inputStyle}
/>
</Label>
<Label title="tolerance:" style={headerLabelStyle}>
<FormikInput
type="number"
name="tolerance"
debounceTime={250}
style={inputStyle}
/>
</Label>
</div>
)}

{algorithm &&
['autoPolynomial', 'polynomial'].includes(algorithm) && (
<Label
title="degree [ 1 - 6 ]:"
shortTitle="degree :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="degree"
min={1}
max={6}
style={inputStyle}
debounceTime={250}
/>
</Label>
{({ submitForm }) => (
<>
{algorithm && algorithm === 'airpls' && (
<div style={{ display: 'flex' }}>
<Label title="maxIterations:" style={headerLabelStyle}>
<FormikInput
type="number"
name="maxIterations"
debounceTime={250}
style={inputStyle}
/>
</Label>
<Label title="tolerance:" style={headerLabelStyle}>
<FormikInput
type="number"
name="tolerance"
debounceTime={250}
style={inputStyle}
/>
</Label>
</div>
)}

<Label
title="live preview "
htmlFor="livePreview"
style={headerLabelStyle}
>
<FormikCheckBox name="livePreview" />
</Label>

<FormikOnChange
onChange={(values) => handleApplyFilter(values, 'onChange')}
enableOnload
/>
</>
{algorithm &&
['autoPolynomial', 'polynomial'].includes(algorithm) && (
<Label
title="degree [ 1 - 6 ]:"
shortTitle="degree :"
style={headerLabelStyle}
>
<FormikInput
type="number"
name="degree"
min={1}
max={6}
style={inputStyle}
debounceTime={250}
/>
</Label>
)}

<Label
title="live preview "
htmlFor="livePreview"
style={headerLabelStyle}
>
<FormikCheckBox name="livePreview" />
</Label>

<FormikOnChange
onChange={(values) => handleApplyFilter(values, 'onChange')}
enableOnload
/>
<ActionButtons onDone={submitForm} onCancel={handleCancelFilter} />
</>
)}
</Formik>

<ActionButtons
onDone={() => formRef.current?.submitForm()}
onCancel={handleCancelFilter}
/>
</HeaderContainer>
);
}
Expand Down

0 comments on commit b798502

Please sign in to comment.