feat(ranges): forward options to publication string renderer (#3958)

* Export as > Preview publication string (modal) become Copy publication string
* Display publication string (button) become Publication string menu
  * Publication string divider
  * Configure (modal)
  * Show / Hide (toggle button)
* Configuration modal of publication string
  * Apply and copy are separated actions
  * copy is a floating button in preview container
  * "Apply and close" is an action of dialog footer (right align)
* Add textStyle options forward to renderer
* Add checkbox to control publication string visibility in configuration dialog

fix(ranges): publication string preview iso with chart

Author: tpoisseau

package-lock.json

@@ -69,9 +69,9 @@
     "@emotion/styled": "^11.14.1",
     "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-form": "^1.27.7",
-    "@zakodium/nmr-types": "^0.5.0",
-    "@zakodium/nmrium-core": "^0.6.0",
-    "@zakodium/nmrium-core-plugins": "^0.6.29",
+    "@zakodium/nmr-types": "^0.5.1",
+    "@zakodium/nmrium-core": "^0.6.1",
+    "@zakodium/nmrium-core-plugins": "^0.6.33",
     "@zakodium/pdnd-esm": "^1.0.2",
     "@zip.js/zip.js": "^2.8.15",
     "cheminfo-font": "^1.13.1",
@@ -113,7 +113,7 @@
     "react-ocl-nmr": "^4.1.1",
     "react-plot": "^3.1.2",
     "react-rnd": "^10.5.2",
-    "react-science": "^19.5.1",
+    "react-science": "^19.7.1",
     "react-table": "^7.8.0",
     "smart-array-filter": "^5.0.0",
     "yup": "^1.7.1",

package.json

@@ -1,23 +1,22 @@
 import styled from '@emotion/styled';
-import type { BoundingBox } from '@zakodium/nmrium-core';
-import { rangesToACS } from 'nmr-processing';
-import { useEffect, useState } from 'react';
+import type { BoundingBox, TextStyle } from '@zakodium/nmrium-core';
+import { useEffect, useMemo, useState } from 'react';
 import { BsArrowsMove } from 'react-icons/bs';
 import { FaTimes } from 'react-icons/fa';
 import { Rnd } from 'react-rnd';
+import { SVGStyledText } from 'react-science/ui';
 
-import { isSpectrum1D } from '../../data/data1d/Spectrum1D/isSpectrum1D.js';
+import { isSpectrum1D } from '../../data/data1d/Spectrum1D/index.ts';
 import { useChartData } from '../context/ChartContext.js';
 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';
 import { useTextMetrics } from '../hooks/useTextMetrics.ts';
 import { useCheckExportStatus } from '../hooks/useViewportSize.js';
+import { useACSSettings } from '../hooks/use_acs_settings.ts';
+import { usePublicationStrings } from '../hooks/use_publication_strings.ts';
 
 const ReactRnd = styled(Rnd)`
   border: 1px solid transparent;
@@ -36,11 +35,17 @@ interface UseWrapSVGTextParams {
   text: string;
   width: number;
   fontSize: number;
+  fontStyle: string | undefined;
+  fontWeight: string | undefined;
 }
 
 function useWrapSVGText(params: UseWrapSVGTextParams) {
-  const { text, width, fontSize } = params;
-  const { getTextWidth } = useTextMetrics(fontSize);
+  const { text, width, fontSize, fontStyle, fontWeight } = params;
+  const { getTextWidth } = useTextMetrics({
+    labelSize: fontSize,
+    labelStyle: fontStyle,
+    labelWeight: fontWeight,
+  });
 
   const formattedText = text
     .replaceAll(/<sup>(?<n>.*?)<\/sup>/g, '++$1++ ')
@@ -73,28 +78,36 @@ function useWrapSVGText(params: UseWrapSVGTextParams) {
 
 interface PublicationTextProps {
   text: string;
+  textStyle: TextStyle;
   fontSize?: number;
   width: number;
   padding?: number;
 }
 
 function PublicationText(props: PublicationTextProps) {
-  const { fontSize = 12, padding = 10, width, text } = props;
+  const { text, width } = props;
+  const textStyle = {
+    ...props.textStyle,
+    fontSize: props.textStyle.fontSize ?? props.fontSize ?? 12,
+  };
+  const { fontSize = textStyle.fontSize, padding = 10 } = props;
   const boxWidth = width - padding * 2;
 
   const { lineHeight, lines } = useWrapSVGText({
     width: boxWidth,
     fontSize,
+    fontStyle: textStyle.fontStyle,
+    fontWeight: textStyle.fontWeight,
     text,
   });
 
   return (
     <g transform={`translate(${padding} ${padding})`}>
       {lines.map((line, lineIndex) => (
-        <text
+        <SVGStyledText
           // eslint-disable-next-line react/no-array-index-key
           key={lineIndex}
-          fontSize={fontSize}
+          {...textStyle}
           fontFamily="Arial"
           y={lineIndex * lineHeight}
           dominantBaseline="hanging"
@@ -119,7 +132,7 @@ function PublicationText(props: PublicationTextProps) {
               return <tspan key={wordIndex}>{word} </tspan>;
             }
           })}
-        </text>
+        </SVGStyledText>
       ))}
     </g>
   );
@@ -129,16 +142,18 @@ interface DraggablePublicationStringProps {
   value: string;
   bonding: BoundingBox;
   spectrumKey: string;
+  nucleus: string | undefined;
 }
 
 function DraggablePublicationString(props: DraggablePublicationStringProps) {
-  const { value, bonding: externalBounding, spectrumKey } = props;
+  const { value, bonding: externalBounding, spectrumKey, nucleus } = props;
   const dispatch = useDispatch();
   const { viewerRef } = useGlobal();
   const [bounding, setBounding] = useState<BoundingBox>(externalBounding);
   const [isMoveActive, setIsMoveActive] = useState(false);
   const { percentToPixel, pixelToPercent } = useSVGUnitConverter();
   const isExportProcessStart = useCheckExportStatus();
+  const acsOptions = useACSSettings(nucleus);
 
   useEffect(() => {
     setBounding({ ...externalBounding });
@@ -254,7 +269,11 @@ function DraggablePublicationString(props: DraggablePublicationStringProps) {
   if (isExportProcessStart) {
     return (
       <g transform={`translate(${x} ${y})`}>
-        <PublicationText text={value} width={width} />
+        <PublicationText
+          text={value}
+          width={width}
+          textStyle={acsOptions.textStyle}
+        />
       </g>
     );
   }
@@ -298,51 +317,35 @@ function DraggablePublicationString(props: DraggablePublicationStringProps) {
         y={y}
       >
         <svg width={width} height={'auto'} xmlns="http://www.w3.org/2000/svg">
-          <PublicationText text={value} width={width} />
+          <PublicationText
+            text={value}
+            width={width}
+            textStyle={acsOptions.textStyle}
+          />
         </svg>
       </ActionsButtonsPopover>
     </ReactRnd>
   );
 }
 
-function usePublicationString() {
-  const spectra = useSpectraByActiveNucleus();
-  const activeTab = useActiveNucleusTab();
-  const rangesPreferences = usePanelPreferences('ranges', activeTab);
-
-  const output: Record<string, string> = {};
-
-  for (const spectrum of spectra) {
-    if (!isSpectrum1D(spectrum)) {
-      continue;
-    }
-    const { id: spectrumKey, info, ranges } = spectrum;
-
-    if (!Array.isArray(ranges?.values) || ranges.values.length === 0) {
-      continue;
-    }
-
-    const { originFrequency: observedFrequency, nucleus } = info;
-
-    const value = rangesToACS(ranges.values, {
-      nucleus, // '19f'
-      deltaFormat: rangesPreferences.deltaPPM.format,
-      couplingFormat: rangesPreferences.coupling.format,
-      observedFrequency, //400
-    });
-
-    output[spectrumKey] = value;
-  }
-
-  return output;
-}
-
 export function FloatPublicationString() {
-  const publicationString = usePublicationString();
+  const publicationString = usePublicationStrings();
   const {
+    data: spectra,
     view: { ranges },
   } = useChartData();
-  const options = Object.entries(ranges);
+  const options = useMemo(() => Object.entries(ranges), [ranges]);
+  const spectraToNucleusMap = useMemo(() => {
+    const map = new Map<string, string>();
+
+    for (const spectrum of spectra) {
+      if (!isSpectrum1D(spectrum)) continue;
+      const { nucleus } = spectrum.info;
+      map.set(spectrum.id, nucleus);
+    }
+
+    return map;
+  }, [spectra]);
 
   return options.map(([spectrumKey, viewOptions]) => {
     const { showPublicationString, publicationStringBounding } = viewOptions;
@@ -352,6 +355,7 @@ export function FloatPublicationString() {
       <DraggablePublicationString
         key={spectrumKey}
         spectrumKey={spectrumKey}
+        nucleus={spectraToNucleusMap.get(spectrumKey)}
         bonding={publicationStringBounding}
         value={publicationString[spectrumKey]}
       />

src/component/1d/FloatPublicationString.tsx

@@ -55,7 +55,7 @@ function resolveYOverlaps(
 }
 
 function useDetectPeakOverlaps(peaks: Peak[], format: string) {
-  const { getTextWidth } = useTextMetrics(textSize);
+  const { getTextWidth } = useTextMetrics({ labelSize: textSize });
   const overlapPeaksById: Record<string, boolean> = {};
 
   let cluster: Peak[] = [];

src/component/1d/peaks/PeakAnnotations.tsx

@@ -32,7 +32,7 @@ type ProcessedRange = RangeType & {
 function useStackRangesAssignmentsLabels(ranges: RangeType[]) {
   const { scaleX } = useScaleChecked();
 
-  const { getTextWidth } = useTextMetrics(labelSize);
+  const { getTextWidth } = useTextMetrics({ labelSize });
 
   if (ranges.length === 0) return null;
 

src/component/1d/ranges/Ranges.tsx

@@ -25,7 +25,7 @@ function YAxis(props: YAxisProps) {
   const { width, height, margin } = useChartData();
   const nucleusStr = useActiveNucleusTab();
   const [, unit] = nucleusStr.split(',');
-  const { getTextWidth } = useTextMetrics(10);
+  const { getTextWidth } = useTextMetrics({ labelSize: 10 });
 
   const scaleY = useScale2DY();
 

src/component/2d/YAxis.tsx

@@ -67,7 +67,7 @@ function useSignalsOverlap(axis: IndicationLinesAxis, spectrum: Spectrum1D) {
   });
   const scaleX = useScale2DX();
   const scaleY = useScale2DY();
-  const { getTextWidth } = useTextMetrics(labelSize);
+  const { getTextWidth } = useTextMetrics({ labelSize });
 
   if (!signals) return null;