feat(processings): integrate operatorUI ChartSVG

package.json

@@ -66,8 +66,8 @@
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.1",
     "@zakodium/nmr-types": "^0.5.26",
-    "@zakodium/nmrium-core": "^0.7.64",
-    "@zakodium/nmrium-core-plugins": "^0.7.86",
+    "@zakodium/nmrium-core": "^0.7.65",
+    "@zakodium/nmrium-core-plugins": "^0.7.87",
     "@zakodium/pdnd-esm": "^1.1.1",
     "@zakodium/utils": "^0.5.1",
     "@zip.js/zip.js": "^2.8.53",
@@ -111,7 +111,7 @@
     "react-ocl-nmr": "^4.1.1",
     "react-plot": "^3.1.2",
     "react-rnd": "^10.5.3",
-    "react-science": "^23.0.1",
+    "react-science": "^23.1.1",
     "react-table": "^7.8.0",
     "smart-array-filter": "^5.0.0",
     "ts-pattern": "^5.9.0",

src/component/1d/ApodizationLine.tsx

@@ -6,6 +6,7 @@ import {
   createApodizationWindowData,
   default1DApodization,
 } from 'nmr-processing';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useFilterSyncOptions } from '../context/FilterSyncOptionsContext.js';
@@ -16,7 +17,6 @@ import useSpectrum from '../hooks/useSpectrum.js';
 import useTempSpectrum from '../hooks/useTempSpectrum.js';
 import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
 import type { ApodizationOptions } from '../panels/filtersPanel/Filters/hooks/useApodization.js';
-import { PathBuilder } from '../utility/PathBuilder.js';
 
 import { useIsInset } from './inset/InsetProvider.js';
 import { getXScale, getYScale } from './utilities/scale.js';
@@ -84,7 +84,7 @@ export function ApodizationLine() {
     scaleX = windowScaleX;
   }
 
-  const pathBuilder = new PathBuilder();
+  const pathBuilder = new SVGPathBuilder();
   const { re, x } = tempSpectrum.data;
 
   const apodizationOptions = merge(

src/component/1d/Line.tsx

@@ -1,10 +1,10 @@
 import type { CSSProperties } from 'react';
 import { useMemo } from 'react';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useScaleChecked } from '../context/ScaleContext.js';
 import useActiveSpectrumStyleOptions from '../hooks/useActiveSpectrumStyleOptions.js';
 import useXYReduce from '../hooks/useXYReduce.js';
-import { PathBuilder } from '../utility/PathBuilder.js';
 import { parseColor } from '../utility/parseColor.js';
 
 import { useInsetOptions } from './inset/InsetProvider.js';
