feat: improve 1D line broadening filter

package.json

@@ -88,8 +88,8 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^1.2.0",
-    "nmr-processing": "^12.12.3",
+    "nmr-load-save": "^1.2.2",
+    "nmr-processing": "13.0.3-pre.1730842757",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",
     "openchemlib": "^8.16.0",
@@ -98,8 +98,8 @@
     "re-resizable": "6.10.0",
     "react-d3-utils": "^2.0.0",
     "react-dropzone": "14.2.3",
-    "react-error-boundary": "^4.1.1",
-    "react-hook-form": "^7.53.0",
+    "react-error-boundary": "^4.1.2",
+    "react-hook-form": "^7.53.1",
     "react-icons": "^5.3.0",
     "react-inspector": "^6.0.2",
     "react-mf": "^2.0.3",
@@ -115,23 +115,23 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.25.7",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.25.9",
     "@playwright/test": "^1.48.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.4.3",
-    "@types/lodash": "^4.17.10",
-    "@types/node": "^22.7.6",
-    "@types/papaparse": "^5.3.14",
-    "@types/react": "^18.3.11",
+    "@types/lodash": "^4.17.12",
+    "@types/node": "^22.7.9",
+    "@types/papaparse": "^5.3.15",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^2.1.3",
     "cross-env": "^7.0.3",
-    "cspell": "^8.15.3",
-    "eslint": "^9.12.0",
+    "cspell": "^8.15.4",
+    "eslint": "^9.13.0",
     "eslint-config-cheminfo-react": "^14.0.0",
     "eslint-config-cheminfo-typescript": "^16.0.0",
     "modern-normalize": "^3.0.1",
@@ -147,7 +147,7 @@
     "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
     "typescript": "^5.6.3",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "vitest": "^2.1.3"
   }
 }

src/component/1d/ApodizationLine.tsx

@@ -1,5 +1,5 @@
 import type { Spectrum1D } from 'nmr-load-save';
-import { apodization, Filters } from 'nmr-processing';
+import { Filters1D, createApodizationWindowData } from 'nmr-processing';
 
 import { defaultApodizationOptions } from '../../data/constants/DefaultApodizationOptions.js';
 import { useChartData } from '../context/ChartContext.js';
