feat: show/hide the value of integrals

close #2797
cheminfo · Jan 11, 2024 · f2a0ce3 · f2a0ce3
1 parent 1223b29
commit f2a0ce3
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 31 deletions.
diff --git a/src/component/1d/integral/Integration.tsx b/src/component/1d/integral/Integration.tsx
@@ -15,6 +15,7 @@ export function Integration({ integral, nucleus, max }: IntegralProps) {
   const { x, y } = integral;
   const { scaleRatio } = useActiveSpectrumIntegralsViewState();
   const path = useIntegralPath({ x, y, max, scaleRatio });
+  const { showIntegralsValues } = useActiveSpectrumIntegralsViewState();
   const integralPreferences = usePanelPreferences('integrals', nucleus);
 
   return (
@@ -27,10 +28,12 @@ export function Integration({ integral, nucleus, max }: IntegralProps) {
         d={path}
       />
 
-      <IntegralResizable
-        integralData={integral}
-        integralFormat={integralPreferences.relative.format}
-      />
+      {showIntegralsValues && (
+        <IntegralResizable
+          integralData={integral}
+          integralFormat={integralPreferences.relative.format}
+        />
+      )}
     </g>
   );
 }
diff --git a/src/component/1d/ranges/Range.tsx b/src/component/1d/ranges/Range.tsx
@@ -12,6 +12,7 @@ import { filterForIDsWithAssignment } from '../../assignment/utilities/filterFor
 import { useDispatch } from '../../context/DispatchContext';
 import { ResizerWithScale } from '../../elements/ResizerWithScale';
 import { HighlightEventSource, useHighlight } from '../../highlight';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
 import { useResizerStatus } from '../../hooks/useResizerStatus';
 import { options } from '../../toolbar/ToolTypes';
 import { IntegralIndicator } from '../integral/IntegralIndicator';
@@ -60,6 +61,7 @@ function Range({
 
   const scaleX = useScaleX();
   const dispatch = useDispatch();
+  const { showIntegralsValues } = useActiveSpectrumRangesViewState();
 
   const isBlockedByEditing =
     selectedTool && selectedTool === options.editRange.id;
@@ -145,12 +147,14 @@ function Range({
                 data-no-export="true"
               />
 
-              <IntegralIndicator
-                value={integration}
-                format={relativeFormat}
-                width={width}
-                opacity={isNotSignal ? 0.5 : 1}
-              />
+              {showIntegralsValues && (
+                <IntegralIndicator
+                  value={integration}
+                  format={relativeFormat}
+                  width={width}
+                  opacity={isNotSignal ? 0.5 : 1}
+                />
+              )}
             </g>
           );
         }}

diff --git a/src/component/hooks/useActiveSpectrumIntegralsViewState.ts b/src/component/hooks/useActiveSpectrumIntegralsViewState.ts
@@ -6,6 +6,7 @@ import { useActiveSpectrum } from './useActiveSpectrum';
 
 export const defaultIntegralsViewState: IntegralsViewState = {
   scaleRatio: 1,
+  showIntegralsValues: true,
 };
 
 export function useActiveSpectrumIntegralsViewState() {

diff --git a/src/component/hooks/useActiveSpectrumRangesViewState.ts b/src/component/hooks/useActiveSpectrumRangesViewState.ts
@@ -8,6 +8,7 @@ export const defaultRangesViewState: RangesViewState = {
   showPeaks: false,
   showMultiplicityTrees: false,
   showIntegrals: false,
+  showIntegralsValues: true,
   showJGraph: false,
   displayingMode: 'spread',
   integralsScaleRatio: 1,

diff --git a/src/component/panels/IntegralsPanel/IntegralPanel.tsx b/src/component/panels/IntegralsPanel/IntegralPanel.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { SvgNmrSum } from 'cheminfo-font';
+import { SvgNmrIntegrate, SvgNmrSum } from 'cheminfo-font';
 import lodashGet from 'lodash/get';
 import { Spectrum1D } from 'nmr-load-save';
 import { Info1D, Integrals } from 'nmr-processing';
@@ -22,6 +22,7 @@ import PreferencesHeader from '../header/PreferencesHeader';
 
 import IntegralTable from './IntegralTable';
 import IntegralsPreferences from './IntegralsPreferences';
+import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState';
 
 const style = css`
   .sum-button {
@@ -31,6 +32,10 @@ const style = css`
     align-items: center;
     justify-content: center;
   }
+
+  button {
+    margin-right: 2px;
+  }
 `;
 
 export interface IntegralPanelInnerProps {
@@ -49,10 +54,19 @@ function IntegralPanelInner({
   const [filterIsActive, setFilterIsActive] = useState(false);
 
   const dispatch = useDispatch();
+  const { showIntegralsValues } = useActiveSpectrumIntegralsViewState();
+
   const modal = useModal();
   const [isFlipped, setFlipStatus] = useState(false);
   const settingRef = useRef<any>();
 
+  function handleShowIntegralsValues() {
+    dispatch({
+      type: 'TOGGLE_INTEGRALS_VIEW_PROPERTY',
+      payload: { key: 'showIntegralsValues' },
+    });
+  }
+
   const yesHandler = useCallback(() => {
     dispatch({ type: 'DELETE_INTEGRAL', payload: {} });
   }, [dispatch]);
@@ -180,6 +194,20 @@ function IntegralPanelInner({
           >
             <ImLink />
           </ActiveButton>
+          <ActiveButton
+            popupTitle={
+              showIntegralsValues
+                ? 'Hide integrals values'
+                : 'Show integrals values'
+            }
+            popupPlacement="right"
+            onClick={handleShowIntegralsValues}
+            value={showIntegralsValues}
+          >
+            <SvgNmrIntegrate
+              style={{ pointerEvents: 'none', fontSize: '12px' }}
+            />
+          </ActiveButton>
         </DefaultPanelHeader>
       )}
       {isFlipped && (

diff --git a/src/component/panels/RangesPanel/RangesHeader.tsx b/src/component/panels/RangesPanel/RangesHeader.tsx
@@ -66,6 +66,7 @@ function RangesHeader({
     showMultiplicityTrees,
     showJGraph,
     showIntegrals,
+    showIntegralsValues,
     showPeaks,
     displayingMode,
   } = useActiveSpectrumRangesViewState();
@@ -111,6 +112,12 @@ function RangesHeader({
     });
   }
 
+  function handleShowIntegralsValues() {
+    dispatch({
+      type: 'TOGGLE_RANGES_VIEW_PROPERTY',
+      payload: { key: 'showIntegralsValues' },
+    });
+  }
   function handleShowIntegrals() {
     dispatch({
       type: 'TOGGLE_RANGES_VIEW_PROPERTY',
@@ -258,6 +265,21 @@ function RangesHeader({
             style={{ pointerEvents: 'none', fontSize: '12px' }}
           />
         </ActiveButton>
+        <ActiveButton
+          popupTitle={
+            showIntegralsValues
+              ? 'Hide integrals values'
+              : 'Show integrals values'
+          }
+          popupPlacement="right"
+          onClick={handleShowIntegralsValues}
+          value={showIntegralsValues}
+          disabled={!hasRanges}
+        >
+          <SvgNmrIntegrate
+            style={{ pointerEvents: 'none', fontSize: '12px' }}
+          />
+        </ActiveButton>
 
         <ActiveButton
           className="icon"

diff --git a/src/component/reducer/Reducer.ts b/src/component/reducer/Reducer.ts
@@ -423,6 +423,11 @@ function innerSpectrumReducer(draft: Draft<State>, action: Action) {
         );
       case 'CUT_INTEGRAL':
         return IntegralsActions.handleCutIntegral(draft, action);
+      case 'TOGGLE_INTEGRALS_VIEW_PROPERTY':
+        return IntegralsActions.handleToggleIntegralsViewProperty(
+          draft,
+          action,
+        );
 
       case 'SET_X_DOMAIN':
         return DomainActions.handleSetXDomain(draft, action);

diff --git a/src/component/reducer/actions/IntegralsActions.ts b/src/component/reducer/actions/IntegralsActions.ts
@@ -1,7 +1,7 @@
 import { v4 } from '@lukeed/uuid';
 import { Draft, original } from 'immer';
 import { xyIntegration } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
+import { IntegralsViewState, Spectrum1D } from 'nmr-load-save';
 import { Integral } from 'nmr-processing';
 
 import {
@@ -20,6 +20,8 @@ import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 import getRange from '../helper/getRange';
 import { getSpectrum } from '../helper/getSpectrum';
 import { ActionType } from '../types/ActionType';
+import { setIntegralsViewProperty } from '../helper/setIntegralsViewProperty';
+import { FilterType } from '../../utility/filterType';
 
 type ChangeIntegralSumAction = ActionType<
   'CHANGE_INTEGRAL_SUM',
@@ -40,13 +42,21 @@ type ChangeIntegralRelativeValueAction = ActionType<
 >;
 type CutIntegralAction = ActionType<'CUT_INTEGRAL', { cutValue: number }>;
 
+type ToggleIntegralsViewAction = ActionType<
+  'TOGGLE_INTEGRALS_VIEW_PROPERTY',
+  {
+    key: keyof FilterType<IntegralsViewState, boolean>;
+  }
+>;
+
 export type IntegralsActions =
   | ChangeIntegralSumAction
   | AddIntegralAction
   | DeleteIntegralAction
   | ChangeIntegralAction
   | ChangeIntegralRelativeValueAction
   | CutIntegralAction
+  | ToggleIntegralsViewAction
   | ActionType<'CHANGE_INTEGRALS_SUM_FLAG'>;
 
 function handleChangeIntegralSum(
@@ -219,6 +229,22 @@ function handleCutIntegral(draft: Draft<State>, action: CutIntegralAction) {
   updateIntegralsRelativeValues(spectrum);
 }
 
+function toggleIntegralsViewProperty(
+  draft: Draft<State>,
+  key: keyof FilterType<IntegralsViewState, boolean>,
+) {
+  setIntegralsViewProperty(draft, key, (flag) => !flag);
+}
+
+//action
+function handleToggleIntegralsViewProperty(
+  draft: Draft<State>,
+  action: ToggleIntegralsViewAction,
+) {
+  const { key } = action.payload;
+  toggleIntegralsViewProperty(draft, key);
+}
+
 export {
   handleCutIntegral,
   handleChangeIntegralSum,
@@ -227,4 +253,5 @@ export {
   handleChangeIntegral,
   handleChangeIntegralsRelativeValue,
   handleChangeIntegralsSumFlag,
+  handleToggleIntegralsViewProperty,
 };
diff --git a/src/data/PredictionManager.ts b/src/data/PredictionManager.ts
@@ -340,26 +340,23 @@ function generated2DSpectrum(params: {
     experiment,
   });
   const spectralWidth = getSpectralWidth(experiment, options);
-  const datum = initiateDatum2D(
-    {
-      data: { rr: { ...minMaxContent, noise: 0.01 } },
-      display: {
-        positiveColor: color,
-        negativeColor: adjustAlpha(color, 40),
-      },
-      info: {
-        name: SpectrumName,
-        title: SpectrumName,
-        nucleus: nuclei,
-        originFrequency: frequency,
-        baseFrequency: frequency,
-        pulseSequence: 'prediction',
-        spectralWidth,
-        experiment,
-      },
+  const datum = initiateDatum2D({
+    data: { rr: { ...minMaxContent, noise: 0.01 } },
+    display: {
+      positiveColor: color,
+      negativeColor: adjustAlpha(color, 40),
     },
-    [],
-  );
+    info: {
+      name: SpectrumName,
+      title: SpectrumName,
+      nucleus: nuclei,
+      originFrequency: frequency,
+      baseFrequency: frequency,
+      pulseSequence: 'prediction',
+      spectralWidth,
+      experiment,
+    },
+  });
   datum.zones.values = mapZones(zones);
   return datum;
 }