Skip to content

Commit

Permalink
feat: improve 1d filters (#1623)
Browse files Browse the repository at this point in the history
* feat: lorentz to gauss window function

closes: #1629 #1617

* chore: rename linebroadening to apodization

* refactor: manual phase correction panel

* feat: display previous values when editing apodization filter

close #1632

* refactor: select component

* feat: display previous value when editing zero filling filter

* test: apodization filter test

* refactor: remove test file

* refactor: apodization filter parameter

* fix(apodization): use the right LB value

* chore: update dependencies

* feat: add apodization tool to wrokspaces

* feat: apodization filter live preview

close #1624

* refactor: baseline correction filter

* refactor: baseline correction

apply the filter once
refactor the baseline correction options panel and display the previous values

* feat: migrate .nmrium  from version 2 to version 3

* test: migration from version 2 to 3

* test: fix migration test

* demo: update processed 13c example

Co-authored-by: hamed-musallam <hamed.musallam@gmail.com>
Co-authored-by: hamed-musallam <35760236+hamed-musallam@users.noreply.github.com>
  • Loading branch information
3 people committed Jul 27, 2022
1 parent b2d6b2d commit 4651216
Show file tree
Hide file tree
Showing 36 changed files with 1,168 additions and 381 deletions.
247 changes: 146 additions & 101 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
Expand Up @@ -53,7 +53,7 @@
"@emotion/react": "^11.9.3",
"analysis-ui-components": "^0.15.2",
"cheminfo-font": "^1.9.0",
"cheminfo-types": "^1.2.0",
"cheminfo-types": "^1.4.0",
"d3": "^7.6.1",
"eventemitter3": "^4.0.7",
"file-saver": "^2.0.5",
Expand Down Expand Up @@ -106,7 +106,7 @@
"@simbathesailor/use-what-changed": "^2.0.0",
"@types/d3": "^7.4.0",
"@types/jest": "^28.1.6",
"@types/node": "^18.0.6",
"@types/node": "^18.6.1",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.0.0",
Expand All @@ -124,6 +124,6 @@
"rollup-plugin-analyzer": "^4.0.0",
"serve": "^14.0.1",
"typescript": "~4.7.4",
"vite": "^3.0.2"
"vite": "^3.0.3"
}
}
237 changes: 236 additions & 1 deletion public/data/cytisine/processed13C.json

Large diffs are not rendered by default.

12 changes: 8 additions & 4 deletions src/component/elements/Select.tsx
Expand Up @@ -36,13 +36,15 @@ export interface SelectEntry {
label: string | number;
}

