feat: wip: implement scale conversion

for `HorizontalAxis1D`

Closes: #4040

Author: tpoisseau

src/component/1d/HorizontalAxis1D.tsx

@@ -20,15 +20,14 @@ export function HorizontalAxis1D() {
   const isInset = useIsInset();
   const isExportingProcessStart = useCheckExportStatus();
 
-  const { unit, allowedUnits, setUnit } = useHorizontalAxisUnit();
+  const { unit, allowedUnits, setUnit, domain } = useHorizontalAxisUnit();
   const unitLabel = axisUnitToLabel[unit];
 
   const refAxis = useRef<SVGGElement>(null);
 
   const scaler = useMemo(() => {
-    // TODO apply unit conversion
-    return scaleX(null);
-  }, [scaleX]);
+    return scaleX({ customDomain: domain });
+  }, [domain, scaleX]);
   const { ticks, scale: ticksScale } = useLinearPrimaryTicks(
     scaler,
     'horizontal',

src/component/1d/Line.tsx

@@ -29,7 +29,7 @@ function Line({ data, id, display, index }: LineProps) {
 
   const paths = useMemo(() => {
     const _scaleX = scaleX();
-    const _scaleY = scaleY(id);
+    const _scaleY = scaleY({ spectrumId: id });
 
     const pathBuilder = new PathBuilder();
     if (data?.x && data?.y && _scaleX(0)) {

src/component/1d/multiplicityTree/MultiplicityTree.tsx

@@ -44,7 +44,7 @@ export default function MultiplicityTree(props: MultiplicityTreeProps) {
   if (!spectrum || !isSpectrum1D(spectrum)) return null;
   const { from, to } = range;
   const maxY = getMaxY(spectrum, { from, to });
-  const startY = scaleY(spectrum.id)(maxY) - marginBottom;
+  const startY = scaleY({ spectrumId: spectrum.id })(maxY) - marginBottom;
 
   const tree = generateTreeNodes(range, spectrum);
 

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

@@ -178,7 +178,7 @@ function PeakAnnotation({
   const { scaleX, scaleY } = useScaleChecked();
 
   const sx = scaleX()(x);
-  const sy = scaleY(spectrumKey)(y) - 5;
+  const sy = scaleY({ spectrumId: spectrumKey })(y) - 5;
 
   const { y1, y2 } = getLineYCoordinates(sign, isOverlap);
 

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

@@ -93,7 +93,7 @@ export function PeakEditionProvider({ children }: Required<PropsWithChildren>) {
     }
     y = py + dy;
     if (useScaleY) {
-      y = scaleY(spectrum?.id)(py) + dy;
+      y = scaleY({ spectrumId: spectrum?.id })(py) + dy;
     }
 
     if (x + InputDimension.width > width) {

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

@@ -53,7 +53,7 @@ export function usePeakShapesPath(spectrum: Spectrum1D) {
         break;
     }
     const _scaleX = scaleX();
-    const _scaleY = scaleY(spectrum.id);
+    const _scaleY = scaleY({ spectrumId: spectrum.id });
 
     const pathBuilder = new PathBuilder();
     let fill = 'transparent';

src/component/1d/tool/PeakPointer.tsx

@@ -65,7 +65,9 @@ function PeakPointer() {
   if (!closePeak) return null;
 
   const x = scaleX()(closePeak.x);
-  const y = scaleY(activeSpectrum.id)(closePeak.y) - spectrumIndex * shiftY;
+  const y =
+    scaleY({ spectrumId: activeSpectrum.id })(closePeak.y) -
+    spectrumIndex * shiftY;
 
   return (
     <div

src/component/1d/utilities/scale.ts

@@ -2,6 +2,7 @@ import { scaleLinear } from 'd3-scale';
 import { useCallback } from 'react';
 
 import { useChartData } from '../../context/ChartContext.js';
+import type { ScaleLinearNumberOptions } from '../../context/ScaleContext.tsx';
 import type {
   Domains,
   Margin,
@@ -16,7 +17,7 @@ interface ScaleInsetXOptions {
   xDomain: number[];
   mode: SpectraDirection;
 }
-interface ScaleXOptions extends ScaleInsetXOptions {
+interface ScaleXOptions extends ScaleInsetXOptions, ScaleLinearNumberOptions {
   xDomains: Domains;
 }
 
@@ -27,7 +28,7 @@ interface InsetYScaleOptions {
   spectraBottomMargin: number;
 }
 
-interface ScaleYOptions extends InsetYScaleOptions {
+interface ScaleYOptions extends InsetYScaleOptions, ScaleLinearNumberOptions {
   yDomains: Domains;
   verticalAlign: VerticalAlignment;
 }
@@ -47,34 +48,40 @@ function getInsetYScale(options: InsetYScaleOptions) {
   return scaleLinear(yDomain, [innerHeight, margin.top]);
 }
 
-function getXScale(
-  options: ScaleXOptions,
-  spectrumId: number | null | string = null,
-) {
-  const { width, margin, xDomains, xDomain, mode } = options;
+function getXScale(options: ScaleXOptions) {
+  const { width, margin, xDomains, xDomain, mode, spectrumId, customDomain } =
+    options;
+
   const range =
     mode === 'RTL'
       ? [width - margin.right, margin.left]
       : [margin.left, width - margin.right];
-  return scaleLinear(spectrumId ? xDomains[spectrumId] : xDomain, range);
+
+  let domain = spectrumId ? xDomains[spectrumId] : xDomain;
+  if (customDomain) {
+    domain = customDomain;
+  }
+  return scaleLinear(domain, range);
 }
 
-function getYScale(
-  options: ScaleYOptions,
-  spectrumId: number | null | string = null,
-) {
+function getYScale(options: ScaleYOptions) {
   const {
     height,
     margin,
     verticalAlign,
     yDomain,
     yDomains,
     spectraBottomMargin = 10,
+    spectrumId = null,
+    customDomain,
   } = options;
   let domainY: number[] = yDomain;
   if (spectrumId && yDomains?.[spectrumId]) {
     domainY = yDomains[spectrumId];
   }
+  if (customDomain) {
+    domainY = customDomain;
+  }
   const [min, max] = domainY;
   let bottomShift = spectraBottomMargin;
 
@@ -126,7 +133,7 @@ function useScaleX() {
         return getInsetXScale({ margin, mode, width, xDomain });
       }
 
-      return getXScale({ margin, mode, width, xDomain, xDomains }, spectrumId);
+      return getXScale({ margin, mode, width, xDomain, xDomains, spectrumId });
     },
     [isInset, margin, mode, width, xDomain, xDomains],
   );

src/component/context/ScaleContext.tsx

@@ -14,8 +14,12 @@ import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
 
 import { useChartData } from './ChartContext.js';
 
+export interface ScaleLinearNumberOptions {
+  spectrumId?: number | null | string;
+  customDomain?: number[];
+}
 type ScaleLinearNumberFunction = (
-  spectrumId?: number | null | string,
+  options?: ScaleLinearNumberOptions,
 ) => ScaleLinear<number, number, number>;
 
 interface ScaleState {
@@ -59,7 +63,7 @@ export function ScaleProvider({ children }: Required<PropsWithChildren>) {
   const isInset = useIsInset();
 
   const scaleX = useCallback<ScaleLinearNumberFunction>(
-    (spectrumId = null) => {
+    (options) => {
       if (isInset) {
         return getInsetXScale({
           width,
@@ -69,28 +73,26 @@ export function ScaleProvider({ children }: Required<PropsWithChildren>) {
         });
       }
 
-      return getXScale({ width, margin, xDomains, xDomain, mode }, spectrumId);
+      return getXScale({ ...options, width, margin, xDomains, xDomain, mode });
     },
     [isInset, margin, mode, width, xDomain, xDomains],
   );
 
   const scaleY = useCallback<ScaleLinearNumberFunction>(
-    (spectrumId = null) => {
+    (options) => {
       if (isInset) {
         return getInsetYScale({ height, yDomain, margin, spectraBottomMargin });
       }
 
-      return getYScale(
-        {
-          height,
-          margin,
-          yDomains,
-          yDomain,
-          verticalAlign,
-          spectraBottomMargin,
-        },
-        spectrumId,
-      );
+      return getYScale({
+        ...options,
+        height,
+        margin,
+        yDomains,
+        yDomain,
+        verticalAlign,
+        spectraBottomMargin,
+      });
     },
     [
       spectraBottomMargin,

src/component/hooks/use_axis_unit.ts

@@ -23,8 +23,11 @@ import { match } from 'ts-pattern';
 import { isSpectrum2D } from '../../data/data2d/Spectrum2D/index.ts';
 import { useChartData } from '../context/ChartContext.tsx';
 import { useDispatch } from '../context/DispatchContext.tsx';
+import { useScaleChecked } from '../context/ScaleContext.tsx';
 
 import { useActiveNucleusTab } from './useActiveNucleusTab.ts';
+import { useActiveSpectra } from './useActiveSpectra.ts';
+import { useActiveSpectrum } from './useActiveSpectrum.ts';
 import useSpectrum from './useSpectrum.ts';
 import { useVisibleSpectra1D } from './use_visible_spectra_1d.ts';
 
@@ -43,16 +46,54 @@ function assertIn<V, T extends V>(value: V, values: T[]): asserts value is T {
 
 export function useHorizontalAxisUnit() {
   const spectra = useVisibleSpectra1D();
+  const activeSpectra = useActiveSpectra();
+  const firstActiveSpectrum = useMemo(() => {
+    const firstSelected = activeSpectra?.find((s) => s.selected);
+    return firstSelected
+      ? spectra.find((s) => s.id === firstSelected.id)
+      : spectra[0];
+  }, [activeSpectra, spectra]);
+  const { scaleX } = useScaleChecked();
+
   const { nucleus, nucleusUnits } = useAxisUnit1D();
   const dispatch = useDispatch();
 
-  const mode: keyof Nucleus1DUnit['horizontal'] = spectra[0]?.info.isFt
+  const mode: keyof Nucleus1DUnit['horizontal'] = firstActiveSpectrum?.info.isFt
     ? 'ft'
     : 'fid';
   const unit: AxisUnit1DFid | AxisUnit1DFt = nucleusUnits.horizontal[mode];
   const allowedUnits: AxisUnit1DFid[] | AxisUnit1DFt[] =
     mode === 'ft' ? axisUnits1DFt : axisUnits1DFid;
 
+  const domain = useMemo(() => {
+    function getPtDomain() {
+      return [0, firstActiveSpectrum?.data.x.length ?? 0];
+    }
+
+    return match(mode)
+      .with('fid', () =>
+        match(unit)
+          .with('s', () => undefined)
+          .with('pt', getPtDomain)
+          .run(),
+      )
+      .with('ft', () =>
+        match(unit)
+          .with('ppm', () => undefined)
+          .with('pt', getPtDomain)
+          .with('hz', () => {
+            if (!firstActiveSpectrum) return undefined;
+
+            const scale = scaleX();
+            return scale
+              .domain()
+              .map((v) => v * firstActiveSpectrum.info.originFrequency);
+          })
+          .run(),
+      )
+      .exhaustive();
+  }, [firstActiveSpectrum, mode, scaleX, unit]);
+
   const setUnit = useCallback(
     (unit: AxisUnit) => {
       match(mode)
@@ -75,7 +116,7 @@ export function useHorizontalAxisUnit() {
     [dispatch, mode, nucleus],
   );
 
-  return { mode, unit, allowedUnits, setUnit };
+  return { mode, unit, allowedUnits, setUnit, domain };
 }
 
 export function useDirectAxisUnit() {