feat: display ranges peaks

refactor: peaks component to be generic for standalone peaks and the ones in the ranges
cheminfo · Sep 12, 2023 · 5655c02 · 5655c02
1 parent a43bfb7
commit 5655c02
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 72 deletions.
diff --git a/src/component/1d/Chart1D.tsx b/src/component/1d/Chart1D.tsx
@@ -11,7 +11,7 @@ import IntegralsSeries from './integral/IntegralsSeries';
 import JGraph from './jCouplingGraph/JGraph';
 import MultiAnalysisRanges from './multiAnalysis/MultiAnalysisRanges';
 import { PeakEditionProvider } from './peaks/PeakEditionManager';
-import { Peaks } from './peaks/Peaks';
+import Peaks from './peaks/Peaks';
 import PeaksShapes from './peaks/PeaksShapes';
 import Ranges from './ranges/Ranges';
 import BaseLineZones from './tool/BaseLineZones';
@@ -44,8 +44,9 @@ function Chart1D({ mode, width, height, margin, displayerKey }) {
         <LinesSeries />
         <ApodizationLine />
         <IntegralsSeries />
-        <Peaks />
+        <Peaks peaksSource="peaks" />
         <Ranges />
+        <Peaks peaksSource="ranges" />
         <JGraph />
         <MultiAnalysisRanges />
         <BaseLineZones />

diff --git a/src/component/1d/peaks/PeakAnnotations.tsx b/src/component/1d/peaks/PeakAnnotations.tsx
@@ -1,34 +1,29 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Peak1D } from 'nmr-processing';
-
 import { useChartData } from '../../context/ChartContext';
 import { useScaleChecked } from '../../context/ScaleContext';
-import { HighlightEventSource, useHighlight } from '../../highlight';
+import { useHighlight } from '../../highlight';
 import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
 import { formatNumber } from '../../utility/formatNumber';
 
 import { PeakEditionListener } from './PeakEditionManager';
+import { Peak, PeaksAnnotationsProps, PeaksSource } from './Peaks';
 