@@ -39,44 +39,39 @@ function ApodizationLine() {
   const xyReduce = useXYReduce(XYReducerDomainAxis.XAxis);
   const scaleY = useWindowYScale();
 
-  if (!activeSpectrum?.id || selectedTool !== Filters.apodization.id) {
+  if (!activeSpectrum?.id || selectedTool !== Filters1D.apodization.id) {
     return null;
   }
 
   const paths = () => {
     const pathBuilder = new PathBuilder();
-    const { re, im = [], x } = spectrum.data;
+    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);
-    const { windowData: y } = apodization(
-      { re, im },
-      {
-        apply: false,
-        compose: {
-          length,
-          shapes: [
-            {
-              start: 0,
-              shape: {
-                kind: 'lorentzToGauss',
-                options: {
-                  length,
-                  dw,
-                  exponentialHz:
-                    gaussBroadening > 0 ? lineBroadening : -lineBroadening,
-                  gaussianHz: gaussBroadening,
-                  center: lineBroadeningCenter,
-                },
-              },
+    const y = createApodizationWindowData({
+      length,
+      shapes: {
+        lorentzToGauss: {
+          shape: {
+            kind: 'lorentzToGauss',
+            options: {
+              length,
+              dw,
+              lineBroadening:
+                gaussBroadening > 0 ? lineBroadening : -lineBroadening,
+              gaussBroadening,
+              lineBroadeningCenter,
             },
-          ],
+          },
         },
       },
-    );
+    });
 
     if (x && y) {
       const pathPoints = xyReduce({ x, y });

src/component/1d/ExclusionZoneAnnotation.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Filters } from 'nmr-processing';
+import { Filters1D } from 'nmr-processing';
 import { memo } from 'react';
 
 import type { ExclusionZone } from '../../data/types/data1d/ExclusionZone.js';
@@ -31,7 +31,7 @@ function ExclusionZoneAnnotation({
 }: ExclusionZoneProps) {
   const { scaleX, scaleY } = useScaleChecked();
   const type =
-    filterId === Filters.signalProcessing.id
+    filterId === Filters1D.signalProcessing.id
       ? HighlightEventSource.MATRIX_GENERATION_EXCLUSION_ZONE
       : HighlightEventSource.EXCLUSION_ZONE;
   const highlight = useHighlight([], {
@@ -50,7 +50,7 @@ function ExclusionZoneAnnotation({
         width={`${scaleX()(zone.from) - scaleX()(zone.to)}`}
         height="10px"
         style={{
-          fill: filterId === Filters.signalProcessing.id ? 'gray' : color,
+          fill: filterId === Filters1D.signalProcessing.id ? 'gray' : color,
           opacity,
         }}
         {...highlight.onHover}

src/component/1d/ExclusionZonesAnnotations.tsx

@@ -1,5 +1,5 @@
 import type { Spectrum1D } from 'nmr-load-save';
-import { Filters } from 'nmr-processing';
+import { Filters1D } from 'nmr-processing';
 import { memo } from 'react';
 
 import type { ExclusionZone } from '../../data/types/data1d/ExclusionZone.js';
@@ -76,11 +76,11 @@ function getExclusionZones(
 ): Array<{ id: string; zones: ExclusionZone[] }> {
   const zones: Array<{ id: string; zones: ExclusionZone[] }> = [];
   for (const filter of data.filters) {
-    if (filter.name === Filters.exclusionZones.id && filter.flag) {
-      zones.push({ id: Filters.exclusionZones.id, zones: filter.value });
-    } else if (filter.name === Filters.signalProcessing.id && filter.flag) {
+    if (filter.name === Filters1D.exclusionZones.id && filter.flag) {
+      zones.push({ id: Filters1D.exclusionZones.id, zones: filter.value });
+    } else if (filter.name === Filters1D.signalProcessing.id && filter.flag) {
       zones.push({
-        id: Filters.signalProcessing.id,
+        id: Filters1D.signalProcessing.id,
         zones: filter.value.exclusionsZones,
       });
     }

src/component/1d/matrix/useMatrix.ts

@@ -1,13 +1,13 @@
 import type { NumberArray } from 'cheminfo-types';
 import type { Spectrum } from 'nmr-load-save';
-import { Filters } from 'nmr-processing';
+import { Filters1D } from 'nmr-processing';
 import { useMemo } from 'react';
 
 import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
 import { useChartData } from '../../context/ChartContext.js';
 import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
 
-const { signalProcessing } = Filters;
+const { signalProcessing } = Filters1D;
 
 /**
  * This method will slice the array from the fromIndex to the toIndex and add the first and last element of the original array

src/component/1d/ranges/Range.tsx

@@ -192,6 +192,7 @@ function Range({ range, selectedTool, relativeFormat }: RangeProps) {
         targetTagName="g"
         {...(assignmentRange.isActive && { isOpen: true })}
         buttons={actionsButtons}
+        space={2}
       >
         <ResizerWithScale
           from={from}

src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx

@@ -1,5 +1,5 @@
 import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { Filters } from 'nmr-processing';
+import { Filters1D } from 'nmr-processing';
 import type { ReactNode } from 'react';
 
 import { getSlice } from '../../../../data/data2d/Spectrum2D/index.js';
@@ -143,7 +143,7 @@
     info: { isComplex: true, isFid: false },
   };
 
-  Filters.phaseCorrection.apply(spectrum as unknown as Spectrum1D, {
+  Filters1D.phaseCorrection.apply(spectrum as unknown as Spectrum1D, {
     ph0,
     ph1,
   });

src/component/elements/ActionsButtonsPopover.tsx

@@ -4,7 +4,6 @@ import { Popover } from '@blueprintjs/core';
 import type { Interpolation, Theme } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { CSSProperties } from 'react';
-import { Fragment } from 'react';
 import type { ButtonProps } from 'react-science/ui';
 import { Button } from 'react-science/ui';
 
@@ -44,7 +43,12 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
       enforceFocus={false}
       content={
         <div
-          style={{ display: 'flex', flexDirection: direction, ...contentStyle }}
+          style={{
+            display: 'flex',
+            flexDirection: direction,
+            gap: space,
+            ...contentStyle,
+          }}
           css={css`
             button,
             a[role='button'] {
@@ -58,22 +62,12 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
         >
           {buttons
             .filter((button) => button?.visible !== false)
-            .map(({ title, visible, ...otherProps }, index, array) => (
-              <Fragment key={title || index}>
-                <Button
-                  tooltipProps={{ content: title || '', compact: true }}
-                  {...otherProps}
-                />
-                {index < array.length - 1 && (
-                  <div
-                    key={`spacer-${index}`}
-                    style={{
-                      margin:
-                        direction === 'row' ? `0 ${space}px` : `${space}px 0`,
-                    }}
-                  />
-                )}
-              </Fragment>
+            .map(({ title, visible, ...otherProps }, index) => (
+              <Button
+                key={title || index}
+                tooltipProps={{ content: title || '', compact: true }}
+                {...otherProps}
+              />
             ))}
         </div>
       }