feat: implement axis unit picker behind experimental flag

package.json

@@ -71,8 +71,8 @@
     "@tanstack/react-form": "^1.28.3",
     "@tanstack/react-table": "^8.21.3",
     "@zakodium/nmr-types": "^0.5.3",
-    "@zakodium/nmrium-core": "^0.7.2",
-    "@zakodium/nmrium-core-plugins": "^0.7.2",
+    "@zakodium/nmrium-core": "^0.7.4",
+    "@zakodium/nmrium-core-plugins": "^0.7.6",
     "@zakodium/pdnd-esm": "^1.0.2",
     "@zip.js/zip.js": "^2.8.22",
     "cheminfo-font": "^1.20.0",
@@ -117,6 +117,7 @@
     "react-science": "^19.10.2",
     "react-table": "^7.8.0",
     "smart-array-filter": "^5.0.0",
+    "ts-pattern": "^5.9.0",
     "yup": "^1.7.1",
     "zod": "^4.3.6"
   },

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

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import type { AxisUnit } from '@zakodium/nmrium-core';
+import type { ReactNode } from 'react';
+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 {
+  unit: AxisUnit;
+  allowedUnits: AxisUnit[];
+  onChange: (unit: AxisUnit) => void;
+  children: ReactNode;
+}
+
+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,
+    roleStructure: 'listoption',
+    text: axisUnitToLabel[allowedUnit],
+    selected: allowedUnit === unit,
+    data: { unit: allowedUnit } as Data,
+  }));
+
+  function onSelect(data?: object) {
+    assert(data);
+    const { unit } = data as Data;
+    onChange(unit);
+  }
+
+  return (
+    <ContextMenuStyled
+      as="g"
+      className="unit"
+      options={options}
+      onSelect={onSelect}
+    >
+      {children}
+    </ContextMenuStyled>
+  );
+}
+
+const ContextMenuStyled = styled(ContextMenu)`
+  pointer-events: auto;
+  cursor: context-menu;
+`;
+
+interface Data {
+  unit: AxisUnit;
+}

src/component/1d/HorizontalAxis1D.tsx

