feat: support custom tick and axis label styles based on user preferences

src/component/1d/HorizontalAxis1D.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
+import { SVGStyledText } from 'react-science/ui';
 
 import { AxisUnitPicker } from '../1d-2d/components/axis_unit_picker.tsx';
 import { useChartData } from '../context/ChartContext.js';
@@ -11,6 +12,7 @@
   useHorizontalAxisUnit,
 } from '../hooks/use_axis_unit.ts';
 import { useGridline1DConfig } from '../hooks/use_gridlines_config.ts';
+import { useTicksConfig } from '../hooks/use_ticks_config.ts';
 
 import { useIsInset } from './inset/InsetProvider.js';
 
@@ -33,6 +35,7 @@
     'horizontal',
     refAxis,
   );
+  const { labelStyle } = useTicksConfig();
   const gridConfig = useGridline1DConfig();
 
   if (!width || !height) {
@@ -59,9 +62,16 @@
           allowedUnits={allowedUnits}
           onChange={setUnit}
         >
-          <text fill="#000" x={width - 10} y="30" dy="0.70em" textAnchor="end">
+          <SVGStyledText
+            fill="black"
+            x={width - 10}
+            y="30"
+            dy="0.70em"
+            textAnchor="end"
+            {...labelStyle}
+          >
             {unitLabel}
-          </text>
+          </SVGStyledText>
         </AxisUnitPicker>
       )}
     </D3Axis>

src/component/2d/DirectAxis2D.tsx

@@ -1,5 +1,6 @@
 import { memo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
+import { SVGStyledText } from 'react-science/ui';
 
 import { useIsInset } from '../1d/inset/InsetProvider.tsx';
 import { AxisUnitPicker } from '../1d-2d/components/axis_unit_picker.tsx';
@@ -8,6 +9,7 @@
 import { useCheckExportStatus } from '../hooks/useViewportSize.tsx';
 import { axisUnitToLabel, useDirectAxisUnit } from '../hooks/use_axis_unit.ts';
 import { useGridline2DConfig } from '../hooks/use_gridlines_config.ts';
+import { useTicksConfig } from '../hooks/use_ticks_config.ts';
 
 import { useScale2DX } from './utilities/scale.js';
 
@@ -93,11 +95,18 @@
 }
 function UnitLabel(props: UnitLabelProps) {
   const { width, children } = props;
-
+  const { labelStyle } = useTicksConfig();
   return (
-    <text fill="#000" x={width - 60} y="20" dy="0.71em" textAnchor="end">
+    <SVGStyledText
+      fill="black"
+      x={width - 60}
+      y="20"
+      dy="0.71em"
+      textAnchor="end"
+      {...labelStyle}
+    >
       {children}
-    </text>
+    </SVGStyledText>
   );
 }
 

src/component/2d/IndirectAxis2D.tsx

@@ -1,5 +1,6 @@
 import { memo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
+import { SVGStyledText } from 'react-science/ui';
 
 import { useIsInset } from '../1d/inset/InsetProvider.tsx';
 import { AxisUnitPicker } from '../1d-2d/components/axis_unit_picker.tsx';
@@ -13,6 +14,7 @@
   useIndirectAxisUnit,
 } from '../hooks/use_axis_unit.ts';
 import { useGridline2DConfig } from '../hooks/use_gridlines_config.ts';
+import { useTicksConfig } from '../hooks/use_ticks_config.ts';
 
 import { useScale2DY } from './utilities/scale.js';
 
@@ -108,8 +110,8 @@
 }
 function UnitLabel(props: UnitLabelProps) {
   const { children } = props;
-
-  const { getTextWidth } = useTextMetrics({ labelSize: 10 });
+  const { labelStyle } = useTicksConfig();
+  const { getTextWidth } = useTextMetrics({ labelSize: labelStyle.fontSize });
   const labelHeight = getTextWidth(children);
 
   return (
@@ -124,14 +126,16 @@
         y={-5}
         opacity={0.8}
       />
-      <text
-        fill="#000"
+
+      <SVGStyledText
+        fill="black"
         transform="rotate(-90)"
         dominantBaseline="middle"
         textAnchor="end"
+        {...labelStyle}
       >
         {children}
-      </text>
+      </SVGStyledText>
     </>
   );
 }

src/component/elements/D3Axis.tsx

