fix: auto (peaks and ranges) picking window size

src/component/header/AutoPeakPickingOptionPanel.tsx

@@ -1,12 +1,17 @@
 import { Formik } from 'formik';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import * as Yup from 'yup';
 
 import { useDispatch } from '../context/DispatchContext';
 import Button from '../elements/Button';
 import Label from '../elements/Label';
 import FormikNumberInput from '../elements/formik/FormikNumberInput';
 import FormikSelect from '../elements/formik/FormikSelect';
+import { useAlert } from '../elements/popup/Alert';
+import {
+  MIN_AREA_POINTS,
+  useCheckPointsNumberInWindowArea,
+} from '../hooks/useCheckPointsNumberInWindowArea';
 
 import { headerLabelStyle } from './Header';
 import { HeaderContainer } from './HeaderContainer';
@@ -45,16 +50,20 @@ const INIT_VALUES = {
 
 function AutoPeakPickingOptionPanel() {
   const dispatch = useDispatch();
-
-  const handlePeakPicking = useCallback(
-    (values) => {
+  const pointsNumber = useCheckPointsNumberInWindowArea();
+  const alert = useAlert();
+  function handlePeakPicking(values) {
+    if (pointsNumber > MIN_AREA_POINTS) {
       dispatch({
         type: 'AUTO_PEAK_PICKING',
         payload: values,
       });
-    },
-    [dispatch],
-  );
+    } else {
+      alert.error(
+        `Auto peak picking only available for area more than ${MIN_AREA_POINTS} points`,
+      );
+    }
+  }
 
   return (
     <HeaderContainer>

src/component/header/RangesPickingOptionPanel.tsx

@@ -1,12 +1,16 @@
 import { Formik } from 'formik';
-import { useCallback } from 'react';
 import * as Yup from 'yup';
 
 import { useDispatch } from '../context/DispatchContext';
 import Button from '../elements/Button';
 import Label from '../elements/Label';
 import FormikCheckBox from '../elements/formik/FormikCheckBox';
 import FormikNumberInput from '../elements/formik/FormikNumberInput';
+import { useAlert } from '../elements/popup/Alert';
+import {
+  MIN_AREA_POINTS,
+  useCheckPointsNumberInWindowArea,
+} from '../hooks/useCheckPointsNumberInWindowArea';
 
 import { headerLabelStyle } from './Header';
 import { HeaderContainer } from './HeaderContainer';
@@ -22,16 +26,22 @@ const initialValues = {
 
 function RangesPickingOptionPanel() {
   const dispatch = useDispatch();
+  const pointsNumber = useCheckPointsNumberInWindowArea();
+  const alert = useAlert();
 
-  const handleRangesPicking = useCallback(
-    (values) => {
+  function handleRangesPicking(values) {
+    if (pointsNumber > MIN_AREA_POINTS) {
       dispatch({
         type: 'AUTO_RANGES_DETECTION',
         payload: values,
       });
-    },
-    [dispatch],
-  );
+    } else {
+      alert.error(
+        `Auto range picking only available for area more than ${MIN_AREA_POINTS} points`,
+      );
+    }
+  }
+
   return (
     <HeaderContainer>
       <Formik

src/component/hooks/useCheckPointsNumberInWindowArea.ts

@@ -0,0 +1,25 @@
+import { xGetFromToIndex } from 'ml-spectra-processing';
+
+import { useChartData } from '../context/ChartContext';
+
+import useSpectrum from './useSpectrum';
+
+export const MIN_AREA_POINTS = 5 as const;
+
+export function useCheckPointsNumberInWindowArea() {
+  const state = useChartData();
+  const spectrum = useSpectrum(null);
+  const {
+    xDomain: [from, to],
+  } = state;
+
+  if (spectrum) {
+    const { fromIndex, toIndex } = xGetFromToIndex(spectrum.data.x, {
+      from,
+      to,
+    });
+    return toIndex - fromIndex;
+  }
+
+  return 0;
+}