fix: set the first FT spectrum for 2d projection if none selected (#2770

)

* fix: set the first FT spectrum for 2D projection if none selected

* chore: update nmr-load-save to version 0.23.8

* refactor: use ActiveSpectrum type from mmr-load-save

package.json

@@ -85,7 +85,7 @@
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.23.7",
+    "nmr-load-save": "^0.23.8",
     "nmr-processing": "^11.6.0",
     "nmredata": "^0.9.7",
     "numeral": "^2.0.6",

src/component/1d/FooterBanner.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
+import { ActiveSpectrum, Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
 import { BsCursor } from 'react-icons/bs';
 import { IoPulseSharp } from 'react-icons/io5';
@@ -14,7 +14,6 @@ import { useScaleChecked } from '../context/ScaleContext';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus';
 import useSpectrum from '../hooks/useSpectrum';
-import { ActiveSpectrum } from '../reducer/Reducer';
 
 const styles = css`
   display: flex;

src/component/hooks/useActiveSpectrumIntegralsViewState.ts

@@ -14,7 +14,11 @@ export function useActiveSpectrumIntegralsViewState() {
     view: { integrals },
   } = useChartData();
 
-  if (activeSpectrum?.id && integrals[activeSpectrum?.id]) {
+  if (
+    activeSpectrum?.id &&
+    activeSpectrum?.selected &&
+    integrals[activeSpectrum?.id]
+  ) {
     return integrals[activeSpectrum?.id];
   } else {
     return defaultIntegralsViewState;

src/component/hooks/useActiveSpectrumPeaksViewState.ts

@@ -17,7 +17,11 @@ export function useActiveSpectrumPeaksViewState() {
     view: { peaks },
   } = useChartData();
 
-  if (activeSpectrum?.id && peaks[activeSpectrum?.id]) {
+  if (
+    activeSpectrum?.id &&
+    activeSpectrum?.selected &&
+    peaks[activeSpectrum?.id]
+  ) {
     return peaks[activeSpectrum?.id];
   } else {
     return defaultPeaksViewState;

src/component/hooks/useActiveSpectrumRangesViewState.ts

@@ -19,7 +19,11 @@ export function useActiveSpectrumRangesViewState() {
     view: { ranges },
   } = useChartData();
 
-  if (activeSpectrum?.id && ranges[activeSpectrum?.id]) {
+  if (
+    activeSpectrum?.id &&
+    activeSpectrum?.selected &&
+    ranges[activeSpectrum?.id]
+  ) {
     return ranges[activeSpectrum?.id];
   } else {
     return defaultRangesViewState;

src/component/hooks/useActiveSpectrumStyleOptions.ts

@@ -18,9 +18,15 @@ export default function useActiveSpectrumStyleOptions(
 
   return useMemo(() => {
     const index = activeSpectra?.findIndex(
-      (activeSpectrum) => activeSpectrum.id === id,
+      (activeSpectrum) => activeSpectrum?.selected && activeSpectrum.id === id,
     );
-    const isActive = !!(activeSpectra?.length === 0 || index !== -1);
+    let isNoneSelected = false;
+    isNoneSelected =
+      activeSpectra?.every((activeSpectrum) => !activeSpectrum?.selected) ||
+      false;
+
+    const isActive =
+      !!(activeSpectra?.length === 0 || index !== -1) || isNoneSelected;
     const opacity = isActive
       ? 1
       : get(preferences.current, 'general.dimmedSpectraOpacity', 0.1);

src/component/hooks/useActiveSpectrumZonesViewState.ts

@@ -16,7 +16,11 @@ export function useActiveSpectrumZonesViewState() {
     view: { zones },
   } = useChartData();
 
-  if (activeSpectrum?.id && zones[activeSpectrum?.id]) {
+  if (
+    activeSpectrum?.id &&
+    activeSpectrum?.selected &&
+    zones[activeSpectrum?.id]
+  ) {
     return zones[activeSpectrum?.id];
   } else {
     return defaultZonesViewState;

src/component/hooks/useSpectrum.ts

@@ -10,7 +10,7 @@ export default function useSpectrum(defaultValue: any = null) {
   const activeSpectrum = useActiveSpectrum();
 
   return useMemo<Spectrum>(() => {
-    if (data && activeSpectrum?.id) {
+    if (data && activeSpectrum?.id && activeSpectrum?.selected) {
       const datum =
         data.find((datum) => datum.id === activeSpectrum.id) || defaultValue;
       return datum;

src/component/modal/MultipletAnalysisModal.tsx

@@ -2,13 +2,12 @@
 import { css } from '@emotion/react';
 import { xGetFromToIndex, xyToXYObject } from 'ml-spectra-processing';
 import { analyseMultiplet } from 'multiplet-analysis';
-import { Spectrum } from 'nmr-load-save';
+import { ActiveSpectrum, Spectrum } from 'nmr-load-save';
 import { useState, useEffect } from 'react';
 import { Plot, LineSeries, Axis } from 'react-plot';
 import { Modal } from 'react-science/ui';
 
 import { isSpectrum2D } from '../../data/data2d/Spectrum2D';
-import { ActiveSpectrum } from '../reducer/Reducer';
 
 const styles = css`
   button:focus {

src/component/panels/SpectrumsPanel/SpectraPanelHeader.tsx

@@ -1,5 +1,5 @@
 import { SvgNmrSameTop, SvgNmrResetScale } from 'cheminfo-font';
-import { Spectrum, Spectrum2D } from 'nmr-load-save';
+import { ActiveSpectrum, Spectrum, Spectrum2D } from 'nmr-load-save';
 import { memo, useCallback } from 'react';
 import {
   FaCreativeCommonsSamplingPlus,
@@ -15,7 +15,7 @@ import { useAlert } from '../../elements/popup/Alert';
 import { useModal } from '../../elements/popup/Modal';
 import { useActiveSpectra } from '../../hooks/useActiveSpectra';
 import useSpectrum from '../../hooks/useSpectrum';
-import { ActiveSpectrum, DisplayerMode } from '../../reducer/Reducer';
+import { DisplayerMode } from '../../reducer/Reducer';
 import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
 import DefaultPanelHeader from '../header/DefaultPanelHeader';
 import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton';

src/component/panels/SpectrumsPanel/SpectraTable.tsx

@@ -1,5 +1,6 @@
 import lodashGet from 'lodash/get';
 import {
+  ActiveSpectrum,
   JpathTableColumn,
   PredefinedSpectraColumn,
   PredefinedTableColumn,
@@ -18,7 +19,6 @@ import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
 import { useAlert } from '../../elements/popup/Alert';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 import ExportAsJcampModal from '../../modal/ExportAsJcampModal';
-import { ActiveSpectrum } from '../../reducer/Reducer';
 
 import ColorIndicator from './base/ColorIndicator';
 import ShowHideSpectrumButton, {
@@ -37,7 +37,9 @@ function getActiveSpectraAsObject(activeSpectra: ActiveSpectrum[] | null) {
   const result = {};
   if (activeSpectra) {
     for (const activeSpectrum of activeSpectra) {
-      result[activeSpectrum.id] = true;
+      if (activeSpectrum?.selected) {
+        result[activeSpectrum.id] = true;
+      }
     }
   }
   return result;

src/component/panels/SpectrumsPanel/SpectrumsTabs.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Spectrum } from 'nmr-load-save';
+import { ActiveSpectrum, Spectrum } from 'nmr-load-save';
 import { useState, useMemo, memo, useCallback } from 'react';
 
 import { useChartData } from '../../context/ChartContext';
@@ -9,7 +9,6 @@ import { getModifiers } from '../../context/KeyModifierContext';
 import IsotopesViewer from '../../elements/IsotopesViewer';
 import Tab from '../../elements/Tab/Tab';
 import Tabs from '../../elements/Tab/Tabs';
-import { ActiveSpectrum } from '../../reducer/Reducer';
 import groupByInfoKey from '../../utility/GroupByInfoKey';
 
 import { SpectraTable } from './SpectraTable';

src/component/panels/SummaryPanel/utilities/Utilities.ts

@@ -11,15 +11,15 @@ import {
   Correlation,
   Link,
 } from 'nmr-correlation';
-import { Spectrum2D, Spectrum } from 'nmr-load-save';
+import { Spectrum2D, Spectrum, ActiveSpectrum } from 'nmr-load-save';
 
 import DefaultPathLengths from '../../../../data/constants/DefaultPathLengths';
 import {
   findSignal2D,
   findSpectrum,
 } from '../../../../data/utilities/FindUtilities';
 import isDefaultPathLength from '../../../modal/editZone/validation/isDefaultPathLength';
-import { ActiveSpectrum, DisplayerMode } from '../../../reducer/Reducer';
+import { DisplayerMode } from '../../../reducer/Reducer';
 import { ErrorColors } from '../CorrelationTable/Constants';
 
 function getAtomType(nucleus: string): string {

src/component/reducer/Reducer.ts

@@ -31,11 +31,6 @@ import * as ToolsActions from './actions/ToolsActions';
 import * as ZonesActions from './actions/ZonesActions';
 import { ZoomHistory } from './helper/ZoomHistoryManager';
 
-export interface ActiveSpectrum {
-  id: string;
-  index: number;
-}
-
 export type DisplayerMode = '1D' | '2D';
 
 export interface Pivot {

src/component/reducer/actions/FiltersActions.ts

@@ -2,7 +2,12 @@ import { v4 } from '@lukeed/uuid';
 import { NmrData2DFt } from 'cheminfo-types';
 import { current, Draft } from 'immer';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import {
+  ActiveSpectrum,
+  Spectrum,
+  Spectrum1D,
+  Spectrum2D,
+} from 'nmr-load-save';
 import {
   Filters,
   FiltersManager,
@@ -20,12 +25,7 @@ import { get2DXScale, get2DYScale } from '../../2d/utilities/scale';
 import { options as Tools } from '../../toolbar/ToolTypes';
 import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
 import nucleusToString from '../../utility/nucleusToString';
-import {
-  ActiveSpectrum,
-  getInitialState,
-  State,
-  TraceDirection,
-} from '../Reducer';
+import { getInitialState, State, TraceDirection } from '../Reducer';
 import zoomHistoryManager from '../helper/ZoomHistoryManager';
 import { getActiveSpectrum } from '../helper/getActiveSpectrum';
 import getRange from '../helper/getRange';

src/component/reducer/actions/SpectrumsActions.ts

@@ -366,6 +366,7 @@ function handleChangeActiveSpectrum(
     newActiveSpectra.push({
       id: spectrumId,
       index: spectraObj[spectrumId].index,
+      selected: true,
     });
   }
 

src/component/reducer/actions/ToolsActions.ts

@@ -505,25 +505,26 @@ function setTabActiveSpectrum(draft: Draft<State>, dataGroupByTab) {
 
     if (data.length === 1) {
       const index = draft.data.findIndex((datum) => datum.id === data[0].id);
-      tabActiveSpectrum[tabKey] = [{ id: data[0].id, index }];
+      tabActiveSpectrum[tabKey] = [{ id: data[0].id, index, selected: true }];
     } else {
       const tabSpectra = dataGroupByTab[tabKey];
       const tabSpectraLength = tabSpectra.length;
       if (tabSpectraLength >= 2) {
         const FTSpectrums = tabSpectra.filter((d) => !d.info.isFid);
-        if (
-          FTSpectrums.length > 0 &&
-          (nucleusLength === 2 ||
-            (nucleusLength === 1 && tabSpectraLength !== FTSpectrums.length))
-        ) {
+        if (FTSpectrums.length > 0) {
+          const selected =
+            nucleusLength === 2 ||
+            (nucleusLength === 1 && tabSpectraLength !== FTSpectrums.length);
           const index = draft.data.findIndex(
             (datum) => datum.id === FTSpectrums[0].id,
           );
-          tabActiveSpectrum[tabKey] = [{ id: FTSpectrums[0].id, index }];
+          tabActiveSpectrum[tabKey] = [
+            { id: FTSpectrums[0].id, index, selected },
+          ];
         } else if (tabSpectraLength - FTSpectrums > 0) {
           const id = tabSpectra[0].id;
           const index = draft.data.findIndex((datum) => datum.id === id);
-          tabActiveSpectrum[tabKey] = [{ id, index }];
+          tabActiveSpectrum[tabKey] = [{ id, index, selected: true }];
         } else {
           tabActiveSpectrum[tabKey] = null;
         }

src/component/reducer/helper/getActiveSpectra.ts

@@ -4,6 +4,9 @@ import { State } from '../Reducer';
 
 export function getActiveSpectra(state: Draft<State> | State) {
   const { activeSpectra, activeTab } = state.view.spectra;
+  const spectra = activeSpectra?.[activeTab]?.filter(
+    (spectrum) => spectrum?.selected,
+  );
 
-  return activeSpectra?.[activeTab] || null;
+  return Array.isArray(spectra) && spectra.length > 0 ? spectra : null;
 }

src/component/reducer/helper/getActiveSpectrum.ts

@@ -6,7 +6,7 @@ export function getActiveSpectrum(state: Draft<State> | State) {
   const { activeSpectra, activeTab } = state.view.spectra;
 
   const spectra = activeSpectra[activeTab];
-  if (spectra?.length === 1) {
+  if (spectra?.length === 1 && spectra[0]?.selected) {
     return spectra[0];
   }