export interface SelectProps {
export interface SelectProps
extends Omit<
React.SelectHTMLAttributes<HTMLSelectElement>,
'style' | 'onChange'
> {
onChange?: (element: string) => void;
data: Array<SelectEntry>;
defaultValue?: string | number | undefined;
style?: CSSProperties;
defaultValue?: string | number;
name?: string;
className?: string;
placeholder?: string;
}

Expand All @@ -55,6 +57,7 @@ const Select = forwardRef(function Select(
style = { width: 100 },
onChange = () => null,
defaultValue = '',
value,
name = '',
className = '',
placeholder = '',
Expand All @@ -78,6 +81,7 @@ const Select = forwardRef(function Select(
name={name}
onChange={handleOnChanged}
defaultValue={defaultValue}
value={value}
className={className}
style={style}
required
Expand Down
10 changes: 6 additions & 4 deletions src/component/elements/formik/FormikOnChange.tsx
@@ -1,5 +1,5 @@
import { useFormikContext } from 'formik';
import { useEffect } from 'react';
import { useEffect, memo } from 'react';

interface FormikOnChangeProps {
onChange?: (any) => void;
Expand All @@ -8,19 +8,21 @@ interface FormikOnChangeProps {

const FormikOnChange = (props: FormikOnChangeProps) => {
const { onChange = () => null, enableValidation = true } = props;
const { values, errors } = useFormikContext();
const { values, errors, submitForm, setTouched } = useFormikContext();

useEffect(() => {
if (enableValidation) {
if (Object.keys(errors).length === 0) {
onChange(values);
} else {
setTouched(errors);
}
} else {
onChange(values);
}
}, [values, enableValidation, errors, onChange]);
}, [values, enableValidation, errors, onChange, submitForm, setTouched]);

return null;
};

export default FormikOnChange;
export default memo(FormikOnChange);
169 changes: 169 additions & 0 deletions src/component/header/ApodizationOptionsPanel.tsx
@@ -0,0 +1,169 @@
import { CSSProperties, useEffect, useRef, memo } from 'react';
import * as Yup from 'yup';

import * as Filters from '../../data/Filters';
import { Filter } from '../../data/FiltersManager';
import { useDispatch } from '../context/DispatchContext';
import ActionButtons from '../elements/ActionButtons';
import Label from '../elements/Label';
import FormikCheckBox from '../elements/formik/FormikCheckBox';
import FormikForm from '../elements/formik/FormikForm';
import FormikInput from '../elements/formik/FormikInput';
import FormikOnChange from '../elements/formik/FormikOnChange';
import { useFilter } from '../hooks/useFilter';
import {
APPLY_APODIZATION_FILTER,
CALCULATE_APODIZATION_FILTER,
RESET_SELECTED_TOOL,
} from '../reducer/types/Types';

const styles: Record<'container' | 'input' | 'label', CSSProperties> = {
container: {
padding: '5px',
height: '100%',
display: 'flex',
},

input: {
height: '100%',
width: '80px',
borderRadius: '5px',
border: '0.55px solid #c7c7c7',
margin: '0px 5px 0px 5px',
textAlign: 'center',
},

label: {
lineHeight: 2,
userSelect: 'none',
},
};

const labelStyle = {
label: {
fontWeight: 'normal',
fontSize: '12px',
},
wrapper: {
paddingRight: '5px',
},
};

const inputStyle = {
input: { height: '24px' },
};

const validationSchema = Yup.object().shape({
lineBroadening: Yup.number().required(),
gaussBroadening: Yup.number().required(),
lineBroadeningCenter: Yup.number().required().min(0).max(1),
});

const initialValues = {
lineBroadening: 1,
gaussBroadening: 0,
lineBroadeningCenter: 0,
livePreview: true,
};

interface ApodizationOptionsInnerPanelProps {
filter: Filter | null;
}

function ApodizationOptionsInnerPanel(
props: ApodizationOptionsInnerPanelProps,
) {
const dispatch = useDispatch();
const formRef = useRef<any>();
const 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 handleCancelFilter = () => {
dispatch({
type: RESET_SELECTED_TOOL,
});
};

useEffect(() => {
if (props.filter) {
formRef.current.setValues({ ...props.filter.value, livePreview: true });
}
}, [props?.filter]);

return (
<div style={styles.container}>
<FormikForm
ref={formRef}
onSubmit={(values) => handleApplyFilter(values)}
initialValues={initialValues}
validationSchema={validationSchema}
>
<Label title="Line broadening : " style={labelStyle}>
<FormikInput
type="number"
name="lineBroadening"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label title="Gauss broadening :" style={labelStyle}>
<FormikInput
type="number"
name="gaussBroadening"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label title="lineBroadeningCenter [0 - 1] : " style={labelStyle}>
<FormikInput
type="number"
name="lineBroadeningCenter"
min={0}
max={1}
style={inputStyle}
debounceTime={250}
/>
</Label>
<Label title="live preview " style={{ label: { padding: '0 5px' } }}>
<FormikCheckBox name="livePreview" />
</Label>

<FormikOnChange
onChange={(values) => handleApplyFilter(values, 'onChange')}
enableValidation
/>
</FormikForm>

<ActionButtons
onDone={() => formRef.current.submitForm()}
onCancel={handleCancelFilter}
/>
</div>
);
}

const MemoziedApodizationPanel = memo(ApodizationOptionsInnerPanel);

export default function ApodizationOptionsPanel() {
const filter = useFilter(Filters.apodization.id);
return <MemoziedApodizationPanel filter={filter} />;
}

0 comments on commit 4651216

Please sign in to comment.