feat: improve export publication string options (#3677)

* feat: improve export publication string options

* chore: update nmrium core packages

* feat: save ACS options in the workspace

* fix typo

* refactor: create hook for retrieving active nucleus

* feat: store ACS option per nucleus

---------

Co-authored-by: Michaël Zasso <targos@protonmail.com>

Author: hamed-musallam

package-lock.json

@@ -65,9 +65,9 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hookform/resolvers": "^5.2.2",
-    "@zakodium/nmr-types": "^0.1.1",
-    "@zakodium/nmrium-core": "^0.1.7",
-    "@zakodium/nmrium-core-plugins": "^0.1.10",
+    "@zakodium/nmr-types": "^0.2.0",
+    "@zakodium/nmrium-core": "^0.2.1",
+    "@zakodium/nmrium-core-plugins": "^0.3.1",
     "@zip.js/zip.js": "^2.8.2",
     "cheminfo-font": "^1.13.1",
     "cheminfo-types": "^1.8.1",
@@ -123,7 +123,7 @@
     "@types/d3-zoom": "^3.0.8",
     "@types/dlv": "^1.1.5",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.7.0",
     "@types/papaparse": "^5.3.16",
     "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.1",

package.json

@@ -12,6 +12,7 @@ import { useDispatch } from '../context/DispatchContext.js';
 import { useGlobal } from '../context/GlobalContext.js';
 import type { ActionsButtonsPopoverProps } from '../elements/ActionsButtonsPopover.js';
 import { ActionsButtonsPopover } from '../elements/ActionsButtonsPopover.js';
+import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.ts';
 import { useCanvasContext } from '../hooks/useCanvasContext.js';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { useSVGUnitConverter } from '../hooks/useSVGUnitConverter.js';
@@ -305,11 +306,7 @@ function DraggablePublicationString(props: DraggablePublicationStringProps) {
 
 function usePublicationString() {
   const spectra = useSpectraByActiveNucleus();
-  const {
-    view: {
-      spectra: { activeTab },
-    },
-  } = useChartData();
+  const activeTab = useActiveNucleusTab();
   const rangesPreferences = usePanelPreferences('ranges', activeTab);
 
   const output: Record<string, string> = {};

src/component/1d/FloatPublicationString.tsx

@@ -16,6 +16,7 @@ import { useDispatch } from '../context/DispatchContext.js';
 import { useGlobal } from '../context/GlobalContext.js';
 import type { ActionsButtonsPopoverProps } from '../elements/ActionsButtonsPopover.js';
 import { ActionsButtonsPopover } from '../elements/ActionsButtonsPopover.js';
+import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.ts';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { useSVGUnitConverter } from '../hooks/useSVGUnitConverter.js';
 import useSpectraByActiveNucleus from '../hooks/useSpectraPerNucleus.js';
@@ -50,11 +51,7 @@ interface RangeItem {
 
 function useMapRanges(ranges: Ranges['values']) {
   const output: RangeItem[] = [];
-  const {
-    view: {
-      spectra: { activeTab },
-    },
-  } = useChartData();
+  const activeTab = useActiveNucleusTab();
   const preferences = usePanelPreferences('ranges', activeTab);
   for (const range of ranges) {
     const { id, from, to, integration, signals = [] } = range;

src/component/1d/FloatingRanges.tsx

@@ -7,6 +7,7 @@ import { useMemo } from 'react';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
+import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.ts';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScaleWithRation } from '../utilities/scale.js';
@@ -123,11 +124,7 @@ function useBoxPlot() {
 }
 
 export function Boxplot() {
-  const {
-    view: {
-      spectra: { activeTab },
-    },
-  } = useChartData();
+  const activeTab = useActiveNucleusTab();
   const options = usePanelPreferences('matrixGeneration', activeTab);
 
   if (!options) return;

src/component/1d/matrix/Boxplot.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
+import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.ts';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScaleWithRation } from '../utilities/scale.js';
@@ -74,11 +75,7 @@ function useSliceStocsyData(options?: StocsyData | null) {
 }
 
 export function Stocsy() {
-  const {
-    view: {
-      spectra: { activeTab },
-    },
-  } = useChartData();
+  const activeTab = useActiveNucleusTab();
   const options = usePanelPreferences('matrixGeneration', activeTab);
 
   if (!options) return;

src/component/1d/matrix/Stocsy.tsx

@@ -0,0 +1,10 @@
+import { useChartData } from '../context/ChartContext.tsx';
+
+export function useActiveNucleusTab() {
+  const {
+    view: {
+      spectra: { activeTab },
+    },
+  } = useChartData();
+  return activeTab;
+}

src/component/hooks/useActiveNucleusTab.ts

@@ -2,11 +2,12 @@ import { FaEye, FaEyeSlash, FaMinus, FaPlus } from 'react-icons/fa';
 import { GrRadialSelected } from 'react-icons/gr';
 import { TooltipHelpContent } from 'react-science/ui';
 
-import { useChartData } from '../context/ChartContext.js';
 import { useDispatch } from '../context/DispatchContext.js';
 import type { ToolbarItemProps } from '../panels/header/DefaultPanelHeader.js';
 import type { SpectraSelectedMode } from '../reducer/actions/SpectraActions.js';
 
+import { useActiveNucleusTab } from './useActiveNucleusTab.ts';
+
 interface ToggleSpectraVisibility {
   enableShowAll: boolean;
   enableShowSelected: boolean;
@@ -26,12 +27,7 @@ export function useToggleSpectraVisibility(
     enableShowSelected = true,
   } = props;
   const dispatch = useDispatch();
-  const {
-    view: {
-      spectra: { activeTab },
-    },
-  } = useChartData();
-
+  const activeTab = useActiveNucleusTab();
   function showSpectraHandler(mode: SpectraSelectedMode) {
     dispatch({
       type: 'CHANGE_SPECTRA_VISIBILITY_BY_NUCLEUS',

src/component/hooks/useToggleSpectraVisibility.tsx

@@ -5,14 +5,14 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useChartData } from '../context/ChartContext.js';
 import { useDispatch } from '../context/DispatchContext.js';
 import ActionButtons from '../elements/ActionButtons.js';
 import type { LabelStyle } from '../elements/Label.js';
 import Label from '../elements/Label.js';
 import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 import { Select2 } from '../elements/Select2.js';
 import { StyledDialogBody } from '../elements/StyledDialogBody.js';
+import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.ts';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { formatNumber } from '../utility/formatNumber.js';
 
@@ -94,11 +94,7 @@ export function EditPeakShapeModal(props: EditPeakShapeModalProps) {
 function InnerEditPeakShapeModal(props: Required<EditPeakShapeModalProps>) {
   const { peak, onCloseDialog } = props;
   const dispatch = useDispatch();
-  const {
-    view: {
-      spectra: { activeTab },
-    },
-  } = useChartData();
+  const activeTab = useActiveNucleusTab();
   const peaksPreferences = usePanelPreferences('peaks', activeTab);
 
   const [kind, setKind] = useState<Kind>(peak.shape?.kind || 'gaussian');