@@ -31,7 +31,7 @@ function Line({ data, id, display, index }: LineProps) {
     const _scaleX = scaleX();
     const _scaleY = scaleY({ spectrumId: id });
 
-    const pathBuilder = new PathBuilder();
+    const pathBuilder = new SVGPathBuilder();
     if (data?.x && data?.y && _scaleX(0)) {
       const pathPoints = xyReduce(data);
 

src/component/1d/SVGContent1D.tsx

@@ -1,6 +1,7 @@
 import { ClipPathContainer } from '../1d-2d/components/ClipPathContainer.js';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
 import { ShareDataProvider } from '../context/ShareDataContext.js';
+import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.ts';
 
 import { ApodizationLine } from './ApodizationLine.js';
 import ExclusionZonesAnnotations from './ExclusionZonesAnnotations.js';
@@ -18,11 +19,14 @@ import MultiAnalysisRanges from './multiAnalysis/MultiAnalysisRanges.js';
 import MultiplicityTrees from './multiplicityTree/MultiplicityTrees.js';
 import Peaks from './peaks/Peaks.js';
 import PeaksShapes from './peaks/PeaksShapes.js';
+import { PluginSVGChart } from './plugin_svg_chart.tsx';
 import Ranges from './ranges/Ranges.js';
 import RangesIntegrals from './ranges/RangesIntegrals.js';
 import { Signals } from './ranges/Signals.tsx';
 
 export function SVGContent1D() {
+  const isExperimental = useCheckExperimentalFeature();
+
   return (
     <g>
       <ClipPathContainer>
@@ -47,6 +51,8 @@ export function SVGContent1D() {
         <SpectrumInfoBlock />
 
         <SimilarityTree />
+
+        {isExperimental && <PluginSVGChart />}
       </ClipPathContainer>
       <Signals />
       <JGraph />

src/component/1d/baseline/BaselinePreview.tsx

@@ -4,6 +4,7 @@ import type { Spectrum1D } from '@zakodium/nmrium-core';
 import { isSpectrum1D } from '@zakodium/nmrium-core';
 import { xyBaselineCalculation } from 'nmr-processing';
 import { useMemo, useRef, useState } from 'react';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../../context/ChartContext.tsx';
 import { useFilterSyncOptions } from '../../context/FilterSyncOptionsContext.tsx';
@@ -18,7 +19,6 @@ import {
   DEFAULT_BASELINE_ALGORITHM,
   getBaselineValues,
 } from '../../panels/filtersPanel/Filters/hooks/useBaselineCorrection.tsx';
-import { PathBuilder } from '../../utility/PathBuilder.ts';
 
 import { getMedianWindow } from './getMedianWindow.ts';
 import { getMedianY } from './getMedianY.ts';
@@ -227,7 +227,7 @@ function SpectrumPreview({ spectrum, anchors }: SpectrumPreviewProps) {
     const _scaleX = scaleX();
     const _scaleY = scaleY({ spectrumId: activeSpectrum?.id });
 
-    const pathBuilder = new PathBuilder();
+    const pathBuilder = new SVGPathBuilder();
 
     if (!x || !y || !_scaleX(0)) return '';
 

src/component/1d/database/DatabaseSpectrum.tsx

@@ -2,6 +2,7 @@ import type { Spectrum1D } from '@zakodium/nmrium-core';
 import { extent } from 'd3-array';
 import throttle from 'lodash/throttle.js';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useCore } from '../../context/CoreContext.js';
@@ -13,7 +14,6 @@ import {
 } from '../../highlight/index.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { spinnerContext } from '../../loader/SpinnerContext.js';
-import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScaleWithRation } from '../utilities/scale.js';
 
 function DatabaseSpectrum() {
@@ -61,7 +61,7 @@ function DatabaseSpectrum() {
         setLoading(false);
         const spectrum = data?.spectra?.[0] || null;
         if (spectrum) {
-          const pathBuilder = new PathBuilder();
+          const pathBuilder = new SVGPathBuilder();
           const { x, re: y } = (spectrum as Spectrum1D).data;
           const yDomain = extent(y) as number[];
           const finalScaleX = scaleX();

src/component/1d/database/ResurrectedDatabaseRanges.tsx

@@ -1,6 +1,7 @@
 import type { Spectrum1D } from '@zakodium/nmrium-core';
 import { extent } from 'd3-array';
 import { rangesToXY } from 'nmr-processing';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
@@ -11,7 +12,6 @@ import {
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { useVerticalAlign } from '../../hooks/useVerticalAlign.js';
-import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScale } from '../utilities/scale.js';
 
 const emptyData = { info: { originFrequency: 400 } };
@@ -71,7 +71,7 @@ function ResurrectedDatabaseRanges() {
   const finalScaleX = scaleX();
 
   const paths = spectra.map(({ data: { x, y }, from, to }) => {
-    const pathBuilder = new PathBuilder();
+    const pathBuilder = new SVGPathBuilder();
     pathBuilder.moveTo(finalScaleX(x[0]), scaleY(y[0]));
     for (let i = 1; i < x.length; i++) {
       pathBuilder.lineTo(finalScaleX(x[i]), scaleY(y[i]));

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

@@ -4,12 +4,12 @@ import { xFindClosestIndex } from 'ml-spectra-processing';
 import { matrixToBoxPlot } from 'nmr-processing';
 import type { CSSProperties } from 'react';
 import { useMemo } from 'react';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
 import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
-import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScaleWithRation } from '../utilities/scale.js';
 
 import { sliceArrayForDomain, useMatrix } from './useMatrix.js';
@@ -64,7 +64,7 @@ function usePath(
   const { scaleX } = useScaleChecked();
   const scaleY = useYScale(scaleRatio, yDomain);
 
-  const pathBuilder = new PathBuilder();
+  const pathBuilder = new SVGPathBuilder();
 
   const xScaler = scaleX();
 
@@ -83,8 +83,8 @@ function useAreaPath(
   const { scaleX } = useScaleChecked();
   const scaleY = useYScale(scaleRatio, yDomain);
 
-  const pathBuilder = new PathBuilder();
-  const pathBuilder2 = new PathBuilder();
+  const pathBuilder = new SVGPathBuilder();
+  const pathBuilder2 = new SVGPathBuilder();
 
   const xScaler = scaleX();
 
@@ -97,7 +97,7 @@ function useAreaPath(
     pathBuilder2.lineTo(xScaler(pathPoints.x[i]), scaleY(pathPoints.y2[i]));
   }
 
-  return pathBuilder.concatPath(pathBuilder2);
+  return SVGPathBuilder.concat(pathBuilder, pathBuilder2).toString();
 }
 
 function useBoxPlot() {

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

@@ -2,12 +2,12 @@ import { extent } from 'd3-array';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import { matrixToStocsy } from 'nmr-processing';
 import { useMemo } from 'react';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
 import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
-import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScaleWithRation } from '../utilities/scale.js';
 
 import {
@@ -162,7 +162,7 @@ function RenderStocsyAsSVG(props: StocsyProps) {
 
   return Object.keys(colorGroups).map((color) => {
     const points = colorGroups[color];
-    const pathBuilder = new PathBuilder();
+    const pathBuilder = new SVGPathBuilder();
 
     pathBuilder.moveTo(xScaler(points[0].x), scaleY(points[0].y));
 

src/component/1d/peaks/usePeakShapesPath.ts

@@ -2,10 +2,10 @@ import type { Peak1D } from '@zakodium/nmr-types';
 import type { Spectrum1D } from '@zakodium/nmrium-core';
 import type { DataXY } from 'cheminfo-types';
 import { peakToXY, peaksToXY } from 'nmr-processing';
+import { SVGPathBuilder } from 'react-science/ui';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
-import { PathBuilder } from '../../utility/PathBuilder.js';
 
 type PeaksShapesOptions =
   | {
@@ -56,7 +56,7 @@ export function usePeakShapesPath(spectrum: Spectrum1D) {
     const _scaleX = scaleX();
     const _scaleY = scaleY({ spectrumId: spectrum.id });
 
-    const pathBuilder = new PathBuilder();
+    const pathBuilder = new SVGPathBuilder();
     let fill = 'transparent';
 
     if (pathSeries) {

src/component/1d/plugin_svg_chart.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+
+import { useChartData } from '../context/ChartContext.tsx';
+import { useCore } from '../context/CoreContext.tsx';
+import { useScaleChecked } from '../context/ScaleContext.tsx';
+import { useIndicatorLineColor } from '../hooks/useIndicatorLineColor.ts';
+import { useStableSpectrum } from '../hooks/useSpectrum.ts';
+import { useVerticalAlign } from '../hooks/useVerticalAlign.ts';
+import { useLiveOperation } from '../panels/filtersPanel/processings/use_live_operation.ts';
+import { CoreOperatorChartSVG } from '../utility/core_slots/core_operator_chart_svg.tsx';
+
+import { getYScale } from './utilities/scale.ts';
+
+export function PluginSVGChart() {
+  const core = useCore();
+  const spectrum = useStableSpectrum();
+  const { height, width, margin } = useChartData();
+  const [liveOperation] = useLiveOperation();
+  const { scaleX: scaleXBuilder } = useScaleChecked();
+  const indicatorLineColor = useIndicatorLineColor();
+
+  const scaleX = useMemo(() => scaleXBuilder(), [scaleXBuilder]);
+  const scaleY = useWindowYScale();
+
+  if (!liveOperation) return null;
+  if (!spectrum) return null;
+
+  const operatorUI = core.slotOperator(liveOperation.operatorId);
+  if (!operatorUI) return null;
+
+  return (
+    <CoreOperatorChartSVG
+      core={core}
+      operatorUI={operatorUI}
+      spectrum={spectrum}
+      operation={liveOperation}
+      height={height}
+      width={width}
+      margin={margin}
+      scaleX={scaleX}
+      scaleY={scaleY}
+      indicatorLineColor={indicatorLineColor}
+    />
+  );
+}
+
+function useWindowYScale() {
+  const { spectraBottomMargin } = useScaleChecked();
+  const { height, margin, yDomains } = useChartData();
+  const verticalAlign = useVerticalAlign();
+
+  return getYScale({
+    height,
+    margin,
+    verticalAlign,
+    yDomain: [0, 1],
+    yDomains,
+    spectraBottomMargin,
+  });
+}