refactor: shift filter options

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

@@ -193,7 +193,9 @@ function FiltersInner(props: FiltersInnerProps) {
       setNewFilter(null);
     }
 
-    openSection(options?.[selectedTool] ? selectedTool : '');
+    if (options?.[selectedTool]?.isFilter) {
+      openSection(selectedTool);
+    }
   }, [filters, selectedTool]);
 
   const filtersList = [...filters];

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

@@ -0,0 +1,87 @@
+import { Filter, Filters } from 'nmr-processing';
+import { useForm } from 'react-hook-form';
+
+import { useDispatch } from '../../../context/DispatchContext';
+import Label from '../../../elements/Label';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
+import { Sections } from '../../../elements/Sections';
+
+import { FilterActionButtons } from './FilterActionButtons';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
+
+import { formLabelStyle } from '.';
+
+const { shiftX, shift2DX, shift2DY } = Filters;
+
+interface ShiftOptionsPanelProps {
+  filter: Filter;
+}
+
+export default function ShiftOptionsPanel(props: ShiftOptionsPanelProps) {
+  const { filter } = props;
+  const dispatch = useDispatch();
+  const { handleSubmit, control } = useForm({ defaultValues: filter.value });
+
+  function handleCancelFilter() {
+    dispatch({
+      type: 'RESET_SELECTED_TOOL',
+    });
+  }
+
+  function handleApplyFilter(values) {
+    const { shift } = values;
+    switch (filter.name) {
+      case shiftX.id: {
+        dispatch({
+          type: 'SHIFT_SPECTRUM',
+          payload: { shift },
+        });
+        break;
+      }
+
+      case shift2DX.id: {
+        dispatch({
+          type: 'SHIFT_SPECTRUM',
+          payload: { shiftX: shift },
+        });
+        break;
+      }
+
+      case shift2DY.id: {
+        dispatch({
+          type: 'SHIFT_SPECTRUM',
+          payload: { shiftY: shift },
+        });
+        break;
+      }
+
+      default:
+        break;
+    }
+  }
+
+  return (
+    <>
+      <StickyHeader>
+        <HeaderContainer>
+          <div />
+          <FilterActionButtons
+            onConfirm={() => handleSubmit(handleApplyFilter)()}
+            onCancel={handleCancelFilter}
+          />
+        </HeaderContainer>
+      </StickyHeader>
+      <Sections.Body>
+        <Label title="Shift:" style={formLabelStyle}>
+          <NumberInput2Controller
+            control={control}
+            name="shift"
+            min={0}
+            stepSize={1}
+            debounceTime={250}
+          />
+        </Label>
+      </Sections.Body>
+    </>
+  );
+}

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

@@ -6,6 +6,7 @@ import ApodizationOptionsPanel from './ApodizationOptionsPanel';
 import BaseLineCorrectionOptionsPanel from './BaseLineCorrectionOptionsPanel';
 import PhaseCorrectionOptionsPanel from './PhaseCorrectionOptionsPanel';
 import PhaseCorrectionTwoDimensionsOptionsPanel from './PhaseCorrectionTwoDimensionsOptionsPanel';
