fix:fill value in signal input field when select range not working

cheminfo · Jun 25, 2021 · aa837fe · aa837fe
1 parent 66dced0
commit aa837fe
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 59 deletions.
diff --git a/src/component/1d/Viewer1D.jsx b/src/component/1d/Viewer1D.jsx
@@ -233,6 +233,9 @@ function Viewer1D({ emptyText = undefined }) {
               mouseCoordinates: position,
             });
             break;
+          case options.editRange.id:
+            propagateEvent();
+            break;
           default:
             break;
         }
@@ -244,11 +247,6 @@ function Viewer1D({ emptyText = undefined }) {
               position: position.x,
             });
             break;
-          case 'editRange':
-            if (position.shiftKey) {
-              propagateEvent();
-            }
-            break;
 
           default:
         }

diff --git a/src/component/1d/multiplicityTree/TreeNodes.tsx b/src/component/1d/multiplicityTree/TreeNodes.tsx
@@ -39,7 +39,9 @@ function TreeNodes({
       const _startYNode = startY + (edgeLevel + 1) * levelHeight;
 
       return (
-        <g key={`treeNode_${signalID}_${startX}_${_startX}_${ratio}`}>
+        <g
+          key={`${multiplicityIndex}_${signalID}_${startX}_${_startX}_${ratio}`}
+        >
           {/* ratio text */}
           <text
             textAnchor="middle"

diff --git a/src/component/hoc/EditModalRangeWrapper.jsx b/src/component/hoc/EditModalRangeWrapper.jsx
@@ -0,0 +1,37 @@
+import { useMemo, memo, forwardRef } from 'react';
+
+import { useChartData } from '../context/ChartContext';
+import { useFormatNumberByNucleus } from '../utility/FormatNumber';
+
+export default function EditModalRangeWrapper(WrappedComponent) {
+  function Wrapper(props) {
+    const { data, activeSpectrum, activeTab } = useChartData();
+    const format = useFormatNumberByNucleus(activeTab);
+
+    const { info = {} } = useMemo(() => {
+      if (data && activeSpectrum && activeSpectrum.id) {
+        const datum = data.find((datum) => datum.id === activeSpectrum.id) || {
+          info: {},
+        };
+        return datum;
+      }
+      return {};
+    }, [activeSpectrum, data]);
+
+    const { forwardedRef, ...rest } = props;
+    return (
+      <WrappedComponent
+        {...rest}
+        format={format}
+        info={info}
+        ref={forwardedRef}
+      />
+    );
+  }
+
+  return memo(
+    forwardRef((props, ref) => {
+      return <Wrapper {...props} forwardedRef={ref} />;
+    }),
+  );
+}
diff --git a/src/component/modal/editRange/forms/components/AddSignalFormTab.jsx b/src/component/modal/editRange/forms/components/AddSignalFormTab.jsx
@@ -1,16 +1,15 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { useFormikContext } from 'formik';
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, forwardRef } from 'react';
 import { FaPlus } from 'react-icons/fa';
 import * as Yup from 'yup';
 
-import { useChartData } from '../../../../context/ChartContext';
 import Button from '../../../../elements/Button';
 import FormikForm from '../../../../elements/formik/FormikForm';
 import FormikInput from '../../../../elements/formik/FormikInput';
+import EditModalRangeWrapper from '../../../../hoc/EditModalRangeWrapper';
 import { translateMultiplet } from '../../../../panels/extra/utilities/MultiplicityUtilities';
-import { useFormatNumberByNucleus } from '../../../../utility/FormatNumber';
 
 const AddSignalFormTabStyle = css`
   text-align: center;
@@ -57,11 +56,8 @@ const AddSignalFormTabStyle = css`
   }
 `;
 
-function AddSignalFormTab({ onFocus, onBlur, rangeData }) {
-  const formRef = useRef();
+function AddSignalFormTab({ onFocus, onBlur, rangeData, format }, ref) {
   const { values, setFieldValue } = useFormikContext();
-  const { activeTab } = useChartData();
-  const format = useFormatNumberByNucleus(activeTab);
 
   const saveHandler = useCallback(
     (val) => {
@@ -95,8 +91,8 @@ function AddSignalFormTab({ onFocus, onBlur, rangeData }) {
   }, [rangeData]);
 
   const triggerSubmitHandler = useCallback(() => {
-    formRef.current.submitForm();
-  }, []);
+    ref.current.submitForm();
+  }, [ref]);
 
   return (
     <div css={AddSignalFormTabStyle}>
@@ -105,7 +101,7 @@ function AddSignalFormTab({ onFocus, onBlur, rangeData }) {
           Edit or select a delta value of new signal (ppm):
         </p>
         <FormikForm
-          ref={formRef}
+          ref={ref}
           validationSchema={validation}
           initialValues={{
             newSignalDelta: (rangeData.from + rangeData.to) / 2,
@@ -142,4 +138,4 @@ function AddSignalFormTab({ onFocus, onBlur, rangeData }) {
   );
 }
 
-export default memo(AddSignalFormTab);
+export default EditModalRangeWrapper(forwardRef(AddSignalFormTab));
diff --git a/src/component/modal/editRange/forms/components/SignalsForm.jsx b/src/component/modal/editRange/forms/components/SignalsForm.jsx
@@ -1,15 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { useFormikContext } from 'formik';
-import lodashGet from 'lodash/get';
-import { useCallback, useMemo, memo, useEffect, useState } from 'react';
+import { useCallback, useMemo, memo, useEffect, useState, useRef } from 'react';
 
-import { useChartData } from '../../../../context/ChartContext';
 import Tab from '../../../../elements/Tab/Tab';
 import Tabs from '../../../../elements/Tab/Tabs';
+import EditModalRangeWrapper from '../../../../hoc/EditModalRangeWrapper';
 import { translateMultiplet } from '../../../../panels/extra/utilities/MultiplicityUtilities';
 import Events from '../../../../utility/Events';
-import { useFormatNumberByNucleus } from '../../../../utility/FormatNumber';
 
 import AddSignalFormTab from './AddSignalFormTab';
 import SignalFormTab from './SignalFormTab';
@@ -37,50 +35,46 @@ const tabStylesAddition = css`
   color: red;
 `;
 
-function SignalsForm({ rangeData }) {
-  const { values, setFieldValue, errors } = useFormikContext();
+function SignalsForm({ rangeData, format, info }) {
+  const newSignalFormRef = useRef();
 
-  const { data: spectraData, activeSpectrum, activeTab } = useChartData();
-  const format = useFormatNumberByNucleus(activeTab);
+  const { values, setFieldValue, errors } = useFormikContext();
 
   const [activeField, setActiveField] = useState(null);
-  const [frequency, setFrequency] = useState(null);
-
-  useEffect(() => {
-    if (
-      spectraData &&
-      activeSpectrum &&
-      lodashGet(
-        spectraData,
-        `[${activeSpectrum.index}].info.originFrequency`,
-        undefined,
-      )
-    ) {
-      setFrequency(spectraData[activeSpectrum.index].info.originFrequency);
-    } else {
-      setFrequency(null);
-    }
-  }, [activeSpectrum, spectraData]);
 
   useEffect(() => {
     Events.on('brushEnd', (event) => {
-      if (activeField && frequency) {
-        setFieldValue(
-          activeField,
-          Number(format(Math.abs(event.range[0] - event.range[1]) * frequency)),
-        );
+      if (info.originFrequency) {
+        if (activeField) {
+          if (values.activeTab === 'addSignalTab') {
+            newSignalFormRef.current.setValues({
+              [activeField]:
+                (event.range[1] - event.range[0]) / 2 + event.range[0],
+            });
+          } else {
+            const value = Number(
+              format(
+                Math.abs(event.range[0] - event.range[1]) *
+                  info.originFrequency,
+              ),
+            );
+            setFieldValue(activeField, value);
+          }
+        }
       }
     });
 
     return () => {
       Events.off('brushEnd');
     };
-  }, [activeField, setFieldValue, frequency, values.activeTab, format]);
+  }, [activeField, setFieldValue, values.activeTab, format, info]);
 
   useEffect(() => {
     Events.on('mouseClick', (event) => {
-      if (values.activeTab === 'addSignalTab' && activeField) {
-        setFieldValue(activeField, event.xPPM);
+      if (activeField) {
+        if (values.activeTab === 'addSignalTab') {
+          newSignalFormRef.current.setValues({ [activeField]: event.xPPM });
+        }
       }
     });
 
@@ -125,13 +119,7 @@ function SignalsForm({ rangeData }) {
 
   const tabContainsErrors = useCallback(
     (i) => {
-      return (
-        errors.signals &&
-        (lodashGet(errors, 'signals.noCouplings', []).some(
-          (_error) => _error.index === i,
-        ) ||
-          lodashGet(errors, `signals[${i}].missingCouplings`, []).length > 0)
-      );
+      return errors?.signals && errors?.signals[i] ? true : false;
     },
     [errors],
   );
@@ -163,7 +151,11 @@ function SignalsForm({ rangeData }) {
         key="addSignalTab"
         className="add-signal-tab"
       >
-        <AddSignalFormTab onFocus={handleOnFocus} rangeData={rangeData} />
+        <AddSignalFormTab
+          onFocus={handleOnFocus}
+          rangeData={rangeData}
+          ref={newSignalFormRef}
+        />
       </Tab>
     );
 
@@ -213,4 +205,4 @@ function SignalsForm({ rangeData }) {
   );
 }
 
-export default memo(SignalsForm);
+export default EditModalRangeWrapper(memo(SignalsForm));