@@ -1,28 +1,32 @@
-import type { AxisUnit } from '@zakodium/nmrium-core';
 import { useMemo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
 
+import { AxisUnitPicker } from '../1d-2d/components/axis_unit_picker.tsx';
 import { useChartData } from '../context/ChartContext.js';
 import { useScaleChecked } from '../context/ScaleContext.js';
 import { D3Axis } from '../elements/D3Axis.js';
 import { useCheckExportStatus } from '../hooks/useViewportSize.js';
-import { axisUnitToLabel } from '../hooks/use_axis_unit.ts';
+import {
+  axisUnitToLabel,
+  useHorizontalAxisUnit,
+} from '../hooks/use_axis_unit.ts';
 import { useGridline1DConfig } from '../hooks/use_gridlines_config.ts';
 
 import { useIsInset } from './inset/InsetProvider.js';
 
 export function HorizontalAxis1D() {
-  const { height, width, margin, mode } = useChartData();
+  const { height, width, margin } = useChartData();
   const { scaleX } = useScaleChecked();
   const isInset = useIsInset();
   const isExportingProcessStart = useCheckExportStatus();
 
-  const chartUnit: AxisUnit = mode === 'RTL' ? 'ppm' : 's';
-  const label = axisUnitToLabel[chartUnit];
+  const { unit, allowedUnits, setUnit } = useHorizontalAxisUnit();
+  const unitLabel = axisUnitToLabel[unit];
 
   const refAxis = useRef<SVGGElement>(null);
 
   const scaler = useMemo(() => {
+    // TODO apply unit conversion
     return scaleX(null);
   }, [scaleX]);
   const { ticks, scale: ticksScale } = useLinearPrimaryTicks(
@@ -51,9 +55,15 @@
       secondaryGridProps={gridConfig.secondary.lineStyle}
     >
       {!isInset && (
-        <text fill="#000" x={width - 10} y="30" dy="0.70em" textAnchor="end">
-          {label}
-        </text>
+        <AxisUnitPicker
+          unit={unit}
+          allowedUnits={allowedUnits}
+          onChange={setUnit}
+        >
+          <text fill="#000" x={width - 10} y="30" dy="0.70em" textAnchor="end">
+            {unitLabel}
+          </text>
+        </AxisUnitPicker>
       )}
     </D3Axis>
   );

src/component/1d/LinesSeries.tsx

@@ -1,14 +1,13 @@
 import styled from '@emotion/styled';
-import type { Spectrum1D } from '@zakodium/nmrium-core';
 
 import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
-import { isSpectrum1D } from '../../data/data1d/Spectrum1D/isSpectrum1D.js';
 import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
 import { useChartData } from '../context/ChartContext.js';
 import { useScaleChecked } from '../context/ScaleContext.js';
 import { useActiveSpectra } from '../hooks/useActiveSpectra.js';
 import { useSetActiveSpectrumAction } from '../hooks/useSetActiveSpectrumAction.js';
 import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
+import { useVisibleSpectra1D } from '../hooks/use_visible_spectra_1d.ts';
 
 import Line from './Line.js';
 import { useInsetOptions } from './inset/InsetProvider.js';
@@ -23,23 +22,9 @@ const Rect = styled.rect`
   }
 `;
 
-function useSpectra() {
-  const { xDomains, data } = useChartData();
-
-  const inset = useInsetOptions();
-
-  if (inset) {
-    return data?.filter((d) => isSpectrum1D(d) && d.id === inset.spectrumKey);
-  }
-
-  return data?.filter(
-    (d) => isSpectrum1D(d) && d.display.isVisible && xDomains[d.id],
-  );
-}
-
 function LinesSeries() {
   const activeSpectra = useActiveSpectra();
-  const spectra = useSpectra() as Spectrum1D[];
+  const spectra = useVisibleSpectra1D();
   const { id: insetKey = 'primary' } = useInsetOptions() || {};
 
   return (

src/component/2d/DirectAxis2D.tsx

@@ -1,13 +1,12 @@
-import type { AxisUnit, Spectrum2D } from '@zakodium/nmrium-core';
 import { memo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
 
 import { useIsInset } from '../1d/inset/InsetProvider.tsx';
+import { AxisUnitPicker } from '../1d-2d/components/axis_unit_picker.tsx';
 import { useChartData } from '../context/ChartContext.js';
 import { D3Axis } from '../elements/D3Axis.js';
-import useSpectrum from '../hooks/useSpectrum.js';
 import { useCheckExportStatus } from '../hooks/useViewportSize.tsx';
-import { axisUnitToLabel } from '../hooks/use_axis_unit.ts';
+import { axisUnitToLabel, useDirectAxisUnit } from '../hooks/use_axis_unit.ts';
 import { useGridline2DConfig } from '../hooks/use_gridlines_config.ts';
 
 import { useScale2DX } from './utilities/scale.js';
@@ -27,11 +26,9 @@
   const { margin: marginProps = defaultMargin } = props;
 
   const { height, width, margin } = useChartData();
-  const spectrum = useSpectrum() as Spectrum2D;
-
-  const spectrumUnit: AxisUnit = spectrum?.info?.isFid ? 's' : 'ppm';
-  const unitLabel = axisUnitToLabel[spectrumUnit];
 
+  const axis = useDirectAxisUnit();
+  // TODO apply `axis.unit` conversion
   const scaleX = useScale2DX();
   const isInset = useIsInset();
   const isExportingProcessStart = useCheckExportStatus();
@@ -65,11 +62,44 @@
       primaryGridProps={gridConfig.primary.lineStyle}
       secondaryGridProps={gridConfig.secondary.lineStyle}
     >
-      <text fill="#000" x={width - 60} y="20" dy="0.71em" textAnchor="end">
-        {unitLabel}
-      </text>
+      <Unit width={width - 60} axis={axis} />
     </D3Axis>
   );
 }
 
+interface UnitProps {
+  width: number;
+  axis: ReturnType<typeof useDirectAxisUnit>;
+}
+function Unit(props: UnitProps) {
+  const { width, axis } = props;
+
+  if (!axis) {
+    return <UnitLabel width={width}>{axisUnitToLabel.ppm}</UnitLabel>;
+  }
+
+  const { unit, allowedUnits, setUnit } = axis;
+  const label = axisUnitToLabel[unit];
+
+  return (
+    <AxisUnitPicker unit={unit} allowedUnits={allowedUnits} onChange={setUnit}>
+      <UnitLabel width={width}>{label}</UnitLabel>
+    </AxisUnitPicker>
+  );
+}
+
+interface UnitLabelProps {
+  width: number;
+  children: string;
+}
+function UnitLabel(props: UnitLabelProps) {
+  const { width, children } = props;
+
+  return (
+    <text fill="#000" x={width - 60} y="20" dy="0.71em" textAnchor="end">
+      {children}
+    </text>
+  );
+}
+
 export default memo(DirectAxis2D);