+import ShiftOptionsPanel from './ShiftOptionsPanel';
 import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel';
 
 const {
@@ -14,13 +15,19 @@ const {
   phaseCorrectionTwoDimensions,
   zeroFilling,
   baselineCorrection,
+  shiftX,
+  shift2DX,
+  shift2DY,
 } = Filters;
 export const filterOptionPanels = {
   [apodization.id]: ApodizationOptionsPanel,
   [phaseCorrection.id]: PhaseCorrectionOptionsPanel,
   [zeroFilling.id]: ZeroFillingOptionsPanel,
   [phaseCorrectionTwoDimensions.id]: PhaseCorrectionTwoDimensionsOptionsPanel,
   [baselineCorrection.id]: BaseLineCorrectionOptionsPanel,
+  [shiftX.id]: ShiftOptionsPanel,
+  [shift2DX.id]: ShiftOptionsPanel,
+  [shift2DY.id]: ShiftOptionsPanel,
 };
 
 export const formLabelStyle: LabelStyle = {

src/component/reducer/actions/FiltersActions.ts

@@ -65,10 +65,17 @@ const {
   digitalFilter2D,
 } = Filters;
 
-type ShiftSpectrumAlongXAxisAction = ActionType<
-  'SHIFT_SPECTRUM',
-  { shift: number }
->;
+interface ShiftOneDimension {
+  shift: number;
+}
+interface ShiftTwoDimensions {
+  shiftX?: number;
+  shiftY?: number;
+}
+
+type ShiftSpectrumOptions = ShiftOneDimension | ShiftTwoDimensions;
+
+type ShiftSpectrumAction = ActionType<'SHIFT_SPECTRUM', ShiftSpectrumOptions>;
 type ApodizationFilterAction = ActionType<
   'APPLY_APODIZATION_FILTER',
   { options: ApodizationOptions }
@@ -157,7 +164,7 @@ type SetTwoDimensionPhaseCorrectionPivotPoint = ActionType<
 >;
 
 export type FiltersActions =
-  | ShiftSpectrumAlongXAxisAction
+  | ShiftSpectrumAction
   | ApodizationFilterAction
   | ApodizationFilterLiveAction
   | ZeroFillingFilterAction
@@ -571,10 +578,38 @@ function disableLivePreview(draft: Draft<State>, id: string) {
   }
 }
 
+function isOneDimensionShift(
+  values: ShiftSpectrumOptions,
+): values is ShiftOneDimension {
+  return 'shift' in values;
+}
+
+function rollbackOrUpdateSpectrum(
+  draft: Draft<State>,
+  options: {
+    filterKey: string;
+
+    filterUpdateDomainRules: FiltersManager.FilterDomainUpdateRules;
+  },
+) {
+  const { filterKey, filterUpdateDomainRules } = options;
+  const activeFilterIndex = getActiveFilterIndex(draft);
+
+  if (activeFilterIndex !== -1) {
+    rollbackSpectrumByFilter(draft, {
+      searchBy: 'name',
+      key: filterKey,
+      triggerSource: 'Apply',
+    });
+  } else {
+    updateView(draft, filterUpdateDomainRules);
+  }
+}
+
 //action
 function handleShiftSpectrumAlongXAxis(
   draft: Draft<State>,
-  action: ShiftSpectrumAlongXAxisAction,
+  action: ShiftSpectrumAction,
 ) {
   const activeSpectrum = getActiveSpectrum(draft);
 
@@ -583,23 +618,42 @@ function handleShiftSpectrumAlongXAxis(
   }
 
   //apply filter into the spectrum
-  const { shift } = action.payload;
+  const options = action.payload;
 
-  const activeFilterIndex = getActiveFilterIndex(draft);
   const index = activeSpectrum?.index;
 
-  FiltersManager.applyFilter(draft.data[index], [
-    { name: shiftX.id, value: { shift } },
-  ]);
+  if (isOneDimensionShift(options)) {
+    const { shift } = options;
 
-  if (activeFilterIndex !== -1) {
-    rollbackSpectrumByFilter(draft, {
-      searchBy: 'name',
-      key: shiftX.id,
-      triggerSource: 'Apply',
+    FiltersManager.applyFilter(draft.data[index], [
+      { name: shiftX.id, value: { shift } },
+    ]);
+    rollbackOrUpdateSpectrum(draft, {
+      filterKey: shiftX.id,
+      filterUpdateDomainRules: shiftX.DOMAIN_UPDATE_RULES,
     });
   } else {
-    updateView(draft, shiftX.DOMAIN_UPDATE_RULES);
+    const { shiftX, shiftY } = options;
+
+    if (shiftX) {
+      FiltersManager.applyFilter(draft.data[index], [
+        { name: shift2DX.id, value: { shift: shiftX } },
+      ]);
+      rollbackOrUpdateSpectrum(draft, {
+        filterKey: shift2DX.id,
+        filterUpdateDomainRules: shift2DX.DOMAIN_UPDATE_RULES,
+      });
+    }
+
+    if (shiftY) {
+      FiltersManager.applyFilter(draft.data[index], [
+        { name: shift2DY.id, value: { shift: shiftY } },
+      ]);
+      rollbackOrUpdateSpectrum(draft, {
+        filterKey: shift2DY.id,
+        filterUpdateDomainRules: shift2DY.DOMAIN_UPDATE_RULES,
+      });
+    }
   }
 }