@@ -51,6 +51,8 @@
 
 function BaseLine(props: BaseLineProps) {
   const { axisPosition, tickLength = 6, scale } = props;
+  const { primaryTicks } = useTicksConfig();
+
   const [x1, x2] = scale.range();
   const sign = ['left', 'top'].includes(axisPosition) ? -1 : 1;
 
@@ -60,12 +62,20 @@
     path = `M${sign * tickLength},${x2} H0 V${x1} H${sign * tickLength}`;
   }
 
-  return <path d={path} stroke="black" fill="none" className="domain" />;
+  return (
+    <path
+      d={path}
+      stroke="black"
+      fill="none"
+      className="domain"
+      {...primaryTicks.tickStyle}
+    />
+  );
 }
 
 function Tickets(props: TicketsProps) {
   const { ticks, tickLength = 6, axisPosition } = props;
-  const config = useTicksConfig();
+  const { primaryTicks, secondaryTicks } = useTicksConfig();
 
   if (!Array.isArray(ticks) || ticks.length === 0) return null;
 
@@ -127,19 +137,31 @@
         transform={`translate(${isVertical ? `0,${position}` : `${position},0`})`}
         className="tick"
       >
-        {config.isSecondaryEnabled && isFirst && (
-          <line {...positionSecondaryFirstLineConfig} stroke="black" />
+        {secondaryTicks.enabled && isFirst && (
+          <line
+            {...positionSecondaryFirstLineConfig}
+            stroke="black"
+            {...secondaryTicks.tickStyle}
+          />
         )}
 
-        <line {...positionPrimaryLineConfig} stroke="black" />
-
-        {config.isSecondaryEnabled && (
-          <line {...positionSecondaryLineConfig} stroke="black" />
+        <line
+          {...positionPrimaryLineConfig}
+          stroke="black"
+          {...primaryTicks.tickStyle}
+        />
+
+        {secondaryTicks.enabled && (
+          <line
+            {...positionSecondaryLineConfig}
+            stroke="black"
+            {...secondaryTicks.tickStyle}
+          />
         )}
 
         <SVGStyledText
           fill="black"
-          {...config.textStyle}
+          {...primaryTicks.textStyle}
           {...positionTextConfig}
         >
           {label}

src/component/hooks/usePanelPreferences.ts

@@ -2,8 +2,8 @@ import type {
   MatrixGenerationOptions,
   MultipleSpectraAnalysisPreferences,
   PanelsPreferences,
-  WorkSpacePanelPreferences,
   Workspace,
+  WorkspacePanelPreferences,
 } from '@zakodium/nmrium-core';
 import has from 'lodash/has.js';
 import { useMemo } from 'react';
@@ -128,15 +128,15 @@ export function usePanelPreferences<T extends Panel>(
   ? MatrixGenerationOptions
   : T extends 'multipleSpectraAnalysis'
     ? MultipleSpectraAnalysisPreferences
-    : WorkSpacePanelPreferences[T];
+    : WorkspacePanelPreferences[T];
 export function usePanelPreferences<T extends 'database' | 'prediction'>(
   panelKey: T,
-): WorkSpacePanelPreferences[T];
+): WorkspacePanelPreferences[T];
 
 export function usePanelPreferences<T extends Panel>(
   panelKey: T,
   nucleus?: string,
-): WorkSpacePanelPreferences[T] {
+): WorkspacePanelPreferences[T] {
   const { current } = usePreferences();
   return useMemo(() => {
     return getPanelPreferences(current, panelKey, nucleus);

src/component/hooks/use_ticks_config.ts

@@ -5,11 +5,5 @@ export function useTicksConfig() {
   const { current } = usePreferences();
   const axis = current.axis ?? workspaceDefaultProperties.axis;
 
-  const { textStyle } = axis.primaryTicks;
-  const { enabled } = axis.secondaryTicks;
-
-  return {
-    textStyle,
-    isSecondaryEnabled: enabled,
-  };
+  return axis;
 }

src/component/modal/setting/WorkspaceItem.tsx

@@ -1,4 +1,4 @@
-import type { WorkSpaceSource } from '@zakodium/nmrium-core';
+import type { WorkspaceSource } from '@zakodium/nmrium-core';
 import type { CSSProperties, ChangeEvent, MouseEvent } from 'react';
 import { useState } from 'react';
 import { Button } from 'react-science/ui';
@@ -115,7 +115,7 @@ const style = {
   alignItems: 'center',
 };
 
-const WorkspaceIndicator = (props: { source: WorkSpaceSource }) => {
+const WorkspaceIndicator = (props: { source: WorkspaceSource }) => {
   let letter = '';
   let backgroundColor = 'red';
 

src/component/modal/setting/tanstack_general_settings/tabs/axis_tab.tsx

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import {
   FieldGroupSVGLineStyleFields,
   FieldGroupSVGTextStyleFields,
@@ -9,6 +10,18 @@ import type { z } from 'zod';
 import type { gridlineValidation } from '../validation/axis_tab_validation.ts';
 import { defaultGeneralSettingsFormValues } from '../validation.ts';
 
+// TODO: Expose the Fieldset and Legend components in react-science/ui package
+const Fieldset = styled.fieldset`
+  display: block;
+  border-top: 1px lightgrey groove;
+  min-inline-size: min-content;
+`;
+
+const Legend = styled.legend`
+  display: block;
+  padding-inline-end: 5px;
+`;
+
 export const AxisTab = withForm({
   defaultValues: defaultGeneralSettingsFormValues,
   render: ({ form }) => {
@@ -28,18 +41,69 @@ const TicksSection = withFieldGroup({
     const { AppField, Section } = group;
 
     return (
-      <Section title="Ticks">
-        <FieldGroupSVGTextStyleFields
-          form={group}
-          fields="primaryTicks.textStyle"
-          label="Annotation style"
-          previewText="0"
-        />
-        <hr />
-        <AppField name="secondaryTicks.enabled">
-          {({ Checkbox }) => <Checkbox label="Show secondary ticks" />}
-        </AppField>
-      </Section>
+      <>
+        <Section title="Axis label">
+          <FieldGroupSVGTextStyleFields
+            form={group}
+            fields="labelStyle"
+            label="Style"
+            previewText="0"
+          />
+        </Section>
+        <Section title="Primary ticks">
+          <FieldGroupSVGTextStyleFields
+            form={group}
+            fields="primaryTicks.textStyle"
+            label="Label style"
+            previewText="0"
+          />
+          <Fieldset>
+            <Legend>Line style</Legend>
+            <group.AppField name="primaryTicks.tickStyle.stroke">
+              {(field) => <field.ColorPicker label="Color" disableAlpha />}
+            </group.AppField>
+            <group.AppField name="primaryTicks.tickStyle.strokeOpacity">
+              {(field) => (
+                <field.NumericInput
+                  label="Opacity"
+                  min={0}
+                  max={1}
+                  minorStepSize={0.01}
+                  step={0.05}
+                  majorStepSize={0.1}
+                />
+              )}
+            </group.AppField>
+            <group.AppField name="primaryTicks.tickStyle.strokeWidth">
+              {(field) => <field.NumericInput label="Width" />}
+            </group.AppField>
+          </Fieldset>
+        </Section>
+
+        <Section title="Secondary ticks">
+          <AppField name="secondaryTicks.enabled">
+            {({ Checkbox }) => <Checkbox label="Show secondary ticks" />}
+          </AppField>
+          <group.AppField name="secondaryTicks.tickStyle.stroke">
+            {(field) => <field.ColorPicker label="Color" disableAlpha />}
+          </group.AppField>
+          <group.AppField name="secondaryTicks.tickStyle.strokeOpacity">
+            {(field) => (
+              <field.NumericInput
+                label="Opacity"
+                min={0}
+                max={1}
+                minorStepSize={0.01}
+                step={0.05}
+                majorStepSize={0.1}
+              />
+            )}
+          </group.AppField>
+          <group.AppField name="secondaryTicks.tickStyle.strokeWidth">
+            {(field) => <field.NumericInput label="Width" />}
+          </group.AppField>
+        </Section>
+      </>
     );
   },
 });

src/component/modal/setting/tanstack_general_settings/validation/axis_tab_validation.ts

@@ -14,10 +14,24 @@ const gridlinesValidation = z.object({
   secondary: gridlineValidation,
 });
 
+const primaryTicksValidation = z.object({
+  textStyle: svgTextStyleFieldsSchema,
+  tickStyle: svgLineStyleFieldsSchema.omit({
+    strokeDasharray: true,
+  }),
+});
+const secondaryTicksValidation = z.object({
+  enabled: z.boolean(),
+  tickStyle: svgLineStyleFieldsSchema.omit({
+    strokeDasharray: true,
+  }),
+});
+
 export const axisValidation = z
   .object({
-    primaryTicks: z.object({ textStyle: svgTextStyleFieldsSchema }),
-    secondaryTicks: z.object({ enabled: z.boolean() }),
+    labelStyle: svgTextStyleFieldsSchema,
+    primaryTicks: primaryTicksValidation,
+    secondaryTicks: secondaryTicksValidation,
     gridlines1D: gridlinesValidation,
     gridlines2D: gridlinesValidation,
   })