refactor: adapt to typed Filters

src/component/1d/ApodizationLine.tsx

@@ -1,4 +1,4 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { Filters1D, createApodizationWindowData } from 'nmr-processing';
 
 import { defaultApodizationOptions } from '../../data/constants/DefaultApodizationOptions.js';
@@ -47,8 +47,10 @@ function ApodizationLine() {
     const pathBuilder = new PathBuilder();
     const { re, x } = spectrum.data;
 
-    const { lineBroadening, gaussBroadening, lineBroadeningCenter } =
-      apodizationOptions || defaultApodizationOptions;
+    const { lineBroadening, gaussBroadening, lineBroadeningCenter } = {
+      ...apodizationOptions.lorentzToGauss?.shape.options,
+      ...defaultApodizationOptions.lorentzToGauss.shape.options,
+    };
 
     const length = re.length;
     const dw = (x[length - 1] - x[0]) / (length - 1);

src/component/header/SimplePhaseCorrectionOptionsPanel.tsx

@@ -1,5 +1,6 @@
 import { Select } from '@blueprintjs/select';
 import { Filters1D } from 'nmr-processing';
+import type { Filter1DOptions } from 'nmr-processing';
 import { Button } from 'react-science/ui';
 
 import ActionButtons from '../elements/ActionButtons.js';
@@ -24,7 +25,9 @@ export function SimplePhaseCorrectionOptionsPanel() {
     phaseCorrectionTypeItem,
     ph0Ref,
     ph1Ref,
-  } = usePhaseCorrection(filter);
+  } = usePhaseCorrection(
+    filter as Extract<Filter1DOptions, { name: 'phaseCorrection' }> | null,
+  );
 
   return (
     <HeaderWrapper>

src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { Select } from '@blueprintjs/select';
 import { Filters2D } from 'nmr-processing';
+import type { Filter2D } from 'nmr-processing';
 import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 import { MdLooksTwo } from 'react-icons/md';
 import { Button, Toolbar } from 'react-science/ui';
@@ -32,7 +33,9 @@ export function SimplePhaseCorrectionTwoDimensionsPanel() {
     handleCancelFilter,
     handleToggleAddTraceToBothDirections,
     onChangeHandler,
-  } = usePhaseCorrectionTwoDimensions(filter);
+  } = usePhaseCorrectionTwoDimensions(
+    filter as Extract<Filter2D, { name: 'phaseCorrectionTwoDimensions' }>,
+  );
 
   return (
     <HeaderWrapper style={{ padding: '0 5px' }}>

src/component/header/SimpleZeroFillingOptionsPanel.tsx

@@ -1,5 +1,6 @@
 import { Checkbox } from '@blueprintjs/core';
 import { Filters1D } from 'nmr-processing';
+import type { Filter1DOptions } from 'nmr-processing';
 
 import ActionButtons from '../elements/ActionButtons.js';
 import Label from '../elements/Label.js';
@@ -16,7 +17,10 @@ import { HeaderWrapper } from './HeaderWrapper.js';
 export function SimpleZeroFillingOptionsPanel() {
   const filter = useFilter(Filters1D.zeroFilling.id);
   const { control, submitHandler, register, handleCancelFilter } =
-    useZeroFilling(filter, { applyFilterOnload: true });
+    useZeroFilling(
+      filter as Extract<Filter1DOptions, { name: 'zeroFilling' }>,
+      { applyFilterOnload: true },
+    );
 
   const { onChange: onLivePreviewChange, ...otherLivePreviewRegisterOptions } =
     register('livePreview');

src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { Select } from '@blueprintjs/select';
 import { Filters2D } from 'nmr-processing';
+import type { Filter1DOptions } from 'nmr-processing';
 import type { CSSProperties } from 'react';
 import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 import { MdLooksTwo } from 'react-icons/md';
@@ -46,7 +47,10 @@ export default function PhaseCorrectionTwoDimensionsOptionsPanel(
 ) {
   const { enableEdit = true, onCancel, onConfirm } = props;
 
-  const filter = useFilter(Filters2D.phaseCorrectionTwoDimensions.id);
+  const filter = useFilter(
+    Filters2D.phaseCorrectionTwoDimensions.id,
+  ) as Extract<Filter1DOptions, { name: 'phaseCorrectionTwoDimensions' }>;
+
   const {
     ph0Ref,
     ph1Ref,

src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx

@@ -1,4 +1,5 @@
 import { Filters1D, Filters2D } from 'nmr-processing';
+import type { Filter1DOptions, Filter2DOptions } from 'nmr-processing';
 import { useForm } from 'react-hook-form';
 
 import { useDispatch } from '../../../context/DispatchContext.js';
@@ -16,7 +17,14 @@ import { formLabelStyle } from './index.js';
 const { shiftX } = Filters1D;
 const { shift2DX, shift2DY } = Filters2D;
 
-export default function ShiftOptionsPanel(props: BaseFilterOptionsPanelProps) {
+type ShiftFilterPanelOptions =
+  | Extract<Filter1DOptions, { name: 'shiftX' }>
+  | Extract<Filter2DOptions, { name: 'shift2DX' }>
+  | Extract<Filter2DOptions, { name: 'shift2DY' }>;
+
+export default function ShiftOptionsPanel(
+  props: BaseFilterOptionsPanelProps<ShiftFilterPanelOptions>,
+) {
   const { filter, enableEdit = true, onCancel, onConfirm } = props;
 
   const dispatch = useDispatch();

src/component/panels/filtersPanel/Filters/hooks/useSharedApodization.tsx

@@ -1,10 +1,12 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import type { Filter1DOptions } from 'nmr-processing';
+import type {
+  Filter1DOptions,
+  Apodization1DOptions as BaseApodizationOptions,
+} from 'nmr-processing';
 import { useCallback, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import type { Apodization1DOptions as BaseApodizationOptions } from 'nmr-processing';
 import { defaultApodizationOptions } from '../../../../../data/constants/DefaultApodizationOptions.js';
 import { useDispatch } from '../../../../context/DispatchContext.js';
 import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext.js';
@@ -14,12 +16,13 @@ const simpleValidationSchema = Yup.object().shape({
   livePreview: Yup.boolean().required(),
 });
 
-export type ApodizationOptions = BaseApodizationOptions & {
+export interface ApodizationOptions {
   livePreview: boolean;
-};
+  options: BaseApodizationOptions;
+}
 
 const initialValues: ApodizationOptions = {
-  ...defaultApodizationOptions,
+  options: defaultApodizationOptions as BaseApodizationOptions,
   livePreview: true,
 };
 
@@ -61,7 +64,7 @@ export const useSharedApodization = (
 
   const onChange = useCallback(
     (values: ApodizationOptions) => {
-      const { livePreview, ...options } = values;
+      const { livePreview, options } = values;
 
       if (livePreview || previousPreviewRef.current !== livePreview) {
         dispatch({
@@ -78,7 +81,7 @@ export const useSharedApodization = (
       values: ApodizationOptions,
       triggerSource: 'apply' | 'onChange' = 'apply',
     ) => {
-      const { livePreview, ...options } = values;
+      const { livePreview, options } = values;
       switch (triggerSource) {
         case 'onChange': {
           onChange(values);

src/component/reducer/actions/FiltersActions.ts

@@ -441,28 +441,28 @@ function beforeRollback(draft: Draft<State>, filterKey) {
       if (activeSpectrum) {
         const spectrum = current(draft).data[activeSpectrum.index];
 
-        const phaseCorrectionFilter = spectrum.filters.find(
-          (filter) => filter.name === Filters2D.phaseCorrectionTwoDimensions.id,
-        );
+        // const phaseCorrectionFilter = spectrum.filters.find(
+        //   (filter) => filter.name === Filters2D.phaseCorrectionTwoDimensions.id,
+        // );
 
         if (isSpectrum1D(spectrum)) {
-          const { value: filterOptions } = phaseCorrectionFilter || {};
+          // const { value: filterOptions } = phaseCorrectionFilter || {};
           let pivotObj = {
             value: 0,
             index: 0,
           };
-          if (typeof filterOptions?.pivot === 'number') {
-            const { pivot } = filterOptions;
-            const index = xFindClosestIndex(spectrum.data.re, pivot);
-            pivotObj = { value: pivot, index };
-          } else {
-            // look for the strongest peak to set it as a pivot
-            const peak = findStrongestPeak(spectrum.data);
-            if (peak) {
-              const { xValue, index } = peak;
-              pivotObj = { value: xValue, index };
-            }
+          // if (typeof filterOptions?.pivot === 'number') {
+          //   const { pivot } = filterOptions;
+          //   const index = xFindClosestIndex(spectrum.data.re, pivot);
+          //   pivotObj = { value: pivot, index };
+          // } else {
+          // look for the strongest peak to set it as a pivot
+          const peak = findStrongestPeak(spectrum.data);
+          if (peak) {
+            const { xValue, index } = peak;
+            pivotObj = { value: xValue, index };
           }
+          // }
 
           draft.toolOptions.data.pivot = pivotObj;
         }
@@ -552,7 +552,8 @@ function afterRollback(draft: Draft<State>, filterKey) {
 
   switch (filterKey) {
     case apodization.id: {
-      draft.toolOptions.data.apodizationOptions = defaultApodizationOptions;
+      draft.toolOptions.data.apodizationOptions =
+        defaultApodizationOptions as Apodization1DOptions;
       break;
     }
     default:
@@ -602,7 +603,8 @@ function disableLivePreview(draft: Draft<State>, id: string) {
   // reset default options
   switch (id) {
     case apodization.id: {
-      draft.toolOptions.data.apodizationOptions = defaultApodizationOptions;
+      draft.toolOptions.data.apodizationOptions =
+        defaultApodizationOptions as Apodization1DOptions;
       break;
     }
     default:

src/data/constants/DefaultApodizationOptions.ts

@@ -1,6 +1,4 @@
-import type { Apodization1DOptions } from 'nmr-processing';
-
-export const defaultApodizationOptions: Apodization1DOptions = {
+export const defaultApodizationOptions = {
   lorentzToGauss: {
     apply: true,
     shape: {