feat: implement scale conversion

src/component/1d-2d/components/axis_unit_picker.tsx

@@ -5,7 +5,6 @@ import { assert } from 'react-science/ui';
 
 import type { ContextMenuItem } from '../../elements/ContextMenuBluePrint.tsx';
 import { ContextMenu } from '../../elements/ContextMenuBluePrint.tsx';
-import useCheckExperimentalFeature from '../../hooks/useCheckExperimentalFeature.ts';
 import { axisUnitToLabel } from '../../hooks/use_axis_unit.ts';
 
 interface AxisUnitPickerProps {
@@ -17,9 +16,6 @@ interface AxisUnitPickerProps {
 
 export function AxisUnitPicker(props: AxisUnitPickerProps) {
   const { unit, allowedUnits, onChange, children } = props;
-  const isExperimental = useCheckExperimentalFeature();
-
-  if (!isExperimental) return children;
 
   const options: ContextMenuItem[] = allowedUnits.map((allowedUnit) => ({
     key: allowedUnit,

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 @@
   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);
 
@@ -242,7 +242,7 @@
 
               return (
                 <text
                   key={index}
                   x={x1}
                   y={startY + y}
                   textAnchor="middle"

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/2d/1d-tracer/VerticalSliceChart.tsx

@@ -22,7 +22,7 @@ interface usePathOptions extends BaseProps {
 function usePath(data: NmrData1D, props: usePathOptions) {
   const { reverse, width = 100, horizontalMargin = 10 } = props;
   const { mode } = useChartData();
-  const scaleX = useScale2DY(reverse);
+  const scaleX = useScale2DY({ reverse });
   const spectrum = useSpectrum() as Spectrum2D;
 
   if (!data || !spectrum) {

src/component/2d/DirectAxis2D.tsx

@@ -28,8 +28,7 @@ function DirectAxis2D(props: DirectAxis2DProps) {
   const { height, width, margin } = useChartData();
 
   const axis = useDirectAxisUnit();
-  // TODO apply `axis.unit` conversion
-  const scaleX = useScale2DX();
+  const scaleX = useScale2DX({ customDomain: axis?.domain });
   const isInset = useIsInset();
   const isExportingProcessStart = useCheckExportStatus();
 

src/component/2d/IndirectAxis2D.tsx

@@ -38,8 +38,9 @@ function IndirectAxis2D(props: IndirectAxis2DProps) {
 
   const matchNucleus = /^[0-9]+[A-Z][a-z]?$/.test(maybeNucleusUnit);
 
-  // TODO apply `axis.unit` conversion
-  const scaleY = useScale2DY();
+  const scaleY = useScale2DY({
+    customDomain: matchNucleus ? axis?.domain : undefined,
+  });
   const isInset = useIsInset();
   const isExportingProcessStart = useCheckExportStatus();
 

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

@@ -22,11 +22,21 @@ function get2DXScale(options: Scale2DXOptions, reverse?: boolean) {
   return scaleLinear(xDomain, range);
 }
 
-function useScale2DX(reverse?: boolean) {
+interface UseScale2DDirectOptions {
+  reverse?: boolean;
+  customDomain?: number[];
+}
+function useScale2DX(options?: UseScale2DDirectOptions) {
+  const { reverse, customDomain } = options ?? {};
   const { width, margin, xDomain, mode } = useChartData();
+
   return useMemo(
-    () => get2DXScale({ width, margin, xDomain, mode }, reverse),
-    [margin, mode, reverse, width, xDomain],
+    () =>
+      get2DXScale(
+        { width, margin, xDomain: customDomain ?? xDomain, mode },
+        reverse,
+      ),
+    [customDomain, margin, mode, reverse, width, xDomain],
   );
 }
 
@@ -46,11 +56,21 @@ function get2DYScale(options: Scale2DYOptions, reverse = false) {
   );
 }
 
-function useScale2DY(reverse?: boolean) {
+interface UseScale2DIndirectOptions {
+  reverse?: boolean;
+  customDomain?: number[];
+}
+function useScale2DY(options?: UseScale2DIndirectOptions) {
+  const { reverse, customDomain } = options ?? {};
   const { height, margin, yDomain } = useChartData();
+
   return useMemo(
-    () => get2DYScale({ height, margin, yDomain }, reverse),
-    [height, margin, reverse, yDomain],
+    () =>
+      get2DYScale(
+        { height, margin, yDomain: customDomain ?? yDomain },
+        reverse,
+      ),
+    [customDomain, height, margin, reverse, yDomain],
   );
 }
 

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,