feat: apodization window preview (#1647)

* feat: apodization window preview

* refactor: change the apodization window  y scale

* refactor: ApdoizationLine component

* refactor: set default value for lineBroadeningCenter is 0

* style: make the input field width smaller

* chore: update dependencies

* feat: unchecking live preview should reset the preview

* feat: unchecking live preview should reset the preview

src/component/1d/ApodizationLine.tsx

@@ -0,0 +1,77 @@
+import * as Filters from '../../data/Filters';
+import {
+  apodizationFilter,
+  defaultApodizationOptions,
+} from '../../data/data1d/filter1d/apodization';
+import { Datum1D } from '../../data/types/data1d';
+import { useChartData } from '../context/ChartContext';
+import { useScaleChecked } from '../context/ScaleContext';
+import useSpectrum from '../hooks/useSpectrum';
+import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce';
+import { PathBuilder } from '../utility/PathBuilder';
+
+import { getYScale } from './utilities/scale';
+
+const emptyData = { data: {}, info: {} };
+
+function useWindowYScale() {
+  const { height, margin, verticalAlign } = useChartData();
+  return getYScale({
+    height,
+    margin,
+    verticalAlign,
+    yDomain: [0, 1],
+  });
+}
+
+function ApdoizationLine() {
+  const {
+    activeSpectrum,
+    toolOptions: {
+      selectedTool,
+      data: { apodizationOptions },
+    },
+  } = useChartData();
+  const { scaleX } = useScaleChecked();
+  const spectrum = useSpectrum({ emptyData }) as Datum1D;
+  const xyReduce = useXYReduce(XYReducerDomainAxis.XAxis);
+  const scaleY = useWindowYScale();
+
+  if (!activeSpectrum?.id || selectedTool !== Filters.apodization.id) {
+    return null;
+  }
+
+  const paths = () => {
+    const pathBuilder = new PathBuilder();
+    const { windowData: y } = apodizationFilter(
+      spectrum,
+      apodizationOptions || defaultApodizationOptions,
+    );
+    const x = spectrum.data?.x;
+
+    if (x && y) {
+      const pathPoints = xyReduce({ x, y });
+
+      pathBuilder.moveTo(scaleX()(pathPoints.x[0]), scaleY(pathPoints.y[0]));
+      for (let i = 1; i < pathPoints.x.length; i++) {
+        pathBuilder.lineTo(scaleX()(pathPoints.x[i]), scaleY(pathPoints.y[i]));
+      }
+
+      return pathBuilder.toString();
+    } else {
+      return '';
+    }
+  };
+
+  return (
+    <path
+      data-test-id="apodization-line"
+      stroke="green"
+      fill="none"
+      strokeWidth="2"
+      d={paths()}
+    />
+  );
+}
+
+export default ApdoizationLine;

src/component/1d/Chart1D.tsx

@@ -1,5 +1,6 @@
 import FloatMoleculeStructures from '../tool/FloatMoleculeStructures';
 
+import ApdoizationLine from './ApodizationLine';
 import ExclusionZonesAnnotations from './ExclusionZonesAnnotations';
 import IntegralsSeries from './IntegralsSeries';
 import LinesSeries from './LinesSeries';
@@ -29,8 +30,8 @@ function Chart1D({ mode, width, height, margin, displayerKey }) {
           />
         </clipPath>
       </defs>
-
       <LinesSeries />
+      <ApdoizationLine />
       <IntegralsSeries />
       <PeakAnnotations />
       <Ranges />

src/component/header/ApodizationOptionsPanel.tsx

@@ -3,6 +3,7 @@ import * as Yup from 'yup';
 
 import * as Filters from '../../data/Filters';
 import { Filter } from '../../data/FiltersManager';
+import { defaultApodizationOptions } from '../../data/data1d/filter1d/apodization';
 import { useDispatch } from '../context/DispatchContext';
 import ActionButtons from '../elements/ActionButtons';
 import Label from '../elements/Label';
@@ -15,28 +16,14 @@ import {
   APPLY_APODIZATION_FILTER,
   CALCULATE_APODIZATION_FILTER,
   RESET_SELECTED_TOOL,
+  SET_SELECTED_TOOL,
 } from '../reducer/types/Types';
+import { options } from '../toolbar/ToolTypes';
 
-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 containerStyle: CSSProperties = {
+  padding: '5px',
+  height: '100%',
+  display: 'flex',
 };
 
 const labelStyle = {
@@ -50,7 +37,7 @@ const labelStyle = {
 };
 
 const inputStyle = {
-  input: { height: '24px' },
+  input: { height: '24px', width: '60px' },
 };
 
 const validationSchema = Yup.object().shape({
@@ -60,9 +47,7 @@ const validationSchema = Yup.object().shape({
 });
 
 const initialValues = {
-  lineBroadening: 1,
-  gaussBroadening: 0,
-  lineBroadeningCenter: 0,
+  ...defaultApodizationOptions,
   livePreview: true,
 };
 
@@ -105,8 +90,17 @@ function ApodizationOptionsInnerPanel(
     }
   }, [props?.filter]);
 
+  const resetTool = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.checked) {
+      dispatch({
+        type: SET_SELECTED_TOOL,
+        payload: { selectedTool: options.apodization.id },
+      });
+    }
+  };
+
   return (
-    <div style={styles.container}>
+    <div style={containerStyle}>
       <FormikForm
         ref={formRef}
         onSubmit={(values) => handleApplyFilter(values)}
@@ -144,7 +138,7 @@ function ApodizationOptionsInnerPanel(
           />
         </Label>
         <Label title="live preview " style={{ label: { padding: '0 5px' } }}>
-          <FormikCheckBox name="livePreview" />
+          <FormikCheckBox name="livePreview" onChange={resetTool} />
         </Label>
 
         <FormikOnChange

src/component/reducer/Reducer.ts

@@ -4,6 +4,7 @@ import { buildCorrelationData, CorrelationData } from 'nmr-correlation';
 import { predictSpectra } from '../../data/PredictionManager';
 import * as SpectraManager from '../../data/SpectraManager';
 import { SpectraAnalysis } from '../../data/data1d/MultipleAnalysis';
+import { ApodizationOptions } from '../../data/data1d/filter1d/apodization';
 import { migrate } from '../../data/migration/MigrationManager';
 import { Molecule } from '../../data/molecules/Molecule';
 import { Contours } from '../../data/types/data2d/Contours';
@@ -114,6 +115,7 @@ export const getInitialState = (): State => ({
         options: {},
         zones: [],
       },
+      apodizationOptions: {} as ApodizationOptions,
       pivot: { value: 0, index: 0 },
       zonesNoiseFactor: 1,
       activeFilterID: null,
@@ -326,6 +328,7 @@ export interface State {
         zones: any[];
         options: any;
       };
+      apodizationOptions: ApodizationOptions;
       /**
        * pivot point for manual phase correction
        * @default {value:0,index:0}

src/component/reducer/actions/FiltersActions.ts

@@ -78,6 +78,7 @@ function calculateApodizationFilter(draft: Draft<State>, action) {
     } = draft.data[index] as Datum1D;
 
     let _data = { data: { x, re, im }, info };
+    draft.toolOptions.data.apodizationOptions = options;
     apodization(_data as Datum1D, options);
     const { im: newIm, re: newRe } = _data.data;
     draft.tempData[index].data.im = newIm;

src/component/reducer/actions/ToolsActions.ts

@@ -2,6 +2,7 @@ import { max } from 'd3';
 import { original, Draft, current } from 'immer';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 
+import { defaultApodizationOptions } from '../../../data/data1d/filter1d/apodization';
 import { Data1D, Datum1D } from '../../../data/types/data1d';
 import { Datum2D } from '../../../data/types/data2d';
 import generateID from '../../../data/utilities/generateID';
@@ -96,6 +97,10 @@ function setFilterChanges(draft: Draft<State>, selectedFilterID) {
         }
         break;
       }
+      case options.apodization.id: {
+        draft.toolOptions.data.apodizationOptions = defaultApodizationOptions;
+        break;
+      }
 
       default:
         break;