change the contour plot behavior

package.json

@@ -91,7 +91,7 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.34.0",
+    "nmr-load-save": "^0.34.1",
     "nmr-processing": "^12.3.2",
     "nmredata": "^0.9.9",
     "numeral": "^2.0.6",

src/component/2d/ft/Contours.tsx

@@ -54,19 +54,16 @@ function usePath(
   return pathBuilder.toString();
 }
 
-const useContoursLevel = (spectrum: Spectrum2D, sign: LevelSign) => {
-  const {
-    view: {
-      zoom: { levels },
-    },
-  } = useChartData();
+const useContoursLevel = (
+  spectrum: Spectrum2D,
+  sign: LevelSign,
+  quadrant = 'rr',
+) => {
   const {
-    id,
     display: { contourOptions },
   } = spectrum;
-  const defaultLevel = getDefaultContoursLevel(contourOptions);
-  const level = levels?.[id]?.[sign];
-  return typeof level !== 'number' ? defaultLevel[sign] : level;
+  const level = contourOptions[sign];
+  return level ?? getDefaultContoursLevel(spectrum, quadrant)[sign];
 };
 
 function ContoursPaths({
@@ -78,7 +75,6 @@ function ContoursPaths({
 }: ContoursPathsProps) {
   const activeSpectrum = useActiveSpectrum();
   const preferences = usePreferences();
-
   const level = useContoursLevel(spectrum, sign);
 
   const contours = useMemo(() => {
@@ -129,28 +125,30 @@ function ContoursInner({ spectra, displayerKey }: ContoursInnerProps) {
 
   return (
     <g clipPath={`url(#${displayerKey}clip-chart-2d)`} className="contours">
-      {spectra?.map((spectrum) => (
-        <g key={spectrum.id}>
-          {spectrum.display.isPositiveVisible && (
-            <ContoursPaths
-              id={spectrum.id}
-              sign="positive"
-              spectrum={spectrum}
-              color={spectrum.display.positiveColor}
-              onTimeout={timeoutHandler}
-            />
-          )}
-          {spectrum.display.isNegativeVisible && (
-            <ContoursPaths
-              id={spectrum.id}
-              sign="negative"
-              spectrum={spectrum}
-              color={spectrum.display.negativeColor}
-              onTimeout={timeoutHandler}
-            />
-          )}
-        </g>
-      ))}
+      {spectra?.map((spectrum) => {
+        return (
+          <g key={spectrum.id}>
+            {spectrum.display.isPositiveVisible && (
+              <ContoursPaths
+                id={spectrum.id}
+                sign="positive"
+                spectrum={spectrum}
+                color={spectrum.display.positiveColor}
+                onTimeout={timeoutHandler}
+              />
+            )}
+            {spectrum.display.isNegativeVisible && (
+              <ContoursPaths
+                id={spectrum.id}
+                sign="negative"
+                spectrum={spectrum}
+                color={spectrum.display.negativeColor}
+                onTimeout={timeoutHandler}
+              />
+            )}
+          </g>
+        );
+      })}
     </g>
   );
 }

src/component/panels/SpectraPanel/base/setting/Spectrum1DSetting.tsx

@@ -1,7 +1,8 @@
-import { Formik } from 'formik';
+import { Controller, useForm } from 'react-hook-form';
+import { ColorPicker } from 'react-science/ui';
 
-import FormikColorPicker from '../../../../elements/formik/FormikColorPicker';
-import FormikOnChange from '../../../../elements/formik/FormikOnChange';
+import { COLORS } from '../../../../../data/utilities/generateColor';
+import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha';
 
 import Spectrum1DHistogram from './Spectrum1DHistogram';
 
@@ -14,20 +15,34 @@ function Spectrum1DSetting({
   data: SpectrumData,
   onSubmit,
 }: Spectrum1DSettingProps) {
+  const { control, handleSubmit } = useForm({
+    defaultValues: SpectrumData.display,
+  });
+
   return (
-    <Formik initialValues={SpectrumData.display} onSubmit={onSubmit}>
-      <>
-        <div
-          style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}
-        >
-          <div style={{ display: 'block', position: 'relative' }}>
-            <FormikColorPicker name="color" />
-          </div>
-          <Spectrum1DHistogram color="red" data={SpectrumData.data} />
-        </div>
-        <FormikOnChange onChange={onSubmit} />
-      </>
-    </Formik>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+      <div style={{ display: 'block', position: 'relative' }}>
+        <Controller
+          name="color"
+          control={control}
+          render={({ field }) => {
+            const { value, onChange } = field;
+            return (
+              <ColorPicker
+                onChangeComplete={(color) => {
+                  onChange(colorToHexWithAlpha(color));
+                  void handleSubmit(onSubmit)();
+                }}
+                color={{ hex: value || '#000' }}
+                presetColors={COLORS}
+                style={{ boxShadow: 'none' }}
+              />
+            );
+          }}
+        />
+      </div>
+      <Spectrum1DHistogram color="red" data={SpectrumData.data} />
+    </div>
   );
 }
 

src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx

@@ -1,11 +1,21 @@
 /** @jsxImportSource @emotion/react */
+import { RangeSlider } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { Formik } from 'formik';
+import debounce from 'lodash/debounce';
+import { useMemo } from 'react';
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext,
+  useWatch,
+} from 'react-hook-form';
+import { ColorPicker } from 'react-science/ui';
 
-import FormikColorPicker from '../../../../elements/formik/FormikColorPicker';
-import FormikInput from '../../../../elements/formik/FormikInput';
-import FormikOnChange from '../../../../elements/formik/FormikOnChange';
-import FormikSlider from '../../../../elements/formik/FormikSlider';
+import { COLORS } from '../../../../../data/utilities/generateColor';
+import { NumberInput2 } from '../../../../elements/NumberInput2';
+import { useFormValidateField } from '../../../../elements/useFormValidateField';
+import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha';
 
 import Spectrum2DHistogram from './Spectrum2DHistogram';
 
@@ -27,49 +37,119 @@ function Spectrum2DSetting({
   onSubmit,
 }: Spectrum2DSettingProps) {
   const { positiveColor, negativeColor } = SpectrumData.display;
+  const methods = useForm({ defaultValues: SpectrumData.display });
+
   return (
-    <Formik onSubmit={onSubmit} initialValues={SpectrumData.display}>
-      <>
-        <div>
-          <div css={style(positiveColor)}>
-            <span style={{ padding: '0 10px' }}>Positive</span>
-            <FormikColorPicker name="positiveColor" />
-            <div style={{ padding: '5px' }}>
-              <span className="label">contour Levels [ min - max ]</span>
-              <FormikSlider
-                name="contourOptions.positive.contourLevels"
-                debounceTime={100}
-              />
-              <span className="label">number of Layers </span>
-              <FormikInput
-                name="contourOptions.positive.numberOfLayers"
-                type="number"
-                debounceTime={250}
-              />
-            </div>
-          </div>
-          <div css={style(negativeColor)}>
-            <span style={{ padding: '0 10px' }}>Negative</span>
-            <FormikColorPicker name="negativeColor" />
-            <div style={{ padding: '5px' }}>
-              <span className="label">contour Levels [ min - max ]</span>
-              <FormikSlider
-                name="contourOptions.negative.contourLevels"
-                debounceTime={100}
+    <FormProvider {...methods}>
+      <div>
+        <div css={style(positiveColor)}>
+          <span style={{ padding: '0 10px' }}>Positive</span>
+          <Settings sign="positive" onSubmit={onSubmit} />
+        </div>
+        <div css={style(negativeColor)}>
+          <span style={{ padding: '0 10px' }}>Negative</span>
+          <Settings sign="negative" onSubmit={onSubmit} />
+        </div>
+        <Spectrum2DHistogram data={SpectrumData.data} />
+      </div>
+    </FormProvider>
+  );
+}
+
+interface SettingsProps {
+  sign: 'positive' | 'negative';
+  onSubmit: (values: any) => void;
+}
+
+function Settings(props: SettingsProps) {
+  const { sign, onSubmit } = props;
+  const { control, handleSubmit } = useFormContext();
+  const isValid = useFormValidateField();
+  const progressColor = useWatch({ name: `${sign}Color` });
+
+  const debounceOnSubmit = useMemo(
+    () =>
+      debounce((onSubmit) => {
+        void handleSubmit(onSubmit)();
+      }, 250),
+    [handleSubmit],
+  );
+
+  return (
+    <>
+      <Controller
+        name={`${sign}Color`}
+        control={control}
+        render={({ field }) => {
+          const { value, onChange } = field;
+          return (
+            <ColorPicker
+              onChangeComplete={(color) => {
+                onChange(colorToHexWithAlpha(color));
+
+                void handleSubmit(onSubmit)();
+              }}
+              color={{ hex: value || '#000' }}
+              presetColors={COLORS}
+              style={{ boxShadow: 'none' }}
+            />
+          );
+        }}
+      />
+      <div style={{ padding: '5px' }}>
+        <span className="label">contour Levels [ min - max ]</span>
+        <Controller
+          name={`contourOptions.${sign}.contourLevels`}
+          control={control}
+          render={({ field }) => {
+            const { value, onChange } = field;
+
+            return (
+              <RangeSlider
+                min={0}
+                max={100}
+                stepSize={1}
+                labelStepSize={10}
+                onChange={(e) => {
+                  onChange(e);
+                  debounceOnSubmit(onSubmit);
+                }}
+                value={value}
+                showTrackFill
+                css={css`
+                  width: 90%;
+
+                  [class*='slider-progress']:nth-child(2) {
+                    background-color: ${progressColor};
+                  }
+                `}
               />
-              <span className="label">number of Layers </span>
-              <FormikInput
-                name="contourOptions.negative.numberOfLayers"
-                type="number"
+            );
+          }}
+        />
+        <span className="label">number of Layers </span>
+        <Controller
+          control={control}
+          name={`contourOptions.${sign}.numberOfLayers`}
+          rules={{ required: true }}
+          render={({ field }) => {
+            return (
+              <NumberInput2
+                {...field}
+                onValueChange={(valueAsNumber) => {
+                  field.onChange(valueAsNumber);
+                  void handleSubmit(onSubmit)();
+                }}
+                intent={!isValid(field.name) ? 'danger' : 'none'}
+                style={{ width: 60 }}
+                min={0}
                 debounceTime={250}
               />
-            </div>
-          </div>
-          <Spectrum2DHistogram data={SpectrumData.data} />
-        </div>
-        <FormikOnChange onChange={onSubmit} />
-      </>
-    </Formik>
+            );
+          }}
+        />
+      </div>
+    </>
   );
 }
 

src/component/reducer/actions/SpectraActions.ts

@@ -461,13 +461,8 @@ function handleChangeSpectrumSetting(
     const spectrum = draft.data[index];
     spectrum.display = display;
     if (isSpectrum2D(spectrum)) {
-      const contoursLevels = draft.view.zoom.levels;
-      const { checkLevel } = contoursManager(
-        spectrum.id,
-        contoursLevels,
-        spectrum.display.contourOptions,
-      );
-      contoursLevels[spectrum.id] = checkLevel();
+      const { checkLevel } = contoursManager(spectrum);
+      checkLevel();
     }
   }
 }