-const emptyData = { peaks: {}, info: {}, display: {} };
-
-function PeakAnnotations() {
+function PeakAnnotations(props: PeaksAnnotationsProps) {
+  const { peaks, peaksSource, spectrumId, peakFormat } = props;
   const { displayerKey } = useChartData();
   const activeSpectrum = useActiveSpectrum();
   const { shiftY } = useScaleChecked();
-  const spectrum = useSpectrum(emptyData) as Spectrum1D;
 
   return (
     <g className="peaks" clipPath={`url(#${displayerKey}clip-chart-1d)`}>
       <g transform={`translate(0,-${(activeSpectrum?.index || 0) * shiftY})`}>
-        {spectrum.peaks.values.map((peak) => (
+        {peaks.map((peak) => (
           <PeakAnnotation
             key={peak.id}
-            spectrumId={spectrum.id}
+            spectrumId={spectrumId}
             peak={peak}
             color="#730000"
-            nucleus={spectrum.info.nucleus}
+            peaksSource={peaksSource}
+            format={peakFormat}
           />
         ))}
       </g>
@@ -37,24 +32,24 @@ function PeakAnnotations() {
 }
 
 interface PeakAnnotationProps {
-  peak: Peak1D;
+  peak: Peak;
   spectrumId: string;
   color: string;
-  nucleus: string;
+  peaksSource: PeaksSource;
+  format: string;
 }
 
-function PeakAnnotation({
+export function PeakAnnotation({
   peak,
   spectrumId,
   color,
-  nucleus,
+  peaksSource,
+  format,
 }: PeakAnnotationProps) {
   const { id, x, y } = peak;
   const sign = Math.sign(y);
-
-  const { deltaPPM } = usePanelPreferences('peaks', nucleus);
   const highlight = useHighlight([id], {
-    type: HighlightEventSource.PEAK,
+    type: peaksSource === 'peaks' ? 'PEAK' : 'RANGE',
     extra: { id },
   });
   const { scaleX, scaleY } = useScaleChecked();
@@ -94,7 +89,7 @@ function PeakAnnotation({
           fontSize="11px"
           fill={color}
         >
-          {formatNumber(x, deltaPPM.format)}
+          {formatNumber(x, format)}
         </text>
       </PeakEditionListener>
     </g>

diff --git a/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx b/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx
@@ -1,46 +1,27 @@
-import { Spectrum1D } from 'nmr-load-save';
-
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { HighlightEventSource, useHighlight } from '../../highlight';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useHighlight } from '../../highlight';
 import { formatNumber } from '../../utility/formatNumber';
 import { resolve } from '../utilities/intersectionResolver';
 
 import { PeakEditionListener } from './PeakEditionManager';
+import { getDecimalsCount } from '../utilities/getDecimalsCount';
+import { PeaksAnnotationsProps, PeaksSource } from './Peaks';
+import { memo } from 'react';
 
-const emptyData = { peaks: {}, info: {}, display: {} };
 const notationWidth = 10;
 const notationMargin = 2;
 
-function getDecimalsCount(max: number, format: string) {
-  const numberOfDigits = format.replace(/\./, '').length;
-  const fractionDigits = format.split('.')[1].length;
-
-  return (
-    Math.max(String(max.toFixed(0)).length, numberOfDigits - fractionDigits) +
-    fractionDigits
-  );
-}
-
-function PeakAnnotationsTreeStyle() {
-  const { displayerKey, xDomain } = useChartData();
-  const { scaleX } = useScaleChecked();
-  const spectrum = useSpectrum(emptyData) as Spectrum1D;
-  const { deltaPPM } = usePanelPreferences('peaks', spectrum.info.nucleus);
-
-  const decimalsCount = getDecimalsCount(xDomain[1], deltaPPM.format);
-  const mapPeaks = spectrum.peaks.values
-    .map((peak) => ({
-      ...peak,
-      scaleX: scaleX()(peak.x),
-    }))
-    .sort((p1, p2) => p2.x - p1.x);
-
-  if (!mapPeaks?.length) return null;
+function PeakAnnotationsTreeStyle(props: PeaksAnnotationsProps) {
+  const {
+    peaks,
+    peaksSource,
+    spectrumColor,
+    xDomain,
+    displayerKey,
+    peakFormat,
+  } = props;
+  const decimalsCount = getDecimalsCount(xDomain[1], peakFormat);
 
-  const peaks = resolve(mapPeaks, {
+  const mapPeaks = resolve(peaks, {
     key: 'scaleX',
     width: notationWidth,
     margin: notationMargin,
@@ -50,7 +31,7 @@ function PeakAnnotationsTreeStyle() {
   return (
     <g className="peaks" clipPath={`url(#${displayerKey}clip-chart-1d)`}>
       <g transform={`translate(0,${decimalsCount * 10})`}>
-        {peaks.map((group) => {
+        {mapPeaks.map((group) => {
           return (
             <g
               key={group.meta.id}
@@ -67,12 +48,13 @@ function PeakAnnotationsTreeStyle() {
                     x={x}
                     id={id}
                     value={value}
-                    format={deltaPPM.format}
-                    color={spectrum.display.color}
+                    format={peakFormat}
+                    color={spectrumColor}
                     peakEditionFieldPositon={{
                       x: group.meta.groupStartX + startX,
                       y: decimalsCount * 10,
                     }}
+                    peaksSource={peaksSource}
                   />
                 );
               })}
@@ -92,12 +74,21 @@ interface PeakAnnotationProps {
   id: string;
   value: number;
   peakEditionFieldPositon: { x: number; y: number };
+  peaksSource: PeaksSource;
 }
 function PeakAnnotation(props: PeakAnnotationProps) {
-  const { startX, format, color, id, value, x, peakEditionFieldPositon } =
-    props;
+  const {
+    startX,
+    format,
+    color,
+    id,
+    value,
+    x,
+    peakEditionFieldPositon,
+    peaksSource,
+  } = props;
   const highlight = useHighlight([id], {
-    type: HighlightEventSource.PEAK,
+    type: peaksSource === 'peaks' ? 'PEAK' : 'RANGE',
     extra: { id },
   });
   return (
@@ -126,4 +117,4 @@ function PeakAnnotation(props: PeakAnnotationProps) {
   );
 }
 
-export default PeakAnnotationsTreeStyle;
+export default memo(PeakAnnotationsTreeStyle);