feat: change peaks shape

Author: hamed-musallam

src/component/modal/EditPeakShapeModal.tsx

@@ -1,12 +1,13 @@
 import { DialogFooter } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { Peak1D } from '@zakodium/nmr-types';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { Button } from 'react-science/ui';
 import * as Yup from 'yup';
 
 import { useDispatch } from '../context/DispatchContext.js';
-import ActionButtons from '../elements/ActionButtons.js';
 import type { LabelStyle } from '../elements/Label.js';
 import Label from '../elements/Label.js';
 import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
@@ -17,6 +18,14 @@ import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.js';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { formatNumber } from '../utility/formatNumber.js';
 
+
+const FooterContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+`;
+
+
 type Shape = NonNullable<Peak1D['shape']>;
 
 type Kind =
@@ -40,9 +49,9 @@ function getValues(peak: Peak1D, kind: Kind): Shape {
   const shapeData =
     (shape?.kind || '').toLocaleLowerCase() !== kind
       ? {
-          ...getKindDefaultValues(kind),
-          ...(shape?.fwhm && { fwhm: shape?.fwhm }),
-        }
+        ...getKindDefaultValues(kind),
+        ...(shape?.fwhm && { fwhm: shape?.fwhm }),
+      }
       : shape;
 
   return shapeData as Shape;
@@ -104,17 +113,23 @@ function InnerEditPeakShapeModal(props: Required<EditPeakShapeModalProps>) {
     resolver: yupResolver(validation(kind)) as any,
   });
 
-  function changePeakShapeHandler(values: any) {
-    dispatch({
-      type: 'CHANGE_PEAK_SHAPE',
-      payload: {
-        id: peak.id,
-        shape: {
-          ...values,
+  function changePeakShapeHandler(applyToAll = false) {
+
+    void handleSubmit((values) => {
+
+      dispatch({
+        type: 'CHANGE_PEAK_SHAPE',
+        payload: {
+          id: !applyToAll ? peak.id : undefined,
+          shape: {
+            ...values,
+          },
         },
-      },
-    });
-    onCloseDialog();
+      });
+      onCloseDialog();
+
+    })();
+
   }
 
   function handleChangeKind({ value }: { value: Kind }) {
@@ -162,13 +177,18 @@ function InnerEditPeakShapeModal(props: Required<EditPeakShapeModalProps>) {
           )}
         </>
       </StyledDialogBody>
-      <DialogFooter>
-        <ActionButtons
-          style={{ flexDirection: 'row-reverse', margin: 0 }}
-          onDone={() => handleSubmit(changePeakShapeHandler)()}
-          doneLabel="Save"
-          onCancel={() => onCloseDialog?.()}
-        />
+      <DialogFooter  >
+        <FooterContainer  >
+          <Button variant="outlined" intent="danger" onClick={() => onCloseDialog?.()}>
+            Cancel
+          </Button>
+          <Button intent="primary" onClick={() => changePeakShapeHandler()}>
+            Apply
+          </Button>
+          <Button intent="success" data-action="apply" onClick={() => changePeakShapeHandler(true)} >
+            Apply to all
+          </Button>
+        </FooterContainer>
       </DialogFooter>
     </StandardDialog>
   );

src/component/panels/PeaksPanel/PeaksPanel.tsx

@@ -11,7 +11,6 @@ import { usePreferences } from '../../context/PreferencesContext.js';
 import { useToaster } from '../../context/ToasterContext.js';
 import { useAlert } from '../../elements/Alert.js';
 import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState.js';
-import useCheckExperimentalFeature from '../../hooks/useCheckExperimentalFeature.js';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { booleanToString } from '../../utility/booleanToString.js';
@@ -47,7 +46,6 @@ function PeaksPanelInner(props: PeaksPanelInnerProps) {
   const dispatch = useDispatch();
   const alert = useAlert();
   const toaster = useToaster();
-  const isExperimental = useCheckExperimentalFeature();
 
   const settingRef = useRef<SettingsRef | null>(null);
 
@@ -129,6 +127,25 @@ function PeaksPanelInner(props: PeaksPanelInnerProps) {
     peaksViewState;
 
   const leftButtons: ToolbarItemProps[] = [
+    {
+      disabled,
+      icon: <SvgNmrPeaks />,
+      tooltip: `${booleanToString(!showPeaksShapes)} peaks shapes`,
+      onClick: () => toggleViewProperty('showPeaksShapes'),
+      active: showPeaksShapes,
+    },
+    {
+      disabled,
+      icon: <SvgNmrFt />,
+      tooltip: `${booleanToString(!showPeaksSum)} peaks sum`,
+      onClick: () => toggleViewProperty('showPeaksSum'),
+      active: showPeaksSum,
+    },
+    {
+      icon: <FaThinkPeaks />,
+      tooltip: 'Optimize peaks',
+      onClick: optimizePeaksHandler,
+    },
     {
       disabled,
       icon: <SvgNmrPeaks />,
@@ -143,32 +160,10 @@ function PeaksPanelInner(props: PeaksPanelInnerProps) {
         displayingMode === 'spread' ? 'Top of the peak' : 'Top of the spectrum',
       onClick: toggleDisplayingMode,
       active: displayingMode === 'spread',
-    },
+    }
+
   ];
 
-  if (isExperimental) {
-    leftButtons.unshift(
-      {
-        disabled,
-        icon: <SvgNmrPeaks />,
-        tooltip: `${booleanToString(!showPeaksShapes)} peaks shapes`,
-        onClick: () => toggleViewProperty('showPeaksShapes'),
-        active: showPeaksShapes,
-      },
-      {
-        disabled,
-        icon: <SvgNmrFt />,
-        tooltip: `${booleanToString(!showPeaksSum)} peaks sum`,
-        onClick: () => toggleViewProperty('showPeaksSum'),
-        active: showPeaksSum,
-      },
-      {
-        icon: <FaThinkPeaks />,
-        tooltip: 'Optimize peaks',
-        onClick: optimizePeaksHandler,
-      },
-    );
-  }
   return (
     <TablePanel isFlipped={isFlipped}>
       {!isFlipped && (

src/component/reducer/actions/PeaksActions.ts

@@ -46,7 +46,7 @@ type AutoPeaksPickingAction = ActionType<
 type ChangePeaksShapeAction = ActionType<
   'CHANGE_PEAK_SHAPE',
   {
-    id: string;
+    id?: string;
     shape: Peak1D['shape'];
   }
 >;
@@ -92,9 +92,9 @@ function handleAddPeak(draft: Draft<State>, action: AddPeakAction) {
       y: candidatePeak.y,
       width: 1,
       shape: {
-        kind: 'generalizedLorentzian',
+        kind: 'pseudoVoigt',
         fwhm: 1,
-        gamma: 0.5,
+        mu: 0.5,
       },
     };
     spectrum.peaks.values.push(...mapPeaks([peak], spectrum));
@@ -121,9 +121,9 @@ function handleAddPeaks(draft: Draft<State>, action: AddPeaksAction) {
         y: peak.y,
         width: 1,
         shape: {
-          kind: 'generalizedLorentzian',
+          kind: 'pseudoVoigt',
           fwhm: 1,
-          gamma: 0.5,
+          mu: 0.5,
         },
       };
       spectrum.peaks.values.push(newPeak);
@@ -204,6 +204,14 @@ function handleChangePeakShape(
   const spectrum = getSpectrum(draft);
   if (!isSpectrum1D(spectrum)) return;
 
+  if (!id) {
+    spectrum.peaks.values = spectrum.peaks.values.map((peak) => ({
+      ...peak,
+      shape,
+    }));
+    return;
+  }
+
   const peakIndex = spectrum.peaks.values.findIndex((peak) => peak.id === id);
   if (peakIndex !== -1) {
     spectrum.peaks.values[peakIndex].shape = shape;

src/data/data1d/Spectrum1D/peaks/autoPeakPicking.ts

@@ -41,7 +41,7 @@ export function autoPeakPicking(
       frequency,
       direction,
       sensitivity: 100,
-      shape: { kind: 'lorentzian' },
+      shape: { kind: 'pseudoVoigt', mu: 0.5, fwhm: 1 },
       noiseLevel: noise * noiseFactor,
       minMaxRatio, // Threshold to determine if a given peak should be considered as a noise
       realTopDetection: true,