feat: 2d apodization

package.json

@@ -88,7 +88,7 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^2.0.4",
+    "nmr-load-save": "^2.1.0",
     "nmr-processing": "^14.0.3",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",

src/component/1d/ApodizationLine.tsx

@@ -7,11 +7,13 @@ import {
 } from 'nmr-processing';
 
 import { useChartData } from '../context/ChartContext.js';
+import { useFilterSyncOptions } from '../context/FilterSyncOptionsContext.js';
 import { useScaleChecked } from '../context/ScaleContext.js';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
 import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce.js';
+import type { ApodizationOptions } from '../panels/filtersPanel/Filters/hooks/useSharedApodization.js';
 import { PathBuilder } from '../utility/PathBuilder.js';
 
 import { getYScale } from './utilities/scale.js';
@@ -32,16 +34,15 @@ function useWindowYScale() {
 
 export function ApodizationLine() {
   const {
-    toolOptions: {
-      selectedTool,
-      data: { apodizationOptions: externalApodizationOptions },
-    },
+    toolOptions: { selectedTool },
   } = useChartData();
   const activeSpectrum = useActiveSpectrum();
   const { scaleX } = useScaleChecked();
   const spectrum = useSpectrum({ emptyData }) as Spectrum1D;
   const xyReduce = useXYReduce(XYReducerDomainAxis.XAxis);
   const scaleY = useWindowYScale();
+  const { sharedFilterOptions: externalApodizationOptions } =
+    useFilterSyncOptions<ApodizationOptions>();
 
   if (!activeSpectrum?.id || selectedTool !== Filters1D.apodization.name) {
     return null;
@@ -53,7 +54,7 @@ export function ApodizationLine() {
 
     const apodizationOptions = merge(
       default1DApodization,
-      externalApodizationOptions,
+      externalApodizationOptions?.options,
     );
     const length = re.length;
     const dw = (x[length - 1] - x[0]) / (length - 1);

src/component/header/BaseSimpleApodizationOptionsPanel.tsx

@@ -0,0 +1,104 @@
+import { Checkbox } from '@blueprintjs/core';
+
+import { useToaster } from '../context/ToasterContext.js';
+import ActionButtons from '../elements/ActionButtons.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
+import { useSharedApodization } from '../panels/filtersPanel/Filters/hooks/useSharedApodization.js';
+import type {
+  ApodizationFilterOptions,
+  UseSharedApodizationOptions,
+} from '../panels/filtersPanel/Filters/hooks/useSharedApodization.js';
+
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
+
+interface BaseSimpleApodizationOptionsPanelProps
+  extends Pick<
+    UseSharedApodizationOptions,
+    'onApplyDispatch' | 'onChangeDispatch'
+  > {
+  filter: ApodizationFilterOptions | null;
+}
+
+export function BaseSimpleApodizationOptionsPanel(
+  props: BaseSimpleApodizationOptionsPanelProps,
+) {
+  const toaster = useToaster();
+
+  const { filter, onApplyDispatch, onChangeDispatch } = props;
+
+  const { formMethods, submitHandler, handleApplyFilter, handleCancelFilter } =
+    useSharedApodization(filter, {
+      applyFilterOnload: true,
+      onApplyDispatch,
+      onChangeDispatch,
+    });
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { isValid },
+    watch,
+  } = formMethods;
+
+  const isExponentialActive = watch('options.exponential.apply') || false;
+
+  const { onChange: onLivePreviewFieldChange, ...livePreviewFieldOptions } =
+    register('livePreview');
+
+  function handleClick() {
+    if (!isExponentialActive) {
+      toaster.show({
+        intent: 'danger',
+        message:
+          'Activate "Exponential" filter from the Processing panel first',
+      });
+    }
+  }
+
+  function handleConfirm() {
+    void handleSubmit((values) => handleApplyFilter(values))();
+  }
+
+  function handleCancel() {
+    handleCancelFilter();
+  }
+
+  return (
+    <HeaderWrapper>
+      <Label title="Line broadening:" shortTitle="LB:" style={headerLabelStyle}>
+        <NumberInput2Controller
+          control={control}
+          name="options.exponential.options.lineBroadening"
+          debounceTime={250}
+          stepSize={0.1}
+          style={{ width: '60px' }}
+          onValueChange={() => {
+            submitHandler();
+          }}
+          readOnly={!isExponentialActive}
+          onClick={handleClick}
+        />
+      </Label>
+
+      <Label title="Live preview" style={{ label: { padding: '0 5px' } }}>
+        <Checkbox
+          {...livePreviewFieldOptions}
+          onChange={(event) => {
+            void onLivePreviewFieldChange(event);
+            submitHandler();
+          }}
+          style={{ margin: 0 }}
+        />
+      </Label>
+
+      <ActionButtons
+        disabledDone={!isValid}
+        onDone={handleConfirm}
+        onCancel={handleCancel}
+      />
+    </HeaderWrapper>
+  );
+}

src/component/header/Header.tsx

@@ -31,6 +31,8 @@ import { options } from '../toolbar/ToolTypes.js';
 import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel.js';
 import { HeaderWrapper } from './HeaderWrapper.js';
 import RangesPickingOptionPanel from './RangesPickingOptionPanel.js';
+import { SimpleApodizationDimensionOneOptionsPanel } from './SimpleApodizationDimensionOneOptionsPanel.js';
+import { SimpleApodizationDimensionTwoOptionsPanel } from './SimpleApodizationDimensionTwoOptionsPanel.js';
 import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel.js';
 import { SimpleBaseLineCorrectionOptionsPanel } from './SimpleBaseLineCorrectionOptionsPanel.js';
 import { SimplePhaseCorrectionOptionsPanel } from './SimplePhaseCorrectionOptionsPanel.js';
@@ -104,6 +106,10 @@ function HeaderInner(props: HeaderInnerProps) {
     switch (selectedOptionPanel) {
       case options.apodization.id:
         return <SimpleApodizationOptionsPanel />;
+      case options.apodizationDimension1.id:
+        return <SimpleApodizationDimensionOneOptionsPanel />;
+      case options.apodizationDimension2.id:
+        return <SimpleApodizationDimensionTwoOptionsPanel />;
       case options.zeroFilling.id:
         return <SimpleZeroFillingOptionsPanel />;
       case options.phaseCorrection.id:

src/component/header/SimpleApodizationDimensionOneOptionsPanel.tsx

@@ -0,0 +1,54 @@
+import { memo, useCallback } from 'react';
+
+import type { ExtractFilterEntry } from '../../data/types/common/ExtractFilterEntry.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useFilter } from '../hooks/useFilter.js';
+
+import { BaseSimpleApodizationOptionsPanel } from './BaseSimpleApodizationOptionsPanel.js';
+
+interface ApodizationOptionsInnerPanelProps {
+  filter: ExtractFilterEntry<'apodizationDimension1'> | null;
+}
+
+function ApodizationOptionsInnerPanel(
+  props: ApodizationOptionsInnerPanelProps,
+) {
+  const dispatch = useDispatch();
+
+  const applyHandler = useCallback(
+    (data) => {
+      const { options } = data;
+      dispatch({
+        type: 'APPLY_APODIZATION_DIMENSION_ONE_FILTER',
+        payload: { options },
+      });
+    },
+    [dispatch],
+  );
+  const changeHandler = useCallback(
+    (data) => {
+      const { livePreview, options } = data;
+
+      dispatch({
+        type: 'CALCULATE_APODIZATION_DIMENSION_ONE_FILTER',
+        payload: { livePreview, options: structuredClone(options) },
+      });
+    },
+    [dispatch],
+  );
+
+  return (
+    <BaseSimpleApodizationOptionsPanel
+      filter={props.filter}
+      onApplyDispatch={applyHandler}
+      onChangeDispatch={changeHandler}
+    />
+  );
+}
+
+const MemoizedApodizationPanel = memo(ApodizationOptionsInnerPanel);
+
+export function SimpleApodizationDimensionOneOptionsPanel() {
+  const filter = useFilter('apodizationDimension1');
+  return <MemoizedApodizationPanel filter={filter} />;
+}

src/component/header/SimpleApodizationDimensionTwoOptionsPanel.tsx

@@ -0,0 +1,54 @@
+import { memo, useCallback } from 'react';
+
+import type { ExtractFilterEntry } from '../../data/types/common/ExtractFilterEntry.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useFilter } from '../hooks/useFilter.js';
+
+import { BaseSimpleApodizationOptionsPanel } from './BaseSimpleApodizationOptionsPanel.js';
+
+interface ApodizationOptionsInnerPanelProps {
+  filter: ExtractFilterEntry<'apodizationDimension2'> | null;
+}
+
+function ApodizationOptionsInnerPanel(
+  props: ApodizationOptionsInnerPanelProps,
+) {
+  const dispatch = useDispatch();
+
+  const applyHandler = useCallback(
+    (data) => {
+      const { options } = data;
+      dispatch({
+        type: 'APPLY_APODIZATION_DIMENSION_TWO_FILTER',
+        payload: { options },
+      });
+    },
+    [dispatch],
+  );
+  const changeHandler = useCallback(
+    (data) => {
+      const { livePreview, options } = data;
+
+      dispatch({
+        type: 'CALCULATE_APODIZATION_DIMENSION_TWO_FILTER',
+        payload: { livePreview, options: structuredClone(options) },
+      });
+    },
+    [dispatch],
+  );
+
+  return (
+    <BaseSimpleApodizationOptionsPanel
+      filter={props.filter}
+      onApplyDispatch={applyHandler}
+      onChangeDispatch={changeHandler}
+    />
+  );
+}
+
+const MemoizedApodizationPanel = memo(ApodizationOptionsInnerPanel);
+
+export function SimpleApodizationDimensionTwoOptionsPanel() {
+  const filter = useFilter('apodizationDimension2');
+  return <MemoizedApodizationPanel filter={filter} />;
+}